/* ══════════════════════════════════════════════════════════
   Cloudzone — giao diện site công khai

   TIỀN TỐ: mọi class của site dùng "clz-". Trước đây dùng tiền tố hai chữ
   (c + z) và đã phải đổi, vì bundle emagazine do người thiết kế tải lên cũng
   dùng đúng tiền tố đó. Có 5 tên trùng nhau thật: btn, btn-ghost, card, hero,
   tags — CSS trong bundle đè lên CSS site, làm đổi màu chữ và cỡ chữ.
   Nay tiền tố khác nhau nên bundle khai gì cũng không chạm tới giao diện site.
   Khi thêm class mới, LUÔN dùng "clz-".

   KHÔNG dùng biến CSS (var) trong file này — ghi thẳng mã màu. Khối :root
   trước đây khai 19 biến nhưng thực tế không còn chỗ nào gọi tới (đã đổi hết
   sang mã hex sau khi phát hiện trình duyệt không đọc được khối đó), nên đã
   bỏ hẳn để không ai tưởng còn dùng được.
   ══════════════════════════════════════════════════════════ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth
}

html, body {
    overflow-x: visible !important;
}

main {
    /* "clip" thay vì "hidden": cả hai đều chặn tràn ngang, nhưng "hidden" biến
       main thành một khung cuộn riêng — mọi position: sticky bên trong (như
       .clz-cat-side) sẽ bám theo khung đó thay vì theo trang, mà main lại
       không tự cuộn (cả trang cuộn qua html/body), nên sticky coi như vô
       hiệu. "clip" chặn tràn y hệt mà không tạo khung cuộn đó. */
    overflow-x: clip;
    max-width: 100%;
}

body {
    font-family: "Segoe UI", Roboto, "Helvetica Neue", system-ui, -apple-system, sans-serif;
    color: #0d1b2a;
    font-size: 15px;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    list-style: none
}

.clz-wrap {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px
}

.clz-hdr-bleed {
    width: 100%;
    padding: 0 130px
}

.clz-hdr-topbar {
    font-size: 12.5px;
    background: #fff;
}

.clz-hdr-topbar-in {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 38px;
    flex-wrap: wrap;
    overflow: hidden
}

.clz-hdr-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap
}

    .clz-hdr-topbar-item:hover {
        color: #5FC0FF
    }

    .clz-hdr-topbar-item i {
        color: #00a1ff
    }

.clz-hdr-topbar-sp {
    flex: 1
}

.clz-hdr-cats {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap
}

    .clz-hdr-cats a {
        font-size: 12.5px;
        white-space: nowrap
    }

        .clz-hdr-cats a:hover, .clz-hdr-cats a.on {
            color: #5FC0FF
        }

/* ══════════ HEADER ══════════ */
.clz-header {
    background: #24a1ff;
    position: sticky;
    top: 0;
    z-index: 100;
}

.clz-header-in {
    display: flex;
    align-items: center;
    gap: 20px;
    height: 85px
}

.clz-hdr-logo {
    flex: 0 0 auto
}

    .clz-hdr-logo img {
        height: 60px;
        width: auto
    }


.clz-hdr-nav-list {
    display: flex;
    align-items: center;
    gap: 4px
}

.clz-hdr-nav-item {
    position: relative
}

    .clz-hdr-nav-item > a {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 10px 16px;
        border-radius: 999px;
        font-size: 17px;
        font-weight: 600;
        color: rgba(255, 255, 255, .85);
        letter-spacing: .1px;
        white-space: nowrap;
        transition: color .18s;
    }
        .clz-hdr-nav-item > a::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            border-radius: 999px;
            background: rgba(255, 255, 255, .18);
            opacity: 0;
            transform: scale(.85);
            transition: opacity .18s, transform .18s;
        }

        .clz-hdr-nav-item > a:hover, .clz-hdr-nav-item > a.on {
            color: #fff
        }

            .clz-hdr-nav-item > a:hover::before, .clz-hdr-nav-item > a.on::before {
                opacity: 1;
                transform: scale(1)
            }

        .clz-hdr-nav-item > a i {
            font-size: 11px;
            opacity: .55;
            transition: transform .22s
        }

    .clz-hdr-nav-item.has-sub:hover > a i, .clz-hdr-nav-item.has-sub:focus-within > a i {
        transform: rotate(180deg)
    }

.clz-sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 6px;
    transform: translateY(-8px);
    min-width: 260px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(13, 27, 42, .1);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 10;
}
    .clz-sub::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -10px;
        height: 10px;
    }

.clz-hdr-nav-item.has-sub:hover > .clz-sub,
.clz-hdr-nav-item.has-sub:focus-within > .clz-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.clz-sub-mega {
    display: flex;
    width: 520px;
    padding: 0
}

.clz-sub-list {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px;
    max-height: 60vh;
    overflow-y: auto
}

    .clz-sub a, .clz-sub-list a {
        position: relative;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: 10px;
        font-size: 14px;
        font-weight: 600;
        color: #3d5068;
        transition: background .16s, color .16s;
    }

.clz-sub-dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e3eaf2;
    transition: background .16s, box-shadow .16s;
}

.clz-sub-arrow {
    margin-left: auto;
    padding-left: 8px;
    font-size: 11px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .16s, transform .16s;
}

.clz-sub a:hover, .clz-sub a.on, .clz-sub-list a:hover, .clz-sub-list a.on {
    background: linear-gradient(90deg, #e6f6ff, rgba(230, 246, 255, 0));
    color: #006aab;
}

    .clz-sub a:hover .clz-sub-dot, .clz-sub a.on .clz-sub-dot,
    .clz-sub-list a:hover .clz-sub-dot, .clz-sub-list a.on .clz-sub-dot {
        background: linear-gradient(120deg, #00a1ff, #0086d6);
        box-shadow: 0 0 0 4px rgba(0, 161, 255, .16);
    }

    .clz-sub a:hover .clz-sub-arrow, .clz-sub a.on .clz-sub-arrow,
    .clz-sub-list a:hover .clz-sub-arrow, .clz-sub-list a.on .clz-sub-arrow {
        opacity: 1;
        transform: none;
    }

.clz-sub-pane {
    position: relative;
    flex: none;
    width: 220px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background-color: #0d1b2a;
    background-image: linear-gradient(180deg, rgba(13, 27, 42, .5) 0%, rgba(13, 27, 42, .82) 55%, rgba(13, 27, 42, .95) 100%), url("https://cloudzone.vn/images/og-img/Untitled-1-5.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.clz-sub-title {
    position: relative;
    font-size: 15.5px;
    font-weight: 700;
    margin-bottom: 6px
}

.clz-sub-desc {
    position: relative;
    font-size: 12px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
    margin-bottom: 14px
}

.clz-sub-go {
    position: relative;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(120deg, #00a1ff, #0086d6);
    transition: transform .16s;
}

    .clz-sub-go:hover {
        transform: translateX(2px);
        color: #fff
    }



.clz-hdr-quick {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto
}

.clz-hdr-icons {
    display: flex;
    align-items: center;
    gap: 10px
}

.clz-hdr-icon {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    color: #fff;
    font-size: 15px;
    transition: .18s;
}

    .clz-hdr-icon:hover {
        background: rgba(255, 255, 255, .32);
        border-color: rgba(255, 255, 255, .6);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 6px 14px rgba(4, 22, 44, .22);
    }

.clz-hdr-tip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #0d1b2a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 11px;
    border-radius: 7px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: .15s;
    pointer-events: none;
    z-index: 20;
}

    .clz-hdr-tip::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-bottom-color: #0d1b2a;
    }

.clz-hdr-icon:hover .clz-hdr-tip, .clz-hdr-icon:focus-visible .clz-hdr-tip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.clz-hdr-auth {
    position: relative;
    margin-left: 6px;
    display: flex;
    align-items: stretch;
    height: 44px;
    min-width: 230px;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 10px rgba(4, 22, 44, .2);
    transition: transform .18s, box-shadow .18s;
}

    .clz-hdr-auth:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(4, 22, 44, .3);
    }

.clz-hdr-auth-half {
    flex: 1 1 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    font-weight: 700;
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    color: #006aab;
    transition: flex-grow .32s ease, padding .32s ease, background .3s, color .3s, border-color .3s;
}

.clz-hdr-auth-login {
    border-right: 1px solid #e3eaf2;
}

    .clz-hdr-auth-half i {
        transition: opacity .2s, transform .2s;
    }

    .clz-hdr-auth-half span {
        margin-left: 7px;
        max-width: 100px;
        overflow: hidden;
        transition: opacity .2s, transform .2s, max-width .28s ease, margin-left .28s ease;
    }

.clz-hdr-auth:has(.clz-hdr-auth-login:hover) .clz-hdr-auth-login {
    flex-grow: 5;
    background: #00a1ff;
    color: #fff;
    border-color: transparent;
}

.clz-hdr-auth:has(.clz-hdr-auth-login:hover) .clz-hdr-auth-register {
    flex-grow: 1;
    padding: 0 8px;
}

    .clz-hdr-auth:has(.clz-hdr-auth-login:hover) .clz-hdr-auth-register span {
        opacity: 0;
        max-width: 0;
        margin-left: 0;
        transform: scale(.5);
    }

.clz-hdr-auth:has(.clz-hdr-auth-register:hover) .clz-hdr-auth-register {
    flex-grow: 5;
    background: #006aab;
    color: #fff;
}

.clz-hdr-auth:has(.clz-hdr-auth-register:hover) .clz-hdr-auth-login {
    flex-grow: 1;
    padding: 0 8px;
    border-color: transparent;
}

    .clz-hdr-auth:has(.clz-hdr-auth-register:hover) .clz-hdr-auth-login span {
        opacity: 0;
        max-width: 0;
        margin-left: 0;
        transform: scale(.5);
    }

.clz-burger {
    display: none;
    margin-left: auto;
    cursor: pointer;
    padding: 9px
}

    .clz-burger span {
        display: block;
        width: 22px;
        height: 2px;
        background: #fff;
        margin: 4px 0;
        border-radius: 2px
    }

/* ══════════ KHỐI CHUNG ══════════ */
.clz-page {
    padding: 32px 0 56px
}

.clz-block-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap
}

.clz-block-title {
    font-size: 24px;
    font-weight: 800;
    color: #0d1b2a;
    letter-spacing: -.3px;
    position: relative;
    padding-left: 14px;
}

    .clz-block-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 4px;
        bottom: 4px;
        width: 4px;
        border-radius: 2px;
        background: #00a1ff;
    }

.clz-block-more {
    margin-left: auto;
    font-size: 13.5px;
    font-weight: 600;
    color: #00a1ff
}

    .clz-block-more:hover {
        color: #006aab;
        text-decoration: underline
    }

.clz-grid {
    display: grid;
    gap: 22px
}

.clz-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr))
}

.clz-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #00a1ff;
    color: #fff;
    padding: 13px 26px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 15px;
    transition: .12s;
}

    .clz-btn:hover {
        background: #0086d6;
        transform: translateY(-1px)
    }

/* ══════════ THẺ BÀI VIẾT ══════════ */
.clz-card {
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 2px 6px rgba(13, 27, 42, .05);
    transition: .15s;
}

    .clz-card:hover {
        border-color: #b8e4ff;
        box-shadow: 0 8px 24px rgba(13, 27, 42, .1);
        transform: translateY(-3px)
    }

.clz-card-thumb {
    display: block;
    aspect-ratio: 16/9;
    background: #eff4f9;
    overflow: hidden
}

    .clz-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .3s
    }

.clz-card:hover .clz-card-thumb img {
    transform: scale(1.04)
}
/* Bài chưa gán ảnh vẫn chiếm đúng ô, nếu không cả hàng so le nhau */
.clz-card-noimg {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e6f6ff, #f0f7fc);
}

.clz-card-body {
    padding: 15px 17px 17px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    flex: 1
}

.clz-card-cat {
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #006aab;
    background: #e6f6ff;
    padding: 4px 10px;
    border-radius: 5px;
}

    .clz-card-cat:hover {
        background: #b8e4ff
    }

.clz-card-title {
    font-size: 16.5px;
    line-height: 1.42;
    font-weight: 700
}

    .clz-card-title a:hover {
        color: #00a1ff
    }
/* Cắt sapo còn 3 dòng để mọi thẻ trong hàng cao bằng nhau */
.clz-card-sapo {
    font-size: 13.5px;
    line-height: 1.58;
    color: #6b7f96;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clz-card-meta {
    font-size: 12px;
    color: #93a5b8;
    margin-top: auto
}

/* Thẻ bài viết nổi bật: ảnh lớn, chiếm hai cột */
.clz-card-big {
    grid-column: span 2
}

    .clz-card-big .clz-card-thumb {
        aspect-ratio: 21/9
    }

    .clz-card-big .clz-card-title {
        font-size: 22px
    }

@media (max-width: 660px) {
    .clz-card-big {
        grid-column: span 1
    }
}

/* ══════════ CHUYÊN MỤC ══════════ */
.clz-crumb {
    font-size: 13px;
    color: #6b7f96;
    margin-bottom: 20px
}

    .clz-crumb a:hover {
        color: #00a1ff;
        text-decoration: underline
    }

    .clz-crumb .sep {
        margin: 0 8px;
        color: #93a5b8
    }

    .clz-crumb .cur {
        color: #0d1b2a;
        font-weight: 600
    }

/* Tiêu đề chuyên mục — phẳng, không banner, đúng như site cũ
   (cloudzone.vn/hoat-dong-cong-ty): chỉ một dòng tên in đậm màu navy, không
   gradient, không badge số bài. Trước đây có một dải hero gradient ở đây; bỏ
   đi theo đúng yêu cầu "giống web cloudzone" — bản đó là của tôi tự thêm, site
   gốc không có. */
.clz-cat-name {
    font-size: 22px;
    font-weight: 800;
    color: #012f7f;
    letter-spacing: -.3px;
    margin: 0 0 18px;
}

    .clz-cat-name a {
        color: inherit;
        text-decoration: none
    }

        .clz-cat-name a:hover {
            color: #00a1ff
        }

/* Khối "Ghim" / "Nổi bật" đầu trang chuyên mục — dùng chung khuôn với
   _HighlightSection.cshtml, chỉ đổi tiêu đề/icon. Màu ghi thẳng bằng mã hex,
   không dùng var(--x): file này có lỗi trình duyệt không đọc được khối :root
   (xem ghi chú đầu file), var() sẽ ra rỗng nếu lỡ tay dùng lại. */
.clz-highlight {
    margin: 0 0 28px;
}

.clz-highlight-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 800;
    color: #012f7f;
    margin: 0 0 14px;
}

    .clz-highlight-title i {
        color: #00a1ff;
        font-size: 15px;
    }

.clz-cat-desc {
    font-size: 14px;
    color: #6b7f96;
    max-width: 680px;
    margin: -10px 0 18px;
}

/* ══════════ PHÂN TRANG ══════════ */
.clz-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    justify-content: center;
    margin-top: 40px
}

    .clz-pager a, .clz-pager .cur, .clz-pager .gap {
        min-width: 42px;
        height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 14px;
        border-radius: 9px;
        font-size: 14px;
        font-weight: 600;
    }

    .clz-pager a {
        border: 1px solid #e3eaf2;
        background: #ffffff
    }

        .clz-pager a:hover {
            border-color: #00a1ff;
            color: #006aab;
            transform: translateY(-1px);
        }

    .clz-pager .cur {
        background: #00a1ff;
        color: #fff;
        border-radius: 50%;
        padding: 0;
        box-shadow: 0 4px 12px rgba(0, 161, 255, .35);
    }

    .clz-pager .gap {
        color: #93a5b8
    }

    .clz-pager-nav {
        gap: 6px;
        font-weight: 700;
    }

/* ══════════ TRỐNG VÀ LỖI ══════════ */
.clz-empty {
    padding: 48px 20px;
    text-align: center;
    color: #6b7f96;
    font-size: 15px;
    border: 1px dashed #e3eaf2;
    border-radius: 12px;
    background: #ffffff;
}

.clz-404 {
    padding: 88px 20px;
    text-align: center
}

/* ══════════ DANH SÁCH CHUYÊN MỤC — 2 CỘT KÈM "BÀI VIẾT MỚI" ══════════
   Theo đúng bố cục site cũ (cloudzone.vn/hoat-dong-cong-ty): danh sách bên
   trái, cột "Bài viết mới" bên phải — khác clz-grid-3 (lưới thẻ to của trang
   chủ, không có cột phụ). */
.clz-cat-body {
    display: flex;
    align-items: flex-start;
    gap: 32px
}

.clz-cat-main {
    flex: 1;
    min-width: 0
}

.clz-cat-side {
    flex: 0 0 300px;
    position: sticky;
    top: 90px
}

.clz-catlist {
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.clz-catlist-item {
    flex: 0 0 calc(50% - 10px);
    display: block;
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 2px 6px rgba(13, 27, 42, .05);
    transition: box-shadow .2s, transform .2s
}

    .clz-catlist-item:hover {
        box-shadow: 0 8px 24px rgba(13, 27, 42, .1);
        transform: translateY(-3px)
    }

.clz-catlist-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #f6f9fc
}

    .clz-catlist-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.clz-catlist-body {
    padding: 14px 16px 16px
}

.clz-catlist-date {
    display: block;
    font-size: 11.5px;
    color: #93a5b8;
    margin-bottom: 6px
}

.clz-catlist-title {
    font-size: 15px;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

.clz-catlist-hr {
    width: 100%;
    height: 1px;
    background: #e3eaf2;
    margin: 10px 0
}

.clz-catlist-excerpt {
    font-size: 13px;
    color: #6b7f96;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* ── Cột phải "Bài viết mới" ── */
.clz-side-recent {
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 2px 6px rgba(13, 27, 42, .05)
}

.clz-side-title {
    font-size: 16px;
    font-weight: 700;
    color: #0d1b2a;
    margin-bottom: 6px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e3eaf2
}

.clz-side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #eff4f9;
    color: inherit;
    text-decoration: none
}

    .clz-side-item:last-child {
        border-bottom: none;
        padding-bottom: 0
    }

    .clz-side-item:hover .clz-side-text {
        color: #00a1ff
    }

.clz-side-thumb {
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
    border-radius: 7px;
    overflow: hidden;
    background: #f6f9fc
}

    .clz-side-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.clz-side-text {
    flex: 1;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #3d5068;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .15s
}

@media (max-width: 900px) {
    .clz-cat-body {
        flex-direction: column
    }

    .clz-cat-side {
        flex: 0 0 auto;
        position: static;
        width: 100%
    }
}

@media (max-width: 640px) {
    .clz-catlist-item {
        flex: 0 0 100%
    }
}

/* Biến thể 3 thẻ một hàng, dùng khi xem trước bài của một chuyên mục con
   (bên dưới mỗi khối trong trang tổng — xem .clz-sub-section). */
.clz-catlist-3 .clz-catlist-item {
    flex: 0 0 calc(33.333% - 14px)
}

@media (max-width: 900px) {
    .clz-catlist-3 .clz-catlist-item {
        flex: 0 0 calc(50% - 10px)
    }
}

@media (max-width: 560px) {
    .clz-catlist-3 .clz-catlist-item {
        flex: 0 0 100%
    }
}

/* ══════════ TRANG TỔNG CHUYÊN MỤC CÓ CON ══════════
   Theo bố cục site cũ (cloudzone.vn/san-pham): "Bài viết mới nhất" toàn site,
   rồi từng khối chuyên mục con. clz-block-head/clz-block-title dùng lại nguyên —
   khỏi cần một kiểu tiêu đề riêng cho đúng một trang. */
.clz-block-title a {
    color: inherit;
    text-decoration: none
}

    .clz-block-title a:hover {
        color: #00a1ff
    }

.clz-sub-section {
    margin: 28px 0
}

.clz-bvm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 8px
}

.clz-bvm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: 8px;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 2px 6px rgba(13, 27, 42, .05);
    transition: box-shadow .2s
}

    .clz-bvm-item:hover {
        box-shadow: 0 8px 24px rgba(13, 27, 42, .1)
    }

    .clz-bvm-item:hover .clz-bvm-title {
        color: #00a1ff
    }

.clz-bvm-thumb {
    flex: 0 0 72px;
    width: 72px;
    height: 52px;
    border-radius: 6px;
    overflow: hidden;
    display: block
}

    .clz-bvm-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block
    }

.clz-bvm-text {
    flex: 1;
    min-width: 0
}

.clz-bvm-cat {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #00a1ff;
    margin-bottom: 3px
}

.clz-bvm-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
    font-weight: 700;
    color: #0d1b2a;
    line-height: 1.35;
    transition: color .15s
}

/* Vạch chia giữa các khối chuyên mục con — hai đường mờ kèm một icon tròn ở
   giữa, thay cho khoảng trắng đơn điệu. */
.clz-sub-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 30px 0
}

    .clz-sub-divider::before, .clz-sub-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e3eaf2 50%, transparent)
    }

    .clz-sub-divider .dvi {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #e3eaf2;
        background: #f6f9fc;
        color: #00a1ff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px
    }

@media (max-width: 900px) {
    .clz-bvm-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 480px) {
    .clz-bvm-grid {
        grid-template-columns: 1fr
    }
}

    .clz-404 h1 {
        font-size: 30px;
        font-weight: 800;
        margin-bottom: 12px
    }

    .clz-404 p {
        color: #6b7f96;
        margin-bottom: 24px
    }

/* ══════════ FOOTER ══════════ */
.clz-footer {
    background: #0b1a2b;
    color: #9fb5cb;
}

.clz-footer-grid {
    display: grid;
    gap: 34px;
    padding: 52px 20px 40px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.clz-footer-brand {
    grid-column: span 1
}

.clz-footer-logo img {
    height: 70px;
    width: auto;
    margin-bottom: 20px
}

.clz-footer-slogan {
    font-size: 12.5px;
    letter-spacing: 1px;
    color: #00a1ff;
    font-weight: 700;
    margin-bottom: 15px
}

.clz-footer-title {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.clz-footer-links li {
    margin-bottom: 9px
}

.clz-footer-links a {
    font-size: 13.5px;
    line-height: 1.5
}

    .clz-footer-links a:hover {
        color: #00a1ff
    }

.clz-footer-contact li {
    display: flex;
    gap: 9px;
    font-size: 13.5px;
    margin-bottom: 9px;
    line-height: 1.5
}

.clz-footer-contact i {
    color: #00a1ff;
    width: 15px;
    flex: 0 0 15px;
    margin-top: 3px
}

.clz-footer-contact a:hover {
    color: #fff
}

/* Huy hiệu DMCA / Bộ Công Thương: ảnh gốc vẽ cho nền sáng nên bọc khung trắng
   để không mất chữ trên nền tối của footer */
.clz-footer-badges {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap
}

    .clz-footer-badges a {
        display: inline-flex;
        align-items: center;
        background: #fff;
        padding: 6px 10px;
        border-radius: 8px;
        transition: transform .15s, box-shadow .15s;
    }

        .clz-footer-badges a:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 14px rgba(0, 0, 0, .25)
        }

    .clz-footer-badges img {
        height: 30px;
        width: auto;
        display: block
    }

.clz-footer-fb {
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 14px
}

    .clz-footer-fb iframe {
        width: 100%;
        max-width: 280px;
        height: 132px;
        display: block;
    }

.clz-social {
    display: flex;
    gap: 9px;
    margin-top: 18px
}

    .clz-social a {
        width: 36px;
        height: 36px;
        border-radius: 9px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, .08);
        color: #cfe0ef;
        transition: .12s;
    }

        .clz-social a:hover {
            background: #00a1ff;
            color: #fff
        }

.clz-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 22px 0;
    font-size: 12.5px;
    text-align: center;
    color: #93a5b8;
}

    .clz-footer-bottom strong {
        color: #fff
    }

.clz-footer-legal {
    margin-top: 9px;
    line-height: 1.7
}

/* ══════════ NÚT LÊN ĐẦU TRANG ══════════ */
.clz-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: #00a1ff;
    color: #fff;
    display: none;
    place-items: center;
    font-size: 19px;
    box-shadow: 0 4px 14px rgba(0, 161, 255, .4);
    z-index: 90;
}

    .clz-top.on {
        display: grid
    }

    .clz-top:hover {
        background: #0086d6;
        color: #fff
    }

/* ══════════ MÀN HẸP ══════════ */
/* Ngưỡng 1400px (không phải 1024px) — đo thực tế cho thấy với 7 mục menu
   + logo + icon liên hệ + nút đăng nhập, hàng ngang bắt đầu vỡ (chữ tự
   xuống dòng bên trong từng mục) ngay dưới ~1370px. Để dư một khoảng an
   toàn cho zoom trình duyệt và độ rộng thanh cuộn, chuyển sang menu rút
   gọn (hamburger) từ 1400px trở xuống, không đợi tới lúc đã chật. */
@media (max-width: 1400px) {
    .clz-hdr-topbar-in {
        justify-content: center;
        height: auto;
        padding: 8px 20px;
        gap: 14px
    }

    .clz-hdr-topbar-sp {
        display: none
    }

    .clz-burger {
        display: block
    }

    .clz-hdr-quick {
        display: none
    }

    /* Menu bung xuống theo chiều dọc, mở bằng checkbox nên không cần script */
    .clz-hdr-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #ffffff;
        border-bottom: 1px solid #e3eaf2;
        box-shadow: 0 8px 24px rgba(13, 27, 42, .1);
        margin-left: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s;
    }

    .clz-hdr-nav-toggle:checked ~ .clz-hdr-nav {
        max-height: 78vh;
        overflow-y: auto
    }

    .clz-hdr-nav-list {
        flex-direction: column;
        align-items: stretch;
        padding: 8px
    }

    .clz-hdr-nav-item > a {
        padding: 12px 14px
    }

    .clz-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        border-left: 2px solid #e6f6ff;
        border-radius: 0;
        margin: 0 0 6px 14px;
        padding: 0;
    }

        .clz-sub::before {
            display: none
        }
    /* Màn hẹp: bỏ khung giới thiệu bên phải, menu con chỉ còn một cột danh sách —
       link của mục cha đã đủ để vào trang nhóm, khung giới thiệu chỉ là trang trí */
    .clz-sub-mega {
        display: block;
        width: auto
    }

    .clz-sub-pane {
        display: none
    }

    .clz-sub-list {
        padding: 0;
        max-height: none;
        overflow: visible
    }
}

/* ══════════ TRANG CHI TIẾT BÀI VIẾT ══════════ */
/* Bài viết chiếm cột trái; cột phải "Bài viết mới" cố định 300px, giống
   trang chuyên mục. Xuống hàng ở màn hẹp: sidebar rơi xuống dưới bài. */
.clz-article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    /* PHẢI có align-items: start, không phải lỗi cần bỏ — .clz-cat-side dùng
       position: sticky, cần chính bản thân nó (grid item) THẤP hơn ô lưới
       (grid area, vẫn cao bằng cột bài viết) mới còn khoảng trống để "đi
       theo" khi cuộn. Bỏ dòng này thì stretch (mặc định) kéo cao đúng bằng ô
       lưới, hết khoảng trống, sticky coi như vô hiệu — đã thử và thấy sai. */
    align-items: start
}

@media (max-width: 900px) {
    .clz-article-layout {
        grid-template-columns: 1fr
    }
}

.clz-article {
    min-width: 0
}

.clz-article-head {
    margin-bottom: 22px
}

.clz-article-cat {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #00a1ff;
    margin-bottom: 10px
}

    .clz-article-cat:hover {
        color: #0086d6
    }

.clz-article-head h1 {
    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 14px;
    color: #0f172a
}

.clz-article-divider {
    width: 34px;
    height: 3px;
    border-radius: 2px;
    background: #00a1ff;
    margin-bottom: 14px
}

.clz-article-meta {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #6b7f96
}

    .clz-article-meta .sep {
        margin: 0 6px
    }

.clz-article-cover {
    margin: 0 0 24px;
    border-radius: 12px;
    overflow: hidden
}

    .clz-article-cover img {
        width: 100%;
        display: block
    }

/* Thanh chia sẻ: lặp lại y hệt ở đầu và cuối bài (xem hàm ThanhChiaSe trong
   BaiViet/Index.cshtml) — sửa màu/kích thước ở đây là đổi cả hai chỗ. */
.clz-share {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0
}

.clz-share-label {
    font-size: 13px;
    font-weight: 700;
    color: #3d5068
}

.clz-share-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    transition: opacity .15s
}

    .clz-share-btn:hover {
        opacity: .85
    }

.clz-share-fb {
    background: #3b5998
}

.clz-share-tw {
    background: #1da1f2
}

.clz-share-mail {
    background: #64748b
}

.clz-sapo {
    font-size: 17px;
    font-weight: 600;
    font-style: italic;
    line-height: 1.6;
    color: #334155;
    margin: 0 0 20px;
    padding-left: 14px;
    border-left: 3px solid #b8e4ff
}

.clz-article-body {
    font-size: 16px;
    line-height: 1.75;
    color: #1e293b
}

    .clz-article-body img {
        max-width: 100%;
        height: auto
    }

    .clz-article-body figure {
        margin: 20px 0
    }

    .clz-article-body figcaption {
        font-size: 13px;
        color: #64748b;
        text-align: center;
        margin-top: 6px
    }

    .clz-article-body table {
        width: 100%;
        border-collapse: collapse;
        margin: 16px 0
    }

    .clz-article-body th, .clz-article-body td {
        border: 1px solid #e2e8f0;
        padding: 8px 10px
    }

    .clz-article-body blockquote {
        border-left: 3px solid #00a1ff;
        margin: 16px 0;
        padding: 4px 16px;
        color: #475569
    }

    .clz-article-body pre {
        background: #0f172a;
        color: #e2e8f0;
        padding: 14px;
        border-radius: 8px;
        overflow-x: auto
    }

    .clz-article-body ul, .clz-article-body ol {
        margin: 12px 0;
        padding-left: 1.3em
    }

    /* Khối mục lục do plugin "table-of-contents" của trình soạn thảo sinh ra.
       Bài nhập từ cloudzone.vn mang sẵn markup này; site cũ có CSS cho nó nên
       trước khi có khối này, mục lục ở site mới rơi về mặc định của <p> (mất
       khung, mất nền, mất tiêu đề tách dòng). Các thẻ con đã có display:block
       và padding-left inline (đúng allowlist của HtmlSanitizer) nên phần dưới
       đây chủ yếu lo cái khung ngoài và tiêu đề. */
    .clz-article-body .table-of-contents {
        display: flex;
        flex-direction: column;
        min-width: 220px;
        max-width: 100%;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        padding: 14px 18px;
        margin: 16px 0;
        text-align: left
    }

    .clz-article-body .table-of-contents__title {
        display: block;
        margin: 0 0 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid #e2e8f0;
        font-weight: 600;
        font-size: 15px;
        color: #0f172a
    }

    .clz-article-body .table-of-contents__item {
        display: block;
        margin: 2px 0
    }

        /* --sub: mục cấp 2 của bài nhập mới; --l1: tên cũ site cloudzone.vn dùng */
        .clz-article-body .table-of-contents__item--sub,
        .clz-article-body .table-of-contents__item--l1 {
            padding-left: 20px
        }

    /* Hộp callout trong bài nhập từ cloudzone.vn: bản gốc vẽ vạch dọc bên trái
       bằng border-left, nhưng HtmlSanitizer chỉ nhận shorthand "border" nên
       longhand đó bị lọc. Bài nhập gắn class này để CSS lo cái vạch, khỏi phải
       nới allowlist (nới border-left nghĩa là mở thêm một cửa cho style inline,
       trong khi ở đây chỉ cần đúng một kiểu hộp). Nền, bo góc, padding vẫn do
       style inline của bài giữ. */
    .clz-article-body .clz-callout {
        border-left: 5px solid #012f7f
    }

.clz-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0
}

.clz-tag {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    font-size: 13px;
    color: #475569;
    text-decoration: none
}

    .clz-tag:hover {
        border-color: #00a1ff;
        color: #00a1ff
    }

/* "Bài viết liên quan" ở trang chi tiết bài — tái dùng nguyên khối slider
   .clz-slide-h/.clz-slide-nav/.clz-slide-track/.clz-slide-item (xem phần
   "SLIDE VỊ TRÍ XUẤT BẢN" phía dưới); chỉ cần thêm khoảng cách trên. Khác
   với .clz-related/.clz-related-list — khối đó vẫn dành riêng cho trang
   emagazine (dạng lưới, không cuộn ngang), giữ nguyên không đụng tới. */
.clz-article-related {
    margin-top: 40px
}

/* ══════════ TRANG "THÔNG TIN CHUNG" ══════════
   Copy lại bố cục của Cloudzone.Web\Views\Desktop\ChiTietTin\N2\ — sidebar bên
   TRÁI, nội dung bên phải (ngược với khuôn bài thường). Dùng chung
   .clz-article-layout/.clz-article/.clz-article-body/.clz-cat-side/.clz-side-recent
   /.clz-side-title với khuôn bài thường, chỉ đổi thứ tự cột và phần đầu bài —
   xem BaiViet/ThongTinChung.cshtml. */
.clz-geninfo-layout {
    grid-template-columns: 300px minmax(0, 1fr)
}

@media (max-width: 900px) {
    .clz-geninfo-layout {
        grid-template-columns: 1fr
    }
}

.clz-geninfo-head {
    text-align: center;
    margin-bottom: 26px
}

    .clz-geninfo-head h1 {
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .2px;
        color: #111;
        margin: 0
    }

/* Khối Sapo nổi bật — copy màu từ .faqTitle bên bản gốc (nền #f6fbff,
   chữ #627891), thay cho trích dẫn nghiêng của khuôn bài thường. */
.clz-geninfo-sapo {
    background: #f6fbff;
    border-radius: 6px;
    padding: 13px 16px;
    margin: 0 0 20px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    color: #627891
}

/* Khối sidebar — copy màu/viền từ .general-info-menu .col-inner bên gốc. */
.clz-geninfo-box {
    background: #edf6fd;
    border: 1px solid #8495a5;
    border-radius: 10px;
    padding: 10px
}

.clz-geninfo-title {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    color: #004f95;
    margin-bottom: 10px
}

.clz-geninfo-nav {
    display: flex;
    flex-direction: column
}

    .clz-geninfo-nav li a {
        display: flex;
        align-items: baseline;
        gap: 8px;
        padding: 5px 0;
        font-size: 14px;
        color: #282828;
        border-bottom: 1px solid #ececec
    }

    .clz-geninfo-nav li:last-child a {
        border-bottom: none
    }

    .clz-geninfo-nav a i {
        color: #8495a5;
        font-size: 12px
    }

    .clz-geninfo-nav a:hover, .clz-geninfo-nav li.on a {
        color: #0056a3;
        font-weight: 700
    }

/* Hàng icon liên hệ — ảnh thật copy từ wwwroot/images của site cũ, không
   dùng font-icon để giữ đúng bộ icon xanh gốc. */
.clz-geninfo-icons {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 14px 0
}

    .clz-geninfo-icons img {
        width: 42px;
        height: 42px
    }

/* Banner "Đăng ký ngay" — ảnh nền phủ cả khối, nút pill trắng nằm ở đáy,
   giống .banner-img-bg bên gốc (padding-top tạo tỉ lệ khung ảnh). */
.clz-geninfo-banner {
    display: block;
    position: relative;
    padding-top: 75%;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    overflow: hidden
}

.clz-geninfo-banner-btn {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    color: #666;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 99px;
    box-shadow: 0 8px 24px rgba(13, 27, 42, .1);
    white-space: nowrap
}

.clz-related {
    margin-top: 36px
}

    .clz-related h2 {
        font-size: 20px;
        margin: 0 0 16px;
        color: #0f172a
    }

.clz-related-list {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(240px,1fr));
    gap: 20px
}

/* Emagazine nhúng thẳng vào trang: không giới hạn bề ngang, để bundle tự dàn trang.
   Bundle nào cũng có bố cục riêng nên site không áp khung nội dung lên nó. */
/*.clz-emagazine {
    width: 100%;
    overflow-x: hidden
}

    .clz-emagazine img {
        max-width: 100%;
        height: auto
    }*/

.clz-empty {
    text-align: center;
    padding: 60px 20px;
    color: #64748b
}

    .clz-empty h1 {
        font-size: 24px;
        color: #0f172a;
        margin-bottom: 12px
    }

/* ══════════ SLIDE VỊ TRÍ XUẤT BẢN ══════════
   Bài viết biên tập viên gắn vào Vị trí của trang này (CMS → Vị trí). Cuộn
   ngang bằng scroll-snap gốc trình duyệt — JS chỉ lo hai nút mũi tên và tự
   chạy, không cần tính transform theo từng cỡ màn hình. */
.clz-slide-sec {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px
}

.clz-slide-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px
}

    .clz-slide-h h2 {
        font-size: 22px;
        font-weight: 700;
        color: #0d1b2a;
        margin: 0
    }

.clz-slide-nav {
    display: flex;
    gap: 8px
}

.clz-slide-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #e3eaf2;
    background: #ffffff;
    color: #00a1ff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s
}

    .clz-slide-btn:hover {
        background: #00a1ff;
        color: #fff
    }

.clz-slide-track {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 4px;
    scrollbar-width: none
}

    .clz-slide-track::-webkit-scrollbar {
        display: none
    }

.clz-slide-item {
    flex: 0 0 280px;
    scroll-snap-align: start;
    background: #ffffff;
    border: 1px solid #e3eaf2;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 2px 6px rgba(13, 27, 42, .05);
    transition: box-shadow .2s, transform .2s
}

    .clz-slide-item:hover {
        box-shadow: 0 8px 24px rgba(13, 27, 42, .1);
        transform: translateY(-3px)
    }

.clz-slide-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    display: block;
    background: #f6f9fc
}

.clz-slide-cap {
    padding: 14px 16px 16px
}

    .clz-slide-cap h3 {
        font-size: 15px;
        font-weight: 600;
        color: #0d1b2a;
        margin: 0 0 6px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .clz-slide-cap p {
        font-size: 13px;
        color: #6b7f96;
        margin: 0;
        line-height: 1.5;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

@media (max-width: 640px) {
    .clz-slide-item {
        flex-basis: 240px
    }
}

/* ══════════════════════════════════════════════════════════
   Header/Footer riêng cho điện thoại (tiền tố clz-mhdr- và clz-mftr-)
   LƯU Ý: đừng viết hai tiền tố cạnh nhau kiểu "clz-mhdr-{sao}/clz-mftr-" ở đây —
   chuỗi {sao} kèm gạch chéo tạo ra ký tự đóng chú thích, làm comment kết thúc
   sớm ngay giữa dòng và phần chữ còn lại bị trình duyệt đọc như mã CSS.
   Chỉ hai khối này tách theo thiết bị (nhận diện qua User-Agent ở server) —
   phần thân trang vẫn dùng chung một view, không nhân đôi. Vì server chỉ
   gửi đúng một bộ markup cho mỗi request nên không cần @media để ẩn/hiện.
   ══════════════════════════════════════════════════════════ */

.clz-mhdr-toggle { position: absolute; top: -9999px; }

.clz-mhdr {
    position: sticky;
    top: 0;
    z-index: 40;
}

.clz-mhdr-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 14px;
    background-color: #00a1ff;
    background-image: linear-gradient(120deg, #00a1ff, #0086d6);
    box-shadow: 0 1px 2px rgba(13, 27, 42, .04), 0 2px 6px rgba(13, 27, 42, .05);
}

.clz-mhdr-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.clz-mhdr-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.clz-mhdr-logo {
    flex: 1;
    display: flex;
    justify-content: center;
}

.clz-mhdr-logo img {
    height: 40px;
    width: auto;
}

.clz-mhdr-call {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
}

.clz-mhdr-overlay {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(11, 26, 43, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.clz-mhdr-toggle:checked ~ .clz-mhdr-overlay {
    opacity: 1;
    pointer-events: auto;
}

.clz-mhdr-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 46;
    width: 86%;
    max-width: 340px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ffffff;
    opacity: 1;
    box-shadow: 0 8px 24px rgba(13, 27, 42, .1);
    transform: translateX(-100%);
    transition: transform .3s ease;
}

.clz-mhdr-toggle:checked ~ .clz-mhdr-drawer {
    transform: translateX(0);
}

.clz-mhdr-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    color: #fff;
    background-color: #00a1ff;
    background-image: linear-gradient(120deg, #00a1ff, #006aab);
    font-weight: 700;
}

.clz-mhdr-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.clz-mhdr-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 20px;
}

.clz-mhdr-list {
    list-style: none;
}

.clz-mhdr-item {
    border-bottom: 1px solid #e3eaf2;
}

.clz-mhdr-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    font-weight: 600;
    color: #0d1b2a;
    cursor: pointer;
}

.clz-mhdr-item-head.on {
    color: #006aab;
}

.clz-mhdr-item-title {
    flex: 1;
}

.clz-mhdr-acc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -12px -8px 4px;
}

.clz-mhdr-acc-arrow {
    font-size: 16px;
    color: #6b7f96;
    transition: transform .2s ease;
}

.clz-mhdr-acc:checked ~ .clz-mhdr-item-head .clz-mhdr-acc-arrow {
    transform: rotate(180deg);
}

.clz-mhdr-sub {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    background-color: #f6f9fc;
    transition: max-height .25s ease;
}

.clz-mhdr-acc:checked ~ .clz-mhdr-sub {
    max-height: 600px;
}

.clz-mhdr-sub a {
    display: block;
    padding: 10px 16px 10px 28px;
    color: #3d5068;
    font-size: 14px;
}

.clz-mhdr-sub a.on {
    color: #006aab;
    font-weight: 600;
}

.clz-mhdr-contact {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-top: 1px solid #e3eaf2;
}

.clz-mhdr-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #3d5068;
    font-size: 14px;
}

.clz-mhdr-contact-item i {
    color: #0086d6;
    width: 18px;
    text-align: center;
}

.clz-mhdr-auth {
    display: flex;
    gap: 10px;
    padding: 0 16px 16px;
}

.clz-mhdr-auth-btn {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
}

.clz-mhdr-auth-login {
    border: 1px solid #b8e4ff;
    color: #006aab;
}

.clz-mhdr-auth-register {
    background-color: #00a1ff;
    background-image: linear-gradient(120deg, #00a1ff, #0086d6);
    color: #fff;
}

/* ── Footer mobile ── */

.clz-mftr {
    background-color: #0b1a2b;
    color: rgba(255, 255, 255, .78);
    padding: 28px 16px 18px;
}

.clz-mftr-brand {
    text-align: center;
    margin-bottom: 18px;
}

.clz-mftr-logo img {
    height: 30px;
    filter: brightness(0) invert(1);
}

.clz-mftr-slogan {
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .55);
}

.clz-mftr-contact {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 18px;
}

.clz-mftr-contact a {
    color: inherit;
}

.clz-mftr-contact i {
    color: #00a1ff;
    width: 18px;
    text-align: center;
}

.clz-mftr-acc-group {
    border-top: 1px solid #13293f;
}

.clz-mftr-acc-group:last-of-type {
    border-bottom: 1px solid #13293f;
}

.clz-mftr-acc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 2px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
}

.clz-mftr-acc-body {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.clz-mftr-acc:checked ~ .clz-mftr-acc-body {
    max-height: 600px;
    padding-bottom: 10px;
}

.clz-mftr-acc-body a {
    display: block;
    padding: 8px 2px;
    color: rgba(255, 255, 255, .7);
    font-size: 14px;
}

.clz-mftr-social {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin: 20px 0;
}

.clz-mftr-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.clz-mftr-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 18px;
}

.clz-mftr-badges img {
    height: 34px;
    background: #fff;
    border-radius: 6px;
    padding: 3px 6px;
}

.clz-mftr-bottom {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #13293f;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
}

.clz-mftr-legal {
    margin-top: 6px;
    line-height: 1.6;
}