@font-face { font-display: swap; font-family: 'Public Sans'; font-style: normal; font-weight: 300; src: url('/assets/fonts/public-sans-v21-latin_vietnamese-300.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Public Sans'; font-style: normal; font-weight: 400; src: url('/assets/fonts/public-sans-v21-latin_vietnamese-regular.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Public Sans'; font-style: normal; font-weight: 500; src: url('/assets/fonts/public-sans-v21-latin_vietnamese-500.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Public Sans'; font-style: normal; font-weight: 600; src: url('/assets/fonts/public-sans-v21-latin_vietnamese-600.woff2') format('woff2'); }
@font-face { font-display: swap; font-family: 'Public Sans'; font-style: normal; font-weight: 700; src: url('/assets/fonts/public-sans-v21-latin_vietnamese-700.woff2') format('woff2'); }
:root {
    color-scheme: light dark;
    /*  PALETTE: Neutrals  */
    --c-white: #ffffff;
    --c-gray-0: #FAFAFA;
    --c-gray-50: #F5F5F5;
    --c-gray-200: #E0E0E0;
    --c-gray-600: #595959;
    --c-gray-800: #4A4A4A;
    --c-gray-900: #2A2A2A;    
    /*  PALETTE: Brand & Accents  */
    --c-primary: #FFDC73;
    --c-primary-hover: #F8E07B;
    --c-primary-pale: #FFFDF5;
    --c-primary-light: #FFECB3;
    --c-accent-brown: #8B4513;
    --c-border-gold: #fcdba3;
    --c-border-yellow: #fde68a;
    /*  PALETTE: Functional  */
    --c-success: #008800;
	--c-success-dark: #006000;
    --c-info: #3498DB;
    --c-info-dark: #2980b9;
    --c-warning: #FF6D00;
    --c-danger: #D62D20;
    --c-danger-dark: #E65100;
    --c-danger-light: #F44336;
    --c-blue-50: #EBF5FB;    
    /* BỔ SUNG CHO NÚT MẠNG XÃ HỘI */
    --c-facebook: #145dbf;
    --c-twitter: #000000;    
    /* BỔ SUNG CHO NEWS FEATURED BORDER */
    --c-border-news: #FFCA28;
    --c-border-news-hover: #FBC02D;    
    --c-code-bg: #f6f8fa;
    --c-code-text: #cf222e;
    --c-alert-warning-title: #B24C00;
    --c-alert-danger-bg: #FDECEA;
    --c-alert-tip-title: #1e40af;
    --c-alert-success-title: #006000;
    --c-terminal-header: rgba(0, 0, 0, 0.2);
    --c-terminal-title: #A0A0A0;	
    /*  BACKGROUNDS  */
    --bg-body: var(--c-white);
    --bg-surface: var(--c-gray-0);
    --bg-surface-alt: var(--c-gray-50);
    --bg-muted: var(--c-gray-200);
    --bg-dark: var(--c-gray-900);
    --bg-dark-alt: var(--c-gray-800);
    --bg-accent: var(--c-primary);
    --bg-state-promo: #fffaf0;
    --bg-state-warning: #fffbeb;
    --bg-state-info: #eef5fa;
    --bg-state-success: rgba(0, 136, 0, 0.1);
    --bg-overlay: rgba(0, 0, 0, 0.5);
    --bg-overlay-gradient: linear-gradient(to right, rgba(42, 42, 42, 0.95), rgba(42, 42, 42, 0.7));
    --bg-expired-promo: #FFF3E0;
    --bg-expired-news: #ECEFF1;	
    --selection-bg: #0078D7;
    --selection-text: var(--c-white);
    /*  TEXT COLORS  */
    --text-main: var(--c-gray-800);
    --text-secondary: var(--c-gray-600);
    --text-dark: var(--c-gray-900);
    --text-brown: var(--c-accent-brown);
    --text-inverse: var(--c-gray-0);
    --text-inverse-muted: var(--c-gray-200);
    --text-error: var(--c-danger);
    --text-highlight: var(--c-primary);
	--text-expired-news: #546E7A;
    --text-on-accent: var(--c-gray-900);
    --text-alert-success-title: var(--c-alert-success-title);
    --text-alert-warning-title: var(--c-alert-warning-title);
    --text-alert-danger-title: var(--c-danger-dark);
    --text-alert-tip-title: var(--c-alert-tip-title);
    /*  ICONS (Mapped to Palette)  */
    --icon-static: var(--c-gray-900);
    --icon-hover: var(--c-accent-brown);
    --icon-accent: var(--c-primary);
    --icon-muted: var(--text-secondary);	
	/*  ICONS ul li   */
    --icon-check: var(--c-success);     
    --icon-ban: var(--c-danger);       
    --icon-warn: var(--c-warning);      
    --icon-info: var(--c-info-dark);    
    --icon-book: var(--c-accent-brown);   
    --icon-star: var(--c-warning);     
    --icon-tech: var(--c-gray-900);      
    --icon-step: var(--c-info-dark);
    --icon-link: var(--c-info-dark);  
    /*  BORDERS  */
    --border-main: var(--c-gray-200);
    --border-strong: var(--c-gray-600);
    --border-accent: var(--c-accent-brown);
    --border-dark: var(--c-gray-900);
    --border-dark-alt: var(--c-gray-800);
    --border-expired-promo: #FFCC80;
    --border-expired-news: #CFD8DC;	
    /*  TYPOGRAPHY  */
    --font-sans: 'Public Sans', sans-serif;
    --lh-1: 1;
    --lh-tight: 1.25;
    --lh-base: 1.5;
    --lh-relaxed: 1.75;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;    
    /* Font Sizes (Fluid Typography via clamp) - Base 16px */
    /* Công thức: clamp(MIN, PREFERRED_vw + rem, MAX) - scale từ mobile (~360px) đến desktop (~1200px) */
    --text-xs: 0.75rem;                                         /* 12px - giữ cố định */
    --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);    /* 13 -> 14px */
    --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);        /* 15 -> 16px */
    --text-md: clamp(1rem, 0.96rem + 0.25vw, 1.125rem);         /* 16 -> 18px */
    --text-lg: clamp(1.125rem, 1.08rem + 0.3vw, 1.25rem);       /* 18 -> 20px */
    --text-xl: clamp(1.25rem, 1.18rem + 0.4vw, 1.5rem);         /* 20 -> 24px */
    --text-2xl: clamp(1.375rem, 1.3rem + 0.45vw, 1.625rem);     /* 22 -> 26px */
    --text-3xl: clamp(1.5rem, 1.4rem + 0.65vw, 1.875rem);       /* 24 -> 30px */
    --text-4xl: clamp(1.625rem, 1.5rem + 0.8vw, 2rem);          /* 26 -> 32px */
    --text-5xl: clamp(1.75rem, 1.55rem + 1.15vw, 2.25rem);      /* 28 -> 36px */
    --text-6xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);          /* 36 -> 48px */
    /*  SPACING SCALE (Unit: rem)  */
    /* Spacing nhỏ giữ cố định để đảm bảo chi tiết UI nhất quán */
    --sp-0_5: 0.125rem;   /* 2px */
    --sp-1: 0.25rem;      /* 4px */
    --sp-2: 0.5rem;       /* 8px */
    --sp-2_5: 0.625rem;   /* 10px */
    --sp-3: 0.75rem;      /* 12px */
    --sp-3_5: 0.875rem;   /* 14px */
    --sp-4: 1rem;         /* 16px */
    /* Spacing trung bình & lớn dùng clamp() để co giãn mượt theo viewport */
    --sp-5: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);              /* 16 -> 20px */
    --sp-6: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);             /* 18 -> 24px */
    --sp-6_5: clamp(1.25rem, 1.13rem + 0.55vw, 1.5625rem);      /* 20 -> 25px */
    --sp-7_5: clamp(1.25rem, 1.05rem + 1vw, 1.875rem);          /* 20 -> 30px */
    --sp-8: clamp(1.375rem, 1.17rem + 1.05vw, 2rem);            /* 22 -> 32px */
    --sp-10: clamp(1.625rem, 1.37rem + 1.3vw, 2.5rem);          /* 26 -> 40px */
    --sp-12: clamp(1.875rem, 1.55rem + 1.65vw, 3.125rem);       /* 30 -> 50px */
    --sp-16: clamp(2.25rem, 1.79rem + 2.3vw, 4.0625rem);        /* 36 -> 65px */
    --sp-19: clamp(2.5rem, 2rem + 2.5vw, 4.6875rem);            /* 40 -> 75px */
    --sp-24: clamp(3rem, 2.37rem + 3.15vw, 5.9375rem);          /* 48 -> 95px */
    /*  COMMON SIZES  */
    --sz-icon-xs: 0.875rem; /* 14px */
    --sz-icon-sm: 1rem;     /* 16px */
    --sz-icon-md: 1.375rem; /* 22px */
    --sz-icon-lg: 3rem;     /* 48px */
    --sz-icon-xl: 4rem;     /* 64px */
    --sz-avatar: 4.0625rem; /* 65px */
    --container-max: 75rem; /* 1200px */
    --header-dropdown-width: 11.5rem; /* lang + theme đồng nhất */
    --header-logo-max-width: 13.5rem; /* ~216px — tablet / fallback */
    --header-logo-max-width-desktop: 15.5625rem; /* 249px — asset desktop */
    --header-logo-height-desktop: 3.75rem; /* 60px — cân với 249×60 */
    --header-height: 9.0625rem; /* 145px */    
    /*  RADIUS  */
    --radius-sm: 0.1875rem; 
    --radius-md: 0.3125rem;
    --radius-lg: 0.625rem; 
    --radius-full: 50%;
	/*  Z-INDEX LAYERS  */
    --z-negative: -1;
    --z-base: 1;
    --z-lift: 2;
    --z-badge: 10;
    --z-dropdown: 100;
    --z-overlay: 999;    
    --z-sticky: 1001;    
    --z-modal: 2000;
    /*  EFFECTS  */
    --transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --focus-ring: var(--c-accent-brown);
    --lift-sm: translateY(-3px);
    --lift-md: translateY(-5px);
    --lift-lg: translateY(-8px);
    /*SHADOWS */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.08);
    --shadow-hero: 0 10px 30px -5px rgba(0, 0, 0, 0.15);
    --shadow-hero-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.2);
    --shadow-brand: 0 15px 35px -5px rgba(139, 69, 19, 0.15);
    --shadow-brand-hover: 0 20px 50px -10px rgba(139, 69, 19, 0.25);
    --shadow-action: 0 4px 10px rgba(230, 160, 0, 0.25);
    --shadow-depth: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   DARK MODE
   - Tự động kích hoạt khi user chọn dark ở OS (prefers-color-scheme: dark)
   - Cho phép toggle thủ công qua <html data-theme="dark"> hoặc <html data-theme="light">
   - data-theme="light" sẽ override prefers-color-scheme để ép sáng
   - Chỉ override các biến SEMANTIC (backgrounds, text, borders, shadows) để không phá vỡ palette thương hiệu
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        /*  BACKGROUNDS  */
        --bg-body: #121212;
        --bg-surface: #1A1A1A;
        --bg-surface-alt: #242424;
        --bg-muted: #2E2E2E;
        --bg-dark: #0A0A0A;
        --bg-dark-alt: #161616;
        --bg-state-promo: #2A2315;
        --bg-state-warning: #2B2410;
        --bg-state-info: #13232E;
        --bg-state-success: rgba(0, 136, 0, 0.18);
        --bg-overlay: rgba(0, 0, 0, 0.7);
        --bg-overlay-gradient: linear-gradient(to right, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.7));
        --bg-expired-promo: #2A1F10;
        --bg-expired-news: #1C2023;
        /*  TEXT COLORS  */
        --text-main: #E4E4E4;
        --text-secondary: #A8A8A8;
        --text-dark: #F5F5F5;
        --text-brown: #FFD88A;
        --text-inverse: #1A1A1A;
        --text-inverse-muted: #C8C8C8;
        --text-expired-news: #8B9AA3;
        --text-on-accent: #1A1A1A;
        /*  BORDERS  */
        --border-main: #333333;
        --border-strong: #555555;
        --border-dark: #0A0A0A;
        --border-dark-alt: #161616;
        --border-expired-promo: #6B4E1F;
        --border-expired-news: #3A4449;
        /*  ICONS  */
        --icon-static: #E4E4E4;
        --icon-hover: #FFD88A;
        --icon-book: #FFD88A;
        --icon-tech: #E4E4E4;
        /*  COMPONENT-SPECIFIC OVERRIDES  */
        --c-code-bg: #1E1E1E;
        --c-code-text: #FF8A80;
        --c-alert-danger-bg: #2E1615;
        --c-alert-success-title: #8BE28B;
        --c-alert-warning-title: #FFD27A;
        --c-alert-tip-title: #86B8FF;
        --c-terminal-header: rgba(255, 255, 255, 0.08);
        --c-terminal-title: #888888;
        --c-blue-50: #13232E;
        /*  SHADOWS (đậm hơn để tạo chiều sâu trên nền tối)  */
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.55), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
        --shadow-hero: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
        --shadow-hero-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
        --shadow-brand: 0 15px 35px -5px rgba(0, 0, 0, 0.5);
        --shadow-brand-hover: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
        --shadow-depth: 0 4px 12px rgba(0, 0, 0, 0.45);
        /*  SELECTION  */
        --selection-bg: var(--c-primary);
        --selection-text: var(--c-gray-900);
        --focus-ring: var(--c-primary);
        --text-alert-success-title: var(--c-alert-success-title);
        --text-alert-warning-title: var(--c-alert-warning-title);
        --text-alert-danger-title: #FFAD9F;
        --text-alert-tip-title: var(--c-alert-tip-title);
    }
    /* Điều chỉnh ảnh để đỡ chói trên dark mode (tuỳ chọn, nhẹ nhàng) */
    :root:not([data-theme="light"]) img:not([src*=".svg"]) { filter: brightness(0.92); }
    :root:not([data-theme="light"]) .item-highlight { color: var(--c-primary) !important; }
}

/* Override thủ công: ép dark bất kể hệ điều hành */
[data-theme="dark"] {
    color-scheme: dark;
    --bg-body: #121212;
    --bg-surface: #1A1A1A;
    --bg-surface-alt: #242424;
    --bg-muted: #2E2E2E;
    --bg-dark: #0A0A0A;
    --bg-dark-alt: #161616;
    --bg-state-promo: #2A2315;
    --bg-state-warning: #2B2410;
    --bg-state-info: #13232E;
    --bg-state-success: rgba(0, 136, 0, 0.18);
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-overlay-gradient: linear-gradient(to right, rgba(10, 10, 10, 0.95), rgba(10, 10, 10, 0.7));
    --bg-expired-promo: #2A1F10;
    --bg-expired-news: #1C2023;
    --text-main: #E4E4E4;
    --text-secondary: #A8A8A8;
    --text-dark: #F5F5F5;
    --text-brown: #FFD88A;
    --text-inverse: #1A1A1A;
    --text-inverse-muted: #C8C8C8;
    --text-expired-news: #8B9AA3;
    --text-on-accent: #1A1A1A;
    --border-main: #333333;
    --border-strong: #555555;
    --border-dark: #0A0A0A;
    --border-dark-alt: #161616;
    --border-expired-promo: #6B4E1F;
    --border-expired-news: #3A4449;
    --icon-static: #E4E4E4;
    --icon-hover: #FFD88A;
    --icon-book: #FFD88A;
    --icon-tech: #E4E4E4;
    --c-code-bg: #1E1E1E;
    --c-code-text: #FF8A80;
    --c-alert-danger-bg: #2E1615;
    --c-alert-success-title: #8BE28B;
    --c-alert-warning-title: #FFD27A;
    --c-alert-tip-title: #86B8FF;
    --c-terminal-header: rgba(255, 255, 255, 0.08);
    --c-terminal-title: #888888;
    --c-blue-50: #13232E;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 12px 24px -4px rgba(0, 0, 0, 0.55), 0 4px 8px -2px rgba(0, 0, 0, 0.4);
    --shadow-hero: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
    --shadow-hero-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.7);
    --shadow-brand: 0 15px 35px -5px rgba(0, 0, 0, 0.5);
    --shadow-brand-hover: 0 20px 50px -10px rgba(0, 0, 0, 0.6);
    --shadow-depth: 0 4px 12px rgba(0, 0, 0, 0.45);
    --selection-bg: var(--c-primary);
    --selection-text: var(--c-gray-900);
    --focus-ring: var(--c-primary);
    --text-alert-success-title: var(--c-alert-success-title);
    --text-alert-warning-title: var(--c-alert-warning-title);
    --text-alert-danger-title: #FFAD9F;
    --text-alert-tip-title: var(--c-alert-tip-title);
}
[data-theme="dark"] img:not([src*=".svg"]) { filter: brightness(0.92); }
[data-theme="dark"] .item-highlight { color: var(--c-primary) !important; }

/* Transition mượt khi chuyển theme (chỉ cho các property thay đổi) */
html {
    transition: color-scheme 0.3s ease;
    font-size: 100%;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scroll-padding-top: 13.125rem;
}
body, .card, .sticky-header-wrapper, .main-nav, .submenu, .mega-menu, .table-wrapper, .styled-table, .styled-table thead tr, .styled-table tbody tr { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }

/* Tôn trọng người dùng không thích hiệu ứng chuyển động */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    html, body, * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
@media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible { outline-color: CanvasText; }
}
/*  BASE STYLES  */
body { margin: 0; padding: var(--header-height) 0 0 0; background: var(--bg-body); position: relative; color: var(--text-main); font-weight: var(--fw-normal); font-size: var(--text-base); font-family: var(--font-sans); line-height: var(--lh-base); }
body.nav-active { overflow: hidden; }
body.nav-active::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-overlay); z-index: var(--z-overlay); opacity: 1; transition: opacity 0.3s ease; }
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-overlay); z-index: var(--z-overlay); pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
input, select, textarea { color: var(--text-main); font-weight: var(--fw-normal); font-size: var(--text-base); font-family: var(--font-sans); line-height: var(--lh-base); }
* { box-sizing: border-box; }
::-moz-selection { background: var(--selection-bg); color: var(--selection-text); }
::selection { background: var(--selection-bg); color: var(--selection-text); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-bold); line-height: var(--lh-tight); }
h1 { font-size: var(--text-5xl); color: var(--text-dark); margin: 0 0 var(--sp-5); }
h2 { font-size: var(--text-4xl); color: var(--text-dark); margin-bottom: var(--sp-2); }
h3 { font-size: var(--text-xl); color: var(--text-dark); margin-bottom: var(--sp-3_5); }
p { margin-top: 0; margin-bottom: 1em; }
a { color: var(--text-main); text-decoration: none; }
a:hover { text-decoration: none; transition: color .3s ease; }
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); }
strong, b { font-weight: var(--fw-bold); }
ul, ol { margin-top: 0; margin-bottom: 1em; padding-left: 2em; }
figure { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/*  UTILITIES & COMPONENTS  */
.visually-hidden-focusable:not(:focus):not(:focus-within) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.visually-hidden-focusable { background-color: var(--c-primary); color: var(--text-on-accent); padding: 1rem; position: absolute; top: 0; left: 0; z-index: var(--z-modal); font-weight: bold; text-decoration: none; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; border: none; margin: 0; padding: 0; pointer-events: none; }
.icon { display: inline-block; width: 1em; height: 1em; fill: currentColor; }
.container { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--sp-5); padding-right: var(--sp-5); }
.section { padding-top: var(--sp-16); padding-bottom: var(--sp-16); }
.section-title { text-align: center; margin-bottom: var(--sp-7_5); }
.section-title h2 { margin-bottom: var(--sp-2_5); }
.section-title p { font-size: var(--text-md); color: var(--text-secondary); margin: 0 auto; line-height: var(--lh-relaxed); }
.related-post-image { border-radius: var(--radius-md); aspect-ratio: 3/2; }
.section-title-underline { font-size: var(--text-3xl); color: var(--text-dark); margin-bottom: var(--sp-7_5); padding-bottom: var(--sp-3_5); border-bottom: 2px solid var(--border-main); position: relative; text-align: center; }
.section-title-underline::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 6.25rem; height: 2px; background-color: var(--text-brown); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-6_5); font-size: var(--text-base); font-weight: var(--fw-semibold); border-radius: var(--radius-md); border: 2px solid transparent; cursor: pointer; text-align: center; transition: var(--transition); }
.btn-primary { background-color: var(--bg-accent); color: var(--text-on-accent); border-color: var(--bg-accent); box-shadow: var(--shadow-action); }
.btn-primary:hover { background-color: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--text-on-accent); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(230, 160, 0, 0.35); }
.btn-lg { padding: var(--sp-3_5) var(--sp-8); font-size: var(--text-md); }
.badge { display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: var(--radius-sm); transition: all .15s ease-in-out; }
.badge-danger { color: var(--c-white); background-color: var(--c-danger-dark); }
.grid { display: grid; gap: var(--sp-5); }
.grid-cols-1 { grid-template-columns: 1fr; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.card { background-color: var(--bg-body); border: 1px solid var(--border-main); border-radius: var(--radius-lg); padding: var(--sp-6_5); box-shadow: var(--shadow-sm); transition: var(--transition); }
.card:hover { transform: var(--lift-md); box-shadow: var(--shadow-hover); }
.two-column-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-7_5); align-items: center; margin: var(--sp-7_5) 0; }
.two-column-layout img { border-radius: var(--radius-lg); max-width: 100%; box-shadow: var(--shadow-sm); }
.text-center { text-align: center !important; }
.pb-0 { padding-bottom: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pt-40 { padding-top: var(--sp-10) !important; }
.mb-xl { margin-bottom: var(--sp-5) !important; }
.mb-3xl { margin-bottom: var(--sp-7_5) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-m { margin-top: var(--sp-2_5) !important; }
.mt-3xl { margin-top: var(--sp-7_5) !important; }
.bg-light-alt { background-color: var(--bg-surface-alt); }
.mobile-only { display: none; }
.desktop-only { display: inline-flex; }
.item-highlight { font-weight: 700; color: var(--c-accent-brown) !important; }
.border-left { border-left: var(--sp-1) solid var(--c-primary) !important; }
/*  HEADER & NAV  */
.sticky-header-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: auto; min-height: var(--header-height); z-index: var(--z-sticky); background-color: var(--bg-body); box-shadow: var(--shadow-depth); transform: translateZ(0); border-bottom: 1px solid var(--border-main);}
.top-bar { background-color: var(--bg-surface); padding: var(--sp-2) 0; font-size: var(--text-sm); color: var(--text-secondary); border-bottom: 1px solid var(--border-main); }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.top-bar .contact-info, .top-bar .user-links { display: flex; align-items: center; gap: var(--sp-5); }
.top-bar .contact-info a { display: inline-flex; align-items: center; }
.top-bar a { color: var(--text-secondary); font-weight: var(--fw-medium); }
.top-bar a:hover { color: var(--text-brown); }
.top-bar a.user-account-link { display: flex; align-items: center; gap: var(--sp-2); }
.top-bar .icon { margin-right: var(--sp-2); }
/* Trên nhẹ hơn dưới một chút để bù cảm giác khe dưới to (đổ bóng/baseline menu) */
.main-header { background-color: var(--bg-body); padding: var(--sp-4) 0 var(--sp-3) 0; position: relative; }
.main-header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--text-dark); flex-shrink: 0; display: inline-flex; align-items: center; }
.logo img { display: block; width: var(--header-logo-max-width); max-width: 100%; height: auto; }
.logo span { color: var(--text-brown); }
.header-actions { display: flex; align-items: center; gap: var(--sp-2_5); margin-left: var(--sp-7_5); }
.header-icon { display: none; color: var(--text-dark); font-size: var(--text-xl); padding: 0 var(--sp-2); position: relative; }
.header-icon:hover { color: var(--text-brown); }
.nav-toggle { display: none; background: none; border: none; font-size: var(--text-xl); cursor: pointer; z-index: var(--z-sticky); color: var(--text-dark); }
.main-nav { margin-left: auto; }
.main-nav ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; gap: var(--sp-7_5); }
.main-nav ul li { position: relative; }
.main-nav ul li.has-mega-menu { position: static; }
.main-nav ul a { font-weight: var(--fw-medium); padding: var(--sp-5) 0; position: relative; }
.main-nav .menu-item-wrapper > a, .main-nav .submenu li a { color: var(--text-dark); }
.main-nav .menu-item-wrapper > a:hover, .main-nav ul > li.open > .menu-item-wrapper > a { color: var(--icon-hover); }
.main-nav .submenu-toggle { display: none; }
.main-nav .submenu { visibility: hidden; opacity: 0; position: absolute; top: 100%; left: 0; background-color: var(--bg-body); min-width: 15rem; list-style: none; padding: var(--sp-2_5); margin: 0; box-shadow: var(--shadow-depth); transition: all 0.3s ease; transform: translateY(10px); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.main-nav li.open > .submenu { visibility: visible; opacity: 1; transform: translateY(0); }
.main-nav .submenu li { width: 100%; }
.main-nav .submenu a { padding: var(--sp-2_5); width: 100%; display: block; }
.main-nav .mega-menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); width: 72.5rem; left: 50%; background-color: var(--bg-body); backdrop-filter: none; border: 1px solid var(--border-main); border-top: 3px solid var(--c-primary); border-radius: 0 0 var(--radius-lg) var(--radius-lg); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15); padding: var(--sp-6_5); transform: translate(-50%, 0); z-index: var(--z-dropdown); }
.main-nav li.open > .mega-menu { transform: translate(-50%, 7px); }
.main-nav .mega-menu .mega-menu-item > a { display: flex; align-items: center; gap: var(--sp-3_5); padding: var(--sp-3_5); border-radius: var(--radius-md); transition: background-color 0.3s ease; height: 100%; }
.main-nav .mega-menu .mega-menu-item > a:hover { background-color: var(--bg-surface-alt); }
.main-nav .mega-menu .mega-menu-item > a:hover .nav-item-title { color: var(--text-brown); }
.main-nav .mega-menu .mega-menu-item > a:hover .mega-menu-icon .icon { color: var(--icon-hover); transform: translateY(-2px); }
.mega-menu-icon { display: flex; color: var(--c-gray-900); padding-right: var(--sp-3_5); }
.mega-menu-icon .icon { width: var(--sz-icon-lg); height: var(--sz-icon-lg); color: var(--icon-static); transition: all 0.3s ease; }
.mega-menu-text .nav-item-title {display: block; font-weight: var(--fw-bold); line-height: var(--lh-tight); font-size: var(--text-base); color: var(--text-dark); margin-bottom: var(--sp-2);transition: color 0.3s ease;}
.mega-menu-text p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: 0; line-height: var(--lh-base); }
.language-switcher { position: relative; }
.language-switcher .current-lang { display: flex; align-items: center; gap: var(--sp-2); background: none; border: none; cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); padding: var(--sp-2) 0; }
.language-switcher .current-lang img { width: 21px; height: 14px; box-shadow: 0 2px 4px rgba(230, 81, 0, 0.2); }
.language-switcher .current-lang span:hover { color: var(--text-brown); }
.language-switcher .current-lang .icon { font-size: var(--text-xs); transition: transform 0.3s ease; }
.language-switcher.active .current-lang .icon { transform: rotate(180deg); }
.lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); right: -1.5rem; background-color: var(--bg-body); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-depth); list-style: none; padding: var(--sp-2); margin: 0; box-sizing: border-box; width: var(--header-dropdown-width); max-width: min(var(--header-dropdown-width), calc(100vw - 2 * var(--sp-3))); z-index: var(--z-dropdown); border: 1px solid var(--border-main); }
.language-switcher.active .lang-dropdown { display: block; animation: fadeIn 0.3s; }
.theme-switcher { position: relative; }
.theme-switcher .theme-dropdown,
.theme-switcher .theme-switcher__current-label,
.theme-switcher .theme-switcher__chevron { display: none !important; }
.theme-switcher .theme-switcher__trigger { display: inline-flex; align-items: center; border: none; background: transparent; cursor: pointer; padding: var(--sp-1) 0; border-radius: 999px; color: var(--text-secondary); }
.theme-switcher .theme-switcher__trigger:hover { background-color: var(--bg-surface-alt); }
.theme-switcher .theme-switcher__trigger:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.theme-switcher__mini-track { width: 40px; height: 22px; border-radius: 999px; position: relative; background: var(--bg-muted); border: 1px solid var(--border-main); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12); transition: background-color 0.25s ease, border-color 0.25s ease; display: block; }
.theme-switcher__mini-thumb { position: absolute; top: 50%; left: 1px; width: 20px; height: 20px; border-radius: 50%; transform: translateY(-50%); background: var(--c-white); border: 1px solid rgba(0, 0, 0, 0.12); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; display: grid; place-items: center; overflow: hidden; color: #1f2937; }
.theme-switcher__mini-thumb .theme-switcher__icon { width: 14px; height: 14px; position: absolute; inset: 0; margin: auto; }
.theme-switcher__mini-thumb .theme-switcher__icon--moon { display: none; }
.theme-switcher[data-theme-mode="dark"] .theme-switcher__mini-track { background: var(--c-primary-light); border-color: var(--border-accent); }
.theme-switcher[data-theme-mode="dark"] .theme-switcher__mini-thumb { transform: translate(16px, -50%); background: #111111; border-color: rgba(255, 255, 255, 0.14); color: #ffdc73; }
.theme-switcher[data-theme-mode="dark"] .theme-switcher__mini-thumb .theme-switcher__icon--sun { display: none; }
.theme-switcher[data-theme-mode="dark"] .theme-switcher__mini-thumb .theme-switcher__icon--moon { display: block; }
.theme-switcher--mobile .theme-switcher__trigger { padding: var(--sp-1); width: auto; height: auto; }
.theme-switcher--mobile .theme-switcher__mini-track { width: 36px; height: 20px; }
.theme-switcher--mobile .theme-switcher__mini-thumb { width: 18px; height: 18px; }
.theme-switcher--mobile .theme-switcher__mini-thumb .theme-switcher__icon { width: 14px; height: 14px; }
.theme-switcher--mobile[data-theme-mode="dark"] .theme-switcher__mini-thumb { transform: translate(14px, -50%); }
.lang-dropdown li a { display: flex; align-items: center; gap: var(--sp-2_5); padding: var(--sp-2) var(--sp-2_5); border-radius: var(--radius-sm); font-weight: var(--fw-medium); justify-content: center; }
.lang-dropdown li a:hover { background-color: var(--bg-surface-alt); }
.lang-dropdown li img { width: 21px; height: 14px; box-shadow: 0 2px 4px rgba(230, 81, 0, 0.2); }
.mobile-lang-switcher-header .current-lang { padding: 0; background: none; border: none; cursor: pointer; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; }
.mobile-lang-switcher-header .current-lang img { width: 27px; height: 18px; box-shadow: 0 0 0 1px var(--c-white), 0 0 0 2px var(--border-main); object-fit: cover; flex-shrink: 0; }
.mobile-nav-actions { display: none; justify-content: space-between; padding: var(--sp-3_5); text-align: center; background-color: var(--bg-surface-alt); border-top: 1px solid var(--border-main); }
.mobile-nav-actions .action-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); transition: color 0.2s ease; text-decoration: none; }
.mobile-nav-actions .action-item .icon, .action-item-split > a .icon { width: var(--sz-icon-lg); height: var(--sz-icon-lg); display: flex; padding: 0; color: var(--icon-static); transition: all 0.3s ease; }
.mobile-nav-actions .action-item:hover .icon, .action-item-split > a:first-child:hover .icon { color: var(--icon-hover); transform: translateY(-3px); }
.mobile-nav-actions .action-item:hover span:not(.notification-badge), .action-item-split > a:last-child:hover span { color: var(--text-brown); }
.action-item-split { position: relative; display: flex; justify-content: center; align-items: center; gap: 0; }
.action-item-split .promo-main-link { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--text-secondary); font-size: var(--text-sm); font-weight: var(--fw-medium); width: 100%; transition: color 0.2s ease; }
.action-item-split .promo-main-link .icon { width: var(--sz-icon-lg); height: var(--sz-icon-lg); display: flex; align-items: center; justify-content: center; padding: 0; color: var(--icon-static); font-size: 1.6rem; transition: all 0.3s ease; margin: 0 auto; }
.action-item-split .promo-main-link:hover { color: var(--text-brown); }
.action-item-split .promo-main-link:hover .icon { color: var(--icon-hover); transform: scale(1.15); }
.action-item-split .promo-badge-link { position: absolute; top: -12px; left: 50%; margin-left: 6px; z-index: var(--z-dropdown); text-decoration: none; line-height: 1; }
.promo-link-group { display: inline-flex; align-items: center; }
.notification-badge { display: flex; align-items: center; justify-content: center; background-color: var(--c-danger); color: var(--c-white); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--fw-bold); line-height: var(--lh-base); box-shadow: 0 2px 4px rgba(214, 45, 32, 0.2); cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background-color 0.2s ease; min-width: 1.25rem; height: 1.25rem; }
.notification-badge:hover, a:hover > .notification-badge, .promo-link-group > a:hover .notification-badge, .action-item-split .promo-badge-link:hover .notification-badge, li:hover > .notification-badge { transform: scale(1.2); box-shadow: 0 4px 8px rgba(230, 81, 0, 0.3); background-color: var(--c-warning); color: var(--c-white); }
.top-bar .notification-badge { position: relative; top: -1px; margin-left: 6px; height: 1.25rem; width: 1.25rem; padding: 0 5px; }
.promo-link-group > a:hover .notification-badge { transform: scale(1.15); }
.mobile-nav-actions .notification-badge { min-width: 1.5rem; height: 1.5rem; border: 2px solid var(--c-white); }
.notification-badge.badge-sidebar-inline { display: inline-flex; margin-left: auto; width: 1.25rem; height: 1.25rem; }
.notification-badge.badge-sidebar-external { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index: var(--z-lift); width: 1.5rem; height: 1.5rem; }
.widget-categories .category-list li:hover .notification-badge.badge-sidebar-external, .notification-badge.badge-sidebar-external:hover { transform: translateY(-50%) scale(1.15); color: var(--c-white); }
/*  PAGE SECTIONS (Hero, Features, Pricing)  */
.hero { padding: var(--sp-16) 0; }
.hero .container { display: grid; align-items: center; gap: var(--sp-7_5); }
.hero-desc-wrapper { margin-bottom: var(--sp-5); max-width: 36.25rem; }
.hero-intro { font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--sp-3_5); line-height: var(--lh-relaxed); }
.hero-features-list { list-style: none; padding: 0; margin: var(--sp-5) 0 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.hero-features-list li { display: flex; align-items: flex-start; text-align: left; font-size: var(--text-base); color: var(--text-main); font-weight: var(--fw-medium); line-height: 1.5; }
.hero-features-list .check-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin-right: var(--sp-3_5); margin-top: -2px; background-color: var(--bg-state-success); color: var(--c-success); border-radius: var(--radius-full); flex-shrink: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.hero-features-list .check-icon .icon { width: 0.875rem; height: 0.875rem; fill: currentColor; stroke: currentColor; stroke-width: 0.5; }
.hero-features-list li:hover .check-icon { background-color: var(--c-success); color: var(--c-white); transform: scale(1.1); box-shadow: 0 4px 10px rgba(0, 136, 0, 0.25); }
.hero-content p { font-size: var(--text-md); color: var(--text-secondary); margin-bottom: var(--sp-5); max-width: 34.375rem; }
.hero-content span { margin-bottom: var(--sp-5); display: block; }
.hero-image img, .article-featured-image img { border-radius: var(--radius-lg); width: 100%; height: auto; object-fit: cover; aspect-ratio: 3/2; box-shadow: var(--shadow-hero); transition: var(--transition); }
.hero-image img:hover, .article-featured-image img:hover { box-shadow: var(--shadow-hero-hover); transform: var(--lift-sm); }
.service-page .hero { background-color: var(--bg-dark); }
.service-page .hero h1, .service-page .hero p { color: var(--c-white); }
.breadcrumb-bg { background-color: var(--bg-surface-alt); }
main .breadcrumb, main .tagline { padding-top: var(--sp-7_5); padding-bottom: var(--sp-7_5); }
.breadcrumb, .tagline { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
main .tagline .hero-tagline { margin: 0; color: var(--text-secondary); line-height: var(--lh-relaxed); }
.breadcrumb-item { display: flex; align-items: center; }
.breadcrumb-item + .breadcrumb-item::before { content: '>'; display: inline-block; padding: 0 var(--sp-2_5); color: var(--text-secondary); }
.breadcrumb-item a { color: var(--text-secondary); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: var(--sp-2); }
.breadcrumb-item a:hover { color: var(--text-brown); }
.breadcrumb-item.active { color: var(--text-main); font-weight: var(--fw-medium); }
.main-services { background-color: var(--bg-body); }
.pricing-plan { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.pricing-plan.popular { border-color: var(--c-primary); border-width: 2px; box-shadow: var(--shadow-brand); z-index: var(--z-lift); transform: scale(1.01); transform-origin: bottom center;}
.pricing-plan:hover { border-color: var(--c-primary); box-shadow: var(--shadow-hover); transform: var(--lift-md); z-index: var(--z-base); }
.pricing-plan.popular:hover { border-color: var(--c-primary); box-shadow: var(--shadow-brand-hover); }
.pricing-plan:hover .plan-icon .icon { color: var(--icon-hover); transform: scale(1.1); }
.plan-badge { position: absolute; top: 18px; right: -35px; background-color: var(--c-primary); color: var(--text-on-accent); padding: var(--sp-0_5) var(--sp-7_5); font-size: var(--text-sm); font-weight: var(--fw-bold); transform: rotate(45deg); z-index: var(--z-base); width: 8.75rem; text-align: center; text-transform: uppercase; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.plan-header { text-align: center; margin-bottom: var(--sp-5); }
.plan-icon .icon { display: inline-block; width: var(--sz-icon-xl); height: var(--sz-icon-xl); color: var(--icon-static); transition: all 0.3s ease; }
.plan-icon { font-size: var(--text-5xl); color: var(--text-brown); margin-bottom: var(--sp-3_5); }
.plan-header .plan-name { font-size: var(--text-lg); margin-bottom: 0; }
.plan-features { list-style: none; padding: 0; margin: 0 0 var(--sp-5); text-align: left; flex-grow: 1; margin-bottom: 1.5625rem; }
.plan-features li { padding: var(--sp-2) 0; border-bottom: 1px solid var(--c-gray-50); display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3_5); font-size: var(--text-sm); }
.plan-features li:last-child { border-bottom: none; }
.plan-features li strong { color: var(--text-secondary); font-weight: var(--fw-normal); }
.plan-features li .feature-value { color: var(--text-dark); font-weight: var(--fw-semibold); }
.plan-pricing { margin-top: auto; }
.price-details-container { min-height: 7.5rem; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.price-detail { display: none; }
.price-detail.active { display: block; animation: fadeIn 0.4s; }
.price-display { margin-bottom: var(--sp-2_5); }
.price-display .original-price { font-size: var(--text-lg); color: var(--text-secondary); line-height: 1; margin: 0 0 var(--sp-2) 0; height: 1.5rem; text-decoration: line-through; }
.price-display .final-price { font-size: var(--text-4xl); font-weight: var(--fw-bold); color: var(--text-brown); margin: 0; line-height: var(--lh-tight); }
.price-unit { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--text-secondary); margin-left: var(--sp-0_5); }
.savings-tag { display: inline-block; background-color: var(--c-danger); color: var(--c-white); font-size: var(--text-sm); font-weight: var(--fw-bold); padding: var(--sp-0_5) var(--sp-2_5); border-radius: var(--radius-md); margin-bottom: var(--sp-3_5); box-shadow: var(--shadow-sm); }
.savings-tag-placeholder { display: inline-block; font-size: var(--text-sm); padding: var(--sp-0_5) var(--sp-2_5); margin-bottom: var(--sp-3_5); visibility: hidden; }
.total-payment { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.total-payment .total-value { color: var(--text-dark); font-weight: var(--fw-bold); }
.billing-cycle-segmented-control { display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: var(--sp-5); background-color: var(--bg-surface-alt); border-radius: var(--radius-md); border: 1px solid var(--border-main); padding: 3px; overflow: hidden; box-shadow: var(--shadow-sm); }
.billing-cycle-segmented-control input[type="radio"] { display: none; }
.billing-cycle-segmented-control label { flex: 1 1 25%; text-align: center; padding: var(--sp-2) var(--sp-0_5); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: all 0.2s ease-in-out; color: var(--text-secondary); border: none; position: relative; z-index: var(--z-base); }
.billing-cycle-segmented-control input[type="radio"]:checked + label { background-color: var(--bg-state-promo); color: var(--text-main); border: 1px solid var(--c-border-yellow); font-weight: var(--fw-semibold); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.pricing-simple-view { min-height: 7.8125rem; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 10px 0; border: 1px solid var(--border-main); border-radius: var(--radius-md); }
.pricing-simple-view .price-label { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: var(--sp-2); margin-top: 0; font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: 0.5px; display: block; padding: 0; background-color: transparent; border-radius: 0; }
.pricing-simple-view .final-price { font-size: var(--text-3xl); margin-bottom: var(--sp-2); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--text-brown); margin-top: var(--sp-2); }
.pricing-simple-view .price-note { font-size: var(--text-xs); color: var(--text-main); font-style: normal; display: block; width: fit-content; margin-left: auto; margin-right: auto; background-color: var(--bg-state-promo); border: 1px solid var(--c-border-yellow); font-weight: 500; padding: 2px 15px; border-radius: var(--radius-sm); margin-top: var(--sp-2); }
.pricing-plan .btn { width: 100%; margin-top: var(--sp-5); }

.pricing-plan-compact.card { padding: var(--sp-5); }
.pricing-plan-compact .plan-badge { top: 12px; right: -38px; }
.pricing-plan-compact .plan-header { margin-bottom: var(--sp-2_5); }
.pricing-plan-compact .plan-name { font-size: var(--text-md); margin-bottom: var(--sp-2); color: var(--text-dark); }
.pricing-plan-compact .plan-desc { font-size: var(--text-sm); color: var(--text-secondary); font-style: italic; text-align: center; margin-bottom: var(--sp-5); min-height: 2.8rem; }
.pricing-plan-compact .plan-features { margin-bottom: var(--sp-5); }
.pricing-plan-compact .plan-features li { padding: var(--sp-1) 0; }
.pricing-plan-compact .pricing-simple-view {min-height: auto; padding: var(--sp-3_5) var(--sp-2_5); margin-bottom: var(--sp-3_5);}
.pricing-plan-compact .pricing-simple-view .final-price {font-size: var(--text-2xl); margin: var(--sp-2) 0;}

.product-intro-card { display: flex; flex-direction: column; gap: var(--sp-5); }
.product-intro-card .product-info { flex: 1; }
.product-intro-card .pricing-plan { flex: 0 0 40%; max-width: 21.875rem; margin: 0 auto; }
.feature-card { text-align: center; padding: var(--sp-7_5); }
.feature-card .icon { width: var(--sz-icon-lg); height: var(--sz-icon-lg); font-size: var(--text-5xl); color: var(--icon-static); margin-bottom: var(--sp-5); transition: all 0.3s ease; }
.feature-card:hover .icon { color: var(--icon-hover); transform: scale(1.1); }
.addon-card { display: flex; flex-direction: column; }
.addon-card:hover { box-shadow: var(--shadow-brand); transform: translateY(-5px); }
.addon-card:hover .addon-header .icon { color: var(--icon-hover); transform: scale(1.1); }
.addon-card-top { display: flex; flex-direction: column; align-items: stretch; margin-bottom: var(--sp-5); }
.addon-header .icon { color: var(--icon-static); transition: all 0.3s ease; }
.addon-card > .addon-card-top > .addon-header { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; margin-bottom: var(--sp-3_5); }
.addon-card > .addon-card-top > .addon-header > .icon { width: var(--sz-icon-lg); height: var(--sz-icon-lg); font-size: var(--text-3xl); line-height: 1; }
.addon-card > .addon-card-top > .addon-header > h3 { font-size: var(--text-lg); margin: 0; font-weight: var(--fw-semibold); }
.addon-options { width: 100%; flex-shrink: 0; }
.addon-options label:hover { border-color: var(--c-primary); background-color: var(--bg-surface); }
.addon-options-grid { display: grid; gap: var(--sp-2); }
.addon-options-grid--1-col { grid-template-columns: 1fr; }
.addon-options-grid--2-col { grid-template-columns: repeat(2, 1fr); }
.addon-options-grid input[type="radio"] { display: none; }
.addon-options-grid label { text-align: center; padding: var(--sp-2_5); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer; transition: all 0.2s ease-in-out; color: var(--text-secondary); border: 1px solid var(--border-main); background-color: var(--bg-surface-alt); }
.addon-options-grid input[type="radio"]:checked + label { background-color: var(--bg-state-promo); color: var(--text-main); border-color: var(--c-border-yellow); font-weight: var(--fw-semibold); box-shadow: 0 2px 8px rgba(255, 220, 115, 0.3); }
.addon-card-bottom, .addons-specs { margin-top: auto; border-top: 1px solid var(--border-main); padding-top: var(--sp-3_5); width: 100%;}
.addon-note { font-size: var(--text-sm); color: var(--text-brown); margin-left: auto; margin-right: auto; padding: 2px 15px; margin-top: var(--sp-2); }
.addon-pricing { min-height: 2.5rem; display: flex; align-items: center; justify-content: center; }
.addon-price-display p { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--text-brown); margin: 0; }
.addon-price-display span { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--text-secondary); margin-left: var(--sp-0_5); }
.addon-options-grid--static { gap: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-main); } 
.static-option-item { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3_5); background-color: var(--bg-surface); border-bottom: 1px solid var(--border-main); font-size: var(--text-sm); }
.static-option-item:last-child { border-bottom: none; }
.static-label { color: var(--text-secondary); font-weight: var(--fw-medium); }
.static-value { color: var(--text-dark); font-weight: var(--fw-bold); }
.static-option-item--raw { justify-content: center; color: var(--text-secondary); }
.service-showcase-section { background-color: var(--bg-surface-alt); }
/* DANH SACH ul li STYLE  */
ul[class*="list-"], ul.styled-list { list-style: none; padding-left: 0; margin: var(--sp-3_5) 0; }
ul[class*="list-"] li, ul.styled-list li { position: relative; padding-left: 2rem; margin-bottom: var(--sp-2_5); line-height: var(--lh-relaxed); color: var(--text-main); }
/* THAY ĐỔI: Thêm dấu > trước .icon để chỉ áp dụng cho icon là con trực tiếp của li */
ul[class*="list-"] li > .icon, ul.styled-list li > .icon { position: absolute; left: 0; top: 2px; width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: flex-start; background: transparent; border: none; font-size: 1.125rem; line-height: 1; transition: transform 0.2s ease; }
ul[class*="list-"] li:hover > .icon, ul.styled-list li:hover > .icon { transform: translateX(3px); }
/* Nhóm Tích cực / Thành công */
ul.list-options li > .icon, ul.list-options-square li > .icon { color: var(--c-success); }
/* Nhóm Tài liệu / Thông tin */
ul.list-terms li > .icon { color: var(--icon-book); }
ul.list-notes li > .icon { color: var(--c-info-dark); }
ul.list-options-neutral li > .icon { color: var(--text-secondary); }
/* Nhóm Nổi bật / Quan trọng */
ul.list-features li > .icon { color: var(--c-warning); }
ul.list-promo li > .icon, ul.list-features-hot li > .icon { color: var(--c-danger-dark); }
/* Nhóm Cảnh báo / Lỗi */
ul.list-danger li > .icon { color: var(--c-danger); }
ul.list-warning li > .icon { color: var(--c-warning); }
/* Nhóm Kỹ thuật / Hướng dẫn */
ul.list-guide li > .icon { color: var(--c-info-dark); }
ul.list-specs li > .icon, ul.list-config li > .icon { color: var(--c-gray-900); }
ul.list-security li > .icon { color: var(--c-info-dark); }
ul.list-steps li > .icon { color: var(--c-info-dark); font-weight: 700; }
/* Nhóm Link / Mở rộng */
ul.list-links li > .icon { color: var(--c-info-dark); }
ul.styled-list li.link-item > .icon { color: var(--c-info-dark); }
ul.styled-list li.link-item { color: var(--text-brown); font-weight: 500; margin-left: 2.1875rem; }
ul.list-downloads li > .icon { color: var(--icon-book); } 
/* Nhóm Dark Mode (Dùng trên nền tối) */
ul.list-options-dark li > .icon { color: var(--c-white); }
ul.list-features-dark li > .icon { color: var(--c-primary); }
ul.list-warning-dark li > .icon { color: var(--c-warning); }
.img-container-center { text-align: center; margin: var(--sp-7_5) 0; }
.img-post, .img-service { display: block; margin: 0 auto var(--sp-3_5) auto; max-width: 100%; height: auto; border-radius: var(--radius-md); }
.img-post { border: 1px solid var(--border-main); box-shadow: var(--shadow-sm); }
/*  PROMOTIONS & ARTICLES  */
.promotions { background-color: var(--bg-surface-alt); }
.promo-cards-container { display: grid; grid-template-columns: 1fr; gap: var(--sp-7_5); }
.promo-card-final { background-color: var(--bg-surface); border: 1px solid var(--border-main); border-radius: var(--radius-lg); padding: var(--sp-7_5); box-shadow: var(--shadow-sm); text-align: center; display: flex; flex-direction: column; transition: var(--transition); }
.promo-card-final:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); background-color: var(--bg-state-promo); }
.promo-details-final { margin-bottom: var(--sp-5); }
.promo-details-final h3 { font-size: var(--text-xl); margin: 0 0 10px 0; color: var(--text-dark); }
.promo-details-final h3 strong { color: var(--text-brown); }
.promo-details-final p { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.promo-code-wrapper-final { border: 2px dashed var(--c-border-gold); border-radius: var(--radius-md); padding: var(--sp-3_5) var(--sp-5); background-color: var(--bg-surface-alt); margin-top: auto; text-align: center; display: flex; justify-content: center; align-items: center; box-shadow: var(--shadow-action); }
.code-text-final { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-lg); }
.code-text-final .icon-voucher { width: 1.5rem; height: 1.5rem; color: var(--text-dark); fill: currentColor; flex-shrink: 0; }
.code-text-final .label { font-weight: var(--fw-bold); color: var(--text-dark); }
.code-text-final .promo-code { color: var(--text-brown); font-weight: 800; letter-spacing: 1px; }
.integrated-promo { margin-top: 1.5625rem; padding: 0.9375rem; border: 2px dashed var(--c-primary); border-radius: var(--radius-md); background-color: var(--bg-state-promo); text-align: center; }
.integrated-promo h4 { font-size: 1.1em; margin: 0 0 0.625rem 0; color: var(--text-dark); }
.integrated-promo h4 strong { color: var(--text-brown); }
.integrated-promo p { margin: 0; font-size: 0.9em; color: var(--text-secondary); }
.article-page-background, .page-background { background-color: var(--bg-surface-alt); padding-bottom: var(--sp-12); padding-top: var(--sp-12); }
.article-page-background .breadcrumb, .page-background .breadcrumb { padding-bottom: var(--sp-5); }
.article-layout-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7_5); }
.article-layout-grid > .article-main-column, .article-layout-grid > .sidebar { min-width: 0; }
.article-main-column { display: flex; flex-direction: column; gap: var(--sp-7_5); }
.article-main-column .section.faq { padding-top: 0; padding-bottom: 0; }
.article-main-column .section.faq .container { padding-left: 0; padding-right: 0; max-width: none; width: 100%; }
.article-main-column .section.faq .faq-columns { grid-template-columns: 1fr; }
.article-main-column .faq .section-title h2 { font-size: var(--text-2xl); }
.article-main-column .related-post-card { display: flex; align-items: flex-start; gap: var(--sp-3_5); padding: var(--sp-3_5); }
.article-main-column .related-post-card .related-post-image { width: 7.5rem; height: 5rem; flex-shrink: 0; object-fit: cover; margin: 0; }
.article-main-column .related-post-card .related-post-content { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.article-main-column .related-post-card .related-post-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-1) 0; line-height: 1.4; }
.article-main-column .related-post-card .article-time { font-size: var(--text-xs); color: var(--text-secondary); }
.article-content { background-color: var(--bg-body); padding: var(--sp-7_5); border-radius: var(--radius-lg); border: 1px solid var(--border-main); box-shadow: var(--shadow-sm); }
.status-expired { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 600; line-height: 1; text-transform: none; padding: 3px 8px 3px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; position: relative; top: -1px; }
.status-expired.is-promo { color: var(--c-danger-dark); background-color: var(--bg-expired-promo); border-color: var(--border-expired-promo); }
.status-expired.is-announcement { color: var(--text-expired-news); background-color: var(--bg-expired-news); border-color: var(--border-expired-news); }
.status-expired .icon { width: 11px; height: 11px; opacity: 0.9; position: relative; top: -1px; }
.expired-notice-text { color: var(--text-secondary); font-style: italic; display: block; margin-top: 0.625rem; font-size: 0.95em; }
.article-header { text-align: left; margin-bottom: var(--sp-5); }
.article-header .news-tag { margin-bottom: var(--sp-3_5); }
.article-header h1 { font-size: var(--text-3xl); line-height: var(--lh-tight); color: var(--text-dark); margin: 0 0 var(--sp-3_5) 0; font-weight: var(--fw-bold); }
.article-header .article-excerpt { font-size: var(--text-lg); color: var(--text-secondary); margin-top: var(--sp-3_5); padding-bottom: var(--sp-6_5); line-height: var(--lh-relaxed); border-bottom: 1px solid var(--border-main); }
.article-meta { margin-top: var(--sp-5); background-color: var(--bg-surface); border-left: 3px solid var(--c-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: var(--sp-3_5); display: flex; align-items: center; gap: var(--sp-3_5); box-shadow: var(--shadow-sm); }
.article-meta .meta-author { display: flex; align-items: center; gap: var(--sp-2); }
.article-meta .meta-author img { width: 4rem; height: 4rem; border-radius: var(--radius-full); border: 1px solid var(--border-main); box-shadow: var(--shadow-sm); }
.author-details { display: flex; flex-direction: column; gap: var(--sp-1); line-height: var(--lh-base); }
.meta-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); }
.meta-author strong, .author-details .author-name-label { font-weight: var(--fw-semibold); color: var(--text-dark); }
.meta-updated { color: var(--c-success-dark); font-weight: var(--fw-medium); transition: opacity 0.3s ease; }
.meta-updated:hover { opacity: 0.8; }
.article-featured-image { margin-bottom: var(--sp-7_5); }
.article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { color: var(--text-dark); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.article-body > h2:first-child, .article-body > h3:first-child, .article-body > h4:first-child { margin-top: 0; }
.article-body h2 { font-size: var(--text-xl); position: relative; padding-bottom: var(--sp-2);  }
.article-body h3 { font-size: var(--text-lg); margin-top: var(--sp-6_5); }
.article-body h4 { font-size: var(--text-md); margin-top: var(--sp-6); }
.article-body h5 { font-size: var(--text-base); text-transform: uppercase; color: var(--text-secondary); margin-top: var(--sp-5);}
.article-body h6 { font-size: var(--text-sm); font-style: italic; color: var(--text-secondary); font-weight: var(--fw-medium); margin-top: var(--sp-5); }
.author-name { padding-bottom: 0; }
.faq-content h2 { font-size: var(--text-3xl); font-weight: var(--fw-bold); color: var(--text-dark); margin-top: 1em; margin-bottom: 0.8em; line-height: var(--lh-tight); }
.faq-content h3 { font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--text-dark); margin-top: 2.0em; margin-bottom: 0.8em; line-height: var(--lh-tight); }
.faq-content h4 { font-size: var(--text-lg); font-weight: var(--fw-semibold); color: var(--text-dark); margin-top: 1.8em; margin-bottom: 0.8em; line-height: var(--lh-tight); }
.faq-content h5 { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-dark); margin-top: 1.8em; margin-bottom: 0.8em; line-height: var(--lh-tight); }
.faq-content h2:first-child, .faq-content h3:first-child, .faq-content h4:first-child, .faq-content h5:first-child { margin-top: 1em; }
.article-body blockquote, .faq-content blockquote { margin: var(--sp-7_5) 0; padding: var(--sp-5) var(--sp-7_5); background-color: var(--bg-surface-alt); border-left: 5px solid var(--c-primary); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; color: var(--text-secondary); }
.article-body blockquote p, .faq-content blockquote p { margin: 0; line-height: var(--lh-relaxed); }
.article-body blockquote p:last-child, .faq-content blockquote p:last-child { margin-bottom: 0; }
.featured-image { margin-bottom: var(--sp-10); }
.featured-image img { border-radius: var(--radius-md); box-shadow: var(--shadow-hero); }
.featured-image figcaption { text-align: center; margin-top: var(--sp-2_5); font-size: var(--text-sm); color: var(--text-secondary); font-style: italic; }
.article-footer { margin-top: 0; padding: var(--sp-6_5) 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
.article-tags, .article-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2_5); border-top: 1px solid var(--border-main); padding: var(--sp-3_5); width: 100%; }
.article-share {border-bottom: 1px solid var(--border-main); }
.article-tags { margin-bottom: calc(-1 * var(--sp-5)); }
.tags-title, .share-title { font-weight: var(--fw-semibold); color: var(--text-dark); font-size: var(--text-base); margin-right: var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); }
.article-tags a { background-color: var(--bg-surface-alt); padding: var(--sp-2) var(--sp-3_5); border-radius: var(--radius-sm); color: var(--text-brown); font-weight: var(--fw-medium); font-size: var(--text-sm); border: 1px solid var(--border-main); box-shadow: var(--shadow-sm); }
.article-tags a:hover { background-color: var(--bg-accent); border-color: var(--bg-accent); color: var(--text-on-accent); }
.social-share-buttons { display: flex; gap: 10px;}
.article-share .btn-share { display: inline-flex; align-items: center; gap: var(--sp-0_5); padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-semibold); color: var(--c-white) !important; line-height: 1; text-decoration: none; transition: var(--transition); border: 1px solid transparent;}
.article-share .btn-share:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.article-share .btn-share .icon { width: 1rem; height: 1rem; fill: currentColor; margin: 0; position: relative; top: -1px;}
.btn-fb { background-color: var(--c-facebook); border-color: var(--c-facebook); }
.btn-tw { background-color: var(--c-twitter); border-color: var(--c-twitter); }
.author-box { margin-bottom: var(--sp-7_5); padding: var(--sp-7_5); background-color: var(--bg-surface); border-radius: var(--radius-lg); border-top: 3px solid var(--c-primary); display: flex; align-items: center; gap: var(--sp-7_5); box-shadow: var(--shadow-sm); }
.author-box .author-avatar { border-radius: var(--radius-full); border: 1px solid var(--border-main); width: var(--sz-avatar); height: var(--sz-avatar); box-shadow: var(--shadow-sm); }
.author-link { font-weight: var(--fw-semibold); color: var(--text-brown); font-size: var(--text-sm); }
.author-link:hover { text-decoration: underline; }
.author-bio {margin: var(--sp-1) 0 var(--sp-2) 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-base);}
.about-company-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; align-items: stretch; }
.author-box--about { display: inline-block; border: 1px solid var(--border-main); border-radius: var(--radius-md); font-size: var(--text-sm); margin: var(--sp-3_5) 0; }
.author-box--about .author-name { margin-bottom: 8px; }
.author-box--about .author-bio { font-size: var(--text-sm); line-height: 1.6; }
.news { background-color: var(--bg-surface-alt); }
.news-tag, .promo-overlay .promo-tag { display: inline-block; background-color: var(--bg-accent); color: var(--text-on-accent); padding: var(--sp-1) var(--sp-4); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: var(--fw-semibold); margin-bottom: var(--sp-2_5); box-shadow: var(--shadow-sm); transition: all 0.3s ease; }
.news-tag:hover, .promo-overlay .promo-tag:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-hover); cursor: pointer; }
.news-featured-top { display: flex; gap: var(--sp-3_5); align-items: center; margin-bottom: var(--sp-7_5); background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-state-promo) 100%); padding: var(--sp-5); border-radius: var(--radius-lg); border: 1px solid var(--border-main); box-shadow: var(--shadow-brand); transition: var(--transition); }
.news-featured-top:hover { border-color: var(--c-border-news-hover); box-shadow: var(--shadow-brand-hover); transform: var(--lift-sm); }
.news-featured-top img { border-radius: var(--radius-lg); width: 80%; max-width: 20rem; aspect-ratio: 3/2; box-shadow: var(--shadow-hero); }
.news-featured-content { flex: 1; }
.news-featured-top h3 { font-size: var(--text-xl); }
.news-featured-top:hover h3 { color: var(--text-brown); }
.news-featured-top p { color: var(--text-main); font-size: var(--text-base); margin-top: 0.75rem; }
.news-list-bottom { display: flex; flex-direction: column; gap: var(--sp-3_5); }
.news-list-item-row { display: flex; align-items: center; gap: var(--sp-7_5); background-color: var(--bg-body); padding: var(--sp-5); border-radius: var(--radius-lg); transition: var(--transition); border: 1px solid var(--border-main); box-shadow: var(--shadow-sm); }
.news-list-item-content { flex: 1; min-width: 0;}
.news-list-item-row:hover { box-shadow: var(--shadow-hover); transform: var(--lift-sm); }
.news-list-item-row img { width: 11.25rem; height: 7.5rem; border-radius: var(--radius-md); flex-shrink: 0; aspect-ratio: 3/2; }
.news-list-item-row h3 { font-size: var(--text-md); font-weight: var(--fw-semibold); line-height: 1.4; }
.news-list-item-row p { margin-bottom: 0; color: var(--text-secondary); font-size: var(--text-base); }
.news-featured-content .news-tag { display: inline-block; margin-bottom: var(--sp-2_5); box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.2); }
.news-list-item-content .news-category { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; background: none; padding: 0; color: var(--text-brown); font-weight: 600; }
.news-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-bottom: 0.625rem; font-size: var(--text-sm); color: var(--text-secondary); width: 100%; }
.news-meta .news-category .category-icon { width: 1rem; height: 1rem; color: var(--text-secondary); opacity: 0.8; }
.news-list-item-content h3, .news-featured-content h3 { margin-bottom: var(--sp-2); }
.news-list-item-content .news-date, .news-featured-content .news-date, .related-post-content .article-time { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; font-weight: 400; flex-shrink: 0; color: var(--text-secondary); }
.news-date .icon { color: var(--c-gray-600); font-size: var(--text-base); line-height: 1; width: 0.875rem; height: 0.875rem; position: relative; top: -1px; }
.news-date.updated-date, .news-date.updated-date .icon, .widget-posts .post-date.updated-date, .article-main-column .related-post-card .article-time.updated-date, .article-main-column .related-post-card .article-time.updated-date .icon { color: var(--c-success-dark); }
.related-post-content .related-post-title { margin: var(--sp-2_5) 0; font-size: var(--text-md); font-weight: var(--fw-semibold); line-height: 1.4; }
.related-post-content .icon { color: var(--c-gray-600); }
.latest-posts-section { margin-top: var(--sp-16); }
.category-card { display: flex; align-items: center; gap: var(--sp-2_5); padding: var(--sp-5); box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid var(--border-main); background-color: var(--bg-surface); border-radius: var(--radius-lg); }
.category-card:hover { background-color: var(--bg-surface); transform: var(--lift-md); box-shadow: var(--shadow-hover); }
.category-card:hover .category-card-title { color: var(--text-brown); }
.category-card:hover .category-card-icon { color: var(--icon-hover); transform: scale(1.1); }
.category-card-icon { font-size: var(--text-3xl); color: var(--icon-static); width: 2.5rem; flex-shrink: 0; text-align: center; margin-top: 5px; transition: color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.category-card-title { font-size: var(--text-lg); margin-bottom: var(--sp-2); transition: color 0.2s ease; }
.category-card-title .article-count-badge { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--text-brown); }
.category-card-desc { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-base); }
.search-form { display: flex; position: relative; }
.search-input { width: 100%; padding: var(--sp-3) var(--sp-10) var(--sp-3) var(--sp-3_5); border: 1px solid var(--border-main); border-radius: var(--radius-md); font-size: var(--text-sm); }
.search-input:focus { outline: none; border-color: var(--text-brown); box-shadow: 0 0 0 2px rgba(139,69,19,0.2); }
.search-button { position: absolute; right: 0; top: 0; height: 100%; width: 2.75rem; background: none; border: none; cursor: pointer; color: var(--text-secondary); font-size: var(--text-base); }
.search-button:hover { color: var(--text-brown); }
.kb-search-container { margin: var(--sp-7_5) 0; margin-left: auto; margin-right: auto; }
.kb-search-container .search-form { position: relative; }
.kb-search-container .search-input { width: 100%; padding: var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-6_5); border: 1px solid var(--border-main); border-radius: var(--radius-lg); font-size: var(--text-base); box-shadow: var(--shadow-sm); }
.kb-search-container .search-input:focus { outline: none; border-color: var(--text-brown); box-shadow: 0 0 0 3px rgba(139,69,19,0.2); }
.kb-search-container .search-button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 2.75rem; width: 2.75rem; font-size: var(--text-xl); background: none; border: none; cursor: pointer; color: var(--text-secondary); }
.kb-search-container .search-button:hover { color: var(--text-brown); }
/* --- AJAX LIVE SEARCH DROPDOWN --- */
.ajax-search-dropdown { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background-color: var(--bg-body); border: 1px solid var(--border-main); border-radius: var(--radius-md); box-shadow: var(--shadow-hover); z-index: var(--z-dropdown); max-height: 350px; overflow-y: auto; display: none; }
.ajax-search-list { list-style: none; margin: 0; padding: 0; }
.ajax-search-list li { border-bottom: 1px solid var(--border-main); }
.ajax-search-list li:last-child { border-bottom: none; }
.ajax-search-list a { display: block; padding: var(--sp-2_5) var(--sp-3_5); font-size: var(--text-sm); color: var(--text-main); transition: background-color 0.2s ease, color 0.2s ease; line-height: var(--lh-base); text-decoration: none; }
.ajax-search-list a:hover { background-color: var(--bg-surface-alt); color: var(--text-brown); }
.ajax-search-loading { padding: var(--sp-3_5); text-align: center; color: var(--text-secondary); font-size: var(--text-sm); font-style: italic; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2); margin-top: var(--sp-7_5); padding: var(--sp-2_5) 0; }
.pagination .pagelink, .pagination strong { display: inline-flex; align-items: center; justify-content: center; padding: var(--sp-2) var(--sp-3_5); min-width: 2.5rem; height: 2.5rem; border: 1px solid var(--border-main); border-radius: var(--radius-md); background-color: var(--bg-surface); color: var(--text-secondary); font-weight: var(--fw-medium); font-size: var(--text-sm); text-align: center; text-decoration: none; transition: all 0.2s ease; cursor: pointer; }
.pagination .pagelink:hover { border-color: var(--text-brown); color: var(--text-brown); background-color: var(--bg-state-promo); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.pagination .pagelink--active, .pagination strong { background-color: var(--text-brown); border-color: var(--text-brown); color: var(--c-white); font-weight: var(--fw-bold); cursor: default; box-shadow: none; transform: none; }
.pagination .pagelink--active:hover, .pagination strong:hover { background-color: var(--text-brown); border-color: var(--text-brown); color: var(--c-white); transform: none; }
.pagination strong { padding-left: var(--sp-3_5); padding-right: var(--sp-3_5); }
/*  SIDEBAR & WIDGETS  */
.sidebar { position: sticky; top: 6.25rem; align-self: start; }
.sidebar .card:hover { transform: none; box-shadow: var(--shadow-sm); }
.widget { margin-bottom: var(--sp-7_5); }
.widget-title { font-size: var(--text-lg); margin: 0 0 var(--sp-5) 0; padding-bottom: var(--sp-3_5); border-bottom: 1px solid var(--border-main); display: flex; align-items: center; gap: var(--sp-2_5); }
.widget-title .icon { color: var(--icon-static); }
.widget-posts .widget-title .icon { color: var(--text-secondary); }
.widget-posts .post-list { list-style: none; padding: 0; margin: 0; }
.widget-posts .post-list li { margin-bottom: var(--sp-3_5); padding-bottom: var(--sp-3_5); border-bottom: 1px solid var(--border-main); }
.widget-posts .post-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.widget-posts .post-list a { display: flex; align-items: flex-start; gap: var(--sp-3_5); }
.widget-posts .post-list a:hover .post-title { color: var(--text-brown); }
.widget-posts .post-list img { width: 7.5rem; height: 5rem; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; aspect-ratio: 3/2; }
.widget-posts .post-info { display: flex; flex-direction: column; }
.widget-posts .post-title { font-size: var(--text-sm); font-weight: var(--fw-semibold); line-height: 1.4; color: var(--text-dark); margin-bottom: var(--sp-0_5); transition: color 0.2s ease; }
.widget-posts .post-date { font-size: var(--text-xs); color: var(--text-secondary); }
.widget-promo a { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.widget-promo img { width: 100%; display: block; transition: transform 0.3s ease; }
.widget-promo a:hover img { transform: scale(1.05); }
.promo-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); padding: var(--sp-10) var(--sp-5) var(--sp-5); color: var(--c-white); }
.promo-overlay h4 { color: var(--c-white); font-size: var(--text-md); margin-bottom: var(--sp-2); }
.promo-overlay .promo-date { margin: 0; font-size: var(--text-sm); }
.widget-categories .category-list { list-style: none; padding: 0; margin: 0; }
.widget-categories .category-list li a { display: flex; align-items: center; padding: var(--sp-2_5) 0; border-bottom: 1px solid var(--border-main); font-weight: var(--fw-medium); transition: color 0.2s ease; }
.widget-categories .category-list li:last-child a { border-bottom: none; }
.widget-categories .category-list li a:hover { color: var(--text-brown); }
.widget-categories .category-list li a:hover > .icon, .widget-categories .category-list li a:hover > .icon:first-child, .widget-categories .category-list li a:hover > .icon:last-of-type { color: var(--icon-hover); }
.widget-categories .category-list .has-submenu > a { display: flex; justify-content: flex-start; align-items: center; }
.widget-categories .category-list > li > a > .icon:first-child { color: var(--icon-static); width: 1.25rem; text-align: center; flex-shrink: 0; margin-right: var(--sp-2_5); transition: color 0.2s ease; }
.widget-categories .category-list > li.has-submenu > a > .icon:last-of-type { color: var(--icon-static); margin-left: auto; font-size: var(--text-xs); transition: transform 0.3s ease; transform: rotate(180deg); }
.widget-categories .category-list .has-submenu.open > a .icon:last-of-type { transform: rotate(0deg); }
.widget-categories .widget-submenu { list-style: none; padding-left: var(--sp-5); margin: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out; }
.widget-categories .has-submenu.open > .widget-submenu { max-height: 500px; padding-top: var(--sp-2_5); }
.widget-categories .widget-submenu li a { display: flex; justify-content: space-between; align-items: center; font-weight: var(--fw-normal); padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); position: relative; border-top: 1px solid var(--border-main); border-bottom: none; }
.widget-categories .widget-submenu li:first-child a { border-top: none; }
.widget-categories .widget-submenu li a::before { content: '›'; color: var(--text-secondary); position: absolute; left: 0; font-weight: var(--fw-bold); font-size: 1.2em; top: 50%; transform: translateY(-50%); }
.widget-categories .category-list li.has-badge-link { position: relative; }
.widget-categories .category-list li a.link-with-gap { padding-right: 2.5rem; }
.widget-submenu li a span:last-of-type { font-size: var(--text-sm); font-weight: var(--fw-normal); color: var(--icon-static); }
/*  TOC & TABLES  */
.article-toc { background-color: var(--bg-surface-alt); border: 1px solid var(--border-main); padding: var(--sp-5) var(--sp-6_5); border-radius: var(--radius-md); transition: all 0.3s ease; }
p:has(+ #article-toc) { margin-bottom: var(--sp-7_5); }
.article-toc__header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; position: relative; padding-bottom: var(--sp-3_5); margin-bottom: var(--sp-3_5); border-bottom: 1px solid var(--border-main); transition: margin-bottom 0.4s ease-in-out, padding-bottom 0.4s ease-in-out, border-bottom 0.4s ease-in-out; }
.article-toc__header strong { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--text-dark); display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.article-toc__header .icon { color: var(--text-brown); }
.article-toc__toggle { background: transparent; border: none; cursor: pointer; padding: 3px; color: var(--text-secondary); font-size: var(--text-base); width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.article-toc__toggle .icon { transition: transform 0.3s ease; font-size: 1.2em; }
.article-toc__toggle .icon-plus { display: none; }
.article-toc__toggle .icon-minus { display: inline-block; }
.article-toc__toggle[aria-expanded="false"] .icon-plus { display: inline-block; }
.article-toc__toggle[aria-expanded="false"] .icon-minus { display: none; }
.article-toc.is-collapsed .article-toc__toggle .icon-plus { display: inline-block; }
.article-toc.is-collapsed .article-toc__toggle .icon-minus { display: none; }
.article-toc__list { list-style: none; padding-left: 0; margin: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, visibility 0.4s ease-in-out, opacity 0.4s ease-in-out, margin-top 0.4s ease-in-out; max-height: 4000px; visibility: visible; opacity: 1; }
.article-toc__list[hidden] { max-height: 0; margin-top: 0; visibility: hidden; opacity: 0; }
.article-toc__toggle[aria-expanded="false"] + .article-toc__list { max-height: 0; margin-top: 0; visibility: hidden; opacity: 0; }
.article-toc__toggle[aria-expanded="false"] ~ .article-toc__header, .article-toc__toggle[aria-expanded="false"].article-toc__header { margin-bottom: 0; padding-bottom: 0; border-bottom-color: transparent; }
.article-toc__header[data-collapsed="true"] { margin-bottom: 0; padding-bottom: 0; border-bottom-color: transparent; }
.article-toc.is-collapsed .article-toc__list { max-height: 0; margin-top: 0; visibility: hidden; opacity: 0; }
.article-toc.is-collapsed .article-toc__header { margin-bottom: 0; padding-bottom: 0; border-bottom-color: transparent; }
.article-toc__list, .article-toc .sidebar-submenu { list-style: none; padding-left: 0; margin-top: var(--sp-2_5); }
.article-toc__list > li { margin-bottom: var(--sp-2_5); line-height: var(--lh-base); }
.article-toc__list > li:last-child { margin-bottom: 0; }
.article-toc__list a { color: var(--text-main); text-decoration: none; display: inline-block; padding: 2px 0; }
.article-toc__list a:hover { color: var(--text-brown); text-decoration: none; }
.article-toc .sidebar-submenu { padding-left: var(--sp-5); margin-top: var(--sp-2_5); }
.article-toc .sidebar-submenu .sidebar-submenu { padding-left: var(--sp-5); }
ul.styled-list { list-style: none; padding-left: 0; margin-top: var(--sp-3_5); margin-bottom: var(--sp-3_5); }
ul.styled-list li { position: relative; padding-left: 2.1875rem; margin-bottom: var(--sp-2_5); line-height: var(--lh-relaxed); color: var(--text-main); }
ul.styled-list li > .icon { display: inline-flex; align-items: center; justify-content: center; font-size: .8em; width: 1rem; height: 1rem; position: absolute; left: 0; top: 5px; }
.styled-table { width: 100%; margin: var(--sp-7_5) 0; border-collapse: collapse; font-size: var(--text-sm); font-family: var(--font-sans); box-shadow: var(--shadow-sm); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-main); }
/* TABLE RESPONSIVE: Wrap <table class="styled-table"> trong <div class="table-wrapper"> để cuộn ngang trên mobile, giữ nguyên cấu trúc bảng gốc */
.table-wrapper { width: 100%; margin: var(--sp-7_5) 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--border-main); background: linear-gradient(to right, var(--bg-body) 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.08) 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)), radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
.table-wrapper .styled-table { margin: 0; border: none; box-shadow: none; border-radius: 0; min-width: 40rem; /* đảm bảo bảng không bị co hẹp quá gây xấu */ }
.table-wrapper:focus-visible { outline: 2px solid var(--c-accent-brown); outline-offset: 2px; }
.styled-table thead tr { background-color: var(--bg-dark-alt); color: var(--text-inverse); text-align: left; font-weight: var(--fw-semibold); }
.styled-table th, .styled-table td { padding: var(--sp-3_5) var(--sp-5); vertical-align: middle; border: 1px solid var(--border-main); }
.styled-table tbody tr { border-bottom: 1px solid var(--border-main); }
.styled-table tbody tr:nth-of-type(even) { background-color: var(--bg-surface); }
.styled-table tbody tr:last-of-type { border-bottom: none; }
.styled-table tbody tr:hover { background-color: var(--bg-surface-alt); }
.styled-table.comparison-table thead tr { background-color: var(--bg-dark); }
.styled-table.comparison-table tbody td:first-child { font-weight: var(--fw-semibold); background-color: var(--bg-surface-alt); color: var(--text-dark); }
.styled-table.comparison-table thead th:first-child { background-color: var(--bg-dark); color: var(--text-inverse); }
.styled-table.comparison-table .highlight { background-color: var(--bg-state-warning); }
.styled-table .fa-check { color: var(--c-success); }
.styled-table .fa-times { color: var(--c-danger-dark); }
.styled-table .best-for-row td { background-color: var(--bg-surface-alt); font-style: italic; font-weight: 500; }
.styled-table td strong { color: var(--text-brown); }
.styled-table td img { display: inline-block; vertical-align: middle; margin-right: var(--sp-2); max-height: 1.5rem; width: auto; margin-bottom: 2px; }
/*  ALERTS & MISC  */
.no-articles-notice { text-align: center; padding: var(--sp-10); color: var(--text-secondary); font-style: italic; font-size: var(--text-base); background-color: var(--bg-surface); border-radius: var(--radius-md); border: 1px dashed var(--border-main); margin: var(--sp-5) 0; }
.expired-warning { background-color: var(--bg-state-warning); border: 1px solid var(--c-primary); border-left-width: 5px; padding: var(--sp-3_5) var(--sp-5); margin: var(--sp-7_5) 0; border-radius: var(--radius-md); color: var(--text-main); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.expired-warning h2 { display: flex; align-items: center; color: var(--text-brown); }
.expired-warning h2 .icon { margin-right: var(--sp-2); color: var(--c-danger-dark); font-size: 0.9em; }
.expired-warning .small-italic { display: block; margin-top: var(--sp-3_5); margin-bottom: var(--sp-3_5); font-weight: 500; text-align: center; }
.expired-warning p { margin-bottom: var(--sp-2); line-height: var(--lh-base); }
.expired-warning p:last-child { margin-bottom: 0; }
.expired-warning a { color: var(--text-brown); font-weight: var(--fw-semibold); }
.expired-warning a:hover { text-decoration: underline; }
.info-box { margin: var(--sp-7_5) 0; padding: var(--sp-5); background-color: var(--bg-state-info); border-left: 4px solid var(--c-info-dark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.info-box p { margin: 0; color: var(--text-dark); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.info-box strong { color: var(--c-info-dark); }
.policy-lastmod-box { display: inline-block; margin: var(--sp-3) auto 0; padding: var(--sp-2) var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.policy-lastmod-box p { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); line-height: 1.3; color: var(--text-secondary); }
.policy-lastmod-box .icon { width: 0.875rem; height: 0.875rem; color: var(--c-info-dark); flex-shrink: 0; }
.policy-lastmod-box strong { color: var(--c-info-dark); font-weight: var(--fw-semibold); }
.policy-lastmod-box time { color: var(--text-main); font-variant-numeric: tabular-nums; }
.mylink { border-radius: var(--radius-sm); font-weight: var(--fw-normal); border: 1px solid var(--border-main); background-color: var(--bg-surface); color: var(--text-dark); padding: 0 var(--sp-2_5); transition: all 0.2s ease; }
.mylink:hover, .mylink:active { border: 1px solid var(--border-dark); background-color: var(--bg-dark); color: var(--text-highlight); }
.text-link { color: var(--text-brown); font-weight: var(--fw-semibold); text-decoration: none; }
.text-link:hover { text-decoration: underline; color: var(--text-brown); }
.small-italic { font-size: var(--text-sm); color: var(--text-secondary); font-style: italic; }
.normal-italic { font-style: italic; color: var(--text-secondary); }
.bold-italic { font-style: italic; font-weight: var(--fw-semibold); color: var(--text-main); }
.code { font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: 0.9em; background-color: var(--c-code-bg); color: var(--c-code-text); padding: 0.2em 0.4em; border-radius: var(--radius-sm); border: 1px solid var(--border-main); }
.bold-gray-bg { font-weight: var(--fw-bold); color: var(--text-dark); background-color: var(--bg-muted); padding: .1em .25em; border-radius: var(--radius-sm); }
.bold-light-bg { font-size: .9em; font-weight: var(--fw-semibold); color: var(--text-dark); background-color: var(--bg-surface-alt); padding: var(--sp-1) var(--sp-2_5); border-radius: var(--radius-sm); border: 1px solid var(--border-main); }
.code-dark-bg { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: .9em; background-color: var(--bg-dark); color: var(--text-inverse-muted); padding: 1.25em; border-radius: var(--radius-md); overflow-x: auto; white-space: pre-wrap; word-wrap: break-word; margin: var(--sp-5) 0; border: 1px solid var(--border-dark-alt); box-shadow: var(--shadow-sm); line-height: 1.6; tab-size: 4; }
.screen-text { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: .9em; background-color: var(--bg-surface-alt); color: var(--text-dark); padding: 1.25em; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); margin: var(--sp-5) 0; white-space: pre-wrap; word-wrap: break-word; overflow-x: auto; line-height: 1.6; tab-size: 4; }
.mybox { display: inline-block; padding: .6em 1.2em; max-width: 100%; border: 1px solid var(--border-main); border-radius: var(--radius-md); background-color: var(--bg-surface); box-shadow: var(--shadow-sm); text-align: left; font-size: var(--text-sm); margin: var(--sp-3_5) 0; line-height: 1.5; }
/* --- CÁC BOX GHI CHÚ TRONG BÀI VIẾT KỸ THUẬT --- */
.alert-box { margin: var(--sp-7_5) 0; padding: var(--sp-5); border-radius: var(--radius-md); border-left: 4px solid transparent; display: flex; gap: var(--sp-3_5); align-items: flex-start; }
.alert-box .alert-icon { flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: 2px; }
.alert-box .alert-content { flex: 1; min-width: 0; }
.alert-box .alert-content p { margin: 0; line-height: var(--lh-relaxed); font-size: var(--text-base); }
.alert-box .alert-content p:not(:last-child) { margin-bottom: var(--sp-2_5); }
.alert-box .alert-title { font-weight: var(--fw-bold); font-size: var(--text-md); margin-bottom: var(--sp-1); }
.alert-success { background-color: var(--bg-state-success); border-color: var(--c-success); }
.alert-success .alert-icon { color: var(--c-success); }
.alert-success .alert-title { color: var(--text-alert-success-title); }
.alert-warning { background-color: var(--bg-state-warning); border-color: var(--c-warning); }
.alert-warning .alert-icon { color: var(--c-warning); }
.alert-warning .alert-title { color: var(--text-alert-warning-title); }
.alert-danger { background-color: var(--c-alert-danger-bg); border-color: var(--c-danger-dark); }
.alert-danger .alert-icon { color: var(--c-danger-dark); }
.alert-danger .alert-title { color: var(--text-alert-danger-title); }
.alert-tip { background-color: var(--c-blue-50); border-color: var(--c-info-dark); }
.alert-tip .alert-icon { color: var(--c-info-dark); }
.alert-tip .alert-title { color: var(--text-alert-tip-title); }
/* --- SIMPLE HIGHLIGHT BOXES --- */
.highlight-box { margin: var(--sp-7_5) 0; padding: var(--sp-5); background-color: var(--bg-surface-alt); border-left: 4px solid var(--c-primary-hover); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.highlight-box p { margin: 0; color: var(--text-dark); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.highlight-box strong { color: var(--text-brown); }
.success-box { margin: var(--sp-7_5) 0; padding: var(--sp-5); background-color: var(--bg-state-success); border-left: 4px solid var(--c-success); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.success-box p { margin: 0; color: var(--text-dark); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.success-box strong { color: var(--c-success-dark); }
.warning-box { margin: var(--sp-7_5) 0; padding: var(--sp-5); background-color: var(--bg-state-warning); border-left: 4px solid var(--c-warning); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.warning-box p { margin: 0; color: var(--text-dark); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.warning-box strong { color: var(--c-alert-warning-title); }
.danger-box { margin: var(--sp-7_5) 0; padding: var(--sp-5); background-color: var(--c-alert-danger-bg); border-left: 4px solid var(--c-danger-dark); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.danger-box p { margin: 0; color: var(--text-dark); font-size: var(--text-base); line-height: var(--lh-relaxed); }
.danger-box strong { color: var(--c-danger-dark); }
/* --- KHUNG CODE / TERMINAL TỐI GIẢN --- */
.terminal-box { margin: var(--sp-7_5) 0; border-radius: var(--radius-md); overflow: hidden; background-color: var(--bg-dark); box-shadow: var(--shadow-sm); border: 1px solid var(--border-dark-alt); }
.terminal-header { background-color: var(--c-terminal-header); padding: 8px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-dark-alt); }
.terminal-title { color: var(--c-terminal-title); font-size: 0.75rem; font-family: var(--font-sans); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.btn-copy-code { background-color: var(--bg-surface-alt); color: var(--text-main); border: 1px solid var(--border-main); border-radius: var(--radius-sm); padding: 4px 12px; font-size: 0.75rem; font-family: var(--font-sans); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s ease; }
.btn-copy-code:hover { background-color: var(--bg-surface); border-color: var(--border-strong); color: var(--text-dark); }
.btn-copy-code.copied { background-color: #2ECC71; color: var(--c-white); border-color: #2ECC71; }
.terminal-body { padding: 16px; margin: 0; overflow-x: auto; }
.terminal-body code { display: block; font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace; font-size: 0.9em; color: var(--text-inverse-muted); white-space: pre-wrap; word-wrap: break-word; background: transparent; border: none; padding: 0; line-height: 1.6; tab-size: 4; }
/* --- BRIGHT DATA COPY BOX (High Contrast) --- */
.data-copy-box { margin: var(--sp-7_5) 0; border: 1px solid var(--border-main); border-radius: var(--radius-md); overflow: hidden; background-color: var(--bg-surface); box-shadow: var(--shadow-sm); }
.data-copy-box .terminal-header { background-color: var(--bg-state-promo); border-bottom: 2px solid var(--c-border-yellow);}
.data-copy-box .terminal-title { color: var(--text-brown); }
.data-copy-box .btn-copy-code { background-color: var(--bg-surface-alt); color: var(--text-main); border: 1px solid var(--border-main); }
.data-copy-box .btn-copy-code:hover { background-color: var(--c-primary); color: var(--text-on-accent); border-color: var(--c-primary); }
.data-copy-box .terminal-body { background-color: transparent; color: var(--text-dark); font-family: var(--font-sans); font-size: var(--text-base); white-space: pre-wrap; }
.data-copy-box code { font-family: var(--font-sans); font-size: 0.9em; color: var(--text-main); }
/* --- CTA BOX TRONG EDITOR --- */
.cta-box { display: block; margin: var(--sp-8) 0; padding: var(--sp-8) var(--sp-6); text-align: center; border: 1px solid var(--border-main); border-radius: var(--radius-md); background-color: var(--bg-surface); box-shadow: var(--shadow-sm); }
.cta-box .cta-title { font-size: var(--text-xl); font-weight: var(--fw-bold); display: block; margin-bottom: var(--sp-2_5); color: var(--text-dark); }
.cta-box .cta-desc { margin-bottom: var(--sp-5); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.cta-box .cta-actions { display: flex; justify-content: center; gap: var(--sp-3_5); flex-wrap: wrap; }
.btn-outline { background-color: var(--bg-surface); color: var(--text-dark); border: 1px solid var(--border-main); }
.btn-outline:hover { background-color: var(--bg-surface-alt); border-color: var(--text-brown); color: var(--text-brown); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.page-policy .article-body h2 { margin-top: 2em; }
.page-policy .article-header { text-align: center; margin-bottom: 0; }
.page-policy .article-excerpt { border-bottom: none; padding-bottom: 0; margin-top: var(--sp-2_5); }
.youtube, .video-responsive-wrapper { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; margin: var(--sp-7_5) 0; border-radius: var(--radius-md); background-color: var(--bg-dark); }
.youtube iframe, .video-responsive-wrapper iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }
.tag-group-list { list-style: none; padding: 0; margin: 0; }
.tag-group-list li a { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2_5) 0; font-weight: var(--fw-medium); color: var(--text-main); transition: color 0.2s ease; }
.tag-group-list li:not(:last-child) a { border-bottom: 1px solid var(--border-main); }
.tag-group-list li a:hover { color: var(--text-brown); }
.tag-count { background-color: var(--bg-accent); padding: var(--sp-1) var(--sp-2_5); border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--text-on-accent); font-weight: normal; box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; }
.tag-count:hover { transform: scale(1.15); }
.payment-methods-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-7_5); padding-top: var(--sp-3_5); }
.payment-methods-logos img { height: 2.1875rem; max-width: 6.875rem; }
.payment-notice { background-color: var(--bg-state-promo); border: 1px solid var(--c-border-yellow); color: var(--text-brown); padding: var(--sp-3_5); border-radius: var(--radius-md); margin-top: var(--sp-5); }
.payment-notice p { margin: 0; font-weight: 500; }
.bank-details-list { list-style: none; padding: 0; margin: 0; }
.bank-details-list li { display: flex; align-items: center; padding: var(--sp-3_5) 0; gap: var(--sp-3_5); }
.bank-details-list li:not(:last-child) { border-bottom: 1px dashed var(--border-main); }
.bank-details-list .label { color: var(--text-secondary); flex-basis: 35%; flex-shrink: 0; }
.bank-details-list .value { font-weight: var(--fw-semibold); color: var(--text-dark); display: flex; justify-content: space-between; align-items: center; width: 100%; }
.copy-btn { background: none; border: 1px solid var(--border-main); cursor: pointer; padding: 3px 8px; border-radius: var(--radius-sm); flex-shrink: 0; }
.copy-btn:hover { background-color: var(--bg-surface-alt); }
.steps-list { padding-left: 20px; }
.steps-list li { margin-bottom: var(--sp-2_5); line-height: var(--lh-relaxed); }
.contact-info-card .widget-title { border-bottom: 1px solid var(--border-main); padding-bottom: var(--sp-3_5); margin-bottom: var(--sp-5); }
.contact-info-card .info-list { list-style: none; padding: 0; margin: 0; position: relative; }
.contact-info-card .info-list::before { content: ''; position: absolute; left: 10px; top: 15px; bottom: 15px; width: 2px; background-color: var(--border-main); border-radius: 2px; }
.contact-info-card .info-list li { display: flex; align-items: flex-start; gap: var(--sp-3_5); padding: var(--sp-2_5) 0; position: relative; }
.contact-info-card .info-list .icon { font-size: var(--text-base); color: var(--text-brown); margin-top: 5px; width: 1.375rem; height: 1.375rem; line-height: 1.375rem; text-align: center; flex-shrink: 0; background-color: var(--bg-body); position: relative; z-index: var(--z-lift); }
.contact-info-card .info-list p { margin: 0; line-height: var(--lh-relaxed); }
.contact-info-card .info-list a { font-weight: var(--fw-medium); }
.map-container-card { padding: var(--sp-2_5); height: 100%; }
.map-wrapper, .youtube-wrapper { position: relative; width: 100%; aspect-ratio: 3 / 2; }
.map-iframe { position: absolute; inset: 0;  width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg);  box-shadow: var(--shadow-hero); padding: var(--sp-1);}
.tag-groups-grid { display: block; column-count: 1; column-gap: var(--sp-7_5); }
.tag-groups-grid > .card { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; margin-bottom: var(--sp-7_5); display: inline-block; width: 100%; }
.payment-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7_5); margin-bottom: var(--sp-7_5); }
.contact-page-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-7_5); align-items: flex-start; }
.faq details { background-color: var(--bg-surface); border: 1px solid var(--border-main); border-radius: var(--radius-lg); transition: var(--transition); box-shadow: var(--shadow-sm); margin-bottom: var(--sp-2_5); }
.faq details:hover { background-color: var(--bg-surface-alt); transform: var(--lift-sm); box-shadow: var(--shadow-hover); }
.faq summary { padding: var(--sp-4) var(--sp-5); font-weight: var(--fw-medium); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid transparent; transition: color 0.2s ease; }
.faq summary:hover, .faq summary:hover .faq-icon { color: var(--text-brown); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .faq-icon { font-style: normal; font-size: 1.75rem; font-weight: 300; line-height: 1; color: var(--text-secondary); flex-shrink: 0; margin-left: 1rem; transition: all 0.3s ease-in-out; }
.faq summary .faq-icon::before { content: '+'; }
.faq details[open] summary .faq-icon { color: var(--text-brown); transform: none; }
.faq details[open] summary .faq-icon::before { content: '−'; }
.faq details[open] { box-shadow: var(--shadow-hover); border-color: rgba(255, 220, 115, 0.5); }
.faq details[open] summary { color: var(--text-brown); border-bottom-color: var(--border-main); align-items: flex-start; }
.faq .faq-content { padding: var(--sp-5); color: var(--text-secondary); background: var(--bg-surface-alt); }
.faq-columns { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
.partners { background-color: var(--bg-surface-alt); }
.partner-logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-7_5); width: 100%; }
.partner-logos img { width: 300px; height: 6.25rem; opacity: 0.9; transition: opacity 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid var(--border-main); border-radius: var(--radius-lg); box-shadow: var(--shadow-brand); padding: var(--sp-6_5); background-color: var(--bg-surface); }
.partner-logos img:hover { opacity: 1; }
.supported-os { background-color: var(--bg-surface-alt); }
.os-card { padding: var(--sp-7_5); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.os-card img { height: 3.75rem; width: auto; max-width: 100%; margin-bottom: var(--sp-3_5); object-fit: contain; }
.os-card h3 { margin: 0; font-size: var(--text-base); font-weight: var(--fw-semibold); color: var(--text-dark); }
.article-rating-feedback { margin-top: var(--sp-10); padding: var(--sp-6_5); background-color: var(--bg-surface); border: 1px solid var(--border-main); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.rating-header { display: flex; align-items: center; justify-content: center; gap: var(--sp-3_5); margin-bottom: var(--sp-2_5); }
.rating-title { font-size: var(--text-base); font-weight: var(--fw-semibold); margin: 0; }
.article-rating-feedback .rating-star { margin: 0; }
.article-rating-feedback .rating-stars { display: flex; gap: var(--sp-2); color: var(--c-gray-200); font-size: var(--text-xl); }
.article-rating-feedback .rating-stars .icon { color: var(--c-primary); cursor: pointer; transition: transform 0.2s ease; }
.article-rating-feedback .rating-stars .icon:hover { transform: scale(1.2); }
.section-rating { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2_5); margin: calc(-1 * var(--sp-6_5)) auto var(--sp-12) auto; max-width: 30rem; }
.section-rating .rating-stars { display: flex; gap: var(--sp-2); }
.section-rating .rating-stars .icon { color: var(--c-primary); font-size: var(--text-xl); }
.section-rating .rating-text { margin: 0; font-size: var(--text-base); color: var(--text-secondary); text-align: center; line-height: var(--lh-base); }
.rating-star { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--sp-6_5); }
.star-cont { display: inline-flex; gap: var(--sp-0_5); margin-bottom: var(--sp-2_5); cursor: pointer; }
.star { font-size: var(--text-xl); line-height: 1; display: inline-block; transition: transform 0.2s ease; }
.star .icon { display: block; width: 1em; height: 1em; transition: color 0.2s ease; color: var(--c-gray-200); }
.star.star-0 .icon { color: var(--c-gray-200); }
.star.star-1 .icon, .star.star-2 .icon { color: var(--c-primary); }
.star-cont:hover .star { transform: scale(1.1); }
.feedback-stats { text-align: center; font-size: var(--text-sm); color: var(--text-secondary); margin: 0; line-height: var(--lh-base); }
.feedback-stats span { font-weight: var(--fw-semibold); color: var(--text-main); }
.feedback-stats.no-rating { color: var(--text-secondary); font-style: italic; font-weight: var(--fw-normal); padding: 0; }
.page-news-cat .section-rating { margin-top: calc(-1 * var(--sp-3_5)); margin-bottom: var(--sp-10); }
.page-vps-vietnam .section-rating { margin: 0 auto var(--sp-10) auto; padding-bottom: var(--sp-7_5); border-bottom: 1px solid var(--border-main); max-width: none; }
/*  FOOTER  */
.main-footer { background-color: var(--bg-dark); color: var(--text-inverse-muted); padding: var(--sp-16) 0 var(--sp-7_5) 0; font-size: var(--text-sm); }
.main-footer a { color: var(--text-inverse); transition: color 0.2s ease; }
.main-footer a:hover { color: var(--c-primary); }
.footer-widget-title { color: var(--c-white); font-size: var(--text-md); font-weight: var(--fw-semibold); margin-bottom: var(--sp-5); display: block; line-height: var(--lh-tight);}
.footer-grid { display: grid; grid-template-columns: 3.45fr 1.7fr 1.7fr 3fr; gap: var(--sp-12); padding-bottom: var(--sp-10); margin-bottom: var(--sp-7_5); border-bottom: 1px solid var(--border-dark-alt); }
.footer-widget p { line-height: var(--lh-relaxed); margin-bottom: var(--sp-5); }
.footer-widget ul a, .copyright { color: var(--text-inverse-muted); }
.footer-widget ul { list-style: none; padding: 0; margin: 0; }
.footer-widget ul li { margin-bottom: var(--sp-2_5); }
.footer-logo { font-size: var(--text-xl); font-weight: var(--fw-bold); margin-bottom: var(--sp-5); }
.footer-payment-methods { display: flex; align-items: center; gap: var(--sp-3_5); margin-top: var(--sp-6_5); }
.footer-payment-methods img { height: 2.375rem; width: auto; border-radius: var(--radius-sm); padding: 2px; }
.footer-contact-info li { display: flex; align-items: flex-start; gap: var(--sp-3_5); margin-bottom: var(--sp-3_5); }
.footer-contact-info .icon { font-size: var(--text-base); color: var(--icon-accent); margin-top: 5px; flex-shrink: 0; width: 1.25rem; text-align: center; }
.footer-contact-info p, .footer-contact-info a { margin: 0; line-height: var(--lh-base); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-5); }
.footer-bottom-left { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-5); }
.copyright { margin: 0; white-space: nowrap; }
.footer-social-links { display: flex; gap: var(--sp-3_5); }
.footer-social-links a { font-size: var(--text-lg); display: inline-flex; align-items: center; justify-content: center; color: var(--text-inverse-muted); }
.footer-social-links a:hover { color: var(--c-primary); transform: translateY(-2px); }
.footer-bottom-right { display: flex; align-items: center; gap: var(--sp-5); margin-left: auto; }
.footer-bottom-right a:hover img { opacity: 1; }
.seal-dmca { height: 1.6875rem; width: auto; opacity: 0.9; transition: opacity 0.2s ease; }
.seal-bct { height: 2.375rem; width: auto; opacity: 0.9; transition: opacity 0.2s ease; }
.safemail { unicode-bidi: bidi-override; direction: rtl; }
@media (min-width: 768px) {
    .grid-cols-tablet-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-tablet-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-tablet-4 { grid-template-columns: repeat(4, 1fr); }
    .partner-logos img { min-width: 0; }
    .article-content { padding: var(--sp-12); }
    .two-column-layout { grid-template-columns: 1fr 2fr; }
	.tag-groups-grid { column-count: 2; }
    .promo-cards-container { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-5); align-items: center; }
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) .plan-header { grid-column: 1; margin-bottom: 0; }
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) .plan-features { grid-column: 2; margin-bottom: 0; flex-grow: 0; padding: 0 var(--sp-6_5); }
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) .plan-features li:last-child { padding-bottom: 0; }
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) .plan-pricing { grid-column: 3; margin-top: 0; margin-left: 0; }
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) .pricing-simple-view { padding: var(--sp-2_5) var(--sp-3_5); min-height: 0; }
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) .pricing-simple-view .btn { margin-top: var(--sp-3_5); width: 100%; }
    .grid-cols-tablet-2 > .addon-card:last-child:nth-child(odd) { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: stretch; padding: 0; }
    .grid-cols-tablet-2 > .addon-card:last-child:nth-child(odd) .addon-card-top { margin-bottom: 0; flex-grow: 1; padding: var(--sp-6_5); }
    .grid-cols-tablet-2 > .addon-card:last-child:nth-child(odd) .addon-card-bottom { margin-top: 0; border-top: none; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; border-left: 1px solid var(--border-main); padding: var(--sp-6_5); margin-left: 0; }
}
@media (min-width: 992px) {
    /* Logo desktop ~249×60: neo chiều cao, width theo tỷ lệ (tránh logo 52px trông lọt giữa menu) */
    .logo img {
        width: auto;
        height: var(--header-logo-height-desktop);
        max-width: var(--header-logo-max-width-desktop);
    }
    .main-nav ul a { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
    .grid-cols-desktop-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-cols-desktop-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-cols-desktop-4 { grid-template-columns: repeat(4, 1fr); }
    .mobile-lang-switcher, .mobile-nav-actions, .nav-divider { display: none; }
    .header-actions .header-icon { display: inline-flex; }
    .hero .container { grid-template-columns: 1.1fr 0.9fr; }
    .hero-desc-wrapper { max-width: 100%; margin-left: 0; }
    .hero-features-list { display: flex; }
    .addon-options { width: 100%; }
    .faq-columns { grid-template-columns: repeat(2, 1fr); align-items: start; }
    .article-layout-grid { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
    .contact-page-grid { grid-template-columns: 1.2fr 1fr; }
    .payment-grid { grid-template-columns: repeat(2, 1fr); align-items: flex-start; }
    .product-intro-card { flex-direction: row; align-items: center; }
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-5); align-items: center; }
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .plan-header { grid-column: 1; margin-bottom: 0; padding-right: var(--sp-7_5); }
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .plan-features { grid-column: 2; margin-bottom: 0; padding: 0 var(--sp-6_5); flex-grow: 0; }
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .plan-features li:last-child { padding-bottom: 0; }
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .plan-pricing { grid-column: 3; margin-top: 0; min-width: auto; margin-left: 0; padding-left: var(--sp-12); }
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .pricing-simple-view { padding: var(--sp-5) var(--sp-3_5); min-height: 0; }
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .pricing-simple-view .btn { margin-top: var(--sp-3_5); width: 100%; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; display: flex; flex-direction: row; align-items: stretch; padding: 0; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .addon-card-top { display: flex; flex-direction: row; align-items: center; flex-grow: 1; margin-bottom: 0; padding: var(--sp-6_5) 0; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .addon-header { display: flex; align-items: center; text-align: left; margin-bottom: 0; min-width: 250px; gap: var(--sp-3_5); height: 100%; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .addon-header .icon { font-size: 2.5rem; margin-bottom: 0; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .addon-options { display: flex; flex-grow: 1; flex-shrink: 1; margin: 0; justify-content: center; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .addon-options-grid { width: 100%; max-width: 320px; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .addon-card-bottom { display: flex; width: 250px; flex-shrink: 0; margin-top: 0; padding: var(--sp-6_5); border-top: none; align-items: center; justify-content: center; }
	.grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .addon-pricing { text-align: center; }
}
@media (max-width: 991px) {
    html { scroll-padding-top: 9.6875rem; }
    body { padding: 5.625rem 0 0 0; }
    h1 { font-size: var(--text-4xl); max-width: 100%; letter-spacing: -0.05em; }
    h2 { font-size: var(--text-3xl); }
    .news-featured-top h3 { font-size: var(--text-xl); }
    .desktop-lang-switcher, .top-bar { display: none; }
    .desktop-only { display: none; }
    .mobile-only { display: inline-flex; align-items: center; }
    /* Không dùng overflow:hidden trên .sticky-header-wrapper: kết hợp transform (translateZ) trên wrapper
       khiến fixed con (menu mobile, dropdown lang/theme) bị clip / mất tương tác */
    .sticky-header-wrapper { min-height: 5.625rem; }
    /* Tránh flex item .main-nav (margin-left:auto) chiếm chỗ → đẩy hamburger tràn ngang */
    .main-nav { margin-left: 0; }
    .header-actions {
        margin-left: auto;
        margin-right: 0;
        gap: var(--sp-1);
        flex-shrink: 0;
        position: relative;
        z-index: calc(var(--z-sticky) + 2);
    }
    .header-actions .header-icon { display: inline-flex; }
    .main-header .container { position: static; padding-right: var(--sp-3_5); min-width: 0; gap: var(--sp-4); align-items: center; }
    .logo { flex: 0 0 auto; max-width: min(72vw, var(--header-logo-max-width)); margin-inline-end: var(--sp-3); }
    .nav-toggle { display: block; position: relative; width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
    .nav-toggle .icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.2s ease, transform 0.3s ease; }
    .nav-toggle .icon:first-of-type { display: block; opacity: 1; }
    .nav-toggle .icon:last-of-type { display: block; opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
    body.nav-active .nav-toggle .icon:first-of-type { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
    body.nav-active .nav-toggle .icon:last-of-type { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
    .main-nav {
        display: block;
        position: fixed;
        top: 5.625rem;
        left: 0;
        right: 0;
        max-height: calc(100vh - 5.9375rem);
        background-color: var(--bg-body);
        color: var(--text-dark);
        box-shadow: var(--shadow-depth);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        overflow-y: auto;
        overflow-x: hidden;
        z-index: var(--z-sticky);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-15px) scale(0.98);
        transition: all 0.3s;
        border: 1px solid var(--border-main);
        border-top: none;
        pointer-events: none;
    }
    .main-nav.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }
    .main-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav ul li { width: 100%; border-bottom: 1px solid var(--border-main); position: static; }
    .main-nav ul li.open { border-bottom-color: transparent; }
    .main-nav ul li:last-child { border-bottom: none; }
    .main-nav .menu-item-wrapper { display: flex; justify-content: space-between; align-items: center; }
    .main-nav .menu-item-wrapper > a { flex-grow: 1; padding: 0 var(--sp-3_5); color: var(--text-dark); font-weight: var(--fw-semibold); min-height: 3.125rem; display: flex; align-items: center; }
    .main-nav ul li.open > .menu-item-wrapper > a, .main-nav .menu-item-wrapper > a:hover { color: var(--text-brown); }
    .main-nav .submenu-toggle { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 3.125rem; height: 3.125rem; background: none; border: none; cursor: pointer; font-size: var(--text-xl); color: var(--text-secondary); transition: transform 0.3s ease; }
    .main-nav .submenu-toggle::before { content: '+'; }
    .main-nav li.open > .menu-item-wrapper > .submenu-toggle { transform: rotate(45deg); }
    .main-nav .submenu { position: static; min-width: 100%; box-shadow: none; padding: 0; margin: 0; background-color: var(--bg-surface-alt); border-radius: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out; border-top: 1px solid var(--border-main); border-bottom: 1px solid var(--border-main); }
    .main-nav li.open > .submenu { max-height: 60rem; }
    .main-nav li.open > .mega-menu { transform: none; }
    .main-nav .mega-menu { display: grid; grid-template-columns: 1fr; width: auto; position: static; padding: 0; backdrop-filter: none; box-shadow: none; gap: 0; }
    .main-nav .submenu li { border-top: 1px solid var(--border-main); border-bottom: none; }
    .main-nav .submenu li:first-child { border-top: none; }
    .main-nav .mega-menu .mega-menu-item > a { display: flex; align-items: center; gap: var(--sp-3_5); padding: var(--sp-2_5) var(--sp-3_5) var(--sp-2_5) var(--sp-7_5); border: none !important; color: var(--text-dark); }
    .main-nav .submenu:not(.mega-menu) a { color: var(--text-dark); position: relative; padding: var(--sp-2_5) var(--sp-3_5) var(--sp-2_5) var(--sp-10); font-weight: var(--fw-normal); font-size: var(--text-sm); border: none !important; }
    .main-nav .mega-menu .mega-menu-item > a:hover { background-color: rgba(0,0,0,0.05); color: var(--text-brown); }
    .main-nav .mega-menu .mega-menu-icon .icon { width: 1.5rem; height: 1.5rem; }
    .main-nav .mega-menu .mega-menu-text p { display: none; }
	.main-nav .mega-menu .mega-menu-text .nav-item-title { font-size: var(--text-base); font-weight: var(--fw-normal); margin: 0; color: var(--text-dark); }
    .main-nav .submenu:not(.mega-menu) a::before { content: '—'; position: absolute; left: var(--sp-5); top: 50%; transform: translateY(-50%); color: var(--text-secondary); }
    .main-nav .submenu:not(.mega-menu) a:hover { color: var(--text-brown); background-color: rgba(0,0,0,0.05); }
    .main-nav .nav-divider { height: 1px; background-color: var(--border-main); border-bottom: none; }
    .mobile-nav-actions { display: flex; justify-content: space-between; padding: var(--sp-3_5); text-align: center; background-color: var(--bg-surface-alt); border-top: 1px solid var(--border-main); }
    .action-item-split > a:hover .notification-badge { transform: scale(1.2); box-shadow: 0 4px 8px rgba(230, 81, 0, 0.3); background-color: var(--c-warning); }
    .mobile-lang-switcher-header .lang-dropdown {
        right: 1.25rem;
        top: 5.625rem;
        position: fixed;
        width: var(--header-dropdown-width);
        max-width: min(var(--header-dropdown-width), calc(100vw - 2 * var(--sp-3)));
        box-sizing: border-box;
    }
    .lang-dropdown li a:hover { color: var(--text-brown); }
    .lang-dropdown li img { width: 30px; height: 20px; box-shadow: 0 0 0 1px var(--c-white), 0 0 0 2px var(--border-main); }
    .hero { padding: var(--sp-7_5) 0; }
    .hero .container { grid-template-columns: 1fr; }
    .hero-content { text-align: center; }
    .hero-desc-wrapper { margin-left: auto; margin-right: auto; }
    .hero-features-list { display: inline-flex; align-items: flex-start; }
    .hero-content p { margin-left: auto; margin-right: auto; max-width: 991px; }
	.tagline { justify-content: center; }
    .sidebar { display: flex; flex-direction: column; gap: var(--sp-7_5); }    
    /* Order: Khuyến mãi (1) -> Bài nổi bật (2) -> Danh mục (3) */
    .sidebar .widget-promo { order: 1; }
    .sidebar .widget-posts { order: 2; }
    .sidebar .widget-categories { order: 3; }	
	.about-company-grid { grid-template-columns: 1fr; }
    .news-featured-top { flex-direction: column; align-items: flex-start; }
    .news-featured-top img { width: 100%; max-width: 60rem; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-7_5); }
    .footer-bottom { justify-content: center; }
    .footer-bottom-right { margin: 0; }
}
@media (max-width: 767px) {
    .section-title p { font-size: var(--text-base); }
    .policy-lastmod-box { margin-top: var(--sp-2_5); padding: var(--sp-2) var(--sp-2_5); }
    .policy-lastmod-box p { font-size: var(--text-sm); gap: var(--sp-1, 4px); flex-wrap: wrap; justify-content: center; }
    .article-header h1 { font-size: 2.2rem; }
    .author-box { flex-direction: column; text-align: center; }
    .author-box .author-avatar { margin-bottom: 0; }
    .author-box--about { display: flex; align-items: center; }
    .author-box--about .author-avatar { margin: 0 auto; }
	.author-info h4 {margin-top: 0; }
    .news-featured-top { flex-direction: column; align-items: flex-start; }
    .news-featured-top img { width: 100%; max-width: none; }
    .news-list-item-row { flex-direction: column; align-items: flex-start; }
    .news-list-item-row img { width: 100%; height: auto; margin-bottom: var(--sp-3_5); }
    .news-meta { margin-top: 5px; gap: 20px; }    
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; }
    .footer-bottom-left { flex-direction: column; align-items: center; gap: var(--sp-3_5); }
    .footer-bottom-right { margin-left: 0; margin-top: var(--sp-3_5); }
    /* Table trên mobile: giữ nguyên cấu trúc bảng, cuộn ngang qua .table-wrapper. Chỉ giảm padding & font-size nhẹ để tiết kiệm không gian */
    .styled-table { font-size: var(--text-xs); }
    .styled-table th, .styled-table td { padding: var(--sp-2_5) var(--sp-3); }
    /* Gợi ý người dùng có thể cuộn ngang */
    .table-wrapper::after { content: ''; display: none; }
}
@media (max-width: 390px) {
    html { scroll-padding-top: 6.5625rem; }
    body { padding: 4.6875rem 0 0 0; }
    .sticky-header-wrapper { min-height: 4.6875rem; }
    .container { padding-left: 0.75rem; padding-right: 0.75rem; }
    .main-header .container { gap: var(--sp-2); padding-right: 0.75rem; }
    .logo { flex: 0 0 auto; max-width: 13.5rem; margin-inline-end: var(--sp-2); }
    .logo img {
        width: min(13.5rem, calc(100vw - 11rem));
        height: auto;
        aspect-ratio: 216 / 52;
        object-fit: contain;
    }
    .header-actions { gap: 8px; }
    .main-nav { top: 4.6875rem; max-height: calc(100vh - 4.6875rem); }
    .mobile-lang-switcher-header .current-lang { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; }
    .mobile-lang-switcher-header .current-lang img { width: 27px; height: 18px; box-shadow: 0 0 0 1px var(--c-white), 0 0 0 2px var(--border-main); object-fit: cover; flex-shrink: 0; }
    .mobile-lang-switcher-header .lang-dropdown { right: 0.75rem; top: 4.6875rem; }
    .section { padding-top: var(--sp-7_5); padding-bottom: var(--sp-7_5); }
    h1 { font-size: var(--text-3xl); line-height: 1.2; margin-bottom: 0.75rem; }
    h2 { font-size: var(--text-2xl); line-height: 1.3; margin-bottom: 10px; }
    h3 { font-size: var(--text-lg); line-height: 1.35; margin-bottom: 8px; }
    h4 { font-size: var(--text-md); line-height: 1.4; margin-bottom: 8px; }
	.article-header h1 { font-size: var(--text-2xl); line-height: 1.3; }
    .article-body h2 { font-size: var(--text-lg); margin-top: var(--sp-6); }	
    .faq-content h2 { font-size: var(--text-2xl); margin-top: 1.5625rem; margin-bottom: 0.9375rem; }
    .faq-content h3 { font-size: var(--text-lg); margin-top: 1.25rem; margin-bottom: 0.75rem; }
    .faq-content h4 { font-size: var(--text-md); margin-top: 0.9375rem; }
    .news-featured-top h3 { font-size: var(--text-lg); line-height: 1.3; margin-bottom: 10px; }
    .promo-card-final { padding: var(--sp-5); }
    .category-card { padding: var(--sp-3_5); }
    .card { padding: var(--sp-6_5) var(--sp-5); }
    .promo-details-final h3, .category-card-title { font-size: var(--text-md); }
    .widget-title, .footer-widget-title { font-size: var(--text-md); margin-bottom: 15px; padding-bottom: 10px; }
    .addon-header h3 { font-size: var(--text-lg); }
    .hero-content span { letter-spacing: -0.036em; }
    .hero-content p { font-size: var(--text-base); line-height: 1.5; margin-bottom: 1.25rem; }
    .section-title { margin-bottom: 1.25rem; }
    .section-title-underline { font-size: var(--text-2xl); padding-bottom: 10px; margin-bottom: 1.25rem; }
    .price-display .final-price { font-size: var(--text-2xl); }
    .btn, .btn-lg { padding: var(--sp-2_5) var(--sp-5); font-size: 15px; height: auto; }
    .article-content { padding: var(--sp-7_5) var(--sp-3_5); }
    .article-rating-feedback { padding: var(--sp-3_5) var(--sp-1); }
    .author-box { padding: var(--sp-3); }
    .main-footer { padding: var(--sp-7_5) 0; }
}