/* ============================================================
   TRANG-TRONG.CSS — CHUYÊN MỤC / BÀI VIẾT / TRANG TĨNH / TÌM KIẾM / 404
   AloxoVN — dùng lại toàn bộ biến màu của trang chủ (trang-chu.css)
   Không có một dòng !important nào: viết trên nền theme sạch
   ============================================================ */

/* ------------------------------------------------------------
   0. KHUNG TRANG CHUNG
   ------------------------------------------------------------ */
.alx-page {
    padding: 0 0 72px;
    min-height: 60vh;
}

.alx-wrap {
    max-width: var(--alx-container);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

/* Lưới nội dung + cột bên phải */
.alx-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
}

.alx-layout--rong {
    grid-template-columns: minmax(0, 1fr);
}

.alx-main { min-width: 0; }

/* ------------------------------------------------------------
   1. ĐƯỜNG DẪN PHÂN CẤP (BREADCRUMB)
   ------------------------------------------------------------ */
.alx-crumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 18px 0 20px;
    font-size: 13.5px;
    color: var(--alx-text-faint);
}

.alx-crumb a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--alx-text-muted);
    font-weight: 500;
    padding: 4px 9px;
    border-radius: var(--alx-radius-xs);
    transition: all var(--alx-transition-fast);
}

.alx-crumb a:hover {
    color: var(--alx-primary);
    background: var(--alx-primary-soft);
}

.alx-crumb svg { flex-shrink: 0; }

.alx-crumb__sep {
    color: var(--alx-border-strong);
    display: inline-flex;
    align-items: center;
}

.alx-crumb__now {
    color: var(--alx-text);
    font-weight: 600;
    padding: 4px 0;
    max-width: 42ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   2. KHỐI ĐẦU CHUYÊN MỤC
   ------------------------------------------------------------ */
.alx-cat-head {
    position: relative;
    background: var(--alx-gradient-hero);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-lg);
    padding: 38px 40px;
    margin-bottom: 32px;
    overflow: hidden;
}

/* Vệt sáng trang trí góc phải, thuần CSS nên không tốn request ảnh */
.alx-cat-head::after {
    content: '';
    position: absolute;
    top: -80px;
    right: -60px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(24, 119, 242, 0.14) 0%, rgba(24, 119, 242, 0) 70%);
    pointer-events: none;
}

.alx-cat-head__inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.alx-cat-head__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    background: var(--alx-surface);
    color: var(--alx-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: var(--alx-radius-full);
    border: 1px solid var(--alx-border);
    box-shadow: var(--alx-shadow-xs);
    margin-bottom: 16px;
}

.alx-cat-head__title {
    font-family: var(--alx-font-heading);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.6px;
    color: var(--alx-text);
    margin: 0 0 14px;
}

.alx-cat-head__desc {
    font-size: 16px;
    line-height: 1.7;
    color: var(--alx-text-muted);
    margin: 0 0 20px;
    max-width: 68ch;
}

.alx-cat-head__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    font-size: 14px;
    color: var(--alx-text-muted);
    font-weight: 500;
}

.alx-cat-head__meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.alx-cat-head__meta strong {
    color: var(--alx-primary-dark);
    font-weight: 700;
}

/* ------------------------------------------------------------
   3. THẺ BÀI VIẾT
   ------------------------------------------------------------ */

/* 3a. Thẻ bài nổi bật — nằm ngang, ảnh bên trái */
.alx-noi-bat {
    display: grid;
    grid-template-columns: 46% minmax(0, 1fr);
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-lg);
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: var(--alx-shadow-sm);
    transition: box-shadow var(--alx-transition), transform var(--alx-transition);
}

.alx-noi-bat:hover {
    box-shadow: var(--alx-shadow-md);
    transform: translateY(-2px);
}

.alx-noi-bat__anh {
    position: relative;
    display: block;
    /* Không đặt tỉ lệ cố định: ô lưới tự kéo đầy chiều cao thẻ,
       nhờ vậy không hở mảng trắng khi phần chữ bên phải dài hơn ảnh */
    min-height: 264px;
    height: 100%;
    overflow: hidden;
    background: var(--alx-bg-alt);
}

.alx-noi-bat__anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.alx-noi-bat:hover .alx-noi-bat__anh img { transform: scale(1.04); }

.alx-noi-bat__body {
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alx-noi-bat__title {
    font-family: var(--alx-font-heading);
    font-size: 23px;
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.3px;
    margin: 12px 0 12px;
}

.alx-noi-bat__title a {
    color: var(--alx-text);
    background-image: linear-gradient(var(--alx-primary), var(--alx-primary));
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--alx-transition), color var(--alx-transition-fast);
}

.alx-noi-bat__title a:hover {
    color: var(--alx-primary);
    background-size: 100% 2px;
}

.alx-noi-bat__excerpt {
    font-size: 15px;
    line-height: 1.7;
    color: var(--alx-text-muted);
    margin: 0 0 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

/* 3b. Lưới bài viết thường */
.alx-luoi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 36px;
}

.alx-luoi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.alx-the {
    display: flex;
    flex-direction: column;
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius);
    overflow: hidden;
    box-shadow: var(--alx-shadow-xs);
    transition: box-shadow var(--alx-transition), transform var(--alx-transition), border-color var(--alx-transition);
}

.alx-the:hover {
    box-shadow: var(--alx-shadow);
    border-color: var(--alx-border-strong);
    transform: translateY(-3px);
}

.alx-the__anh {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--alx-bg-alt);
}

.alx-the__anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.alx-the:hover .alx-the__anh img { transform: scale(1.05); }

.alx-the__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.alx-the__title {
    font-family: var(--alx-font-heading);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.42;
    margin: 10px 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
}

.alx-the__title a {
    color: var(--alx-text);
    transition: color var(--alx-transition-fast);
}

.alx-the__title a:hover { color: var(--alx-primary); }

.alx-the__excerpt {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--alx-text-muted);
    margin: 0 0 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.alx-the__foot { margin-top: auto; }

/* 3c. Nhãn chuyên mục nổi trên ảnh */
.alx-nhan-cat {
    position: absolute;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--alx-primary-dark);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: var(--alx-radius-xs);
    box-shadow: var(--alx-shadow-xs);
    z-index: 2;
    transition: all var(--alx-transition-fast);
}

.alx-nhan-cat:hover {
    background: var(--alx-primary);
    color: var(--alx-white);
}

/* Nhãn cảnh báo dự án lừa đảo — site có nhiều bài đánh giá dạng này */
.alx-nhan-canh-bao {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--alx-danger);
    color: var(--alx-white);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    border-radius: var(--alx-radius-xs);
    box-shadow: 0 2px 8px rgba(228, 30, 63, 0.32);
    z-index: 2;
}

/* 3d. Dòng thông tin phụ của bài */
.alx-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: 13px;
    color: var(--alx-text-faint);
    font-weight: 500;
}

.alx-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.alx-meta svg {
    flex-shrink: 0;
    opacity: 0.75;
}

/* ------------------------------------------------------------
   4. PHÂN TRANG KIỂU GOOGLE
   ------------------------------------------------------------ */
.alx-phan-trang {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 0;
}

.alx-trang-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 13px;
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-sm);
    color: var(--alx-text-body);
    font-size: 15px;
    font-weight: 600;
    transition: all var(--alx-transition-fast);
}

.alx-trang-link:hover {
    border-color: var(--alx-primary);
    color: var(--alx-primary);
    background: var(--alx-primary-tint);
}

.alx-trang-link.active {
    background: var(--alx-primary);
    border-color: var(--alx-primary);
    color: var(--alx-white);
    box-shadow: var(--alx-shadow-blue-sm);
    pointer-events: none;
}

.alx-trang-link.disabled {
    opacity: 0.4;
    pointer-events: none;
    background: var(--alx-bg-alt);
}

.alx-trang-cham {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 42px;
    color: var(--alx-text-faint);
    font-weight: 700;
    user-select: none;
}

/* ------------------------------------------------------------
   5. CỘT BÊN
   ------------------------------------------------------------ */
/*
 * Cột bên cuộn tự nhiên cùng nội dung, KHÔNG ghim dính.
 *
 * Trước đây dùng position: sticky, nhưng cột bên của AloxoVN cao hơn màn hình
 * (tìm kiếm + chuyên mục + bài xem nhiều + kêu gọi + thẻ). Khi nội dung dính
 * cao hơn khung nhìn, nó khoá lại ngay lúc chạm mép trên và phần dưới cùng
 * KHÔNG BAO GIỜ cuộn tới được — người đọc không thấy được khối cuối.
 */
.alx-sidebar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.alx-wg {
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius);
    padding: 20px 22px 22px;
    box-shadow: var(--alx-shadow-xs);
}

.alx-wg__title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--alx-font-heading);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--alx-text);
    margin: 0 0 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--alx-border-soft);
}

.alx-wg__title svg { color: var(--alx-primary); flex-shrink: 0; }

/* 5a. Ô tìm kiếm */
.alx-wg-search form {
    position: relative;
    display: flex;
}

.alx-wg-search input {
    width: 100%;
    height: 46px;
    padding: 0 46px 0 15px;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-sm);
    font-family: var(--alx-font);
    font-size: 15px;
    color: var(--alx-text-body);
    transition: all var(--alx-transition-fast);
}

.alx-wg-search input::placeholder { color: var(--alx-text-faint); }

.alx-wg-search input:focus {
    outline: none;
    background: var(--alx-surface);
    border-color: var(--alx-primary);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}

.alx-wg-search button {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--alx-primary);
    border: none;
    border-radius: var(--alx-radius-xs);
    color: var(--alx-white);
    cursor: pointer;
    transition: background var(--alx-transition-fast);
}

.alx-wg-search button:hover { background: var(--alx-primary-hover); }

/* 5b. Danh sách chuyên mục */
.alx-wg-cats { list-style: none; margin: 0; padding: 0; }

.alx-wg-cats li + li { border-top: 1px solid var(--alx-border-soft); }

.alx-wg-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--alx-text-body);
    transition: color var(--alx-transition-fast), padding var(--alx-transition-fast);
}

.alx-wg-cats a:hover {
    color: var(--alx-primary);
    padding-left: 5px;
}

.alx-wg-cats .so {
    flex-shrink: 0;
    min-width: 26px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border-soft);
    border-radius: var(--alx-radius-full);
    font-size: 12px;
    font-weight: 700;
    color: var(--alx-text-muted);
}

.alx-wg-cats a:hover .so {
    background: var(--alx-primary-soft);
    border-color: var(--alx-primary-soft);
    color: var(--alx-primary-dark);
}

/* 5c. Danh sách bài viết — ảnh nhỏ bên trái, chữ bên phải
   Ảnh cố tình để nhỏ: cột bên chỉ rộng 340px, ảnh to sẽ đẩy danh sách dài
   lê thê mà người đọc vẫn không nhìn rõ được gì trong ảnh. */
.alx-wg-top {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alx-wg-top li {
    display: flex;
    gap: 13px;
    padding: 14px 0;
}

.alx-wg-top li + li { border-top: 1px solid var(--alx-border-soft); }

.alx-wg-top li:first-child { padding-top: 0; }

.alx-wg-top li:last-child { padding-bottom: 0; }

.alx-wg-top__anh {
    position: relative;
    display: block;
    width: 78px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--alx-bg-alt);
    border-radius: var(--alx-radius-xs);
}

.alx-wg-top__anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--alx-transition);
}

.alx-wg-top li:hover .alx-wg-top__anh img { transform: scale(1.06); }

.alx-wg-top__nd {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alx-wg-top__nd > a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.42;
    color: var(--alx-text-body);
    transition: color var(--alx-transition-fast);
}

.alx-wg-top__nd > a:hover { color: var(--alx-primary); }

/* Tên chuyên mục dưới tiêu đề */
.alx-wg-top__cat {
    display: block;
    margin-top: 5px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--alx-text-faint);
    transition: color var(--alx-transition-fast);
}

a.alx-wg-top__cat:hover { color: var(--alx-primary); }

.alx-wg-top .alx-meta { margin-top: 4px; font-size: 12.5px; }

/* 5c-2. Bảng xếp hạng bài xem nhiều — số hạng và tiêu đề, không ảnh.
   Cố ý khác hẳn khối "Danh sách bài viết" có ảnh ở trên, để hai widget đứng cạnh
   nhau trong cột bên vẫn phân biệt được ngay. */
.alx-wg-rank {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alx-wg-rank li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
}

.alx-wg-rank li + li { border-top: 1px solid var(--alx-border-soft); }

.alx-wg-rank li:first-child { padding-top: 0; }

.alx-wg-rank li:last-child { padding-bottom: 0; }

.alx-wg-rank__so {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border-soft);
    border-radius: var(--alx-radius-xs);
    font-family: var(--alx-font-heading);
    font-size: 13px;
    font-weight: 800;
    color: var(--alx-text-muted);
}

/* Ba hạng đầu tô nổi để mắt bám ngay vào top */
.alx-wg-rank__so--top {
    background: var(--alx-gradient);
    border-color: transparent;
    color: var(--alx-white);
    box-shadow: var(--alx-shadow-xs);
}

.alx-wg-rank__nd { min-width: 0; }

.alx-wg-rank__nd a {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--alx-text);
    transition: color var(--alx-transition-fast);
}

.alx-wg-rank__nd a:hover { color: var(--alx-primary); }

.alx-wg-rank__xem {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--alx-text-muted);
}

/* 5d. Khối kêu gọi liên hệ */
.alx-wg-cta {
    background: var(--alx-gradient);
    border: none;
    color: var(--alx-white);
    text-align: center;
    padding: 26px 22px 24px;
    position: relative;
    overflow: hidden;
}

.alx-wg-cta::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.alx-wg-cta__inner { position: relative; z-index: 1; }

.alx-wg-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--alx-radius-full);
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 14px;
}

.alx-wg-cta h3 {
    font-family: var(--alx-font-heading);
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 9px;
    color: var(--alx-white);
}

.alx-wg-cta p {
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.88);
}

.alx-wg-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    background: var(--alx-white);
    color: var(--alx-primary-dark);
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--alx-radius-sm);
    transition: all var(--alx-transition-fast);
}

.alx-wg-cta__btn:hover {
    color: var(--alx-primary-deep);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.alx-wg-cta__note {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.72);
    margin: 12px 0 0;
}

/* 5e. Đám thẻ */
.alx-wg-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.alx-wg-tags a {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border-soft);
    border-radius: var(--alx-radius-full);
    font-size: 13px;
    font-weight: 600;
    color: var(--alx-text-muted);
    transition: all var(--alx-transition-fast);
}

.alx-wg-tags a:hover {
    background: var(--alx-primary-soft);
    border-color: var(--alx-primary-soft);
    color: var(--alx-primary-dark);
}

/* ------------------------------------------------------------
   6. BÀI VIẾT ĐƠN — PHẦN ĐẦU
   ------------------------------------------------------------ */
.alx-bai {
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-lg);
    overflow: hidden;
    box-shadow: var(--alx-shadow-sm);
}

.alx-bai__head {
    padding: 34px 40px 28px;
    border-bottom: 1px solid var(--alx-border-soft);
}

.alx-bai__cats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.alx-bai__cat {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    background: var(--alx-primary-soft);
    color: var(--alx-primary-dark);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    border-radius: var(--alx-radius-xs);
    transition: all var(--alx-transition-fast);
}

.alx-bai__cat:hover {
    background: var(--alx-primary);
    color: var(--alx-white);
}

.alx-bai__title {
    font-family: var(--alx-font-heading);
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 800;
    line-height: 1.24;
    letter-spacing: -0.7px;
    color: var(--alx-text);
    margin: 0 0 16px;
}

.alx-bai__sapo {
    font-size: 17px;
    line-height: 1.72;
    color: var(--alx-text-muted);
    margin: 0 0 24px;
    padding-left: 16px;
    border-left: 3px solid var(--alx-primary);
}

/* Dải thông tin: tác giả, ngày, thời gian đọc, chia sẻ */
.alx-bai__bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: space-between;
}

.alx-tacgia {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alx-tacgia__avt {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--alx-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--alx-white);
    font-family: var(--alx-font-heading);
    font-size: 16px;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: var(--alx-shadow-blue-sm);
}

.alx-tacgia__ten {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--alx-text);
    line-height: 1.3;
}

.alx-tacgia__vt {
    display: block;
    font-size: 13px;
    color: var(--alx-text-faint);
    line-height: 1.4;
}

.alx-chia-se {
    display: flex;
    align-items: center;
    gap: 8px;
}

.alx-chia-se__nhan {
    font-size: 13px;
    font-weight: 600;
    color: var(--alx-text-faint);
    margin-right: 2px;
}

.alx-share-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-xs);
    color: var(--alx-text-muted);
    cursor: pointer;
    transition: all var(--alx-transition-fast);
}

.alx-share-btn:hover {
    transform: translateY(-2px);
    color: var(--alx-white);
    border-color: transparent;
}

.alx-share-btn--fb:hover { background: #1877F2; }
.alx-share-btn--tw:hover { background: #0F1419; }
.alx-share-btn--zl:hover { background: #0068FF; }
.alx-share-btn--cp:hover { background: var(--alx-text); }

/* Ảnh đại diện bài viết */
.alx-bai__anh {
    position: relative;
    margin: 0;
    background: var(--alx-bg-alt);
}

.alx-bai__anh img {
    width: 100%;
    height: auto;
    display: block;
}

.alx-bai__anh figcaption {
    padding: 11px 40px 0;
    font-size: 13.5px;
    font-style: italic;
    color: var(--alx-text-faint);
    text-align: center;
}

/* Thanh tiến trình đọc */
.alx-tien-trinh {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: var(--alx-gradient);
    z-index: 10000;
    transition: width 0.1s linear;
}

/* ------------------------------------------------------------
   7. MỤC LỤC
   ------------------------------------------------------------ */
.alx-muc-luc {
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-left: 3px solid var(--alx-primary);
    border-radius: var(--alx-radius-sm);
    padding: 20px 24px;
    margin: 0 0 32px;
}

.alx-muc-luc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--alx-font-heading);
    font-size: 15px;
    font-weight: 800;
    color: var(--alx-text);
    margin-bottom: 14px;
}

.alx-muc-luc__head > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.alx-muc-luc__head svg { color: var(--alx-primary); }

.alx-muc-luc__toggle {
    background: none;
    border: none;
    font-family: var(--alx-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--alx-primary);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--alx-radius-xs);
    transition: background var(--alx-transition-fast);
}

.alx-muc-luc__toggle:hover { background: var(--alx-primary-soft); }

/* Mục lục nằm trong thân bài nên phải huỷ kiểu danh sách mà .alx-nd áp cho ol,
   nếu không mỗi dòng sẽ hiện hai con số chồng nhau */
.alx-muc-luc ol,
.alx-nd .alx-muc-luc ol {
    list-style: none;
    counter-reset: ml;
    margin: 0;
    padding: 0;
}

.alx-muc-luc li,
.alx-nd .alx-muc-luc li {
    counter-increment: ml;
    position: static;
    padding-left: 0;
    margin-bottom: 0;
}

.alx-nd .alx-muc-luc li::before { content: none; }

.alx-muc-luc li + li { margin-top: 2px; }

.alx-muc-luc a,
.alx-nd .alx-muc-luc a {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--alx-text-body);
    text-decoration: none;
    transition: color var(--alx-transition-fast);
}

.alx-nd .alx-muc-luc a:hover { color: var(--alx-primary); text-decoration: none; }

.alx-muc-luc a::before {
    content: counter(ml) '.';
    flex-shrink: 0;
    color: var(--alx-primary);
    font-weight: 800;
    min-width: 20px;
}

.alx-muc-luc a:hover { color: var(--alx-primary); }

.alx-muc-luc ol ol { padding-left: 30px; }

.alx-muc-luc ol ol a { font-size: 14px; font-weight: 500; }

/* ------------------------------------------------------------
   8. NỘI DUNG BÀI VIẾT — TYPOGRAPHY
   ------------------------------------------------------------ */
.alx-nd {
    padding: 32px 40px 40px;
    font-size: 17px;
    line-height: 1.82;
    color: var(--alx-text-body);
}

.alx-nd > *:first-child { margin-top: 0; }
.alx-nd > *:last-child { margin-bottom: 0; }

.alx-nd p { margin: 0 0 22px; }

.alx-nd h2 {
    font-family: var(--alx-font-heading);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.32;
    letter-spacing: -0.4px;
    color: var(--alx-text);
    margin: 42px 0 18px;
    padding-left: 16px;
    border-left: 4px solid var(--alx-primary);
    scroll-margin-top: calc(var(--alx-header-h) + 20px);
}

.alx-nd h3 {
    font-family: var(--alx-font-heading);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--alx-text);
    margin: 34px 0 14px;
    scroll-margin-top: calc(var(--alx-header-h) + 20px);
}

.alx-nd h4 {
    font-family: var(--alx-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--alx-text);
    margin: 28px 0 12px;
}

.alx-nd a {
    color: var(--alx-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(24, 119, 242, 0.32);
    text-underline-offset: 3px;
    transition: all var(--alx-transition-fast);
}

.alx-nd a:hover {
    color: var(--alx-primary-hover);
    text-decoration-color: var(--alx-primary);
}

.alx-nd strong { font-weight: 700; color: var(--alx-text); }

.alx-nd ul,
.alx-nd ol {
    margin: 0 0 22px;
    padding-left: 4px;
    list-style: none;
}

.alx-nd ul li,
.alx-nd ol li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 11px;
}

/*
 * Dùng dấu > (con trực tiếp) chứ KHÔNG dùng khoảng trắng.
 *
 * Viết "ol li" là chọn mọi li hậu duệ, kể cả li của danh sách gạch đầu dòng nằm
 * lồng bên trong danh sách đánh số — những mục đó bị gán số thay vì chấm tròn, và
 * vì dùng chung một bộ đếm nên số chạy loạn xạ giữa hai cấp. Một bài thật trên
 * site có tới 31 mục dính lỗi này.
 */
.alx-nd ul > li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 12px;
    width: 7px;
    height: 7px;
    background: var(--alx-primary);
    border-radius: 50%;
}

/* Mỗi danh sách đánh số mở một bộ đếm riêng, nhờ vậy danh sách lồng nhau đếm lại từ 1 */
.alx-nd ol { counter-reset: ds; }

.alx-nd ol > li { counter-increment: ds; }

.alx-nd ol > li::before {
    content: counter(ds);
    position: absolute;
    left: 0;
    top: 3px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--alx-primary-soft);
    color: var(--alx-primary-dark);
    font-size: 12.5px;
    font-weight: 800;
    border-radius: var(--alx-radius-xs);
}

.alx-nd blockquote {
    margin: 30px 0;
    padding: 22px 26px;
    background: var(--alx-gradient-soft);
    border-left: 4px solid var(--alx-primary);
    border-radius: 0 var(--alx-radius-sm) var(--alx-radius-sm) 0;
    font-size: 17px;
    font-style: italic;
    line-height: 1.75;
    color: var(--alx-primary-deep);
}

.alx-nd blockquote p:last-child { margin-bottom: 0; }

.alx-nd figure {
    margin: 30px 0;
}

.alx-nd figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--alx-radius-sm);
    border: 1px solid var(--alx-border);
}

.alx-nd figcaption {
    margin-top: 10px;
    font-size: 13.5px;
    font-style: italic;
    color: var(--alx-text-faint);
    text-align: center;
}

/* Mã nguồn */
.alx-nd code {
    padding: 2px 7px;
    background: var(--alx-primary-soft);
    color: var(--alx-primary-deep);
    font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: 0.88em;
    border-radius: var(--alx-radius-xs);
    word-break: break-word;
}

.alx-nd pre {
    margin: 26px 0;
    padding: 20px 22px;
    background: #0F172A;
    border-radius: var(--alx-radius-sm);
    overflow-x: auto;
    font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.7;
    color: #E2E8F0;
    -webkit-overflow-scrolling: touch;
}

.alx-nd pre code {
    padding: 0;
    background: none;
    color: inherit;
    font-size: inherit;
}

/* ------------------------------------------------------------
   Khối mã nguồn có thanh tiêu đề và nút sao chép
   Do inc/khoi-code.php dựng từ những thẻ <code> nhiều dòng mà
   trình soạn thảo sinh ra. Xem chinh.js mục 10 cho phần bấm nút.
   ------------------------------------------------------------ */
.alx-code {
    margin: 26px 0;
    border-radius: var(--alx-radius-sm);
    overflow: hidden;
    background: #0F172A;
    box-shadow: 0 4px 16px rgba(15, 23, 42, .16);
}

.alx-code__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    background: #16223B;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.alx-code__lang {
    font-family: 'JetBrains Mono', 'Cascadia Code', Consolas, monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94A3B8;
}

.alx-code__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--alx-radius-xs);
    color: #CBD5E1;
    font-family: var(--alx-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--alx-transition-fast), color var(--alx-transition-fast), border-color var(--alx-transition-fast);
}

.alx-code__copy:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.alx-code__copy.da-chep {
    background: rgba(49, 162, 76, .18);
    border-color: rgba(49, 162, 76, .45);
    color: #4ADE80;
}

.alx-code__copy.that-bai {
    background: rgba(228, 30, 63, .16);
    border-color: rgba(228, 30, 63, .42);
    color: #FCA5A5;
}

.alx-code pre {
    margin: 0;
    padding: 18px 20px;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* Tô màu cú pháp — bốn loại, cố ý giữ tối giản */
.alx-tok-ct { color: #64748B; font-style: italic; }   /* chú thích */
.alx-tok-ch { color: #86EFAC; }                       /* chuỗi */
.alx-tok-so { color: #FDBA74; }                       /* số */
.alx-tok-tk { color: #7DD3FC; font-weight: 600; }     /* từ khoá */
.alx-tok-tt { color: #C4B5FD; }                       /* tên thuộc tính trong HTML */

/* Bảng — tự cuộn ngang trên điện thoại */
.alx-bang-cuon {
    margin: 28px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-sm);
}

.alx-nd table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 480px;
}

.alx-nd thead th {
    background: var(--alx-bg-alt);
    padding: 13px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--alx-text);
    border-bottom: 2px solid var(--alx-border);
    white-space: nowrap;
}

.alx-nd tbody td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--alx-border-soft);
    vertical-align: top;
}

.alx-nd tbody tr:last-child td { border-bottom: none; }

.alx-nd tbody tr:hover { background: var(--alx-bg-alt); }

/* ------------------------------------------------------------
   9. KHỐI GHI CHÚ / CẢNH BÁO TRONG BÀI
   ------------------------------------------------------------ */
.alx-hop {
    display: flex;
    gap: 15px;
    margin: 28px 0;
    padding: 18px 22px;
    border-radius: var(--alx-radius-sm);
    border: 1px solid;
    font-size: 15.5px;
    line-height: 1.7;
}

.alx-hop__icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.alx-hop__nd { min-width: 0; }

.alx-hop strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 5px;
}

.alx-hop p { margin: 0; }

.alx-hop p + p { margin-top: 9px; }

.alx-hop--tip {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #14532D;
}
.alx-hop--tip .alx-hop__icon { color: var(--alx-success); }

.alx-hop--luu-y {
    background: var(--alx-primary-tint);
    border-color: #C7DDFB;
    color: var(--alx-primary-deep);
}
.alx-hop--luu-y .alx-hop__icon { color: var(--alx-primary); }

.alx-hop--canh-bao {
    background: #FFFBEB;
    border-color: #FDE68A;
    color: #78350F;
}
.alx-hop--canh-bao .alx-hop__icon { color: #D97706; }

.alx-hop--nguy-hiem {
    background: #FEF2F2;
    border-color: #FECACA;
    color: #7F1D1D;
}
.alx-hop--nguy-hiem .alx-hop__icon { color: var(--alx-danger); }

/* ------------------------------------------------------------
   10. CUỐI BÀI VIẾT
   ------------------------------------------------------------ */
.alx-bai__foot {
    padding: 0 40px 32px;
}

.alx-the-bai {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 26px;
    border-top: 1px solid var(--alx-border-soft);
}

.alx-the-bai__nhan {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--alx-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 4px;
}

.alx-the-bai a {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-full);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--alx-text-muted);
    transition: all var(--alx-transition-fast);
}

.alx-the-bai a:hover {
    background: var(--alx-primary-soft);
    border-color: var(--alx-primary-soft);
    color: var(--alx-primary-dark);
}

/* Khối chia sẻ cuối bài */
.alx-chia-se-cuoi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-sm);
}

.alx-chia-se-cuoi__txt {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--alx-text);
}

.alx-chia-se-cuoi__txt span {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--alx-text-muted);
    margin-top: 3px;
}

.alx-chia-se-cuoi .alx-share-btn {
    width: 40px;
    height: 40px;
    background: var(--alx-surface);
}

/* Hộp tác giả */
.alx-hop-tacgia {
    display: flex;
    gap: 18px;
    margin-top: 24px;
    padding: 24px 26px;
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius);
    box-shadow: var(--alx-shadow-xs);
}

.alx-hop-tacgia__avt {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--alx-gradient);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--alx-white);
    font-family: var(--alx-font-heading);
    font-size: 22px;
    font-weight: 800;
    box-shadow: var(--alx-shadow-blue-sm);
}

.alx-hop-tacgia__nd { min-width: 0; }

.alx-hop-tacgia__ten {
    font-family: var(--alx-font-heading);
    font-size: 17px;
    font-weight: 800;
    color: var(--alx-text);
    margin: 0 0 4px;
}

.alx-hop-tacgia__vt {
    font-size: 13px;
    font-weight: 600;
    color: var(--alx-primary);
    margin: 0 0 10px;
}

.alx-hop-tacgia__mt {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--alx-text-muted);
    margin: 0 0 12px;
}

.alx-hop-tacgia__link {
    display: flex;
    gap: 8px;
}

/* Điều hướng bài trước / bài sau */
.alx-dieu-huong {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.alx-dh {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 18px 20px;
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius);
    transition: all var(--alx-transition-fast);
    box-shadow: var(--alx-shadow-xs);
}

.alx-dh:hover {
    border-color: var(--alx-primary);
    box-shadow: var(--alx-shadow);
    transform: translateY(-2px);
}

.alx-dh--sau { text-align: right; align-items: flex-end; }

.alx-dh__nhan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--alx-primary);
}

.alx-dh__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--alx-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.alx-dh:hover .alx-dh__title { color: var(--alx-primary); }

/* ------------------------------------------------------------
   11. KHỐI BÀI LIÊN QUAN
   ------------------------------------------------------------ */
.alx-khoi {
    margin-top: 40px;
}

.alx-khoi__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}

.alx-khoi__title {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: var(--alx-font-heading);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--alx-text);
    margin: 0;
}

.alx-khoi__title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--alx-gradient);
    border-radius: var(--alx-radius-full);
}

.alx-khoi__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--alx-primary);
    white-space: nowrap;
}

.alx-khoi__more:hover { gap: 9px; }

/* ------------------------------------------------------------
   12. TRANG TĨNH
   ------------------------------------------------------------ */
.alx-trang__head {
    position: relative;
    background: var(--alx-gradient);
    border-radius: var(--alx-radius-lg);
    padding: 46px 44px;
    margin-bottom: 32px;
    overflow: hidden;
    color: var(--alx-white);
}

.alx-trang__head::after {
    content: '';
    position: absolute;
    top: -100px;
    right: -80px;
    width: 340px;
    height: 340px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.alx-trang__head-inner {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.alx-trang__tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    background: rgba(255, 255, 255, 0.17);
    border-radius: var(--alx-radius-full);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.alx-trang__title {
    font-family: var(--alx-font-heading);
    font-size: clamp(28px, 3.8vw, 42px);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.7px;
    margin: 0 0 14px;
    color: var(--alx-white);
}

.alx-trang__desc {
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* Lưới đặc trưng dùng trong trang tĩnh */
.alx-dac-trung {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.alx-dt {
    padding: 22px 24px;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius);
    transition: all var(--alx-transition-fast);
}

.alx-dt:hover {
    background: var(--alx-surface);
    border-color: var(--alx-primary);
    box-shadow: var(--alx-shadow);
    transform: translateY(-3px);
}

.alx-dt__icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--alx-primary-soft);
    color: var(--alx-primary-dark);
    border-radius: var(--alx-radius-sm);
    margin-bottom: 14px;
}

.alx-dt h3 {
    font-family: var(--alx-font-heading);
    font-size: 17px;
    font-weight: 700;
    color: var(--alx-text);
    margin: 0 0 8px;
}

.alx-dt p {
    font-size: 14.5px;
    line-height: 1.68;
    color: var(--alx-text-muted);
    margin: 0;
}

/* Câu hỏi thường gặp */
.alx-faq { margin: 30px 0; }

.alx-faq__item {
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-sm);
    background: var(--alx-surface);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color var(--alx-transition-fast);
}

.alx-faq__item[open] { border-color: var(--alx-primary); }

.alx-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 22px;
    font-family: var(--alx-font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--alx-text);
    cursor: pointer;
    list-style: none;
    transition: background var(--alx-transition-fast);
}

.alx-faq__item summary::-webkit-details-marker { display: none; }

.alx-faq__item summary:hover { background: var(--alx-bg-alt); }

.alx-faq__item summary::after {
    content: '';
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border-right: 2.5px solid var(--alx-primary);
    border-bottom: 2.5px solid var(--alx-primary);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--alx-transition-fast);
}

.alx-faq__item[open] summary::after { transform: rotate(-135deg) translateY(-2px); }

.alx-faq__nd {
    padding: 0 22px 20px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--alx-text-muted);
}

.alx-faq__nd p { margin: 0 0 12px; }
.alx-faq__nd p:last-child { margin-bottom: 0; }

/* Khối kêu gọi cuối trang tĩnh */
.alx-cta-cuoi {
    position: relative;
    margin-top: 36px;
    padding: 38px 40px;
    background: var(--alx-gradient-soft);
    border: 1px solid #C7DDFB;
    border-radius: var(--alx-radius-lg);
    text-align: center;
    overflow: hidden;
}

/* Tiêu đề trong khối kêu gọi không dùng vạch trang trí như h2 thân bài */
.alx-cta-cuoi h2,
.alx-nd .alx-cta-cuoi h2 {
    font-family: var(--alx-font-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--alx-primary-deep);
    margin: 0 0 10px;
    padding-left: 0;
    border-left: none;
}

.alx-cta-cuoi p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--alx-text-muted);
    margin: 0 auto 22px;
    max-width: 60ch;
}

.alx-cta-cuoi__nut {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* ------------------------------------------------------------
   13. NÚT DÙNG TRONG TRANG TRONG
   ------------------------------------------------------------ */
/* Nút nằm trong thân bài viết: huỷ kiểu liên kết mà .alx-nd áp cho thẻ a,
   nếu không chữ trắng của nút sẽ bị đổi thành màu xanh và mất hút trên nền xanh */
.alx-nd a.alx-nut,
.alx-nd a.alx-nut:hover {
    text-decoration: none;
}

.alx-nd a.alx-nut--chinh,
.alx-nd a.alx-nut--chinh:hover { color: var(--alx-white); }

.alx-nd a.alx-nut--phu { color: var(--alx-text); }
.alx-nd a.alx-nut--phu:hover { color: var(--alx-primary); }

.alx-nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 24px;
    font-family: var(--alx-font);
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--alx-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--alx-transition-fast);
    white-space: nowrap;
}

.alx-nut--chinh {
    background: var(--alx-primary);
    color: var(--alx-white);
    box-shadow: var(--alx-shadow-blue-sm);
}

.alx-nut--chinh:hover {
    background: var(--alx-primary-hover);
    color: var(--alx-white);
    transform: translateY(-2px);
    box-shadow: var(--alx-shadow-blue);
}

.alx-nut--phu {
    background: var(--alx-surface);
    border-color: var(--alx-border-strong);
    color: var(--alx-text);
}

.alx-nut--phu:hover {
    border-color: var(--alx-primary);
    color: var(--alx-primary);
    transform: translateY(-2px);
}

.alx-nut--nho { height: 38px; padding: 0 16px; font-size: 14px; }

/* ------------------------------------------------------------
   14. ĐIỆN THOẠI VÀ MÀN HÌNH NHỎ
   ------------------------------------------------------------ */
@media (max-width: 1100px) {
    .alx-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    /* Màn hình hẹp: cột bên xuống dưới nội dung, xếp thành hai cột cho đỡ dài */
    .alx-sidebar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: start;
    }
}

@media (max-width: 860px) {
    .alx-noi-bat { grid-template-columns: minmax(0, 1fr); }
    /* Khi xếp dọc thì ảnh quay lại tỉ lệ 16:9 cho gọn */
    .alx-noi-bat__anh { aspect-ratio: 16 / 9; min-height: 0; height: auto; }
    .alx-noi-bat__body { padding: 22px 24px 26px; }
    .alx-noi-bat__title { font-size: 20px; }

    .alx-luoi,
    .alx-luoi--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }

    .alx-cat-head { padding: 30px 26px; }
    .alx-bai__head { padding: 26px 26px 24px; }
    .alx-nd { padding: 26px 26px 32px; font-size: 16.5px; }
    .alx-bai__foot { padding: 0 26px 28px; }
    .alx-bai__anh figcaption { padding: 11px 26px 0; }
    .alx-trang__head { padding: 34px 28px; }
    .alx-cta-cuoi { padding: 30px 26px; }
}

@media (max-width: 640px) {
    .alx-page { padding-bottom: 48px; }
    .alx-wrap { padding: 0 16px; }

    .alx-crumb { padding: 14px 0 16px; font-size: 13px; }
    .alx-crumb__now { max-width: 20ch; }

    .alx-cat-head { padding: 24px 20px; border-radius: var(--alx-radius); }
    .alx-cat-head__desc { font-size: 15px; }

    .alx-luoi,
    .alx-luoi--3 { grid-template-columns: minmax(0, 1fr); gap: 16px; }

    .alx-sidebar { grid-template-columns: minmax(0, 1fr); }

    .alx-bai { border-radius: var(--alx-radius); }
    .alx-bai__head { padding: 22px 18px 20px; }
    .alx-bai__sapo { font-size: 15.5px; }
    .alx-bai__bar { gap: 14px; }
    .alx-nd { padding: 22px 18px 28px; font-size: 16px; line-height: 1.78; }
    .alx-nd h2 { font-size: 22px; margin: 32px 0 14px; padding-left: 13px; }
    .alx-nd h3 { font-size: 18.5px; margin: 26px 0 12px; }
    .alx-nd pre { padding: 16px; font-size: 13px; border-radius: var(--alx-radius-xs); }
    .alx-code { border-radius: var(--alx-radius-xs); }
    .alx-code pre { padding: 14px 16px; }
    .alx-code__bar { padding: 8px 12px; }
    /* Màn hình hẹp thì bỏ chữ, chừa lại mỗi biểu tượng cho đỡ chật */
    .alx-code__copy-chu { display: none; }
    .alx-nd blockquote { padding: 18px 20px; font-size: 16px; }
    .alx-bai__foot { padding: 0 18px 24px; }
    .alx-bai__anh figcaption { padding: 10px 18px 0; }

    .alx-muc-luc { padding: 17px 18px; }

    .alx-hop { flex-direction: column; gap: 10px; padding: 16px 18px; font-size: 15px; }

    .alx-chia-se-cuoi { flex-direction: column; align-items: stretch; text-align: center; }
    .alx-chia-se-cuoi .alx-chia-se { justify-content: center; }

    .alx-hop-tacgia { flex-direction: column; text-align: center; align-items: center; padding: 22px 20px; }
    .alx-hop-tacgia__link { justify-content: center; }

    .alx-dieu-huong { grid-template-columns: minmax(0, 1fr); }
    .alx-dh--sau { text-align: left; align-items: flex-start; }

    .alx-trang__head { padding: 28px 20px; border-radius: var(--alx-radius); }
    .alx-cta-cuoi { padding: 26px 20px; }
    .alx-cta-cuoi h2 { font-size: 22px; }
    .alx-cta-cuoi__nut .alx-nut { width: 100%; }

    .alx-khoi__head { flex-wrap: wrap; gap: 10px; }
    .alx-khoi__title { font-size: 19px; }

    /* Phân trang: nút đủ lớn cho ngón tay */
    .alx-trang-link { min-width: 40px; height: 40px; font-size: 14.5px; }

    /* Vùng bấm tối thiểu 44 điểm ảnh cho mọi thứ bấm được trên điện thoại */
    .alx-nut--nho { height: 44px; padding: 0 20px; }

    .alx-crumb a { padding: 8px 10px; }

    .alx-wg-tags a { padding: 10px 14px; }

    .alx-wg-cats a { padding: 14px 0; }

    .alx-wg-search input { height: 50px; }

    .alx-wg-search button { width: 40px; height: 40px; }

    .alx-share-btn { width: 44px; height: 44px; }
}

/* Máy rất hẹp */
@media (max-width: 380px) {
    .alx-bai__title { font-size: 23px; }
    .alx-trang-link { min-width: 36px; height: 38px; padding: 0 9px; }
    .alx-phan-trang { gap: 6px; }
}

/* Tôn trọng cài đặt giảm chuyển động của người dùng */
@media (prefers-reduced-motion: reduce) {
    .alx-the,
    .alx-noi-bat,
    .alx-dh,
    .alx-dt,
    .alx-nut,
    .alx-the__anh img,
    .alx-noi-bat__anh img {
        transition: none;
        transform: none;
    }
}

/* ============================================================
   15. PHÂN TRANG KIỂU GOOGLE — LỚP CỦA GIAO DIỆN CHA
   Hàm aloxo_in_phan_trang() của khung cha dựng sẵn markup đúng chuẩn:
   mũi tên mờ khi ở đầu/cuối, hiện ±2 trang, dấu … khi cách xa, giữ query string.
   Ở đây chỉ tạo kiểu cho nó theo bộ nhận diện AloxoVN.
   ============================================================ */
.phan-trang {
    margin: 8px 0 0;
}

.phan-trang .pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.phan-trang .pagination li { margin: 0; padding: 0; }

.phan-trang .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 13px;
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-sm);
    color: var(--alx-text-body);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--alx-transition-fast);
}

.phan-trang a.page-link:hover {
    border-color: var(--alx-primary);
    color: var(--alx-primary);
    background: var(--alx-primary-tint);
}

.phan-trang .page-link--mui-ten { font-size: 20px; line-height: 1; }

.phan-trang .page-link.active {
    background: var(--alx-primary);
    border-color: var(--alx-primary);
    color: var(--alx-white);
    box-shadow: var(--alx-shadow-blue-sm);
    cursor: default;
}

.phan-trang .page-link.disabled {
    opacity: 0.4;
    background: var(--alx-bg-alt);
    cursor: default;
}

.phan-trang .page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 42px;
    color: var(--alx-text-faint);
    font-weight: 700;
    user-select: none;
}

/* ============================================================
   16. KHI KHÔNG CÓ NỘI DUNG VÀ TRANG 404
   ============================================================ */
.alx-khong-co,
.alx-404 {
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-lg);
    padding: 56px 40px;
    text-align: center;
    box-shadow: var(--alx-shadow-sm);
}

.alx-khong-co__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    margin-bottom: 22px;
    background: var(--alx-primary-soft);
    color: var(--alx-primary);
    border-radius: 50%;
}

.alx-khong-co h2,
.alx-404__title {
    font-family: var(--alx-font-heading);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -0.4px;
    color: var(--alx-text);
    margin: 0 0 12px;
}

.alx-khong-co p,
.alx-404__desc {
    font-size: 16px;
    line-height: 1.75;
    color: var(--alx-text-muted);
    margin: 0 auto 24px;
    max-width: 58ch;
}

.alx-404 { margin-bottom: 40px; }

.alx-404__so {
    font-family: var(--alx-font-heading);
    font-size: clamp(72px, 12vw, 120px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -4px;
    margin-bottom: 8px;
    background: var(--alx-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.alx-404__ve {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--alx-text-muted);
}

.alx-404__ve:hover { color: var(--alx-primary); }

/* Ô tìm lại — dùng ở trang kết quả tìm kiếm và trang 404 */
.alx-tim-lai {
    display: flex;
    gap: 10px;
    max-width: 520px;
    margin: 22px auto 0;
}

.alx-cat-head .alx-tim-lai { margin-left: 0; }

.alx-tim-lai input {
    flex: 1;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    background: var(--alx-surface);
    border: 1px solid var(--alx-border-strong);
    border-radius: var(--alx-radius-sm);
    font-family: var(--alx-font);
    font-size: 15px;
    color: var(--alx-text-body);
    transition: all var(--alx-transition-fast);
}

.alx-tim-lai input:focus {
    outline: none;
    border-color: var(--alx-primary);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.12);
}

/* ============================================================
   17. CÁC CHI TIẾT NHỎ CÒN LẠI
   ============================================================ */

/* Mục cấp hai trong mục lục (sinh từ thẻ h3) */
.alx-muc-luc__con { padding-left: 26px; }

.alx-muc-luc__con a { font-size: 14px; font-weight: 500; }

/* Khối cảnh báo đặt ngay dưới sa-pô của bài đánh giá dự án lừa đảo */
.alx-hop--dau-bai { margin: 20px 0 4px; }

/* Nút sao chép liên kết, sau khi bấm thành công */
.alx-share-btn--da-chep {
    background: var(--alx-success);
    border-color: var(--alx-success);
    color: var(--alx-white);
}

/* Bài viết chia nhiều trang bằng thẻ nextpage */
.alx-trang-bai {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--alx-border-soft);
    font-size: 15px;
    font-weight: 600;
}

.alx-trang-bai > span:first-child {
    color: var(--alx-text-faint);
    margin-right: 4px;
}

.alx-trang-bai a,
.alx-trang-bai > span:not(:first-child) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius-xs);
    text-decoration: none;
}

.alx-trang-bai a:hover {
    border-color: var(--alx-primary);
    color: var(--alx-primary);
}

/* Widget WordPress mặc định, nếu Đại Ka kéo thêm vào cột bên */
.alx-sidebar .widget {
    background: var(--alx-surface);
    border: 1px solid var(--alx-border);
    border-radius: var(--alx-radius);
    padding: 20px 22px 22px;
    box-shadow: var(--alx-shadow-xs);
}

/* Tiêu đề widget có biểu tượng bên trái, giống hệt tiêu đề khối cũ */
.alx-sidebar .widget__tieu-de {
    display: flex;
    align-items: center;
    gap: 9px;
}

.alx-sidebar .widget__tieu-de svg {
    color: var(--alx-primary);
    flex-shrink: 0;
}

/*
 * Khối kêu gọi liên hệ là widget nhưng phải giữ nền chuyển sắc riêng, nên cần
 * chọn lọc mạnh hơn quy tắc nền trắng chung ở ngay phía trên.
 */
.alx-sidebar .widget.alx-wg-cta {
    background: var(--alx-gradient);
    border: none;
    color: var(--alx-white);
    text-align: center;
    padding: 26px 22px 24px;
}

.alx-sidebar .widget__tieu-de,
.alx-sidebar .widget-title,
.alx-sidebar .widget h2 {
    font-family: var(--alx-font-heading);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: var(--alx-text);
    margin: 0 0 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--alx-border-soft);
}

/*
 * Kiểu chữ mặc định cho danh sách bên trong widget.
 *
 * Bọc TRỌN trong :where() để mức ưu tiên bằng không. Nhờ vậy mọi quy tắc riêng
 * của AloxoVN (.alx-wg-cats, .alx-wg-top...) luôn thắng và giữ đúng thiết kế của
 * mình, còn đoạn này chỉ đỡ cho những widget lõi WordPress chưa được thiết kế
 * riêng. Bỏ :where() đi thì hỏng hai chỗ thấy rõ: huy hiệu số bài của chuyên mục
 * rơi xuống dòng (display:block đè mất display:flex), và ảnh nhỏ ở khối bài xem
 * nhiều bị đội thêm padding 11px nên lệch hẳn hàng.
 *
 * :where() cần trình duyệt từ 2021 trở đi. Bản cũ hơn chỉ mất phần trang trí
 * này của widget lõi, không ảnh hưởng gì tới các khối của AloxoVN.
 */
:where(.alx-sidebar .widget ul) {
    list-style: none;
    margin: 0;
    padding: 0;
}

:where(.alx-sidebar .widget li + li) { border-top: 1px solid var(--alx-border-soft); }

:where(.alx-sidebar .widget li a) {
    display: block;
    padding: 11px 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--alx-text-body);
}

:where(.alx-sidebar .widget li a:hover) { color: var(--alx-primary); }

/* ============================================================
   18. LỚP CHUẨN CỦA WORDPRESS TRONG THÂN BÀI
   Người viết bài dùng trình soạn thảo sẽ sinh ra các lớp này.
   ============================================================ */
.alx-nd .alignleft {
    float: left;
    margin: 6px 26px 20px 0;
    max-width: 50%;
}

.alx-nd .alignright {
    float: right;
    margin: 6px 0 20px 26px;
    max-width: 50%;
}

.alx-nd .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alx-nd .alignwide,
.alx-nd .alignfull {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.alx-nd .wp-caption { max-width: 100%; }

.alx-nd .wp-caption-text,
.alx-nd .wp-element-caption {
    margin-top: 9px;
    font-size: 13.5px;
    font-style: italic;
    color: var(--alx-text-faint);
    text-align: center;
}

.alx-nd img {
    height: auto;
    border-radius: var(--alx-radius-sm);
}

.alx-nd iframe,
.alx-nd video,
.alx-nd embed {
    max-width: 100%;
    border-radius: var(--alx-radius-sm);
}

/* Video nhúng giữ đúng tỉ lệ trên mọi khổ màn hình */
.alx-nd .wp-block-embed iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
}

.alx-nd .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 24px;
    background: var(--alx-primary);
    color: var(--alx-white);
    font-weight: 700;
    border-radius: var(--alx-radius-sm);
    text-decoration: none;
}

.alx-nd .wp-block-separator {
    border: none;
    border-top: 1px solid var(--alx-border);
    margin: 34px 0;
}

/* Dọn float trước khi sang khối kế tiếp, tránh chữ leo lên ảnh */
.alx-nd::after {
    content: '';
    display: block;
    clear: both;
}

@media (max-width: 640px) {
    .alx-khong-co,
    .alx-404 {
        padding: 38px 20px;
        border-radius: var(--alx-radius);
    }

    .alx-tim-lai { flex-direction: column; }

    .alx-tim-lai .alx-nut { width: 100%; }

    /* Ảnh căn trái phải trên điện thoại thì cho chiếm trọn chiều ngang */
    .alx-nd .alignleft,
    .alx-nd .alignright {
        float: none;
        max-width: 100%;
        margin: 20px 0;
    }

    .phan-trang .page-link { min-width: 40px; height: 40px; font-size: 14.5px; }
}

/* ============================================================
   19. WIDGET CỦA KHUNG CHA
   Bốn widget "Aloxo - …" (thông tin liên hệ, bảng giá, mạng xã hội,
   khối kêu gọi) dựng markup bằng lớp riêng của khung cha. Giao diện này
   cố ý không nạp CSS của cha, nên phải tạo kiểu cho chúng ở đây —
   bằng đúng bộ màu của AloxoVN để nhìn liền mạch với các khối dựng sẵn.
   ============================================================ */

/* ------------------------------------------------------------
   19a. NÚT — dùng chung trong mọi widget của khung cha
   ------------------------------------------------------------ */
.alx-sidebar .nut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    font-family: var(--alx-font);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--alx-radius-sm);
    cursor: pointer;
    transition: all var(--alx-transition-fast);
}

.alx-sidebar .nut--chinh {
    background: var(--alx-primary);
    color: var(--alx-white);
    box-shadow: var(--alx-shadow-blue-sm);
}

.alx-sidebar .nut--chinh:hover,
.alx-sidebar .nut--chinh:focus {
    background: var(--alx-primary-hover);
    color: var(--alx-white);
    transform: translateY(-2px);
    box-shadow: var(--alx-shadow-blue);
}

.alx-sidebar .nut--vien {
    background: transparent;
    border-color: var(--alx-border-strong);
    color: var(--alx-text);
}

.alx-sidebar .nut--vien:hover,
.alx-sidebar .nut--vien:focus {
    border-color: var(--alx-primary);
    color: var(--alx-primary);
    transform: translateY(-2px);
}

.alx-sidebar .nut--phu {
    background: var(--alx-bg-alt);
    border-color: var(--alx-border);
    color: var(--alx-text-body);
}

.alx-sidebar .nut--phu:hover { border-color: var(--alx-primary); color: var(--alx-primary); }

/* Nút chiếm trọn chiều ngang widget */
.alx-sidebar .nut--rong { width: 100%; }

.alx-sidebar .nut--lon { height: 50px; font-size: 15.5px; }

/* ------------------------------------------------------------
   19b. BẢNG GIÁ / DỊCH VỤ
   ------------------------------------------------------------ */
.alx-sidebar .bang-gia {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alx-sidebar .bang-gia__dong {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 0;
    border: 0;
}

.alx-sidebar .bang-gia__dong + .bang-gia__dong {
    border-top: 1px solid var(--alx-border-soft);
}

.alx-sidebar .bang-gia__ten {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--alx-text-body);
    text-decoration: none;
    transition: color var(--alx-transition-fast);
}

.alx-sidebar a.bang-gia__ten:hover { color: var(--alx-primary); }

/* Giá bám mép phải, không bị chữ dài đẩy xuống dòng */
.alx-sidebar .bang-gia__gia {
    flex-shrink: 0;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--alx-primary-dark);
    white-space: nowrap;
}

.alx-sidebar .bang-gia__ghi-chu {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px dashed var(--alx-border);
    font-size: 13px;
    font-style: italic;
    line-height: 1.65;
    color: var(--alx-text-faint);
}

/* ------------------------------------------------------------
   19c. KHỐI KÊU GỌI HÀNH ĐỘNG
   ------------------------------------------------------------ */
.alx-sidebar .khoi-cta {
    border-radius: var(--alx-radius-sm);
    padding: 20px 22px;
    text-align: center;
}

.alx-sidebar .khoi-cta__mo-ta {
    margin: 0 0 16px;
    font-size: 14.5px;
    line-height: 1.7;
}

.alx-sidebar .khoi-cta__nut {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Ba kiểu nền chọn được trong phần cài đặt của widget */
.alx-sidebar .khoi-cta--nhat {
    background: var(--alx-gradient-soft);
    border: 1px solid #C7DDFB;
}

.alx-sidebar .khoi-cta--nhat .khoi-cta__mo-ta { color: var(--alx-primary-deep); }

.alx-sidebar .khoi-cta--chinh {
    background: var(--alx-gradient);
    border: none;
}

.alx-sidebar .khoi-cta--phu {
    background: var(--alx-text);
    border: none;
}

.alx-sidebar .khoi-cta--chinh .khoi-cta__mo-ta,
.alx-sidebar .khoi-cta--phu .khoi-cta__mo-ta {
    color: rgba(255, 255, 255, 0.92);
}

/* Trên nền đậm, nút chính lật thành nền trắng chữ xanh cho nổi */
.alx-sidebar .khoi-cta--chinh .nut--chinh,
.alx-sidebar .khoi-cta--phu .nut--chinh {
    background: var(--alx-white);
    color: var(--alx-primary-dark);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.alx-sidebar .khoi-cta--chinh .nut--chinh:hover,
.alx-sidebar .khoi-cta--phu .nut--chinh:hover {
    background: var(--alx-white);
    color: var(--alx-primary-deep);
}

.alx-sidebar .khoi-cta--chinh .nut--vien,
.alx-sidebar .khoi-cta--phu .nut--vien {
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--alx-white);
}

.alx-sidebar .khoi-cta--chinh .nut--vien:hover,
.alx-sidebar .khoi-cta--phu .nut--vien:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: var(--alx-white);
    color: var(--alx-white);
}

/* ------------------------------------------------------------
   19d. KHỐI THÔNG TIN LIÊN HỆ
   ------------------------------------------------------------ */
.alx-sidebar .khoi-lien-he__dau {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 16px;
}

.alx-sidebar .khoi-lien-he__logo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: var(--alx-radius-sm);
}

.alx-sidebar .khoi-lien-he__danh-tinh {
    font-family: var(--alx-font-heading);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    color: var(--alx-text);
}

/* Số điện thoại — thứ quan trọng nhất của khối này nên cho nổi hẳn lên */
.alx-sidebar .khoi-lien-he__so {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 13px 16px;
    background: var(--alx-gradient);
    color: var(--alx-white);
    font-family: var(--alx-font-heading);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-decoration: none;
    border-radius: var(--alx-radius-sm);
    box-shadow: var(--alx-shadow-blue-sm);
    transition: all var(--alx-transition-fast);
}

.alx-sidebar .khoi-lien-he__so:hover {
    color: var(--alx-white);
    transform: translateY(-2px);
    box-shadow: var(--alx-shadow-blue);
}

.alx-sidebar .khoi-lien-he__so-phu {
    display: block;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--alx-primary);
    text-align: center;
    text-decoration: none;
}

.alx-sidebar .khoi-lien-he__so-phu:hover { color: var(--alx-primary-hover); }

.alx-sidebar .khoi-lien-he__ds {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
}

.alx-sidebar .khoi-lien-he__dong {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 0;
    border: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--alx-text-body);
}

.alx-sidebar .khoi-lien-he__dong + .khoi-lien-he__dong {
    border-top: 1px solid var(--alx-border-soft);
}

.alx-sidebar .khoi-lien-he__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-top: 1px;
    background: var(--alx-primary-soft);
    color: var(--alx-primary-dark);
    border-radius: var(--alx-radius-xs);
}

.alx-sidebar .khoi-lien-he__noi-dung { min-width: 0; }

.alx-sidebar .khoi-lien-he__nut {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.alx-sidebar .khoi-lien-he__ban-do {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: var(--alx-primary);
    text-decoration: none;
}

.alx-sidebar .khoi-lien-he__ban-do:hover { gap: 10px; }

/* ------------------------------------------------------------
   19e. MẠNG XÃ HỘI
   ------------------------------------------------------------ */
.alx-sidebar .mang-xa-hoi {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.alx-sidebar .mang-xa-hoi li { border: 0; }

/* Kiểu biểu tượng tròn */
.alx-sidebar .mang-xa-hoi > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    background: var(--alx-bg-alt);
    border: 1px solid var(--alx-border);
    border-radius: 50%;
    color: var(--alx-text-muted);
    text-decoration: none;
    transition: all var(--alx-transition-fast);
}

.alx-sidebar .mang-xa-hoi > li > a:hover {
    background: var(--alx-primary);
    border-color: var(--alx-primary);
    color: var(--alx-white);
    transform: translateY(-2px);
}

.alx-sidebar .mang-xa-hoi > li > a span { display: none; }

/* Kiểu có kèm tên mạng — mỗi mạng một hàng */
.alx-sidebar .mang-xa-hoi--nhan {
    flex-direction: column;
    gap: 8px;
}

.alx-sidebar .mang-xa-hoi--nhan > li { width: 100%; }

.alx-sidebar .mang-xa-hoi--nhan > li > a {
    width: 100%;
    height: auto;
    justify-content: flex-start;
    gap: 11px;
    padding: 11px 15px;
    border-radius: var(--alx-radius-sm);
    font-size: 14.5px;
    font-weight: 600;
}

.alx-sidebar .mang-xa-hoi--nhan > li > a span { display: inline; }

/* ------------------------------------------------------------
   19g. WIDGET "ALOXO - DANH SÁCH BÀI VIẾT" CỦA KHUNG CHA
   Cùng kiểu với khối bài viết dựng sẵn: ảnh nhỏ bên trái, chữ bên phải.
   Không có khối này thì ảnh trong widget hiện nguyên kích thước gốc,
   chiếm trọn chiều ngang cột bên.
   ------------------------------------------------------------ */
.alx-sidebar .ds-bai-widget {
    list-style: none;
    margin: 0;
    padding: 0;
}

.alx-sidebar .ds-bai-widget__muc {
    display: flex;
    gap: 13px;
    padding: 14px 0;
    border: 0;
}

.alx-sidebar .ds-bai-widget__muc + .ds-bai-widget__muc {
    border-top: 1px solid var(--alx-border-soft);
}

.alx-sidebar .ds-bai-widget__muc:first-child { padding-top: 0; }

.alx-sidebar .ds-bai-widget__muc:last-child { padding-bottom: 0; }

/* Ảnh nhỏ, tỉ lệ 4:3 giống kích thước aloxo-widget mà khung cha cắt sẵn */
.alx-sidebar .ds-bai-widget__anh {
    display: block;
    width: 78px;
    height: 60px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--alx-bg-alt);
    border-radius: var(--alx-radius-xs);
}

.alx-sidebar .ds-bai-widget__anh img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform var(--alx-transition);
}

.alx-sidebar .ds-bai-widget__muc:hover .ds-bai-widget__anh img { transform: scale(1.06); }

.alx-sidebar .ds-bai-widget__than {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.alx-sidebar .ds-bai-widget__tieu-de {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.42;
    color: var(--alx-text-body);
    text-decoration: none;
    transition: color var(--alx-transition-fast);
}

.alx-sidebar .ds-bai-widget__tieu-de:hover { color: var(--alx-primary); }

.alx-sidebar .ds-bai-widget__tom-tat {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--alx-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* Dòng ngày tháng / lượt xem do khung cha in ra */
.alx-sidebar .ds-bai-widget__than .meta-bai,
.alx-sidebar .ds-bai-widget__than .meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--alx-text-faint);
}

/* Tắt ảnh trong cài đặt widget thì chữ chiếm trọn chiều ngang */
.alx-sidebar .ds-bai-widget--khong-anh .ds-bai-widget__muc { gap: 0; }

@media (max-width: 640px) {
    .alx-sidebar .ds-bai-widget__anh,
    .alx-wg-top__anh { width: 88px; height: 66px; }
}

/* ------------------------------------------------------------
   19f. Đưa widget của khung cha về đúng khung thẻ của AloxoVN
   ------------------------------------------------------------ */
.alx-sidebar .widget p:last-child { margin-bottom: 0; }

.alx-sidebar .widget img { max-width: 100%; height: auto; }

/* Widget không có tiêu đề thì bỏ luôn khoảng trống của phần tiêu đề */
.alx-sidebar .widget > :first-child { margin-top: 0; }

@media (max-width: 640px) {
    .alx-sidebar .khoi-lien-he__so { font-size: 18px; }
    .alx-sidebar .nut { height: 46px; }
}