/* ==========================================================================
   CloudVina — Design system
   ui/theme/default/hostbilling/css/cloudvina.css

   DESIGN.md. File nay la NGUON DUY NHAT cua token thiet
   ke. Truoc day CSS nam rai rac trong 5 khoi <style> nhung thang vao template
   (client.tpl, home.tpl, auth.tpl, whois.tpl, domain_register.tpl) nen khong
   the doi theme va khong the lam dark mode.

   PHAM VI HIEN TAI: token + font + chuyen dong + khung trang marketing
   (nav, footer, nen). Than trang chu van con CSS mau sang hardcode trong
   home.tpl — chuyen sang token la viec cua giai doan 4. Vi vay dark mode
   hien moi doi duoc phan khung.

   Quy uoc dat ten:
     --cv-*      token thiet ke
     .mk-*       khung trang marketing (khach vang lai)
   ========================================================================== */


/* ==========================================================================
   1. TOKEN — che do sang (mac dinh)
   ========================================================================== */

:root {
    /* --- Nen va be mat: giay XUONG, khong phai giay AM ---------------------
       Nen cu la #FBFAF7 (giay am, ngA vang). Cong voi mot ma nhan am nua thi
       ra dung bang mau cua Claude — chu du an nhan ra ngay tu ban nhap dau.
       #F5F3EE van la giay, van am, nhung trung tinh hon mot bac; cong voi ma
       nhan tim ben duoi thi khong con doc ra bang mau do nua. --- */
    --cv-bg:            #F5F3EE;
    --cv-bg-subtle:     #EDEAE2;
    --cv-surface:       #FFFFFF;
    --cv-surface-hover: #E9E5DB;
    --cv-border:        rgba(23, 20, 32, .10);
    --cv-border-strong: rgba(23, 20, 32, .18);

    /* --- Chu: muc pha chut tim, de khong "roi" khoi ma nhan --- */
    --cv-text:          #171420;
    --cv-text-muted:    #605C6B;
    --cv-text-inverse:  #ffffff;

    /* --- Mau nhan: CHI MOT. Dung tiet che cho nut chinh, so lieu,
           trang thai dang chay. Khong dung cho trang tri.

           VI SAO LA TIM chu khong phai cam/ho phach:
           man hinh cua san pham nay day TRANG THAI — dai canh bao o
           dashboard.tpl dung do cho VPS bi tam ngung va hoa don qua han, vang
           cho sap het han, xanh cho dang chay. Mot ma nhan mau cam se nam
           ngay giua do-loi va vang-canh bao, khach phai doc chu moi biet dau
           la "bam di" va dau la "coi chung". Tim khong dung mot ma trang thai
           nao ben duoi.

           Do tuong phan: chu trang tren nhan 9.8:1 · nhan lam chu tren nen
           giay 10.6:1. Ca hai deu du xa nguong 4.5:1, nen con cho chinh. --- */
    --cv-accent:        #5B2A86;
    --cv-accent-hover:  #4A216D;
    --cv-accent-soft:   rgba(91, 42, 134, .09);
    --cv-on-accent:     #ffffff;

    /* --- Mau phu: chi cho bieu do va minh hoa, KHONG dung cho nut --- */
    --cv-accent-2:      #7A54A5;

    /* --- Trang thai: doi ma nhan sang tim chinh la de ba ma nay khong phai
           nhuong cho ai ca.

           RIENG --cv-warning phai dam them mot bac. Nen giay moi (#F5F3EE)
           toi hon nen cu (#FBFAF7) mot bac, va #A16207 cu vot len 4.57:1 tren
           nen cu — chuyen sang nen moi thi tut xuong 4.44:1, tuc rot chuan.
           #925806 dat 5.23:1, con du cho. --- */
    --cv-success:       #3F6212;
    --cv-warning:       #925806;
    --cv-danger:        #B91C1C;

    /* --- Chu viet ---------------------------------------------------------
       Them mot chu DISPLAY co chan cho tieu de. Be Vietnam Pro van lo toan bo
       phan noi dung — no dat dau tieng Viet chuan, khong thay duoc.
       Source Serif 4 chon vi net day hon Fraunces/Bodoni nen doc tot o moi co
       chu, va vi no co du bo dau tieng Viet. --- */
    --cv-font-sans: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont,
                    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --cv-font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --cv-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
                    Consolas, 'Liberation Mono', monospace;

    /* --- Khoang cach: thang 4px --- */
    --cv-s1:  4px;
    --cv-s2:  8px;
    --cv-s3:  12px;
    --cv-s4:  16px;
    --cv-s6:  24px;
    --cv-s8:  32px;
    --cv-s12: 48px;
    --cv-s16: 64px;
    --cv-s24: 96px;

    /* --- Bo goc: co phan cap, khong dung mot gia tri cho moi thu --- */
    --cv-r-sm: 8px;    /* nut, o nhap */
    --cv-r-md: 14px;   /* the */
    --cv-r-lg: 20px;   /* khoi lon */
    --cv-r-pill: 999px;

    /* --- Do sau --- */
    --cv-shadow-sm: 0 1px 2px rgba(23, 20, 32, .05);
    --cv-shadow-md: 0 14px 38px rgba(23, 20, 32, .10);

    /* --- Chuyen dong (DESIGN.md) --- */
    --cv-ease:      cubic-bezier(.16, 1, .3, 1);
    --cv-dur-fast:  .16s;   /* hover, focus, doi trang thai */
    --cv-dur-mid:   .3s;    /* menu con, doi icon */
    --cv-dur-slow:  .5s;    /* lop phu, menu mobile */
    --cv-dur-enter: .7s;    /* phan tu hien vao man hinh */

    /* --- Be ngang noi dung --- */
    --cv-container: 1240px;

    /* --- Nen kinh mo (glass): CHI dung o nav va lop phu --- */
    --cv-glass-bg:  rgba(245, 243, 238, .86);
    --cv-glass-blur: 12px;

    color-scheme: light;
}


/* ==========================================================================
   2. TOKEN — che do toi

   Dinh nghia hai lan de ca hai chieu deu thang:
     - theo he dieu hanh, tru khi nguoi dung da chon sang
     - theo lua chon tay (data-theme="dark")
   Chi ghi de TOKEN, khong viet lai CSS cho che do toi.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cv-bg:            #151018;
        --cv-bg-subtle:     #1A1421;
        --cv-surface:       #1D1726;
        --cv-surface-hover: #272032;
        --cv-border:        rgba(232, 228, 234, .08);
        --cv-border-strong: rgba(232, 228, 234, .16);

        --cv-text:          #E8E4EA;
        --cv-text-muted:    #A59DA8;
        --cv-text-inverse:  #151018;

        --cv-accent:        #A78BF5;
        --cv-accent-hover:  #BCA6F8;
        --cv-accent-soft:   rgba(167, 139, 245, .14);
        --cv-on-accent:     #1B0F33;

        --cv-accent-2:      #C7B3E8;

        --cv-success:       #A3E635;
        --cv-warning:       #FCD34D;
        --cv-danger:        #FCA5A5;

        /* O nen toi gan nhu khong dung bong. Phan tang bang do sang nen
           cong vien 1px — day la thu lam dark mode trong dat tien. */
        --cv-shadow-sm: none;
        --cv-shadow-md: 0 16px 40px rgba(0, 0, 0, .5);

        --cv-glass-bg: rgba(21, 16, 24, .84);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --cv-bg:            #151018;
    --cv-bg-subtle:     #1A1421;
    --cv-surface:       #1D1726;
    --cv-surface-hover: #272032;
    --cv-border:        rgba(232, 228, 234, .08);
    --cv-border-strong: rgba(232, 228, 234, .16);

    --cv-text:          #E8E4EA;
    --cv-text-muted:    #A59DA8;
    --cv-text-inverse:  #151018;

    --cv-accent:        #A78BF5;
    --cv-accent-hover:  #BCA6F8;
    --cv-accent-soft:   rgba(167, 139, 245, .14);
    --cv-on-accent:     #1B0F33;

    --cv-accent-2:      #C7B3E8;

    --cv-success:       #A3E635;
    --cv-warning:       #FCD34D;
    --cv-danger:        #FCA5A5;

    --cv-shadow-sm: none;
    --cv-shadow-md: 0 16px 40px rgba(0, 0, 0, .5);

    --cv-glass-bg: rgba(21, 16, 24, .84);

    color-scheme: dark;
}


/* ==========================================================================
   3. CHUYEN DONG

   Mot keyframe duy nhat cho toan site. Do tre so le dat bang --cv-delay
   ngay tren phan tu, KHONG qua 0.25s o khoi co gia hoac nut mua
   (DESIGN.md).
   ========================================================================== */

@keyframes cvFadeSlideUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cv-enter {
    animation: cvFadeSlideUp var(--cv-dur-enter) var(--cv-ease) var(--cv-delay, 0s) both;
}

/* Thang do tre cho hero — tong khong vuot 0.20s */
.cv-delay-1 { --cv-delay: .05s; }
.cv-delay-2 { --cv-delay: .10s; }
.cv-delay-3 { --cv-delay: .15s; }
.cv-delay-4 { --cv-delay: .20s; }

/* Hien dan khi cuon toi. JS gan .cv-in khi phan tu vao khung nhin va
   unobserve ngay — chi chay MOT lan, khong hien lai khi cuon nguoc. */
.cv-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--cv-dur-enter) var(--cv-ease),
                transform var(--cv-dur-enter) var(--cv-ease);
}
.cv-reveal.cv-in {
    opacity: 1;
    transform: translateY(0);
}

/* Nguoi tat hieu ung phai thay noi dung NGAY, khong cho hien dan. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .cv-reveal { opacity: 1; transform: none; }
}


/* ==========================================================================
   4. KHUNG TRANG MARKETING (.mk-*)

   Chuyen tu khoi <style> trong client_marketing.tpl sang day, viet lai theo
   token nen doi duoc theme.
   ========================================================================== */

/* .mk-shell nam trong .page-inner cua base.tpl, ma app.min.css dat
   ".page-inner,.page-wrapper" thanh display flex. Nghia la .mk-shell la mot
   FLEX ITEM, va flex item mac dinh la "flex 0 1 auto" — khong gian ra, chi co
   lai bang be ngang noi dung ben trong. Hau qua: trang bi cut o khoang
   max-width cua nav, chua trang toan bo phan con lai ben phai.

   Khung dashboard khong lo loi nay vi con truc tiep cua .page-inner o do la
   .page-sidebar va .page-content-wrapper, deu da co luat rieng trong
   app.min.css. Luong marketing thi phai tu ep gian ra. */
.mk-shell {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 100vh;
    background: var(--cv-bg);
    color: var(--cv-text);
    font-family: var(--cv-font-sans);
}

.mk-main {
    flex: 1 0 auto;
    width: 100%;
}

.mk-container {
    max-width: var(--cv-container);
    margin: 0 auto;
    padding-left: var(--cv-s4);
    padding-right: var(--cv-s4);
}

/* Lop boc noi dung trang trong layout marketing: can giua, co le hai ben.
   Layout app dua vao .page-content cua CloudOnex de lam viec nay. */
.mk-page {
    max-width: var(--cv-container);
    margin: 0 auto;
    padding: var(--cv-s6) 20px var(--cv-s12);
}
.mk-page--flush {
    padding-top: var(--cv-s4);
    padding-bottom: 0;
}

@media (max-width: 575px) {
    .mk-page { padding: var(--cv-s4) 14px var(--cv-s8); }
}

/* --- Thanh dieu huong: mot trong ba cho duy nhat duoc dung glass --- */
.mk-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--cv-glass-bg);
    backdrop-filter: blur(var(--cv-glass-blur));
    -webkit-backdrop-filter: blur(var(--cv-glass-blur));
    border-bottom: 1px solid var(--cv-border);
}

.mk-nav-inner {
    max-width: var(--cv-container);
    margin: 0 auto;
    padding: 0 var(--cv-s5, 20px);
    height: 64px;
    display: flex;
    align-items: center;
    gap: var(--cv-s2);
}

.mk-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--cv-text);
    flex-shrink: 0;
}
.mk-brand:hover { color: var(--cv-text); }
.mk-brand img { height: 30px; width: auto; }
.mk-logo-cloud { color: var(--cv-text); }
.mk-logo-vina  { color: var(--cv-accent); }

.mk-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 18px;
    padding: 0;
}
.mk-links > li { list-style: none; position: relative; }

.mk-links a.mk-link {
    display: block;
    padding: var(--cv-s2) 13px;
    border-radius: var(--cv-r-sm);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--cv-text);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease);
}
.mk-links a.mk-link:hover,
.mk-links li.mk-open > a.mk-link {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}

.mk-caret { margin-left: 5px; font-size: 10px; opacity: .55; }

/* --- Menu con --- */
.mk-sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 216px;
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    box-shadow: var(--cv-shadow-md);
    padding: 6px;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--cv-dur-mid) var(--cv-ease),
                transform var(--cv-dur-mid) var(--cv-ease),
                visibility var(--cv-dur-mid);
}
.mk-links li.mk-open > .mk-sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mk-sub li { list-style: none; }
.mk-sub a {
    display: block;
    padding: 9px var(--cv-s3);
    border-radius: var(--cv-r-sm);
    font-size: 14px;
    color: var(--cv-text);
    text-decoration: none;
}
.mk-sub a:hover { background: var(--cv-surface-hover); }

/* --- Nut ben phai --- */
.mk-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--cv-s2);
    flex-shrink: 0;
}

.mk-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--cv-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cv-dur-fast) var(--cv-ease);
}
.mk-icon-btn:hover { background: var(--cv-surface-hover); color: var(--cv-text); }

.mk-cart-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--cv-danger);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

/* Cong tac sang/toi: hai icon chong len nhau, doi bang rotate+scale+opacity */
.mk-theme-toggle .mk-sun,
.mk-theme-toggle .mk-moon {
    position: absolute;
    transition: transform var(--cv-dur-mid) var(--cv-ease),
                opacity var(--cv-dur-mid) var(--cv-ease);
}
.mk-theme-toggle .mk-sun  { transform: rotate(0) scale(1);      opacity: 1; }
.mk-theme-toggle .mk-moon { transform: rotate(-90deg) scale(.75); opacity: 0; }

:root[data-theme="dark"] .mk-theme-toggle .mk-sun  { transform: rotate(90deg) scale(.75); opacity: 0; }
:root[data-theme="dark"] .mk-theme-toggle .mk-moon { transform: rotate(0) scale(1);        opacity: 1; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .mk-theme-toggle .mk-sun  { transform: rotate(90deg) scale(.75); opacity: 0; }
    :root:not([data-theme="light"]) .mk-theme-toggle .mk-moon { transform: rotate(0) scale(1);        opacity: 1; }
}

.mk-btn-signin,
.mk-btn-register {
    display: inline-block;
    padding: var(--cv-s2) 17px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--cv-dur-fast) var(--cv-ease),
                border-color var(--cv-dur-fast) var(--cv-ease);
}
.mk-btn-signin {
    color: var(--cv-text);
    border: 1px solid var(--cv-border-strong);
}
.mk-btn-signin:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}
.mk-btn-register {
    background: var(--cv-accent);
    color: var(--cv-on-accent);
    border: 1px solid transparent;
}
.mk-btn-register:hover {
    background: var(--cv-accent-hover);
    color: var(--cv-on-accent);
}

.mk-burger { display: none; }

/* --- Footer --- */
.mk-footer {
    flex-shrink: 0;
    background: var(--cv-bg-subtle);
    border-top: 1px solid var(--cv-border);
    color: var(--cv-text-muted);
    margin-top: var(--cv-s16);
}
.mk-footer-inner {
    max-width: var(--cv-container);
    margin: 0 auto;
    padding: var(--cv-s12) 20px var(--cv-s6);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--cv-s8);
}
.mk-footer h6 {
    color: var(--cv-text);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    margin-bottom: 14px;
}
.mk-footer ul { list-style: none; padding: 0; margin: 0; }
.mk-footer li { margin-bottom: 9px; }
.mk-footer a {
    color: var(--cv-text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color var(--cv-dur-fast) var(--cv-ease);
}
.mk-footer a:hover { color: var(--cv-text); }

.mk-footer-brand {
    font-size: 20px;
    font-weight: 800;
    color: var(--cv-text);
    margin-bottom: 10px;
    display: block;
}
.mk-footer-about {
    font-size: 14px;
    line-height: 1.65;
    color: var(--cv-text-muted);
    max-width: 330px;
}
.mk-footer-bottom {
    border-top: 1px solid var(--cv-border);
    max-width: var(--cv-container);
    margin: 0 auto;
    padding: 18px 20px var(--cv-s6);
    font-size: 13px;
    color: var(--cv-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-s3);
    justify-content: space-between;
}

/* --- So lieu, IP, cau hinh, gia: dat bang font mono.
       Chi tiet nay khien lap trinh vien tin ngay. --- */
.cv-mono,
.mk-spec,
.mk-price {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   5. MAN HINH HEP
   ========================================================================== */

@media (max-width: 991px) {
    .mk-burger { display: flex; }

    .mk-links {
        position: fixed;
        inset: 64px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 10px 14px 20px;
        background: var(--cv-surface);
        border-bottom: 1px solid var(--cv-border);
        box-shadow: var(--cv-shadow-md);
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        display: none;
    }
    .mk-links.mk-links-open { display: flex; }
    .mk-links a.mk-link { padding: var(--cv-s3) 10px; font-size: 15.5px; }

    .mk-sub {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        padding: 0 0 4px var(--cv-s3);
        min-width: 0;
        display: none;
        background: transparent;
    }
    .mk-links li.mk-open > .mk-sub { display: block; }

    .mk-btn-signin { display: none; }
    .mk-footer-inner { grid-template-columns: 1fr 1fr; gap: var(--cv-s6); }
}

@media (max-width: 575px) {
    .mk-nav-inner { padding: 0 14px; }
    .mk-footer-inner { grid-template-columns: 1fr; }
    .mk-footer-bottom { padding: 18px 14px var(--cv-s6); }
}


/* ==========================================================================
   6. TRANG CHU BAN HANG (DESIGN.md)
   ========================================================================== */

.cv-section { padding: var(--cv-s16) 0; }
.cv-section + .cv-section { padding-top: 0; }

.cv-section-head {
    max-width: 660px;
    margin: 0 auto var(--cv-s8);
    text-align: center;
}
.cv-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cv-accent);
    margin-bottom: var(--cv-s3);
}
.cv-h2 {
    font-family: var(--cv-font-display);
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.3rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.15;
    color: var(--cv-text);
    margin: 0 0 var(--cv-s3);
}
.cv-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--cv-text-muted);
    margin: 0;
}

/* --- Hero --- */
.cv-hero {
    position: relative;
    padding: var(--cv-s24) 0 var(--cv-s16);
    text-align: left;
}

/* Khong con luoi nen va vang sang o day.
   Chu du an danh gia chung xau, va khao sat xu huong 2026 cung cho thay thiet
   ke dang roi xa trang tri hinh khoi chung chung. Thay bang khoang trang co
   chu dich lam cau truc, phan cap chu manh — kieu bo cuc bien tap. */

.cv-hero-inner {
    position: relative;
    max-width: 820px;
}
.cv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cv-s2);
    padding: 6px 14px;
    border-radius: var(--cv-r-pill);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    font-size: 13px;
    font-weight: 500;
    color: var(--cv-text-muted);
    margin-bottom: var(--cv-s6);
}
.cv-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cv-success);
}
.cv-hero h1 {
    font-family: var(--cv-font-display);
    font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: var(--cv-text);
    margin: 0 0 var(--cv-s4);
}
.cv-hl { color: var(--cv-accent); }
.cv-hero-sub {
    font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem);
    line-height: 1.65;
    color: var(--cv-text-muted);
    max-width: 620px;
    margin: 0 0 var(--cv-s8);
}

/* Gia ngay tren man hinh dau — nguyen tac so 1 cua muc 7: khach phai thay
   MOT muc gia cu the trong 5 giay dau, khong can cuon. */
.cv-hero-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--cv-s2);
    margin-bottom: var(--cv-s6);
}
.cv-from {
    font-size: 14px;
    color: var(--cv-text-muted);
}
.cv-amount {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cv-text);
}
.cv-per {
    font-size: 14px;
    color: var(--cv-text-muted);
}

.cv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-s3);
}

/* --- Nut --- */
.cv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cv-s2);
    padding: 12px 22px;
    border-radius: var(--cv-r-sm);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--cv-dur-fast) var(--cv-ease),
                border-color var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease);
}
.cv-btn-primary {
    background: var(--cv-accent);
    color: var(--cv-on-accent);
}
.cv-btn-primary:hover {
    background: var(--cv-accent-hover);
    color: var(--cv-on-accent);
}
.cv-btn-ghost {
    background: transparent;
    color: var(--cv-text);
    border-color: var(--cv-border-strong);
}
.cv-btn-ghost:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}
.cv-btn-block { width: 100%; }

/* --- O tra ten mien trong hero --- */
.cv-domain-form {
    display: flex;
    gap: var(--cv-s2);
    max-width: 520px;
    margin: var(--cv-s8) 0 0;
}
.cv-domain-form input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border-radius: var(--cv-r-sm);
    border: 1px solid var(--cv-border-strong);
    background: var(--cv-surface);
    color: var(--cv-text);
    font-size: 15px;
    font-family: var(--cv-font-mono);
}
.cv-domain-form input::placeholder {
    font-family: var(--cv-font-sans);
    color: var(--cv-text-muted);
}
.cv-domain-form input:focus {
    outline: none;
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 3px var(--cv-accent-soft);
}

/* --- Dai tin hieu tin cay --- */
.cv-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--cv-s4);
    margin-top: var(--cv-s8);
}
.cv-trust-item {
    display: flex;
    align-items: flex-start;
    gap: var(--cv-s3);
    padding: var(--cv-s4);
    border-radius: var(--cv-r-md);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
}
.cv-trust-icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}
.cv-trust-title {
    font-weight: 700;
    font-size: 15px;
    color: var(--cv-text);
    line-height: 1.3;
}
.cv-trust-desc {
    font-size: 13px;
    color: var(--cv-text-muted);
    line-height: 1.45;
    margin-top: 2px;
}

/* --- Cong tac chu ky --- */
.cv-cycle-wrap { text-align: center; }
.cv-cycle {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 5px;
    border-radius: var(--cv-r-pill);
    border: 1px solid var(--cv-border);
    background: var(--cv-bg-subtle);
    margin: 0 auto var(--cv-s8);
}
.cv-cycle-btn {
    padding: 8px 18px;
    border: none;
    border-radius: var(--cv-r-pill);
    background: transparent;
    color: var(--cv-text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease);
}
.cv-cycle-btn:hover { color: var(--cv-text); }
.cv-cycle-btn.is-active {
    background: var(--cv-surface);
    color: var(--cv-text);
    box-shadow: var(--cv-shadow-sm);
}

/* --- LUOI GOI TU CO -------------------------------------------------------
   Yeu cau: 1 goi thi mot the dat giua; them goi thi tu thanh 2-3 cot ma
   khong phai sua template.

   auto-fit cong minmax(290px, 360px) cong justify-content center lam dung
   viec do: moi the rong toi da 360px, so cot tu tinh theo be ngang con lai,
   phan du duoc can giua thay vi dinh trai. */
.cv-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 360px));
    justify-content: center;
    gap: var(--cv-s6);
}

.cv-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--cv-s6);
    border-radius: var(--cv-r-md);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    transition: border-color var(--cv-dur-fast) var(--cv-ease);
}
.cv-plan:hover { border-color: var(--cv-border-strong); }

/* Goi noi bat: vien phat sang mau nhan, KHONG dung badge xoay 45 do */
.cv-plan--featured {
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 1px var(--cv-accent), 0 0 34px -8px var(--cv-accent);
}
.cv-plan-tag {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 12px;
    border-radius: var(--cv-r-pill);
    background: var(--cv-accent);
    color: var(--cv-on-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cv-plan-group {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}
.cv-plan-name {
    font-family: var(--cv-font-display);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--cv-text);
    margin: var(--cv-s1) 0 var(--cv-s4);
}

.cv-plan-price { margin-bottom: var(--cv-s2); }
.cv-price-row { display: none; }
.cv-price-row.is-active { display: block; }
.cv-price-amount {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--cv-text);
}
.cv-price-per {
    font-size: 13px;
    color: var(--cv-text-muted);
    margin-left: 2px;
}
.cv-price-save {
    display: inline-block;
    margin-top: var(--cv-s2);
    padding: 2px 9px;
    border-radius: var(--cv-r-pill);
    background: var(--cv-accent-soft);
    color: var(--cv-success);
    font-size: 12px;
    font-weight: 700;
}

.cv-plan-specs {
    list-style: none;
    padding: 0;
    margin: var(--cv-s4) 0 var(--cv-s6);
    flex-grow: 1;
}
.cv-plan-specs li {
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
    padding: 9px 0;
    border-bottom: 1px solid var(--cv-border);
    font-size: 14px;
}
.cv-plan-specs li:last-child { border-bottom: none; }
.cv-spec-label { color: var(--cv-text-muted); }
.cv-spec-value {
    margin-left: auto;
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--cv-text);
}

/* --- Trang thai rong (chua co goi nao dang ban) --- */
.cv-empty {
    max-width: 520px;
    margin: 0 auto;
    padding: var(--cv-s12) var(--cv-s6);
    text-align: center;
    border: 1px dashed var(--cv-border-strong);
    border-radius: var(--cv-r-md);
    color: var(--cv-text-muted);
}

/* --- Quy trinh 3 buoc --- */
.cv-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--cv-s6);
    counter-reset: cvstep;
}
.cv-step {
    position: relative;
    padding-top: var(--cv-s8);
}
.cv-step::before {
    counter-increment: cvstep;
    content: counter(cvstep);
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
    font-family: var(--cv-font-mono);
    font-weight: 700;
    font-size: 15px;
}
.cv-step h3 {
    font-family: var(--cv-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cv-text);
    margin: 0 0 var(--cv-s2);
}
.cv-step p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cv-text-muted);
    margin: 0;
}

/* --- Ly do chon --- */
.cv-feats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--cv-s6);
}
.cv-feat-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cv-r-sm);
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
    margin-bottom: var(--cv-s4);
}
.cv-feat h3 {
    font-family: var(--cv-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cv-text);
    margin: 0 0 var(--cv-s2);
}
.cv-feat p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--cv-text-muted);
    margin: 0;
}

/* --- FAQ --- */
.cv-faq {
    max-width: 760px;
    margin: 0 auto;
}
.cv-faq details {
    border-bottom: 1px solid var(--cv-border);
    padding: var(--cv-s4) 0;
}
.cv-faq summary {
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
    cursor: pointer;
    list-style: none;
    font-weight: 600;
    font-size: 15.5px;
    color: var(--cv-text);
}
.cv-faq summary::-webkit-details-marker { display: none; }
.cv-faq summary::after {
    content: "+";
    margin-left: auto;
    font-size: 20px;
    font-weight: 400;
    color: var(--cv-text-muted);
    transition: transform var(--cv-dur-mid) var(--cv-ease);
}
.cv-faq details[open] summary::after { transform: rotate(45deg); }
.cv-faq-body {
    padding-top: var(--cv-s3);
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--cv-text-muted);
}

/* --- Keu goi cuoi --- */
.cv-cta {
    text-align: center;
    padding: var(--cv-s16) var(--cv-s6);
    border-radius: var(--cv-r-lg);
    border: 1px solid var(--cv-border);
    background: var(--cv-bg-subtle);
}

@media (max-width: 575px) {
    .cv-section { padding: var(--cv-s12) 0; }
    .cv-hero { padding: var(--cv-s12) var(--cv-s4); }
    .cv-domain-form { flex-direction: column; }
}


/* ==========================================================================
   7. TRANG DANH MUC GOI (giai doan 5)
   ========================================================================== */

/* --- Tab chuyen nhom san pham --- */
.cv-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-s2);
    margin-bottom: var(--cv-s8);
}
.cv-tab {
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--cv-r-pill);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    color: var(--cv-text-muted);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--cv-dur-fast) var(--cv-ease),
                border-color var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease);
}
.cv-tab:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-text);
}
.cv-tab.is-active {
    background: var(--cv-accent);
    border-color: var(--cv-accent);
    color: var(--cv-on-accent);
}

/* --- O tra ten mien di kem (goi hosting / ten mien) --- */
.cv-domain-box {
    padding: var(--cv-s4) var(--cv-s6);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    background: var(--cv-bg-subtle);
    margin-bottom: var(--cv-s8);
}
.cv-domain-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-text-muted);
    margin-bottom: var(--cv-s2);
}
.cv-domain-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cv-s2);
}
.cv-domain-row input {
    flex: 1 1 260px;
    min-width: 0;
    padding: 10px 14px;
    border-radius: var(--cv-r-sm);
    border: 1px solid var(--cv-border-strong);
    background: var(--cv-surface);
    color: var(--cv-text);
    font-family: var(--cv-font-mono);
    font-size: 14.5px;
}
.cv-domain-row input::placeholder {
    font-family: var(--cv-font-sans);
    color: var(--cv-text-muted);
}
.cv-domain-row input:focus {
    outline: none;
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 3px var(--cv-accent-soft);
}
.cv-domain-badge {
    padding: 6px 12px;
    border-radius: var(--cv-r-pill);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}
.cv-domain-badge[data-state="checking"] {
    background: var(--cv-surface-hover);
    color: var(--cv-text-muted);
}
.cv-domain-badge[data-state="free"] {
    background: var(--cv-accent-soft);
    color: var(--cv-success);
}
.cv-domain-badge[data-state="taken"] {
    background: var(--cv-accent-soft);
    color: var(--cv-danger);
}
.cv-domain-badge[data-state="unknown"] {
    background: var(--cv-surface-hover);
    color: var(--cv-warning);
}

/* --- Dong dac diem trong the goi (khac dong thong so: co dau tick) --- */
.cv-plan-specs li.cv-spec-feat {
    gap: var(--cv-s2);
    color: var(--cv-text);
}
.cv-plan-specs li.cv-spec-feat svg {
    flex-shrink: 0;
    color: var(--cv-success);
}


/* ==========================================================================
   8. GIO HANG / CHECKOUT (giai doan 5)
   ========================================================================== */

.cv-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--cv-s8);
    align-items: start;
}

/* --- Mon hang --- */
.cv-cart-item {
    padding: var(--cv-s6);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    margin-bottom: var(--cv-s4);
}
.cv-cart-item-head {
    display: flex;
    align-items: flex-start;
    gap: var(--cv-s4);
    margin-bottom: var(--cv-s4);
}
.cv-cart-item-name {
    flex: 1 1 auto;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cv-text);
    line-height: 1.3;
}
.cv-cart-item-meta {
    font-size: 14px;
    color: var(--cv-text-muted);
    margin-bottom: var(--cv-s4);
}
.cv-cart-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--cv-r-sm);
    color: var(--cv-text-muted);
    text-decoration: none;
    transition: background var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease);
}
.cv-cart-remove:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-danger);
}

.cv-cart-item-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cv-s2);
    padding-top: var(--cv-s4);
    border-top: 1px solid var(--cv-border);
}
.cv-cart-price-main {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--cv-text);
}
.cv-cart-price-tax {
    font-size: 13px;
    color: var(--cv-text-muted);
}
/* Gia gia han — ngay duoi gia mua, cung mot o (loi hua tren trang chu). */
.cv-cart-price-renew {
    flex-basis: 100%;
    font-size: 13px;
    color: var(--cv-text-muted);
}

.cv-cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cv-s4);
    margin-top: var(--cv-s6);
}
.cv-link-danger {
    font-size: 14px;
    color: var(--cv-text-muted);
    text-decoration: none;
    transition: color var(--cv-dur-fast) var(--cv-ease);
}
.cv-link-danger:hover { color: var(--cv-danger); }

/* --- O nhap dung chung --- */
.cv-field { margin-bottom: var(--cv-s4); }
.cv-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-text-muted);
    margin-bottom: 6px;
}
.cv-field-hint {
    display: inline-block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--cv-accent);
    text-decoration: none;
}
.cv-field-hint:hover { text-decoration: underline; }
/* Chu thich thuong duoi o nhap (khong phai link). */
.cv-field-note {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--cv-text-muted);
}

.cv-input,
.cv-select {
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--cv-r-sm);
    border: 1px solid var(--cv-border-strong);
    background: var(--cv-surface);
    color: var(--cv-text);
    font-size: 14.5px;
    font-family: var(--cv-font-sans);
}
.cv-input { font-family: var(--cv-font-mono); }
.cv-input::placeholder {
    font-family: var(--cv-font-sans);
    color: var(--cv-text-muted);
}
.cv-input:focus,
.cv-select:focus {
    outline: none;
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 3px var(--cv-accent-soft);
}

/* --- Tom tat don, ghim khi cuon ---
   Tong tien la thu khach nhin lai nhieu nhat truoc khi bam tra tien. Ban cu de
   no la mot <h4> cuoi trang, cuon xuong la mat. */
.cv-summary { position: sticky; top: 88px; }
.cv-summary-box {
    padding: var(--cv-s6);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    background: var(--cv-bg-subtle);
}
.cv-summary-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cv-text);
    margin-bottom: var(--cv-s4);
}
.cv-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--cv-s4);
    font-size: 14.5px;
    color: var(--cv-text-muted);
    padding: var(--cv-s2) 0;
}
.cv-summary-total {
    padding-top: var(--cv-s4);
    margin-bottom: var(--cv-s6);
    border-top: 1px solid var(--cv-border);
    font-size: 1rem;
    font-weight: 700;
    color: var(--cv-text);
}
.cv-summary-total .cv-mono {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--cv-text);
}
.cv-summary-note {
    margin: var(--cv-s4) 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cv-text-muted);
}

@media (max-width: 900px) {
    .cv-checkout { grid-template-columns: 1fr; }
    .cv-summary { position: static; }
}


/* ==========================================================================
   9. MAN HINH QUAN LY DICH VU (giai doan 5 + 6)

   Dung o luong app (khach da dang nhap). Layout app ghim data-theme="light"
   cho toi khi khung dashboard chuyen sang token — xem client.tpl.
   ========================================================================== */

/* --- Bang thong bao trang thai --- */
.cv-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--cv-s4);
    padding: var(--cv-s4) var(--cv-s6);
    border-radius: var(--cv-r-md);
    border: 1px solid var(--cv-border);
    background: var(--cv-bg-subtle);
    margin-bottom: var(--cv-s6);
}
.cv-notice--busy { border-color: var(--cv-accent); }
.cv-notice-title {
    font-weight: 700;
    color: var(--cv-text);
    margin-bottom: 4px;
}
.cv-notice-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--cv-text-muted);
}

.cv-spinner {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border-radius: 50%;
    border: 2px solid var(--cv-accent-soft);
    border-top-color: var(--cv-accent);
    animation: cvSpin .8s linear infinite;
}
@keyframes cvSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .cv-spinner { animation-duration: 2s; }
}

/* --- Khung noi dung --- */
.cv-panel {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    overflow: hidden;
}
.cv-panel-head {
    font-family: var(--cv-font-display);
    padding: var(--cv-s4) var(--cv-s6);
    border-bottom: 1px solid var(--cv-border);
    font-weight: 700;
    font-size: 15px;
    color: var(--cv-text);
}
.cv-panel-foot {
    padding: var(--cv-s6);
    border-top: 1px solid var(--cv-border);
}

/* --- Danh sach khoa / gia tri --- */
.cv-kv { padding: var(--cv-s2) var(--cv-s6); }
.cv-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-s4);
    padding: 11px 0;
    border-bottom: 1px solid var(--cv-border);
    font-size: 14px;
}
.cv-kv-row:last-child { border-bottom: none; }
.cv-kv-key { color: var(--cv-text-muted); flex-shrink: 0; }
.cv-kv-val {
    color: var(--cv-text);
    font-weight: 600;
    text-align: right;
    min-width: 0;
    word-break: break-word;
}

/* --- Bam de copy --- */
.cv-copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    margin: -3px -8px;
    border: none;
    border-radius: var(--cv-r-sm);
    background: transparent;
    color: var(--cv-text);
    font: inherit;
    cursor: pointer;
    transition: background var(--cv-dur-fast) var(--cv-ease);
}
.cv-copy:hover { background: var(--cv-surface-hover); }
.cv-copy svg { flex-shrink: 0; color: var(--cv-text-muted); }
.cv-copy.is-copied { color: var(--cv-success); }
.cv-copy.is-copied svg { color: var(--cv-success); }

/* --- Trang thai --- */
.cv-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px;
    border-radius: var(--cv-r-pill);
    background: var(--cv-surface-hover);
    color: var(--cv-text-muted);
    font-size: 13px;
    font-weight: 700;
}
.cv-status .cv-dot { background: currentColor; }
.cv-status--ok    { color: var(--cv-success); background: var(--cv-accent-soft); }
.cv-status--busy  { color: var(--cv-accent);  background: var(--cv-accent-soft); }
.cv-status--warn  { color: var(--cv-warning); background: var(--cv-accent-soft); }

.cv-live {
    padding: var(--cv-s3) var(--cv-s6);
    border-top: 1px solid var(--cv-border);
    font-size: 13px;
    color: var(--cv-text-muted);
}
.cv-live-label { display: block; margin-bottom: 2px; }

/* --- Cong tac tu dong gia han --- */
.cv-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-s4);
    margin-bottom: var(--cv-s4);
}
.cv-switch-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cv-text);
    margin: 0;
}

/* --- O thong so --- */
.cv-spec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--cv-s3);
    padding: var(--cv-s6);
}
.cv-spec-tile {
    padding: var(--cv-s4);
    border-radius: var(--cv-r-sm);
    background: var(--cv-bg-subtle);
    text-align: center;
}
.cv-spec-tile-label {
    font-size: 12px;
    color: var(--cv-text-muted);
    margin-bottom: 4px;
}
.cv-spec-tile-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--cv-text);
}

/* --- Bang --- */
.cv-table-wrap { overflow-x: auto; }
.cv-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.cv-table th {
    padding: var(--cv-s3) var(--cv-s4);
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
    background: var(--cv-bg-subtle);
    border-bottom: 1px solid var(--cv-border);
    white-space: nowrap;
}
.cv-table td {
    padding: var(--cv-s4);
    border-bottom: 1px solid var(--cv-border);
    color: var(--cv-text);
    vertical-align: middle;
}
.cv-table tbody tr:last-child td { border-bottom: none; }
.cv-table tbody tr:hover { background: var(--cv-surface-hover); }
.cv-td-name { font-weight: 700; }

.cv-btn-sm {
    padding: 7px 14px;
    font-size: 13.5px;
}


/* ==========================================================================
   10. DANG NHAP / DANG KY / QUEN MAT KHAU (giai doan 6)

   auth.tpl co 3 nhanh form (dang nhap, dang ky, dat lai mat khau) cong phan
   noi reCAPTCHA. Thay vi viet lai markup — rui ro cao ma loi ich chi la thay
   ten class — o day anh xa cac class Bootstrap san co sang design system,
   trong pham vi .cv-auth. Markup chi them dung mot class.
   ========================================================================== */

.cv-auth { margin-top: var(--cv-s12); margin-bottom: var(--cv-s12); }

.cv-auth .card {
    padding: var(--cv-s8) !important;
    border: 1px solid var(--cv-border) !important;
    border-radius: var(--cv-r-md) !important;
    background: var(--cv-surface) !important;
    box-shadow: var(--cv-shadow-md) !important;
}

.cv-auth h1 {
    font-size: 1.55rem !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--cv-text);
    margin-bottom: var(--cv-s6) !important;
}

.cv-auth .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-text-muted);
    margin-bottom: 6px;
}

.cv-auth .form-control {
    padding: 11px 14px !important;
    border-radius: var(--cv-r-sm) !important;
    border: 1px solid var(--cv-border-strong) !important;
    background: var(--cv-surface) !important;
    color: var(--cv-text) !important;
    font-size: 15px !important;
    font-family: var(--cv-font-sans);
    height: auto !important;
}
.cv-auth .form-control:focus {
    outline: none;
    border-color: var(--cv-accent) !important;
    box-shadow: 0 0 0 3px var(--cv-accent-soft) !important;
}
.cv-auth .form-control::placeholder { color: var(--cv-text-muted); }

.cv-auth .btn-primary {
    width: 100%;
    padding: 12px 22px !important;
    border-radius: var(--cv-r-sm) !important;
    background: var(--cv-accent) !important;
    border-color: transparent !important;
    color: var(--cv-on-accent) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: background var(--cv-dur-fast) var(--cv-ease);
}
.cv-auth .btn-primary:hover {
    background: var(--cv-accent-hover) !important;
}

.cv-auth a,
.cv-auth .text-info {
    color: var(--cv-accent) !important;
    text-decoration: none;
}
.cv-auth a:hover { text-decoration: underline; }

.cv-auth .text-center { color: var(--cv-text-muted); font-size: 14.5px; }


/* ==========================================================================
   11. ANH XA BOOTSTRAP -> DESIGN SYSTEM TRONG LUONG APP (giai doan 6)

   Luong app co gan 30 template dung .card / .table / .form-control cua
   CloudOnex. Viet lai tung file vua rui ro vua ton thoi gian ma loi ich chi la
   doi ten class. O day anh xa cac class san co sang token, trong pham vi
   .page-content — tuc chi phan noi dung, KHONG dung toi sidebar hay header.

   Giu o muc tinh chinh: bo goc, vien, nen, khoang cach, kieu chu. Khong doi bo
   cuc, khong doi kich thuoc, de khong pha man hinh nao.

   Layout app dang ghim data-theme="light" (xem client.tpl) nen token luon la
   bang mau sang — chua co nguy co nua toi nua sang.
   ========================================================================== */

.page-content .card {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    box-shadow: none;
}
.page-content .card-header {
    background: transparent;
    border-bottom: 1px solid var(--cv-border);
    padding: var(--cv-s4) var(--cv-s6);
}
.page-content .card-header-title,
.page-content .card-header h5 {
    font-size: 15px;
    font-weight: 700;
    color: var(--cv-text);
    margin: 0;
}

/* O so lieu tren dashboard: con so la thu doc truoc tien nen dat font mono,
   tabular-nums de cac so thang cot khi doi gia tri. */
.page-content .card-body > h2 {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cv-text);
    margin-bottom: 2px;
}
.page-content .card-body > h2 + span {
    font-size: 13.5px;
    color: var(--cv-text-muted);
}

/* --- Bang --- */
.page-content .table > thead th,
.page-content .table > thead td {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
    border-bottom: 1px solid var(--cv-border);
    white-space: nowrap;
}
.page-content .table > thead th strong { font-weight: 700; }
.page-content .table > tbody td {
    border-color: var(--cv-border);
    color: var(--cv-text);
    vertical-align: middle;
}

/* --- O nhap --- */
.page-content .form-control,
.page-content .form-select {
    border-radius: var(--cv-r-sm);
    border: 1px solid var(--cv-border-strong);
    background: var(--cv-surface);
    color: var(--cv-text);
}
.page-content .form-control:focus,
.page-content .form-select:focus {
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 3px var(--cv-accent-soft);
}
.page-content .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-text-muted);
}

/* --- Breadcrumb --- */
.page-content .breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 13.5px;
}
.page-content .breadcrumb a { color: var(--cv-text-muted); text-decoration: none; }
.page-content .breadcrumb a:hover { color: var(--cv-accent); }
.page-content .breadcrumb-item.active { color: var(--cv-text); font-weight: 600; }

/* --- Nhan trang thai --- */
.page-content .badge.bg-success { background: var(--cv-success) !important; }
.page-content .badge.bg-warning { background: var(--cv-warning) !important; color: #fff !important; }
.page-content .badge.bg-danger  { background: var(--cv-danger)  !important; }


/* ==========================================================================
   12. SO SANH GIA GIA HAN

   Khoi ban hang manh nhat cua trang: dat gia nam 1 / 2 / 3 cua nha cung cap
   thuong thay canh cua CloudVina. Doi thu khong dam dat bang nay canh bang gia
   cua ho, nen day la thu ta co ma ho khong sao chep duoc.
   ========================================================================== */

.cv-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--cv-s6);
    max-width: 820px;
    margin: 0 auto;
}

.cv-compare-col {
    display: flex;
    flex-direction: column;
    padding: var(--cv-s6);
    border-radius: var(--cv-r-md);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
}
.cv-compare-col--them {
    background: var(--cv-bg-subtle);
}
.cv-compare-col--us {
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 1px var(--cv-accent);
}

.cv-compare-head {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
    padding-bottom: var(--cv-s4);
    border-bottom: 1px solid var(--cv-border);
    margin-bottom: var(--cv-s2);
}
.cv-compare-col--us .cv-compare-head { color: var(--cv-accent); }

.cv-compare-rows { flex-grow: 1; }

.cv-compare-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cv-s4);
    padding: var(--cv-s3) 0;
    font-size: 14.5px;
    color: var(--cv-text-muted);
    border-bottom: 1px solid var(--cv-border);
}
.cv-compare-row:last-child { border-bottom: none; }
.cv-compare-row .cv-mono {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cv-text);
}

/* O gia tri dang chu ("Ngay ben canh", "Trong dieu khoan"...) — dam hon nhan
   ben trai, can phai. Khoi nay tung chua so bia ($1 -> $18), da bo. */
.cv-compare-val {
    font-weight: 600;
    color: var(--cv-text);
    text-align: right;
}

/* Gia nam dau re gia tao: lam mo di de khoi trong nhu mot loi chao moi */
.cv-compare-low  { opacity: .55; }
/* Gia nam hai vot len: danh dau bang mau canh bao */
.cv-compare-high { color: var(--cv-danger) !important; }

.cv-compare-note {
    margin-top: var(--cv-s4);
    padding-top: var(--cv-s4);
    border-top: 1px solid var(--cv-border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--cv-text-muted);
}
.cv-compare-col--us .cv-compare-note { color: var(--cv-text); font-weight: 600; }


/* ==========================================================================
   13. NUT DOI NGON NGU
   ========================================================================== */

.mk-lang {
    position: relative;
    flex-shrink: 0;
}
.mk-lang-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 38px;
    padding: 0 10px;
    border: none;
    background: transparent;
    border-radius: 9px;
    color: var(--cv-text);
    font-family: var(--cv-font-mono);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    transition: background var(--cv-dur-fast) var(--cv-ease);
}
.mk-lang-btn:hover { background: var(--cv-surface-hover); }

.mk-lang-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 152px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    box-shadow: var(--cv-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--cv-dur-mid) var(--cv-ease),
                transform var(--cv-dur-mid) var(--cv-ease),
                visibility var(--cv-dur-mid);
    z-index: 1040;
}
.mk-lang.is-open .mk-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.mk-lang-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-s3);
    padding: 9px 12px;
    border-radius: var(--cv-r-sm);
    font-size: 14px;
    color: var(--cv-text);
    text-decoration: none;
}
.mk-lang-menu a:hover { background: var(--cv-surface-hover); }
.mk-lang-menu a.is-current { color: var(--cv-accent); font-weight: 700; }
.mk-lang-code {
    font-family: var(--cv-font-mono);
    font-size: 11.5px;
    color: var(--cv-text-muted);
}

/* ==========================================================================
   13. THANH BEN LUONG APP (khach da dang nhap)

   Chuyen tu khoi <style> trong client.tpl sang day. DESIGN.md muc 7 cam dat
   <style> trong template vi nhu vay khong doi theme duoc.

   Ban cu la mot tam gradient xanh #1e3a8a -> #2563eb, mau hardcode, goc vuong.
   Ban nay la tam MUC toi voi diem nhan HO PHACH, theo dung bang mau o muc 3.

   HAI RANG BUOC PHAI GIU:

   1. Menu con do jQuery slideDown/slideUp trong app.min.js dong mo, no dat
      height NOI TUYEN len <ul>. Vi vay KHONG dat transition cho height hay
      max-height o day, CSS se danh nhau voi JS va menu bi giat.

   2. Theme goc ve mot cham mau ngoc #24b3a4 o
      `.nav-menu li.active:not(.open)>a:before`. Chon lo do co do uu tien cao
      hon chon lo cua ta (them mot lop qua :not), nen phan ::before ben duoi
      buoc phai dung !important va phai dat lai `right: auto` — neu khong no
      vua an `left` cua ta vua an `right` cua theme goc roi bi keo dai ra.
   ========================================================================== */

/* --- Bang mau rieng cua thanh ben ------------------------------------------
   Khung app ghim data-theme="light", nhung thanh ben co chu dich la mang toi
   de mau ho phach noi len. Nen no khai bao token rieng trong pham vi
   .page-sidebar thay vi doc --cv-bg / --cv-text cua che do sang. */
.page-sidebar {
    --sb-bg:           #151018;
    --sb-raised:       rgba(236, 233, 242, .055);
    --sb-raised-hover: rgba(236, 233, 242, .085);
    --sb-border:       rgba(236, 233, 242, .09);
    --sb-text:         rgba(232, 228, 234, .68);
    --sb-text-strong:  #EDEAF2;
    --sb-accent:       #A78BF5;
    --sb-accent-soft:  rgba(167, 139, 245, .15);

    /* Nen cua tam menu con bay ra khi thanh ben thu gon. Sang hon nen thanh
       ben mot bac de no tach ra khoi thanh ben, va DAC de khong lo noi dung
       trang phia sau. */
    --sb-flyout:       #221B2C;

    background: var(--sb-bg) !important;
    border-right: 1px solid var(--sb-border);
}

/* Cac lop boc con phai trong suot. Neu khong, moi lop tu ve nen rieng va
   thanh ben lo ra duong noi ngang. */
.page-sidebar .page-logo,
.page-sidebar .primary-nav,
.page-sidebar nav {
    background: transparent !important;
}

/* --- Logo ----------------------------------------------------------------- */
.page-sidebar .page-logo {
    border-bottom: 1px solid var(--sb-border);
}
.page-sidebar .page-logo-text {
    font-family: var(--cv-font-sans);
    font-weight: 800 !important;
    letter-spacing: -.01em;
    color: var(--sb-text-strong) !important;
}
.page-sidebar .page-logo-text .clx-logo-cloud { color: var(--sb-text-strong) !important; }
.page-sidebar .page-logo-text .clx-logo-vina  { color: var(--sb-accent) !important; }


/* --- Muc dieu huong -------------------------------------------------------- */
/* Khoang cach giua cac muc. Ban truoc margin 2px: cac muc dinh sat nhau
   thanh mot khoi chu day dac, mat kho tach tung muc.

   BAY: le doc cua hai phan tu ANH EM GOP VAO NHAU, khong cong lai. Dat
   margin 7px thi khe ho la 7px chu khong phai 14px. Da do thuc te. Muon khe
   ho bao nhieu thi dat dung bay nhieu. */
.page-sidebar .nav-menu { padding: var(--cv-s3) 0; }
.page-sidebar .nav-menu > li { margin: 7px var(--cv-s2); }

.page-sidebar .nav-menu li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
    padding: 12px var(--cv-s3);
    border-radius: var(--cv-r-sm);
    color: var(--sb-text) !important;
    font-family: var(--cv-font-sans);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition:
        background-color var(--cv-dur-fast) var(--cv-ease),
        color            var(--cv-dur-fast) var(--cv-ease),
        transform        var(--cv-dur-fast) var(--cv-ease);
}
.page-sidebar .nav-menu li > a .nav-link-text { color: inherit !important; }
.page-sidebar .nav-menu li > a svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 !important;
    color: currentColor !important;
    stroke: currentColor !important;
    opacity: .82;
    transition: opacity var(--cv-dur-fast) var(--cv-ease);
}

/* Di chuot: sang len va nhich nhe sang phai */
.page-sidebar .nav-menu li > a:hover {
    background: var(--sb-raised-hover);
    color: var(--sb-text-strong) !important;
    transform: translateX(2px);
}
.page-sidebar .nav-menu li > a:hover svg { opacity: 1; }

/* Bam: nhich sang phai, va nen dam them mot chut.

   KHONG DUNG scale() O DAY. Ban truoc la `translateX(2px) scale(.985)`, va no
   lam CHU NHAP NHAY luc bam.

   Ly do: scale khong phai la phep bien doi "mien phi" doi voi chu. Trinh duyet
   ve chu ra anh mot lan roi keo gian anh do, nen 14px x 0.985 = 13.79px — mot
   co chu le. Net chu bi ve lai o vi tri le sub-pixel, mat thay la rung.
   translateX(2px) thi khong sao vi 2px la so nguyen: lop duoc doi cho, khong
   ve lai.

   O .cv-btn thi scale(.985) van dung duoc, vi o do mat bam theo cai HOP co
   nen mau, chu ben trong nho va khong phai thu ta nhin. O day chu CHINH LA
   thanh phan, nen moi rung nho deu lo.

   Thay bang nen dam hon: cung la phan hoi "da bam trung", ma khong dung gi
   toi cach ve chu. */
.page-sidebar .nav-menu li > a:active {
    transform: translateX(2px);
    background-color: var(--sb-raised-hover);
}

/* Ban phim: vien ho phach thay cho outline mac dinh cua trinh duyet */
.page-sidebar .nav-menu li > a:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 1px;
}

/* --- Dang xem -------------------------------------------------------------- */
.page-sidebar .nav-menu > li.active > a,
.page-sidebar .nav-menu > li > ul li.active > a {
    background: var(--sb-accent-soft) !important;
    color: var(--sb-accent) !important;
    font-weight: 600;
}
.page-sidebar .nav-menu > li.active > a svg { opacity: 1; }

/* Thanh chi bao ben trai. Dinh nghia lai hoan toan ::before cua theme goc:
   vua bo cham mau ngoc, vua co thanh chi bao, khong phai them phan tu nao. */
.page-sidebar .nav-menu li.active > a::before {
    content: '' !important;
    position: absolute !important;
    left: -2px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    border-radius: var(--cv-r-pill) !important;
    background: var(--sb-accent) !important;
    font-size: 0 !important;
    color: transparent !important;
}

/* --- Menu con --------------------------------------------------------------
   Nhac lai: khong dat transition height/max-height o day, jQuery dang dieu
   khien chieu cao.

   VA TUYET DOI KHONG DAT !important LEN PADDING. Da lo ra tren production:
   menu con thu lai gan het roi DUNG, chua mot dai mong, tre mot nhip, xong
   giat cai bien mat.

   Ly do: jQuery slideUp khong chi thu height. No hoat hoa DONG THOI height,
   marginTop/Bottom va paddingTop/Bottom ve 0, bang cach ghi style noi tuyen.
   Dat !important o day la chan mat phan padding — height ve 0 that, nhung
   2px tren + 4px duoi van con, tuc <ul> ket o 6px. Het hoat hoa jQuery moi
   dat display:none, va 6px do bien mat tuc thi. Chinh la cu giat.

   Bo !important la jQuery thu duoc ca padding, menu dong muot toi tan 0.

   Khong so bi theme goc de len: luat padding duy nhat cua theme cho menu con
   nam trong '.clx-navigation-type-top ...', ma lop do chi co o che do nav
   ngang. base.tpl dat body la 'clx-fixed-header clx-fixed-navigation' nen
   khong dinh toi. Luat cua ta 3 lop, cua theme 1 lop — van thang. */
/* Khi thanh ben MO RONG, menu con la mot nhanh cay thut vao, co mot duong
   doc ben trai lam truc. Nen trong suot de no nam tren nen thanh ben. */
body:not(.nav-function-minify) .page-sidebar .nav-menu > li > ul {
    background: transparent !important;
    padding: 2px 0 var(--cv-s1);
    margin-left: calc(var(--cv-s3) + 9px);
    border-left: 1px solid var(--sb-border);
}

/* Che do thu gon la mot chuyen khac han — xem muc 31 o cuoi file. */
.page-sidebar .nav-menu > li > ul li { margin: 2px 0; }
.page-sidebar .nav-menu > li > ul li > a {
    margin-left: var(--cv-s2);
    padding: 9px var(--cv-s3) !important;
    font-size: 13.5px;
    font-weight: 500;
}

/* Mui ten nhom: app.min.js chen <b class="collapse-sign"> vao muc co menu con.
   Neu ban theme khong chen thi cac quy tac nay vo hai. */
/* TU VE MUI TEN, bo qua ky tu ma app.min.js nhet vao ben trong.

   Vi sao khong dung ky tu do: khi mo mot nhom, app.min.js doi ky tu tu
   'fa-angle-down' sang 'fa-angle-up'. Cong voi luat xoay 180 do cua ta thi
   hai thu TRIET TIEU NHAU — mui ten xoay len, roi ky tu doi thanh mui-ten-len,
   va mui-ten-len bi xoay 180 do lai chi xuong. Nguoi dung thay dung nhu vay:
   "xoay di roi lai xoay ve".

   Nay ky tu ben trong bi an di, mui ten ve bang mask. Xoay la nguon su that
   duy nhat, khong con gi de trieu tieu.

   Dung mask chu khong phai background-image de mui ten lay mau tu
   currentColor — tu theo mau chu cua muc, ke ca khi muc dang duoc chon. */
.page-sidebar .nav-menu > li > a > .collapse-sign {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin-left: auto;

    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
            mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px 14px no-repeat;

    transition: transform var(--cv-dur-mid) var(--cv-ease);
}
/* An ky tu FontAwesome ma theme nhet vao ben trong the <b>. */
.page-sidebar .nav-menu > li > a > .collapse-sign > * { display: none; }

/* Xoay theo CA HAI lop.

   'open' la lop cua app.min.js. Tren may nay no khong bao gio duoc gan: da
   theo doi 1,4 giay sau khi bam, menu con mo ra (display: block) nhung
   li.className van rong tu dau den cuoi — ham goi lai khi slideDown ket thuc
   khong chay. Van giu lai trong bo chon de neu ban theme sau sua duoc thi
   khong phai sua o day.

   'is-open' la lop cloudvina.js tu dat, bang cach theo doi truc tiep trang
   thai hien cua menu con. Do la thu chac chan. */
.page-sidebar .nav-menu > li.open > a > .collapse-sign,
.page-sidebar .nav-menu > li.is-open > a > .collapse-sign {
    transform: rotate(180deg);
}

/* --- Nhan nhom ------------------------------------------------------------- */
.page-sidebar .nav-menu .nav-menu-group-label {
    display: block;
    padding: var(--cv-s4) var(--cv-s4) var(--cv-s1);
    color: rgba(237, 233, 227, .38);
    font-family: var(--cv-font-sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* --- Thanh cuon ------------------------------------------------------------ */
.page-sidebar .primary-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 242, 236, .18) transparent;
}
.page-sidebar .primary-nav::-webkit-scrollbar { width: 6px; }
.page-sidebar .primary-nav::-webkit-scrollbar-track { background: transparent; }
.page-sidebar .primary-nav::-webkit-scrollbar-thumb {
    background: rgba(245, 242, 236, .16);
    border-radius: var(--cv-r-pill);
}

@media (prefers-reduced-motion: reduce) {
    .page-sidebar .nav-menu li > a,
    .page-sidebar .nav-menu li > a svg,
    .page-sidebar .nav-menu > li > a > .collapse-sign { transition: none; }
    .page-sidebar .nav-menu li > a:hover,
    .page-sidebar .nav-menu li > a:active { transform: none; }
}

/* --- Nut dang nhap / tao tai khoan tren thanh tieu de -----------------------
   Cung chuyen tu khoi <style> cua client.tpl sang. Ban cu hardcode #14213d va
   #2563eb; gio doc token nen tu doi theo bang mau. */
.clx-header-guest-actions {
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
}
.clx-header-guest-actions .clx-btn-signin,
.clx-header-guest-actions .clx-btn-register {
    padding: var(--cv-s2) var(--cv-s4);
    border-radius: var(--cv-r-sm);
    font-family: var(--cv-font-sans);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition:
        background-color var(--cv-dur-fast) var(--cv-ease),
        border-color     var(--cv-dur-fast) var(--cv-ease),
        color            var(--cv-dur-fast) var(--cv-ease);
}
.clx-header-guest-actions .clx-btn-signin {
    color: var(--cv-text);
    border: 1px solid var(--cv-border-strong);
}
.clx-header-guest-actions .clx-btn-signin:hover {
    color: var(--cv-text);
    border-color: var(--cv-accent);
    background: var(--cv-accent-soft);
}
.clx-header-guest-actions .clx-btn-register {
    background: var(--cv-accent);
    color: var(--cv-on-accent);
    border: 1px solid var(--cv-accent);
}
.clx-header-guest-actions .clx-btn-register:hover {
    background: var(--cv-accent-hover);
    border-color: var(--cv-accent-hover);
    color: var(--cv-on-accent);
}

/* Danh sach trong menu tha xuong rong (gio hang, thong bao) */
.dropdown-menu.dropdown-xl .list-group {
    max-height: 280px;
    overflow-y: auto;
}

/* ==========================================================================
   14. KHUNG APP -> TOKEN (dieu kien de bo ghim data-theme)

   Muc 11 moi anh xa phan RUOT (.page-content .card / .table / .form-control).
   Phan KHUNG — nen trang, thanh tieu de, menu tha xuong, modal, nut, phan
   trang — van la mau cung cua CloudOnex. Vi vay client.tpl phai ghim
   data-theme="light": neu khong, the va bang doi sang bang mau toi trong khi
   nen trang van trang, ra nua toi nua sang.

   Muc nay anh xa not phan khung. Sau do client.tpl bo ghim va dung chung cong
   tac sang/toi voi trang cong khai.

   KHONG bao trong @media (prefers-color-scheme) hay [data-theme="dark"]. Cac
   token --cv-* da tu lat o muc 2 roi; o day chi can DUNG chung. Nho vay che do
   sang cung theo luon bang mau Muc + Ho phach, dung y do "hai nua website mot
   he" — chu khong chi sua rieng che do toi.

   .page-sidebar khong dinh gi o muc nay: no co bo token rieng o muc 13 va tu
   ghim nen bang !important.
   ========================================================================== */

/* --- Nen trang ------------------------------------------------------------- */
body#cloudonex_body,
.page-wrapper,
.page-inner,
.page-content-wrapper,
.page-content {
    background: var(--cv-bg);
    color: var(--cv-text);
}
body#cloudonex_body {
    font-family: var(--cv-font-sans);
}

/* --- Thanh tieu de --------------------------------------------------------- */
.page-header {
    background: var(--cv-surface);
    border-bottom: 1px solid var(--cv-border);
    box-shadow: none;
}
.page-header .header-icon,
.page-header .header-icon > i,
.page-header .btn-icon {
    color: var(--cv-text-muted);
}
.page-header .header-icon:hover {
    color: var(--cv-accent);
}

/* --- Chu ------------------------------------------------------------------- */
.page-content h1, .page-content h2, .page-content h3,
.page-content h4, .page-content h5, .page-content h6 {
    color: var(--cv-text);
}
.page-content .text-muted,
.page-content small.text-muted {
    color: var(--cv-text-muted) !important;
}
.page-content hr {
    border-color: var(--cv-border);
    opacity: 1;
}

/* --- Menu tha xuong --------------------------------------------------------
   Dung ca o thanh tieu de lan trong noi dung, nen KHONG bo trong .page-content. */
.dropdown-menu {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    box-shadow: var(--cv-shadow-md);
    color: var(--cv-text);
}
.dropdown-item {
    color: var(--cv-text);
    border-radius: var(--cv-r-sm);
    transition: background-color var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}
.dropdown-divider {
    border-color: var(--cv-border);
}
.dropdown-menu .list-group-item {
    background: transparent;
    border-color: var(--cv-border);
    color: var(--cv-text);
}
.dropdown-menu .list-group-item-action:hover {
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}

/* Dau menu cua theme goc dung gradient tim. Thay bang mau nhan. */
.dropdown-header.bg-trans-gradient,
.dropdown-menu .dropdown-header {
    background: var(--cv-accent) !important;
    color: var(--cv-on-accent);
    border-top-left-radius: var(--cv-r-md);
    border-top-right-radius: var(--cv-r-md);
}
.dropdown-menu .dropdown-header .color-white,
.dropdown-menu .dropdown-header h4 {
    color: var(--cv-on-accent) !important;
}

/* --- Hop thoai ------------------------------------------------------------- */
.modal-content {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-lg);
    color: var(--cv-text);
}
.modal-header,
.modal-footer {
    border-color: var(--cv-border);
}

/* --- Nut -------------------------------------------------------------------
   Chi doi mau, khong dong den kich thuoc hay bo cuc, de khong xe man hinh nao. */
.page-content .btn-primary,
.modal .btn-primary {
    background: var(--cv-accent);
    border-color: var(--cv-accent);
    color: var(--cv-on-accent);
}
.page-content .btn-primary:hover,
.modal .btn-primary:hover {
    background: var(--cv-accent-hover);
    border-color: var(--cv-accent-hover);
    color: var(--cv-on-accent);
}
.page-content .btn-secondary,
.page-content .btn-light,
.page-content .btn-outline-secondary {
    background: var(--cv-surface);
    border-color: var(--cv-border-strong);
    color: var(--cv-text);
}
.page-content .btn-secondary:hover,
.page-content .btn-light:hover,
.page-content .btn-outline-secondary:hover {
    background: var(--cv-surface-hover);
    border-color: var(--cv-accent);
    color: var(--cv-text);
}

/* --- Phan trang ------------------------------------------------------------ */
.page-content .page-link {
    background: var(--cv-surface);
    border-color: var(--cv-border);
    color: var(--cv-text);
}
.page-content .page-item.active .page-link {
    background: var(--cv-accent);
    border-color: var(--cv-accent);
    color: var(--cv-on-accent);
}
.page-content .page-link:hover {
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}

/* --- Thanh tab ------------------------------------------------------------- */
.page-content .nav-tabs {
    border-bottom-color: var(--cv-border);
}
.page-content .nav-tabs .nav-link {
    color: var(--cv-text-muted);
    border-color: transparent;
}
.page-content .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--cv-accent);
    border-color: transparent transparent var(--cv-accent);
}

/* --- Bang thong bao -------------------------------------------------------- */
.page-content .alert {
    border-radius: var(--cv-r-md);
    border: 1px solid var(--cv-border);
    background: var(--cv-bg-subtle);
    color: var(--cv-text);
}

/* --- Chan trang ------------------------------------------------------------ */
.page-footer {
    background: var(--cv-surface);
    border-top: 1px solid var(--cv-border);
    color: var(--cv-text-muted);
}

/* --- The ten tai khoan tren thanh dieu huong marketing ----------------------
   Chi hien khi khach da dang nhap, dung cho trang landing. */
.mk-user-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cv-s2);
    max-width: 200px;
    padding: var(--cv-s2) var(--cv-s3);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-pill);
    background: var(--cv-surface);
    color: var(--cv-text);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--cv-dur-fast) var(--cv-ease),
                background-color var(--cv-dur-fast) var(--cv-ease);
}
.mk-user-chip:hover {
    border-color: var(--cv-accent);
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}
.mk-user-chip svg { flex: 0 0 16px; opacity: .7; }
.mk-user-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Man hinh hep: giu lai nut quay ve bang dieu khien, bo the ten cho do chat. */
@media (max-width: 720px) {
    .mk-user-chip { display: none; }
}

/* ==========================================================================
   15. HO .panel CUA SMARTADMIN + CANH LE THANH TIEU DE

   Muc 11 chi anh xa .card. Nhung nhieu man hinh cua luong app khong dung
   .card ma dung .panel cua SmartAdmin — rieng trang Ho so da co 30 lan .panel,
   28 lan .panel-container, 26 lan .panel-content. Ket qua khi bat che do toi:
   the van trang, chu van den, doc khong noi.

   app.min.css dat `.panel{background-color:#fff}` o do uu tien (0,1,0).
   cloudvina.css nap SAU app.min.css (base.tpl dong 38 so voi dong 237), nen
   `.page-content .panel` (0,2,0) thang ma khong can !important. Chi nhung khai
   bao nao ben app.min.css co san !important — .text-dark, .bg-white — thi ben
   nay moi phai dung !important theo.
   ========================================================================== */

/* --- The .panel ------------------------------------------------------------ */
.page-content .panel {
    background: var(--cv-surface);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    box-shadow: none;
    color: var(--cv-text);
}
.page-content .panel-hdr {
    background: transparent;
    background-image: none;
    border-bottom: 1px solid var(--cv-border);
    box-shadow: none;
    color: var(--cv-text);
}
.page-content .panel-hdr h1,
.page-content .panel-hdr h2,
.page-content .panel-hdr h3,
.page-content .panel-hdr h4,
.page-content .panel-hdr h5,
.page-content .panel-hdr .panel-title {
    color: var(--cv-text);
}
.page-content .panel-container,
.page-content .panel-content,
.page-content .panel-footer {
    background: transparent;
    color: var(--cv-text);
}
.page-content .panel-footer {
    border-top: 1px solid var(--cv-border);
}
.page-content .panel-tag {
    background: var(--cv-bg-subtle);
    border-left-color: var(--cv-accent);
    color: var(--cv-text);
    border-radius: 0 var(--cv-r-sm) var(--cv-r-sm) 0;
    opacity: 1;
}

/* --- Lop tien ich mau cung cua Bootstrap ------------------------------------
   Nhung lop nay khai bao !important nen phai doi lai bang !important. */
.page-content .text-dark,
.page-content .text-black {
    color: var(--cv-text) !important;
}
.page-content .bg-white,
.page-content .bg-light {
    background-color: var(--cv-surface) !important;
}
.page-content .border,
.page-content .border-top,
.page-content .border-bottom,
.page-content .border-start,
.page-content .border-end,
.page-content .border-left,
.page-content .border-right {
    border-color: var(--cv-border) !important;
}

/* --- Danh sach ------------------------------------------------------------- */
.page-content .list-group-item {
    background: var(--cv-surface);
    border-color: var(--cv-border);
    color: var(--cv-text);
}
.page-content .list-group-item-action:hover {
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}

/* --- Bang -------------------------------------------------------------------

   QUAN TRONG: Bootstrap 5 KHONG to nen dong bang bang `background`. No dung:

       .table > :not(caption) > * > * {
           background-color: var(--bs-table-bg);
           box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
       }

   Lop box-shadow inset 9999px do phu kin o, nen moi luat `background` ta viet
   cho :hover hay :nth-of-type deu bi che mat — mau ho phach khong bao gio hien,
   con che do toi thi lo ra --bs-table-hover-bg mau sang cung cua theme, ra mot
   vet trang vat ngang rat chuong mat.

   Vi vay o day KHONG chong lai co che do, ma ghi de chinh cac bien cua no. Nho
   vay hover va soc deu tu dong doi mau theo token o ca hai che do sang/toi. */
.page-content .table {
    --bs-table-bg:            transparent;
    --bs-table-color:         var(--cv-text);
    --bs-table-border-color:  var(--cv-border);
    --bs-table-accent-bg:     transparent;
    --bs-table-hover-bg:      var(--cv-accent-soft);
    --bs-table-hover-color:   var(--cv-text);
    --bs-table-striped-bg:    var(--cv-bg-subtle);
    --bs-table-striped-color: var(--cv-text);
    --bs-table-active-bg:     var(--cv-accent-soft);
    --bs-table-active-color:  var(--cv-text);

    color: var(--cv-text);
    border-color: var(--cv-border);
}
.page-content .table > :not(caption) > * > * {
    border-bottom-color: var(--cv-border);
    color: var(--cv-text);
}

/* --- Canh le thanh tieu de -------------------------------------------------
   .d-flex mac dinh la align-items: stretch. Nut ngon ngu va nut sang/toi cao
   co dinh 38px nen bi dinh len dinh, trong khi anh dai dien cao hon nen nhin
   nhu bi lech xuong. Ep canh giua ca hang. */
.cv-header-actions {
    align-items: center;
    gap: var(--cv-s2);
}
.cv-header-actions > div {
    display: flex;
    align-items: center;
}
.cv-header-actions .header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    margin: 0;
    color: var(--cv-text-muted);
}
.cv-header-actions .header-icon:hover {
    color: var(--cv-accent);
}
/* Anh dai dien tren thanh tieu de PHAI la hinh tron.

   app.min.css co `.header-icon:not(.btn) .profile-image{width:2rem;height:auto}`.
   Do uu tien cua no la (0,3,0) — `:not(.btn)` tinh nhu mot lop — cao hon luat
   hai lop `.cv-header-actions .profile-image` truoc day cua ta. Ket qua: chieu
   rong bi khoa 2rem con chieu cao chay theo noi dung, nen vong tron keo dai
   thanh hinh bau duc.

   Vi vay o day dung DU BA LOP de hoa do uu tien, va cloudvina.css nap sau
   app.min.css nen hoa thi ta thang. Them aspect-ratio va min-width de flex
   khong bop mep duoc, object-fit de anh khach tai len khong bi keo gian.

   Mot luat nay phu ca hai truong hop: <img class="profile-image"> khi khach da
   co anh, va <span class="profile-image cv-avatar-fallback"> khi chua co. */
.cv-header-actions .header-icon .profile-image {
    width: 32px;
    height: 32px;
    min-width: 32px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    box-sizing: border-box;
}

/* ==========================================================================
   16. TIEU DE DANG CLASS + ANH DAI DIEN MAC DINH

   Muc 14 da chinh mau cho THE h1..h6. Nhung nhieu man hinh khong dung the ma
   dung LOP tien ich: trang Ho so co 11 cho viet `<label class="h6">` va tieu
   de panel viet `<h2><span class="h5">`. app.min.css dat
   `.h1,...,.h6,h1,...,h6{color:#32325d}` — mau navy. Tren nen toi no ra xanh
   tim, doc rat met. Chon lo the khong voi toi lop nay nen phai liet ke rieng.

   Cung the voi .text-info (#6772e5) va .text-primary (#10cdef): hai mau cung
   cua theme goc, khong nam trong bang mau Muc + Ho phach.
   ========================================================================== */

.page-content .h1,
.page-content .h2,
.page-content .h3,
.page-content .h4,
.page-content .h5,
.page-content .h6 {
    color: var(--cv-text);
}

/* .text-primary cua theme goc la xanh lo #10cdef. Dua ve mau nhan duy nhat. */
.page-content .text-primary {
    color: var(--cv-accent) !important;
}

/* .text-info hau het dung cho dong chu goi y duoi o nhap, nen dua ve chu phu
   thay vi tim mot mau "info" moi — bang mau chi co MOT mau nhan. */
.page-content .text-info,
.page-content .help-block {
    color: var(--cv-text-muted) !important;
}

/* --- Anh dai dien mac dinh -------------------------------------------------
   Truoc day la ui/lib/img/default-user-avatar.png — mot file PNG co san vong
   tron mau xanh ve trong anh. CSS khong doi mau anh bitmap duoc, nen che do
   toi nao cung tho ra mot vong xanh.

   Thay bang SVG noi tuyen dung currentColor, nho vay no di theo token. Chi
   thay nhanh MAC DINH; khach da tai anh len thi van hien anh that. */
.cv-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-pill);
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
    overflow: hidden;
}
.cv-avatar-fallback svg {
    width: 62%;
    height: 62%;
}

/* Trong thanh ben: doc bo token rieng cua muc 13, khong doc bang mau sang. */
.page-sidebar .cv-avatar-fallback {
    width: 42px;
    height: 42px;
    border-color: var(--sb-border);
    background: var(--sb-accent-soft);
    color: var(--sb-accent);
}

/* Trong thanh tieu de: nho hon cho khop chieu cao hang nut. */
.cv-header-actions .cv-avatar-fallback {
    width: 32px;
    height: 32px;
}

/* Trong dau menu tha xuong, nen da la mau nhan — de nen ho phach nhat nua thi
   vong tron chim vao. Doi sang trang mo. */
.dropdown-header .cv-avatar-fallback {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .28);
    color: var(--cv-on-accent);
}

/* ==========================================================================
   17. DAU PANEL CO NUT HANH DONG + NUT TAI ANH

   Truoc day nut "Luu thay doi" nam tan cuoi form Ho so: form dai hon mot man
   hinh nen phai cuon het xuong moi luu duoc. Chuyen len ngang hang tieu de.

   .btn-danger-light cua nut tai anh KHONG TON TAI trong app.min.css (grep ra 0
   ket qua) — vi vay no render ra tro tron nhu chu thuong, khong ai biet do la
   nut bam duoc. Doi sang .btn-secondary da anh xa o muc 14, them icon.
   ========================================================================== */

.page-content .panel-hdr.cv-panel-hdr-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-s4);
    flex-wrap: wrap;

    /* .panel-hdr cua theme goc khong co padding ngang, nen nut bi dinh sat
       mep panel. Them padding phai bang dung padding cua .panel-content (1rem)
       de mep phai cua nut thang hang voi mep phai cac o nhap ben duoi. */
    padding-right: var(--cv-s4);
}
.page-content .panel-hdr.cv-panel-hdr-actions > h2 {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}
.page-content .panel-hdr.cv-panel-hdr-actions > .btn {
    flex: 0 0 auto;
}

/* --- Nut tai anh len ------------------------------------------------------- */
.page-content .cv-btn-upload {
    display: inline-flex;
    align-items: center;
    gap: var(--cv-s2);
}
.page-content .cv-btn-upload svg {
    flex: 0 0 16px;
    opacity: .75;
}

/* Hai nut anh dai dien dat canh nhau, khong dinh sat */
.page-content .cv-btn-upload + .btn {
    margin-left: var(--cv-s2);
}

/* ==========================================================================
   18. CHIP SO DU TREN THANH TIEU DE

   Thay cho the danh tinh cu o dau thanh ben. The do chi co anh dai dien va ten
   — dung mot tap con cua menu goc phai — ma lai chiem khoang 130px o cho dat
   nhat, day toan bo menu dieu huong xuong.

   Cho trong do khong lap bang thu khac. Nhung so du thi dang thieu that: no
   chi xuat hien trong Nap tien / Tu dong nap / Chuong trinh gioi thieu, khong
   co o bang dieu khien lan khung co dinh. Voi mo hinh tra truoc thi day la con
   so khach muon liec thay moi luc, nen dua len header, canh cum tai khoan.
   ========================================================================== */

.cv-balance-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--cv-s2);
    height: 38px;
    padding: 0 var(--cv-s3);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-pill);
    background: var(--cv-surface);
    color: var(--cv-text);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--cv-dur-fast) var(--cv-ease),
                background-color var(--cv-dur-fast) var(--cv-ease);
}
.cv-balance-chip:hover {
    border-color: var(--cv-accent);
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
}
.cv-balance-chip svg {
    flex: 0 0 15px;
    opacity: .6;
}
.cv-balance-value {
    font-family: var(--cv-font-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
}

/* So du bang 0 thi lam mo di. KHONG to mau canh bao — het tien khong phai loi,
   to do len chi lam khach thay bi hoi thuc. */
.cv-balance-value.is-zero {
    color: var(--cv-text-muted);
    font-weight: 500;
}

/* Man hinh hep: bo chip cho header do chat, giong cach xu ly .mk-user-chip
   ben trang cong khai. So du van xem duoc trong Thanh toan > Nap tien. */
@media (max-width: 720px) {
    .cv-balance-chip { display: none; }
}

/* ==========================================================================
   19. BANG DIEU KHIEN

   Ke thua .cv-panel / .cv-panel-head cua muc 9, khong dinh nghia lai khung.

   MAU: bang mau chi co MOT mau nhan (ho phach) va ba mau trang thai
   (--cv-success / --cv-warning / --cv-danger). O day ho phach chi dung cho
   NUT HANH DONG; con chấm trang thai, vien canh bao va the trang thai deu lay
   ba token trang thai. Nho vay trang het don dieu ma van khong pha he thiet ke.

   Trang thai "dang khoi tao" co tinh dung mau chu phu chu khong bia them mau
   thu tu — no khong phai canh bao, chi la trang thai trung gian.
   ========================================================================== */

/* --- Loi chao -------------------------------------------------------------- */
.cv-dash-greet { margin-bottom: var(--cv-s6); }
.cv-dash-hello {
    margin: 0 0 var(--cv-s1);
    font-family: var(--cv-font-display);
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cv-text);
}
.cv-dash-wave { font-size: 20px; }
.cv-dash-sub {
    margin: 0;
    font-size: 14px;
    color: var(--cv-text-muted);
}

/* --- Dai canh bao: o bieu tuong tren duong ray -----------------------------

   Ban dau cho nay la mau "vach mau ben trai" cua Bootstrap. Bo di vi vach chi
   noi MUC DO chu khong noi LOAI van de: may bi ngung, hoa don qua han va thieu
   tien deu ra mot vach do/cam giong het nhau.

   Thay bang hai thu:
     1. O bieu tuong 36px mang mau trang thai, moi loai van de mot ky hieu —
        liec mot cai biet ngay la chuyen tien hay chuyen may.
     2. Mot duong ray doc chay sau cac o do, gom chung thanh MOT danh sach viec
        can lam thay vi may cai the roi rac.

   Ray ve bang ::before cua khung ngoai, mo dan hai dau bang gradient de khong
   bi cat cut o dau va cuoi. O bieu tuong co nen va z-index cao hon nen ray
   chay sau no, chi lo ra o khoang giua cac canh bao — dung y do timeline. */
.cv-alerts { margin-bottom: var(--cv-s6); }

.cv-alerts-head {
    margin-bottom: var(--cv-s3);
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-text-muted);
}
.cv-alerts-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-right: 2px;
    border-radius: var(--cv-r-pill);
    background: var(--cv-accent);
    color: var(--cv-on-accent);
    font-family: var(--cv-font-mono);
    font-size: 12px;
    font-weight: 700;
}

.cv-alerts-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cv-s3);
}
.cv-alerts-rail::before {
    content: '';
    position: absolute;
    left: 17px;                 /* tam cua o bieu tuong 36px */
    top: 4px;
    bottom: 4px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--cv-border) 10%,
        var(--cv-border) 90%,
        transparent
    );
}

.cv-alert {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--cv-s3);
}

/* O bieu tuong: nam tren ray, che ray lai o dung vi tri cua no. */
.cv-alert-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--cv-r-md);
    background: var(--cv-bg-subtle);
    color: var(--cv-text-muted);
    box-shadow: 0 0 0 4px var(--cv-bg);   /* khoet ray quanh o */
}
.cv-alert-icon svg { width: 18px; height: 18px; }

.cv-alert.is-danger  .cv-alert-icon { background: rgba(185, 28, 28, .13); color: var(--cv-danger); }
.cv-alert.is-warning .cv-alert-icon { background: var(--cv-accent-soft);  color: var(--cv-warning); }

/* Than the canh bao */
.cv-alert-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
    padding: var(--cv-s3) var(--cv-s4);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    font-size: 14px;
    color: var(--cv-text);
    transition: border-color var(--cv-dur-fast) var(--cv-ease),
                transform var(--cv-dur-fast) var(--cv-ease);
}
.cv-alert-text { flex: 1 1 auto; min-width: 0; }

.cv-alert:hover .cv-alert-body { transform: translateX(2px); }
.cv-alert.is-danger:hover  .cv-alert-body { border-color: var(--cv-danger); }
.cv-alert.is-warning:hover .cv-alert-body { border-color: var(--cv-warning); }

/* Nut trong canh bao: day la hanh dong chinh nen dung mau nhan. */
.cv-alert-act {
    flex: 0 0 auto;
    padding: 6px var(--cv-s3);
    border-radius: var(--cv-r-sm);
    background: var(--cv-accent);
    color: var(--cv-on-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cv-dur-fast) var(--cv-ease);
}
.cv-alert-act:hover { background: var(--cv-accent-hover); color: var(--cv-on-accent); }

@media (prefers-reduced-motion: reduce) {
    .cv-alert:hover .cv-alert-body { transform: none; }
}

/* --- Ba o trang thai ------------------------------------------------------- */
.cv-dash-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--cv-s4);
    margin-bottom: var(--cv-s6);
}
.cv-tile {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--cv-s4) var(--cv-s6);
    border: 1px solid var(--cv-border);
    border-top: 3px solid var(--cv-success);
    border-radius: var(--cv-r-md);
    background: var(--cv-surface);
    text-decoration: none;
    transition: border-color var(--cv-dur-fast) var(--cv-ease),
                transform var(--cv-dur-fast) var(--cv-ease);
}
.cv-tile:hover { transform: translateY(-2px); }
.cv-tile.is-warning { border-top-color: var(--cv-warning); }
.cv-tile.is-danger  { border-top-color: var(--cv-danger); }

/* Vien tren mac dinh mau xanh "on" — dung o bang dieu khien, noi moi o LA mot
   trang thai va xanh nghia la khong co viec gi. Nhung o nao chi la SO LIEU
   thuan thi xanh la noi doi: "dang cho duyet" khong phai chuyen tot lanh gi.
   Bien the nay tra vien ve trung tinh. */
.cv-tile.is-plain { border-top-color: var(--cv-border-strong); }
.cv-tile-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
}
.cv-tile-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--cv-text);
}
.cv-tile-note {
    font-size: 13px;
    color: var(--cv-text-muted);
}

/* --- The trang thai nho ---------------------------------------------------- */
.cv-pill {
    display: inline-block;
    padding: 2px var(--cv-s2);
    border-radius: var(--cv-r-pill);
    background: var(--cv-bg-subtle);
    font-size: 12px;
    font-weight: 600;
    color: var(--cv-text-muted);
    white-space: nowrap;
}
.cv-pill.is-danger  { background: rgba(185, 28, 28, .12); color: var(--cv-danger); }
.cv-pill.is-warning { background: var(--cv-accent-soft);  color: var(--cv-warning); }
.cv-pill.is-info    { background: var(--cv-bg-subtle);    color: var(--cv-text-muted); }

/* --- Khoi noi dung --------------------------------------------------------- */
.cv-dash-block { margin-bottom: var(--cv-s6); }
.cv-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-s4);
}
.cv-dash-more {
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-accent);
    text-decoration: none;
    white-space: nowrap;
}
.cv-dash-more:hover { color: var(--cv-accent-hover); }
.cv-dash-empty {
    margin: 0;
    padding: var(--cv-s6);
    font-size: 14px;
    color: var(--cv-text-muted);
}

/* --- Danh sach dich vu ----------------------------------------------------- */
.cv-svc-list { margin: 0; padding: 0; list-style: none; }
.cv-svc-row {
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
    padding: var(--cv-s3) var(--cv-s6);
    border-bottom: 1px solid var(--cv-border);
    font-size: 14px;
}
.cv-svc-row:last-child { border-bottom: 0; }
.cv-svc-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: var(--cv-r-pill);
    background: var(--cv-text-muted);
}
.cv-svc-dot.is-active       { background: var(--cv-success); }
.cv-svc-dot.is-suspended    { background: var(--cv-danger); }
.cv-svc-dot.is-provisioning { background: var(--cv-warning); }
.cv-svc-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cv-svc-name a { color: var(--cv-text); font-weight: 600; text-decoration: none; }
.cv-svc-name a:hover { color: var(--cv-accent); }
.cv-svc-meta {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--cv-text-muted);
}
.cv-svc-status { flex: 0 0 auto; }
.cv-svc-renew { font-size: 12.5px; color: var(--cv-text-muted); }

/* --- Hai cot duoi ---------------------------------------------------------- */
.cv-dash-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--cv-s4);
}
.cv-mini-list { margin: 0; padding: 0; list-style: none; }
.cv-mini-list li {
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
    padding: var(--cv-s3) var(--cv-s6);
    border-bottom: 1px solid var(--cv-border);
    font-size: 14px;
}
.cv-mini-list li:last-child { border-bottom: 0; }
.cv-mini-main {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cv-text);
    font-weight: 600;
    text-decoration: none;
}
.cv-mini-main:hover { color: var(--cv-accent); }
.cv-mini-meta {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--cv-text-muted);
}

/* --- Man hinh hep ---------------------------------------------------------- */
@media (max-width: 640px) {
    .cv-dash-hello { font-size: 20px; }
    .cv-alert { flex-wrap: wrap; }
    .cv-alert-act { width: 100%; text-align: center; }
    /* Bo IP tren mobile: ten dich vu va trang thai quan trong hon. */
    .cv-svc-meta { display: none; }
    .cv-svc-row,
    .cv-mini-list li { padding-left: var(--cv-s4); padding-right: var(--cv-s4); }
}

/* ==========================================================================
   20. HIGHLIGHT DONG + MO RONG VUNG BAM

   Truoc day chi rieng MAY CHU TEN la bam duoc: khach phai nham dung chu moi
   vao duoc trang dich vu. Day la vung bam qua hep.

   Dung ky thuat "stretched link": cho <li> position:relative roi keo ::after
   cua the <a> phu kin ca dong. Ca dong thanh vung bam ma KHONG phai doi markup
   hay long the <a> ra ngoai (long <a> quanh mot dong co nhieu phan tu la HTML
   khong hop le va doc man hinh se doc sai).

   Mau hover dung --cv-accent-soft, cung mau voi hover cua bang o muc 15, nen
   toan site nhat quan. O che do toi no tu thanh ho phach mo — khong con vet
   trang nhu loi cu.
   ========================================================================== */

.cv-svc-row,
.cv-mini-list li {
    position: relative;
    transition: background-color var(--cv-dur-fast) var(--cv-ease);
}
.cv-svc-row:hover,
.cv-mini-list li:hover {
    background: var(--cv-accent-soft);
}

.cv-svc-name a::after,
.cv-mini-main::after {
    content: '';
    position: absolute;
    inset: 0;
}

/* Cac phan tu con phai noi len tren lop phu, neu khong chung khong bam duoc
   rieng va tooltip cung mat. */
.cv-svc-meta,
.cv-svc-status,
.cv-mini-meta,
.cv-mini-list .cv-pill {
    position: relative;
    z-index: 1;
}

/* Ban phim: vien ho phach cho ca dong, khong phai rieng may chu. */
.cv-svc-name a:focus-visible::after,
.cv-mini-main:focus-visible::after {
    outline: 2px solid var(--cv-accent);
    outline-offset: -2px;
    border-radius: var(--cv-r-sm);
}


/* ==========================================================================
   21. BO CUC BIEN TAP — hero lech truc, anh san pham, dai phan nhip

   Ban truoc: hero mot cot can trai, roi TAM khoi lien tiep deu dung y het mot
   cong thuc — eyebrow can giua, h2, lead, luoi. Cung be ngang, cung nen, cung
   khoang cach. Doc het trang khong co lay mot cho nghi mat.

   Ba thu sua o day:
     1. Hero chia 7/5, chu ben trai, ANH SAN PHAM ben phai
     2. Anh san pham ve bang MARKUP chu khong phai file anh
     3. Mot dai nen toi de phan nhip giua trang
   ========================================================================== */

/* --- 1. Hero lech truc ---------------------------------------------------- */
.cv-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--cv-s12);
    align-items: center;
}

/* Trong luoi thi cot trai da tu gioi han be ngang roi, khong can max-width
   820px nua — de nguyen se tao mot khoang trong chet giua hai cot. */
.cv-hero-grid .cv-hero-inner { max-width: none; }

/* --- 2. Anh san pham ------------------------------------------------------
   VI SAO VE BANG MARKUP chu khong dung anh chup man hinh:
     - khong phai bao tri file anh moi lan giao dien doi
     - tu doi mau theo theme sang/toi, anh chup thi khong
     - chu that nen phong to khong vo, va trinh doc man hinh doc duoc
     - khong ton them mot luot tai anh nao

   So lieu ben trong la VI DU co chu dich, khong phai so that. Khoi nay tra
   loi cau hoi "mua xong thi toi thay cai gi" — thu ma bang gia khong noi duoc.
   ------------------------------------------------------------------------- */
.cv-mock-frame {
    position: relative;
    /* Chua duoc khoi mau lech phia sau, xem .cv-mock-shade */
    padding: 0 var(--cv-s6) var(--cv-s6) 0;
}

/* Khoi mau dat lech phia sau cho co chieu sau. Dung accent-soft chu khong
   dung bong do — o nen toi bong gan nhu khong thay gi. */
.cv-mock-shade {
    position: absolute;
    inset: var(--cv-s6) 0 0 var(--cv-s6);
    border-radius: var(--cv-r-lg);
    background: var(--cv-accent-soft);
}

.cv-mock {
    position: relative;
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-lg);
    background: var(--cv-surface);
    box-shadow: var(--cv-shadow-md);
    overflow: hidden;
}

.cv-mock-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--cv-s3);
    height: 34px;
    background: var(--cv-bg-subtle);
    border-bottom: 1px solid var(--cv-border);
}
.cv-mock-light {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cv-border-strong);
}
.cv-mock-url {
    margin-left: var(--cv-s2);
    font-family: var(--cv-font-mono);
    font-size: 10.5px;
    color: var(--cv-text-muted);
}

.cv-mock-body { padding: var(--cv-s4); }

.cv-mock-hello {
    font-family: var(--cv-font-display);
    font-size: 19px;
    font-weight: 600;
    color: var(--cv-text);
    margin-bottom: 2px;
}
.cv-mock-sub {
    font-size: 12px;
    color: var(--cv-text-muted);
    margin-bottom: var(--cv-s4);
}

.cv-mock-tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cv-s2);
    margin-bottom: var(--cv-s4);
}
.cv-mock-tile {
    padding: var(--cv-s3);
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-sm);
}
.cv-mock-tile--accent {
    background: var(--cv-accent-soft);
    border-color: transparent;
}
.cv-mock-tile-k {
    font-size: 10.5px;
    color: var(--cv-text-muted);
    margin-bottom: 4px;
}
.cv-mock-tile-v {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 18px;
    font-weight: 700;
    color: var(--cv-text);
}
.cv-mock-tile--accent .cv-mock-tile-v { color: var(--cv-accent); }

.cv-mock-list {
    border: 1px solid var(--cv-border);
    border-radius: var(--cv-r-sm);
    overflow: hidden;
}
.cv-mock-row {
    display: flex;
    align-items: center;
    gap: var(--cv-s2);
    padding: 10px var(--cv-s3);
    border-bottom: 1px solid var(--cv-border);
}
.cv-mock-row:last-child { border-bottom: none; }
.cv-mock-name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cv-text);
}
.cv-mock-meta {
    margin-left: auto;
    font-family: var(--cv-font-mono);
    font-size: 11px;
    color: var(--cv-text-muted);
}
.cv-mock-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cv-mock-dot--ok   { background: var(--cv-success); }
.cv-mock-dot--warn { background: var(--cv-warning); }

.cv-mock-caption {
    margin: var(--cv-s3) 0 0;
    font-size: 12.5px;
    color: var(--cv-text-muted);
    text-align: center;
}

/* --- 3. Dai phan nhip -----------------------------------------------------
   Khoi so sanh gia gia han la khoi ban hang manh nhat cua trang, nen no duoc
   mot nen rieng de tach han khoi mach doc.

   CO Y KHONG tran vien. Tran vien trong mot khung da can giua phai dung meo
   `margin-left: calc(50% - 50vw)`, ma 50vw co tinh ca thanh cuon nen trang bi
   troi ngang vai chuc pixel. Chua cai do lai phai dat overflow-x an len cha,
   ma lam vay thi thanh dieu huong dinh (position: sticky) het dinh. Doi mot
   khoi bo goc lay mot thanh nav chay dung la khong dang.
   ------------------------------------------------------------------------- */
/* Dai nay LUON toi, ke ca khi trang dang o che do sang. Nghia la moi thu ben
   trong doc --cv-text, --cv-accent, --cv-surface... deu lay nham gia tri cua
   che do sang va bien mat tren nen toi.

   DA THU cach vá từng dòng: '.cv-band .cv-compare-row .cv-mono', rồi
   '.cv-band .cv-compare-col--us .cv-compare-head', roi... Sai huong — moi
   thanh phan moi dat vao dai lai phai them mot luat nua, va cai nao quen thi
   lang le tang hinh.

   Cach dung: DINH NGHIA LAI TOKEN trong pham vi .cv-band. Dung y nhu cach che
   do toi lam o muc 2. Moi con chau tu dong dung, ke ca thanh phan chua ton
   tai. DESIGN.md muc 3: "Chi ghi de token, khong viet lai CSS". */
.cv-band {
    --cv-surface:       #221B2C;
    --cv-surface-hover: #2A2235;
    --cv-bg-subtle:     #1B1524;
    --cv-border:        rgba(232, 228, 234, .12);
    --cv-border-strong: rgba(232, 228, 234, .22);

    --cv-text:          #E8E4EA;
    --cv-text-muted:    #A59DA8;

    --cv-accent:        #A78BF5;
    --cv-accent-hover:  #BCA6F8;
    --cv-accent-soft:   rgba(167, 139, 245, .14);
    --cv-on-accent:     #1B0F33;

    --cv-success:       #A3E635;
    --cv-warning:       #FCD34D;
    --cv-danger:        #FCA5A5;

    /* Nen toi thi khong dung bong — muc 2 ghi ly do. */
    --cv-shadow-sm: none;
    --cv-shadow-md: none;

    background: #151018;
    color: var(--cv-text);
    border-radius: var(--cv-r-lg);
    padding: var(--cv-s16) var(--cv-s12);
}

/* Tieu de trong dai duoc trang han thay vi --cv-text, de no van la thu dap
   vao mat truoc tien khi ca khoi deu toi. */
.cv-band .cv-h2 { color: #FFFFFF; }

/* Khi CA TRANG da toi san thi dai nay phai toi HON nua, neu khong no chim vao
   nen va mat han tac dung phan nhip. */
:root[data-theme="dark"] .cv-band { background: #0E0A13; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cv-band { background: #0E0A13; }
}

@media (max-width: 991px) {
    .cv-hero-grid { grid-template-columns: 1fr; gap: var(--cv-s8); }
    /* Tren dien thoai, anh san pham xuong duoi phan chu — gia va nut phai
       len trươc, khong duoc day xuong duoi mot khoi trang tri. */
    .cv-hero-aside { order: 2; }
    .cv-band { padding: var(--cv-s12) var(--cv-s6); }
}

@media (max-width: 575px) {
    .cv-mock-frame { padding: 0 var(--cv-s4) var(--cv-s4) 0; }
    .cv-mock-shade { inset: var(--cv-s4) 0 0 var(--cv-s4); }
    .cv-band { padding: var(--cv-s8) var(--cv-s4); border-radius: var(--cv-r-md); }
}

/* Goi khong khai bao gia cho chu ky nao dang hien. Khong de trong — the
   trang tron trong mot bang gia trong nhu trang bi vo. */
.cv-price-none {
    font-size: 15px;
    font-weight: 600;
    color: var(--cv-text-muted);
    padding: var(--cv-s2) 0;
}

/* Hai cot so sanh khong can luat rieng nao nua: chung doc --cv-surface,
   --cv-text, --cv-accent, --cv-danger, ma ca bon da duoc .cv-band dinh nghia
   lai o muc 21.

   Ngoai le duy nhat: .cv-compare-low lam mo con so nam-dau cua doi thu bang
   opacity .55. Tren nen sang thi vua du nhat; tren nen toi thi mat han. */
.cv-band .cv-compare-low { opacity: .75; }


/* ==========================================================================
   22. TANG TUONG TAC

   Truoc muc nay, toan site chi co DUNG HAI hieu ung: cvFadeSlideUp luc vao
   trang, va .cv-reveal khi cuon toi. Ngoai ra:
     - bam nut: khong co phan hoi nao
     - di chuot len the: chi doi mau vien
     - chuyen trang: trang man roi tai lai
     - dang tai: chi mot spinner o service_vps.tpl, con lai la md-preloader cu
       cua CloudOnex nhet vao bang jQuery

   Muc nay bu cho ca bon. Vi ap ca cho .btn cua Bootstrap nen 25 man hinh chua
   chuyen sang design system cung duoc huong, khong phai sua tung file.

   Khoi prefers-reduced-motion o muc 3 dung !important nen da phu luon moi thu
   viet o day — khong phai khai bao lai, tru chuyen canh trang (xem muc 7).
   ========================================================================== */

/* --- 1. Vong focus ---------------------------------------------------------
   Truoc day gan nhu khong co. Nguoi dung ban phim khong biet minh dang o dau,
   va do la loi tiep can co ban nhat. Dung :focus-visible chu khong :focus, de
   nguoi bam chuot khong thay vong sang moi lan bam. */
.cv-btn:focus-visible,
.cv-cycle-btn:focus-visible,
.cv-copy:focus-visible,
.cv-tab:focus-visible,
.mk-link:focus-visible,
.mk-icon-btn:focus-visible,
.mk-btn-signin:focus-visible,
.mk-btn-register:focus-visible,
.mk-lang-btn:focus-visible,
.cv-alert-act:focus-visible,
.btn:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--cv-accent);
    outline-offset: 2px;
    border-radius: var(--cv-r-sm);
}

.cv-domain-form input:focus-visible,
.form-control:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--cv-accent);
    outline-offset: 1px;
}

/* --- 2. Phan hoi khi bam ---------------------------------------------------
   Lun xuong 1.5% trong 90ms. Du de ngon tay tin la da bam trung, chua du de
   thanh mot hieu ung.

   Dung thoi gian RIENG chu khong dung --cv-dur-fast: phan hoi khi bam phai
   nhanh hon hover, neu khong se thay nhao. */
.cv-btn,
.cv-cycle-btn,
.mk-btn-register,
.mk-btn-signin,
.mk-icon-btn,
.cv-alert-act,
.btn {
    transition: background var(--cv-dur-fast) var(--cv-ease),
                border-color var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease),
                transform .09s var(--cv-ease),
                box-shadow var(--cv-dur-fast) var(--cv-ease);
}
.cv-btn:active,
.cv-cycle-btn:active,
.mk-btn-register:active,
.mk-btn-signin:active,
.mk-icon-btn:active,
.cv-alert-act:active,
.btn:active {
    transform: scale(.985);
}

/* --- 3. The nhac len khi di chuot -----------------------------------------
   O nen SANG dung bong. O nen TOI thi khong — DESIGN.md muc 3: nen toi phan
   tang bang do sang nen cong vien 1px, bong o nen toi gan nhu khong thay gi
   ma van ton GPU. Vi vay nen toi doi vien va nen thay cho bong. */
.cv-plan,
.cv-trust-item,
.cv-tile,
.card {
    transition: transform var(--cv-dur-fast) var(--cv-ease),
                border-color var(--cv-dur-fast) var(--cv-ease),
                box-shadow var(--cv-dur-mid) var(--cv-ease),
                background var(--cv-dur-fast) var(--cv-ease);
}
.cv-plan:hover,
.cv-trust-item:hover,
.cv-tile:hover {
    transform: translateY(-2px);
    border-color: var(--cv-border-strong);
    box-shadow: var(--cv-shadow-md);
}

:root[data-theme="dark"] .cv-plan:hover,
:root[data-theme="dark"] .cv-trust-item:hover,
:root[data-theme="dark"] .cv-tile:hover {
    box-shadow: none;
    background: var(--cv-surface-hover);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .cv-plan:hover,
    :root:not([data-theme="light"]) .cv-trust-item:hover,
    :root:not([data-theme="light"]) .cv-tile:hover {
        box-shadow: none;
        background: var(--cv-surface-hover);
    }
}

/* Goi noi bat da co vien mau nhan roi; nhac len thi giu nguyen vien do chu
   khong de --cv-border-strong de len. */
.cv-plan--featured:hover { border-color: var(--cv-accent); }

/* --- 4. Trang thai dang xu ly ----------------------------------------------
   Nut gui form phai TU noi la no dang chay. Truoc day ba cho lam viec nay
   bang cach nhet mot the <i class="fa-spinner"> vao innerHTML qua jQuery —
   tuc la xoa mat nhan cua nut, va moi cho tu viet mot kieu.

   Cach o day khong dung toi innerHTML: nhan duoc lam trong suot, spinner ve
   bang ::after. Bo class ra la nut tro lai y nguyen. */
.cv-btn.is-busy,
.btn.is-busy {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}
.cv-btn.is-busy::after,
.btn.is-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    /* Nhan da bi ep thanh trong suot o tren, nen currentColor cung trong
       suot theo — phai dat lai mau that cho spinner. */
    color: var(--cv-on-accent);
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: cvSpin .7s linear infinite;
}
.cv-btn-ghost.is-busy::after,
.btn-secondary.is-busy::after,
.btn-light.is-busy::after {
    color: var(--cv-text);
}

/* --- 5. Khung xuong cho noi dung dang cho ----------------------------------
   Tien ich dung chung, thay cho viec de trong mot khoang roi noi dung nhay
   vao. Danh cho cac man hinh goi API cham: dong bo trang thai VPS, tra cuu
   ten mien. */
.cv-skeleton {
    border-radius: var(--cv-r-sm);
    background: linear-gradient(
        90deg,
        var(--cv-bg-subtle) 25%,
        var(--cv-surface-hover) 37%,
        var(--cv-bg-subtle) 63%
    );
    background-size: 400% 100%;
    animation: cvShimmer 1.4s ease infinite;
}
@keyframes cvShimmer {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* --- 6. Thanh tien do khi chuyen trang -------------------------------------
   Day la site nhieu trang chu khong phai SPA: bam mot link la trinh duyet tai
   lai tu dau. Giua luc bam va luc trang moi ve, KHONG CO GI xay ra — voi mot
   truy van cham (tra cuu WHOIS, dong bo Contabo) thi khach tuong minh bam hut
   va bam lai lan nua.

   Thanh nay khong lam trang nhanh hon, no chi noi cho khach biet may dang lam
   viec. cloudvina.js bat su kien bam va gui form. */
.cv-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    height: 2px;
    width: 0;
    background: var(--cv-accent);
    opacity: 0;
    pointer-events: none;
    transition: width .2s var(--cv-ease), opacity .2s var(--cv-ease);
}
.cv-progress.is-on { opacity: 1; }

/* --- 7. Chuyen canh giua hai trang -----------------------------------------
   Chuyen canh cap tai lieu cho site nhieu trang. Trinh duyet nao khong ho tro
   thi bo qua ca khoi nay, khong hong gi — day la nang cap dan, khong phai phu
   thuoc, va khong can mot dong JS nao.

   CO Y de rat ngan (180ms). Chuyen canh khi doi trang ma dai qua thi thanh
   cham chap, nhat la voi khach quay lai nhieu lan trong ngay. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .18s;
    animation-timing-function: var(--cv-ease);
}

/* --- Khung co dinh KHONG duoc mo chong -------------------------------------
   Mac dinh, chuyen canh lam mo chong TOAN BO trang duoi mot ten duy nhat la
   'root'. Nghia la thanh ben, thanh tieu de va thanh dieu huong — nhung thu
   GIONG HET NHAU o ca hai trang — cung bi mo di roi hien lai. Mat thay la mot
   cai nhay, nhat la khi bam mot muc tren thanh ben: thanh ben nhay trong khi
   no co doi gi dau.

   Dat ten rieng cho chung thi trinh duyet coi moi cai la MOT phan tu duoc giu
   lai qua hai trang: no do vi tri truoc va sau, thay khong doi thi de nguyen.
   Chi phan noi dung chinh con mo chong — dung nhu y dinh ban dau.

   Moi ten chi duoc dung cho DUNG MOT phan tu tren trang. Ba cai duoi day
   khong bao gio cung xuat hien: .page-sidebar va .page-header thuoc khung
   dang nhap, .mk-nav thuoc khung trang cong khai. */
.page-sidebar { view-transition-name: cv-sidebar; }
.page-header  { view-transition-name: cv-header; }
.mk-nav       { view-transition-name: cv-topnav; }

/* Khoi !important o muc 3 khong voi toi duoc pseudo-element cua chuyen canh,
   phai tat rieng o day. */
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}

/* Trong luoi 7/5 cot chu hep hon truoc, nen co chu h1 cu lam tieu de vo
   thanh ba dong voi mot tu lac loai o dong cuoi. Keo tran xuong mot bac. */
.cv-hero-grid .cv-hero-inner h1 {
    font-size: clamp(1.9rem, 1.2rem + 2.1vw, 2.85rem);
}


/* ==========================================================================
   23. THANH DIEU HUONG O BE NGANG DIEN THOAI

   LOI DO DUOC, KHONG PHAI DOAN: o be ngang 390px,
   documentElement.scrollWidth = 413 — tran ra 23px, ca trang truot ngang
   duoc. Do bang cach nhung trang vao mot iframe rong dung 390px roi liet ke
   moi phan tu co getBoundingClientRect().right > 390.

   Ket qua chi ra DUY NHAT mot thu pham: .mk-actions rong 294px. Khong phai
   luoi bang gia, khong phai dai tin cay — hai cho do auto-fit da lo xong.

   Vi sao khong ai thay: DESIGN.md muc 8 ghi "chua do lan nao o be ngang
   360px". Tran ngang tren dien thoai khong lam trang bao loi, no chi lam moi
   thu lech sang trai va cat mat nut ben phai — nhin anh chup desktop thi
   khong bao gio phat hien.

   NGAN SACH o 390px:
     390 - 28 (le hai ben) = 362 cho toan bo thanh
     thuong hieu ~105 + hanh dong ~231 = 336, con du 26
   ========================================================================== */

@media (max-width: 575px) {

    /* Thuong hieu phai co lai duoc. flex-shrink: 0 mac dinh cua .mk-brand
       khien no giu nguyen be ngang va day moi thu khac ra ngoai. */
    .mk-brand {
        font-size: 17px;
        min-width: 0;
        overflow: hidden;
    }
    .mk-brand img { height: 26px; }

    .mk-actions { gap: 6px; }

    .mk-icon-btn {
        width: 34px;
        height: 34px;
    }

    /* Nut ngon ngu: bo phan chu "VI" / "EN", giu lai moi icon qua cau.
       Dung font-size: 0 vi chuoi ma ngon ngu la text node tran trong button,
       khong co the boc rieng de an. SVG khong bi anh huong vi kich thuoc cua
       no dat bang thuoc tinh width/height chu khong theo co chu.
       aria-label tren nut da mo ta day du nen trinh doc man hinh khong mat gi. */
    .mk-lang-btn {
        height: 34px;
        padding: 0 8px;
        gap: 0;
        font-size: 0;
    }

    /* Nut chinh phai o lai — day la duong vao cua ca phieu dang ky. Thu nho
       chu khong an. */
    .mk-btn-register {
        padding: 0 12px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        font-size: 13.5px;
        white-space: nowrap;
    }
}

/* Man hinh cuc hep (320-360px): ngan sach khong con du cho chu tren nut
   chinh nua. Nhuong bang cach cho thuong hieu chi con bieu tuong. */
@media (max-width: 359px) {
    .mk-brand span { display: none; }
    .mk-btn-register { padding: 0 10px; font-size: 13px; }
}


/* ==========================================================================
   24. TRANG TRA CUU WHOIS

   Thay cho khoi <style> tung nam thang trong whois.tpl. Ly do chuyen ra day
   ghi o dau file do va o DESIGN.md muc 7: CSS trong template khong doi theme
   duoc, nen trang giu nguyen mau sang ke ca khi khach bat nen toi.
   ========================================================================== */

.cv-lookup {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--cv-s16) 0 var(--cv-s24);
}

/* Ban rong cua o tra ten mien o hero. Cung mot thanh phan, chi khac be ngang:
   o day no LA noi dung chinh cua trang chu khong phai mot chi tiet trong
   hero, nen duoc chiem het be ngang va cao hon mot chut. */
.cv-domain-form--wide {
    max-width: none;
    margin-top: var(--cv-s8);
}
.cv-domain-form--wide input { padding: 15px 18px; font-size: 16px; }
.cv-domain-form--wide .cv-btn { padding: 0 28px; }

.cv-lookup-result { margin-top: var(--cv-s6); }

/* KHONG boc khung cho con truc tiep cua .cv-lookup-result.
   Luat cu o day la:
       .cv-lookup-result > * { padding; border; border-radius; background }
   viet theo gia dinh may chu tra ve MOT phan tu boc. Sai: whois_result.tpl
   tra ve muoi may the ANH EM, nen moi dong thong tin bi boc thanh mot the
   rieng, va hai the <div> ke ngang von khong co noi dung thi thanh hai o
   trang tron. Da lo ra tren production.

   Hai mau ket qua (whois_result, whois_available_result) nay tu dung .cv-panel
   cua rieng chung, nen o boc ngoai chi con lo khoang cach. */
.cv-lookup-result > * + * { margin-top: var(--cv-s4); }

/* Nhan chi danh cho trinh doc man hinh. Khong dung display:none — lam vay thi
   trinh doc man hinh cung bo qua luon, tuc la mat dung thu can giu. */
.cv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 575px) {
    .cv-lookup { padding: var(--cv-s8) 0 var(--cv-s12); }
}


/* ==========================================================================
   25. THANH PHAN CHO NHOM MAN HINH TRONG TAI KHOAN (lo 1)

   Phuc vu: client_topup, client_autotopup, services, service_list, view_order.

   Phan lon cac man hinh do da co san thanh phan de dung — .cv-table,
   .cv-panel, .cv-field, .cv-input, .cv-status, .cv-svc-* — nen o day chi them
   nhung thu THUC SU con thieu, khong dung lai cai da co duoi ten khac.
   ========================================================================== */

/* --- Sua .cv-status: nen phai theo mau CUA CHINH NO --------------------------
   Ban cu dat ca ba bien the ve `background: var(--cv-accent-soft)`, tuc la
   nhan "dang chay" mau xanh nam tren nen tim, "sap het han" mau vang cung nam
   tren nen tim. Hoi truoc mau nhan la ho phach am nen khong ai de y; doi sang
   tim thi lo ngay.

   color-mix lay dung mau chu cua tung bien the roi pha loang — mot dong lo cho
   moi bien the, ke ca bien the them sau nay. Dong `background` phia truoc la
   du phong cho trinh duyet chua ho tro color-mix. */
.cv-status--ok,
.cv-status--warn,
.cv-status--busy,
.cv-status--danger,
.cv-status--muted {
    background: var(--cv-surface-hover);
    background: color-mix(in srgb, currentColor 13%, transparent);
}
.cv-status--danger { color: var(--cv-danger); }
.cv-status--muted  { color: var(--cv-text-muted); }

/* --- Duong dan phan cap ---------------------------------------------------
   Thay cho .breadcrumb cua Bootstrap. */
.cv-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cv-s2);
    margin: 0 0 var(--cv-s4);
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    color: var(--cv-text-muted);
}
.cv-crumbs a { color: var(--cv-text-muted); text-decoration: none; }
.cv-crumbs a:hover { color: var(--cv-accent); }
.cv-crumbs li { display: flex; align-items: center; gap: var(--cv-s2); }
.cv-crumbs li + li::before {
    content: "/";
    color: var(--cv-border-strong);
}
.cv-crumbs [aria-current="page"] { color: var(--cv-text); font-weight: 600; }

/* --- Dau trang: tieu de + nut hanh dong ----------------------------------- */
.cv-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--cv-s4);
    margin-bottom: var(--cv-s6);
}
.cv-page-title {
    font-family: var(--cv-font-display);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--cv-text);
    margin: 0;
}
.cv-page-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--cv-text-muted);
}

/* --- Bo cuc hai cot 7/5 --------------------------------------------------- */
.cv-split {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--cv-s6);
    align-items: start;
}
.cv-split--narrow {
    grid-template-columns: minmax(0, 680px);
    justify-content: center;
}
.cv-stack > * + * { margin-top: var(--cv-s4); }

/* --- O nhap co tien to (ky hieu tien te) ----------------------------------
   Thay cho .input-group cua Bootstrap. Vien nam o BOC NGOAI chu khong o
   <input>, de khi go chu thi ca cum sang len chu khong chi rieng o nhap. */
.cv-input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--cv-border-strong);
    border-radius: var(--cv-r-sm);
    background: var(--cv-surface);
    overflow: hidden;
    transition: border-color var(--cv-dur-fast) var(--cv-ease),
                box-shadow var(--cv-dur-fast) var(--cv-ease);
}
.cv-input-group:focus-within {
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 3px var(--cv-accent-soft);
}
.cv-input-prefix {
    display: flex;
    align-items: center;
    padding: 0 var(--cv-s3);
    background: var(--cv-bg-subtle);
    border-right: 1px solid var(--cv-border);
    font-family: var(--cv-font-mono);
    font-size: 14px;
    color: var(--cv-text-muted);
}
/* O nhap ben trong tu bo vien va vong focus cua rieng no — boc ngoai lo roi. */
.cv-input-group .cv-input {
    border: none;
    border-radius: 0;
    background: transparent;
    flex: 1 1 auto;
    min-width: 0;
}
.cv-input-group .cv-input:focus,
.cv-input-group .cv-input:focus-visible {
    outline: none;
    box-shadow: none;
}
/* Nut nam trong cum (vi du "Sao chep") khong duoc xuong dong — cum chi cao
   bang mot hang nen chu tut xuong la vo cum. */
.cv-input-group .cv-btn { white-space: nowrap; flex-shrink: 0; }

/* --- Hang nut chon nhanh --------------------------------------------------- */
.cv-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cv-s2);
    margin-top: var(--cv-s3);
}

/* --- O so lieu noi bat (so du hien tai) ------------------------------------ */
.cv-figure {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cv-s4);
    padding: var(--cv-s4) var(--cv-s6);
    border-radius: var(--cv-r-md);
    background: var(--cv-accent-soft);
    margin-bottom: var(--cv-s6);
}
.cv-figure-label {
    font-size: 12.5px;
    color: var(--cv-text-muted);
    margin-bottom: 2px;
}
.cv-figure-value {
    font-family: var(--cv-font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cv-accent);
}
.cv-figure-act { margin-left: auto; }

/* --- Danh sach co dau tick ------------------------------------------------- */
.cv-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cv-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--cv-s3);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cv-text-muted);
}
.cv-checklist li + li { margin-top: var(--cv-s3); }
.cv-checklist svg {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--cv-success);
}

/* --- Cong tac bat/tat ------------------------------------------------------
   Thay cho .form-check.form-switch cua Bootstrap. O nhap that van nam do
   nhung duoc an di, nen ban phim va trinh doc man hinh van dung binh thuong. */
.cv-switch { display: inline-flex; align-items: center; gap: var(--cv-s3); cursor: pointer; }
.cv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-switch-track {
    position: relative;
    width: 40px;
    height: 23px;
    flex-shrink: 0;
    border-radius: var(--cv-r-pill);
    background: var(--cv-border-strong);
    transition: background var(--cv-dur-fast) var(--cv-ease);
}
.cv-switch-track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--cv-surface);
    transition: transform var(--cv-dur-fast) var(--cv-ease);
}
.cv-switch input:checked + .cv-switch-track { background: var(--cv-accent); }
.cv-switch input:checked + .cv-switch-track::after { transform: translateX(17px); }
.cv-switch input:focus-visible + .cv-switch-track {
    outline: 2px solid var(--cv-accent);
    outline-offset: 2px;
}

/* --- Trang thai rong cho danh sach ------------------------------------------
   .cv-empty da co nhung duoc thiet ke cho bang gia (vien dut, rong 520px).
   Ban nay danh cho danh sach trong tai khoan: co bieu tuong, co loi giai
   thich, va co mot nut lam gi tiep theo. */
.cv-blank {
    text-align: center;
    padding: var(--cv-s16) var(--cv-s6);
}
.cv-blank-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--cv-s4);
    border-radius: var(--cv-r-md);
    background: var(--cv-bg-subtle);
    color: var(--cv-text-muted);
}
.cv-blank-title {
    font-family: var(--cv-font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--cv-text);
    margin: 0 0 var(--cv-s2);
}
.cv-blank-text {
    font-size: 14px;
    color: var(--cv-text-muted);
    margin: 0 0 var(--cv-s6);
}

/* --- Khoi nhom trong danh sach dich vu -------------------------------------- */
.cv-group-head {
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
}
.cv-group-count {
    margin-left: auto;
    font-family: var(--cv-font-mono);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--cv-r-pill);
    background: var(--cv-bg-subtle);
    color: var(--cv-text-muted);
}

/* Canh phai cho cot nut trong bang. */
.cv-td-act { text-align: right; white-space: nowrap; }

/* Ngay sap toi han in dam mau canh bao — day la thu khach can thay ngay. */
.cv-due-soon { color: var(--cv-warning); font-weight: 700; }

@media (max-width: 991px) {
    .cv-split { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .cv-page-title { font-size: 22px; }
    .cv-figure { padding: var(--cv-s4); }
}


/* ==========================================================================
   26. THANH PHAN CHO NHOM MAN HINH QUAN LY DICH VU (lo 2)

   Phuc vu: service_hosting, service_ssl, service_domain, view_domain.
   ========================================================================== */

/* --- Khoi thu gon (vd "Tao CSR giup toi" o trang SSL) ---------------------- */
.cv-details > summary {
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--cv-accent);
}
.cv-details > summary::-webkit-details-marker { display: none; }
.cv-details > summary::before {
    content: '+';
    display: inline-block;
    width: 1em;
    transition: transform var(--cv-dur-fast) var(--cv-ease);
}
.cv-details[open] > summary::before { transform: rotate(45deg); }

/* --- Bien the thong bao ---------------------------------------------------
   .cv-notice da co (dung cho bang "dang khoi tao" o service_vps). Them hai
   bien the de dung lam cho bao ket qua trong hop thoai, thay cho
   .alert-success / .alert-danger cua Bootstrap. */
.cv-notice--ok {
    border-color: color-mix(in srgb, var(--cv-success) 35%, transparent);
    background: color-mix(in srgb, var(--cv-success) 10%, transparent);
}
.cv-notice--error {
    border-color: color-mix(in srgb, var(--cv-danger) 35%, transparent);
    background: color-mix(in srgb, var(--cv-danger) 10%, transparent);
}
.cv-notice--warn {
    border-color: color-mix(in srgb, var(--cv-warning) 40%, transparent);
    background: color-mix(in srgb, var(--cv-warning) 10%, transparent);
}
/* Du phong cho trinh duyet chua ho tro color-mix: van co vien, chi la khong
   co sac. Dat TRUOC nen no khong de len luat tren. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .cv-notice--ok    { border-color: var(--cv-success); }
    .cv-notice--error { border-color: var(--cv-danger); }
    .cv-notice--warn  { border-color: var(--cv-warning); }
}
/* .cv-notice la flex (de chua icon + noi dung). Khi dung lam mot dong chu
   thuan thi phai tra ve block, neu khong chu se bi keo can giua theo truc. */
.cv-notice--ok,
.cv-notice--error,
.cv-notice--warn {
    display: block;
    font-size: 14px;
    line-height: 1.6;
}

/* --- Luoi phieu nhap ------------------------------------------------------
   Thay cho .row .col-md-6 / .col-md-4 trong phieu tao CSR. Tu co xuong mot
   cot o man hinh hep, khong can khai bao breakpoint cho tung o. */
.cv-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0 var(--cv-s4);
}
.cv-form-grid .cv-field { margin-bottom: var(--cv-s4); }
/* O nao can rong bang hai cot — vi du ten mien va ten to chuc. */
.cv-col-2 { grid-column: span 2; }
@media (max-width: 575px) {
    .cv-col-2 { grid-column: span 1; }
}

/* --- Nut mang y nghia xoa -------------------------------------------------
   Chi doi MAU CHU va vien, khong doi nen: nut xoa nen do dac se hut mat manh
   hon ca nut chinh, ma no khong phai hanh dong ta muon khach bam. */
.cv-btn-danger {
    color: var(--cv-danger);
    border-color: color-mix(in srgb, var(--cv-danger) 40%, transparent);
}
.cv-btn-danger:hover {
    color: var(--cv-danger);
    background: color-mix(in srgb, var(--cv-danger) 10%, transparent);
}
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .cv-btn-danger { border-color: var(--cv-danger); }
}

/* --- O bang qua dai thi cat bot -------------------------------------------
   Gia tri ban ghi DNS (chuoi TXT, ban ghi DKIM) co the dai hang tram ky tu va
   lam bang gian ra vo han. */
.cv-td-clip {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- O nhap trong hop thoai Bootstrap --------------------------------------
   Muc 14 anh xa .form-control trong pham vi `.page-content`. Hop thoai cua
   Bootstrap thi nam NGOAI pham vi do (no duoc dua ra cuoi <body> khi mo), nen
   phai khai bao rieng — neu khong, o nhap trong hop thoai giu nguyen mau sang
   ke ca khi khach dang o nen toi. */
.modal .cv-input,
.modal .form-control,
.modal .form-select {
    border-radius: var(--cv-r-sm);
    border: 1px solid var(--cv-border-strong);
    background: var(--cv-surface);
    color: var(--cv-text);
}
.modal .cv-input:focus,
.modal .form-control:focus,
.modal .form-select:focus {
    border-color: var(--cv-accent);
    box-shadow: 0 0 0 3px var(--cv-accent-soft);
    outline: none;
}
.modal .cv-field-label,
.modal .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-text-muted);
}
.modal-title {
    font-family: var(--cv-font-display);
    font-weight: 600;
}
/* Nut dong hop thoai la mot anh nen mau den cua Bootstrap — o nen toi no tang
   hinh. Lat mau lai theo do sang cua chu. */
:root[data-theme="dark"] .modal .btn-close { filter: invert(1) grayscale(100%); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .modal .btn-close { filter: invert(1) grayscale(100%); }
}


/* ==========================================================================
   27. TRANG NOI DUNG VA TRANG TEN MIEN (lo 3)

   Phuc vu: faq, knowledgebase, view_article, item, domain_register va hai mau
   ket qua tra ten mien.

   Phan lon muc nay la khoi <style> CUOI CUNG cua cong khach, go ra tu
   domain_register.tpl: 110 dong voi 16 ma mau hardcode. Vi nam trong template
   nen no khong doi theme duoc — ca trang giu nguyen mau sang ke ca khi khach
   bat nen toi. Nay viet lai theo token.
   ========================================================================== */

/* --- Khung trang mot cot ---------------------------------------------------
   Thay cho `style="width: 800px"` ghim cung o knowledgebase.tpl va
   view_article.tpl. Con so tuyet doi do lam trang tran ra ngoai man hinh dien
   thoai; max-width thi tu co lai. */
.cv-doc {
    max-width: 820px;
    margin: 0 auto;
    padding-bottom: var(--cv-s16);
}

/* --- Tieu de nhom trong danh sach cau hoi --------------------------------- */
.cv-faq-cat {
    font-family: var(--cv-font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--cv-text);
    margin: var(--cv-s8) 0 var(--cv-s2);
}
.cv-faq-cat:first-child { margin-top: 0; }

/* --- Danh sach lien ket (bai viet trong mot nhom) ------------------------- */
.cv-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cv-link-list li + li { border-top: 1px solid var(--cv-border); }
.cv-link-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-s4);
    padding: var(--cv-s4) var(--cv-s6);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--cv-text);
    text-decoration: none;
    transition: background var(--cv-dur-fast) var(--cv-ease),
                color var(--cv-dur-fast) var(--cv-ease);
}
.cv-link-list a:hover {
    background: var(--cv-surface-hover);
    color: var(--cv-accent);
}
.cv-link-list svg { flex-shrink: 0; opacity: .5; }
.cv-link-list a:hover svg { opacity: 1; }

/* --- Than bai viet do admin soan -------------------------------------------
   HTML nay den tu trinh soan thao nen khong dat class len tung the duoc. Dat
   kieu bang bo chon hau due, va CHI trong pham vi .cv-prose de khong anh
   huong phan con lai cua trang. */
.cv-prose {
    font-size: 15px;
    line-height: 1.75;
    color: var(--cv-text);
}
.cv-prose > :first-child { margin-top: 0; }
.cv-prose > :last-child  { margin-bottom: 0; }
.cv-prose p { margin: 0 0 var(--cv-s4); }
.cv-prose h1,
.cv-prose h2,
.cv-prose h3,
.cv-prose h4 {
    font-family: var(--cv-font-display);
    font-weight: 600;
    line-height: 1.25;
    color: var(--cv-text);
    margin: var(--cv-s8) 0 var(--cv-s3);
}
.cv-prose h1 { font-size: 24px; }
.cv-prose h2 { font-size: 20px; }
.cv-prose h3 { font-size: 17px; }
.cv-prose h4 { font-size: 15.5px; }
.cv-prose ul,
.cv-prose ol { margin: 0 0 var(--cv-s4); padding-left: var(--cv-s6); }
.cv-prose li { margin-bottom: var(--cv-s2); }
.cv-prose a { color: var(--cv-accent); }
.cv-prose a:hover { color: var(--cv-accent-hover); }
.cv-prose code {
    font-family: var(--cv-font-mono);
    font-size: .9em;
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--cv-bg-subtle);
}
.cv-prose pre {
    font-family: var(--cv-font-mono);
    font-size: 13px;
    line-height: 1.6;
    padding: var(--cv-s4);
    border-radius: var(--cv-r-sm);
    background: var(--cv-bg-subtle);
    border: 1px solid var(--cv-border);
    overflow-x: auto;
}
.cv-prose pre code { padding: 0; background: none; }
.cv-prose blockquote {
    margin: 0 0 var(--cv-s4);
    padding: var(--cv-s2) 0 var(--cv-s2) var(--cv-s4);
    border-left: 2px solid var(--cv-accent);
    color: var(--cv-text-muted);
}
/* Anh trong bai khong duoc tran ra ngoai khung. */
.cv-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cv-r-sm);
}
.cv-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: var(--cv-s4);
}
.cv-prose th,
.cv-prose td {
    padding: var(--cv-s2) var(--cv-s3);
    border: 1px solid var(--cv-border);
    text-align: left;
}
.cv-prose th { background: var(--cv-bg-subtle); font-weight: 700; }

/* --- O tim ten mien: chu + duoi + nut ------------------------------------- */
.cv-dsearch {
    display: flex;
    gap: var(--cv-s2);
    margin-top: var(--cv-s8);
}
.cv-dsearch .cv-input { flex: 1 1 auto; min-width: 0; padding: 14px 18px; font-size: 16px; }
.cv-dsearch-ext { flex: 0 0 auto; width: 130px; }
.cv-dsearch .cv-btn { flex: 0 0 auto; padding: 0 26px; }

@media (max-width: 575px) {
    /* O be ngang dien thoai, ba thu nam ngang thi o go chu chi con ~90px.
       Xuong dong: o go chu mot hang, duoi va nut chia doi hang duoi. */
    .cv-dsearch { flex-wrap: wrap; }
    .cv-dsearch .cv-input { flex: 1 1 100%; }
    .cv-dsearch-ext { flex: 1 1 0; width: auto; }
    .cv-dsearch .cv-btn { flex: 1 1 0; padding: 0 16px; }
}

/* --- Bang ket qua tra ten mien ---------------------------------------------
   Dung chung boi domain_register_result.tpl va whois_available_result.tpl. */
.cv-dres {
    padding: var(--cv-s6);
    border-radius: var(--cv-r-md);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
}
.cv-dres--free {
    border-color: color-mix(in srgb, var(--cv-success) 40%, transparent);
    background: color-mix(in srgb, var(--cv-success) 7%, transparent);
}
.cv-dres--taken { background: var(--cv-bg-subtle); }
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
    .cv-dres--free { border-color: var(--cv-success); background: var(--cv-surface); }
}

.cv-dres-head {
    display: flex;
    align-items: center;
    gap: var(--cv-s3);
    font-size: 16px;
    font-weight: 600;
    color: var(--cv-text);
}
.cv-dres-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--cv-success);
    color: var(--cv-text-inverse);
}
.cv-dres-note {
    margin: var(--cv-s3) 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cv-text-muted);
}
.cv-dres-buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cv-s3);
    margin-top: var(--cv-s4);
}
.cv-dres-term { max-width: 280px; }
.cv-dres-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-right: auto;
}
.cv-dres-price .cv-mono {
    font-size: 20px;
    font-weight: 700;
    color: var(--cv-text);
}
.cv-dres-per { font-size: 13px; color: var(--cv-text-muted); }

/* --- Luoi so sanh cac duoi ten mien ---------------------------------------- */
.cv-tldgrid-label {
    font-family: var(--cv-font-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cv-text-muted);
    margin: var(--cv-s8) 0 var(--cv-s3);
}
.cv-tldgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: var(--cv-s2);
}
.cv-tld {
    padding: var(--cv-s3);
    border-radius: var(--cv-r-sm);
    border: 1px solid var(--cv-border);
    background: var(--cv-surface);
    text-align: center;
}
.cv-tld.is-taken { background: var(--cv-bg-subtle); }
.cv-tld-ext {
    font-size: 14px;
    font-weight: 700;
    color: var(--cv-text);
    margin-bottom: 4px;
}
.cv-tld-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--cv-success);
    margin-bottom: var(--cv-s2);
}
.cv-tld-note { font-size: 12.5px; color: var(--cv-text-muted); }
.cv-tld-note--taken { color: var(--cv-danger); font-weight: 600; }


/* ==========================================================================
   28. CHUONG TRINH GIOI THIEU (lo 4)
   ========================================================================== */

/* --- Cac buoc danh so ------------------------------------------------------
   Thay cho <ol class="ps-3"> cua Bootstrap. Dung bo dem tu ve thay vi so mac
   dinh cua <ol>, de con so nam trong mot vien tron mau nhan giong .cv-step o
   trang chu — mot cach danh so cho ca site. */
.cv-numsteps {
    list-style: none;
    counter-reset: cvnum;
    margin: 0;
    padding: 0;
}
.cv-numsteps li {
    position: relative;
    padding-left: 44px;
    min-height: 32px;
}
.cv-numsteps li + li { margin-top: var(--cv-s6); }
.cv-numsteps li::before {
    counter-increment: cvnum;
    content: counter(cvnum);
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cv-accent-soft);
    color: var(--cv-accent);
    font-family: var(--cv-font-mono);
    font-size: 13px;
    font-weight: 700;
}
.cv-numsteps strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--cv-text);
    margin-bottom: 3px;
}
.cv-numsteps span {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: var(--cv-text-muted);
}

/* --- Luoi anh quang cao ----------------------------------------------------
   Anh do admin tai len nen khong biet truoc ty le. object-fit: contain giu
   nguyen ty le va khong cat mat chu tren anh — voi anh quang cao thi cat mat
   chu la hong han. */
.cv-banner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--cv-s4);
}
.cv-banner-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cv-s4);
    background: var(--cv-bg-subtle);
    min-height: 140px;
}
.cv-banner-frame img {
    max-width: 100%;
    max-height: 160px;
    object-fit: contain;
}

/* --- Dong tong o chan bang -------------------------------------------------
   .cv-table chua co luat cho <tfoot>; khong co thi dong tong trong het nhu
   mot dong du lieu nua. */
.cv-table tfoot td {
    padding: var(--cv-s4);
    border-top: 2px solid var(--cv-border-strong);
    background: var(--cv-bg-subtle);
}
.cv-table tfoot tr:hover { background: var(--cv-bg-subtle); }


/* ==========================================================================
   29. KET QUA TRA WHOIS

   Ban dau ket qua tra ve duoc boc khung bang luat `.cv-lookup-result > *`.
   Luat do sai vi may chu tra ve nhieu the anh em chu khong phai mot the boc:
   moi dong thanh mot the, hai the ke ngang rong thanh hai o trang. Da go.
   Nay whois_result.tpl tu dung .cv-panel, va muc nay lo phan con lai.
   ========================================================================== */

.cv-whois > * + * { margin-top: var(--cv-s4); }

/* Dong dau: ten mien + trang thai. Ten mien la thu khach vua go nen no phai
   la thu doc duoc truoc tien, khong phai mot tieu de phu. */
.cv-whois-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--cv-s3);
}
.cv-whois-name {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--cv-text);
    word-break: break-all;
}

/* Danh sach nameserver. Khong phai cap khoa-gia tri nen khong dung .cv-kv;
   moi dong la mot gia tri dung mot minh. */
.cv-ns-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cv-ns-list li {
    padding: var(--cv-s3) var(--cv-s6);
    border-bottom: 1px solid var(--cv-border);
    font-size: 14px;
    color: var(--cv-text);
    word-break: break-all;
}
.cv-ns-list li:last-child { border-bottom: none; }

.cv-whois-empty {
    margin: 0;
    padding: var(--cv-s6);
    font-size: 14px;
    line-height: 1.6;
    color: var(--cv-text-muted);
}

/* Cap khoa-gia tri dai (ten chu so huu, ten nha dang ky) phai xuong dong
   duoc, neu khong no day o ben canh ra ngoai khung. */
.cv-kv-val { word-break: break-word; }

@media (max-width: 575px) {
    .cv-whois-name { font-size: 17px; }
}


/* ==========================================================================
   30. O CHON (select)

   VAN DE: cai danh sach hien ra khi bam vao mot <select> KHONG PHAI HTML. No
   la mot cua so do he dieu hanh ve, nam ngoai trang, nen CSS thuong khong voi
   toi duoc. Ket qua: nen trang, vien vuong, dong dang chon to mau xanh he
   thong, thanh cuon kieu Windows — lac hoan toan so voi phan con lai.

   Muc nay chua theo HAI TANG.

   TANG 1 — moi trinh duyet: bo mui ten mac dinh, ve lai mui ten cua ta o
   phan DONG. Cho nay CSS luon voi toi duoc.

   TANG 2 — Chrome/Edge: `appearance: base-select` keo luon cai danh sach vao
   trong trang, thanh phan tu that, style duoc. Boc trong @supports nen trinh
   duyet nao chua co (Firefox, Safari) thi bo qua ca khoi va giu nguyen hanh vi
   hien tai — khong hong gi, chi la khong dep bang.

   Tren dien thoai, cac trinh duyet chua ho tro van dung banh xe chon cua he
   dieu hanh. Do la dieu TOT: banh xe do dung mot tay dung hon moi danh sach
   ta tu ve.
   ========================================================================== */

/* --- Tang 1: phan dong ----------------------------------------------------- */
select.cv-input,
select.cv-select {
    appearance: none;
    -webkit-appearance: none;

    /* Chua mui ten, cong them le phai de chu khong cham vao no. */
    padding-right: 38px;

    /* Mui ten ve bang SVG nhung trong background.
       Phai ke ro mau o day: anh trong data URI khong ke thua duoc currentColor,
       nen che do toi co mot khai bao rieng ngay ben duoi. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23605C6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 16px 16px;

    cursor: pointer;
}

/* Che do toi: doi mau mui ten cho hop nen. Chi khac moi ma mau trong SVG. */
:root[data-theme="dark"] select.cv-input,
:root[data-theme="dark"] select.cv-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A59DA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) select.cv-input,
    :root:not([data-theme="light"]) select.cv-select {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23A59DA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    }
}

/* O chon nam trong mot cum co tien to thi mui ten sat mep phai qua. */
.cv-input-group select.cv-input { background-position: right 10px center; }


/* --- Tang 2: danh sach mo ra (Chrome/Edge) --------------------------------- */
@supports (appearance: base-select) {

    select.cv-input,
    select.cv-select {
        appearance: base-select;

        /* Tro lai le phai binh thuong: o che do nay mui ten la mot phan tu
           that (::picker-icon) va tu chiem cho, khong phai anh nen nua. */
        background-image: none;
        padding-right: var(--cv-s3);

        display: flex;
        align-items: center;
        gap: var(--cv-s2);
    }

    /* Mui ten. MAC DINH no la mot hinh TAM GIAC dac do trinh duyet ve bang
       `content: counter(fake-counter-name, disclosure-open)` — da doc duoc
       gia tri do tu getComputedStyle. Chi doi mau thi van la tam giac; phai
       xoa content roi tu ve.

       Ve bang mask chu khong phai background-image: mask lay mau tu
       background-color, ma background-color doc duoc currentColor — nen mui
       ten tu theo mau chu, khong phai khai bao rieng cho che do toi nhu o
       tang 1. */
    select.cv-input::picker-icon,
    select.cv-select::picker-icon {
        content: "";
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin-left: auto;

        color: var(--cv-text-muted);
        background-color: currentColor;

        -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
                mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px 16px no-repeat;

        transition: transform var(--cv-dur-mid) var(--cv-ease);
    }
    select:open::picker-icon { transform: rotate(180deg); }

    /* --- Cai danh sach --- */
    select::picker(select) {
        appearance: base-select;

        margin-top: 6px;
        padding: 6px;
        border: 1px solid var(--cv-border);
        border-radius: var(--cv-r-md);
        background: var(--cv-surface);
        box-shadow: var(--cv-shadow-md);

        /* Dai qua thi cuon, dung de no chay het man hinh. */
        max-height: 320px;
        overflow-y: auto;

        /* Thanh cuon manh thay cho thanh cuon he dieu hanh. */
        scrollbar-width: thin;
        scrollbar-color: var(--cv-border-strong) transparent;
    }
    select::picker(select)::-webkit-scrollbar { width: 6px; }
    select::picker(select)::-webkit-scrollbar-track { background: transparent; }
    select::picker(select)::-webkit-scrollbar-thumb {
        background: var(--cv-border-strong);
        border-radius: var(--cv-r-pill);
    }

    /* Hien dan khi mo, thay cho viec bat ra dot ngot. */
    select::picker(select) {
        transition: opacity var(--cv-dur-fast) var(--cv-ease),
                    transform var(--cv-dur-fast) var(--cv-ease),
                    overlay var(--cv-dur-fast) allow-discrete,
                    display  var(--cv-dur-fast) allow-discrete;
        opacity: 0;
        transform: translateY(-4px);
    }
    select:open::picker(select) { opacity: 1; transform: translateY(0); }
    @starting-style {
        select:open::picker(select) { opacity: 0; transform: translateY(-4px); }
    }

    /* --- Tung dong --- */
    select option {
        display: flex;
        align-items: center;
        gap: var(--cv-s2);
        padding: 9px var(--cv-s3);
        border-radius: var(--cv-r-sm);
        background: transparent;
        color: var(--cv-text);
        font-size: 14px;
        cursor: pointer;
    }
    /* Trong o tra ten mien, cac duoi la du lieu ky thuat nen de font mono cho
       thang hang. Chu <select> co lop .cv-mono thi cac dong cung theo. */
    select.cv-mono option { font-family: var(--cv-font-mono); }

    select option:hover,
    select option:focus {
        background: var(--cv-surface-hover);
        outline: none;
    }
    select option:checked {
        background: var(--cv-accent-soft);
        color: var(--cv-accent);
        font-weight: 600;
    }

    /* Dau tick cua dong dang chon: bo di. Dong dang chon da doi ca mau chu
       lan mau nen roi, them mot dau tick nua chi lam le cot chu. */
    select option::checkmark { display: none; }

    /* Dong bi khoa (vd region het may): mo di, khong doi mau khi re chuot.
       base-select ghi de mau chu nen trinh duyet khong tu lam mo. */
    select option:disabled {
        color: var(--cv-text-muted);
        opacity: 0.55;
        cursor: not-allowed;
    }
    select option:disabled:hover { background: transparent; }
}

/* ==========================================================================
   31. THANH BEN O CHE DO THU GON — tam menu bay ra

   Khi bat "minify navigation", thanh ben co lai con 75px chi hien bieu tuong,
   va menu con khong con la nhanh cay ma BAY RA thanh mot tam noi ben canh.

   BON LOI DA LO RA, va ly do tung cai.

   1. BAM VAO BIEU TUONG KHONG RA GI

      O che do nay theme dat 'nav-menu > li > ul { display: none !important }'
      va chi hien lai bang ':hover'. Co !important nen jQuery khong ghi de
      duoc, tuc la BAM khong bao gio mo duoc — chi re chuot moi mo. Nay hien
      theo ca 'li:hover' lan 'li.is-open', va cloudvina.js dat 'is-open' khi
      bam.

   2. MO BANG BAM THI TAM MENU BI CAT SACH

      Theme dat 'overflow: hidden' len '.primary-nav', va chi mo lai thanh
      'visible' khi '.primary-nav:hover'. Duong bam khong co :hover nen cai
      cat con nguyen: thanh ben rong 75px, tam menu rong 232px — do duoc mat
      241px, gan nhu khong con gi ve ra.

      Con mot lop cat thu hai it ai ngo: '.slimScrollDiv', khung ma plugin
      slimScroll tu chen vao boc lay nav, cung 'overflow: hidden'. Go moi
      '.primary-nav' thi tam menu VAN bien mat. Phai go ca hai.

   3. DI CHUOT SANG TAM MENU THI NO BIEN MAT

      Da do: <li> co 'margin: 7px var(--cv-s2)', nen ben phai bieu tuong con
      mot dai 8px khong thuoc <li>. Re chuot ngang qua dai do la roi khoi
      ':hover' va tam menu tat.

      Theme co bac mot cai cau vo hinh bang 'ul::after' rong ra 1rem ve ben
      trai. Cach do mong manh, va no phu len noi dung trang mot vung rat rong
      (cao 100% + 180px) nen nuot mat cu bam o do. Nay thay bang mot manh nen
      8px ve ngay sau bieu tuong: vua lap cho ho, vua cho bieu tuong va tam
      menu trong nhu mot khoi lien.

   4. TAM MENU BI CAC MUC KHAC VE DE LEN

      Tam menu nam trong <li> cua nhom, ma cac <a> cap 1 phia duoi nam SAU
      trong cay — cung lop xep, sau thang truoc. Do duoc: hai trong ba muc bi
      the khac nuot mat cu bam. <li> von da 'position: relative', chi thieu
      z-index.

   Phai dung !important gan nhu ca muc: bo chon cua theme co 5 lop, bo chon o
   day 4 lop cong mot the. Day dung la truong hop !important sinh ra de dung.
   ========================================================================== */

/* --- Cho tam menu tran ra khoi thanh ben ----------------------------------- */
/* Theme dat '.primary-nav { overflow: hidden }' o che do thu gon va chi mo lai
   thanh 'visible' khi '.primary-nav:hover'. Nghia la mo bang BAM thi tam menu
   bi cat gon: thanh ben chi rong 75px, tam menu rong 232px — do duoc mat 241px,
   tuc la gan nhu khong con gi ve ra. cloudvina.js dat 'cv-flyout-open' len body
   khi co nhom dang mo, va day la luat go cai cat do. */
body.nav-function-minify.cv-flyout-open .page-sidebar .primary-nav,
body.nav-function-minify.cv-flyout-open .page-sidebar .slimScrollDiv,
body.nav-function-minify .page-sidebar .slimScrollDiv:hover {
    overflow: visible !important;
}

/* '.slimScrollDiv' la khung plugin slimScroll tu chen vao boc lay nav. No cung
   'overflow: hidden', va no moi la cai cat that — go moi minh '.primary-nav'
   thi tam menu van bien mat. */
body.nav-function-minify.cv-flyout-open .page-sidebar .slimScrollDiv > .slimScrollBar,
body.nav-function-minify.cv-flyout-open .page-sidebar .slimScrollDiv > .slimScrollRail {
    display: none !important;
}

/* --- Nang nhom dang mo len tren ------------------------------------------- */
/* Cac <a> cap 1 nam SAU trong cay nen mac dinh ve de len tam menu, nuot mat cu
   bam. <li> von da 'position: relative', chi thieu z-index. */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li:hover,
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li.is-open {
    z-index: 30;
}

/* Nhan dau nam BEN TRONG the <a>, ma <a> dang 'overflow: hidden' (theme chi go
   ra khi :hover). Khong go thi mo bang bam se thay than tam menu ma mat thanh
   tieu de o tren. */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li:hover > a,
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li.is-open > a {
    overflow: visible !important;
}

/* --- Nhip cau 8px noi bieu tuong voi tam menu ------------------------------ */
/* <li> co margin ngang var(--cv-s2) nen o phai bieu tuong con mot dai 8px
   khong thuoc <li>. Re chuot ngang qua dai do la roi khoi ':hover' va tam menu
   bien mat — dung cai ma nguoi dung gap. Ve them mot manh nen cho lien, vua
   lap cho ho vua cho hai manh trong nhu mot. */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li:hover > a::after,
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li.is-open > a::after {
    content: "";
    position: absolute;
    left: 100%;
    top: 0;
    width: var(--cv-s2);
    height: 100%;
    background: var(--sb-flyout);
}

/* --- Nhan nhom: thanh DAU tam menu ----------------------------------------- */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li > a > .nav-link-text {
    /* Cham dung mep thanh ben. 'left' tinh tu <li>, ma <li> co
       margin-left: var(--cv-s2), nen phai tru khoan do ra — neu khong se con
       ho dung 8px va di chuot qua do la mat hover. */
    left: calc(4.6875rem - var(--cv-s2)) !important;
    top: 0 !important;
    margin-top: 0 !important;
    width: 232px !important;
    height: 100% !important;

    display: none;
    align-items: center;
    padding-left: var(--cv-s4) !important;

    background: var(--sb-flyout) !important;
    border-radius: 0 var(--cv-r-md) 0 0 !important;

    font-family: var(--cv-font-sans);
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sb-text) !important;
}

/* --- Danh sach muc: than tam menu ------------------------------------------ */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li > ul {
    left: calc(4.6875rem - var(--cv-s2)) !important;
    width: 232px !important;

    /* Bo hai con so keo lech cua theme. Tam menu bat dau ngay duoi nhan. */
    margin-top: 0 !important;
    padding: var(--cv-s2) !important;

    background: var(--sb-flyout) !important;
    border-radius: 0 0 var(--cv-r-md) 0 !important;
    box-shadow: 18px 18px 44px rgba(0, 0, 0, .45) !important;

    /* Khong con la nhanh cay nua. */
    margin-left: 0 !important;
    border-left: none !important;
}

/* --- Hien tam menu: di chuot HOAC bam -------------------------------------- */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li:hover > ul,
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li.is-open > ul {
    display: block !important;
}
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li:hover > a > .nav-link-text,
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li.is-open > a > .nav-link-text {
    display: flex !important;
}

/* Bieu tuong cua nhom dang mo: sang len cho khop voi tam menu ben canh. */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li:hover > a,
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li.is-open > a {
    background: var(--sb-flyout) !important;
    color: var(--sb-text-strong) !important;
    border-radius: var(--cv-r-sm) 0 0 var(--cv-r-sm) !important;
}

/* --- Tung muc trong tam menu ----------------------------------------------- */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li > ul > li { margin: 1px 0; }
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li > ul > li > a {
    margin-left: 0 !important;
    padding: 9px var(--cv-s3) !important;
    border-radius: var(--cv-r-sm);
    font-size: 13.5px;
}

/* Bieu tuong cua nhom khong co mui ten o che do nay — thanh ben chi rong
   75px, khong con cho. */
body.nav-function-minify .page-sidebar .nav-menu > li > a > .collapse-sign {
    display: none !important;
}

/* Cai cau vo hinh cua theme khong con viec gi de lam, va neu de nguyen thi no
   con phu len noi dung trang mot vung rat rong (cao 100% + 180px, rong 100% +
   80px) va nuot mat cu bam o do. */
body.nav-function-minify .page-sidebar .primary-nav .nav-menu > li > ul::after {
    display: none !important;
}


/* ==========================================================================
   32. TRANG CHU — GOI CHON LOC
   ==========================================================================
   Truoc 28/09/2026 trang chu do ca 24 goi dang ban vao .cv-plans. Nay luoi
   goi chi con 3-4 goi (show_on_home), phan con lai cua danh muc nam sau nut
   "Xem tat ca goi". */
.cv-plans--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* The hep hon: gia 7 chu so + "/ 1 thang" bi ngat thanh "/ 1" va "thang". */
.cv-plans--4 .cv-price-amount { font-size: 1.75rem; }
.cv-plans--4 .cv-price-per { white-space: nowrap; }
@media (max-width: 1100px) {
    .cv-plans--4 { grid-template-columns: repeat(2, minmax(0, 360px)); }
}
@media (max-width: 640px) {
    .cv-plans--4 { grid-template-columns: minmax(0, 1fr); }
}

.cv-plans-more {
    display: flex;
    justify-content: center;
    margin-top: var(--cv-s8);
}