/* ==========================================================================
   WEBSOBI — Cho thuê thiết kế website trọn gói cho doanh nghiệp
   Design System: Refined Sand Gold & Warm Beige with Peacock Teal & Deep Navy
   Typography: Plus Jakarta Sans (Body & UI) + Playfair Display (Luxury Accents)
   ========================================================================== */

/* --------------------------------------------------------------------------
   DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
    /* Sand Gold (Vàng Cát) & Accents */
    --gold: #c29342;
    --gold-light: #dfb66d;
    --gold-dark: #996f26;
    --gold-gradient: linear-gradient(135deg, #dfb66d 0%, #c29342 50%, #996f26 100%);
    --gold-glow: rgba(194, 147, 66, 0.22);
    --gold-line: rgba(194, 147, 66, 0.25);

    /* Peacock Teal (Xanh Cổ Vịt) */
    --teal: #0f5953;
    --teal-light: #177d75;
    --teal-dark: #0a3d39;
    --teal-glow: rgba(15, 89, 83, 0.25);
    --teal-gradient: linear-gradient(135deg, #177d75 0%, #0f5953 60%, #0a3d39 100%);

    /* Deep Navy & Dark Surfaces */
    --navy: #0b1e28;
    --navy-2: #122a37;
    --navy-3: #183747;
    --ink: #0b1e26;
    --ink-2: #122b37;
    --ink-3: #193a4a;
    --ink-card: #132d39;

    /* Soft Warm Beige & Ivory Surfaces */
    --ivory: #fdfbf7;
    --ivory-2: #f6f1e7;
    --ivory-3: #eee5d5;
    --sand-tint: rgba(194, 147, 66, 0.08);

    /* Typography Colors */
    --text: #0e242c;
    --text-muted: #4e656d;
    --text-subtle: #7d939c;
    --on-dark: #fbfaf6;
    --on-dark-mute: rgba(251, 250, 246, 0.78);

    /* Borders & Lines */
    --line: #e3d9ca;
    --line-subtle: #efe8dc;
    --line-dark: rgba(194, 147, 66, 0.18);

    /* Geometry & Spacing */
    --shell: 1240px;
    --r-xs: 4px;
    --r: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-pill: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(11, 30, 38, 0.04);
    --shadow-sm: 0 3px 10px -2px rgba(11, 30, 38, 0.06);
    --shadow-md: 0 10px 26px -4px rgba(11, 30, 38, 0.08);
    --shadow-lg: 0 18px 40px -6px rgba(11, 30, 38, 0.12);
    --shadow-dark: 0 20px 48px -10px rgba(0, 0, 0, 0.55);

    /* Transitions & Easing */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out: cubic-bezier(0.33, 1, 0.68, 1);

    /* Semantic Gaps */
    --gap-xs: 8px;
    --gap-sm: 14px;
    --gap-md: 24px;
    --gap-lg: 36px;
    --gap-xl: 56px;

    /* Compatibility aliases */
    --indo-gold: var(--gold);
    --indo-gold-light: var(--gold-light);
    --indo-gold-dark: var(--gold-dark);
    --indo-teal: var(--teal);
    --indo-dark: var(--ink);
    --indo-muted: var(--text-muted);
    --indo-border: var(--line);
}

/* --------------------------------------------------------------------------
   BASE & RESET
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
}

body {
    margin: 0;
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.65;
    color: var(--text);
    background: var(--ivory);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.25s var(--ease);
}

button {
    font-family: inherit;
    border: none;
    background: transparent;
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Plus Jakarta Sans", system-ui, sans-serif;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
    text-wrap: balance;
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

::selection {
    background: var(--gold);
    color: #ffffff;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ivory-2);
}
::-webkit-scrollbar-thumb {
    background: #cbd5d8;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--gold);
}

/* Progress bar top */
.progress, #progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gold-gradient);
    z-index: 100;
    width: 0%;
    transition: width 0.1s linear;
}

/* --------------------------------------------------------------------------
   LAYOUT CONTAINERS & SECTIONS
   -------------------------------------------------------------------------- */
.shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: 24px;
}

.section {
    padding-block: clamp(56px, 7vw, 96px);
    position: relative;
}

.section--tight {
    padding-block: clamp(40px, 4.5vw, 64px);
}

.on-dark {
    background: var(--ink);
    color: var(--on-dark);
}

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 {
    color: #ffffff;
}

.on-dark p {
    color: var(--on-dark-mute);
}

.on-dark strong {
    color: #ffffff;
}

.grain {
    position: relative;
}

.grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.12;
    background-image: radial-gradient(rgba(223, 182, 109, 0.25) 1px, transparent 0);
    background-size: 24px 24px;
}

.bg-rattan {
    background: var(--ivory-2);
}

.bg-rattan-dark {
    background: var(--ink-2);
    border-top: 1px solid var(--line-dark);
    border-bottom: 1px solid var(--line-dark);
}

/* Grid Utilities */
.grid {
    display: grid;
    gap: var(--gap-md);
}

.g-2 {
    grid-template-columns: repeat(2, 1fr);
}

.g-3 {
    grid-template-columns: repeat(3, 1fr);
}

.g-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 960px) {
    .g-3, .g-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .g-2, .g-3, .g-4, .g-mob2 {
        grid-template-columns: 1fr;
    }
}

/* Section Header */
.sec-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(32px, 4vw, 52px);
    flex-wrap: wrap;
}

.sec-head--center {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    align-items: center;
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.eyebrow::before {
    content: "";
    width: 20px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

.eyebrow--center {
    justify-content: center;
}

.eyebrow--center::after {
    content: "";
    width: 20px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}

.h-hero {
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #ffffff;
}

.h-sec {
    font-size: clamp(22px, 2.3vw, 32px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.h-card {
    font-size: clamp(16px, 1.15vw, 18px);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.gold-text {
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline;
}

.teal-text {
    color: var(--teal-light);
}

.lead {
    font-size: clamp(14.5px, 1.05vw, 16px);
    line-height: 1.65;
    color: var(--text-muted);
}

.on-dark .lead {
    color: var(--on-dark-mute);
}

.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    margin: 0;
}

.on-dark .rule {
    background: var(--line-dark);
}

/* --------------------------------------------------------------------------
   BUTTONS & BADGES
   -------------------------------------------------------------------------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: none;
    border-radius: var(--r);
    border: 1px solid transparent;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    transition: transform 0.2s var(--ease), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    white-space: nowrap;
}

.btn:active {
    transform: scale(0.98);
}

.btn--gold {
    background: var(--gold-gradient);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgba(194, 147, 66, 0.38);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn--gold:hover {
    background: linear-gradient(135deg, #e5be78 0%, #ad8236 100%);
    box-shadow: 0 6px 20px 0 rgba(194, 147, 66, 0.48);
    transform: translateY(-1px);
    color: #ffffff;
}

.btn--teal {
    background: var(--teal-gradient);
    color: #ffffff;
    box-shadow: 0 4px 14px 0 rgba(15, 89, 83, 0.35);
    border-color: rgba(255, 255, 255, 0.18);
}

.btn--teal:hover {
    background: linear-gradient(135deg, #198880 0%, #0d4a45 100%);
    box-shadow: 0 6px 20px 0 rgba(15, 89, 83, 0.45);
    transform: translateY(-1px);
    color: #ffffff;
}

.btn--outline {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    border-color: rgba(223, 182, 109, 0.3);
    backdrop-filter: blur(8px);
}

.btn--outline:hover {
    background: rgba(223, 182, 109, 0.15);
    border-color: var(--gold);
    color: #ffffff;
    transform: translateY(-1px);
}

.btn--ink {
    background: var(--ink);
    color: #ffffff;
}

.btn--ink:hover {
    background: var(--ink-2);
    transform: translateY(-1px);
}

.btn--sm {
    padding: 9px 18px;
    font-size: 12px;
    border-radius: 6px;
}

.btn--wide {
    width: 100%;
}

.link-gold {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gold);
    transition: gap 0.25s var(--ease), color 0.25s ease;
}

.link-gold:hover {
    gap: 12px;
    color: var(--gold-light);
}

/* Badges & Tags */
.badge, .mkt-badge, .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--r-pill);
    background: rgba(194, 147, 66, 0.12);
    color: var(--gold);
    border: 1px solid var(--gold-line);
    white-space: nowrap;
}

.mkt-badge {
    margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   HEADER & NAVIGATION
   -------------------------------------------------------------------------- */
.hdr {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 80;
    background: rgba(11, 30, 38, 0.86);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(223, 182, 109, 0.15);
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.hdr.is-solid, .hdr.is-inner {
    background: rgba(11, 30, 38, 0.96);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-bottom-color: rgba(223, 182, 109, 0.25);
}

.hdr__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    gap: 20px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: none;
    text-decoration: none;
}

.brand__mark {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--gold-gradient);
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(194, 147, 66, 0.35);
}

.brand__name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #ffffff;
    line-height: 1;
}

.brand__tag {
    display: block;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-top: 3px;
    font-weight: 600;
}

.nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.nav__link {
    position: relative;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(251, 250, 246, 0.82);
    padding: 6px 0;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    border-radius: 1px;
    transition: width 0.3s var(--ease);
}

.nav__link:hover {
    color: #ffffff;
}

.nav__link:hover::after, .nav__link[aria-current="page"]::after {
    width: 100%;
}

.nav__link[aria-current="page"] {
    color: #ffffff;
}

.nav__item {
    position: relative;
}

.nav__caret {
    display: inline-block;
    margin-left: 4px;
    transition: transform 0.25s var(--ease);
}

.nav__item:hover .nav__caret {
    transform: rotate(180deg);
}

.dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 10px);
    min-width: 260px;
    background: var(--ink-2);
    border: 1px solid rgba(223, 182, 109, 0.2);
    border-radius: var(--r-md);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
    backdrop-filter: blur(16px);
}

.dropdown::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}

.nav__item:hover .dropdown,
.dropdown:hover {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.dropdown a {
    display: block;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(251, 250, 246, 0.8);
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.dropdown a:hover {
    color: #ffffff;
    background: rgba(194, 147, 66, 0.15);
    padding-left: 18px;
}

.hdr__cta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: none;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(223, 182, 109, 0.2);
    padding: 3px 8px;
    border-radius: var(--r-pill);
}

.lang-btn {
    font-size: 11px;
    font-weight: 700;
    color: rgba(251, 250, 246, 0.65);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.lang-btn.is-active {
    color: var(--gold-light);
}

.lang-sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: 10px;
}

.hdr__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.hdr__phone svg {
    color: var(--gold);
}

.hdr__phone:hover {
    color: var(--gold-light);
}

.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: 0;
    padding: 8px;
    cursor: pointer;
}

.burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    border-radius: 1px;
    transition: transform 0.3s var(--ease), opacity 0.2s ease;
}

.burger.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.is-open span:nth-child(2) {
    opacity: 0;
}

.burger.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mnav {
    position: fixed;
    inset: 72px 0 auto 0;
    background: var(--ink-2);
    border-top: 1px solid rgba(223, 182, 109, 0.2);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
    z-index: 79;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.mnav.is-open {
    max-height: calc(100vh - 72px);
    overflow-y: auto;
}

.mnav__in {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mnav__in a {
    font-size: 16px;
    font-weight: 600;
    color: rgba(251, 250, 246, 0.85);
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mnav__in a:hover {
    color: var(--gold-light);
}

.mnav__sub {
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mnav__sub a {
    font-size: 14px;
    color: rgba(251, 250, 246, 0.7);
    border-bottom: none;
    padding: 4px 0;
}

@media (max-width: 1040px) {
    .nav, .hdr__phone {
        display: none;
    }
    .burger {
        display: flex;
    }
}

/* --------------------------------------------------------------------------
   HERO SECTION & HERO SLIDER
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    padding-top: calc(72px + clamp(40px, 5.5vw, 76px));
    padding-bottom: clamp(56px, 7vw, 96px);
    background: var(--ink);
    overflow: hidden;
}

.hero__glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(194, 147, 66, 0.16) 0%, rgba(15, 89, 83, 0.12) 50%, transparent 70%);
    top: -100px;
    right: 5%;
    pointer-events: none;
    filter: blur(50px);
}

.hero__glow--2 {
    top: 30%;
    left: -150px;
    background: radial-gradient(circle, rgba(15, 89, 83, 0.2) 0%, transparent 70%);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(36px, 5vw, 64px);
    align-items: center;
}

.hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid rgba(223, 182, 109, 0.2);
}

.hero__stats div b {
    display: block;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 800;
    color: var(--gold-light);
    line-height: 1.1;
}

.hero__stats div span {
    display: block;
    font-size: 11.5px;
    color: var(--on-dark-mute);
    margin-top: 4px;
    font-weight: 500;
}

/* Hero Slider Component */
.hero-slider-wrap {
    position: relative;
    background: linear-gradient(135deg, rgba(19, 45, 57, 0.85) 0%, rgba(11, 30, 38, 0.95) 100%);
    border: 1px solid rgba(223, 182, 109, 0.3);
    border-radius: var(--r-xl);
    padding: 16px;
    box-shadow: var(--shadow-dark);
    backdrop-filter: blur(12px);
}

.hero-slider {
    position: relative;
    border-radius: var(--r-lg);
    overflow: hidden;
    aspect-ratio: 16 / 11;
    background: var(--navy-2);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease), visibility 0.5s;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    position: relative;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-slide-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.hero-slide-tab {
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(223, 182, 109, 0.2);
    color: var(--on-dark-mute);
    cursor: pointer;
    transition: all 0.25s ease;
}

.hero-slide-tab:hover {
    background: rgba(194, 147, 66, 0.2);
    color: #ffffff;
}

.hero-slide-tab.is-active {
    background: var(--gold-gradient);
    border-color: var(--gold);
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(194, 147, 66, 0.35);
}

.badge-float {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: var(--r-md);
    background: var(--ink-card);
    border: 1px solid rgba(223, 182, 109, 0.3);
    box-shadow: var(--shadow-md);
    color: #ffffff;
    font-size: 12px;
}

.badge-float b {
    display: block;
    color: var(--gold-light);
    font-size: 12.5px;
}

.badge-float span span {
    display: block;
    font-size: 10.5px;
    color: var(--on-dark-mute);
}

@media (max-width: 960px) {
    .hero__grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .hero .eyebrow {
        justify-content: center;
    }
    .hero__stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   PAGE HERO (INNER PAGES)
   -------------------------------------------------------------------------- */
.phero {
    padding-top: calc(72px + 48px);
    padding-bottom: 56px;
    background: var(--ink);
    position: relative;
    overflow: hidden;
}

.phero .crumb {
    font-size: 12px;
    color: var(--on-dark-mute);
    margin-bottom: 16px;
}

.phero .crumb a {
    color: var(--gold);
}

.h-page {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   MARQUEES & AUTOMATED TICKERS
   -------------------------------------------------------------------------- */
.marquee, .marquee-ticker, .service-marquee, .achieve-marquee, .marquee-tech {
    background: var(--navy-2);
    border-block: 1px solid rgba(223, 182, 109, 0.2);
    padding: 14px 0;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.marquee__t, .marquee-track {
    display: flex;
    align-items: center;
    gap: 32px;
    width: max-content;
    animation: marqueeScroll 32s linear infinite;
}

.marquee:hover .marquee__t,
.marquee-ticker:hover .marquee-track,
.service-marquee:hover .marquee-track {
    animation-play-state: paused;
}

.marquee__t span, .marquee-ticker-item, .service-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--on-dark);
}

.marquee-ticker-item .highlight {
    color: var(--gold-light);
    font-weight: 700;
}

.mkt-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    display: inline-block;
    margin-inline: 8px;
}

.orn {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 8px var(--gold);
}

.tech-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(223, 182, 109, 0.25);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   TRUST STRIP & HORIZONTAL CARDS
   -------------------------------------------------------------------------- */
.trust-strip {
    padding: 24px 0;
    overflow: hidden;
}

.horiz-auto-scroll-wrapper {
    overflow: hidden;
    white-space: nowrap;
}

.horiz-auto-scroll-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: marqueeScroll 26s linear infinite;
}

.trust-item, .horiz-card-item {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: rgba(19, 45, 57, 0.85);
    border: 1px solid rgba(223, 182, 109, 0.25);
    border-radius: var(--r-lg);
    padding: 14px 20px;
    color: #ffffff;
    min-width: 280px;
}

.trust-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(194, 147, 66, 0.15);
    color: var(--gold-light);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.trust-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.trust-desc {
    font-size: 11.5px;
    color: var(--on-dark-mute);
    white-space: normal;
    max-width: 200px;
}

/* --------------------------------------------------------------------------
   CARDS, FEATURES, & MARKETING TILES
   -------------------------------------------------------------------------- */
.card, .feat, .sol {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(24px, 3vw, 36px);
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
}

.card:hover, .feat:hover, .sol:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-light);
}

.card--dark {
    background: var(--ink-card);
    border-color: rgba(223, 182, 109, 0.2);
    color: #ffffff;
}

.card--dark:hover {
    border-color: var(--gold);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.card--dark h3 {
    color: #ffffff;
    margin-top: 14px;
    margin-bottom: 8px;
}

.card--dark p {
    color: var(--on-dark-mute);
    font-size: 13.5px;
}

.card__visual {
    aspect-ratio: 16 / 10;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--navy-2);
}

.card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.card:hover .card__visual img {
    transform: scale(1.05);
}

.card__ico, .feat__ico {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
    background: rgba(15, 89, 83, 0.08);
    color: var(--teal);
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    transition: background 0.3s ease, color 0.3s ease;
}

.card:hover .card__ico, .feat:hover .feat__ico {
    background: var(--gold-gradient);
    color: #ffffff;
}

/* Marketing Cards */
.mkt-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.mkt-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--gold-light);
}

.mkt-card__media {
    aspect-ratio: 16 / 10;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--ivory-2);
    margin-bottom: 16px;
}

.mkt-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease);
}

.mkt-card:hover .mkt-card__media img {
    transform: scale(1.04);
}

.can-copy-title {
    cursor: pointer;
}

.copy-ref-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    font-family: monospace;
    padding: 2px 6px;
    background: rgba(194, 147, 66, 0.15);
    color: var(--gold-dark);
    border-radius: 4px;
    margin-left: 6px;
}

.mkt-copy-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink-2);
    color: #ffffff;
    border: 1px solid var(--gold);
    padding: 10px 18px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    box-shadow: var(--shadow-dark);
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.mkt-copy-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------------------------------
   TEMPLATES & SKELETON LOADERS
   -------------------------------------------------------------------------- */
.tpl {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tpl:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gold-light);
}

.tpl__shot {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--ivory-2);
    overflow: hidden;
}

.tpl__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.tpl:hover .tpl__shot img {
    transform: scale(1.04);
}

.tpl__hot {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--gold-gradient);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 8px rgba(194, 147, 66, 0.4);
    z-index: 2;
}

.tpl__over {
    position: absolute;
    inset: 0;
    background: rgba(11, 30, 38, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
    z-index: 3;
}

.tpl:hover .tpl__over {
    opacity: 1;
    visibility: visible;
}

.tpl__body {
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border-top: 1px solid var(--line-subtle);
}

.tpl__body h3 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 2px;
}

.tpl__code {
    font-size: 11.5px;
    color: var(--text-muted);
    font-family: monospace;
}

.tpl__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--gold-dark);
    text-align: right;
    white-space: nowrap;
}

.tpl__price small {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Template Filters */
.tpl-filters, .filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}

.tpl-filter-btn, .filters button {
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--ivory-2);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
}

.tpl-filter-btn:hover, .filters button:hover {
    border-color: var(--gold);
    color: var(--text);
}

.tpl-filter-btn.is-active, .filters button.is-on {
    background: var(--gold);
    color: #ffffff;
    border-color: var(--gold);
    box-shadow: 0 2px 10px rgba(194, 147, 66, 0.35);
}

/* Skeletons */
.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap-md);
    margin-bottom: 32px;
}

.skeleton-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-arch-thumb {
    aspect-ratio: 16 / 10;
    border-radius: var(--r);
    background: linear-gradient(90deg, #f0eae1 25%, #f8f4ed 50%, #f0eae1 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f0eae1 25%, #f8f4ed 50%, #f0eae1 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-line--badge { width: 40%; height: 16px; border-radius: var(--r-pill); }
.skeleton-line--medium { width: 75%; }
.skeleton-line--short { width: 50%; }

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   LIVE DEMO MODAL
   -------------------------------------------------------------------------- */
.maison-modal {
    position: fixed;
    inset: 0;
    background: rgba(11, 30, 38, 0.85);
    backdrop-filter: blur(8px);
    z-index: 110;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.maison-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.maison-modal__box {
    width: 100%;
    max-width: 820px;
    background: #ffffff;
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-dark);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.maison-modal__head {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ivory);
}

.maison-modal__close {
    font-size: 26px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
}

.maison-modal__body {
    padding: 24px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.device-bar {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.device-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--ivory-2);
    color: var(--text-muted);
    cursor: pointer;
}

.device-btn.is-active {
    background: var(--teal);
    color: #ffffff;
    border-color: var(--teal);
}

.demo-frame-container {
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: all 0.3s ease;
}

.demo-frame-container.is-mobile {
    max-width: 360px;
    margin: 0 auto;
    box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   PRICING TABLE & CONFIGURATOR
   -------------------------------------------------------------------------- */
.pricing-toggle {
    display: inline-flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid var(--line);
    padding: 4px;
    border-radius: var(--r-pill);
    margin-top: 20px;
    box-shadow: var(--shadow-xs);
}

.pricing-toggle button {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--r-pill);
    color: var(--text-muted);
    transition: all 0.2s ease;
}

.pricing-toggle button.is-on {
    background: var(--gold-gradient);
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(194, 147, 66, 0.3);
}

.pricing-toggle .save, .pricing-toggle .save-badge {
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    margin-left: 6px;
    letter-spacing: 0.02em;
    display: inline-block;
    vertical-align: middle;
}

.plan {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(28px, 3.5vw, 40px);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gold-light);
}

.plan--hot {
    border-color: var(--gold);
    box-shadow: 0 12px 36px rgba(194, 147, 66, 0.18);
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
}

.plan__flag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-gradient);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: var(--r-pill);
    box-shadow: 0 2px 10px rgba(194, 147, 66, 0.35);
    white-space: nowrap;
}

.plan__name {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
}

.plan__price {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.1;
    margin-bottom: 4px;
}

.plan__price small {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 600;
}

.plan__old {
    font-size: 12px;
    color: var(--text-muted);
    text-decoration: line-through;
    margin-bottom: 8px;
}

.plan__desc {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 24px;
    line-height: 1.5;
}

.plan__list {
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-grow: 1;
}

.plan__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--text);
}

.plan__list li svg {
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 3px;
}

/* Interactive Configurator */
.indo-configurator {
    margin-top: 56px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 44px);
    box-shadow: var(--shadow-md);
}

.cfg-header {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 36px;
}

.cfg-header h3 {
    font-size: clamp(20px, 2vw, 26px);
    margin: 8px 0;
}

.cfg-grid-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 32px;
    align-items: start;
}

.cfg-section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gold-dark);
    margin-bottom: 12px;
}

.cfg-radio-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 24px;
}

.cfg-radio-card, .cfg-check-card {
    position: relative;
    cursor: pointer;
}

.cfg-radio-card input, .cfg-check-card input {
    position: absolute;
    opacity: 0;
}

.cfg-radio-box {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--ivory-2);
    transition: all 0.2s ease;
}

.cfg-radio-card input:checked + .cfg-radio-box {
    border-color: var(--gold);
    background: #fffdf9;
    box-shadow: 0 0 0 1px var(--gold);
}

.cfg-radio-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
}

.cfg-radio-sub {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

.cfg-check-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.cfg-check-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--ivory-2);
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.cfg-check-card input:checked + .cfg-check-box {
    border-color: var(--gold);
    background: #fffdf9;
    color: var(--text);
}

.cfg-check-mark {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 1.5px solid #cbd5e1;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.cfg-check-card input:checked + .cfg-check-box .cfg-check-mark {
    background: var(--gold);
    border-color: var(--gold);
}

.cfg-check-card input:checked + .cfg-check-box .cfg-check-mark::after {
    content: "✓";
    font-size: 11px;
    color: #ffffff;
    font-weight: 800;
}

.cfg-summary-card {
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy-2) 100%);
    border: 1px solid rgba(223, 182, 109, 0.3);
    border-radius: var(--r-lg);
    padding: 28px;
    color: #ffffff;
    box-shadow: var(--shadow-dark);
    position: sticky;
    top: 96px;
}

.cfg-summary-head {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--gold-light);
    margin-bottom: 12px;
}

.cfg-price-display {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(223, 182, 109, 0.2);
}

.cfg-price-num {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

.cfg-price-unit {
    font-size: 14px;
    color: var(--on-dark-mute);
    font-weight: 600;
}

.cfg-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    font-size: 12.5px;
}

.cfg-meta-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.cfg-meta-item label {
    color: var(--on-dark-mute);
}

.cfg-meta-item strong {
    color: #ffffff;
    font-weight: 700;
}

.cfg-includes-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--on-dark-mute);
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 12px;
    border-radius: var(--r);
    margin-bottom: 20px;
    border-left: 3px solid var(--gold);
}

@media (max-width: 960px) {
    .cfg-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   COMPARE TABLES
   -------------------------------------------------------------------------- */
.compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.compare__col {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 44px);
}

.compare__col--hot {
    background: linear-gradient(135deg, var(--ink) 0%, var(--navy-2) 100%);
    border-color: rgba(223, 182, 109, 0.35);
    color: #ffffff;
    box-shadow: var(--shadow-dark);
}

.compare__col--hot h3, .compare__col--hot .compare__price {
    color: #ffffff;
}

.compare__tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-dark);
    margin-bottom: 8px;
}

.compare__col--hot .compare__tag {
    color: var(--gold-light);
}

.compare__price {
    font-size: 26px;
    font-weight: 800;
    margin: 12px 0 24px;
    color: var(--text);
}

.compare__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13.5px;
    padding-block: 10px;
    border-top: 1px solid var(--line-subtle);
}

.compare__col--hot .compare__row {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.compare__row svg {
    color: var(--teal);
    flex-shrink: 0;
    margin-top: 2px;
}

.compare__col--hot .compare__row svg {
    color: var(--gold-light);
}

.compare__row--no svg {
    color: #ef4444;
}

@media (max-width: 768px) {
    .compare {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   MEDIA SPLIT & ARCHITECTURAL FIGURES
   -------------------------------------------------------------------------- */
.media-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.media-split--reverse {
    direction: rtl;
}

.media-split--reverse > * {
    direction: ltr;
}

.figure {
    position: relative;
    border-radius: var(--r-xl);
    overflow: hidden;
    background: var(--ivory-2);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

.figure--arch {
    border-top-left-radius: clamp(80px, 12vw, 160px);
    border-top-right-radius: clamp(80px, 12vw, 160px);
}

.figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease);
}

.figure:hover img {
    transform: scale(1.03);
}

.figure__cap {
    padding: 14px 18px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--ivory);
    border-top: 1px solid var(--line);
    text-align: center;
}

@media (max-width: 860px) {
    .media-split {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   PROCESS STEPS
   -------------------------------------------------------------------------- */
.steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 44px;
}

.step {
    background: var(--ink-card);
    border: 1px solid rgba(223, 182, 109, 0.18);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.step__no {
    font-size: 28px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    margin-bottom: 12px;
}

.step__meta {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-light);
    margin-bottom: 6px;
}

.step .h-card {
    font-size: 15px;
    margin-bottom: 8px;
    color: #ffffff;
}

.step .lead {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--on-dark-mute);
}

@media (max-width: 960px) {
    .steps {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   PORTFOLIO & PROJECTS
   -------------------------------------------------------------------------- */
.proj {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease, border-color 0.3s ease;
}

.proj:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gold-light);
}

.proj__shot {
    aspect-ratio: 16 / 10;
    background: var(--ivory-2);
    overflow: hidden;
}

.proj__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

.proj:hover .proj__shot img {
    transform: scale(1.05);
}

.proj__body {
    padding: 20px;
}

.proj__cat {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold);
}

.proj__kpi {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-subtle);
}

.proj__kpi div b {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--teal);
}

.proj__kpi div span {
    font-size: 11px;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   STATS & HIGHLIGHT COUNTERS
   -------------------------------------------------------------------------- */
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stats > div, .stat {
    background: var(--ink-card);
    border: 1px solid rgba(223, 182, 109, 0.18);
    border-radius: var(--r-lg);
    padding: clamp(20px, 3vw, 28px);
    text-align: center;
    transition: transform 0.3s var(--ease), border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.stats > div:hover, .stat:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
}

.stats > div b, .stat__num {
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--gold-light);
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
    display: block;
}

.stats > div > span:not([data-to]), .stat__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--on-dark-mute);
    line-height: 1.4;
    display: block;
}

@media (max-width: 960px) {
    .stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .stats {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   TESTIMONIAL CAROUSEL
   -------------------------------------------------------------------------- */
.testimonial-carousel-wrap {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
}

.testimonial-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    gap: 16px;
    position: relative;
    border-radius: var(--r-lg);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.testimonial-carousel::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: center;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: clamp(28px, 4vw, 44px);
    box-shadow: var(--shadow-sm);
    margin: 0;
    display: block;
}

.quote__mark {
    font-size: 48px;
    line-height: 1;
    color: var(--gold);
    font-family: Georgia, serif;
    margin-bottom: 8px;
}

.stars {
    color: #f59e0b;
    font-size: 16px;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

blockquote {
    margin: 0 0 24px;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}

figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
}

.quote__avt {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: #ffffff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    flex-shrink: 0;
}

figcaption b {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
}

figcaption span span {
    font-size: 12.5px;
    color: var(--text-muted);
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.carousel-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #ffffff;
    color: var(--text);
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.carousel-nav-btn:hover {
    background: var(--ivory-2);
    border-color: var(--gold);
    color: var(--gold);
}

.carousel-dots {
    display: flex;
    gap: 6px;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cbd5d8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.carousel-dot.is-active {
    width: 24px;
    border-radius: 4px;
    background: var(--gold);
}

/* --------------------------------------------------------------------------
   FAQ ACCORDION
   -------------------------------------------------------------------------- */
.faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq__item {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.faq__item.is-open {
    border-color: var(--gold);
}

.faq__q {
    width: 100%;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.faq__ico {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ivory-2);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: transform 0.25s var(--ease), background 0.2s ease, color 0.2s ease;
}

.faq__item.is-open .faq__ico {
    transform: rotate(45deg);
    background: var(--gold);
    color: #ffffff;
}

.faq__a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease), padding 0.35s ease;
    padding-inline: 20px;
}

.faq__item.is-open .faq__a {
    max-height: 300px;
    padding-bottom: 20px;
}

.faq__a p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   CONTACT FORMS & LEAD CAPTURE
   -------------------------------------------------------------------------- */
.form-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 40px);
    box-shadow: var(--shadow-md);
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.field label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
}

.field input, .field select, .field textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 13.5px;
    font-family: inherit;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--ivory);
    color: var(--text);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-glow);
    background: #ffffff;
}

.form-hint {
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
    margin-top: 12px;
}

.lead-form {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}

.lead-form-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.field-row {
    display: flex;
    gap: 14px;
    width: 100%;
}

.field-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 640px) {
    .field-row--2col, .field-row {
        grid-template-columns: 1fr;
        flex-direction: column;
        gap: 0;
    }
}

.form-note {
    font-size: 12.5px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--r);
    margin-top: 12px;
    text-align: center;
    display: none;
}

/* --------------------------------------------------------------------------
   WIZARD & WEBSITE PROVISIONING (DANG-KY.HTML)
   -------------------------------------------------------------------------- */
.wizard {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: clamp(28px, 4vw, 44px);
    box-shadow: var(--shadow-md);
}

.wizard__bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.wizard__bar div {
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    transition: background 0.3s ease;
}

.wizard__bar div.is-on, .wizard__bar div.is-done {
    background: var(--gold);
}

.wizard__step {
    display: none;
}

.wizard__step.is-on {
    display: block;
    animation: fadeIn 0.35s ease;
}

.provision__log {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 24px 0;
}

.provision__log li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted);
}

.provision__log li i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--ivory-2);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 11px;
}

.provision__log li.is-done {
    color: var(--text);
    font-weight: 600;
}

.provision__log li.is-done i {
    background: var(--teal);
    color: #ffffff;
}

.provision__log li.is-run {
    color: var(--gold-dark);
    font-weight: 700;
}

.provision__ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

.provision__pct {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 800;
    color: var(--gold-dark);
}

/* --------------------------------------------------------------------------
   TABS & PANES
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}

.tabs button {
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.tabs button.is-on {
    color: var(--gold-dark);
    border-bottom-color: var(--gold);
}

.pane {
    display: none;
}

.pane.is-on {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* --------------------------------------------------------------------------
   NEWS & SEO TREE
   -------------------------------------------------------------------------- */
.news-readtime-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.seo-tree-card {
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px;
}

.tree-link {
    display: block;
    font-size: 13px;
    color: var(--text);
    padding: 4px 0;
    transition: color 0.2s ease;
}

.tree-link:hover {
    color: var(--gold);
}

.news-tags-box {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.news-tag {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--ivory-2);
    border: 1px solid var(--line);
    cursor: pointer;
}

.news-tag:hover {
    background: var(--gold);
    color: #ffffff;
    border-color: var(--gold);
}

/* --------------------------------------------------------------------------
   AI ASSISTANT CHAT WIDGET (VANILLA POPUP)
   -------------------------------------------------------------------------- */
.chat-fab {
    position: fixed;
    right: 24px;
    bottom: 92px;
    z-index: 85;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gold-gradient);
    color: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(194, 147, 66, 0.4);
    cursor: pointer;
    transition: transform 0.25s var(--ease), opacity 0.25s ease;
}

.chat-fab:hover {
    transform: scale(1.08);
}

.chat-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.chat-fab__dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    background: #ef4444;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 2px solid #ffffff;
}

.chatbox {
    position: fixed;
    right: 24px;
    bottom: 92px;
    width: 360px;
    max-width: calc(100vw - 32px);
    height: 480px;
    max-height: calc(100vh - 120px);
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.9) translateY(20px);
    transition: all 0.3s var(--ease);
}

.chatbox.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.chatbox__head {
    padding: 14px 18px;
    background: var(--ink);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.chatbox__ava {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gold-gradient);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    color: #ffffff;
}

.chatbox__id {
    flex: 1;
}

.chatbox__id b {
    display: block;
    font-size: 13px;
    line-height: 1.2;
}

.chatbox__id span {
    font-size: 11px;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chatbox__id span i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    display: inline-block;
}

.chatbox__x {
    color: var(--on-dark-mute);
    cursor: pointer;
}

.chatbox__body {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ivory);
}

.bub {
    max-width: 85%;
    padding: 10px 14px;
    font-size: 12.5px;
    line-height: 1.45;
    border-radius: var(--r-lg);
}

.bub--bot {
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--line);
    border-bottom-left-radius: 4px;
    align-self: flex-start;
}

.bub--me {
    background: var(--teal);
    color: #ffffff;
    border-bottom-right-radius: 4px;
    align-self: flex-end;
}

.bub--typing i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
    animation: typingBounce 1s infinite alternate;
    margin-right: 3px;
}

@keyframes typingBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-4px); }
}

.chatbox__quick {
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    background: #ffffff;
    border-top: 1px solid var(--line-subtle);
}

.chatbox__quick button {
    padding: 4px 10px;
    font-size: 11px;
    border-radius: var(--r-pill);
    background: var(--ivory-2);
    border: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
}

.chatbox__form {
    padding: 10px 12px;
    display: flex;
    gap: 8px;
    background: #ffffff;
    border-top: 1px solid var(--line);
}

.chatbox__form input {
    flex: 1;
    padding: 8px 12px;
    font-size: 12.5px;
    border: 1px solid var(--line);
    border-radius: var(--r);
    outline: none;
}

.chatbox__form button {
    width: 36px;
    height: 36px;
    border-radius: var(--r);
    background: var(--gold);
    color: #ffffff;
    display: grid;
    place-items: center;
}

/* --------------------------------------------------------------------------
   SIDE PROGRESS NAVIGATION DOTS
   -------------------------------------------------------------------------- */
.side-nav-progress {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 70;
    display: flex;
    align-items: center;
}

.side-nav-line {
    position: absolute;
    right: 7px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(194, 147, 66, 0.2);
    z-index: 1;
}

.side-nav-bar {
    width: 100%;
    height: 0%;
    background: var(--gold);
    transition: height 0.2s ease;
}

.side-nav-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.side-nav-dot {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink);
    border: 2px solid var(--gold);
    cursor: pointer;
    transition: all 0.25s var(--ease);
    display: grid;
    place-items: center;
}

.side-nav-dot::after {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: transparent;
    transition: all 0.25s var(--ease);
}

.side-nav-dot.is-active {
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold);
    transform: scale(1.2);
}

.side-nav-dot.is-active::after {
    background: #ffffff;
}

.side-nav-tooltip {
    position: absolute;
    right: 26px;
    background: var(--ink-2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--r);
    border: 1px solid rgba(223, 182, 109, 0.3);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: all 0.2s ease;
    pointer-events: none;
}

.side-nav-dot:hover .side-nav-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

@media (max-width: 1040px) {
    .side-nav-progress {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   AI DOCK & ROBOT MASCOT
   -------------------------------------------------------------------------- */
.ai-dock-container {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 85;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.dock-totop, #toTop {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--ink-2);
    border: 1px solid rgba(223, 182, 109, 0.35);
    color: #ffffff;
    display: grid;
    place-items: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    cursor: pointer;
}

.dock-totop.is-visible, #toTop.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dock-totop:hover, #toTop:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #ffffff;
}

.robot-mascot-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.robot-speech-bubble {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    width: 290px;
    max-width: calc(100vw - 48px);
    background: var(--ink-2);
    border: 1px solid rgba(223, 182, 109, 0.35);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    color: #ffffff;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
    font-size: 12px;
    line-height: 1.5;
    backdrop-filter: blur(12px);
    animation: fadeIn 0.3s ease;
    cursor: pointer;
}

.robot-speech-bubble.is-hidden {
    display: none;
}

.robot-speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: var(--ink-2);
    border-right: 1px solid rgba(223, 182, 109, 0.35);
    border-bottom: 1px solid rgba(223, 182, 109, 0.35);
    transform: rotate(45deg);
}

.robot-mascot-btn {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ink) 0%, var(--teal-dark) 100%);
    border: 2px solid var(--gold);
    display: grid;
    place-items: center;
    box-shadow: 0 8px 24px rgba(194, 147, 66, 0.35);
    transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
    cursor: pointer;
}

.robot-mascot-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 30px rgba(194, 147, 66, 0.5);
}

.robot-online-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #10b981;
    border: 2px solid var(--ink);
}

/* --------------------------------------------------------------------------
   HUD, GAMIFICATION, & MODALS
   -------------------------------------------------------------------------- */
.game-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 0, 0, 0.2);
    z-index: 99;
}

.game-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--gold-gradient);
    transition: width 0.15s ease;
}

.game-hud-badge {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 80;
    background: rgba(11, 30, 38, 0.9);
    border: 1px solid rgba(223, 182, 109, 0.35);
    border-radius: var(--r-pill);
    padding: 6px 14px;
    font-size: 11.5px;
    color: #ffffff;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-tag {
    color: var(--gold-light);
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 0.08em;
}

.hud-sep {
    color: rgba(255, 255, 255, 0.3);
}

.game-achievement-toast {
    position: fixed;
    top: 86px;
    right: 24px;
    background: var(--ink-2);
    border: 1px solid var(--gold);
    border-radius: var(--r-lg);
    padding: 14px 18px;
    color: #ffffff;
    box-shadow: var(--shadow-dark);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-width: 360px;
}

.game-achievement-toast.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.game-achievement-toast strong {
    display: block;
    font-size: 12px;
    color: var(--gold-light);
}

.game-achievement-toast p {
    font-size: 11.5px;
    color: var(--on-dark-mute);
}

.gold-leaf-particle, .hud-engagement-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    pointer-events: none;
    z-index: 1000;
    box-shadow: 0 0 10px var(--gold-light);
    animation: particleFloat var(--dur, 1.5s) ease-out forwards;
}

@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(var(--sc, 1)) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx, 0px), var(--ty, 100px)) scale(0) rotate(var(--rot, 360deg));
    }
}

.gold-token-toast {
    position: fixed;
    top: 86px;
    left: 24px;
    background: var(--ink-2);
    border: 1px solid var(--gold);
    border-radius: var(--r-pill);
    padding: 8px 16px;
    color: #ffffff;
    font-size: 12px;
    box-shadow: var(--shadow-md);
    z-index: 95;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.3s ease;
}

.ai-modal-overlay, .hidden-quest-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 30, 38, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.ai-modal-overlay.is-open, .hidden-quest-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.ai-modal-card, .hidden-quest-card {
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--ink-2);
    border: 1px solid rgba(223, 182, 109, 0.35);
    border-radius: var(--r-xl);
    padding: clamp(24px, 4vw, 36px);
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s var(--ease);
}

.ai-modal-overlay.is-open .ai-modal-card,
.hidden-quest-modal-overlay.is-open .hidden-quest-card {
    transform: scale(1);
}

.ai-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
}

.ai-modal-close:hover {
    color: #ffffff;
}

.ai-modal-body-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ai-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ai-chip {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--r);
    border: 1px solid rgba(223, 182, 109, 0.25);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-chip:hover {
    border-color: var(--gold);
    color: #ffffff;
}

.ai-chip.is-selected {
    background: var(--gold-gradient);
    border-color: var(--gold);
    color: #ffffff;
}

.achieve-badge {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(223, 182, 109, 0.2);
    display: inline-block;
    transition: all 0.3s ease;
}

.achieve-badge.is-unlocked {
    background: var(--gold-gradient);
    box-shadow: 0 0 8px var(--gold);
}

.hq-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--gold-light);
    background: rgba(194, 147, 66, 0.15);
    border: 1px solid var(--gold);
    padding: 4px 12px;
    border-radius: var(--r-pill);
    margin-bottom: 12px;
}

.hq-code-box {
    background: rgba(0, 0, 0, 0.35);
    border: 1px dashed var(--gold);
    border-radius: var(--r-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.hq-code-text {
    font-family: monospace;
    font-size: 20px;
    font-weight: 800;
    color: var(--gold-light);
    letter-spacing: 0.08em;
}

.hq-perks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
    font-size: 13px;
    color: var(--on-dark-mute);
}

.screen-gold-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle, rgba(223, 182, 109, 0.5) 0%, transparent 80%);
    pointer-events: none;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.screen-gold-flash.is-flashing {
    opacity: 1;
}

@media (max-width: 768px) {
    .ai-modal-body-grid {
        grid-template-columns: 1fr;
    }
    .game-hud-badge {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot {
    background: var(--ink);
    color: var(--on-dark);
    padding-top: clamp(48px, 6vw, 72px);
    padding-bottom: 32px;
    border-top: 1px solid rgba(223, 182, 109, 0.2);
}

.foot__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    margin-bottom: 48px;
}

.foot h4 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin-bottom: 16px;
}

.foot ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.foot ul a {
    font-size: 13px;
    color: var(--on-dark-mute);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.foot ul a:hover {
    color: var(--gold-light);
    padding-left: 4px;
}

.soc {
    display: flex;
    gap: 10px;
}

.soc a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(223, 182, 109, 0.2);
    color: var(--on-dark);
    display: grid;
    place-items: center;
    transition: all 0.2s ease;
}

.soc a:hover {
    background: var(--gold);
    color: #ffffff;
    border-color: var(--gold);
}

.foot__bot {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--on-dark-mute);
    flex-wrap: wrap;
    gap: 12px;
}

.foot__bot a {
    color: var(--on-dark-mute);
}

.foot__bot a:hover {
    color: var(--gold-light);
}

@media (max-width: 768px) {
    .foot__grid {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   UTILITY COMPONENTS & ANIMATIONS
   -------------------------------------------------------------------------- */
.bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
    display: inline-block;
}

.marquee-reverse .marquee-track {
    animation-direction: reverse;
}

@media (max-width: 768px) {
    .snap-mob {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 14px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .snap-mob > * {
        flex: 0 0 85%;
        min-width: 85%;
        scroll-snap-align: start;
    }
}

.is-copied-flash {
    animation: copiedFlash 0.5s ease;
}

@keyframes copiedFlash {
    0% { color: var(--gold-light); }
    50% { color: #10b981; }
    100% { color: inherit; }
}

/* --------------------------------------------------------------------------
   KEYFRAMES & ANIMATIONS (DATA-RV REVEAL FIX)
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

[data-rv], .mkt-card {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
    will-change: opacity, transform;
}

[data-rv="l"] {
    transform: translateX(-24px);
}

[data-rv="r"] {
    transform: translateX(24px);
}

[data-rv="z"] {
    transform: scale(0.95);
}

/* Support .is-in, .is-revealed, and .loaded states for bulletproof reveal */
[data-rv].is-in,
[data-rv].is-revealed,
.mkt-card.is-in,
.mkt-card.is-revealed,
body.is-fully-revealed [data-rv],
body.is-fully-revealed .mkt-card {
    opacity: 1;
    transform: translate(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
    [data-rv], .mkt-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SỬA LỖI ĐỘ ĐỌC — dùng đúng biến của hệ màu Sand Gold / Peacock Teal
   Đo thực tế trên trang chủ trước khi sửa:
   • Chữ trắng trên nút vàng #c29342 = 2.7:1  → chưa đạt AA
   • Chữ vàng #c29342 trên nền ivory  = 2.2–2.8:1 → chưa đạt AA
   • Đoạn dẫn hero dùng --text-muted trên nền navy = 2.85:1
   ========================================================================== */

/* 1. Trên nền vàng: chữ navy đậm (7.4:1) — vừa dễ đọc vừa sang hơn chữ trắng */
.btn--gold,
.plan__flag,
.tpl__hot,
.ad--h__cta,
.badge--gold,
.pill--gold {
    color: var(--ink);
    text-shadow: none;
}

.btn--gold:hover { color: var(--on-dark); }

/* 2. Chữ vàng trên nền sáng: dùng sắc đậm --gold-dark (4.6:1) */
.eyebrow,
.link-gold,
.mkt-badge,
.proj__cat,
.plan__name,
.tpl__price,
.copy-ref-tag,
.tree-count,
.badge,
.stars {
    color: var(--gold-dark);
}

/* 3. Trên nền tối thì ngược lại — vàng sáng mới nổi */
:where(.hero, .phero, .foot, .on-dark, .ink-card, .ad--v, .ad--h-dark) :is(
    .eyebrow, .link-gold, .mkt-badge, .proj__cat, .plan__name, .tpl__price, .badge, .stars
) { color: var(--gold-light); }

/* 4. Đoạn văn trên nền tối dùng màu chữ dành cho nền tối */
:where(.hero, .phero, .foot, .on-dark) :is(p, .lead, li, .compare__row) {
    color: var(--on-dark-mute);
}

:where(.hero, .phero, .foot, .on-dark) :is(h1, h2, h3, h4, strong, b) {
    color: var(--on-dark);
}

/* 5. Nút viền trên nền tối: chữ sáng, viền vàng rõ */
:where(.hero, .phero, .on-dark) .btn--outline {
    color: var(--on-dark);
    border-color: var(--gold);
}

:where(.hero, .phero, .on-dark) .btn--outline:hover {
    color: var(--ink);
    background: var(--gold-gradient);
    border-color: transparent;
}

/* 6. Tab chọn giao diện trong hero: tăng độ tương phản khi được chọn */
.hero-slide-tab { color: var(--on-dark-mute); }

.hero-slide-tab.is-active {
    color: var(--ink);
    background: var(--gold-gradient);
    border-color: transparent;
    font-weight: 700;
}