/* --- 1. FONTS --- */
@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');}

/* --- 2. CSS VARIABLES (ROOT) --- */
:root {
    --color-true-white: #ffffff;
    --color-gray-0: #FAFAFA;
    --color-gray-50: #F5F5F5;
    --color-gray-200: #E0E0E0;
    --color-gray-600: #595959;
    --color-gray-800: #4A4A4A;
    --color-gray-900: #2A2A2A;
    --color-yellow-500: #FFDC73;
    --color-brown-700: #8B4513;
    --color-red-500: #E65100;
    --color-red-700: #D62D20;
    --color-green-500: #008800;
    --color-gray-900-a60: #2A2A2A99;
    --color-efefef-a50: #EFEFEF80;
    --icon-static: #2A2A2A;
    --icon-hover: #8B4513;
    --icon-accent: #FFDC73;
    --selection-bg-color: #0078D7;
    --selection-text-color: #FFFFFF;
    --text-color-default: var(--color-gray-800);
    --text-color-secondary: var(--color-gray-600);
    --text-color-accent: var(--color-yellow-500);
    --text-color-on-dark: var(--color-gray-0);
    --text-color-on-dark-alt: var(--color-gray-200);
    --text-color-error: var(--color-red-700);
    --text-color-danger: var(--color-red-500);
    --text-color-brown: var(--color-brown-700);
    --text-color-dark-primary: var(--color-gray-900);
    --bg-color-body: var(--color-true-white);
    --bg-color-surface-light: var(--color-gray-0);
    --bg-color-surface-light-alt: var(--color-gray-50);
    --bg-color-muted: var(--color-gray-200);
    --bg-color-dark: var(--color-gray-900);
    --bg-color-dark-alt: var(--color-gray-800);
    --bg-color-accent: var(--color-yellow-500);
    --border-color-default: var(--color-gray-200);
    --border-color-strong: var(--color-gray-600);
    --border-color-accent: var(--color-brown-700);
    --border-color-dark: var(--color-gray-900);
    --border-color-dark-alt: var(--color-gray-800);
    --link-color-default: var(--text-color-default);
    --link-color-hover: var(--color-yellow-500);
    --link-color-hover-brown: var(--color-brown-700);
    --link-color-on-dark-hover: var(--color-yellow-500);
    --icon-color-default: var(--text-color-secondary);
    --icon-color-on-dark: var(--color-gray-0);
    --icon-color-accent: var(--color-yellow-500);
    --gradient-banner-overlay: linear-gradient(to right, rgba(42, 42, 42, 0.95), rgba(42, 42, 42, 0.7));
    --font-primary: Public Sans, sans-serif;
    --font-size-xs: 12px;
    --font-size-s: 14px;
    --font-size-base: 16px;
    --font-size-m: 18px;
    --font-size-l: 20px;
    --font-size-xl: 24px;
    --font-size-xxl: 26px;
    --font-size-3xl: 30px;
    --font-size-4xl: 32px;
    --font-size-5xl: 36px;
    --font-size-6xl: 48px;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-single: 1;
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 10px;
    --radius-full: 50%;
    --box-shadow-default: 0 3px 6px var(--color-efefef-a50);
    --box-shadow-hover: 0 10px 20px var(--color-gray-200);
    --box-shadow-dropdown: 0 5px 10px rgba(0, 0, 0, .1);
    --box-shadow-inset-yellow: 0 0 0 2px var(--color-yellow-500) inset;
    --box-shadow-inset-dark: 0 0 0 2px var(--border-color-dark) inset;
    --box-shadow-inset-default: 0 0 0 1px var(--border-color-default) inset;
    --gap-xs: 5px;
    --gap-s: 8px;
    --gap-m: 10px;
    --gap-l: 15px;
    --gap-xl: 20px;
    --gap-xxl: 25px;
    --gap-3xl: 30px;
    --space-em-025: .25em;
    --space-em-050: .5em;
    --space-em-075: .75em;
    --space-em-100: 1em;
    --space-em-125: 1.25em;
    --space-em-150: 1.5em;
    --space-em-175: 1.75em;
    --space-em-200: 2em;
    --space-em-225: 2.25em;
    --space-em-250: 2.5em;
    --space-px-4: 4px;
    --space-px-5: 5px;
    --space-px-7: 7px;
    --space-px-8: 8px;
    --space-px-10: 10px;
    --space-px-12: 12px;
    --space-px-15: 15px;
    --space-px-16: 16px;
    --space-px-20: 20px;
    --space-px-25: 25px;
    --space-px-30: 30px;
    --space-px-32: 32px;
    --space-px-34: 34px;
    --space-px-35: 35px;
    --space-px-40: 40px;
    --space-px-50: 50px;
    --space-px-65: 65px;
    --space-px-75: 75px;
    --space-px-95: 95px;
}

/* --- 3. RESET & BASE --- */
html {scroll-behavior: smooth;scrollbar-gutter: stable;scroll-padding-top: 210px;}
body {margin:0; padding:145px 0 0 0; background:var(--bg-color-body); position:relative; color:var(--text-color-default); font-weight:var(--font-weight-normal); font-size:var(--font-size-base); font-family:var(--font-primary); line-height:var(--line-height-normal);}
body.nav-active {overflow:hidden;}
body.nav-active::before {content:''; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:999; opacity:1; transition:opacity 0.3s ease;}
body::before {content:''; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); z-index:999; pointer-events:none; opacity:0; transition:opacity 0.3s ease;}
input, select, textarea {color:var(--text-color-default); font-weight:var(--font-weight-normal); font-size:var(--font-size-base); font-family:var(--font-primary); line-height:var(--line-height-normal);}
* {box-sizing:border-box;}
::-moz-selection {background:var(--selection-bg-color); color:var(--selection-text-color);}
::selection {background:var(--selection-bg-color); color:var(--selection-text-color);}
h1, h2, h3, h4, h5, h6 {margin:0; font-weight:var(--font-weight-bold); line-height:var(--line-height-tight);}
h1 {font-size:var(--font-size-5xl); color:var(--text-color-dark-primary); margin:0 0 var(--space-px-20);}
h2 {font-size:var(--font-size-4xl); color:var(--text-color-dark-primary); margin-bottom:var(--gap-s);}
h3 {font-size:var(--font-size-xl); color:var(--text-color-dark-primary); margin-bottom:var(--space-px-15);}
p {margin-top:0; margin-bottom:var(--space-em-100);}
a {outline:0; color:var(--link-color-default); text-decoration:none;}
a:focus-visible {outline:2px solid var(--color-brown-700); outline-offset:2px; border-radius:var(--radius-sm);}
a:hover {outline:0; text-decoration:none; transition:all .3s ease;}
strong, b {font-weight:var(--font-weight-bold);}
ul, ol {margin-top:0; margin-bottom:var(--space-em-100); padding-left:var(--space-em-200);}
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);}}

/* --- 4. GLOBAL UTILITIES & ICONS --- */
.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(--color-yellow-500); color:var(--text-color-brown); padding:1rem; position:absolute; top:0; left:0; z-index:9999; 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:1200px; margin-left:auto; margin-right:auto; padding-left:var(--space-px-20); padding-right:var(--space-px-20);}
.section {padding-top:var(--space-px-65); padding-bottom:var(--space-px-65);}
.section-title {text-align:center; margin-bottom:var(--space-px-30);}
.section-title h2 {margin-bottom:var(--gap-m);}
.section-title p {font-size:var(--font-size-m); color:var(--text-color-secondary); margin:0 auto; line-height:var(--line-height-relaxed);}
.section-title-underline {font-size:var(--font-size-3xl); color:var(--text-color-dark-primary); margin-bottom:var(--space-px-30); padding-bottom:var(--gap-l); border-bottom:2px solid var(--border-color-default); position:relative; text-align:center;}
.section-title-underline::after {content:''; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%); width:100px; height:2px; background-color:var(--text-color-brown);}
.btn {display:inline-flex; align-items:center; justify-content:center; gap:var(--gap-s); padding:var(--space-px-12) var(--space-px-25); font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); border-radius:var(--radius-md); border:2px solid transparent; cursor:pointer; text-align:center; transition:all 0.3s ease;}
.btn-primary {background-color:var(--bg-color-accent); color:var(--text-color-dark-primary); border-color:var(--bg-color-accent);}
.btn-primary:hover {background-color:#F8E07B; border-color:#F8E07B; color:var(--text-color-dark-primary); transform:translateY(-2px);}
.btn-lg {padding:var(--space-px-15) var(--space-px-35); font-size:var(--font-size-m);}
.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:.25rem; transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.badge-danger {color:#fff; background-color:var(--color-red-500);}

/* --- 5. LAYOUT & GRID --- */
.grid {display:grid; gap:var(--gap-xl);}
.grid-cols-1 {grid-template-columns:1fr;}
.grid-cols-2 {grid-template-columns:repeat(2,1fr);}
.card {background-color:var(--bg-color-body); border:1px solid var(--border-color-default); border-radius:var(--radius-lg); padding:var(--space-px-25); box-shadow:var(--box-shadow-default); transition:all 0.3s ease;}
.card:hover {transform:translateY(-5px); box-shadow:var(--box-shadow-hover);}
.two-column-layout {display:grid; grid-template-columns:1fr; gap:var(--gap-3xl); align-items:center; margin:30px 0;}
.two-column-layout img {border-radius:var(--radius-lg); max-width:100%; box-shadow:var(--box-shadow-default);}

/* --- 6. HEADER & NAVIGATION --- */
.sticky-header-wrapper {position: fixed; top: 0; left: 0; width: 100%; height: auto; min-height: 145px; z-index: 1001; background-color: var(--bg-color-body); box-shadow: var(--box-shadow-dropdown); transform: translateZ(0);}
.top-bar {background-color:var(--bg-color-surface-light); padding:var(--space-px-8) 0; font-size:var(--font-size-s); color:var(--text-color-secondary); border-bottom:1px solid var(--border-color-default);}
.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(--gap-xl);}
.top-bar .contact-info a {display:inline-flex; align-items:center;}
.top-bar .contact-info .notification-badge {position:relative; top:-1px; right:auto; margin-left:6px; width:auto; height:18px; min-width:18px; padding:0 5px; font-size:11px; line-height:16px; border-radius:9px;}
.top-bar a {color:var(--text-color-secondary); font-weight:var(--font-weight-medium);}
.top-bar a:hover {color:var(--link-color-hover-brown);}
.top-bar a.user-account-link {display:flex; align-items:center; gap:var(--gap-s);}
.top-bar .icon {margin-right:var(--gap-s);}
.main-header {background-color:var(--bg-color-body); padding:var(--space-px-15) 0; position:relative;}
.main-header .container {display:flex; justify-content:space-between; align-items:center;}
.logo {font-size:var(--font-size-xxl); font-weight:var(--font-weight-bold); color:var(--text-color-dark-primary); flex-shrink:0;}
.logo span {color:var(--text-color-brown);}
.header-actions {display:flex; align-items:center; gap:var(--gap-m); margin-left:var(--gap-3xl);}
.header-icon {display:none; color:var(--text-color-dark-primary); font-size:var(--font-size-xl); padding:0 var(--gap-s); position:relative;}
.header-icon:hover {color:var(--text-color-brown);}
.nav-toggle {display:none; background:none; border:none; font-size:var(--font-size-xl); cursor:pointer; z-index:1001; color:var(--text-color-dark-primary);}
/* Navigation Menu */
.main-nav {margin-left:auto;}
.main-nav ul {margin:0; padding:0; list-style:none; display:flex; align-items:center; gap:var(--gap-3xl);}
.main-nav ul li {position:relative;}
.main-nav ul li.has-mega-menu {position:static;}
.main-nav ul a {font-weight:var(--font-weight-medium); padding:var(--space-px-20) 0; position:relative;}
.main-nav .menu-item-wrapper > a, .main-nav .submenu li a {color:var(--text-color-dark-primary);}
.main-nav .menu-item-wrapper > a:hover, .main-nav ul>li.open> .menu-item-wrapper > a {color:var(--link-color-hover-brown);}
.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-color-body); min-width:240px; list-style:none; padding:var(--gap-m); margin:0; box-shadow:var(--box-shadow-dropdown); 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(--gap-m); width:100%; display:block;}
.main-nav .mega-menu {display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-xl); width:1160px; left:50%; background-color:var(--bg-color-body); backdrop-filter:none; border:1px solid var(--border-color-default); box-shadow:var(--box-shadow-dropdown); border-radius:0 0 var(--radius-lg) var(--radius-lg); padding:var(--space-px-25); transform:translate(-50%,0);}
.main-nav li.open>.mega-menu {transform:translate(-50%,2px);}
.main-nav .mega-menu .mega-menu-item > a {display:flex; align-items:center; gap:var(--gap-l); padding:var(--space-px-15); 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-color-surface-light-alt);}
.main-nav .mega-menu .mega-menu-item > a:hover h4 {color:var(--link-color-hover-brown);}
.main-nav .mega-menu-item > a:hover .mega-menu-icon .icon {color:var(--icon-hover); transform:translateY(-2px);}
.mega-menu-icon {display:flex; color:var(--color-gray-900); padding-right:var(--space-px-15);}
.mega-menu-icon .icon {width:48px; height:48px; color:var(--icon-static); transition:all 0.3s ease;}
.mega-menu-text h4 {font-size:var(--font-size-base); color:var(--text-color-dark-primary); margin-bottom:var(--gap-s); transition:color 0.3s ease;}
.mega-menu-text p {font-size:var(--font-size-s); color:var(--text-color-secondary); margin-bottom:0; line-height:var(--line-height-normal);}
/* Language Switcher */
.language-switcher {position:relative;}
.language-switcher .current-lang {display:flex; align-items:center; gap:var(--gap-s); background:none; border:none; cursor:pointer; font-size:var(--font-size-s); color:var(--text-color-secondary); padding:var(--gap-s);}
.language-switcher .current-lang img {width:20px; height:20px;}
.language-switcher .current-lang .icon {font-size:var(--font-size-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:0; background-color:var(--bg-color-body); border-radius:0 0 var(--radius-md) var(--radius-md); box-shadow:var(--box-shadow-dropdown); list-style:none; padding:var(--gap-s); margin:0; width:135px; z-index:10; border:1px solid var(--border-color-default);}
.language-switcher.active .lang-dropdown {display:block; animation:fadeIn 0.3s;}
.lang-dropdown li a {display:flex; align-items:center; gap:var(--gap-m); padding:var(--gap-s) var(--gap-m); border-radius:var(--radius-sm); font-weight:var(--font-weight-medium);}
.lang-dropdown li a:hover {background-color:var(--bg-color-surface-light-alt);}
.lang-dropdown li img {width:20px; height:20px;}
/*
.mobile-lang-switcher-header .current-lang {padding:0; background:none; border:none; cursor:pointer; line-height:1;}
.mobile-lang-switcher-header .current-lang img {width:28px; height:28px; border-radius:50%; box-shadow:0 0 0 1px var(--color-true-white),0 0 0 2px var(--border-color-default);}
*/
.mobile-lang-switcher-header .current-lang {padding: 0;background: none;border: none;cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;}
.mobile-lang-switcher-header .current-lang img {width: 28px;height: 28px;border-radius: 50%;box-shadow: 0 0 0 1px var(--color-true-white), 0 0 0 2px var(--border-color-default);object-fit: cover; flex-shrink: 0;}
/*
.mobile-lang-switcher-header .lang-dropdown {right:-65px; top:calc(100% + 25px); width:150px;}

.mobile-lang-switcher-header.active .lang-dropdown {display:block;}
*/
/* Mobile Actions */
.mobile-nav-actions {display:none; justify-content:space-between; padding:var(--gap-l); text-align:center; background-color:var(--bg-color-surface-light-alt); border-top:1px solid var(--border-color-default);}
.mobile-nav-actions .action-item {display:flex; flex-direction:column; align-items:center; gap:var(--gap-s); color:var(--text-color-secondary); font-size:var(--font-size-s); font-weight:var(--font-weight-medium); transition:color 0.2s ease; text-decoration:none;}
.mobile-nav-actions .action-item .icon, .action-item-split > a .icon {font-size:var(--font-size-l); width:64px; height:64px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-md); margin-bottom:var(--gap-xs); padding:var(--space-px-12); background-color:var(--bg-color-body); border:1px solid var(--border-color-default); 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); border-color:var(--icon-hover); background-color:#fff; transform:translateY(-3px); box-shadow:0 4px 10px rgba(139, 69, 19, 0.15);}
.mobile-nav-actions .action-item:hover span:not(.notification-badge), .action-item-split > a:last-child:hover span {color:var(--text-color-brown);}
.mobile-nav-actions .action-item .notification-badge, .action-item-split .notification-badge {position:absolute; top:2px; left:50%; margin-left:8px; z-index:5; border:2px solid var(--bg-color-surface-light-alt); width:20px; height:20px; min-width:20px; padding:0; background-color:var(--color-red-500); color:var(--color-true-white); border-color:var(--bg-color-surface-light-alt);}
.action-item-split {position:relative; gap:0!important;}
.action-item-split > a {text-decoration:none; color:var(--text-color-secondary); transition:color 0.2s ease; display:flex; flex-direction:column; align-items:center; width:100%;}
.action-item-split > a:first-child {position:relative; padding-bottom:var(--gap-s);}
.action-item-split > a:last-child {font-size:var(--font-size-s); font-weight:var(--font-weight-medium);}
.action-item-split > a:last-child:hover {color:var(--text-color-brown);}
.promo-link-group {display:inline-flex; align-items:center;}
.promo-link-group .notification-badge {margin-left:6px;}
.notification-badge {display:flex; align-items:center; justify-content:center; position:absolute; top:-5px; right:-5px; width:20px; height:20px; background-color:var(--color-red-500); color:var(--color-true-white); border-radius:50%; font-size:12px; font-weight:var(--font-weight-bold); line-height:1;}

/* --- 7. HERO & BREADCRUMB --- */
.hero {padding:var(--space-px-65) 0;}
.hero .container {display:grid; align-items:center; gap:var(--gap-3xl);}
.hero-content p {font-size:var(--font-size-m); color:var(--text-color-secondary); margin-bottom:var(--space-px-40); max-width:550px;}
.hero-content span {margin-bottom:var(--space-px-20); display:block;}
.hero-image img {border-radius:var(--radius-lg); width:100%; height:auto; object-fit:cover; aspect-ratio:3/2;}
.service-page .hero {background-color:var(--bg-color-dark);}
.service-page .hero h1, .service-page .hero p {color:var(--color-true-white);}
.breadcrumb-bg {background-color:var(--bg-color-surface-light-alt);}
main .breadcrumb {padding-top:var(--space-px-30); padding-bottom:var(--space-px-30);}
.breadcrumb {display:flex; flex-wrap:wrap; list-style:none; margin:0; padding:0; font-size:var(--font-size-s);}
.breadcrumb-item {display:flex; align-items:center;}
.breadcrumb-item + .breadcrumb-item::before {content:'>'; display:inline-block; padding:0 var(--gap-m); color:var(--text-color-secondary);}
.breadcrumb-item a {color:var(--text-color-secondary); font-weight:var(--font-weight-medium); display:inline-flex; align-items:center; gap:var(--gap-s);}
.breadcrumb-item a:hover {color:var(--text-color-brown);}
.breadcrumb-item.active {color:var(--text-color-default); font-weight:var(--font-weight-medium);}

/* --- 8. SERVICES & PRICING PLANS --- */
.main-services {background-color:var(--bg-color-body);}
.pricing-plan {display:flex; flex-direction:column; position:relative; overflow:hidden;}
.pricing-plan.popular {border-color:var(--color-yellow-500); border-width:2px; box-shadow:0 20px 50px -10px rgba(139, 69, 19, 0.2); z-index:2; transform:scale(1.01); transform-origin:bottom center;}
.pricing-plan:hover {border-color:var(--border-color-default);}
.pricing-plan.popular:hover {border-color:var(--color-yellow-500);}
.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(--color-yellow-500); color:var(--text-color-brown); padding:var(--gap-xs) var(--space-px-30); font-size:var(--font-size-s); font-weight:var(--font-weight-bold); transform:rotate(45deg); z-index:1; width:140px; 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(--space-px-20);}
.plan-icon .icon {display:inline-block; width:64px; height:64px; color:var(--icon-static); transition:all 0.3s ease;}
.plan-icon {font-size:var(--font-size-5xl); color:var(--text-color-brown); margin-bottom:var(--gap-l);}
.plan-header .plan-name {font-size:var(--font-size-l); margin-bottom:0;}
.plan-features {list-style:none; padding:0; margin:0 0 var(--space-px-20); text-align:left; flex-grow:1; margin-bottom:25px;}
.plan-features li {padding:var(--gap-s) 0; border-bottom:1px solid var(--color-gray-50); display:flex; justify-content:space-between; align-items:baseline; gap:var(--gap-l); font-size:var(--font-size-s);}
.plan-features li:last-child {border-bottom:none;}
.plan-features li strong {color:var(--text-color-secondary); font-weight:var(--font-weight-normal);}
.plan-features li .feature-value {color:var(--text-color-dark-primary); font-weight:var(--font-weight-semibold);}
.plan-pricing {margin-top:auto;}
.price-details-container {min-height:120px; 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(--gap-m);}
.price-display .original-price {font-size:var(--font-size-l); color:var(--text-color-secondary); line-height:1; margin:0 0 var(--gap-s) 0; height:24px; text-decoration:line-through;}
.price-display .final-price {font-size:var(--font-size-4xl); font-weight:var(--font-weight-bold); color:var(--text-color-brown); margin:0; line-height:var(--line-height-tight);}
.price-unit {font-size:var(--font-size-s); font-weight:var(--font-weight-normal); color:var(--text-color-secondary); margin-left:var(--gap-xs);}
.savings-tag {display:inline-block; background-color:var(--color-red-500); color:var(--color-true-white); font-size:var(--font-size-s); font-weight:var(--font-weight-bold); padding:var(--gap-xs) var(--gap-m); border-radius:var(--radius-md); margin-bottom:var(--gap-l);}
.savings-tag-placeholder {display:inline-block; font-size:var(--font-size-s); padding:var(--gap-xs) var(--gap-m); margin-bottom:var(--gap-l); visibility:hidden;}
.total-payment {font-size:var(--font-size-s); color:var(--text-color-secondary); margin:0;}
.total-payment .total-value {color:var(--text-color-dark-primary); font-weight:var(--font-weight-bold);}
.billing-cycle-segmented-control {display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:var(--space-px-20); background-color:var(--bg-color-surface-light-alt); border-radius:var(--radius-md); border:1px solid var(--border-color-default); padding:3px; overflow:hidden;}
.billing-cycle-segmented-control input[type="radio"] {display:none;}
.billing-cycle-segmented-control label {flex:1 1 25%; text-align:center; padding:var(--gap-s) var(--gap-xs); border-radius:var(--radius-sm); font-size:var(--font-size-s); font-weight:var(--font-weight-medium); cursor:pointer; transition:all 0.2s ease-in-out; color:var(--text-color-secondary); border:none; position:relative; z-index:1;}
.billing-cycle-segmented-control input[type="radio"]:checked + label {background-color:#FFFDF5; color:var(--text-color-brown); font-weight:var(--font-weight-semibold); box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.pricing-simple-view {min-height:125px; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:10px 0; border:1px solid var(--border-color-default); border-radius:var(--radius-md);}
.pricing-simple-view .price-label {font-size:var(--font-size-xs); color:var(--text-color-secondary); margin-bottom:var(--gap-s); margin-top:0; font-weight:var(--font-weight-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(--font-size-3xl); margin-bottom:var(--gap-s); line-height:var(--line-height-tight); font-weight:var(--font-weight-bold); color:var(--text-color-brown); margin-top:var(--gap-s);}
.pricing-simple-view .price-note {font-size:var(--font-size-xs); color:var(--text-color-secondary); font-style:normal; display:block; width:-moz-fit-content; width:fit-content; margin-left:auto; margin-right:auto; background-color:var(--bg-color-surface-light-alt); border:1px solid var(--border-color-default); font-weight:400; padding:2px 15px; border-radius:var(--radius-sm); margin-top:var(--gap-s);}
.pricing-plan .btn {width:100%; margin-top:var(--space-px-20);}
/* Product Intro */
.product-intro-card {display:flex; flex-direction:column; gap:20px;}
.product-intro-card .product-info {flex:1;}
.product-intro-card .pricing-plan {flex:0 0 40%; max-width:350px; margin:0 auto;}
/* Feature & Addon Cards */
.feature-card {text-align:center; padding:var(--space-px-30);}
.feature-card .icon {width:48px; height:48px; font-size:var(--font-size-5xl); color:var(--icon-static); margin-bottom:var(--space-px-20); 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:0 10px 30px rgba(139, 69, 19, 0.08); 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(--space-px-20);}
.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(--gap-s); text-align:center; margin-bottom:var(--gap-l);}
.addon-card > .addon-card-top > .addon-header > .icon {width:48px; height:48px; font-size:var(--font-size-3xl); line-height:1;}
.addon-card > .addon-card-top > .addon-header > h3 {font-size:var(--font-size-l); margin:0; font-weight:var(--font-weight-semibold);}
.addon-options {width:100%; flex-shrink:0;}
.addon-options label:hover {border-color:var(--color-yellow-500); background-color:#fff;}
.addon-options-grid {display:grid; gap:var(--gap-s);}
.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(--gap-m); border-radius:var(--radius-sm); font-size:var(--font-size-s); font-weight:var(--font-weight-medium); cursor:pointer; transition:all 0.2s ease-in-out; color:var(--text-color-secondary); border:1px solid var(--border-color-default); background-color:var(--bg-color-surface-light-alt);}
.addon-options-grid input[type="radio"]:checked + label {background-color:#FFFDF5; color:var(--text-color-brown); border-color:var(--color-yellow-500); font-weight:var(--font-weight-semibold); box-shadow:0 2px 8px rgba(255, 220, 115, 0.3);}
.addon-card-bottom {margin-top:auto; border-top:1px solid var(--border-color-default); padding-top:var(--space-px-15);}
.addon-pricing {min-height:40px; display:flex; align-items:center; justify-content:center;}
.addon-price-display p {font-size:var(--font-size-l); font-weight:var(--font-weight-bold); color:var(--text-color-brown); margin:0;}
.addon-price-display span {font-size:var(--font-size-s); font-weight:var(--font-weight-normal); color:var(--text-color-secondary); margin-left:var(--gap-xs);}
/* Service Showcase & Lists */
.service-showcase-section {background-color:var(--bg-color-surface-light-alt);}
ul.list-options-square li .icon, ul.list-options-neutral li .icon, ul.list-options-dark li .icon, ul.list-promo li .icon, ul.list-security li .icon, ul.list-terms li .icon, ul.list-specs li .icon, ul.list-config li .icon, ul.list-guide li .icon, ul.styled-list li.link-item .icon {border-radius:var(--radius-md);}
ul.list-options li .icon, ul.list-options-square li .icon {background-color:var(--color-true-white); color:var(--color-green-500);}
ul.list-features li .icon {background-color:var(--bg-color-dark); color:var(--bg-color-accent);border-radius:var(--radius-full);}
ul.list-features-hot li .icon, ul.list-promo li .icon, ul.list-danger li .icon {background-color:var(--color-red-500); color:var(--color-true-white);border-radius:var(--radius-full);}
ul.list-notes li .icon, ul.list-options-neutral li .icon, ul.list-terms li .icon, ul.list-guide li .icon, ul.list-specs li .icon, ul.list-config li .icon, ul.styled-list li.link-item .icon {color:var(--text-color-brown);}
ul.list-security li .icon {background-color:var(--color-true-white); color:var(--color-brown-700);}
ul.list-warning li .icon {color:var(--color-red-500); border-radius:var(--radius-sm);}
ul.list-features-dark li .icon, ul.list-warning-dark li .icon {background-color:var(--text-color-dark-primary); color:var(--text-color-accent);border-radius:var(--radius-full);}
ul.list-options-dark li .icon {background-color:var(--text-color-dark-primary); color:var(--color-true-white);}
.img-container-center {text-align:center; margin:var(--space-px-30) 0;}
.img-post, .img-service {display:block; margin:0 auto var(--space-px-15) auto; max-width:100%; height:auto; border-radius:var(--radius-md);}
.img-post {border:1px solid var(--border-color-default); box-shadow:var(--box-shadow-default);}

/* --- 9. PROMOTIONS --- */
.promotions {background-color:var(--bg-color-surface-light-alt);}
.promo-cards-container {display:grid; grid-template-columns:1fr; gap:var(--gap-3xl);}
.promo-card-final {background-color:var(--color-true-white); border:1px solid var(--border-color-default); border-radius:var(--radius-lg); padding:var(--space-px-30); box-shadow:var(--box-shadow-default); text-align:center; display:flex; flex-direction:column; transition:all .3s ease;}
.promo-card-final:hover {transform:translateY(-5px); box-shadow:var(--box-shadow-hover); background-color:#fffaf0;}
.promo-details-final {margin-bottom:var(--space-px-20);}
.promo-details-final h3 {font-size:var(--font-size-xl); margin:0 0 10px 0; color:var(--text-color-dark-primary);}
.promo-details-final h3 strong {color:var(--text-color-brown);}
.promo-details-final p {margin:0; color:var(--text-color-secondary); line-height:1.6;}
.promo-code-wrapper-final {border:2px dashed #fcdba3; border-radius:var(--radius-md); padding:var(--space-px-15) var(--space-px-20); background-color:#fff; margin-top:auto; text-align:center; display:flex; justify-content:center; align-items:center;}
.code-text-final {margin:0; display:inline-flex; align-items:center; gap:8px; font-size:var(--font-size-l);}
.code-text-final .icon-voucher {width:24px; height:24px; color:var(--text-color-dark-primary); fill:currentColor; flex-shrink:0;}
.code-text-final .label {font-weight:var(--font-weight-bold); color:var(--text-color-dark-primary);}
.code-text-final .promo-code {color:var(--text-color-brown); font-weight:800; letter-spacing:1px;}
.integrated-promo {margin-top:25px; padding:15px; border:2px dashed var(--color-yellow-500); border-radius:var(--radius-md); background-color:#fffaf0; text-align:center;}
.integrated-promo h4 {font-size:1.1em; margin:0 0 10px 0; color:var(--text-color-dark-primary);}
.integrated-promo h4 strong {color:var(--text-color-brown);}
.integrated-promo p {margin:0; font-size:0.9em; color:var(--text-color-secondary);}

/* --- 10. ARTICLES & NEWS CONTENT --- */
.article-page-background, .page-background {background-color:var(--bg-color-surface-light-alt); padding-bottom:var(--space-px-50); padding-top:var(--space-px-50);}
.article-page-background .breadcrumb, .page-background .breadcrumb {padding-bottom:var(--space-px-20);}
.article-layout-grid {display:grid; grid-template-columns:1fr; gap:var(--gap-3xl);}
.article-layout-grid > .article-content, .article-layout-grid > .sidebar {min-width:0;}
.article-content {background-color:var(--bg-color-body); padding:var(--space-px-30); border-radius:var(--radius-lg); border:1px solid var(--border-color-default); box-shadow:var(--box-shadow-default);}

/* --- Nhãn trạng thái (Status Badge) - Phiên bản Tối ưu --- */
.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: 4px; border: 1px solid transparent; position: relative; top: -1px;}
.status-expired.is-promo {color: #E65100; background-color: #FFF3E0; border-color: #FFCC80;}
.status-expired.is-announcement {color: #546E7A; background-color: #ECEFF1; border-color: #CFD8DC;}
.status-expired .icon {width: 11px; height: 11px; opacity: 0.9; position: relative; top: -1px;}
/* Style cho dòng chữ thông báo hết hạn */
.expired-notice-text {color: var(--text-color-secondary); font-style: italic; opacity: 0.8; display: block; margin-top: 10px; font-size: 0.95em;}

.article-header {text-align:left; margin-bottom:var(--space-px-20);}
.article-header .news-tag {margin-bottom:var(--gap-l);}
.article-header h1 {font-size:var(--font-size-5xl); line-height:1.2; margin:0;}
.article-header .article-excerpt {font-size:var(--font-size-l); color:var(--text-color-secondary); margin-top:var(--space-px-15); padding-bottom:var(--space-px-25); line-height:var(--line-height-relaxed); border-bottom:1px solid var(--border-color-default);}
.article-header .article-meta {margin-top:var(--space-px-20); background-color:var(--bg-color-surface-light); border-left:3px solid var(--color-yellow-500); border-radius:0 var(--radius-md) var(--radius-md) 0; padding:var(--gap-l); display:flex; align-items:center; gap:var(--gap-l);}
.article-meta .meta-author {display:flex; align-items:center; gap:var(--gap-l);}
.article-meta .meta-author img {width:44px; height:44px; border-radius:var(--radius-full); border:1px solid var(--border-color-default);}
.author-details {display:flex; flex-direction:column;}
.author-details .author-name-label {font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary);}
.author-details a {font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary);}
.author-details a:hover {color:var(--text-color-brown);}
.author-details span {font-size:var(--font-size-s); color:var(--text-color-secondary);}
.author-name {padding-bottom:var(--space-px-15);}
.article-body h2, .faq-content h2 {font-size:var(--font-size-3xl); font-weight:var(--font-weight-bold); color:var(--text-color-dark-primary); margin-top:1em; margin-bottom:0.8em; line-height:var(--line-height-tight);}
.article-body h3, .faq-content h3 {font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); color:var(--text-color-dark-primary); margin-top:2.0em; margin-bottom:0.8em; line-height:var(--line-height-tight);}
.article-body h4, .faq-content h4 {font-size:var(--font-size-l); font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary); margin-top:1.8em; margin-bottom:0.8em; line-height:var(--line-height-tight);}
.article-body h5, .faq-content h5 {font-size:var(--font-size-m); font-weight:var(--font-weight-bold); color:var(--text-color-dark-primary); margin-top:1.8em; margin-bottom:0.8em; line-height:var(--line-height-tight);}
.article-body h2:first-child, .faq-content h2:first-child, .article-body h3:first-child, .faq-content h3:first-child, .article-body h4:first-child, .faq-content h4:first-child, .article-body h5:first-child, .faq-content h5:first-child {margin-top:1em;}
.article-body blockquote, .faq-content blockquote {margin:var(--space-px-30) 0; padding:var(--space-px-20) var(--space-px-30); background-color:var(--bg-color-surface-light-alt); border-left:5px solid var(--color-yellow-500); border-radius:0 var(--radius-md) var(--radius-md) 0; font-style:italic; color:var(--text-color-secondary);}
.article-body blockquote p, .faq-content blockquote p {margin:0; line-height:var(--line-height-relaxed);}
.article-body blockquote p:last-child, .faq-content blockquote p:last-child {margin-bottom:0;}
.featured-image {margin-bottom:var(--space-px-40);}
.featured-image img {border-radius:var(--radius-md);}
.featured-image figcaption {text-align:center; margin-top:var(--gap-m); font-size:var(--font-size-s); color:var(--text-color-secondary); font-style:italic;}
.article-footer {margin-top:var(--space-px-50); padding:var(--space-px-25) 0; border-top:1px solid var(--border-color-default); border-bottom:1px solid var(--border-color-default); display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-px-20);}
.article-tags, .article-share {display:flex; flex-wrap:wrap; align-items:center; gap:var(--gap-m);}
.tags-title, .share-title {font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary); font-size:var(--font-size-base); margin-right:var(--gap-s); display:flex; align-items:center; gap:var(--gap-s);}
.article-tags a {background-color:var(--bg-color-surface-light-alt); padding:var(--gap-s) var(--gap-l); border-radius:var(--radius-sm); color:var(--text-color-brown); font-weight:var(--font-weight-medium); font-size:var(--font-size-s); border:1px solid var(--border-color-default);}
.article-tags a:hover {background-color:var(--text-color-brown); border-color:var(--text-color-brown); color:var(--color-true-white);}
.article-share a {display:inline-flex; justify-content:center; align-items:center; width:38px; height:38px; border-radius:var(--radius-full); color:var(--color-true-white); font-size:var(--font-size-s); transition:transform 0.2s ease;}
.article-share a:hover {transform:scale(1.1);}
.share-facebook {background-color:#1877F2;}
.share-twitter {background-color:#1DA1F2;}
.share-linkedin {background-color:#0A66C2;}
.news-share-button {display:inline-flex!important; align-items:center!important; min-height:22px; vertical-align:middle;}
.news-facebook-share .fb-share-button span {display:flex!important; align-items:center!important;}
.author-box {margin-top:var(--space-px-40); padding:var(--space-px-30); background-color:var(--bg-color-surface-light); border-radius:var(--radius-lg); border-top:3px solid var(--color-yellow-500); display:flex; align-items:center; gap:var(--gap-xl);}
.author-box .author-avatar {border-radius:var(--radius-full); border:1px solid var(--border-color-default); width:65px; height:65px;}
.author-link {font-weight:var(--font-weight-semibold); color:var(--text-color-brown); font-size:var(--font-size-s);}
.author-link:hover {text-decoration:underline;}
/* News List & Categories */
.news {background-color:var(--bg-light-alt);}
.news-tag, .promo-overlay .promo-tag {display:inline-block; background-color:var(--bg-color-accent); color:var(--text-color-brown); padding:var(--space-px-5) var(--space-px-12); border-radius:var(--radius-full); font-size:var(--font-size-s); font-weight:var(--font-weight-semibold); margin-bottom:var(--gap-m);}
.news-tag:hover {background-color:var(--text-color-brown); color:var(--color-true-white);}
.news-featured-top {display:flex; gap:var(--gap-l); align-items:center; margin-bottom:var(--space-px-30);}
.news-featured-top img {border-radius:var(--radius-lg); width:80%; max-width:320px; aspect-ratio:3/2;}
.news-featured-content {flex:1;}
.news-featured-top h3 {font-size:var(--font-size-xxl);}
.news-featured-top:hover h3 {color:var(--text-color-brown);}
.news-featured-top p {color:var(--text-color-secondary); font-size:var(--font-size-base);margin-top: 12px;}
.news-list-bottom {display:flex; flex-direction:column; gap:var(--gap-l);}
.news-list-item-row {display:flex; align-items:center; gap:var(--gap-xl); background-color:var(--bg-color-body); padding:var(--space-px-20); border-radius:var(--radius-lg); transition:all .3s ease; border:1px solid var(--border-color-default);}
.news-list-item-row:hover {box-shadow:var(--box-shadow-hover); transform:translateX(5px); border-color:var(--color-true-white);}
.news-list-item-row img {width:180px; height:120px; border-radius:var(--radius-md); flex-shrink:0; aspect-ratio:3/2;}
.news-list-item-row h3 {font-size:var(--font-size-m); font-weight:var(--font-weight-semibold); line-height:1.4;}
.news-list-item-row p {margin-bottom:0; color:var(--text-color-secondary); font-size:var(--font-size-s);}
.news-featured-content .news-tag {display:inline-block; margin-bottom:var(--gap-m);}
.news-list-item-content .news-category {display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; background: none; padding: 0; color: var(--text-color-brown); font-weight: 600;}
.news-meta {display: flex; align-items: center; flex-wrap: wrap; gap: 25px; margin-bottom: 10px; font-size: var(--font-size-s); color: var(--text-color-secondary); width: 100%;}
.news-meta .news-category .category-icon {width: 16px; height: 16px; color: var(--text-color-secondary); opacity: 0.8;}
.news-list-item-content h3, .news-featured-content h3 {margin-bottom:var(--gap-s);}
.news-list-item-content .news-date, .news-featured-content .news-date {display: inline-flex; align-items: center; gap: 6px; margin-bottom: 0; font-weight: 400; flex-shrink: 0;	font-size:var(--font-size-s); color:var(--text-color-secondary);}
.news-date .icon {color:var(--color-gray-600); font-size:var(--font-size-base); line-height:1; width:14px; height:14px; position:relative; top:-1px;}
.related-post-content .related-post-title {margin:var(--space-px-10) 0;font-size:var(--font-size-m); font-weight:var(--font-weight-semibold); line-height:1.4;}
.related-post-content .icon {color:var(--color-gray-600);}
.latest-posts-section {margin-top:var(--space-px-65);}
.category-card {display:flex; align-items:center; gap:var(--gap-m); padding:var(--space-px-20);}
.category-card:hover {background-color:var(--bg-color-surface-light); transform:translateY(-5px); box-shadow:var(--box-shadow-hover);}
.category-card:hover .category-card-title {color:var(--text-color-brown);}
.category-card:hover .category-card-icon {color:var(--icon-hover); transform:scale(1.1);}
.category-card-icon {font-size:var(--font-size-3xl); color:var(--text-color-brown); width:40px; flex-shrink:0; text-align:center; margin-top:5px; color:var(--icon-static); transition:all 0.3s ease;}
.category-card-title {font-size:var(--font-size-l); margin-bottom:var(--gap-s); transition:color 0.2s ease;}
.category-card-title .article-count-badge {font-size:0.75em; font-weight:var(--font-weight-normal); color:var(--text-color-brown);}
.category-card-desc {margin:0; font-size:var(--font-size-s); color:var(--text-color-secondary); line-height:var(--line-height-normal);}
/* Search */
.search-form {display:flex; position:relative;}
.search-input {width:100%; padding:var(--space-px-12) var(--space-px-40) var(--space-px-12) var(--space-px-15); border:1px solid var(--border-color-default); border-radius:var(--radius-md); font-size:var(--font-size-s);}
.search-input:focus {outline:none; border-color:var(--text-color-brown); box-shadow:0 0 0 2px rgba(139,69,19,0.2);}
.search-button {position:absolute; right:0; top:0; height:100%; width:44px; background:none; border:none; cursor:pointer; color:var(--text-color-secondary); font-size:var(--font-size-base);}
.search-button:hover {color:var(--text-color-brown);}
.kb-search-container {margin:var(--gap-3xl) 0; margin-left:auto; margin-right:auto;}
.kb-search-container .search-form {position:relative;}
.kb-search-container .search-input {width:100%; padding:var(--space-px-16) var(--space-px-50) var(--space-px-16) var(--space-px-25); border:1px solid var(--border-color-default); border-radius:var(--radius-lg); font-size:var(--font-size-base); box-shadow:var(--box-shadow-default);}
.kb-search-container .search-input:focus {outline:none; border-color:var(--text-color-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:44px; width:44px; font-size:var(--font-size-xl); background:none; border:none; cursor:pointer; color:var(--text-color-secondary);}
.kb-search-container .search-button:hover {color:var(--text-color-brown);}
/* Pagination */
.pagination {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--gap-s); margin-top:var(--gap-3xl); padding:var(--gap-m) 0;}
.pagination .pagelink, .pagination strong {display:inline-flex; align-items:center; justify-content:center; padding:var(--gap-s) var(--gap-l); min-width:40px; height:40px; border:1px solid var(--border-color-default); border-radius:var(--radius-md); background-color:var(--color-true-white); color:var(--text-color-secondary); font-weight:var(--font-weight-medium); font-size:var(--font-size-s); text-align:center; text-decoration:none; transition:all 0.2s ease; cursor:pointer;}
.pagination .pagelink:hover {border-color:var(--text-color-brown); color:var(--text-color-brown); background-color:#fffaf0; transform:translateY(-2px); box-shadow:var(--box-shadow-default);}
.pagination .pagelink--active, .pagination strong {background-color:var(--text-color-brown); border-color:var(--text-color-brown); color:var(--color-true-white); font-weight:var(--font-weight-bold); cursor:default; box-shadow:none; transform:none;}
.pagination .pagelink--active:hover, .pagination strong:hover {background-color:var(--text-color-brown); border-color:var(--text-color-brown); color:var(--color-true-white); transform:none;}
.pagination strong {padding-left:var(--gap-l); padding-right:var(--gap-l);}

/* --- 11. SIDEBAR & WIDGETS --- */
.sidebar {position:sticky; top:100px; align-self:start;}
.sidebar .card:hover {transform:none; box-shadow:var(--box-shadow-default);}
.widget {margin-bottom:var(--gap-3xl);}
.widget-title {font-size:var(--font-size-l); margin:0 0 var(--space-px-20) 0; padding-bottom:var(--gap-l); border-bottom:1px solid var(--border-color-default); display:flex; align-items:center; gap:var(--gap-m);}
.widget-title .icon {color:var(--icon-static);}
.widget-posts .widget-title .icon {color:var(--color-yellow-500);}
.widget-posts .post-list {list-style:none; padding:0; margin:0;}
.widget-posts .post-list li {margin-bottom:var(--gap-l); padding-bottom:var(--gap-l); border-bottom:1px solid var(--border-color-default);}
.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(--gap-l);}
.widget-posts .post-list a:hover .post-title {color:var(--text-color-brown);}
.widget-posts .post-list img {width:120px; height:80px; 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(--font-size-s); font-weight:var(--font-weight-semibold); line-height:1.4; color:var(--text-color-dark-primary); margin-bottom:var(--gap-xs); transition:color 0.2s ease;}
.widget-posts .post-date {font-size:var(--font-size-xs); color:var(--text-color-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(--space-px-40) var(--space-px-20) var(--space-px-20); color:var(--color-true-white);}
.promo-overlay h4 {color:var(--color-true-white); font-size:var(--font-size-m); margin-bottom:var(--gap-s);}
.promo-overlay .promo-date {margin:0; font-size:var(--font-size-s);}

.widget-categories .category-list {list-style:none; padding:0; margin:0;}
.widget-categories .category-list li a {display:flex; align-items:center; padding:var(--gap-m) 0; border-bottom:1px solid var(--border-color-default); font-weight:var(--font-weight-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-color-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:20px; text-align:center; flex-shrink:0; margin-right:var(--gap-m); 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(--font-size-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(--space-px-20); 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(--gap-m);}
.widget-categories .widget-submenu li a {display:flex; justify-content:space-between; align-items:center; font-weight:var(--font-weight-normal); font-size:var(--font-size-s); padding:var(--gap-s) 0 var(--gap-s) var(--gap-xl); position:relative; border-top:1px solid var(--border-color-default); 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-color-secondary); position:absolute; left:0; font-weight:var(--font-weight-bold); font-size:1.2em; top:50%; transform:translateY(-50%);}
.widget-categories .category-list > li > a .promo-count-badge {display:inline-flex; align-items:center; justify-content:center; background-color:var(--color-red-500); color:var(--color-true-white); font-size:11px; font-weight:var(--font-weight-bold); min-width:20px; height:20px; border-radius:10px; margin-left:auto; flex-shrink:0;}
.widget-submenu li a span:last-of-type {font-size:0.9em; font-weight:var(--font-weight-normal); color:var(--icon-static);}
/* Table of Contents */
.article-toc {background-color:var(--bg-color-surface-light-alt); border:1px solid var(--border-color-default); padding:var(--space-px-20) var(--space-px-25); border-radius:var(--radius-md); transition:all 0.3s ease;}
p:has(+ #article-toc) {margin-bottom:var(--space-px-30);}
.article-toc__header {display:flex; justify-content:space-between; align-items:center; cursor:pointer; position:relative; padding-bottom:var(--gap-l); margin-bottom:var(--gap-l); border-bottom:1px solid var(--border-color-default); 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(--font-size-m); font-weight:var(--font-weight-bold); color:var(--text-color-dark-primary); display:flex; align-items:center; gap:var(--gap-s); margin:0;}
.article-toc__header .icon {color:var(--text-color-brown);}
.article-toc__toggle {background:transparent; border:none; cursor:pointer; padding:3px; color:var(--text-color-secondary); font-size:var(--font-size-base); width:24px; height:24px; 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__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(--gap-m);}
.article-toc__list > li {margin-bottom:var(--gap-m); line-height:var(--line-height-normal);}
.article-toc__list > li:last-child {margin-bottom:0;}
.article-toc__list a {color:var(--text-color-default); text-decoration:none; display:inline-block; padding:2px 0;}
.article-toc__list a:hover {color:var(--text-color-brown); text-decoration:none;}
.article-toc .sidebar-submenu {padding-left:var(--space-px-20); margin-top:var(--gap-m);}
.article-toc .sidebar-submenu .sidebar-submenu {padding-left:var(--space-px-20);}

/* --- 12. TABLES & CONTENT ELEMENTS --- */
ul.styled-list {list-style:none; padding-left:0; margin-top:var(--gap-l); margin-bottom:var(--gap-l);}
ul.styled-list li {position:relative; padding-left:35px; margin-bottom:var(--gap-m); line-height:var(--line-height-relaxed); color:var(--text-color-default);}
ul.styled-list li .icon {display:inline-flex; align-items:center; justify-content:center; font-size:.8em; width:16px; height:16px; position:absolute; left:0; top:5px;}
ul.styled-list li.link-item {color:var(--text-color-brown); margin-left:35px;}
.styled-table {width:100%; margin:var(--space-px-30) 0; border-collapse:collapse; font-size:var(--font-size-s); font-family:var(--font-primary); box-shadow:var(--box-shadow-default); border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-color-default);}
.styled-table thead tr {background-color:var(--bg-color-dark-alt); color:var(--text-color-on-dark); text-align:left; font-weight:var(--font-weight-semibold);}
.styled-table th, .styled-table td {padding:var(--space-px-15) var(--space-px-20); vertical-align:middle; border:1px solid var(--border-color-default);}
.styled-table tbody tr {border-bottom:1px solid var(--border-color-default);}
.styled-table tbody tr:nth-of-type(even) {background-color:var(--bg-color-surface-light);}
.styled-table tbody tr:last-of-type {border-bottom:none;}
.styled-table tbody tr:hover {background-color:var(--bg-color-surface-light-alt);}
.styled-table.comparison-table thead tr {background-color:var(--bg-color-dark);}
.styled-table.comparison-table tbody td:first-child {font-weight:var(--font-weight-semibold); background-color:var(--bg-color-surface-light-alt); color:var(--text-color-dark-primary);}
.styled-table.comparison-table thead th:first-child {background-color:var(--bg-color-dark); color:var(--text-color-on-dark);}
.styled-table.comparison-table .highlight {background-color:#fffbeb;}
.styled-table .fa-check {color:var(--color-green-500);}
.styled-table .fa-times {color:var(--color-red-500);}
.styled-table .best-for-row td {background-color:var(--bg-color-surface-light-alt); font-style:italic; font-weight:500;}
.styled-table td strong {color:var(--text-color-brown);}
.styled-table td img {display:inline-block; vertical-align:middle; margin-right:var(--gap-s); max-height:24px; width:auto; margin-bottom:2px;}
.expired-warning {background-color:#fffbeb; border:1px solid var(--color-yellow-500); border-left-width:5px; padding:var(--gap-l) var(--gap-xl); margin:var(--space-px-30) 0; border-radius:var(--radius-md); color:var(--text-color-default); font-family:var(--font-primary); font-size:var(--font-size-base); line-height:var(--line-height-relaxed);}
.expired-warning h4 {display:flex; align-items:center; color:var(--text-color-brown);}
.expired-warning h4 .icon {margin-right:var(--gap-s); color:var(--color-red-500); font-size:0.9em;}
.expired-warning .small-italic {display:block; margin-top:var(--gap-l); margin-bottom:var(--gap-l); font-weight:500; text-align:center;}
.expired-warning p {margin-bottom:var(--gap-s); line-height:var(--line-height-normal);}
.expired-warning p:last-child {margin-bottom:0;}
.expired-warning a {color:var(--text-color-brown); font-weight:var(--font-weight-semibold);}
.expired-warning a:hover {text-decoration:underline;}
.info-box {margin:var(--space-px-30) 0; padding:var(--space-px-20); background-color:#eef5fa; border-left:4px solid #3498db; border-radius:0 var(--radius-sm) var(--radius-sm) 0;}
.info-box p {margin:0; color:#2c3e50; font-size:var(--font-size-base);}
.info-box strong {color:#2980b9;}
.mylink {border-radius:var(--radius-sm); font-weight:var(--font-weight-normal); border:1px solid var(--border-color-default); background-color:var(--bg-color-surface-light); color:var(--text-color-dark-primary); padding:0 var(--space-px-5); transition:all 0.2s ease;}
.mylink:hover, .mylink:active {border:1px solid var(--border-color-dark); background-color:var(--bg-color-dark); color:var(--text-color-accent);}
.text-link {color:var(--text-color-brown); font-weight:var(--font-weight-semibold); text-decoration:none;}
.text-link:hover {text-decoration:underline; color:var(--color-brown-700);}
.small-italic {font-size:var(--font-size-s); color:var(--text-color-secondary); font-style:italic;}
.normal-italic {font-style:italic; color:var(--text-color-secondary);}
.bold-italic {font-style:italic; font-weight:var(--font-weight-semibold); color:var(--text-color-default);}
.code {font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace; font-size:0.9em; background-color:var(--bg-color-surface-light-alt); color:var(--text-color-dark-primary); padding:var(--space-em-025) var(--space-em-050); border-radius:var(--radius-sm); border:1px solid var(--border-color-default);}
.bold-gray-bg {font-weight:var(--font-weight-bold); color:var(--text-color-dark-primary); background-color:var(--bg-color-muted); padding:.1em var(--space-em-025); border-radius:var(--radius-sm);}
.bold-light-bg {font-size:.9em; font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary); background-color:var(--bg-color-surface-light-alt); padding:var(--space-px-4) var(--space-px-5); border-radius:var(--radius-sm); border:1px solid var(--border-color-default);}
.code-dark-bg {display:block; font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace; font-size:.9em; background-color:var(--bg-color-dark); color:var(--text-color-on-dark-alt); padding:var(--space-em-100) var(--space-em-125); border-radius:var(--radius-md); overflow-x:auto; white-space:pre-wrap; word-wrap:break-word; margin:var(--space-px-20) 0; border:1px solid var(--border-color-dark-alt); box-shadow:var(--box-shadow-default);}
.screen-text {display:block; font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace; font-size:.9em; background-color:var(--bg-color-surface-light-alt); color:var(--text-color-dark-primary); padding:var(--space-em-100) var(--space-em-125); border:1px dashed var(--border-color-strong); border-radius:var(--radius-sm); margin:var(--space-px-20) 0; white-space:pre-wrap; word-wrap:break-word; overflow-x:auto;}
.mybox {display:inline-block; padding:var(--space-em-050) var(--space-em-100); max-width:100%; border:1px solid var(--border-color-default); border-radius:var(--radius-lg); background-color:var(--bg-color-surface-light); box-shadow:var(--box-shadow-default); text-align:left; font-size:var(--font-size-s); margin:var(--gap-l) 0;}
.map-iframe {width:100%; height:445px; border:1px solid var(--border-color-default); border-radius:var(--radius-lg); box-shadow:var(--box-shadow-default); background:var(--bg-color-surface-light); padding:var(--space-px-5);}
.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(--gap-m);}
.youtube, .video-responsive-wrapper {position:relative; overflow:hidden; width:100%; padding-top:56.25%; margin:var(--space-px-30) 0; border-radius:var(--radius-md); background-color:var(--bg-color-dark);}
.youtube iframe, .video-responsive-wrapper iframe {position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; border:none;}
/* Bank & Contact Info */
.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(--gap-m) 0; font-weight:var(--font-weight-medium); color:var(--text-color-default); transition:color 0.2s ease;}
.tag-group-list li:not(:last-child) a {border-bottom:1px solid var(--border-color-default);}
.tag-group-list li a:hover {color:var(--text-color-brown);}
.tag-count {background-color:var(--bg-color-surface-light-alt); border:1px solid var(--border-color-default); padding:3px 10px; border-radius:var(--radius-full); font-size:var(--font-size-xs); color:var(--text-color-brown); font-weight:normal;}
.payment-methods-logos {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--gap-3xl); padding-top:var(--gap-l);}
.payment-methods-logos img {height:35px; max-width:110px;}
.payment-notice {background-color:#fffaf0; border:1px solid #fde68a; color:var(--text-color-brown); padding:var(--space-px-15); border-radius:var(--radius-md); margin-top:var(--gap-xl);}
.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(--gap-l) 0; gap:var(--gap-l);}
.bank-details-list li:not(:last-child) {border-bottom:1px dashed var(--border-color-default);}
.bank-details-list .label {color:var(--text-color-secondary); flex-basis:35%; flex-shrink:0;}
.bank-details-list .value {font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary); display:flex; justify-content:space-between; align-items:center; width:100%;}
.copy-btn {background:none; border:1px solid var(--border-color-default); cursor:pointer; padding:3px 8px; border-radius:var(--radius-sm); flex-shrink:0;}
.copy-btn:hover {background-color:var(--bg-color-surface-light-alt);}
.steps-list {padding-left:20px;}
.steps-list li {margin-bottom:var(--gap-m); line-height:var(--line-height-relaxed);}
.contact-info-card .widget-title {border-bottom:1px solid var(--border-color-default); padding-bottom:var(--gap-l); margin-bottom:var(--space-px-20);}
.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-color-default); border-radius:2px;}
.contact-info-card .info-list li {display:flex; align-items:flex-start; gap:var(--gap-l); padding:var(--gap-m) 0; position:relative;}
.contact-info-card .info-list .icon {font-size:var(--font-size-base); color:var(--text-color-brown); margin-top:5px; width:22px; height:22px; line-height:22px; text-align:center; flex-shrink:0; background-color:var(--bg-color-body); position:relative; z-index:2;}
.contact-info-card .info-list p {margin:0; line-height:var(--line-height-relaxed);}
.contact-info-card .info-list a {font-weight:var(--font-weight-medium);}
.map-container-card {padding:var(--gap-m); height:100%;}
.map-wrapper {border-radius:var(--radius-md); overflow:hidden; height:100%; min-height:520px;}
.map-wrapper iframe {width:100%; height:100%; border:0; display:block;}
.tag-groups-grid {display:grid; grid-template-columns:1fr; gap:var(--gap-3xl);}
.payment-grid {display:grid; grid-template-columns:1fr; gap:var(--gap-3xl); margin-bottom:var(--gap-3xl);}
.contact-page-grid {display:grid; grid-template-columns:1fr; gap:var(--gap-3xl); align-items:flex-start;}

/* --- 13. FAQ, PARTNERS & RATING --- */
.faq details {background-color:var(--bg-color-surface-light); border:1px solid var(--border-color-default); border-radius:var(--radius-md); transition:background-color 0.2s ease;}
.faq details:hover {background-color:var(--color-true-white);}
.faq summary {padding:var(--space-px-16) var(--space-px-20); font-weight:var(--font-weight-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-color-brown);}
.faq summary::-webkit-details-marker {display:none;}
.faq summary .faq-icon {font-style:normal; font-size:28px; font-weight:300; line-height:1; color:var(--text-color-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-color-brown); transform:none;}
.faq details[open] summary .faq-icon::before {content:'−';}
.faq details[open] summary {color:var(--text-color-brown); border-bottom-color:var(--border-color-default); align-items:flex-start;}
.faq .faq-content {padding:var(--space-px-20); color:var(--text-color-secondary); background:var(--bg-color-body);}
.faq-columns {display:grid; grid-template-columns:1fr; gap:var(--gap-xl);}
.partners {background-color:var(--bg-color-surface-light-alt);}
.partner-logos {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--gap-3xl); width:100%;}
.partner-logos img {height:50px; opacity:0.8; transition:opacity 0.3s ease;}
.partner-logos img:hover {opacity:1;}
.supported-os {background-color:var(--bg-color-surface-light-alt);}
.os-card {padding:var(--space-px-30); text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.os-card img {height:60px; width:auto; max-width:100%; margin-bottom:var(--gap-l); object-fit:contain;}
.os-card h3 {margin:0; font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary);}
.article-rating-feedback {margin-top:var(--space-px-40); padding:var(--space-px-25); background-color:var(--bg-color-surface-light); border:1px solid var(--border-color-default); border-radius:var(--radius-md);}
.rating-header {display:flex; align-items:center; justify-content:center; gap:var(--gap-l); margin-bottom:var(--gap-m);}
.rating-title {font-size:var(--font-size-base); font-weight:var(--font-weight-semibold); margin:0;}
.article-rating-feedback .rating-title .icon {color:var(--icon-color-default); margin-right:5px;}
.article-rating-feedback .rating-star {margin:0;}
.article-rating-feedback .rating-stars {display:flex; gap:var(--gap-s); color:var(--color-gray-200); font-size:var(--font-size-xl);}
.article-rating-feedback .rating-stars .icon {color:var(--color-yellow-500); 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(--gap-m); margin:calc(-1 * var(--space-px-25)) auto var(--space-px-50) auto; max-width:480px;}
.section-rating .rating-stars {display:flex; gap:var(--gap-s);}
.section-rating .rating-stars .icon {color:var(--color-yellow-500); font-size:var(--font-size-xl);}
.section-rating .rating-text {margin:0; font-size:var(--font-size-base); color:var(--text-color-secondary); text-align:center; line-height:var(--line-height-normal);}
.rating-star {display:flex; flex-direction:column; align-items:center; margin-bottom:var(--gap-xxl);}
.star-cont {display:inline-flex; gap:var(--gap-xs); margin-bottom:var(--gap-m); cursor:pointer;}
.star {font-size:var(--font-size-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(--color-gray-200);}
.star.star-0 .icon {color:var(--color-gray-200);}
.star.star-1 .icon, .star.star-2 .icon {color:var(--color-yellow-500);}
.star-cont:hover .star {transform:scale(1.1);}
.feedback-stats {text-align:center; font-size:var(--font-size-s); color:var(--text-color-secondary); margin:0; line-height:var(--line-height-normal);}
.feedback-stats span {font-weight:var(--font-weight-semibold); color:var(--text-color-default);}
.feedback-stats.no-rating {color:var(--text-color-secondary); font-style:italic; font-weight:var(--font-weight-normal); padding:0;}
.page-news-cat .section-rating {margin-top:calc(-1 * var(--space-px-15)); margin-bottom:var(--space-px-40);}
.page-vps-vietnam .section-rating {margin:0 auto var(--space-px-40) auto; padding-bottom:var(--gap-3xl); border-bottom:1px solid var(--border-color-default); max-width:none;}

/* --- 14. FOOTER --- */
.main-footer {background-color:var(--bg-color-dark); color:var(--text-color-on-dark-alt); padding:var(--space-px-65) 0 var(--space-px-30) 0; font-size:var(--font-size-s);}
.main-footer a {color:var(--text-color-on-dark-alt); transition:color 0.2s ease;}
.main-footer a:hover {color:var(--link-color-on-dark-hover);}
.main-footer h3 {color:var(--text-color-on-dark); font-size:var(--font-size-m); font-weight:var(--font-weight-semibold); margin-bottom:var(--space-px-20);}
.footer-grid {display:grid; grid-template-columns:3fr 1.7fr 1.7fr 3fr; gap:var(--space-px-50); padding-bottom:var(--space-px-40); margin-bottom:var(--space-px-30); border-bottom:1px solid var(--border-color-dark-alt);}
.footer-widget p {line-height:var(--line-height-relaxed); margin-bottom:var(--space-px-20);}
.footer-widget ul {list-style:none; padding:0; margin:0;}
.footer-widget ul li {margin-bottom:var(--gap-m);}
.footer-logo {font-size:var(--font-size-xl); font-weight:var(--font-weight-bold); margin-bottom:var(--space-px-20);}
.footer-payment-methods {display:flex; align-items:center; gap:var(--gap-l); margin-top:var(--space-px-25);}
.footer-payment-methods img {height:38px; width:auto; border-radius:var(--radius-sm); padding:2px;}
.footer-contact-info li {display:flex; align-items:flex-start; gap:var(--gap-l); margin-bottom:var(--space-px-15);}
.footer-contact-info .icon {font-size:var(--font-size-base); color:var(--icon-color-accent); margin-top:5px; flex-shrink:0; width:20px; text-align:center;}
.footer-contact-info p, .footer-contact-info a {margin:0; line-height:var(--line-height-normal);}
.footer-bottom {display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--gap-xl);}
.footer-bottom-left {display:flex; align-items:center; flex-wrap:wrap; gap:var(--gap-xl);}
.copyright {margin:0; white-space:nowrap;}
.footer-social-links {display:flex; gap:var(--space-px-15);}
.footer-social-links a {font-size:var(--font-size-l); display:inline-flex; align-items:center; justify-content:center;}
.footer-bottom-right {display:flex; align-items:center; gap:var(--gap-xl); margin-left:auto;}
.footer-bottom-right a:hover img {opacity:1;}
.seal-dmca {height:27px; width:auto; opacity:0.9; transition:opacity 0.2s ease;}
.seal-bct {height:38px; width:auto; opacity:0.9; transition:opacity 0.2s ease;}
.safemail {unicode-bidi:bidi-override; direction:rtl;}

/* --- 15. HELPER CLASSES --- */
.text-center {text-align:center!important;}
.pb-0 {padding-bottom:0!important;}
.pt-0 {padding-top:0!important;}
.pt-40 {padding-top:var(--space-px-40)!important;}
.mb-xl {margin-bottom:var(--gap-xl)!important;}
.mb-3xl {margin-bottom:var(--gap-3xl)!important;}
.mt-m {margin-top:var(--gap-m)!important;}
.mt-3xl {margin-top:var(--gap-3xl)!important;}
.bg-light-alt {background-color:var(--bg-color-surface-light-alt)!important;}
.mobile-only {display:none;}
.desktop-only {display:inline-flex;}

/* --- 16. RESPONSIVE MEDIA QUERIES --- */
@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 {max-height:50px; min-width:0;}
    .article-content {padding:var(--space-px-50);}
    .two-column-layout {grid-template-columns:1fr 2fr;}
    .tag-groups-grid {grid-template-columns:repeat(2,1fr); align-items:flex-start;}
    .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(--gap-xl); 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(--space-px-25);}
    .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(--gap-m) var(--gap-l); min-height:0;}
    .grid-cols-tablet-2 > .pricing-plan:last-child:nth-child(odd) .pricing-simple-view .btn {margin-top:var(--gap-l); 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(--space-px-25);}
    .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-color-default); padding:var(--space-px-25); margin-left:0;}
}

@media (min-width:992px) {
    .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;}
    .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(--gap-xl); 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(--space-px-30);}
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .plan-features {grid-column:2; margin-bottom:0; padding:0 var(--space-px-25); 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(--space-px-50);}
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .pricing-simple-view {padding:var(--gap-xl) var(--gap-l); min-height:0;}
    .grid-cols-desktop-3 > .pricing-plan:last-child:nth-child(3n + 1) .pricing-simple-view .btn {margin-top:var(--gap-l); 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 {margin-bottom:0; flex-grow:1; padding:var(--space-px-25) var(--space-px-40);}
    .grid-cols-desktop-3 > .addon-card:last-child:nth-child(3n + 1) .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-color-default); padding:var(--space-px-25) var(--space-px-40); margin-left:0;}
}

@media (max-width:991px) {
    html {scroll-padding-top:155px;}
	body {padding: 90px 0 0 0;}
    h1 {font-size:var(--font-size-4xl);max-width: 100%;letter-spacing: -0.01em;}
    h2 {font-size:var(--font-size-3xl);}
	.news-featured-top h3 {
	  font-size: var(--font-size-xl);
	}
    .desktop-lang-switcher, .top-bar {display:none;}
    .desktop-only {display:none;}
    .mobile-only {display:inline-flex; align-items:center;}
	.sticky-header-wrapper {min-height: 90px;}
    .header-actions {gap:var(--gap-xl);}
    .header-actions .header-icon {display:inline-flex;}
    .main-header .container {position:static; padding-right:var(--space-px-15);}	
    .nav-toggle {display:block; position:relative; width:40px; height:40px;}
    .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:90px; left:0; right:0; max-height:calc(100vh - 95px); background-color:var(--bg-color-body); color:var(--text-color-dark-primary); box-shadow:var(--box-shadow-dropdown); border-radius:0 0 var(--radius-lg) var(--radius-lg); overflow-y:auto; overflow-x:hidden; z-index:1000; opacity:0; visibility:hidden; transform:translateY(-15px) scale(0.98); transition:all 0.3s; border:1px solid var(--border-color-default); border-top:none;}
    .main-nav.active {opacity:1; visibility:visible; transform:translateY(0) scale(1);}
    .main-nav ul {flex-direction:column; align-items:stretch; gap:0;}
    .main-nav ul li {width:100%; border-bottom:1px solid var(--border-color-default); 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(--gap-l); color:var(--text-color-dark-primary); font-weight:var(--font-weight-semibold); min-height:50px; display:flex; align-items:center;}
    .main-nav ul li.open > .menu-item-wrapper > a, .main-nav .menu-item-wrapper > a:hover {color:var(--link-color-hover-brown);}
    .main-nav .submenu-toggle {display:flex; align-items:center; justify-content:center; flex-shrink:0; width:50px; height:50px; background:none; border:none; cursor:pointer; font-size:var(--font-size-xl); color:var(--text-color-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-color-surface-light-alt); border-radius:0; max-height:0; overflow:hidden; transition:max-height 0.4s ease-in-out; border-top:1px solid var(--border-color-default); border-bottom:1px solid var(--border-color-default);}
    .main-nav li.open>.submenu {max-height:2000px;}
    .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-color-default); 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(--gap-l); padding:var(--gap-m) var(--gap-l) var(--gap-m) var(--space-px-30); border:none!important; color:var(--text-color-dark-primary);}
    .main-nav .submenu:not(.mega-menu) a {color:var(--text-color-dark-primary); position:relative; padding:var(--gap-m) var(--gap-l) var(--gap-m) var(--space-px-40); font-weight:var(--font-weight-normal); font-size:var(--font-size-s); border:none!important;}
    .main-nav .mega-menu .mega-menu-item > a:hover {background-color:rgba(0,0,0,0.05); color:var(--text-color-brown);}
    .main-nav .mega-menu .mega-menu-icon .icon {width:24px; height:24px;}
    .main-nav .mega-menu .mega-menu-text p {display:none;}
    .main-nav .mega-menu .mega-menu-text h4 {font-size:var(--font-size-base); font-weight:var(--font-weight-normal); margin:0; color:var(--text-color-dark-primary);}
    .main-nav .submenu:not(.mega-menu) a::before {content:'—'; position:absolute; left:var(--space-px-20); top:50%; transform:translateY(-50%); color:var(--text-color-secondary);}
    .main-nav .submenu:not(.mega-menu) a:hover {color:var(--text-color-brown); background-color:rgba(0,0,0,0.05);}
    .main-nav .nav-divider {height:1px; background-color:var(--border-color-default); border-bottom:none;}
	.mobile-nav-actions {display: flex; justify-content: space-between; padding: var(--gap-l); text-align: center; background-color: var(--bg-color-surface-light-alt); border-top: 1px solid var(--border-color-default);}	
	.mobile-lang-switcher-header .lang-dropdown {right: 20px; top: 90px; position: fixed;}
    .hero {padding:var(--space-px-30) 0;}
    .hero .container {grid-template-columns:1fr;}
    .hero-content {text-align:center;}
    .hero-content p {margin-left:auto; margin-right:auto;}
    .news-featured-top {flex-direction:column; align-items:flex-start;}
    .news-featured-top img {border-radius:var(--radius-lg); width:100%; max-width:800px;}
    .footer-grid {grid-template-columns:repeat(2,1fr); gap:var(--gap-3xl);}
    .footer-bottom {justify-content:center;}
    .footer-bottom-right {margin:0;}
    .map-wrapper {min-height:400px;}
}

@media (max-width:767px) {
    .article-header h1 {font-size:2.2rem;}
    .author-box {flex-direction:column; text-align:center;}
    .author-box .author-avatar {margin-bottom: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(--gap-l);}
    .news-meta {margin-top: 5px; gap: 20px;}	
	.partner-logos img {height:30px;width: auto;}
    .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(--gap-l);}
    .footer-bottom-right {margin-left:0; margin-top:var(--gap-l);}
    .styled-table {border:none; box-shadow:none; border-radius:0; overflow:visible; border-top:1px solid var(--border-color-default);}
    .styled-table thead {display:none;}
    .styled-table, .styled-table tbody, .styled-table tr, .styled-table td {display:block; width:100%;}
    .styled-table tr {margin-bottom:var(--space-px-20); border:1px solid var(--border-color-default); box-shadow:var(--box-shadow-default); border-radius:var(--radius-md); overflow:hidden; background-color:var(--bg-color-body);}
    .styled-table tr:last-of-type {margin-bottom:0;}
    .styled-table td {position:relative; padding:var(--space-px-12) var(--space-px-15) var(--space-px-12) 130px; min-height:45px; border:none; border-bottom:1px solid var(--border-color-default); text-align:left; display:flex; align-items:center;}
    .styled-table td::before {content:attr(data-label); position:absolute; left:var(--space-px-15); width:100px; font-weight:var(--font-weight-semibold); color:var(--text-color-dark-primary); word-wrap:break-word; top:50%; transform:translateY(-50%); font-size:0.9em;}
    .styled-table tr td:last-child {border-bottom:none;}
    .styled-table tbody tr:nth-of-type(even) {background-color:var(--bg-color-body);}
    .styled-table tbody tr:hover {background-color:var(--bg-color-body);}
    .map-iframe {height:300px;}
}
/* Tối ưu riêng cho các thiết bị từ iPhone 14 Pro trở xuống */
@media (max-width: 395px) {
    html {scroll-padding-top:115px;}
	body {padding: 75px 0 0 0;}	
	
 .sticky-header-wrapper {
    min-height: 75px;
  }    
    /* 1. Tinh chỉnh container để tận dụng tối đa diện tích */
    .container {
        padding-left: 12px; 
        padding-right: 12px;
    }
    .main-header .container {
        padding-right: 12px; 
    }

    /* 2. Thu gọn khoảng cách các icon hành động */
    .header-actions {
        gap: 8px; /* Giảm gap chút xíu để an toàn tuyệt đối */
    }
	.main-nav {top: 75px;max-height: calc(100vh - 75px);}
    /* 3. Tối ưu Logo: Thu nhỏ để nhường đất diễn */
    .logo img {
        height: 45px; /* Kích thước vàng: Gần bằng nút menu 40px */
        width: auto; 
        max-width: 100%; 
    }
    
    /* 4. Fix icon ngôn ngữ (như đã bàn) */
    .mobile-lang-switcher-header .current-lang {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .mobile-lang-switcher-header .current-lang img {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--color-true-white), 0 0 0 2px var(--border-color-default);
        object-fit: cover;
        flex-shrink: 0;
    }
	.mobile-lang-switcher-header .lang-dropdown {
	  right: 12px;
	  top: 75px;
	}	
	
	.section {
	  padding-top: var(--space-px-40);
	  padding-bottom: var(--space-px-40);
	}
/* --- TYPOGRAPHY SYSTEM CHO MOBILE NHỎ (< 395px) --- */
    
    /* 1. Body Text: Giảm xuống 15px để dòng chữ dài hơn, đỡ gãy dòng */
    body, p, li, input, select, textarea, .btn {
        font-size: 15px; 
        line-height: 1.5; /* Thoáng hơn chút cho dễ đọc */
    }

    /* 2. Heading System: Tỷ lệ vàng thu nhỏ */
    h1 {
        font-size: 26px;
        line-height: 1.2;       /* Tiêu đề to cần dòng sít nhau hơn */
        margin-bottom: 12px;    /* Thu hẹp khoảng cách dưới */
    }

    h2 {
        font-size: 22px;
        line-height: 1.3;
        margin-bottom: 10px;
    }

    h3 {
        font-size: 20px;
        line-height: 1.35;
        margin-bottom: 8px;
    }

    h4 {
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 8px;
    }

    /* 3. Tinh chỉnh các thành phần đặc thù */
/* --- TINH CHỈNH CÁC CLASS ĐẶC THÙ (Override Specific Classes) --- */

    /* 1. Trang chi tiết bài viết (Blog/News/Knowledgebase) 
       Cần reset lại để không bị các size 3xl, 5xl đè lên size chuẩn */
    .article-header h1 {
        font-size: 26px; /* Quan trọng: Đảm bảo không to hơn H1 trang chủ */
        line-height: 1.25;
        margin-bottom: 15px;
    }
    
    /* Nội dung bài viết & FAQ: Đảm bảo cấu trúc tháp giảm dần */
    .article-body h2, .faq-content h2 {
        font-size: 22px; /* Bằng H2 chuẩn */
        margin-top: 25px;
        margin-bottom: 15px;
    }
    
    .article-body h3, .faq-content h3 {
        font-size: 20px; /* Bằng H3 chuẩn */
        margin-top: 20px;
        margin-bottom: 12px;
    }
    
    .article-body h4, .faq-content h4 {
        font-size: 18px; /* Bằng H4 chuẩn */
        margin-top: 15px;
    }

    /* 2. Khối Tin tức nổi bật (Featured News) 
       Ở desktop nó là 30px (3xl), mobile cần thu gọn */
    .news-featured-top h3 {
        font-size: 20px; 
        line-height: 1.3;
        margin-bottom: 10px;
    }

    /* 3. Card Khuyến mãi (Promo) */
    .promo-details-final h3 {
        font-size: 20px; /* Thu gọn để vừa vặn trong card */
        margin-bottom: 8px;
    }
    
    /* 4. Tiêu đề trang trí gạch chân (Dùng ở trang chủ/landing page) */
    .section-title-underline {
        font-size: 22px; /* Đồng bộ với H2 */
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    
    /* 5. Widget Title (Sidebar/Footer) */
    .widget-title, .footer-widget h3 {
        font-size: 18px; /* Nhỏ hơn H3 chút để tinh tế */
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    
    /* 6. Addon Card Header */
    .addon-header h3 {
        font-size: 18px;
    }	
	
	
	.hero-content span {letter-spacing: -0.01em;}	
    
    /* Hero Content: Đoạn dẫn nhập có thể giữ 16px cho nổi bật */
    .hero-content p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    /* Section Title: Giảm margin để các khối gần nhau hơn */
    .section-title {
        margin-bottom: 20px;
    }
    
    /* Section Title Underline: Thu nhỏ gạch chân trang trí */
    .section-title-underline {
        font-size: 22px; /* Đồng bộ với H2 */
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    
    /* Pricing Price: Số tiền cần to rõ nhưng không quá khổ */
    .price-display .final-price {
        font-size: 28px; /* Giảm từ 36px xuống */
    }
    
    /* Nút bấm: Thu gọn padding để nút không bị bè ra quá to */
    .btn, .btn-lg {
        padding: 10px 20px; /* Gọn gàng hơn */
        font-size: 15px;
        height: auto;
    }
	.article-content {padding: var(--space-px-12);}
	.article-rating-feedback {padding: var(--space-px-15) var(--space-px-5);}
	.feedback-stats {font-size: var(--font-size-xs);}
	.author-box {padding: var(--space-px-12);}
}