/* =============================================================================
 * style.css — Template CSS HỢP NHẤT (Guest + Logged-in, Desktop + Mobile + Dark)
 *
 * Kiến trúc 4 tầng (đồng bộ với OS.css):
 *   1. BASE         — rules chung cả desktop + mobile, cả guest + logged-in
 *   2. DESKTOP      — @media (min-width: 769px)
 *   3. MOBILE       — @media (max-width: 768px)
 *   4. DARK         — html.az-dark (override tokens)
 *
 * Namespace tách biệt:
 *   - Guest:       .guest-header / .menu / .feature / .warranty / .footer / .copyright ...
 *   - Logged-in:   .PanelLogin / .PanelHeader / .PanelMenu / .PanelNotify /
 *                  .PanelHome / .PanelMain / .PanelFooter / .PanelPrint
 *
 * Phụ thuộc: OS.css (tokens --az-*) + OS.js (AZ.Theme → html.az-dark)
 * ============================================================================= */
/* =============================================================================
 * 1. BASE — Reset, typography, helpers
 * ============================================================================= */
/* Reset tối thiểu — các rule chung (*, html, img, table, button, scrollbar)
 * đã có trong OS.css @layer reset. Chỉ giữ override đặc thù cho template. */
body {
    margin: 0; padding: 0;
    background-color: var(--az-bg-body);
    color: var(--az-text-main);
    font-size: var(--font-size, 14px);
    font-family: var(--font-name), Roboto, sans-serif;
    transition: background-color .2s, color .2s;
}

:root {
    --tpl-control-height: var(--az-control-height-md, 2.5rem);
    --tpl-control-height-lg: var(--az-control-height-lg, 3rem);
    --tpl-control-radius: var(--az-radius-sm, 0.1875rem);
    --tpl-control-padding-x: var(--az-control-padding-x, 0.5rem);
}
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }
img[data-src] { display: none; }
iframe { max-width: 100%; }
.schema { display: none; }
.right { text-align: right !important; }
.searching { background: url(/images/load.gif) no-repeat top+8px right+5px; background-size: 20px 20px; }
input.error, select.error {
    background-image: url(/images/fail.png) !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    border-color: var(--az-danger-text, red) !important;
}

/* ---------- Description (shared rich-text) ---------- */
.description { line-height: 1.5; font-size: 15px; color: var(--az-text-main, #262626); }
.description h1, .description h2 { font-size: 18px; font-weight: bold; line-height: 2.5; }
.description h3 { font-size: 16px; font-weight: bold; line-height: 2; }
.description a { color: var(--az-text-link, #300053); }
.description a:hover { text-decoration: underline; }
.description table { border-collapse: collapse; }
.description td { padding: 5px; }

/* ---------- Nav / Breadcrumb ---------- */
.nav { width: 100%; padding: 0; background-color: var(--az-bg-surface-alt, #f9faf9); }
.nav ul { margin: 0 auto; padding: 0; list-style: none; }
.nav li { margin: 0 10px; display: inline; }
.nav li:first-child { margin-left: 0; }
.nav li:last-child { color: var(--az-success-text, #62B846); }
.breadcrumb { margin-left: 5px; color: var(--az-text-muted, #777); list-style: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb li { margin: 0 10px; display: inline; font-size: 14px; }
.breadcrumb li:first-child { margin-left: 0; }
.breadcrumb li:last-child { color: var(--az-text-main, #151515); font-weight: bold; }

/* ---------- Feature (home grid) ---------- */
.feature h2 { height: 60px; line-height: 60px; margin: 0 0 50px; padding: 0; text-align: center; font-size: 46px; font-weight: 700; color: var(--az-text-main, #101C2C); }
.feature h2 b { color: var(--az-color-primary, #005FDB); }
.feature ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; list-style: none; }
.feature li {
    padding: 0 20px 20px;
    text-align: center;
    color: var(--az-text-main, #101C2C);
    background-color: var(--az-bg-surface, #F6F6F6);
    border: 1px solid var(--az-border-color-subtle, transparent);
    border-radius: 20px;
    box-sizing: border-box;
}
.feature li img { max-width: 100%; max-height: 82px; display: block; margin: 20px auto; clear: both; }
.feature li h3 { margin: 0; padding: 10px 0; font-size: 18px; text-transform: uppercase; text-align: center; }
.feature li p { margin: 0; padding: 0; line-height: 1.5; text-align: center; }

/* ---------- Warranty shared ---------- */
.warranty { background-color: var(--az-bg-surface, #fff); padding: 20px 0; }
.warranty .image img { max-width: 100%; max-height: 100%; margin: auto; display: block; }
.warranty .info { color: var(--az-text-main, #101C2C); }
.warranty .info h1 { line-height: 1.3; font-size: 20px; font-weight: bold; margin: 10px 0; text-transform: uppercase; }
.warranty .info ul { margin: 0; padding: 0; list-style: none; }
.warranty .info li { line-height: 2.2; font-size: 16px; }
.warranty .info li.price { color: var(--az-danger-text, red); font-size: 18px; font-weight: bold; display: none; }
.warranty .info li a:before { content: ", "; }
.warranty .info li a:nth-child(2):before { content: ""; }
.warranty .info a.button, .warranty .notfound a.button {
    min-width: 150px; padding: 0 15px; height: 40px; line-height: 40px;
    font-size: 16px; border-radius: 3px; text-align: center; cursor: pointer;
    background-color: var(--az-color-primary, #101C2C);
    border: 1px solid var(--az-color-primary, #101C2C);
    color: var(--az-text-on-primary, #fff);
    transition: all linear .2s;
    display: inline-block;
}
.warranty .info a.button { margin: 15px 0; }
.warranty .info a.button:hover, .warranty .notfound a.button:hover {
    background-color: var(--az-danger-text, red);
    border-color: var(--az-danger-text, red);
}
.warranty .info a.button:before { content: ""; }
.warranty .infodetail {
    background-color: var(--az-bg-surface, #101C2C);
    box-shadow: var(--az-shadow-lg, 0 15px 30px rgba(85,85,85,.2));
    border-radius: 10px;
    padding: 10px 20px;
    margin: 10px 0;
}
.warranty .infodetail * { color: var(--az-text-on-primary, #fff); }
.warranty .infodetail h1 { text-align: center; font-size: 32px; line-height: 1; }
.warranty .infodetail h2 { text-align: center; font-size: 20px; }
.warranty .infodetail a.button {
    width: 100%; max-width: 400px; margin: 15px auto;
    border: 0; border-radius: 6px;
    background-color: var(--az-bg-surface, #fff);
    color: var(--az-color-primary, #101C2C);
    text-transform: uppercase; font-weight: bold; display: block;
}
.warranty .infodetail a.button:hover { background-color: var(--az-danger-text, red); color: #fff; }
.warranty .list { color: var(--az-text-main, #101C2C); box-sizing: border-box; }
.warranty .list h1 { text-align: left; font-size: 32px; line-height: 1; }
.warranty .list table { margin: 10px 0; border-collapse: collapse; width: 100%; box-shadow: var(--az-shadow-sm, 0 2px 4px darkgrey); }
.warranty .list table, .warranty .list td, .warranty .list th {
    border: 1px solid var(--az-border-color, #e8e8e8);
    padding: 11px !important;
}
.warranty .list table ul { margin: 0; padding: 0; list-style: none; }
.warranty .list table li { line-height: 1.5; }
.warranty .notfound h1 { line-height: 1.3; font-size: 24px; font-weight: bold; margin: 0 0 20px; color: var(--az-text-main, #000); text-align: center; text-transform: uppercase; }
.warranty .notfound h1 a { color: var(--az-danger-text, red); }
.warranty .notfound img { margin: auto; display: block; }
.warranty .notfound a.button { width: 220px; margin: 20px auto; display: block; }

/* ---------- AZ Popup (lookup / activate / send) ---------- */
.AZPopupMain p { text-align: center; }
.AZPopupMain label { font-weight: 500; }
.AZPopupMain input[type="text"], .AZPopupMain input[type="number"], .AZPopupMain select {
    font-size: 16px; border-radius: 4px;
    background-color: var(--az-bg-surface, #fff);
    color: var(--az-text-main, #101C2C);
    border: 1px solid var(--az-border-color-strong, #aaa);
}
.AZPopupMain .center { text-align: center; }
.AZPopupMain .loading { height: 100px; margin: 100px auto; }
.AZPopupMain .result {
    width: 100%; margin: 50px 0; padding: 0;
    line-height: 30px !important; font-size: 18px !important;
    color: var(--az-text-main, #101C2C);
    text-align: center; display: block;
}
.AZPopupMain .result i { margin-right: 10px; }
.AZPopupMain button {
    margin: 20px auto; padding: 0 15px;
    height: 40px; line-height: 40px;
    font-size: 16px; border-radius: 3px;
    background-color: var(--az-color-primary, #101C2C);
    border: 1px solid var(--az-color-primary, #101C2C);
    color: var(--az-text-on-primary, #fff);
    transition: all linear .2s;
    display: block; cursor: pointer;
}
.AZPopupMain button:hover {
    background-color: var(--az-danger-text, red);
    border-color: var(--az-danger-text, red);
}
.loading { display: none; }
.AZPopupMain.send p { line-height: 1.2; font-size: 14px; }

/* ---------- Intro ---------- */
.intro ul.list li.on { font-weight: bold; }
.intro .desc, .intro .desc * { line-height: 1.5; font-size: 15px; }
.intro .desc h1, .intro .desc h2 { font-size: 18px; font-weight: bold; line-height: 2.5; }
.intro .desc h3 { font-size: 16px; font-weight: bold; line-height: 2; }

/* ---------- Support ---------- */
.support h1 { margin: 0; padding: 0; color: var(--az-text-main, #000); text-transform: uppercase; font-size: 22px; }
.support .filter select, .support .filter input[type="text"] {
    height: 40px; line-height: 40px;
    border: 1px solid var(--az-border-color, #e4e4e4);
    background: var(--az-bg-surface-alt, #f5f5f5);
    color: var(--az-text-main, #262626);
    font-size: 15px;
}
.support .filter button {
    height: 40px; line-height: 40px; padding: 0 10px;
    border: 0; border-radius: 3px;
    font-weight: bold; color: #fff;
    background-color: var(--az-color-primary, #101C2C);
    text-align: center; text-transform: uppercase;
}
.support .filter button:hover { background-color: var(--az-danger-text, red); }
.support .list { min-height: 300px; }
.support li {
    line-height: 1.5; padding: 15px;
    border: 1px solid var(--az-border-color, #E1E1E1);
    list-style: none;
    background-color: var(--az-bg-surface, transparent);
}
.support li:hover { border-color: var(--az-success-text, #61B846); }
.support li i { margin-right: 5px; }
.support li label { color: var(--az-success-text, #61B846); font-size: 16px; font-weight: 500; text-transform: uppercase; margin: 0 0 5px; padding: 0; }
.support li span, .support li a { margin-top: 5px; font-size: 15px; color: var(--az-text-main, #262626); display: block; text-align: justify; }

/* ---------- Footer / Copyright ---------- */
.guest-footer { width: 100%; background: var(--az-bg-surface-alt, #F6F6F6); }
.guest-footer .guest-container h2 { margin: 5px 0; padding: 0; line-height: 30px; color: var(--az-text-main, #000); font-size: 18px; }
.guest-copyright {
    width: 100%; text-align: center;
    background: var(--az-bg-surface, #101C2C);
    color: var(--az-text-on-primary, #fff);
    font-size: 14px;
}
.guest-copyright a { color: var(--az-warning-text, yellow); }

/* ---------- Control size normalization (template-wide) ---------- */
.PanelLogin input[type="text"],
.PanelLogin input[type="password"],
.support .filter select,
.support .filter input[type="text"],
.AZPopupMain input[type="text"],
.AZPopupMain input[type="number"],
.AZPopupMain select,
.AZPopupMain button,
.warranty .info a.button,
.warranty .notfound a.button {
    height: var(--tpl-control-height) !important;
    line-height: 1.25 !important;
    border-radius: var(--tpl-control-radius);
}

.AZPopupMain input[type="text"],
.AZPopupMain input[type="number"],
.AZPopupMain select,
.support .filter select,
.support .filter input[type="text"],
.PanelLogin input[type="text"],
.PanelLogin input[type="password"] {
    padding-top: calc((var(--tpl-control-height) - 1.25em - 0.125rem) / 2) !important;
    padding-bottom: calc((var(--tpl-control-height) - 1.25em - 0.125rem) / 2) !important;
    padding-left: var(--tpl-control-padding-x) !important;
    padding-right: var(--tpl-control-padding-x) !important;
}

.AZPopupMain button,
.warranty .info a.button,
.warranty .notfound a.button,
.PanelLogin a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.support .filter :is(input[type="text"], select, button) {
    box-shadow: none !important;
}

/* ---------- Theme toggle button (guest) ---------- */
.theme-toggle-guest {
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; cursor: pointer;
    color: var(--az-text-main, #101C2C);
    background-color: transparent;
    border: 1px solid var(--az-border-color-strong, #101C2C);
    transition: background-color .2s, color .2s, border-color .2s;
}
.theme-toggle-guest:hover { background-color: var(--az-bg-surface-hover, rgba(0,0,0,.05)); text-decoration: none; }
.theme-toggle-guest i { margin: 0; line-height: 1; }

/* ---------- Guest menu active / overlay ---------- */
body.menu-open { overflow: hidden; }
.guest-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 9000;
}
body.menu-open .guest-menu-overlay {
    opacity: 1;
    visibility: visible;
}

.guest-menu ul > li > a.active,
.guest-menu ul > li.active > a {
    color: var(--az-color-primary, #0FBF61);
    font-weight: 700;
}


/* =============================================================================
 * 2. DESKTOP layout (default — apply khi min-width: 769px)
 * ============================================================================= */


/* =============================================================================
 * PANEL BASE — shared rules for logged-in screens (Panel*)
 * ============================================================================= */

/* ---------- Panel Login ---------- */
.PanelLogin {
    width: 100%; height: 100%;
    background-color: var(--az-bg-body, #f0f4f5);
    position: absolute; display: flex; justify-content: center;
}
.PanelLogin .main {
    width: 300px; min-height: 220px; margin: auto; padding: 20px;
    background-color: var(--az-bg-surface, #fff);
    border: 1px solid var(--az-border-color, rgba(33,33,33,.1));
    border-radius: 8px;
    box-shadow: var(--az-shadow-md, 0 0 8px rgba(0,0,0,.1));
}
.PanelLogin h1 { height: 30px; line-height: 30px; margin: 0; font-size: 18px; font-weight: bold; color: var(--az-text-main, #000); background-color: transparent; }
.PanelLogin input[type="text"], .PanelLogin input[type="password"] {
    width: 100%; height: 2.5rem; line-height: 1.25;
    margin: 15px auto 0 !important;
    padding-top: calc((var(--tpl-control-height) - 1.25em - 2px) / 2) !important;
    padding-bottom: calc((var(--tpl-control-height) - 1.25em - 2px) / 2) !important;
    padding-left: var(--tpl-control-padding-x) !important;
    padding-right: var(--tpl-control-padding-x) !important;
    border: 1px solid var(--az-border-color, #cacaca);
    background-color: var(--az-bg-surface, #fff);
    color: var(--az-text-main);
    text-align: left; font-size: small; display: block !important;
}
.PanelLogin input:focus, .PanelLogin textarea:focus { box-shadow: 0 0 3px var(--az-border-color-strong, #ccc); }
.PanelLogin input[type="text"].disabled, .PanelLogin input[type="password"].disabled {
    background-color: var(--az-bg-surface-alt, #fff) !important;
    color: var(--az-text-subtle, #ccc) !important;
}
.PanelLogin a {
    width: 100%; height: 40px; line-height: 40px;
    margin: 15px auto 0; text-align: center;
    color: var(--az-text-on-primary, #fff);
    font-size: 16px; font-weight: bold;
    background-color: var(--az-color-primary, #B72025);
    display: block; cursor: pointer;
}
.PanelLogin a:hover { background-color: var(--az-color-primary-hover, #DA2529); }
.PanelLogin a.disabled { background-color: var(--az-bg-surface-hover, #ccc) !important; cursor: default; }
.PanelLogin p { margin: 18px; line-height: 25px; max-height: 80px; font-size: var(--font-size); color: var(--az-danger-text, red); display: none; overflow: hidden; }

/* ---------- Panel Header (shared) ---------- */
.PanelHeader {
    width: 100%;
    background-color: var(--az-bg-surface, #fff);
    box-shadow: var(--az-shadow-sm, 0 0 5px 0 rgba(1,3,4,.19));
    border-bottom: 1px solid var(--az-border-color-subtle, rgba(33,33,33,.1));
    position: fixed; top: 0; left: 0; z-index: 9000;
}
.PanelHeader .header { width: 100%; height: 100%; display: flex; }
.PanelHeader .header a { text-decoration: none; }

/* Notify icon + badge */
.PanelHeader .notify-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
}
.PanelHeader .notify-link i {
    font-size: 1.5rem;
    color: var(--az-text-muted);
    line-height: 1;
}
.PanelHeader .notify-link .badge {
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1.125rem;
    font-size: 0.625rem;
    text-align: center;
    background-color: var(--az-danger-text, #b10058);
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(35%, -35%);
    z-index: 2;
}

/* ---------- Panel Menu hover indicator ---------- */
.PanelMenu li a { color: var(--az-text-main); display: block; }
.PanelMenu li:hover a { color: var(--az-color-primary); }
.PanelMenu li.on { border-bottom: 2px solid var(--az-color-primary); }
.PanelMenu li.on > a { color: var(--az-color-primary) !important; }

/* ---------- Panel Home ---------- */
.PanelHome ul { margin: 10px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; }
.PanelHome h2 { height: 60px; line-height: 60px; margin: 0 0 50px; padding: 0; text-align: center; font-size: 46px; font-weight: 700; color: var(--az-text-main, #101C2C); }
.PanelHome h2 b { color: var(--az-color-primary, #005FDB); }
.PanelHome li {
    text-align: center;
    color: var(--az-text-main, #101C2C);
    background-color: var(--az-bg-surface, #fff);
    border: 1px solid var(--az-border-color-subtle, transparent);
    border-radius: 20px;
}
.PanelHome li img { max-width: 100%; max-height: 40px; display: block; margin: 10px auto; clear: both; }
.PanelHome li h3 { margin: 0; padding: 10px 0; font-size: 15px; text-transform: uppercase; }
.PanelHome li p { margin: 0; padding: 0; line-height: 1.5; text-align: center; color: var(--az-text-muted); }

/* ---------- Notify Popup Toast (FCM) ---------- */
.AZNotify { width: 100%; min-height: 120px; margin: 0; padding: 10px; display: flex; background-color: var(--az-bg-surface); color: var(--az-text-main); border: 1px solid var(--az-border-color); border-radius: 8px; }
.AZNotifyImage { width: 100px; height: 100px; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.AZNotifyImage img { max-width: 100px; max-height: 100px; margin: 0 auto; display: block; }
.AZNotifyContent { width: calc(100% - 100px); padding: 0 20px; }
.AZNotifyTitle { margin: 0; line-height: 30px; color: var(--az-text-main); font-size: var(--font-size-h5); font-weight: bold; text-align: left; }
.AZNotifyBody { max-height: 50px; margin: 0; line-height: 20px; color: var(--az-text-muted); font-size: var(--font-size); overflow: hidden; }
.AZNotifyMore { margin: 0; line-height: 20px; color: var(--az-text-link); font-size: var(--font-size); }

/* ---------- Book / Minus-Plus ---------- */
.book { display: flex; align-items: center; }
.book input[type="text"] {
    text-align: right; margin: 0 !important;
    border-left: 0 !important; border-right: 0 !important;
    background-color: var(--az-bg-surface);
    color: var(--az-text-main);
    border-color: var(--az-border-color);
}
.minus, .plus {
    height: 2.5rem; line-height: 2.5rem;
    border: 1px solid var(--az-border-color, #ddd);
    background-color: var(--az-bg-surface);
    color: var(--az-text-muted, #999);
    font-size: 16px; font-weight: bold; cursor: pointer; user-select: none;
    display: inline-flex; justify-content: center; align-items: center;
}
.minus:hover, .plus:hover { background-color: var(--az-bg-surface-hover, #F4F4F4); }

/* ---------- Error 404 ---------- */
.error404 .title, .error404 .title2 { font-size: 18px; line-height: 1.4; text-align: center; color: var(--az-text-main, #2c2c2c); }
.error404 .title2 { font-size: 17px; }
.error404 img { max-width: 200px; margin: 50px auto; display: block; }

/* ---------- Panel Footer ---------- */
.PanelFooter { font-size: 12px; color: var(--az-text-subtle, #878787); text-align: center; }

/* ---------- Steps Status / Cart Nav ---------- */
.stepsstatus { margin: 40px 10px; border-left: 1px solid var(--az-info-text, #1B89A5); }
.stepsstatus div { min-height: 60px; font-size: 16px; color: var(--az-text-main); position: relative; }
.stepsstatus label { line-height: 1.5; padding: 10px 0; text-indent: 15px; border-bottom: 1px solid var(--az-info-text, #1B89A5); display: block; position: relative; }
.stepsstatus span { line-height: 30px; color: var(--az-text-muted); font-size: var(--font-size); position: absolute; top: 10px; right: 0; }
.stepsstatus button { width: 20px; height: 20px; padding: 0; background-color: var(--az-bg-surface); border: 1px solid var(--az-info-text, #1B89A5); border-radius: 50%; position: absolute; top: 2.5rem; left: -11px; z-index: 99; }
.stepsstatus a { color: var(--az-success-text); margin-left: 15px; line-height: 30px; }
.stepsstatus .complete > button, .stepsstatus .complete > label > button { background-color: var(--az-info-text, #1d96b2) !important; }
.stepsstatus .prepare > button, .stepsstatus .prepare > label > button { background-color: var(--az-warning-text, yellow); }
.stepsstatus .fail label { font-weight: 600; color: var(--az-danger-text, red); }
.stepsstatus .fail > label > button { background-color: var(--az-danger-text, red); }
.stepsstatus.column { display: flex; justify-content: space-between; border: 0; }
.stepsstatus.column > div { flex-grow: 1; border-left: 1px solid var(--az-info-text, #1B89A5); }

/* ---------- Panel Print ---------- */
.PanelPrint { width: 100%; font-family: Arial; }
.PanelPrint .PanelSetup { width: 100%; height: 100vh; position: fixed; top: 0; left: 100%; z-index: 100; border-left: 1px solid var(--az-border-color); transition: .3s all linear; display: none; }
.PanelPrint .PanelSetup.active { left: 0 !important; background-color: var(--az-bg-overlay, rgba(0,0,0,.6)); display: block; }
.PanelPrint .PanelSetup .PanelMain { width: 400px; height: 100%; margin: 0; padding: 15px; background-color: var(--az-bg-surface, #fff); float: right; }
.PanelPrint .PanelButton { position: fixed; bottom: 20px; right: 20px; z-index: 99; }
.PanelPrint .PanelButton a { width: 40px; height: 40px; padding: 5px; margin: 20px 10px; border-radius: 50%; background-color: var(--az-bg-surface, #fff); display: flex; justify-content: center; align-items: center; box-shadow: var(--az-shadow-md); }
@media screen and (min-width: 769px) {
    .guest-container { width: 1200px; padding: 0; margin: 0 auto; }

    /* Header desktop (Flexbox Tối ưu) */
    .guest-header { width: 100%; height: 80px; background-color: var(--az-bg-surface-alt, #f2f2f4); }
    .guest-header .guest-container { display: flex; align-items: center; justify-content: space-between; height: 100%; }

    .guest-header a { display: block; }
    .guest-header .logo { flex: 0 0 auto; display: flex; align-items: center; }
    .guest-header .logo img { max-width: 250px; max-height: 50px; }

    .guest-header h2 { 
        flex: 1 1 auto; 
        margin: 0 20px; 
        font-size: 28px; /* Thu nhỏ một chút để an toàn trên màn 1200px */
        font-weight: bold; 
        color: var(--az-text-main, #101C2C); 
        white-space: nowrap; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }

    /* Gộp chung Login, Phone và Theme Toggle vào quy tắc Flex */
    .guest-header .login, 
    .guest-header .phone, 
    .guest-header .theme-toggle-guest {
        flex: 0 0 auto;
        display: inline-flex; 
        align-items: center; justify-content: center;
        margin-left: 15px; 
        font-size: 16px; font-weight: bold;
        color: var(--az-text-main, #101C2C);
        border: 1px solid var(--az-border-color-strong, #101C2C);
        border-radius: 10px;
        height: 45px; /* Đồng nhất chiều cao các nút */
    }

    .guest-header .login, .guest-header .phone { padding: 0 15px; }
    .guest-header .phone i { margin-right: 10px; font-size: 20px; transform: rotate(90deg); }
    .guest-header .login i { margin-right: 8px; }

    /* Override riêng cho nút theme toggle được JS tiêm vào */
    .guest-header .theme-toggle-guest { width: 45px; padding: 0; font-size: 20px; border-color: var(--az-border-color, rgba(0,0,0,.15)); }

    /* Menu desktop */
    .guest-menu { width: 100%; height: 50px; margin: 0; padding: 0; background-color: var(--az-bg-surface, #fff); }
    .guest-menu ul { height: 50px; margin: 0; padding: 0; display: flex; justify-content: space-between; list-style: none; }
    .guest-menu ul > li { text-align: center; line-height: 50px; }
    .guest-menu ul > li:last-child { border-right: 0; }
    .guest-menu ul > li > a { font-size: 16px; color: var(--az-text-main, #101C2C); font-weight: 500; text-transform: uppercase; transition: all .25s ease-in-out; }
    .guest-menu ul > li:hover > a { color: var(--az-color-primary, #0FBF61); }
    .guest-menu li > ul {
        height: auto; padding: 20px;
        position: absolute; top: 40px; left: -30px;
        background-color: var(--az-bg-surface, #fff);
        box-shadow: var(--az-shadow-lg, 0 0 8px rgba(0,0,0,.6));
        display: none; z-index: 999;
    }
    .guest-menu li:hover > ul { display: block; }
    .guest-menu li:hover > ul li {
        width: 250px; line-height: 30px;
        padding: 3px 10px; margin: 7px 10px 7px 0;
        text-align: left; font-size: 14px;
        background-color: var(--az-bg-surface, #fff);
    }
    .guest-menu li:hover > ul li a { font-weight: unset; color: var(--az-text-main, #151515); }
    .guest-menu li:hover > ul li:hover > a { color: var(--az-color-primary, #27ae93); }
    .guest-menu ul ul ul { left: 250px; top: 0; min-width: 250px; }

    /* Slide */
    .slide img { max-width: 100%; display: block; margin: auto; }

    /* Feature desktop — 3 cột */
    .feature { padding: 50px 0; min-height: calc(100vh - 210px); }
    .feature li {
        width: calc(33.333% - 40px);
        margin: 20px;
    }

    /* Warranty desktop */
    .warranty { min-height: calc(100vh - 210px); }
    .warranty .guest-container { display: flex; justify-content: center; }
    .warranty .image { width: 50%; }
    .warranty .info { width: 50%; padding-left: 30px; }
    .warranty .description { width: 1200px; margin: 10px auto; }
    .warranty .list { width: 50%; }

    /* Popup desktop */
    .AZPopupMain h2 { margin: 0; padding: 10px 0 0; line-height: 40px; font-size: 26px; text-align: center; }
    .AZPopupMain p { margin: 0; line-height: 30px; font-size: 16px; }
    .AZPopupMain div { margin: 15px 0; display: flex; justify-content: space-between; }
    .AZPopupMain label {
        width: 160px !important; height: 40px;
        line-height: 1.5; font-size: 16px;
        display: inline-flex; justify-content: left; align-items: center;
    }
    .AZPopupMain input[type="text"], .AZPopupMain input[type="number"], .AZPopupMain select {
        width: calc(100% - 190px) !important; height: 40px !important;
        margin: 0 15px !important; padding: 0 10px !important;
        display: inline-block; vertical-align: top;
    }
    .AZPopupMain.lookup h2 { padding-top: 20px; }
    .AZPopupMain.lookup input[type="text"] {
        width: 350px !important; margin: 10px auto !important;
        text-align: center !important; display: block !important;
    }
    .AZPopupMain.activation button { height: 50px; line-height: 50px; margin: 20px auto; }

    /* Intro desktop */
    .intro { width: 100%; min-height: calc(100vh - 240px); }
    .intro .list { width: 300px; margin: 0; padding: 10px 0 0; display: inline-block; vertical-align: top; list-style: none; }
    .intro .list li {
        line-height: 35px; margin: 3px 0 0; padding: 0 15px;
        border-bottom: 1px solid var(--az-border-color, #E1E1E1);
        color: var(--az-text-main, #101C2C);
        text-transform: uppercase; position: relative;
    }
    .intro .list li a { display: block; }
    .intro .detail { width: calc(100% - 350px); margin: 10px 0 10px 30px; display: inline-block; vertical-align: top; }

    /* Support desktop */
    .support { min-height: calc(100vh - 260px); }
    .support > h1 { height: 40px; line-height: 40px; }
    .support .filter select { width: 220px; margin-right: 10px; padding: 0 15px; }
    .support .filter input[type="text"] { width: 300px; margin-right: 10px; padding: 0 15px; }
    .support .filter button { width: auto; }
    .support ul { margin: 0 0 15px; padding: 0; display: flex; flex-wrap: wrap; }
    .support li { width: calc(33% - 52px); height: 125px; margin: 15px 15px 0; }
    .support li:nth-child(3n+1) { margin-left: 0; }
    .support li:nth-child(3n+3) { margin-right: 0; }

    /* Footer desktop */
    .guest-footer .guest-container { display: flex; justify-content: flex-start; }
    .guest-footer .guest-container > div { width: 33%; padding: 20px; line-height: 1.5; font-size: 15px; }
    .guest-copyright, .copyright { height: 30px; line-height: 1.5; padding: 40px 0; display: flex; justify-content: center; align-items: center; }
    .guest-copyright a, .copyright a { margin-left: 5px; }

    /* ---------- PANEL HEADER (desktop) ---------- */
    .PanelHeader { min-width: 1366px; min-height: 66px; height: auto; }
    .PanelHeaderSep { width: 100%; height: 66px; }
    .PanelHeader .name {
        width: calc(100% - 80px); line-height: 1.2; margin: 0;
        font-size: 18px; font-weight: bold;
        color: var(--az-text-main);
        display: inline-flex; justify-content: center; align-items: center;
    }

    /* ===== MENU CHÍNH USER (Bọc thêm .PanelHeader để chống ghi đè từ Guest) ===== */
    .PanelHeader .PanelMenu { display: flex; align-items: center; justify-content: flex-start; min-height: 66px; height: auto; flex: 1; }
    .PanelHeader .PanelMenu > ul {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        row-gap: 2px;
        margin: 0;
        padding: 4px 0;
        list-style: none;
        height: auto;
    }

    /* Thẻ li Cấp 1 */
    .PanelHeader .PanelMenu > ul > li { 
        height: auto;
        display: inline-flex;
        align-items: center;
        padding: 0 15px; 
        position: relative; /* Gốc tọa độ cho menu xổ xuống */
    }

    .PanelHeader .PanelMenu > ul > li > a { 
        font-size: 16px; 
        font-weight: 600; 
        text-transform: uppercase; 
        color: #252525; 
        display: flex; 
        align-items: center;
        white-space: nowrap;
        line-height: 1.6;
    }

    /* Hover & Active Cấp 1 */
    .PanelHeader .PanelMenu > ul > li:hover > a, 
    .PanelHeader .PanelMenu > ul > li.on > a { 
        color: #0097FB !important; 
    }

    /* Thanh gạch dưới màu xanh khi hover (thay thế border-bottom để không bị giật layout) */
    .PanelHeader .PanelMenu > ul > li::after {
        content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px;
        background-color: transparent; transition: background-color 0.2s;
    }
    .PanelHeader .PanelMenu > ul > li:hover::after,
    .PanelHeader .PanelMenu > ul > li.on::after {
        background-color: #0097FB;
    }

    .PanelHeader .PanelMenu li i { margin-left: 5px; float: right; }
    .PanelHeader .PanelMenu li a img { max-width: 30px; max-height: 30px; margin-right: 5px; display: inline-block; vertical-align: sub; }

    /* ===== DROPDOWN CẤP 1 (Giữ nguyên bóng đổ đậm) ===== */
    .PanelHeader .PanelMenu ul ul { 
        position: absolute; 
        top: 100%; /* Sát mép dưới Header */
        left: 0; 
        margin: 0; padding: 0;
        background-color: white; 
        display: none; 
        box-shadow: 0 0 8px rgba(0,0,0,0.6); 
        z-index: 999; 
        min-width: 250px;
        list-style: none;
    }
    .PanelHeader .PanelMenu li:hover > ul { display: block; }

    /* ===== ITEM TRONG DROPDOWN ===== */
    .PanelHeader .PanelMenu ul ul li { 
        width: 250px; 
        padding: 0; 
        margin: 0;
        text-align: left; 
        background-color: white; 
        border-bottom: none;
        position: relative;
    }
    .PanelHeader .PanelMenu ul ul li a { 
        line-height: 30px;
        padding: 5px 15px; 
        font-size: 16px; 
        font-weight: 500; 
        text-transform: initial; 
        color: #212121; 
        display: block;
    }
    .PanelHeader .PanelMenu ul ul li a img { width: 20px; max-height: 20px; margin-right: 10px; display: inline-block; vertical-align: sub; }

    .PanelHeader .PanelMenu ul ul li:hover { background-color: #0097FB !important; }
    .PanelHeader .PanelMenu ul ul li:hover > a { color: white !important; }

    /* ===== DROPDOWN CẤP 2 TRỞ ĐI ===== */
    .PanelHeader .PanelMenu ul ul ul { left: 250px; top: 0; }

    /* ===== LOGIC REVERSE (ĐỔ MENU SANG TRÁI) ===== */
    .PanelHeader .PanelMenu ul.reverse { left: unset !important; right: 0 !important; }
    .PanelHeader .PanelMenu ul.reverse ul { left: unset !important; right: 250px !important; }

    /* Header menu phải (notify, profile) */
    /* Bảo vệ Menu Công cụ bên phải khỏi Guest CSS */
    .PanelHeader ul.menu {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 15px !important;
        list-style: none !important;
        background: transparent !important;
        height: 100%;
    }

    .PanelHeader ul.menu > li {
        position: relative;
        display: inline-flex;
        align-items: center;
        height: 100%;
        margin: 0;
        padding: 0 10px;
    }
    .PanelHeader ul.menu > li a { font-size: var(--font-size); display: block; position: relative; color: var(--az-text-main); }
    .PanelHeader ul.menu > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    .PanelHeader ul.menu > li i { padding: 20px 10px 0; font-size: 24px; color: var(--az-text-muted); transition: .3s ease; }
    .PanelHeader ul.menu > li i:hover { color: var(--az-text-main); }
    .PanelHeader ul.menu > li .notify-link i {
        padding: 0;
        font-size: 2rem;
    }
    .PanelHeader ul.menu > li .notify-link .badge {
        width: 1.125rem;
        height: 1.125rem;
        line-height: 1.125rem;
        font-size: 0.625rem;
        top: 0;
        right: 0;
        text-align: center;
        background-color: var(--az-danger-text, #b10058);
        border-radius: 50%; color: #fff;
        position: absolute;
    }
    .PanelHeader ul.menu .personimage { width: 40px; height: 40px; border-radius: 50%; margin: 0; display: block; }
    .PanelHeader ul.menu > li .name { height: 40px; line-height: 40px; margin: 0; color: var(--az-text-main); font-size: 16px; font-weight: bold; display: inline-block; vertical-align: top; }
    .PanelHeader ul.menu > li ul {
        min-width: 200px; margin: 0; padding: 0;
        position: absolute; top: 50px; right: 0;
        background-color: var(--az-bg-surface);
        border: 1px solid var(--az-border-color);
        border-radius: 2px;
        box-shadow: var(--az-shadow-lg, 0 2px 15px rgba(0,0,0,.175));
        display: none;
    }
    .PanelHeader ul.menu > li:hover > ul { display: block; }
    .PanelHeader ul.menu > li ul li { min-height: 2.5rem; line-height: 2.5rem; margin: 0; padding: 0 10px; list-style: none; color: var(--az-text-main); }
    .PanelHeader ul.menu > li ul li:hover { background-color: var(--az-bg-surface-hover, #F4F4F4); }
    .PanelHeader ul.menu > li ul li.divider { min-height: unset; height: 1px; margin: 4px 0; background-color: var(--az-border-color, rgba(33,33,33,.1)); overflow: hidden; }
    .PanelHeader ul.menu ul.sub .image img { max-width: 25px; max-height: 25px; margin: 0; padding: 0; border-radius: 0; }
    .PanelHeader ul.menu ul.sub .name { max-width: 200px; height: 2.5rem; line-height: 2.5rem; margin: 0; color: var(--az-text-main); font-size: var(--font-size); font-weight: 400; text-transform: unset; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    
    /* ===== MENU PROFILE DROP DOWN ===== */
    .PanelHeader ul.menu > li .profile-dropdown {
        position: absolute; 
        top: 100%; 
        right: 0; 
        min-width: 220px; 
        box-shadow: var(--az-shadow-lg, 0 4px 15px rgba(0,0,0,0.15)); 
        background: var(--az-bg-surface, #fff); 
        border-radius: 4px; 
        display: none; /* Ẩn bằng CSS, dễ dàng bị đè bởi hover */
        z-index: 1000;
    }

    /* HIỂN THỊ KHI HOVER */
    .PanelHeader ul.menu > li:hover .profile-dropdown { 
        display: block; 
    }

    /* CÂY CẦU TÀNG HÌNH CHỐNG MẤT HOVER */
    /* Tạo một khối vô hình cao 15px lấp đầy khoảng trống "margin-top: 15px" */
    .PanelHeader ul.menu > li .profile-dropdown::before {
        content: "";
        position: absolute;
        top: -15px; /* Kéo ngược lên trên 15px */
        left: 0;
        width: 100%;
        height: 15px;
        background: transparent; 
    }

    /* Định dạng hover cho các mục bên trong menu (nếu bạn chưa có) */
    .PanelHeader ul.menu > li .profile-dropdown li a {
        transition: background-color 0.2s;
    }
    .PanelHeader ul.menu > li .profile-dropdown li:hover {
        background-color: var(--az-bg-surface-hover, #f0f0f0);
    }

    /* Panel Notify desktop */
    .PanelNotify .header {
        width: 100%; height: 40px; line-height: 40px;
        margin-bottom: 5px; color: var(--az-text-main);
        background-color: var(--az-bg-surface);
        border-bottom: 1px solid var(--az-border-color);
        font-weight: 500; font-size: 16px;
        display: block; position: sticky !important; top: 0; left: 0; z-index: 10;
    }
    .PanelNotify .item {
        width: 100%; padding: 5px 15px !important;
        line-height: 1.5 !important; font-size: 12px;
        color: var(--az-text-muted);
        border-bottom: 1px solid var(--az-border-color);
        display: block; position: relative;
    }
    .PanelNotify .item:last-child { border-bottom: 0; }
    .PanelNotify .item.empty { height: 50px; line-height: 50px; padding: 50px 15px; text-align: center; color: var(--az-text-muted); border: 0 !important; background-color: var(--az-bg-surface) !important; display: flex; align-items: center; }

    /* Panel Home desktop */
    .PanelHome li { width: 30%; margin: 20px; padding: 0 20px 20px; }

    /* Cart Nav desktop */
    .PanelMain .cartnav { width: 100%; margin: auto; padding: 10px 10px 400px; display: flex; justify-content: center; }
    .PanelMain .cartnav .status { width: calc(19%); height: 50px; padding-right: 15px; border-bottom: 1px solid var(--az-info-text, #1B89A5); position: relative; display: inline-block; }
    .PanelMain .cartnav3 .status { width: calc(33% - 50px); }
    .PanelMain .cartnav4 .status { width: calc(25% - 50px); }
    .PanelMain .cartnav .status:last-child { width: 150px; border-bottom: 0; }
    .PanelMain .cartnav .status label { margin-left: -10px; font-size: 17px; font-weight: 600; color: var(--az-text-main); }
    .PanelMain .cartnav .status span { margin: 0; padding: 0; line-height: 25px; color: var(--az-success-text, green); font-size: 14px; font-weight: 500; position: absolute; top: 25px; left: 15px; }
    .PanelMain .cartnav .status button { width: 20px; height: 20px; background-color: var(--az-bg-surface); border: 1px solid var(--az-info-text, #1B89A5); border-radius: 50%; position: absolute; bottom: -10px; left: -10px; z-index: 99; }
    .PanelMain .cartnav .status button.click { cursor: pointer; transition: all .3s; }
    .PanelMain .cartnav .status button.click:hover { width: 30px; height: 30px; bottom: -16px; left: -16px; background-color: var(--az-info-text, #1B89A5); }
    .PanelMain .cartnav a.statuscontent, h1 > a.statuscontent, h2 > a.statuscontent {
        margin: 0 0 5px 0; padding: 5px 10px; line-height: 20px;
        border-radius: 10px; font-size: 14px;
        background-color: var(--az-warning-bg, yellow);
        color: var(--az-warning-text, #212121);
        border: 1px solid var(--az-warning-border, transparent);
        float: right;
    }

    /* Book / minus-plus desktop */
    .book input[type="text"] { width: calc(100% - 40px); }
    .minus, .plus { width: 20px; }

    /* Panel Footer desktop */
    .PanelFooter { height: 40px; line-height: 40px; margin: 0 15px 15px; }

    /* Error 404 desktop */
    .error404 { margin: 130px auto 15px; position: relative; width: 420px; }
    .error404 .title { margin: 30px auto 0; }
}


/* =============================================================================
 * 3. MOBILE override (@media max-width: 768px)
 * ============================================================================= */
@media screen and (max-width: 768px) {
    .guest-container { width: calc(100% - 20px); margin: 0 10px; padding: 0; display: inline-block; }
    .hotline { width: 100%; margin-top: 20px; }
    .video { width: 800px; height: 600px; margin: auto; }
    .video360 { width: 600px; height: 600px; margin: auto; }

    /* Call button float */
    a.call {
        display: block; position: fixed; left: 5px; bottom: 5px;
        height: 60px; width: 60px;
        background: #46C11E url(images/call.png) center / 35px no-repeat;
        color: #fff; font-size: 35px; line-height: 44px;
        text-align: center; border-radius: 100%; z-index: 99;
    }

    .nav { padding: 15px 0; }
    .breadcrumb { line-height: 1.5; }
    .breadcrumb li { margin: 0 5px; }

    /* Header mobile */
    .guest-header {
        width: 100%; height: 55px;
        background-color: var(--az-bg-surface, #fff);
        box-shadow: var(--az-shadow-sm, 0 0 5px 0 rgba(1,3,4,.19));
        position: fixed; top: 0; left: 0; z-index: 9000;
        border-bottom: 1px solid var(--az-border-color-subtle, transparent);
    }
    .guest-header .guest-container { overflow-x: hidden; }
    .guest-header .logo {
        max-width: 55px; height: 55px; display: inline-flex;
        justify-content: left; align-items: center;
        position: absolute; top: 0; left: 0;
    }
    .guest-header .logo img { max-width: 50px; max-height: 45px; margin: 5px; }
    .guest-header h2 {
        height: 55px; line-height: 55px;
        font-size: 18px; font-weight: bold;
        margin: 0 55px; width: calc(100% - 110px); padding: 0;
        color: var(--az-text-main, #101C2C);
        text-align: center;
    }
    .guest-header i.fa-bars {
        height: 55px; font-size: 24px;
        color: var(--az-text-main, #101C2C);
        position: absolute; top: 16px; right: 10px;
    }
    .guest-header .login, .guest-header .phone { display: none; }
    .guest-header .theme-toggle-guest {
        position: absolute; top: 10px; right: 50px;
        width: 36px; height: 36px; font-size: 18px;
        border-radius: 50%;
        border: 1px solid var(--az-border-color, rgba(0,0,0,.15));
        z-index: 9001;
    }
    .PanelHeader .tools .tool-notify .notify-link {
        width: 2rem;
        height: 2rem;
    }
    .PanelHeader .tools .tool-notify .notify-link i {
        padding: 0;
        font-size: 1.375rem;
    }
    .PanelHeader .tools .tool-notify .notify-link .badge {
        top: 0;
        right: 0;
    }
    .headersep { width: 100%; height: 55px; background-color: var(--az-bg-surface, #fff); display: inline-block; }

    /* Menu mobile (slide-in) */
    .guest-menu {
        width: 100vw; height: 100%;
        position: fixed; top: 0; left: 100vw;
        background-color: var(--az-bg-surface, #fff);
        transition: all .3s linear;
        z-index: 9001;
    }
    .guest-menu.active { left: 0; }
    .guest-menu .logo {
        width: calc(100% - 80px); height: 55px;
        display: inline-flex; justify-content: left; align-items: center;
    }
    .guest-menu .logo img { max-height: 35px; }
    .guest-menu i.fa-times {
        height: 55px; font-size: 24px; float: right;
        color: var(--az-text-main, #101C2C);
        display: inline-flex; align-items: center; justify-content: right;
    }
    .guest-menu ul {
        margin: 0; padding: 0;
        border-top: 1px solid var(--az-color-primary, #005FDB);
        list-style: none;
    }
    .guest-menu ul li { line-height: 18px; padding: 10px; margin: 0; }
    .guest-menu ul li:last-child { border-right: 0; padding-bottom: 0; }
    .guest-menu ul li a {
        font-size: 18px; font-weight: 500; line-height: 25px;
        color: var(--az-text-main, #101C2C);
        transition: all .25s ease-in-out;
    }
    .guest-menu > ul > li:hover > a { color: var(--az-color-primary, #0FBF61); }
    .guest-menu ul li img { height: 25px; margin-right: 8px; float: left; }
    .guest-menu ul li i { font-size: 22px; margin-right: 12px; }
    .guest-menu .button {
        display: block !important; margin: 10px; padding: 0 20px;
        height: 50px; line-height: 48px;
        font-size: 18px; border: 0;
        color: #fff !important;
    }

    /* Feature mobile — 1 cột */
    .feature { padding: 0; }
    .feature li { 
        width: calc(100% - 20px);
        margin: 10px; 
        padding: 20px; 
        box-sizing: border-box;
    }
    .feature li p { font-size: 14px; }

    /* Warranty mobile */
    .warranty { min-height: calc(100vh - 100px); }
    .warranty .guest-container { width: 100%; margin: 0; }
    .warranty .image { width: 100%; }
    .warranty .info { width: calc(100% - 40px); margin: 10px 20px; }
    .warranty .info h1 { text-transform: none; }
    .warranty .description { margin: 10px; }
    .warranty .description table { width: 100% !important; }
    .warranty .list { width: calc(100% - 20px); margin: 10px; }
    .warranty .list h1 { font-size: 24px; }
    .warranty .notfound { width: 100%; margin: 50px auto; min-height: 550px; }
    .warranty .slick-arrow { display: none !important; }

    /* Popup mobile */
    .AZPopupMain { overflow-y: auto; overflow-x: hidden; }
    .AZPopupMain h2 { margin: 30px 0 10px; padding: 0; line-height: 1.2; font-size: 18px; }
    .AZPopupMain p { line-height: 1.2; font-size: 14px; }
    .AZPopupMain div { margin: 0; padding: 0; display: block; }
    .AZPopupMain label {
        width: 100% !important; height: 2.5rem !important;
        line-height: 2.5rem !important; font-size: 16px !important;
        display: inline-block !important; vertical-align: top !important;
    }
    .AZPopupMain input[type="text"], .AZPopupMain input[type="number"], .AZPopupMain select {
        width: 100% !important; height: 2.5rem !important;
        margin: 0 !important; padding: 0 10px !important;
    }
    .AZPopupMain span { height: 30px; line-height: 30px; font-size: 14px; font-weight: 500; }
    .AZPopupMain button { margin: 15px auto; }
    .AZPopupMain.lookup input[type="text"] { margin: 15px 0 !important; }
    .AZPopupMain.activation button { height: 50px; line-height: 50px; margin: 20px auto; }

    /* Intro mobile */
    .intro { min-height: calc(100vh - 60px); }
    .intro .guest-container { display: flex; flex-direction: column-reverse; margin: 10px; }
    .intro ul.list { margin: 0; padding: 0; list-style: none; }
    .intro ul.list li { margin: 0; padding: 0; position: relative; }
    .intro ul.list li a {
        height: 35px; line-height: 35px;
        text-indent: 10px;
        border-top: 1px solid var(--az-border-color, #E1E1E1);
        text-transform: uppercase; display: block;
    }
    .intro ul.list li:first-child a { margin-top: 0; border-top: 0; }
    .intro ul.list li a:hover {
        background-color: var(--az-color-primary, #0FBF61);
        color: var(--az-text-on-primary, #fff);
    }
    .intro ul.list > img, .intro ul.list > iframe { width: 300px; margin: 20px 0; }
    .intro .detail * { line-height: 1.5; font-size: 16px !important; }
    .intro .detail img { max-width: 100% !important; height: auto !important; }

    /* Support mobile */
    .support { min-height: calc(100vh - 60px); }
    .support h1 { height: 40px; line-height: 40px; margin: 10px 0 0; text-align: center; }
    .support .filter select { width: calc(100% - 0.75rem); height: 2.0625rem; line-height: 2.0625rem; margin: 0.625rem 0.3125rem 0.3125rem; padding: 0 0.625rem; font-size: 14px; }
    .support .filter input[type="text"] { width: calc(100% - 2rem); margin: 0.625rem 0.3125rem 0.3125rem; padding: 0 0.625rem; height: 2.0625rem; line-height: 2.0625rem; }
    .support .filter button { width: 150px; margin: 0 auto; display: block; }
    .support ul { margin: 10px; padding: 0; }
    .support li { width: calc(100% - 32px); margin: 0; border-bottom: 0; }
    .support li:last-child { border-bottom: 1px solid var(--az-border-color, #E1E1E1); }

    /* Footer mobile */
    .footer { padding: 10px; }
    .footer div { line-height: 1.5; font-size: 15px; }
    .guest-copyright, .copyright { height: 30px; line-height: 30px; padding: 40px 0 100px; }

    /* Scanner inline input */
    input[type="text"] + .scanner {
        font-size: 22px; margin-left: -35px !important;
        display: inline !important; vertical-align: middle;
        position: relative;
    }

    /* Theme toggle 3-button row (guest mobile menu) — tương tự .PanelMenu */
    .guest-menu .theme-toggle {
        display: flex; align-items: center; gap: 8px;
        padding: 12px 10px;
        border-top: 1px solid var(--az-border-color);
    }
    .guest-menu .theme-toggle button {
        flex: 1; padding: 8px 10px;
        background: var(--az-bg-surface-alt);
        color: var(--az-text-main);
        border: 1px solid var(--az-border-color);
        border-radius: 6px; cursor: pointer; font-weight: 500;
        font-size: 13px;
    }
    .guest-menu .theme-toggle button.active {
        background: var(--az-color-primary);
        color: var(--az-text-on-primary);
        border-color: var(--az-color-primary);
    }
    .guest-menu .theme-toggle button i { margin-right: 4px; }

    /* Ẩn nút theme toggle nổi (.theme-toggle-guest) trên mobile — đã chuyển vào menu */
    .theme-toggle-guest { display: none !important; }


    /* ---------- PANEL HEADER (mobile) ---------- */
    .PanelHeader { height: 60px; min-width: 100%; } /* Trả lại chiều rộng chuẩn cho Mobile */
    .PanelHeaderSep { width: 100%; height: 60px; }
    .PanelMenu > ul { display: block; gap: 0; height: calc(100% - 60px); padding-bottom: 10rem !important; overflow-y: auto; }

    /* Panel Menu mobile (slide-in) */
    .PanelMenu {
        width: 100vw; height: 100%; margin: 0; padding: 0;
        position: fixed; top: 0; left: 100vw;
        background-color: var(--az-bg-surface);
        transition: all .3s linear;
        z-index: 9001;
    }
    .PanelMenu.active { left: 0; }
    .PanelMenu .logo { width: 100%; height: 60px; padding: 0 10px; font-size: 18px; font-weight: bold; display: flex; align-items: center; border-bottom: 1px solid var(--az-border-color); }
    .PanelMenu .logo img { max-width: 80px; max-height: 2.5rem; margin: 0 10px 0 0; }
    .PanelMenu i.fa-times { font-size: 24px; color: var(--az-text-main); position: absolute; top: 15px; right: 15px; }
    .PanelMenu ul { margin: 0; padding: 0; }
    .PanelMenu li a {
        line-height: 30px; padding: 5px 10px;
        font-size: 16px; color: var(--az-text-main);
        font-weight: bold;
        border-bottom: 1px solid var(--az-border-color-subtle);
    }
    .PanelMenu li:last-child a { border-bottom: 0; }
    .PanelMenu li img { width: 25px; max-height: 25px; margin-right: 8px; display: inline-block; vertical-align: sub; }
    .PanelMenu li i { height: 30px; line-height: 30px; margin-right: 8px; }
    .PanelMenu li i.zmdi-chevron-right { float: right; }
    .PanelMenu li > ul { display: none; }
    .PanelMenu li.active > ul { display: block; }
    .PanelMenu li > ul > li > a { text-indent: 15px; font-weight: 500; color: var(--az-text-muted); }
    .PanelMenu li > ul > li > ul > li > a { text-indent: 30px; font-weight: 400; }
    .PanelMenu li > ul > li > ul > li > ul > li > a { text-indent: 45px; font-weight: 400; }

    /* Theme toggle 3-button row (mobile menu) */
    .PanelMenu .theme-toggle {
        display: flex; align-items: center; gap: 8px;
        padding: 12px 10px;
        border-top: 1px solid var(--az-border-color);
    }
    .PanelMenu .theme-toggle button {
        flex: 1; padding: 8px 10px;
        background: var(--az-bg-surface-alt);
        color: var(--az-text-main);
        border: 1px solid var(--az-border-color);
        border-radius: 6px; cursor: pointer; font-weight: 500;
    }
    .PanelMenu .theme-toggle button.active {
        background: var(--az-color-primary);
        color: var(--az-text-on-primary);
        border-color: var(--az-color-primary);
    }

    /* Panel Notify mobile (slide-in) */
    .PanelNotify {
        width: 100vw; height: 100%; margin: 0; padding: 0;
        position: fixed; top: 0; left: 100vw;
        background-color: var(--az-bg-surface);
        color: var(--az-text-main);
        transition: all .3s linear;
        z-index: 9001; overflow-y: auto;
    }
    .PanelNotify.active { left: 0; }
    .PanelNotify li { padding: 0; position: relative; overflow: hidden; }
    .PanelNotify .header {
        width: 100%; height: 40px; line-height: 40px;
        margin-bottom: 5px; text-indent: 15px;
        font-size: var(--font-size-h5); font-weight: 500;
        background-color: var(--az-bg-surface);
        box-shadow: var(--az-shadow-sm);
        display: block; position: sticky; top: 0; z-index: 10;
    }
    .PanelNotify .item {
        width: 100%; padding: 5px 15px; line-height: 1.5;
        border-bottom: 1px solid var(--az-border-color-subtle);
        display: block; position: relative;
    }
    .PanelNotify .item.empty {
        height: 50px; padding: 50px 15px; text-align: center;
        color: var(--az-text-muted);
        background-color: var(--az-bg-surface) !important;
        border: 0 !important;
    }
    
    /* Panel Home mobile */
    .PanelHome { padding: 0; }
    .PanelHome ul { margin: 10px 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-start; }
    .PanelHome li { 
        width: calc(50% - 20px); 
        margin: 10px; 
        padding: 10px; 
        box-sizing: border-box; /* Khóa kích thước, chống phình to do padding */
        display: flex; 
        flex-direction: column; 
        align-items: center; /* Căn giữa nội dung thẻ */
    }
    .PanelHome li h3 { font-size: 15px; text-align: center; }

    /* Panel Main mobile */
    .PanelMain { padding: 10px; margin-bottom: 100px; }
    .PanelMain .statuscontent {
        margin: 0 0 5px 0; padding: 5px 10px; line-height: 20px;
        border-radius: 10px; font-size: var(--font-size);
        background-color: var(--az-warning-bg, yellow);
        color: var(--az-warning-text, #212121);
        border: 1px solid var(--az-warning-border, transparent);
        float: right;
    }

    /* Book / minus-plus mobile */
    .book input[type="text"] { width: calc(100% - 60px); }
    .minus, .plus { width: 30px; }

    /* Panel Footer mobile */
    .PanelFooter { height: 40px; line-height: 40px; margin: 0 15px 50px; font-size: var(--font-size); }

    /* Error 404 mobile */
    .error404 { width: 100%; height: 100%; padding: 50px; display: flex; align-items: center; justify-content: center; }
}


/* =============================================================================
 * 4. DARK MODE overlay (html.az-dark) — chỉ override những chỗ cần
 * ============================================================================= */
html.az-dark .guest-header { background-color: var(--az-bg-surface-alt) !important; border-bottom: 1px solid var(--az-border-color); }
html.az-dark .guest-header h2,
html.az-dark .guest-header .phone,
html.az-dark .guest-header .login     { color: var(--az-text-main) !important; border-color: var(--az-border-color-strong) !important; }
html.az-dark .guest-header i.fa-bars  { color: var(--az-text-main) !important; }
html.az-dark .headersep         { background-color: var(--az-bg-surface) !important; }

html.az-dark .nav               { background-color: var(--az-bg-surface-alt) !important; color: var(--az-text-muted); }
html.az-dark .breadcrumb        { color: var(--az-text-muted) !important; }
html.az-dark .breadcrumb li:last-child { color: var(--az-text-main) !important; }

html.az-dark .guest-menu        { background-color: var(--az-bg-surface) !important; }
html.az-dark .guest-menu ul li a { color: var(--az-text-main) !important; }
html.az-dark .guest-menu ul li:hover a { color: var(--az-color-primary) !important; }
html.az-dark .guest-menu ul > li > a.active,
html.az-dark .guest-menu ul > li.active > a {
    color: var(--az-color-primary) !important;
}
html.az-dark .guest-menu li > ul {
    background-color: var(--az-bg-surface) !important;
    box-shadow: var(--az-shadow-lg) !important;
    border: 1px solid var(--az-border-color);
}
html.az-dark .guest-menu li:hover > ul li { background-color: var(--az-bg-surface) !important; }
html.az-dark .guest-menu li:hover > ul li a { color: var(--az-text-muted) !important; }
html.az-dark .guest-menu li:hover > ul li:hover { background-color: var(--az-bg-surface-hover) !important; }
html.az-dark .guest-menu ul    { border-top-color: var(--az-border-color) !important; }

html.az-dark .description       { color: var(--az-text-main); }
html.az-dark .description a     { color: var(--az-text-link); }

html.az-dark .feature h2        { color: var(--az-text-main); }
html.az-dark .feature h2 b      { color: var(--az-color-primary); }
html.az-dark .feature li {
    background-color: var(--az-bg-surface) !important;
    color: var(--az-text-main);
    border: 1px solid var(--az-border-color-subtle);
}

html.az-dark .warranty          { background-color: var(--az-bg-body) !important; }
html.az-dark .warranty .info,
html.az-dark .warranty .list,
html.az-dark .warranty .notfound h1 { color: var(--az-text-main) !important; }
html.az-dark .warranty .info a.button,
html.az-dark .warranty .notfound a.button {
    background-color: var(--az-color-primary) !important;
    border-color: var(--az-color-primary) !important;
    color: var(--az-text-on-primary) !important;
}
html.az-dark .warranty .info a.button:hover,
html.az-dark .warranty .notfound a.button:hover {
    background-color: var(--az-danger-text) !important;
    border-color: var(--az-danger-text) !important;
}
html.az-dark .warranty .infodetail {
    background-color: var(--az-bg-surface) !important;
    border: 1px solid var(--az-border-color);
    box-shadow: var(--az-shadow-lg) !important;
}
html.az-dark .warranty .infodetail * { color: var(--az-text-main) !important; }
html.az-dark .warranty .infodetail a.button { background-color: var(--az-color-primary) !important; color: var(--az-text-on-primary) !important; }
html.az-dark .warranty .list table,
html.az-dark .warranty .list td,
html.az-dark .warranty .list th {
    border-color: var(--az-border-color) !important;
    background-color: var(--az-bg-surface);
    color: var(--az-text-main);
}

html.az-dark .AZPopupMain       { background-color: var(--az-bg-surface) !important; color: var(--az-text-main); }
html.az-dark .AZPopupMain h2,
html.az-dark .AZPopupMain p,
html.az-dark .AZPopupMain label,
html.az-dark .AZPopupMain span,
html.az-dark .AZPopupMain .result { color: var(--az-text-main) !important; }
html.az-dark .AZPopupMain input[type="text"],
html.az-dark .AZPopupMain input[type="number"],
html.az-dark .AZPopupMain select {
    background-color: var(--az-bg-surface-alt) !important;
    color: var(--az-text-main) !important;
    border-color: var(--az-border-color) !important;
}
html.az-dark .AZPopupMain button { background-color: var(--az-color-primary) !important; border-color: var(--az-color-primary) !important; color: var(--az-text-on-primary) !important; }
html.az-dark .AZPopupMain button:hover { background-color: var(--az-danger-text) !important; border-color: var(--az-danger-text) !important; }

html.az-dark .intro .list li,
html.az-dark .intro ul.list li  { color: var(--az-text-main); }
html.az-dark .intro .list li,
html.az-dark .intro ul.list li a{ border-color: var(--az-border-color); }
html.az-dark .intro ul.list li a:hover { background-color: var(--az-color-primary); color: var(--az-text-on-primary); }
html.az-dark .intro .detail *   { color: var(--az-text-main); }

html.az-dark .support h1        { color: var(--az-text-main) !important; }
html.az-dark .support .filter select,
html.az-dark .support .filter input[type="text"] {
    background-color: var(--az-bg-surface-alt) !important;
    color: var(--az-text-main) !important;
    border-color: var(--az-border-color) !important;
}
html.az-dark .support .filter button { background-color: var(--az-color-primary) !important; }
html.az-dark .support li        { background-color: var(--az-bg-surface) !important; border-color: var(--az-border-color) !important; }
html.az-dark .support li span,
html.az-dark .support li a      { color: var(--az-text-muted) !important; }

html.az-dark .guest-footer { background: var(--az-bg-surface-alt) !important; color: var(--az-text-muted); }
html.az-dark .guest-footer .guest-container h2 { color: var(--az-text-main); }
html.az-dark .guest-copyright { background: var(--az-bg-surface) !important; color: var(--az-text-muted); border-top: 1px solid var(--az-border-color); }
html.az-dark .guest-copyright a{ color: var(--az-warning-text); }

html.az-dark input[type="text"],
html.az-dark input[type="number"],
html.az-dark input[type="password"],
html.az-dark select,
html.az-dark textarea {
    background-color: var(--az-bg-surface-alt);
    color: var(--az-text-main);
    border-color: var(--az-border-color);
}

/* Theme toggle button dark mode */
html.az-dark .theme-toggle-guest { border-color: var(--az-border-color) !important; color: var(--az-text-main) !important; }
html.az-dark .theme-toggle-guest:hover { background-color: var(--az-bg-surface-hover) !important; }
html.az-dark .guest-menu-overlay { background: rgba(0, 0, 0, .5); }


/* =============================================================================
 * DARK MODE override cho logged-in (Panel*)
 * ============================================================================= */
html.az-dark .PanelLogin           { background-color: var(--az-bg-body) !important; }
html.az-dark .PanelLogin .main     { background-color: var(--az-bg-surface) !important; border-color: var(--az-border-color) !important; box-shadow: var(--az-shadow-md) !important; }
html.az-dark .PanelLogin h1        { color: var(--az-text-main) !important; }
html.az-dark .PanelLogin input[type="text"],
html.az-dark .PanelLogin input[type="password"] {
    background-color: var(--az-bg-surface-alt) !important;
    color: var(--az-text-main) !important;
    border-color: var(--az-border-color) !important;
}
html.az-dark .PanelLogin a         { background-color: var(--az-color-primary) !important; color: var(--az-text-on-primary) !important; }
html.az-dark .PanelLogin a:hover   { background-color: var(--az-color-primary-hover) !important; }

html.az-dark .PanelHeader {
    background-color: var(--az-bg-surface) !important;
    border-bottom: 1px solid var(--az-border-color) !important;
}
html.az-dark .PanelHeader .name    { color: var(--az-text-main) !important; }

/* Panel Menu chính */
html.az-dark .PanelMenu li a       { color: var(--az-text-main) !important; }
html.az-dark .PanelMenu li:hover a { color: var(--az-color-primary) !important; }
html.az-dark .PanelMenu li.on      { border-bottom-color: var(--az-color-primary) !important; }
html.az-dark .PanelMenu li > ul {background-color: var(--az-bg-surface) !important}
html.az-dark .PanelMenu li:hover > ul li          { background-color: var(--az-bg-surface) !important; }
html.az-dark .PanelMenu li:hover > ul li a        { color: var(--az-text-main) !important; }
html.az-dark .PanelMenu li:hover > ul li:hover    { background-color: var(--az-color-primary) !important; }
html.az-dark .PanelMenu li:hover > ul li:hover > a{ color: var(--az-text-on-primary) !important; }

/* Header menu phải */
html.az-dark .PanelHeader .menu > li a            { color: var(--az-text-main) !important; }
html.az-dark .PanelHeader .menu > li i            { color: var(--az-text-muted); }
html.az-dark .PanelHeader .menu > li i:hover      { color: var(--az-text-main); }
html.az-dark .PanelHeader .menu > li .badge       { background-color: var(--az-danger-text) !important; color: #fff !important; }
html.az-dark .PanelHeader .menu > li ul {
    background-color: var(--az-bg-surface) !important;
    border: 1px solid var(--az-border-color);
    box-shadow: var(--az-shadow-lg) !important;
}
html.az-dark .PanelHeader .menu > li ul li       { color: var(--az-text-main); }
html.az-dark .PanelHeader .menu > li ul li:hover { background-color: var(--az-bg-surface-hover) !important; }
html.az-dark .PanelHeader .menu > li ul li.divider { background-color: var(--az-border-color) !important; }

/* Panel Notify */
html.az-dark .PanelNotify .header {
    background-color: var(--az-bg-surface) !important;
    color: var(--az-text-main) !important;
    border-bottom: 1px solid var(--az-border-color) !important;
}
html.az-dark .PanelNotify .item {
    color: var(--az-text-muted) !important;
    border-bottom: 1px solid var(--az-border-color-subtle) !important;
}
html.az-dark .PanelNotify .item.empty {
    color: var(--az-text-muted) !important;
    background-color: var(--az-bg-surface) !important;
}

/* Panel Home */
html.az-dark .PanelHome h2   { color: var(--az-text-main) !important; }
html.az-dark .PanelHome h2 b { color: var(--az-color-primary) !important; }
html.az-dark .PanelHome li {
    background-color: var(--az-bg-surface) !important;
    color: var(--az-text-main) !important;
    border: 1px solid var(--az-border-color-subtle);
}

/* Steps / CartNav */
html.az-dark .stepsstatus,
html.az-dark .stepsstatus.column > div,
html.az-dark .PanelMain .cartnav .status          { border-color: var(--az-info-text) !important; }
html.az-dark .stepsstatus div,
html.az-dark .stepsstatus span,
html.az-dark .PanelMain .cartnav .status label   { color: var(--az-text-main) !important; }
html.az-dark .stepsstatus button,
html.az-dark .PanelMain .cartnav .status button {
    background-color: var(--az-bg-surface) !important;
    border-color: var(--az-info-text) !important;
}
html.az-dark .stepsstatus a                        { color: var(--az-success-text) !important; }
html.az-dark .PanelMain .cartnav a.statuscontent,
html.az-dark h1 > a.statuscontent,
html.az-dark h2 > a.statuscontent,
html.az-dark .PanelMain .statuscontent {
    background-color: var(--az-warning-bg) !important;
    color: var(--az-warning-text) !important;
    border: 1px solid var(--az-warning-border);
}

/* Panel Print */
html.az-dark .PanelPrint .PanelSetup              { border-left-color: var(--az-border-color) !important; }
html.az-dark .PanelPrint .PanelSetup.active       { background-color: var(--az-bg-overlay) !important; }
html.az-dark .PanelPrint .PanelSetup .PanelMain   { background-color: var(--az-bg-surface) !important; color: var(--az-text-main); }
html.az-dark .PanelPrint .PanelButton a {
    background-color: var(--az-bg-surface) !important;
    box-shadow: var(--az-shadow-md) !important;
}

/* Book / minus-plus */
html.az-dark .book input[type="text"] {
    background-color: var(--az-bg-surface) !important;
    color: var(--az-text-main) !important;
    border-color: var(--az-border-color) !important;
}
html.az-dark .minus, html.az-dark .plus {
    background-color: var(--az-bg-surface) !important;
    color: var(--az-text-muted) !important;
    border-color: var(--az-border-color) !important;
}
html.az-dark .minus:hover, html.az-dark .plus:hover { background-color: var(--az-bg-surface-hover) !important; }

/* Footer / 404 */
html.az-dark .PanelFooter   { color: var(--az-text-subtle) !important; }
html.az-dark .error404 .title,
html.az-dark .error404 .title2 { color: var(--az-text-main) !important; }

/* AZ Notify toast */
html.az-dark .AZNotify       { background-color: var(--az-bg-surface); color: var(--az-text-main); border-color: var(--az-border-color); }
html.az-dark .AZNotifyTitle  { color: var(--az-text-main) !important; }
html.az-dark .AZNotifyBody   { color: var(--az-text-muted) !important; }
html.az-dark .AZNotifyMore   { color: var(--az-text-link) !important; }