/* ============================================================
   HÒA NGỮ ĐƯỜNG — root.css
   Tổ chức theo thứ tự:
   1.  CSS Variables & Reset
   2.  Typography & Global
   3.  Topbar
   4.  Header & Brand
   5.  Navigation Menu & Submenu
   6.  Header Actions (Search, Hotline, Lang, Auth)
   7.  Buttons
   8.  Auth Modal
   9.  User Avatar & Dropdown
   10. Footer
   11. Responsive — Tablet (≤1199px)
   12. Responsive — Mobile Large (≤900px)
   13. Responsive — Mobile Small (≤560px)
   14. Animations
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES & RESET — TRƯỜNG CAO ĐẲNG LAI CHÂU (CLC)
   ============================================================ */
:root {
    --red:        #09549f;   /* Xanh hoàng gia chủ đạo */
    --deep:       #062347;   /* Xanh navy đậm */
    --gold:       #f59e0b;   /* Vàng cam ngọn đuốc tri thức */
    --cream:      #f8fafc;   /* Nền sáng slate nhạt */
    --ink:        #0f172a;   /* Chữ đậm slate */

    /* Màu sắc bổ sung chuẩn giáo dục công lập */
    --red-mid:     #0d63ba;
    --red-dark:    #041d3b;
    --red-light:   #1e88e5;
    --gold-dark:   #d97706;
    --gold-light:  #fbbf24;
    --gold-pale:   #fef3c7;
    --cream-deep:  #f1f5f9;
    --text-dark:   #0f172a;
    --text-body:   #334155;
    --text-muted:  #64748b;
    --border-gold: rgba(245, 158, 11, .35);
    --shadow-red:  rgba(9, 84, 159, .12);

    /* Cấu hình nút floating */
    --fc-size:   48px;
    --fc-r:      12px;
    --fc-mb-h:   64px;
    --fc-z:      9000;
}

* {
    box-sizing: border-box;
}

/* ============================================================
   2. TYPOGRAPHY & GLOBAL
   ============================================================ */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-body);
    background: #f8fafc;
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color .2s ease;
}

/* ============================================================
   3. TOPBAR — CỔNG THÔNG TIN
   ============================================================ */
.topbar {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: linear-gradient(90deg, #052449 0%, #094a8f 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4%;
    font-size: 13px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.topbar-left,
.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-org {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    letter-spacing: .5px;
    color: #ffd870;
}

.topbar-portal {
    font-size: 11.5px;
    letter-spacing: .8px;
    color: rgba(255, 255, 255, .85);
    font-weight: 600;
}

.topbar-sep {
    color: rgba(255, 255, 255, .4);
    font-size: 14px;
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffffff;
    font-size: 12.5px;
}

.topbar-link:hover {
    color: #ffd870;
}

.topbar-link b {
    color: #ffd870;
}

/* Lang switcher */
.lang-switch-top {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .15);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    padding: 2px 4px;
    gap: 3px;
}

.lang-pill-btn {
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    cursor: pointer;
    transition: all .2s;
}

.lang-pill-btn.active {
    background: #ffffff;
    color: #061e38;
    font-weight: 800;
}

/* Header language switcher */
.header-lang-switch {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 20px;
    padding: 2px 3px;
    gap: 2px;
    margin-right: 6px;
}

.header-lang-btn {
    border: none;
    background: transparent;
    padding: 4px 8px;
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: all .2s;
}

.header-lang-btn:hover {
    color: #09549f;
}

.header-lang-btn.active {
    background: #09549f;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(9, 84, 159, .25);
}

/* ============================================================
   4. HEADER & BRAND
   ============================================================ */
.topbar {
    position: fixed;
    z-index: 30;
    top: 0;
    left: 0;
    right: 0;
    height: 42px;
    background: #061e38;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    padding: 0;
}

.topbar-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

.header {
    position: fixed;
    z-index: 29;
    top: 42px;
    left: 0;
    right: 0;
    height: 76px;
    display: flex;
    align-items: center;
    padding: 0;
    background: #ffffff;
    border-bottom: 3px solid #09549f;
    box-shadow: 0 4px 20px rgba(5, 36, 73, .08);
}

.header-inner {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: nowrap;
}

.main-contain {
    margin-top: 118px;
}

@media (max-width: 991px) {
    .main-contain {
        margin-top: 110px;
    }
}

/* Brand */
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
}

.brand-logo-wrap {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-sub-parent {
    font-size: 9.5px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.2;
}

.brand-title {
    font-size: 16px;
    font-weight: 800;
    color: #09549f;
    text-transform: uppercase;
    letter-spacing: .2px;
    line-height: 1.2;
    margin: 1px 0;
}

.brand-sub-code {
    font-size: 9.5px;
    font-weight: 700;
    color: #d97706;
    letter-spacing: .5px;
    line-height: 1.2;
}

/* Button Nộp hồ sơ xét tuyển */
.btn-enroll-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 15px;
    background: linear-gradient(135deg, #09549f 0%, #073567 100%);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(9, 84, 159, .25);
    transition: all .25s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-enroll-action:hover {
    background: linear-gradient(135deg, #0d63ba 0%, #09549f 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(9, 84, 159, .35);
    color: #ffffff;
}


.header-search-btn:hover {
    color: #09549f;
    background: #e2e8f0;
}


/* ============================================================
   5. NAVIGATION MENU & SUBMENU
   ============================================================ */
.menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu > li {
    position: relative;
}

.menu > li > a {
    display: flex;
    align-items: center;
    height: 76px;
    padding: 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    color: #1e293b;
    transition: color .2s ease;
    position: relative;
    white-space: nowrap;
}

.menu > li > a:hover {
    color: #09549f;
}

.menu > li > a .sub-arrow {
    font-size: 10px;
    margin-left: 6px;
    color: #64748b;
    transition: transform .2s ease;
}

.menu > li:hover > a .sub-arrow {
    transform: rotate(180deg);
    color: #09549f;
}

.menu > li > a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: #09549f;
    transform: scaleX(0);
    transition: transform .25s ease;
}

.menu > li:hover > a::after,
.menu > li.active > a::after {
    transform: scaleX(1);
}

/* Submenu */
.submenu {
    position: absolute;
    top: 76px;
    left: 0;
    min-width: 250px;
    background: #ffffff;
    border-radius: 0 0 10px 10px;
    border: 1px solid #e2e8f0;
    border-top: 2px solid #09549f;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .10);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .25s ease;
    z-index: 100;
}

.menu > li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.submenu a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    transition: background .2s, color .2s;
    line-height: 1.4;
}

.submenu a i {
    color: #09549f;
    font-size: 11px;
}

.submenu a:hover {
    background: #f0f7ff;
    color: #09549f;
    padding-left: 22px;
}

/* ============================================================
   6. HEADER ACTIONS (Search, Hotline, Lang Switch, Auth)
   ============================================================ */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* Search icon */
.search {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #09549f;
    transition: all .2s;
}

.search:hover {
    background: #09549f;
    color: #ffffff;
}

/* Hotline button */
.hotline-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 6px;
    background: linear-gradient(135deg, #09549f 0%, #073567 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(9, 84, 159, .25);
    transition: all .25s;
}

.hotline-btn:hover {
    background: linear-gradient(135deg, #0d63ba 0%, #09549f 100%);
    transform: translateY(-2px);
    color: #ffffff;
}

.hotline-btn:hover {
    transform: translateY(-3px);
}

/* Lang switch trong header */
.lang-auth {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid rgba(139, 15, 31, .18);
    border-radius: 999px;
    padding: 4px;
}

.lang-switch button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 8px 10px;
    font-weight: 800;
    color: var(--red);
    cursor: pointer;
    font-size: 12px;
}

.lang-switch button.active {
    background: linear-gradient(135deg, var(--red), #c51d35);
    color: #fff;
}

/* Auth button (icon) */
.auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(139, 15, 31, .18);
    color: var(--red);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

.auth-btn.primary {
    background: linear-gradient(135deg, var(--red), #c51d35);
    color: #fff;
    border: 0;
}

/* Account icon button */
#accountBtn {
    width: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 18px;
}

/* Mobile menu toggle */
.menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(139, 15, 31, .18);
    color: var(--red);
    background: #fff;
    box-shadow: none;
}


/* ============================================================
   7. BUTTONS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--red), #c51d35);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 15px 30px rgba(139, 15, 31, .28);
    transition: .35s;
    border: 0;
    cursor: pointer;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn-outline {
    border: 1px solid rgba(139, 15, 31, .25);
    background: #fff;
    color: var(--red);
    box-shadow: none;
}


/* ============================================================
   8. AUTH MODAL
   ============================================================ */
.auth-modal {
    position: fixed;
    z-index: 999;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(59, 7, 16, .68);
    backdrop-filter: blur(10px);
    padding: 20px;
}

.auth-modal.show {
    display: flex;
}

.auth-box {
    width: min(460px, 100%);
    background: #fff8e9;
    border: 1px solid rgba(215, 170, 69, .45);
    border-radius: 28px;
    box-shadow: 0 35px 90px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: authRise .35s ease both;
}

.auth-head {
    padding: 24px 28px;
    background: linear-gradient(135deg, var(--deep), var(--red));
    color: #fff;
    position: relative;
}

.auth-head h3 {
    margin: 0;
    font-size: 26px;
    color: #ffd870;
}

.auth-close {
    position: absolute;
    right: 18px;
    top: 16px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 18px 24px 0;
}

.auth-tabs button {
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(139, 15, 31, .18);
    background: #fff;
    color: var(--red);
    font-weight: 800;
    cursor: pointer;
}

.auth-tabs button.active {
    background: linear-gradient(135deg, var(--red), #c51d35);
    color: #fff;
}

.auth-form {
    padding: 22px 24px 28px;
    display: none;
}

.auth-form.active {
    display: block;
}

.auth-form input {
    width: 100%;
    height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(139, 15, 31, .16);
    padding: 0 15px;
    margin-bottom: 12px;
    background: #fff;
}

.auth-form .btn {
    width: 100%;
    margin-top: 6px;
}

.auth-note {
    font-size: 12px;
    color: #6a4b4f;
    line-height: 1.6;
    text-align: center;
    margin-top: 12px;
}


/* ============================================================
   9. USER AVATAR & DROPDOWN
   ============================================================ */
.user-avatar-mini {
    width: 41px;
    height: 41px;
    object-fit: cover;
    border: 1px solid rgba(139, 15, 31, .56);
    display: block;
}

.auth-btn-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(139, 15, 31, .18);
    cursor: pointer;
    padding: 0;
    transition: all .2s ease;
}

.auth-btn-avatar:hover {
    border-color: var(--red);
    background-color: rgba(139, 15, 31, .02);
}

.dropdown-menu .dropdown-item:hover {
    background-color: rgba(139, 15, 31, .05);
    color: var(--red) !important;
}

/* Legacy user chip (ẩn, giữ lại cho tương thích) */
.user-chip {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(215, 170, 69, .35);
    color: var(--red);
    font-weight: 800;
    font-size: 13px;
}

.user-chip.show {
    display: flex;
}


/* ============================================================
   10. FOOTER — CỔNG THÔNG TIN TRƯỜNG CAO ĐẲNG LAI CHÂU
   ============================================================ */
.footer,
.site-footer,
.portal-footer {
    position: relative;
    background: #061e38;
    color: #e2e8f0;
    margin-top: 0;
    border-top: 4px solid #f59e0b;
    width: 100%;
    overflow-x: hidden;
}

/* Strip trên cùng của footer */
.footer-top-strip {
    background: #041527;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    padding: 14px 0;
}

.footer-top-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13.5px;
}

.footer-top-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #ffd870;
}

.footer-top-badge i {
    font-size: 16px;
}

.footer-top-hotline {
    color: #ffffff;
}

.footer-top-hotline b {
    color: #ffd870;
    letter-spacing: .5px;
}

/* Lưới cột footer */
.footer-grid {
    position: relative;
    z-index: 1;
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.15fr;
    gap: 36px;
    padding: 48px 15px 36px;
}

/* Cột thương hiệu & thông tin liên hệ */
.footer-brand-wrap {

    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.footer-logo-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    flex-shrink: 0;
}

.footer-logo-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.footer-brand-title {
    display: flex;
    flex-direction: column;
}

.footer-gov {
    font-size: 10px;
    font-weight: 700;
    color: #ffd870;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.footer-school-name {
    font-size: 18px;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: .3px;
    line-height: 1.25;
    margin: 2px 0;
}

.footer-school-sub {
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    letter-spacing: .6px;
}

.footer-intro-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: #94a3b8;
    margin-bottom: 20px;
}

.footer-contact-details {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13.5px;
    color: #cbd5e1;
}

.f-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.f-contact-item i {
    color: #ffd870;
    font-size: 14px;
    margin-top: 3px;
    flex-shrink: 0;
}

.f-contact-item a {
    color: #ffffff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .3);
}

.f-contact-item a:hover {
    color: #ffd870;
}

.footer-social-links {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.footer-social-links a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #ffffff;
    font-size: 14px;
    transition: all .25s;
}

.footer-social-links a:hover {
    background: #09549f;
    color: #ffffff;
    border-color: #09549f;
    transform: translateY(-2px);
}

/* Tiêu đề các cột */
.footer-col-title {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #f59e0b;
    display: inline-block;
    letter-spacing: .3px;
}

.footer-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links-list li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 13.5px;
    transition: all .2s;
}

.footer-links-list li a i {
    font-size: 10px;
    color: #ffd870;
    transition: transform .2s;
}

.footer-links-list li a:hover {
    color: #ffd870;
    padding-left: 4px;
}

.footer-links-list li a:hover i {
    transform: translateX(3px);
}

/* Cột form đăng ký tư vấn */
.footer-sub-text {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 14px;
    line-height: 1.5;
}

.footer-quick-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.footer-input {
    background: rgba(255, 255, 255, .07) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 9px 14px !important;
    font-size: 13.5px !important;
}

.footer-input::placeholder {
    color: #94a3b8 !important;
}

.footer-input:focus {
    border-color: #ffd870 !important;
    background: rgba(255, 255, 255, .12) !important;
    box-shadow: 0 0 0 3px rgba(255, 216, 112, .2) !important;
}

.btn-portal-submit {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    color: #ffffff !important;
    font-weight: 700;
    font-size: 13.5px;
    padding: 10px 16px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all .25s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 12px rgba(217, 119, 6, .35);
}

.btn-portal-submit:hover {
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(217, 119, 6, .45);
    color: #ffffff !important;
}

.footer-quick-links {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.6;
}

.footer-quick-links a {
    color: #cbd5e1;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, .25);
}

.footer-quick-links a:hover {
    color: #ffd870;
}

/* Bottom copyright bar */
.footer-bottom.portal-bottom {
    background: #031020;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 18px 4%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #94a3b8;
}

.footer-copy-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-copy-text b {
    color: #ffffff;
}

.footer-gov-note {
    font-size: 11.5px;
    color: #64748b;
}

.footer-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.badge-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 4px;
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
}

.badge-item i {
    color: #ffd870;
}

/* ============================================================
   REGISTRATION MODAL
   ============================================================ */
.reg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(59,7,16,.55);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s;
}
.reg-modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.reg-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 520px;
    max-height: 92vh;
    overflow-y: auto;
    transform: translateY(28px) scale(.97);
    transition: transform .28s;
    position: relative;
}
.reg-modal-overlay.open .reg-modal {
    transform: translateY(0) scale(1);
}
.reg-modal-head {
    background: linear-gradient(120deg, var(--deep), var(--red));
    color: #fff;
    padding: 28px 28px 22px;
    border-radius: 20px 20px 0 0;
    position: relative;
}
.reg-modal-head .eyebrow {
    width: 70%;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--gold-light);
    text-transform: uppercase;
    display: block;
    margin-bottom: 6px;
}
.reg-modal-head h3 {
    font-size: 22px;
    font-weight: 900;
    margin: 0 0 4px;
}
.reg-modal-head p {
    font-size: 13px;
    opacity: .8;
    margin: 0;
}
.reg-modal-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 34px; height: 34px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.reg-modal-close:hover { background: rgba(255,255,255,.28); }
.reg-modal-body {
    padding: 28px;
}
.reg-form-group {
    margin-bottom: 16px;
}
.reg-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--deep);
    margin-bottom: 6px;
}
.reg-form-group input,
.reg-form-group select,
.reg-form-group textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--border-gold);
    border-radius: 10px;
    font-size: 14px;
    color: var(--ink);
    background: var(--cream-deep);
    transition: border-color .2s;
    font-family: inherit;
}
.reg-form-group input:focus,
.reg-form-group select:focus,
.reg-form-group textarea:focus {
    outline: none;
    border-color: var(--red);
    background: #fff;
}
.reg-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.btn-reg-submit {
    width: 100%;
    background: linear-gradient(90deg, var(--red), var(--red-mid));
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    padding: 14px;
    border-radius: 28px;
    border: none;
    cursor: pointer;
    margin-top: 8px;
    transition: opacity .2s, transform .2s;
    letter-spacing: .3px;
}
.btn-reg-submit:hover { opacity: .88; transform: translateY(-1px); }
.reg-success-msg {
    text-align: center;
    padding: 20px 0 8px;
    display: none;
}
.reg-success-msg .success-icon {
    font-size: 48px;
    color: #27ae60;
    margin-bottom: 12px;
    display: block;
}
.reg-success-msg h4 { color: var(--deep); font-size: 18px; font-weight: 800; margin: 0 0 6px; }
.reg-success-msg p { color: var(--text-muted); font-size: 14px; }
.reg-note {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.reg-note i { color: var(--gold); }


/* ============================================================
   11. RESPONSIVE — TABLET (≤ 1199px)
   ============================================================ */
@media (max-width: 1199.98px) {
    /* Ẩn menu ngang, chỉ hiện khi toggle */
    .menu {
        display: none;
    }

    .menu.navbar-collapse.show,
    .menu.navbar-collapse.collapsing {
        display: flex;
        position: absolute;
        left: 4%;
        right: 4%;
        top: 72px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: calc(100vh - 125px);
        overflow-y: auto;
        padding: 10px 0;
        background: rgba(255, 248, 233, .98);
        border: 1px solid rgba(215, 170, 69, .28);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 22px 50px rgba(59, 7, 16, .14);
    }

    .menu > li > a {
        height: auto;
        padding: 14px 18px;
    }

    /* Submenu dạng accordion */
    .submenu {
        position: static;
        min-width: 100%;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        border-radius: 14px;
        box-shadow: none;
        margin: 0 14px 10px;
    }

    .menu > li:hover .submenu {
        display: none;
    }

    .menu > li.open .submenu {
        display: block;
    }

    /* Ẩn icon search trên tablet */
    .header-actions .search {
        display: none;
    }
}


/* ============================================================
   12. RESPONSIVE — MOBILE LARGE (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {
    /* Topbar: stack thành 2 hàng, giữ lang switch */
    .topbar {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 6px;
    }

    .topbar-left {
        flex-wrap: wrap;
        gap: 6px 14px;
        flex: 1 1 auto;
    }

    /* Giữ topbar-right nhưng chỉ hiện lang switch, ẩn đồng hồ & link tư vấn */
    .topbar-right {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .topbar-right > span,   /* Giờ hoạt động */
    .topbar-right > a {     /* Link đăng ký tư vấn */
        display: none;
    }

    .menu.navbar-collapse.show,
    .menu.navbar-collapse.collapsing {
        left: 4%;
        right: 4%;
    }

    /* Ẩn tagline brand */
    .brand-text span, .brand-text strong  {
        display: none;
    }

    /* Thu nhỏ hotline */
    .hotline-btn {
        padding: 9px 14px;
        font-size: 13px;
    }

    /* Footer: 2 cột */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================
   13. RESPONSIVE — MOBILE SMALL (≤ 560px)
   ============================================================ */
@media (max-width: 560px) {

    .topbar-left > span:last-child { /* Ẩn email, giữ hotline */
        display: none;
    }

    /* Header */

    /* Brand nhỏ hơn */
    .seal {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .brand-text strong {
        font-size: 22px;
    }

    /* Ẩn hotline (đã có trong topbar) */
    .hotline-btn {
        display: none;
    }

    /* Ẩn icon search */
    .header-actions .search {
        display: none;
    }

    /* Lang switch compact */
    .lang-switch button {
        padding: 7px 8px;
    }

    /* Footer: 1 cột */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer,
    .site-footer,
    .hnd-footer {
        padding-top: 48px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .footer-badges {
        gap: 8px;
    }

    /* Auth modal full-screen on tiny screens */
    .auth-box {
        border-radius: 20px;
    }
}


/* ============================================================
   14. ANIMATIONS
   ============================================================ */
@keyframes authRise {
    from {
        opacity: 0;
        transform: translateY(25px) scale(.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ============================================================
   15. DESKTOP — Sidebar nổi bên phải
   ============================================================ */
.fc-sidebar {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--fc-z);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 0 10px 10px; /* hé sang trái để có bóng */
}

.fc-item {
    position: relative;
    display: flex;
    align-items: center;
    /*justify-content: flex-end;*/
    /* Nút con trỏ ra phải, thu lại bên phải */
    transform: translateX(calc(100% - var(--fc-size)));
    transition: transform .28s cubic-bezier(.34,1.3,.64,1);
}
.fc-item:hover {
    transform: translateX(0);
}

/* Link bên trong */
.fc-link {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0;
    height: var(--fc-size);
    border-radius: var(--fc-r) 0 0 var(--fc-r);
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    font-family: "Be Vietnam Pro", sans-serif;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: -3px 3px 14px rgba(0,0,0,.22);
    transition: box-shadow .2s;
}
.fc-link:hover {
    color: #fff;
    box-shadow: -4px 4px 20px rgba(0,0,0,.32);
}

/* Icon circle */
.fc-icon {
    width: var(--fc-size);
    height: var(--fc-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border-radius: var(--fc-r) 0 0 var(--fc-r);
}

/* Label (hiện khi hover) */
.fc-label {
    padding: 0 14px 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
}

/* ── Màu từng nút ── */
/* Gọi điện — đỏ chủ đạo */
.fc-phone-wrap .fc-link  { background: linear-gradient(90deg, var(--red), var(--red-mid)); }
/* Zalo — xanh Zalo */
.fc-zalo-wrap .fc-link   { background: linear-gradient(90deg, #006af5, #1b90fc); }
/* Messenger — xanh Facebook */
.fc-mess-wrap .fc-link   { background: linear-gradient(90deg, #0084ff, #44b3ff); }
/* Chỉ đường — xanh Maps */
.fc-map-wrap .fc-link    { background: linear-gradient(90deg, #1a73e8, #34a853); }
/* SMS — xanh mint */
.fc-sms-wrap .fc-link    { background: linear-gradient(90deg, #00897b, #26c6aa); }

/* Nút điện thoại pulse */
.fc-phone-wrap .fc-icon {
    animation: fcPulse 2.4s ease-in-out infinite;
}
@keyframes fcPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(139,15,31,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(139,15,31,0); }
}

/* Tooltip khi không hover (chỉ hiện trên nút icon) */
.fc-item::after {
    content: attr(data-tip);
    position: absolute;
    right: calc(var(--fc-size) + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--deep);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
}
.fc-item:not(:hover)::after {
    opacity: 0;
}
/* ẩn tooltip khi hover vì đã thấy label */
.fc-item:hover::after { opacity: 0; }

/* ============================================================
   MOBILE — Bottom bar cố định
   ============================================================ */
.fc-mobile-bar {
    display: none; /* ẩn trên desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--fc-mb-h);
    z-index: var(--fc-z);
    background: #fff;
    box-shadow: 0 -2px 16px rgba(0,0,0,.14);
    border-top: 1px solid rgba(217,184,67,.3);
}

.fc-mb-inner {
    display: flex;
    height: 100%;
    width: 100%;
    align-items: stretch;
}

/* Item thường */
.fc-mb-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--text-body);
    font-size: 10px;
    font-weight: 700;
    font-family: "Be Vietnam Pro", sans-serif;
    transition: background .18s, color .18s;
    border: none;
    background: none;
    cursor: pointer;
    padding: 6px 2px 4px;
    -webkit-tap-highlight-color: transparent;
}
.fc-mb-item:active {
    background: var(--cream-deep);
}

.fc-mb-icon {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fc-mb-label {
    font-size: 9.5px;
    line-height: 1.2;
    text-align: center;
    color: var(--text-muted);
}

/* Nút giữa — PHONE — nổi lên */
.fc-mb-phone {
    flex: 1.2;
    position: relative;
}
.fc-mb-phone-inner {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--red-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
    box-shadow: 0 4px 16px rgba(139,15,31,.45);
    text-decoration: none;
    animation: fcMbPulse 2.4s ease-in-out infinite;
    border: 3px solid #fff;
}
@keyframes fcMbPulse {
    0%,100% { box-shadow: 0 4px 16px rgba(139,15,31,.45), 0 0 0 0 rgba(139,15,31,.35); }
    50%      { box-shadow: 0 4px 16px rgba(139,15,31,.45), 0 0 0 10px rgba(139,15,31,0); }
}

/* Màu icon từng mục mobile */
.fc-mb-map  .fc-mb-icon { color: #1a73e8; }
.fc-mb-mess .fc-mb-icon { color: #0084ff; }
.fc-mb-zalo .fc-mb-icon { color: #006af5; }
.fc-mb-sms  .fc-mb-icon { color: #00897b; }

/* Body padding để content không bị che */
body.has-fc-bar {
    padding-bottom: var(--fc-mb-h);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .fc-sidebar    { display: none; }
    .fc-mobile-bar { display: flex; }
}
@media (min-width: 769px) {
    .fc-mobile-bar { display: none; }
    .fc-sidebar    { display: flex; }
}

/* Safe area cho iPhone có notch */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .fc-mobile-bar {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(var(--fc-mb-h) + env(safe-area-inset-bottom));
    }
    body.has-fc-bar {
        padding-bottom: calc(var(--fc-mb-h) + env(safe-area-inset-bottom));
    }
}