/* ========================================================
           Tạp chí Luyện AI — Editorial magazine
           Kế thừa design tokens từ index.html + thêm Fraunces (serif)
           cho cảm giác tạp chí điện tử, editorial pull quotes.
           ======================================================== */

        :root {
            /* ==========================================================
               Soft Futuristic Minimalism — palette trắng sáng elegant
               (chuyển từ tông tạp chí cam-coral → ambient AI calmness)
               ========================================================== */
            --navy: #0F2A4A;
            --text: #101314;
            --text-secondary: #2F353A;
            --text-tertiary: #6B7280;
            --text-muted: #9CA3AF;
            --bg: #ffffff;
            --bg-alt: #F2F7FA;
            --bg-soft: #FAFCFA;
            --bg-cream: #F8FBF7;
            --border: #DCE3E0;
            --border-light: #E8ECEA;
            --border-soft: #F0F2F1;

            /* Apple-blue softened to deep-navy elegant link colour */
            --apple-blue: #2C73C8;
            --apple-blue-hover: #3A82D8;
            --apple-blue-link: #1F5A9F;
            --apple-blue-bright: #5AA8E5;
            --apple-blue-soft: rgba(44,115,200,0.08);

            /* Energy token retuned: warm amber (replaces aggressive #ff6b35) */
            --energy: #FFB347;
            --energy-soft: #FFF6E5;
            --energy-deep: #C6831F;
            /* Coral token retuned: gentle slate-blue (replaces hot pink) */
            --coral: #6BA8D8;
            --coral-soft: #EAF3FB;
            --mint: #84BD5A;
            --mint-dark: #5C8F37;
            --mint-soft: #F1F8EA;
            --sun: #E8A33D;
            --sun-soft: #FFF6E0;
            --sky: #6FB5DF;
            --sky-soft: #EDF6FC;
            /* Lavender token remapped to Luyện AI lime brand */
            --lavender: #9ACD32;
            --lavender-soft: rgba(154,205,50,0.12);
            /* Ink (used in dark sections) reframed as deep elegant navy */
            --ink: #0F2A4A;

            /* New tokens — Soft Futuristic Minimalism */
            --lime: #9ACD32;
            --lime-deep: #6E9221;
            --lime-soft: rgba(154,205,50,0.14);
            --warm: #FFB347;
            --warm-soft: rgba(255,179,71,0.16);
            --deep-navy: #003366;
            --sky-bg: #DDF2FF;
            --glass-surface: rgba(255,255,255,0.78);
            --glass-card: rgba(255,255,255,0.86);
            --glass-border: rgba(255,255,255,0.65);

            --shadow-sm: 0 1px 3px rgba(16,19,20,0.04);
            --shadow: 0 4px 18px rgba(16,19,20,0.06), 0 1px 3px rgba(16,19,20,0.03);
            --shadow-lg: 0 18px 60px rgba(16,19,20,0.10), 0 4px 18px rgba(16,19,20,0.06);
            --shadow-pop: 0 24px 60px rgba(154,205,50,0.16), 0 8px 24px rgba(44,115,200,0.10);
            --shadow-chip: 0 8px 24px rgba(16,19,20,0.06);

            --radius: 12px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --radius-2xl: 32px;
            --radius-pill: 999px;

            --transition: 0.32s cubic-bezier(0.4,0.0,0.2,1);

            --max-w: 1280px;
            --max-w-narrow: 880px;

            --font-display: 'Be Vietnam Pro','Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',system-ui,sans-serif;
            --font-body: 'Inter','Be Vietnam Pro',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif;
            --font-editorial: 'Fraunces','Be Vietnam Pro',Georgia,'Times New Roman',serif;
            --font-mono: 'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
        }

        * { box-sizing: border-box; margin: 0; padding: 0; }

        html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

        body {
            font-family: var(--font-body);
            color: var(--text);
            line-height: 1.55;
            font-size: 16px;
            letter-spacing: -0.005em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            background:
                radial-gradient(circle at 50% 0%, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.78) 38%, rgba(221,242,255,0.42) 78%, rgba(154,205,50,0.06) 100%),
                linear-gradient(180deg, #FFFFFF 0%, #F8FBF7 52%, #EFF7FB 100%);
            background-attachment: fixed;
            min-height: 100vh;
        }

        a { color: inherit; text-decoration: none; transition: color var(--transition); }
        a:hover { color: var(--apple-blue-link); }
        img { max-width: 100%; display: block; }
        button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
        ul, ol { list-style: none; }

        ::selection { background: var(--lime); color: var(--deep-navy); }

        .wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }
        .wrap-narrow { width: 100%; max-width: var(--max-w-narrow); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

        /* ================== Skip link (a11y) ================== */
        .skip-link {
            position: absolute; top: -100px; left: 16px; z-index: 9999;
            padding: 10px 18px; border-radius: var(--radius-pill);
            background: var(--text); color: #fff; font-weight: 600; font-size: 14px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.20);
            transition: top var(--transition);
        }
        .skip-link:focus-visible {
            top: 12px; outline: 3px solid var(--energy); outline-offset: 3px;
            color: #fff;
        }

        /* Global focus ring — replace browser default with brand-aware ring */
        a:focus-visible, button:focus-visible, input:focus-visible {
            outline: 2.5px solid var(--apple-blue);
            outline-offset: 3px;
            border-radius: 6px;
        }
        .filter-pill:focus-visible, .nav__link:focus-visible, .site-header__cta:focus-visible,
        .float-cta:focus-visible, .toc-dot:focus-visible, .search-chip:focus-visible,
        .btn:focus-visible, .theme-week__cta:focus-visible, .newsletter__submit:focus-visible,
        .breaking__item:focus-visible {
            outline: 2.5px solid var(--energy);
            outline-offset: 3px;
        }
        .bookmark-btn:focus-visible { outline: 2px solid var(--energy); outline-offset: 2px; }

        /* ================== Scroll progress ================== */
        .scroll-progress {
            position: fixed; top: 0; left: 0; width: 0%; height: 2px;
            background: linear-gradient(90deg, var(--lime) 0%, var(--sky) 55%, var(--deep-navy) 100%);
            z-index: 9999; transition: width 0.06s linear;
            box-shadow: 0 0 12px rgba(154,205,50,0.32);
        }

        /* ================== Header ================== */
        .site-header {
            position: sticky; top: 0; z-index: 100;
            background: rgba(255,255,255,0.72);
            backdrop-filter: saturate(180%) blur(22px);
            -webkit-backdrop-filter: saturate(180%) blur(22px);
            border-bottom: 1px solid transparent;
            transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .site-header.is-scrolled {
            border-bottom-color: var(--border-soft);
            background: rgba(255,255,255,0.88);
            box-shadow: 0 1px 0 rgba(154,205,50,0.06), 0 12px 36px rgba(16,19,20,0.04);
        }

        .site-header__inner {
            display: flex; align-items: center; justify-content: space-between;
            height: 68px; gap: 24px;
            max-width: 1720px;
        }

        .brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; white-space: nowrap; }
        .brand__mark {
            width: 38px; height: 38px; border-radius: 12px;
            background: linear-gradient(135deg, var(--deep-navy) 0%, #0F2A4A 100%);
            color: #fff; display: grid; place-items: center;
            font-family: var(--font-editorial); font-weight: 600; font-style: italic;
            font-size: 20px; letter-spacing: -0.02em;
            box-shadow: 0 8px 20px rgba(0,51,102,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
            position: relative;
        }
        .brand__mark::after {
            content: ""; position: absolute; inset: 0; border-radius: inherit;
            background: radial-gradient(120% 80% at 100% 0%, rgba(154,205,50,0.34), transparent 55%);
            pointer-events: none;
        }
        .brand__name { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--text); letter-spacing: -0.012em; }
        .brand__chip {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            font-size: 12px; padding: 3px 11px; border-radius: var(--radius-pill);
            background: linear-gradient(135deg, rgba(154,205,50,0.18), rgba(111,181,223,0.18));
            color: var(--deep-navy); letter-spacing: 0.02em;
            border: 1px solid rgba(154,205,50,0.34);
            box-shadow: 0 4px 12px rgba(154,205,50,0.16);
        }

        .nav { display: flex; gap: 4px; flex: 1; justify-content: center; }
        .nav__link {
            position: relative; padding: 8px 14px; border-radius: 8px;
            font-size: 14px; font-weight: 500; color: var(--text-secondary);
            transition: color var(--transition), background var(--transition);
            white-space: nowrap;
        }
        .nav__link:hover { color: var(--text); background: var(--bg-alt); }
        .nav__link.is-active { color: var(--apple-blue-link); }
        .nav__link.is-active::after {
            content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
            height: 2px; border-radius: 2px;
            background: linear-gradient(90deg, var(--lime), var(--sky));
        }

        .site-header__cta {
            display: inline-flex; align-items: center; gap: 9px;
            padding: 10px 20px; border-radius: var(--radius-pill);
            background: var(--deep-navy); color: #fff; font-weight: 600; font-size: 14px;
            letter-spacing: -0.005em;
            white-space: nowrap; flex-shrink: 0;
            transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
            box-shadow: 0 6px 16px rgba(0,51,102,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
        }
        .site-header__cta:hover {
            background: linear-gradient(135deg, var(--deep-navy), #1A4D85); color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 28px rgba(0,51,102,0.24), inset 0 1px 0 rgba(255,255,255,0.10);
        }
        .site-header__cta .dot { width: 7px; height: 7px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 3px rgba(154,205,50,0.24); animation: pulse-dot 2.4s ease-in-out infinite; }

        @keyframes pulse-dot {
            0%, 100% { box-shadow: 0 0 0 3px rgba(154,205,50,0.28); }
            50% { box-shadow: 0 0 0 7px rgba(154,205,50,0.04); }
        }

        .header-search-btn, .header-theme-btn {
            width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
            border-radius: 10px; color: var(--text-secondary);
            transition: background var(--transition), color var(--transition), transform var(--transition);
            flex-shrink: 0; position: relative;
        }
        .header-search-btn:hover, .header-theme-btn:hover { background: var(--bg-alt); color: var(--text); transform: translateY(-1px); }
        .header-search-btn svg, .header-theme-btn svg { width: 18px; height: 18px; }

        .header-theme-btn .theme-icon {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%) rotate(0deg) scale(1);
            transition: transform 0.5s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
        }
        .header-theme-btn .theme-icon--moon { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(0.4); }
        html[data-theme="dark"] .header-theme-btn .theme-icon--sun { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(0.4); }
        html[data-theme="dark"] .header-theme-btn .theme-icon--moon { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }

        /* Search overlay */
        .search-overlay {
            position: fixed; inset: 0; z-index: 250;
            opacity: 0; pointer-events: none;
            transition: opacity 0.28s ease;
        }
        .search-overlay.is-open { opacity: 1; pointer-events: auto; }
        .search-overlay__backdrop {
            position: absolute; inset: 0;
            background: rgba(10, 22, 40, 0.40);
            backdrop-filter: blur(16px) saturate(140%);
            -webkit-backdrop-filter: blur(16px) saturate(140%);
        }
        .search-overlay__panel {
            position: absolute; left: 50%; top: clamp(60px, 12vh, 140px);
            transform: translateX(-50%) translateY(-12px);
            width: min(720px, calc(100vw - 32px));
            background: rgba(255,255,255,0.98);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-xl);
            padding: 14px 16px 18px;
            box-shadow: 0 30px 80px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.08);
            transition: transform 0.32s cubic-bezier(0.2,0.8,0.2,1);
        }
        .search-overlay.is-open .search-overlay__panel { transform: translateX(-50%) translateY(0); }

        .search-form { display: flex; align-items: center; gap: 10px; padding: 8px 6px 14px; border-bottom: 1px solid var(--border-soft); }
        .search-form svg { width: 22px; height: 22px; color: var(--text-tertiary); flex-shrink: 0; }
        .search-form input {
            flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
            font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--text);
            letter-spacing: -0.012em;
        }
        .search-form input::placeholder { color: var(--text-tertiary); font-weight: 400; }
        .search-form__submit {
            padding: 9px 18px; border-radius: var(--radius-pill);
            background: var(--text); color: #fff; font-weight: 600; font-size: 13px;
            transition: background var(--transition), transform var(--transition);
        }
        .search-form__submit:hover { background: var(--apple-blue); transform: translateY(-1px); }
        .search-form__close {
            width: 32px; height: 32px; border-radius: 8px; font-size: 22px;
            color: var(--text-tertiary); display: inline-flex; align-items: center; justify-content: center;
        }
        .search-form__close:hover { background: var(--bg-alt); color: var(--text); }

        .search-suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 14px; }
        .search-suggest__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); margin-right: 4px; }
        .search-chip {
            padding: 6px 12px; border-radius: var(--radius-pill);
            background: var(--bg-alt); color: var(--text-secondary);
            font-size: 13px; font-weight: 500;
            border: 1px solid transparent;
            transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
        }
        .search-chip:hover { background: var(--apple-blue-soft); color: var(--apple-blue-link); border-color: var(--apple-blue-soft); transform: translateY(-1px); }

        /* Filter pills under hero */
        .filter-pills {
            display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
            margin-bottom: clamp(36px, 4vw, 56px); padding: 0 8px;
        }
        .filter-pill {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 8px 16px; border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.7);
            border: 1px solid var(--border-light);
            font-size: 13.5px; font-weight: 500;
            color: var(--text-secondary);
            transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
        }
        .filter-pill:hover { background: #fff; color: var(--text); border-color: var(--border); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
        .filter-pill.is-active { background: var(--deep-navy); color: #fff; border-color: var(--deep-navy); box-shadow: 0 8px 22px rgba(0,51,102,0.20); }
        .filter-pill.is-active .filter-pill__dot { background: var(--lime); box-shadow: 0 0 0 3px rgba(154,205,50,0.32); animation: pulse-dot 2.4s ease-in-out infinite; }
        .filter-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; transition: background var(--transition); }
        .filter-pill--blue:hover .filter-pill__dot     { background: var(--apple-blue); }
        .filter-pill--coral:hover .filter-pill__dot    { background: var(--coral); }
        .filter-pill--mint:hover .filter-pill__dot     { background: var(--mint); }
        .filter-pill--sun:hover .filter-pill__dot      { background: var(--sun); }
        .filter-pill--sky:hover .filter-pill__dot      { background: var(--sky); }
        .filter-pill--lavender:hover .filter-pill__dot { background: var(--lavender); }

        /* Drop cap on hero featured teaser */
        .hero-featured__teaser--dropcap::first-letter {
            font-family: var(--font-editorial); font-style: italic; font-weight: 600;
            font-size: 3.6em; line-height: 0.84;
            float: left; margin: 6px 12px 0 0;
            background: linear-gradient(135deg, var(--lime-deep) 0%, var(--lime) 30%, var(--sky) 65%, var(--deep-navy) 100%);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.04em;
        }

        .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; }
        .nav-toggle:hover { background: var(--bg-alt); }
        .nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--text); position: relative; }
        .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--text); }
        .nav-toggle span::before { top: -5px; }
        .nav-toggle span::after { top: 5px; }

        /* Mobile drawer */
        .mobile-nav {
            position: fixed; inset: 0; background: rgba(255,255,255,0.98);
            backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
            z-index: 200; box-sizing: border-box;
            padding: max(88px, calc(64px + env(safe-area-inset-top, 0px))) max(24px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
            height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior-y: contain;
            opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .mobile-nav.is-open { opacity: 1; pointer-events: auto; transform: none; }
        .mobile-nav__close { position: absolute; top: max(18px, env(safe-area-inset-top, 0px)); right: max(18px, env(safe-area-inset-right, 0px)); width: 44px; height: 44px; border-radius: 10px; font-size: 22px; }
        .mobile-nav__close:hover { background: var(--bg-alt); }
        .mobile-nav a {
            display: block; padding: 14px 4px; border-bottom: 1px solid var(--border-soft);
            font-size: 18px; font-weight: 500;
        }
        .mobile-nav .site-header__cta { display: inline-flex; margin-top: 20px; padding: 12px 22px; font-size: 15px; }

        /* ================== Magazine eyebrow ================== */
        .eyebrow {
            display: inline-flex; align-items: center; gap: 10px;
            font-family: var(--font-mono); font-size: 11px; font-weight: 500;
            letter-spacing: 0.16em; text-transform: uppercase;
            color: var(--deep-navy);
        }
        .eyebrow::before {
            content: ""; width: 26px; height: 1.5px; background: linear-gradient(90deg, var(--lime), var(--sky));
        }
        .eyebrow--coral { color: var(--lime-deep); }
        .eyebrow--coral::before { background: linear-gradient(90deg, var(--lime), var(--lime-deep)); }
        .eyebrow--mint { color: var(--mint-dark); }
        .eyebrow--mint::before { background: linear-gradient(90deg, var(--mint), var(--sky)); }
        .eyebrow--sun { color: #B07515; }
        .eyebrow--sun::before { background: linear-gradient(90deg, var(--warm), var(--sun)); }
        .eyebrow--sky { color: #1F5A9F; }
        .eyebrow--sky::before { background: linear-gradient(90deg, var(--sky), var(--deep-navy)); }
        .eyebrow--lavender { color: var(--lime-deep); }
        .eyebrow--lavender::before { background: linear-gradient(90deg, var(--lime), var(--warm)); }

        .section-title {
            font-family: var(--font-display); font-weight: 600;
            font-size: clamp(28px, 3.6vw, 44px);
            letter-spacing: -0.024em; line-height: 1.06;
            color: var(--text); text-wrap: balance;
        }
        .section-title em {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            background: linear-gradient(135deg, var(--deep-navy) 0%, var(--sky) 45%, var(--lime) 92%);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: transparent;
        }
        .section-sub { font-size: 17px; color: var(--text-secondary); max-width: 620px; margin-top: 12px; line-height: 1.55; }

        .section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 36px; }
        .section-head__left { display: flex; flex-direction: column; gap: 14px; }
        .section-head__link {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 14px; font-weight: 500; color: var(--apple-blue-link);
            padding: 8px 0; transition: gap var(--transition);
        }
        .section-head__link:hover { gap: 10px; }
        .section-head__link svg { width: 14px; height: 14px; }

        /* ================== Hero magazine ================== */
        .hero {
            padding: clamp(40px, 6vw, 84px) 0 clamp(48px, 6vw, 80px);
            position: relative; overflow: hidden;
        }
        .hero::before {
            content: ""; position: absolute; inset: -50% -10% auto -10%; height: 85%;
            background:
                radial-gradient(48% 60% at 22% 28%, rgba(154,205,50,0.16), transparent 72%),
                radial-gradient(46% 58% at 78% 24%, rgba(111,181,223,0.18), transparent 72%),
                radial-gradient(42% 55% at 50% 78%, rgba(221,242,255,0.55), transparent 72%);
            filter: blur(50px); z-index: -1; pointer-events: none;
        }
        .hero::after {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(circle at 1px 1px, rgba(15,42,74,0.045) 1px, transparent 0);
            background-size: 32px 32px;
            mask-image: radial-gradient(ellipse 78% 58% at 50% 28%, #000 30%, transparent 78%);
            -webkit-mask-image: radial-gradient(ellipse 78% 58% at 50% 28%, #000 30%, transparent 78%);
            pointer-events: none; z-index: -1;
        }

        /* Subtle SVG grain noise overlay — adds film-like texture */
        body::before {
            content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
            opacity: 0.045; mix-blend-mode: multiply;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        }
        @media (prefers-reduced-motion: reduce) { body::before { display: none; } }

        /* Hero featured 3D tilt on mouse parallax */
        .hero-featured {
            transform-style: preserve-3d;
            will-change: transform;
        }
        .hero-featured__media,
        .hero-featured__body { transform-style: preserve-3d; }
        .hero-featured__media img,
        .hero-featured__media .tint,
        .hero-featured__badge {
            transform: translateZ(0);
            transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1);
        }
        .hero-featured.is-tilting .hero-featured__badge { transform: translateZ(24px); }
        .hero-featured.is-tilting .hero-featured__media img { transform: scale(1.02) translateZ(8px); }
        @media (prefers-reduced-motion: reduce), (max-width: 960px) {
            .hero-featured.is-tilting { transform: none !important; }
        }

        .hero__masthead {
            text-align: center; margin-bottom: clamp(40px, 5vw, 64px);
            display: flex; flex-direction: column; align-items: center; gap: 18px;
        }
        .hero__kicker {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 6px 14px; border-radius: var(--radius-pill);
            border: 1px solid var(--border-light); background: rgba(255,255,255,0.7);
            font-family: var(--font-mono); font-size: 11px; font-weight: 500;
            letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary);
        }
        .hero__kicker .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(154,205,50,0.28); animation: pulse-dot 2.4s ease-in-out infinite; }
        .hero__welcome[hidden] { display: none !important; }
        .hero__welcome {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 5px 13px; border-radius: var(--radius-pill);
            background: linear-gradient(135deg, var(--mint-soft), var(--sky-soft));
            border: 1px solid var(--mint);
            color: var(--mint-dark);
            font-family: var(--font-display); font-size: 13px; font-weight: 500;
            letter-spacing: -0.006em;
            animation: welcomeIn 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
        }
        html[data-theme="dark"] .hero__welcome {
            background: rgba(16,185,129,0.10);
            border-color: rgba(16,185,129,0.32);
            color: var(--mint);
        }
        .hero__welcome svg { width: 14px; height: 14px; }
        @keyframes welcomeIn {
            from { opacity: 0; transform: translateY(-6px) scale(0.95); }
            to   { opacity: 1; transform: none; }
        }
        .hero__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02;
            letter-spacing: -0.030em; color: var(--text); text-wrap: balance;
            max-width: 1000px;
        }
        .hero__title em {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            background: linear-gradient(135deg, var(--deep-navy) 0%, var(--sky) 42%, var(--lime) 92%);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent; color: transparent;
            display: inline-block;
        }
        .hero__lede {
            font-size: clamp(17px, 1.6vw, 19px); color: var(--text-secondary); max-width: 640px;
            line-height: 1.55; text-wrap: balance;
        }
        .hero__meta { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.06em; }
        .hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
        .hero__meta span::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.5; }
        .hero__meta span:first-child::before { display: none; }

        /* Featured layout: 7-5 split */
        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            gap: clamp(28px, 3vw, 44px);
            align-items: stretch;
        }

        .hero-featured {
            position: relative; display: flex; flex-direction: column;
            border-radius: var(--radius-2xl); overflow: hidden;
            background: var(--glass-card);
            backdrop-filter: blur(10px) saturate(160%);
            -webkit-backdrop-filter: blur(10px) saturate(160%);
            border: 1px solid var(--glass-border);
            box-shadow: 0 8px 32px rgba(16,19,20,0.06), 0 1px 0 rgba(255,255,255,0.6) inset;
            transition: transform var(--transition), box-shadow var(--transition);
        }
        .hero-featured:hover { transform: translateY(-4px); box-shadow: 0 22px 60px rgba(16,19,20,0.10), 0 4px 18px rgba(154,205,50,0.10); }
        .hero-featured__media {
            position: relative; aspect-ratio: 16/10; overflow: hidden;
            background: linear-gradient(135deg, var(--bg-alt), var(--bg-cream));
        }
        .hero-featured__media img {
            width: 100%; height: 100%; object-fit: cover;
            transition: transform 0.7s cubic-bezier(0.2,0.8,0.2,1);
        }
        .hero-featured:hover .hero-featured__media img { transform: scale(1.04); }
        .hero-featured__media::after {
            content: ""; position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(15,42,74,0.06) 0%, transparent 45%);
        }
        .hero-featured__badge {
            position: absolute; top: 18px; left: 18px; z-index: 2;
            display: inline-flex; align-items: center; gap: 7px;
            font-family: var(--font-mono); font-size: 11px; font-weight: 600;
            letter-spacing: 0.16em; text-transform: uppercase;
            color: var(--deep-navy);
            padding: 7px 14px; border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(10px) saturate(160%);
            -webkit-backdrop-filter: blur(10px) saturate(160%);
            border: 1px solid rgba(154,205,50,0.32);
            box-shadow: 0 8px 22px rgba(0,51,102,0.16);
        }
        .hero-featured__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(154,205,50,0.28); animation: pulse-dot 2.4s ease-in-out infinite; }

        .hero-featured__body { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
        .hero-featured__title {
            font-family: var(--font-editorial); font-weight: 500;
            font-size: clamp(26px, 2.6vw, 38px); line-height: 1.12;
            letter-spacing: -0.018em; color: var(--text); text-wrap: balance;
        }
        .hero-featured__title a:hover { color: var(--apple-blue-link); }
        .hero-featured__teaser { font-size: 16px; color: var(--text-secondary); line-height: 1.6; }
        .hero-featured__meta { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); }
        .hero-featured__meta .author { color: var(--text); font-weight: 500; font-family: var(--font-body); font-size: 13px; }
        .hero-featured__meta .dot { width: 3px; height: 3px; background: var(--text-tertiary); border-radius: 50%; }

        /* Author avatar stack */
        .author-stack {
            display: inline-flex; align-items: center;
            padding-right: 6px;
        }
        .author-stack__avatar {
            width: 26px; height: 26px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 11px;
            border: 2px solid #fff;
            box-shadow: 0 2px 6px rgba(0,0,0,0.10);
            margin-left: -8px;
            transition: transform var(--transition), z-index 0s;
            position: relative;
        }
        .author-stack__avatar:first-child { margin-left: 0; }
        .author-stack__avatar:nth-child(1) { z-index: 3; }
        .author-stack__avatar:nth-child(2) { z-index: 2; }
        .author-stack__avatar:nth-child(3) { z-index: 1; }
        .hero-featured:hover .author-stack__avatar { transform: translateY(-2px); }
        .hero-featured:hover .author-stack__avatar:nth-child(2) { transition-delay: 0.05s; }
        .hero-featured:hover .author-stack__avatar:nth-child(3) { transition-delay: 0.10s; }

        /* Side stories */
        .hero-side { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-soft); }
        .hero-side__item {
            display: grid; grid-template-columns: 1fr 110px; gap: 18px; align-items: flex-start;
            padding: 18px 0; border-bottom: 1px solid var(--border-soft);
            transition: transform var(--transition);
        }
        .hero-side__item:hover { transform: translateX(3px); }
        .hero-side__item:last-child { border-bottom: 0; }
        .hero-side__num {
            font-family: var(--font-mono); font-size: 11px; font-weight: 500;
            letter-spacing: 0.16em; color: var(--text-tertiary);
            display: block; margin-bottom: 6px;
        }
        .hero-side__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: 17px; line-height: 1.28; color: var(--text); letter-spacing: -0.012em;
        }
        .hero-side__title a:hover { color: var(--apple-blue-link); }
        .hero-side__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 8px; letter-spacing: 0.06em; }
        .hero-side__thumb {
            width: 110px; height: 84px; border-radius: var(--radius); overflow: hidden;
            background: var(--bg-alt); position: relative;
        }
        .hero-side__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .hero-side__item:hover .hero-side__thumb img { transform: scale(1.06); }

        /* Empty state */
        .empty {
            padding: 80px 24px; text-align: center; color: var(--text-tertiary);
            border: 1px dashed var(--border); border-radius: var(--radius-xl);
            background: var(--bg-soft);
        }
        .empty__title { font-family: var(--font-editorial); font-style: italic; font-size: 24px; color: var(--text-secondary); margin-bottom: 8px; }

        /* ================== Trending topics ================== */
        .topics {
            padding: 8px 0 clamp(28px, 4vw, 48px);
            position: relative;
        }
        .topics__inner {
            display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
            gap: clamp(20px, 3vw, 44px);
            align-items: flex-start;
            padding: clamp(24px, 3vw, 36px);
            border-radius: var(--radius-xl);
            background: linear-gradient(135deg, var(--bg-soft), var(--bg-cream));
            border: 1px solid var(--border-soft);
        }
        html[data-theme="dark"] .topics__inner {
            background: linear-gradient(135deg, var(--bg-alt), var(--bg-cream));
            border-color: var(--border-light);
        }
        .topics__label { display: flex; flex-direction: column; gap: 10px; }
        .topics__sub {
            font-size: 13.5px; color: var(--text-secondary); line-height: 1.5;
        }
        .topics__cloud {
            display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center;
        }
        .topic-tag {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 14px 7px 12px;
            border-radius: var(--radius-pill);
            background: #fff;
            color: var(--text);
            font-size: 13.5px; font-weight: 500;
            border: 1px solid var(--border-light);
            transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
        }
        html[data-theme="dark"] .topic-tag { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--border-light); }
        .topic-tag:hover {
            transform: translateY(-2px);
            background: var(--text); color: #fff;
            border-color: var(--text);
            box-shadow: 0 8px 18px rgba(0,0,0,0.16);
        }
        html[data-theme="dark"] .topic-tag:hover { background: #fff; color: var(--ink); border-color: #fff; }
        .topic-tag__dot {
            width: 6px; height: 6px; border-radius: 50%;
            background: var(--apple-blue); transition: transform var(--transition);
        }
        .topic-tag:nth-child(3n) .topic-tag__dot { background: var(--coral); }
        .topic-tag:nth-child(3n+1) .topic-tag__dot { background: var(--mint); }
        .topic-tag:nth-child(5n+2) .topic-tag__dot { background: var(--sun); }
        .topic-tag:hover .topic-tag__dot { transform: scale(1.4); }
        .topic-tag__count {
            font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
            color: var(--text-tertiary); letter-spacing: 0.06em;
            padding: 1px 6px; border-radius: var(--radius-pill);
            background: var(--bg-alt);
            margin-left: 2px;
            transition: background var(--transition), color var(--transition);
        }
        .topic-tag:hover .topic-tag__count { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.85); }
        html[data-theme="dark"] .topic-tag:hover .topic-tag__count { background: rgba(0,0,0,0.18); color: rgba(0,0,0,0.72); }

        .topic-tag--lg { font-size: 14.5px; padding: 9px 16px 9px 14px; }
        .topic-tag--lg .topic-tag__dot { width: 7px; height: 7px; }

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

        /* ================== Breaking strip — glass light elegant ================== */
        .breaking {
            background: linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.85) 100%);
            backdrop-filter: blur(14px) saturate(160%);
            -webkit-backdrop-filter: blur(14px) saturate(160%);
            color: var(--deep-navy); padding: 16px 0;
            position: relative; overflow: hidden;
            border-top: 1px solid rgba(154,205,50,0.22);
            border-bottom: 1px solid var(--border-soft);
        }
        .breaking::before {
            content: ""; position: absolute; inset: 0;
            background:
                radial-gradient(38% 100% at 0% 50%, rgba(154,205,50,0.10), transparent 70%),
                radial-gradient(38% 100% at 100% 50%, rgba(111,181,223,0.10), transparent 70%);
            pointer-events: none;
        }
        .breaking__inner { display: flex; align-items: center; gap: 22px; }
        .breaking__tag {
            display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
            font-family: var(--font-mono); font-size: 11px; font-weight: 600;
            letter-spacing: 0.18em; text-transform: uppercase;
            padding: 7px 14px; border-radius: var(--radius-pill);
            background: linear-gradient(135deg, rgba(154,205,50,0.18), rgba(111,181,223,0.18));
            border: 1px solid rgba(154,205,50,0.36);
            color: var(--deep-navy);
            box-shadow: 0 4px 12px rgba(154,205,50,0.10);
        }
        .breaking__tag .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(154,205,50,0.30); animation: pulse-dot 2.4s ease-in-out infinite; }
        .breaking__track { display: flex; gap: 0; overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent); }
        .breaking__rail { display: flex; gap: 40px; animation: ticker 52s linear infinite; flex-shrink: 0; padding-right: 40px; }
        .breaking:hover .breaking__rail { animation-play-state: paused; }
        @keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .breaking__item {
            display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
            font-size: 14px; color: var(--text-secondary); transition: color var(--transition);
            font-weight: 500;
        }
        .breaking__item:hover { color: var(--deep-navy); }
        .breaking__item::before { content: "◆"; color: var(--lime); font-size: 8px; }

        /* ================== Section primitives ================== */
        .section { padding: clamp(48px, 6vw, 84px) 0; position: relative; }
        /* Soft & cream sections — semi-transparent overlays giúp body gradient
           xuyên qua nhưng vẫn có rhythm sáng/tối nhẹ giữa các section. */
        .section--soft {
            background: linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(248,251,247,0.88) 100%);
            position: relative;
        }
        .section--soft::before {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(60% 50% at 50% 0%, rgba(154,205,50,0.05), transparent 65%);
        }
        .section--cream {
            background: linear-gradient(180deg, rgba(248,251,247,0.85) 0%, rgba(239,247,251,0.78) 100%);
            position: relative;
        }
        .section--cream::before {
            content: ""; position: absolute; inset: 0; pointer-events: none;
            background: radial-gradient(50% 60% at 50% 100%, rgba(111,181,223,0.06), transparent 65%);
        }
        .section--tight { padding: clamp(36px, 4.5vw, 64px) 0; }

        /* ================== Zone section ================== */
        .zone-grid {
            display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
            gap: clamp(28px, 3vw, 44px); align-items: stretch;
        }
        .zone-lead {
            position: relative; display: flex; flex-direction: column; gap: 18px;
            border-radius: var(--radius-xl); overflow: hidden;
            background: #fff; border: 1px solid var(--border-soft);
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .zone-lead:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border); }
        .zone-lead__media { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--bg-alt); }
        .zone-lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
        .zone-lead:hover .zone-lead__media img { transform: scale(1.04); }
        .zone-lead__media::after {
            content: ""; position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(15,42,74,0.06) 0%, transparent 40%);
        }
        .zone-lead__chip {
            position: absolute; top: 16px; left: 16px; z-index: 2;
            font-family: var(--font-mono); font-size: 10px; font-weight: 500;
            letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
            padding: 5px 11px; border-radius: var(--radius-pill);
            background: rgba(0,0,0,0.50); backdrop-filter: blur(8px);
        }
        .zone-lead__body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
        .zone-lead__title {
            font-family: var(--font-editorial); font-weight: 500;
            font-size: clamp(22px, 2.2vw, 30px); line-height: 1.14; letter-spacing: -0.014em;
            color: var(--text); text-wrap: balance;
        }
        .zone-lead__teaser { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }
        .zone-lead__meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft); }

        .zone-list { display: flex; flex-direction: column; gap: 0; }
        .zone-list__item {
            display: grid; grid-template-columns: 1fr 120px; gap: 18px;
            padding: 20px 0; border-bottom: 1px solid var(--border-soft);
            transition: transform var(--transition);
        }
        .zone-list__item:first-child { padding-top: 0; }
        .zone-list__item:last-child { border-bottom: 0; }
        .zone-list__item:hover { transform: translateX(4px); }
        .zone-list__num {
            display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
            letter-spacing: 0.14em; color: var(--text-tertiary); margin-bottom: 6px;
        }
        .zone-list__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: 17px; line-height: 1.28; color: var(--text); letter-spacing: -0.012em;
        }
        .zone-list__title a:hover { color: var(--apple-blue-link); }
        .zone-list__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); margin-top: 8px; letter-spacing: 0.06em; }
        .zone-list__thumb { width: 120px; height: 86px; border-radius: 8px; overflow: hidden; background: var(--bg-alt); }
        .zone-list__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .zone-list__item:hover .zone-list__thumb img { transform: scale(1.06); }

        /* Accent colors per zone */
        .accent-blue .zone-list__num { color: var(--apple-blue-link); }
        .accent-mint .zone-list__num { color: var(--mint-dark); }
        .accent-coral .zone-list__num { color: var(--coral); }
        .accent-sun .zone-list__num { color: #b45309; }
        .accent-sky .zone-list__num { color: #0369a1; }
        .accent-lavender .zone-list__num { color: var(--lavender); }

        /* ================== Stream grid (4-col latest news) ================== */
        .stream-grid {
            display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: clamp(20px, 2vw, 28px);
        }
        .stream-card {
            display: flex; flex-direction: column;
            background: #fff; border-radius: var(--radius-lg); overflow: hidden;
            border: 1px solid var(--border-soft);
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .stream-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border); }
        .stream-card__media {
            position: relative; aspect-ratio: 5/3; overflow: hidden; background: var(--bg-alt);
        }
        .stream-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .stream-card:hover .stream-card__media img { transform: scale(1.06); }
        .stream-card__media::after {
            content: ""; position: absolute; inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.40) 0%, transparent 50%);
            pointer-events: none;
        }
        .stream-card__num {
            position: absolute; top: 12px; left: 12px; z-index: 2;
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            font-size: 28px; line-height: 1; color: #fff;
            text-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }
        .stream-card__body { padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
        .stream-card__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: 16px; line-height: 1.32; letter-spacing: -0.012em;
            color: var(--text); text-wrap: balance;
        }
        .stream-card:hover .stream-card__title { color: var(--apple-blue-link); }
        .stream-card__meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); letter-spacing: 0.06em; }

        @media (max-width: 1100px) { .stream-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
        @media (max-width: 820px) { .stream-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 480px) { .stream-grid { grid-template-columns: 1fr; } }

        /* ================== Editor picks (3-col card grid) ================== */
        .picks-grid {
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(20px, 2vw, 32px);
        }
        .pick-card {
            display: flex; flex-direction: column; background: #fff;
            border-radius: var(--radius-xl); overflow: hidden;
            border: 1px solid var(--border-soft);
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .pick-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border); }
        .pick-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--bg-alt); }
        .pick-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .pick-card:hover .pick-card__media img { transform: scale(1.05); }
        .pick-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
        .pick-card__kicker {
            font-family: var(--font-mono); font-size: 10px; font-weight: 500;
            letter-spacing: 0.16em; text-transform: uppercase;
            color: var(--apple-blue-link);
        }
        .pick-card__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: 18px; line-height: 1.28; letter-spacing: -0.012em;
            color: var(--text); text-wrap: balance;
        }
        .pick-card:hover .pick-card__title { color: var(--apple-blue-link); }
        .pick-card__teaser { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }
        .pick-card__meta {
            margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-soft);
            display: flex; align-items: center; gap: 10px;
            font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary);
        }

        /* ================== Most viewed — elegant cream/lime, không còn dark ink ================== */
        .most-viewed {
            background:
                radial-gradient(circle at 12% 12%, rgba(154,205,50,0.10), transparent 55%),
                radial-gradient(circle at 90% 90%, rgba(111,181,223,0.14), transparent 55%),
                linear-gradient(160deg, #FFFFFF 0%, #F8FBF7 50%, #EFF7FB 100%);
            color: var(--text); border-radius: var(--radius-2xl);
            padding: clamp(32px, 4vw, 56px);
            position: relative; overflow: hidden;
            border: 1px solid var(--border-soft);
            box-shadow: 0 24px 64px rgba(0,51,102,0.08), 0 4px 14px rgba(16,19,20,0.04);
        }
        .most-viewed::before {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(circle at 1px 1px, rgba(15,42,74,0.04) 1px, transparent 0);
            background-size: 28px 28px;
            mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 20%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse 60% 80% at 100% 0%, #000 20%, transparent 70%);
            pointer-events: none;
        }
        .most-viewed__header { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3vw, 40px); }
        .most-viewed .eyebrow { color: var(--lime-deep); }
        .most-viewed .eyebrow::before { background: linear-gradient(90deg, var(--lime), var(--sky)); }
        .most-viewed__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: clamp(26px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.024em;
            margin-top: 14px; color: var(--text);
        }
        .most-viewed__title em {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            background: linear-gradient(135deg, var(--deep-navy), var(--sky) 60%, var(--lime));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .mv-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
        .mv-card {
            display: flex; flex-direction: column; gap: 14px;
            padding: 22px; border-radius: var(--radius-lg);
            background: var(--glass-card);
            backdrop-filter: blur(8px) saturate(140%);
            -webkit-backdrop-filter: blur(8px) saturate(140%);
            border: 1px solid var(--glass-border);
            box-shadow: 0 4px 14px rgba(16,19,20,0.04);
            transition: background var(--transition), transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .mv-card:hover {
            background: rgba(255,255,255,0.95); border-color: rgba(154,205,50,0.32); transform: translateY(-3px);
            box-shadow: 0 18px 40px rgba(0,51,102,0.10), 0 4px 14px rgba(154,205,50,0.10);
        }
        .mv-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
        .mv-card__num {
            font-family: var(--font-editorial); font-style: italic; font-weight: 600;
            font-size: 48px; line-height: 0.92; letter-spacing: -0.04em;
            background: linear-gradient(135deg, var(--lime-deep), var(--lime) 40%, var(--sky));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .mv-card__thumb { width: 72px; height: 72px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: var(--bg-cream); }
        .mv-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
        .mv-card__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: 16px; line-height: 1.32; color: var(--text);
            letter-spacing: -0.012em; text-wrap: balance;
        }
        .mv-card__title a:hover { color: var(--lime-deep); }
        .mv-card__meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.08em; }

        /* ================== Theme of the week ================== */
        .theme-week {
            display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
            gap: clamp(28px, 4vw, 56px);
            align-items: center;
            padding: clamp(28px, 4vw, 48px);
            border-radius: var(--radius-2xl);
            background: linear-gradient(135deg, #FFFFFF 0%, #F8FBF7 50%, #EFF7FB 100%);
            border: 1px solid var(--border-soft);
            position: relative; overflow: hidden;
            box-shadow: 0 18px 48px rgba(0,51,102,0.06);
        }
        .theme-week::before {
            content: ""; position: absolute; inset: 0;
            background:
                radial-gradient(38% 52% at 100% 0%, rgba(154,205,50,0.14), transparent 72%),
                radial-gradient(38% 52% at 0% 100%, rgba(111,181,223,0.16), transparent 72%);
            pointer-events: none;
        }
        .theme-week__media {
            position: relative; aspect-ratio: 4/3; border-radius: var(--radius-xl);
            overflow: hidden; background: var(--bg-alt);
            box-shadow: 0 20px 56px rgba(0,51,102,0.16), 0 8px 22px rgba(154,205,50,0.10);
        }
        .theme-week__cover { position: absolute; inset: 0; display: block; }
        .theme-week__cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
        .theme-week__media:hover .theme-week__cover img { transform: scale(1.04); }
        .theme-week__stamp {
            position: absolute; bottom: 18px; left: 18px; z-index: 2;
            display: flex; align-items: baseline; gap: 8px;
            padding: 10px 16px; border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.14);
        }
        .theme-week__stamp-num {
            font-family: var(--font-editorial); font-style: italic; font-weight: 600;
            font-size: 28px; line-height: 1; letter-spacing: -0.02em;
            background: linear-gradient(135deg, var(--lime-deep), var(--sky));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .theme-week__stamp-label {
            font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--text-tertiary);
        }
        .theme-week__body { position: relative; display: flex; flex-direction: column; gap: 14px; }
        .theme-week__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: clamp(22px, 2.4vw, 30px); line-height: 1.18; letter-spacing: -0.018em;
            color: var(--text); text-wrap: balance;
        }
        .theme-week__title em {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            background: linear-gradient(135deg, var(--deep-navy), var(--lime-deep));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .theme-week__article {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.018em;
            color: var(--text); text-wrap: balance;
        }
        .theme-week__article a:hover { color: var(--lime-deep); }
        .theme-week__teaser { font-size: 16px; color: var(--text-secondary); line-height: 1.62; }
        .theme-week__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 4px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); letter-spacing: 0.04em; }
        .theme-week__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.5; }
        .theme-week__cta {
            display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
            margin-top: 8px; padding: 12px 24px; border-radius: var(--radius-pill);
            background: var(--deep-navy);
            color: #fff; font-weight: 600; font-size: 14.5px;
            box-shadow: 0 12px 26px rgba(0,51,102,0.22), inset 0 1px 0 rgba(255,255,255,0.08);
            transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
        }
        .theme-week__cta:hover {
            color: #fff; transform: translateY(-2px);
            background: linear-gradient(135deg, var(--deep-navy), #1A4D85);
            box-shadow: 0 18px 38px rgba(0,51,102,0.30);
        }
        .theme-week__cta svg { width: 16px; height: 16px; }

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

        /* ================== Newsletter — deep navy elegant với lime/warm accent ================== */
        .newsletter {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: clamp(28px, 4vw, 56px);
            align-items: center;
            padding: clamp(36px, 5vw, 60px) clamp(28px, 4vw, 56px);
            border-radius: var(--radius-2xl);
            background: linear-gradient(135deg, var(--deep-navy) 0%, #0A2347 55%, #143864 100%);
            color: #fff;
            position: relative; overflow: hidden;
            box-shadow: 0 30px 70px rgba(0,51,102,0.30), inset 0 1px 0 rgba(255,255,255,0.06);
        }
        .newsletter::before {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
            background-size: 28px 28px;
            mask-image: linear-gradient(135deg, #000 30%, transparent 90%);
            -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 90%);
            pointer-events: none;
        }
        .newsletter__deco {
            position: absolute; inset: 0; pointer-events: none; overflow: hidden;
        }
        .newsletter__deco-1, .newsletter__deco-2, .newsletter__deco-3 {
            position: absolute; border-radius: 50%; filter: blur(48px);
        }
        .newsletter__deco-1 { width: 320px; height: 320px; right: -80px; top: -80px; background: radial-gradient(circle, rgba(154,205,50,0.34), transparent 70%); }
        .newsletter__deco-2 { width: 260px; height: 260px; left: -50px; bottom: -60px; background: radial-gradient(circle, rgba(111,181,223,0.32), transparent 70%); }
        .newsletter__deco-3 { width: 200px; height: 200px; left: 38%; top: 28%; background: radial-gradient(circle, rgba(255,179,71,0.18), transparent 70%); }

        .newsletter__body { position: relative; }
        .newsletter__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: clamp(26px, 3.4vw, 44px); line-height: 1.06; letter-spacing: -0.024em;
            margin: 14px 0 12px; text-wrap: balance;
        }
        .newsletter__title em {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            background: linear-gradient(135deg, var(--lime), var(--warm));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .newsletter .eyebrow { color: rgba(255,255,255,0.78); }
        .newsletter .eyebrow::before { background: linear-gradient(90deg, var(--lime), var(--warm)); }
        .newsletter__sub { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 460px; }

        .newsletter__form { position: relative; display: flex; flex-direction: column; gap: 14px; }
        .newsletter__field {
            display: flex; align-items: center; gap: 12px;
            padding: 14px 18px; border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.10);
            border: 1px solid rgba(255,255,255,0.18);
            transition: border-color var(--transition), background var(--transition);
        }
        .newsletter__field:focus-within { border-color: var(--lime); background: rgba(255,255,255,0.16); box-shadow: 0 0 0 3px rgba(154,205,50,0.18); }
        .newsletter__field svg { width: 20px; height: 20px; color: rgba(255,255,255,0.6); flex-shrink: 0; }
        .newsletter__field input {
            flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
            font: inherit; font-size: 15px; color: #fff;
        }
        .newsletter__field input::placeholder { color: rgba(255,255,255,0.45); }

        .newsletter__submit {
            display: inline-flex; align-items: center; justify-content: center; gap: 9px;
            padding: 14px 24px; border-radius: var(--radius-pill);
            background: linear-gradient(135deg, var(--lime) 0%, #B6DD56 100%);
            color: var(--deep-navy); font-weight: 700; font-size: 15px;
            letter-spacing: -0.005em;
            box-shadow: 0 12px 28px rgba(154,205,50,0.36), inset 0 1px 0 rgba(255,255,255,0.4);
            transition: transform var(--transition), box-shadow var(--transition);
        }
        .newsletter__submit:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(154,205,50,0.48), inset 0 1px 0 rgba(255,255,255,0.5); color: var(--deep-navy); }
        .newsletter__submit svg { width: 16px; height: 16px; }
        .newsletter__note { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,0.55); letter-spacing: 0.04em; }

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

        /* ================== Pull quote / mission ================== */
        .pull-quote {
            position: relative;
            padding: clamp(60px, 8vw, 100px) clamp(24px, 4vw, 64px);
            background: var(--bg-cream); border-radius: var(--radius-2xl);
            overflow: hidden; text-align: center;
        }
        .pull-quote::before {
            content: "\201C";
            position: absolute; top: -20px; left: 32px;
            font-family: var(--font-editorial); font-weight: 600;
            font-size: 200px; line-height: 1; color: rgba(0,0,0,0.06);
            pointer-events: none;
        }
        .pull-quote::after {
            content: ""; position: absolute; inset: 0;
            background:
                radial-gradient(42% 60% at 20% 20%, rgba(154,205,50,0.12), transparent 72%),
                radial-gradient(42% 60% at 80% 80%, rgba(111,181,223,0.14), transparent 72%);
            pointer-events: none;
        }
        .pull-quote__inner { position: relative; max-width: 820px; margin: 0 auto; }
        .pull-quote p {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            font-size: clamp(22px, 3vw, 36px); line-height: 1.32; letter-spacing: -0.014em;
            color: var(--text); text-wrap: balance;
        }
        .pull-quote p em {
            font-style: normal; font-weight: 600;
            background: linear-gradient(135deg, var(--lime-deep), var(--deep-navy));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .pull-quote__cite {
            margin-top: 28px; display: inline-flex; align-items: center; gap: 12px;
            font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--text-tertiary);
        }
        .pull-quote__cite::before { content: ""; width: 28px; height: 1px; background: var(--text-tertiary); }

        /* ================== CTA banner — deep navy elegant với lime accent ================== */
        .cta-banner {
            position: relative; overflow: hidden;
            border-radius: var(--radius-2xl);
            padding: clamp(48px, 6vw, 80px) clamp(28px, 4vw, 64px);
            background: linear-gradient(135deg, #001F42 0%, var(--deep-navy) 55%, #1A4D85 100%);
            color: #fff;
            box-shadow: 0 30px 70px rgba(0,51,102,0.30);
        }
        .cta-banner::before {
            content: ""; position: absolute; inset: 0;
            background:
                radial-gradient(42% 60% at 88% 28%, rgba(154,205,50,0.32), transparent 62%),
                radial-gradient(50% 70% at 8% 82%, rgba(111,181,223,0.30), transparent 62%);
            pointer-events: none;
        }
        .cta-banner::after {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0);
            background-size: 24px 24px;
            mask-image: linear-gradient(135deg, #000 30%, transparent 80%);
            -webkit-mask-image: linear-gradient(135deg, #000 30%, transparent 80%);
            pointer-events: none;
        }
        .cta-banner__inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(32px, 4vw, 60px); align-items: center; }
        .cta-banner__eye {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 6px 14px; border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.12); backdrop-filter: blur(10px);
            font-family: var(--font-mono); font-size: 11px; font-weight: 500;
            letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
        }
        .cta-banner__eye .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(154,205,50,0.36); animation: pulse-dot 2.4s ease-in-out infinite; }
        .cta-banner__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: clamp(28px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.024em;
            margin: 18px 0 14px; text-wrap: balance;
        }
        .cta-banner__title em {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            background: linear-gradient(135deg, var(--lime) 0%, #C4E374 100%);
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .cta-banner__sub { font-size: 17px; color: rgba(255,255,255,0.82); line-height: 1.55; max-width: 480px; }
        .cta-banner__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
        .btn {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 13px 22px; border-radius: var(--radius-pill);
            font-weight: 600; font-size: 15px;
            transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .btn--primary { background: #fff; color: var(--ink); box-shadow: 0 8px 22px rgba(0,0,0,0.18); }
        .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.30); color: var(--ink); }
        .btn--ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.22); }
        .btn--ghost:hover { background: rgba(255,255,255,0.20); color: #fff; transform: translateY(-2px); }
        .btn svg { width: 16px; height: 16px; }

        .cta-banner__deck {
            display: flex; flex-direction: column; gap: 14px;
            padding: 26px; border-radius: var(--radius-xl);
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.14);
            backdrop-filter: blur(10px);
        }
        .deck-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
        .deck-row:last-child { border-bottom: 0; }
        .deck-row__icon {
            width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
            display: grid; place-items: center;
            background: rgba(255,255,255,0.10); font-size: 18px;
        }
        .deck-row__text { display: flex; flex-direction: column; gap: 2px; }
        .deck-row__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
        .deck-row__value { font-size: 14px; font-weight: 500; color: #fff; }

        /* ================== Footer ================== */
        .site-footer { background: var(--bg-cream); padding: 64px 0 32px; margin-top: 80px; }
        .footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
        .footer-brand { display: flex; flex-direction: column; gap: 14px; max-width: 360px; }
        .footer-brand p { color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
        .footer-col h4 { font-family: var(--font-display); font-weight: 600; font-size: 13px; margin-bottom: 14px; letter-spacing: -0.01em; color: var(--text); }
        .footer-col ul { display: flex; flex-direction: column; gap: 10px; }
        .footer-col a { font-size: 14px; color: var(--text-secondary); transition: color var(--transition); }
        .footer-col a:hover { color: var(--apple-blue-link); }
        .footer-archive {
            margin-top: 32px; padding-top: 28px;
            border-top: 1px solid var(--border-soft);
        }
        .footer-archive__head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
        .footer-archive__sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); letter-spacing: 0.10em; }
        .footer-archive__list {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 10px 28px; list-style: none; padding: 0;
        }
        .footer-archive__item {
            display: grid; grid-template-columns: auto 1fr auto;
            gap: 10px; align-items: baseline;
            padding: 6px 0; border-bottom: 1px dashed var(--border-soft);
            transition: padding-left var(--transition);
        }
        .footer-archive__item:hover { padding-left: 4px; }
        .footer-archive__num {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            font-size: 14px; color: var(--text-tertiary); letter-spacing: -0.01em;
            min-width: 22px;
        }
        .footer-archive__title {
            font-size: 13.5px; font-weight: 500; color: var(--text);
            line-height: 1.35; overflow: hidden; text-overflow: ellipsis;
            display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
            transition: color var(--transition);
        }
        .footer-archive__title:hover { color: var(--apple-blue-link); }
        .footer-archive__date { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; letter-spacing: 0.04em; }

        @media (max-width: 880px) {
            .footer-archive__list { grid-template-columns: repeat(2, 1fr); gap: 8px 20px; }
        }
        @media (max-width: 540px) {
            .footer-archive__list { grid-template-columns: 1fr; }
        }

        .footer-bottom { border-top: 1px solid var(--border-soft); padding-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); letter-spacing: 0.04em; margin-top: 32px; }
        .footer-bottom a { color: var(--text-tertiary); }
        .footer-bottom a:hover { color: var(--text); }
        .footer-social { display: flex; gap: 10px; }
        .footer-social a {
            width: 36px; height: 36px; border-radius: 50%; background: #fff;
            border: 1px solid var(--border-light); display: grid; place-items: center;
            transition: transform var(--transition), background var(--transition), color var(--transition);
            color: var(--text-secondary);
        }
        .footer-social a:hover { background: var(--apple-blue); color: #fff; transform: translateY(-2px); }
        .footer-social svg { width: 16px; height: 16px; }

        /* ================== Card cover fallback gradient (until JS hydrates) ================== */
        img[data-cover-key] { background: linear-gradient(135deg, var(--bg-alt), var(--bg-cream)); opacity: 0; transition: opacity 0.3s ease; }
        img[data-cover-key].is-loaded { opacity: 1; }

        /* ================== Staggered card entrance ================== */
        .stream-card, .pick-card, .mv-card, .hero-side__item {
            opacity: 0; transform: translateY(14px);
            animation: cardEnter 0.6s cubic-bezier(0.2,0.8,0.2,1) forwards;
            animation-delay: calc(var(--idx, 0) * 0.045s + 0.05s);
        }
        @keyframes cardEnter {
            to { opacity: 1; transform: none; }
        }
        @media (prefers-reduced-motion: reduce) {
            .stream-card, .pick-card, .mv-card, .hero-side__item { opacity: 1; transform: none; animation: none; }
        }

        /* ================== Reveal animation ================== */
        /* Soft initial state — never goes below 0.4 so the page never looks empty before JS hydration */
        .reveal { opacity: 0.45; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.8,0.2,1); }
        .reveal.is-in { opacity: 1; transform: none; }
        .reveal--instant { opacity: 1; transform: none; }
        @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } .breaking__rail { animation: none; } }

        /* ================== Tint stripe per card index ================== */
        /* Gives every card a distinctive accent without depending on the article image */
        .tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: 0.0; transition: opacity var(--transition); }
        .tint--blue   { background: linear-gradient(135deg, rgba(0,51,102,0.16), rgba(111,181,223,0.06)); }
        .tint--coral  { background: linear-gradient(135deg, rgba(154,205,50,0.18), rgba(111,181,223,0.06)); }
        .tint--mint   { background: linear-gradient(135deg, rgba(154,205,50,0.16), rgba(132,189,90,0.05)); }
        .tint--sun    { background: linear-gradient(135deg, rgba(255,179,71,0.18), rgba(232,163,61,0.06)); }
        .tint--sky    { background: linear-gradient(135deg, rgba(111,181,223,0.18), rgba(0,51,102,0.06)); }
        .tint--lavender { background: linear-gradient(135deg, rgba(154,205,50,0.16), rgba(255,179,71,0.06)); }
        .stream-card__media .tint, .pick-card__media .tint, .hero-side__thumb .tint, .zone-list__thumb .tint, .zone-lead__media .tint, .hero-featured__media .tint { opacity: 1; }

        /* Reading-rail micro accents */
        .stream-card { position: relative; }
        .stream-card::before {
            content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
            background: linear-gradient(90deg, var(--lime), var(--sky));
            opacity: 0; transition: opacity var(--transition);
        }
        .stream-card:hover::before { opacity: 1; }
        .stream-card.accent-blue::before   { background: linear-gradient(90deg, var(--deep-navy), var(--sky)); }
        .stream-card.accent-mint::before   { background: linear-gradient(90deg, var(--lime), var(--mint)); }
        .stream-card.accent-coral::before  { background: linear-gradient(90deg, var(--lime-deep), var(--lime)); }
        .stream-card.accent-sun::before    { background: linear-gradient(90deg, var(--warm), var(--lime)); }
        .stream-card.accent-sky::before    { background: linear-gradient(90deg, var(--sky), var(--deep-navy)); }
        .stream-card.accent-lavender::before { background: linear-gradient(90deg, var(--lime), var(--warm)); }

        /* ================== Sticky dot TOC ================== */
        .toc-dots {
            position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
            display: flex; flex-direction: column; gap: 14px;
            z-index: 80; opacity: 0; transition: opacity 0.4s ease;
            padding: 14px 10px; border-radius: var(--radius-pill);
            background: rgba(255,255,255,0.55); backdrop-filter: blur(14px) saturate(140%);
            -webkit-backdrop-filter: blur(14px) saturate(140%);
            border: 1px solid var(--border-soft);
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        }
        .toc-dots.is-visible { opacity: 1; }
        .toc-dot {
            position: relative; width: 10px; height: 10px;
            display: flex; align-items: center; justify-content: center;
            background: var(--border); border-radius: 50%;
            transition: background var(--transition), transform var(--transition);
        }
        .toc-dot:hover { background: var(--text); transform: scale(1.25); }
        .toc-dot.is-active {
            background: var(--text);
            box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
        }
        .toc-dot.is-active::after {
            content: ""; position: absolute; inset: -4px; border-radius: 50%;
            border: 1.5px solid var(--lime);
            animation: tocActivePulse 2.4s ease-in-out infinite;
        }
        @keyframes tocActivePulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.3); opacity: 0; }
        }
        .toc-dot span {
            position: absolute; right: calc(100% + 14px); top: 50%;
            transform: translateY(-50%) translateX(6px);
            white-space: nowrap; padding: 5px 11px;
            background: var(--text); color: #fff;
            font-family: var(--font-mono); font-size: 11px; font-weight: 500;
            letter-spacing: 0.06em;
            border-radius: var(--radius-pill);
            opacity: 0; pointer-events: none;
            transition: opacity var(--transition), transform var(--transition);
        }
        .toc-dot span::after {
            content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
            border-top: 5px solid transparent; border-bottom: 5px solid transparent;
            border-left: 6px solid var(--text);
        }
        .toc-dot:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
        @media (max-width: 1100px) { .toc-dots { display: none; } }

        /* ================== Bookmark icon on cards ================== */
        .bookmark-btn {
            position: absolute; top: 10px; right: 10px; z-index: 3;
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(255,255,255,0.86); backdrop-filter: blur(6px);
            color: var(--text-secondary);
            display: inline-flex; align-items: center; justify-content: center;
            opacity: 0; transform: translateY(-4px);
            transition: opacity var(--transition), transform var(--transition), background var(--transition), color var(--transition);
            box-shadow: 0 4px 12px rgba(0,0,0,0.10);
        }
        .stream-card:hover .bookmark-btn,
        .pick-card:hover .bookmark-btn,
        .bookmark-btn.is-saved { opacity: 1; transform: none; }
        .bookmark-btn:hover { color: var(--lime-deep); background: #fff; transform: scale(1.08); }
        .bookmark-btn.is-saved { color: var(--lime-deep); }
        .bookmark-btn.is-saved .bookmark-btn__icon path {
            fill: var(--lime);
            stroke: var(--lime-deep);
        }
        .bookmark-btn__icon { width: 16px; height: 16px; transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1); }
        .bookmark-btn.is-saved .bookmark-btn__icon { transform: scale(1.18) rotate(-6deg); }

        /* Toast for bookmark saved */
        .save-toast {
            position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%) translateY(20px);
            z-index: 95; padding: 12px 20px; border-radius: var(--radius-pill);
            background: var(--text); color: #fff; font-size: 14px; font-weight: 500;
            box-shadow: 0 14px 40px rgba(0,0,0,0.30);
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
            display: inline-flex; align-items: center; gap: 8px;
        }
        .save-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
        .save-toast svg { width: 16px; height: 16px; color: var(--lime); }

        /* For card position context */
        .pick-card { position: relative; }

        /* Ensure article-level positioning relative for bookmark */
        .stream-card { position: relative; }

        /* ================== Floating action ================== */
        .float-cta {
            position: fixed; right: 22px; bottom: 22px; z-index: 90;
            display: inline-flex; align-items: center; gap: 10px;
            padding: 13px 22px; border-radius: var(--radius-pill);
            background: var(--deep-navy);
            color: #fff; font-weight: 600; font-size: 14px;
            box-shadow: 0 16px 36px rgba(0,51,102,0.30), inset 0 1px 0 rgba(255,255,255,0.08);
            transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
            opacity: 0; pointer-events: none; transform: translateY(20px) scale(0.92);
        }
        .float-cta.is-visible { opacity: 1; pointer-events: auto; transform: none; }
        .float-cta:hover { transform: translateY(-2px); color: #fff; background: linear-gradient(135deg, var(--deep-navy), #1A4D85); box-shadow: 0 22px 48px rgba(0,51,102,0.40); }
        .float-cta .ring {
            position: absolute; inset: -4px; border-radius: var(--radius-pill);
            border: 2px solid rgba(154,205,50,0.42); animation: floatPulse 2.6s ease-in-out infinite;
        }
        @keyframes floatPulse { 0%, 100% { transform: scale(1); opacity: 0.45; } 50% { transform: scale(1.06); opacity: 0; } }

        /* ================== Saved articles drawer + FAB ================== */
        .saved-fab {
            position: fixed; right: 22px; bottom: 80px; z-index: 92;
            width: 48px; height: 48px; border-radius: 50%;
            background: #fff; color: var(--text);
            display: inline-flex; align-items: center; justify-content: center;
            box-shadow: 0 12px 28px rgba(0,0,0,0.18), 0 0 0 1px var(--border-light);
            transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
        }
        .saved-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(0,0,0,0.24); }
        .saved-fab svg { width: 20px; height: 20px; }
        .saved-fab__count {
            position: absolute; top: -4px; right: -4px;
            min-width: 22px; height: 22px; padding: 0 6px;
            border-radius: 999px;
            background: var(--lime); color: var(--deep-navy);
            font-family: var(--font-mono); font-size: 11px; font-weight: 700;
            display: inline-flex; align-items: center; justify-content: center;
            box-shadow: 0 4px 10px rgba(154,205,50,0.50);
            animation: countPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
        }
        @keyframes countPop {
            0% { transform: scale(0); }
            60% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        html[data-theme="dark"] .saved-fab { background: var(--bg-alt); color: #fff; box-shadow: 0 12px 28px rgba(0,0,0,0.40), 0 0 0 1px var(--border-light); }

        .saved-drawer {
            position: fixed; inset: 0; z-index: 240;
            overflow: hidden;
            opacity: 0; pointer-events: none;
            transition: opacity 0.28s ease;
        }
        .saved-drawer.is-open { opacity: 1; pointer-events: auto; }
        .saved-drawer__backdrop {
            position: absolute; inset: 0;
            background: rgba(10,22,40,0.40);
            backdrop-filter: blur(8px) saturate(140%);
            -webkit-backdrop-filter: blur(8px) saturate(140%);
        }
        .saved-drawer__panel {
            position: absolute; top: 0; right: 0; bottom: 0;
            width: min(440px, 100vw);
            background: var(--bg);
            border-left: 1px solid var(--border-light);
            display: flex; flex-direction: column;
            transform: translateX(20px);
            transition: transform 0.32s cubic-bezier(0.2,0.8,0.2,1);
            box-shadow: -30px 0 80px rgba(0,0,0,0.16);
        }
        .saved-drawer.is-open .saved-drawer__panel { transform: translateX(0); }
        .saved-drawer__header {
            padding: 24px 24px 16px; border-bottom: 1px solid var(--border-soft);
            display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
        }
        .saved-drawer__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: 22px; letter-spacing: -0.012em; color: var(--text);
            margin-top: 8px;
        }
        .saved-drawer__close {
            width: 36px; height: 36px; border-radius: 50%;
            font-size: 24px; color: var(--text-tertiary);
            display: inline-flex; align-items: center; justify-content: center;
            transition: background var(--transition), color var(--transition);
        }
        .saved-drawer__close:hover { background: var(--bg-alt); color: var(--text); }
        .saved-drawer__body {
            flex: 1; overflow-y: auto; padding: 16px 24px 24px;
            display: flex; flex-direction: column; gap: 14px;
        }
        .saved-drawer__empty {
            padding: 60px 12px; text-align: center; color: var(--text-tertiary);
            display: flex; flex-direction: column; gap: 14px; align-items: center;
        }
        .saved-drawer__empty-icon {
            width: 56px; height: 56px; border-radius: 50%;
            background: var(--bg-alt); display: inline-flex; align-items: center; justify-content: center;
            color: var(--text-muted);
        }
        .saved-drawer__empty-icon svg { width: 22px; height: 22px; }
        .saved-drawer__empty-title { font-family: var(--font-editorial); font-style: italic; font-size: 19px; color: var(--text-secondary); }
        .saved-item {
            display: grid; grid-template-columns: 60px 1fr auto;
            gap: 14px; align-items: center;
            padding: 12px; border-radius: var(--radius-lg);
            background: var(--bg-alt); border: 1px solid var(--border-soft);
            transition: transform var(--transition), border-color var(--transition);
        }
        .saved-item:hover { transform: translateX(-3px); border-color: var(--border); }
        .saved-item__thumb {
            width: 60px; height: 48px; border-radius: 8px; overflow: hidden;
            background: linear-gradient(135deg, var(--bg-alt), var(--bg-cream));
            flex-shrink: 0;
        }
        .saved-item__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .saved-item__body { min-width: 0; }
        .saved-item__title {
            font-size: 14px; font-weight: 500; line-height: 1.32; color: var(--text);
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
            overflow: hidden; text-overflow: ellipsis;
        }
        .saved-item__meta {
            margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px;
            color: var(--text-tertiary); letter-spacing: 0.04em;
        }
        .saved-item__remove {
            width: 30px; height: 30px; border-radius: 50%;
            color: var(--text-tertiary); flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            transition: background var(--transition), color var(--transition);
        }
        .saved-item__remove:hover { background: rgba(255,179,71,0.14); color: var(--energy-deep); }
        .saved-item__remove svg { width: 14px; height: 14px; }

        .saved-drawer__footer {
            padding: 14px 24px 20px; border-top: 1px solid var(--border-soft);
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
        }
        .saved-drawer__clear {
            font-size: 12px; font-weight: 500; color: var(--text-tertiary);
            padding: 6px 12px; border-radius: var(--radius-pill);
            transition: background var(--transition), color var(--transition);
        }
        .saved-drawer__clear:hover { background: rgba(255,179,71,0.14); color: var(--energy-deep); }
        .saved-drawer__hint {
            font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); letter-spacing: 0.04em;
        }

        /* ================== Keyboard shortcuts overlay ================== */
        .shortcuts-hint {
            position: fixed; left: 22px; bottom: 22px; z-index: 90;
            width: 36px; height: 36px; border-radius: 50%;
            display: inline-flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.78); backdrop-filter: blur(10px);
            border: 1px solid var(--border-light);
            color: var(--text-tertiary);
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: transform var(--transition), background var(--transition), color var(--transition);
            opacity: 0;
            pointer-events: none;
        }
        .shortcuts-hint.is-visible { opacity: 1; pointer-events: auto; }
        .shortcuts-hint:hover { transform: translateY(-2px); color: var(--text); background: #fff; }
        .shortcuts-hint kbd {
            font-family: var(--font-mono); font-size: 13px; font-weight: 600;
            color: inherit; background: none; padding: 0;
        }
        html[data-theme="dark"] .shortcuts-hint { background: rgba(20,37,63,0.78); color: var(--text-tertiary); border-color: var(--border-light); }
        html[data-theme="dark"] .shortcuts-hint:hover { background: var(--bg-alt); color: var(--text); }
        @media (max-width: 1024px), (pointer: coarse) { .shortcuts-hint { display: none; } }

        .shortcuts-overlay {
            position: fixed; inset: 0; z-index: 260;
            opacity: 0; pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .shortcuts-overlay.is-open { opacity: 1; pointer-events: auto; }
        .shortcuts-overlay__backdrop {
            position: absolute; inset: 0;
            background: rgba(10,22,40,0.42);
            backdrop-filter: blur(14px) saturate(140%);
            -webkit-backdrop-filter: blur(14px) saturate(140%);
        }
        .shortcuts-overlay__panel {
            position: absolute; left: 50%; top: 50%;
            transform: translate(-50%, -50%) scale(0.96);
            width: min(640px, calc(100vw - 32px));
            background: var(--bg);
            border: 1px solid var(--border-light);
            border-radius: var(--radius-2xl);
            padding: 24px 28px 22px;
            box-shadow: 0 40px 90px rgba(0,0,0,0.28);
            transition: transform 0.36s cubic-bezier(0.2,0.8,0.2,1);
        }
        .shortcuts-overlay.is-open .shortcuts-overlay__panel { transform: translate(-50%, -50%) scale(1); }
        .shortcuts-overlay__header {
            display: flex; align-items: flex-start; justify-content: space-between;
            gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft);
            margin-bottom: 18px;
        }
        .shortcuts-overlay__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.014em;
            margin-top: 8px; color: var(--text); text-wrap: balance;
        }
        .shortcuts-overlay__title em {
            font-family: var(--font-editorial); font-style: italic; font-weight: 500;
            background: linear-gradient(135deg, var(--apple-blue), var(--apple-blue-bright));
            -webkit-background-clip: text; background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .shortcuts-overlay__close {
            width: 36px; height: 36px; border-radius: 50%;
            font-size: 22px; color: var(--text-tertiary);
            display: inline-flex; align-items: center; justify-content: center;
            transition: background var(--transition), color var(--transition);
        }
        .shortcuts-overlay__close:hover { background: var(--bg-alt); color: var(--text); }
        .shortcuts-overlay__grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 22px 36px;
        }
        .shortcuts-group__title {
            font-family: var(--font-mono); font-size: 11px; font-weight: 500;
            letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary);
            margin-bottom: 10px;
        }
        .shortcut {
            display: flex; align-items: center; justify-content: space-between;
            gap: 12px; padding: 8px 0;
            border-bottom: 1px dashed var(--border-soft);
        }
        .shortcut:last-child { border-bottom: 0; }
        .shortcut__keys { display: inline-flex; gap: 4px; flex-shrink: 0; }
        .shortcut__keys kbd {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 24px; height: 24px; padding: 0 7px;
            font-family: var(--font-mono); font-size: 11.5px; font-weight: 500;
            color: var(--text); background: var(--bg-alt);
            border: 1px solid var(--border-light);
            border-bottom-width: 2px;
            border-radius: 6px;
            box-shadow: 0 1px 0 var(--border);
        }
        html[data-theme="dark"] .shortcut__keys kbd { color: var(--text); background: rgba(255,255,255,0.06); border-color: var(--border); border-bottom-color: var(--border-light); }
        .shortcut__desc { font-size: 14px; color: var(--text-secondary); text-align: right; }
        .shortcuts-overlay__footer {
            margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft);
            font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary);
            letter-spacing: 0.04em;
        }
        .shortcuts-overlay__footer kbd {
            font-family: inherit; font-size: 10.5px; font-weight: 500;
            color: var(--text-secondary); background: var(--bg-alt);
            padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border-light);
        }

        @media (max-width: 640px) {
            .shortcuts-overlay__grid { grid-template-columns: 1fr; gap: 18px; }
        }

        /* ================== Cursor follower (subtle) ================== */
        .cursor-follower {
            position: fixed; top: 0; left: 0; width: 8px; height: 8px;
            border-radius: 50%; background: var(--apple-blue);
            pointer-events: none; z-index: 9998;
            transform: translate3d(-50%, -50%, 0);
            opacity: 0; transition: opacity 0.4s ease, width 0.32s cubic-bezier(0.2,0.8,0.2,1), height 0.32s cubic-bezier(0.2,0.8,0.2,1), background 0.3s ease;
            mix-blend-mode: difference;
            will-change: transform;
        }
        .cursor-follower.is-active { opacity: 0.5; }
        .cursor-follower.is-link { width: 36px; height: 36px; background: var(--lime); opacity: 0.32; mix-blend-mode: multiply; }
        @media (max-width: 1024px), (pointer: coarse) { .cursor-follower { display: none; } }
        @media (prefers-reduced-motion: reduce) { .cursor-follower { display: none; } }

        /* ================== Responsive ================== */
        @media (max-width: 1700px) {
            .nav { display: none; }
            .nav-toggle { display: inline-flex; }
        }
        @media (max-width: 960px) {
            .hero-grid, .zone-grid { grid-template-columns: 1fr; }
            .picks-grid, .mv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
            .cta-banner__inner { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
            .footer-brand { grid-column: 1 / -1; max-width: none; }
        }
        @media (max-width: 640px) {
            .site-header__inner { gap: 8px; }
            .site-header__inner > .site-header__cta { display: none; }
            .picks-grid, .mv-grid { grid-template-columns: 1fr; }
            .hero-side__item { grid-template-columns: 1fr 90px; }
            .hero-side__thumb { width: 90px; height: 70px; }
            .zone-list__item { grid-template-columns: 1fr 100px; }
            .zone-list__thumb { width: 100px; height: 72px; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .brand__chip { display: none; }
            .float-cta { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); min-height: 48px; padding: 10px 14px; font-size: 13px; }
            .saved-fab { right: max(14px, env(safe-area-inset-right, 0px)); bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
            body:has(input:focus, textarea:focus, select:focus, [contenteditable="true"]:focus) :is(.float-cta, .saved-fab) { opacity: 0; pointer-events: none; }
            .hero__title { font-size: clamp(34px, 11vw, 60px); line-height: 1.02; }
            .hero__lede { font-size: 16px; }
            .hero__meta { font-size: 11px; gap: 12px; }
            .filter-pills { gap: 6px; }
            .filter-pill { padding: 7px 12px; font-size: 12.5px; }
            .hero-featured__title { font-size: clamp(22px, 6vw, 28px); }
            .theme-week { padding: clamp(20px, 4vw, 28px); }
            .theme-week__title { font-size: clamp(20px, 5vw, 26px); }
            .theme-week__article { font-size: clamp(22px, 6vw, 28px); }
            .newsletter { padding: clamp(28px, 6vw, 40px) clamp(22px, 5vw, 36px); }
            .newsletter__title { font-size: clamp(24px, 7vw, 32px); }
            .cta-banner__title { font-size: clamp(24px, 7vw, 34px); }
            .section-title { font-size: clamp(24px, 7vw, 32px); }
            .breaking__inner { gap: 12px; }
            .breaking__tag { padding: 5px 10px; font-size: 10px; }
            .search-overlay__panel { width: calc(100vw - 16px); padding: 12px 12px 16px; }
            .search-form input { font-size: 17px; }
            .search-form__submit { padding: 8px 14px; font-size: 12px; }
            .save-toast { left: 14px; right: 14px; transform: none; bottom: 76px; }
            .save-toast.is-visible { transform: none; }
            .author-stack__avatar { width: 22px; height: 22px; font-size: 10px; }
        }

        @media (max-width: 420px) {
            .hero__title { font-size: clamp(30px, 10vw, 44px); }
            .hero__masthead { gap: 14px; }
            .hero__meta span:first-child::before { display: inline-block; }
            .hero__meta { flex-direction: column; gap: 4px; }
            .hero__meta span::before { display: none; }
            .hero-featured__body { padding: 22px; gap: 12px; }
            .stream-card__body, .pick-card__body { padding: 16px; }
            .filter-pills { padding: 0 4px; }
        }

        /* ================== Dark mode ================== */
        html[data-theme="dark"] {
            --text:           #f5f5f7;
            --text-secondary: #c7c7cf;
            --text-tertiary:  #9b9ba6;
            --text-muted:     #6e6e7a;
            --bg:             #0a1628;
            --bg-alt:         #14253f;
            --bg-soft:        #0d1c33;
            --bg-cream:       #14213a;
            --border:         #2d3a52;
            --border-light:   #1f2b41;
            --border-soft:    #182238;
            --apple-blue-soft: rgba(41,151,255,0.12);
            --ink:            #060e1c;
        }
        html[data-theme="dark"] body { background: var(--bg); color: var(--text); }
        html[data-theme="dark"] .site-header {
            background: rgba(10,22,40,0.72);
            border-bottom-color: transparent;
        }
        html[data-theme="dark"] .site-header.is-scrolled {
            background: rgba(10,22,40,0.92);
            border-bottom-color: var(--border-light);
        }
        html[data-theme="dark"] .brand__mark { background: linear-gradient(135deg, #fff, #d2d2d7); color: #060e1c; }
        html[data-theme="dark"] .site-header__cta { background: #fff; color: var(--ink); }
        html[data-theme="dark"] .site-header__cta:hover { background: var(--apple-blue); color: #fff; }
        html[data-theme="dark"] .hero::before {
            background:
                radial-gradient(50% 60% at 18% 30%, rgba(154,205,50,0.18), transparent 70%),
                radial-gradient(45% 55% at 82% 25%, rgba(111,181,223,0.22), transparent 70%),
                radial-gradient(40% 60% at 55% 70%, rgba(132,189,90,0.12), transparent 70%);
        }
        html[data-theme="dark"] .hero::after {
            background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
        }
        html[data-theme="dark"] .hero__kicker { background: rgba(255,255,255,0.06); border-color: var(--border); color: var(--text-secondary); }
        html[data-theme="dark"] .filter-pill { background: rgba(255,255,255,0.05); border-color: var(--border); color: var(--text-secondary); }
        html[data-theme="dark"] .filter-pill:hover { background: rgba(255,255,255,0.10); color: var(--text); border-color: var(--border); }
        html[data-theme="dark"] .filter-pill.is-active { background: #fff; color: var(--ink); border-color: #fff; }
        html[data-theme="dark"] .hero-featured,
        html[data-theme="dark"] .zone-lead,
        html[data-theme="dark"] .stream-card,
        html[data-theme="dark"] .pick-card { background: var(--bg-alt); border-color: var(--border-light); }
        html[data-theme="dark"] .hero-featured:hover,
        html[data-theme="dark"] .zone-lead:hover,
        html[data-theme="dark"] .stream-card:hover,
        html[data-theme="dark"] .pick-card:hover { border-color: var(--border); box-shadow: 0 14px 40px rgba(0,0,0,0.40); }
        html[data-theme="dark"] .hero-featured__meta,
        html[data-theme="dark"] .zone-lead__meta,
        html[data-theme="dark"] .stream-card__meta,
        html[data-theme="dark"] .pick-card__meta,
        html[data-theme="dark"] .hero-side__item { border-color: var(--border-soft); }
        html[data-theme="dark"] .hero-side__title a:hover { color: var(--apple-blue-bright); }
        html[data-theme="dark"] .section--soft { background: var(--bg-soft); }
        html[data-theme="dark"] .section--cream { background: var(--bg-cream); }
        html[data-theme="dark"] .pull-quote {
            background: var(--bg-alt);
            border: 1px solid var(--border-light);
        }
        html[data-theme="dark"] .pull-quote::before { color: rgba(255,255,255,0.06); }
        html[data-theme="dark"] .theme-week {
            background: linear-gradient(135deg, #14253f 0%, #1a1f3f 50%, #2a1a3f 100%);
            border-color: var(--border-light);
        }
        html[data-theme="dark"] .theme-week__stamp { background: rgba(0,0,0,0.6); }
        html[data-theme="dark"] .theme-week__stamp-label { color: var(--text-tertiary); }
        html[data-theme="dark"] .theme-week__article,
        html[data-theme="dark"] .theme-week__title { color: var(--text); }
        html[data-theme="dark"] .theme-week__teaser { color: var(--text-secondary); }
        html[data-theme="dark"] .site-footer { background: var(--bg-soft); border-top: 1px solid var(--border-light); }
        html[data-theme="dark"] .footer-social a { background: rgba(255,255,255,0.06); border-color: var(--border-light); color: var(--text-secondary); }
        html[data-theme="dark"] .footer-social a:hover { background: var(--apple-blue); color: #fff; }
        html[data-theme="dark"] .footer-archive { border-color: var(--border-light); }
        html[data-theme="dark"] .footer-archive__item { border-bottom-color: var(--border-light); }
        html[data-theme="dark"] .footer-bottom { border-color: var(--border-light); }
        html[data-theme="dark"] .toc-dots { background: rgba(20,37,63,0.70); border-color: var(--border-light); }
        html[data-theme="dark"] .toc-dot { background: var(--border); }
        html[data-theme="dark"] .toc-dot:hover { background: #fff; }
        html[data-theme="dark"] .toc-dot.is-active { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.10); }
        html[data-theme="dark"] .toc-dot span { background: #fff; color: var(--ink); }
        html[data-theme="dark"] .toc-dot span::after { border-left-color: #fff; }
        html[data-theme="dark"] .breaking { background: var(--ink); border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
        html[data-theme="dark"] .search-overlay__panel { background: var(--bg-alt); border-color: var(--border); }
        html[data-theme="dark"] .search-form input { color: var(--text); }
        html[data-theme="dark"] .search-form input::placeholder { color: var(--text-tertiary); }
        html[data-theme="dark"] .search-form__submit { background: #fff; color: var(--ink); }
        html[data-theme="dark"] .search-chip { background: rgba(255,255,255,0.06); color: var(--text-secondary); }
        html[data-theme="dark"] .search-chip:hover { background: var(--apple-blue-soft); color: var(--apple-blue-bright); }
        html[data-theme="dark"] .bookmark-btn { background: rgba(20,37,63,0.86); color: var(--text-secondary); }
        html[data-theme="dark"] .bookmark-btn:hover { background: rgba(20,37,63,1); color: var(--energy); }
        html[data-theme="dark"] .empty { background: var(--bg-alt); border-color: var(--border); color: var(--text-tertiary); }
        html[data-theme="dark"] .scroll-progress { mix-blend-mode: screen; }
        html[data-theme="dark"] body::before { mix-blend-mode: overlay; opacity: 0.06; }

        /* ================== Bài giảng theo lớp (YouTube playlist) ================== */
        .class-grid {
            display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: clamp(20px, 2vw, 28px);
        }
        .class-card {
            position: relative; display: flex; flex-direction: column;
            background: var(--glass-card);
            backdrop-filter: blur(10px) saturate(160%);
            -webkit-backdrop-filter: blur(10px) saturate(160%);
            border: 1px solid var(--border-soft); border-radius: var(--radius-lg); overflow: hidden;
            transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
        }
        .class-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border); }
        .class-card__open {
            display: flex; flex-direction: column; flex: 1;
            color: inherit; text-decoration: none;
        }
        .class-card__open:hover { color: inherit; }
        .class-card__open:focus-visible { outline: 2.5px solid var(--apple-blue); outline-offset: -3px; border-radius: var(--radius-lg); }
        .class-card__media {
            position: relative; aspect-ratio: 16/9; overflow: hidden;
            background:
                radial-gradient(120% 120% at 18% 0%, var(--cc-1, rgba(154,205,50,0.34)), transparent 60%),
                radial-gradient(120% 120% at 100% 100%, var(--cc-2, rgba(111,181,223,0.42)), transparent 62%),
                linear-gradient(135deg, var(--deep-navy) 0%, #0F2A4A 100%);
        }
        .class-card__media::after {
            content: ""; position: absolute; inset: 0;
            background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.10) 1px, transparent 0);
            background-size: 22px 22px; opacity: 0.5; pointer-events: none;
        }
        .class-card__badge {
            position: absolute; top: 14px; left: 14px; z-index: 2;
            display: inline-flex; align-items: center; gap: 7px;
            font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
            letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
            padding: 6px 12px; border-radius: var(--radius-pill);
            background: rgba(0,0,0,0.34); backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.18);
        }
        .class-card__badge svg { width: 14px; height: 14px; }
        .class-card__play {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 64px; height: 64px; border-radius: 50%; z-index: 2;
            display: grid; place-items: center;
            background: rgba(255,255,255,0.94);
            box-shadow: 0 12px 30px rgba(0,0,0,0.28);
            transition: transform var(--transition), background var(--transition);
        }
        .class-card:hover .class-card__play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
        .class-card__play svg { width: 24px; height: 24px; margin-left: 3px; color: var(--deep-navy); }
        .class-card__count {
            position: absolute; bottom: 12px; right: 14px; z-index: 2;
            font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.92);
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 10px; border-radius: var(--radius-pill); background: rgba(0,0,0,0.34);
        }
        .class-card__body { padding: clamp(16px, 1.8vw, 22px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
        .class-card__kicker {
            font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
            letter-spacing: 0.14em; text-transform: uppercase; color: var(--lime-deep);
        }
        .class-card__title {
            font-family: var(--font-display); font-weight: 600;
            font-size: 18px; line-height: 1.26; letter-spacing: -0.012em; color: var(--text);
        }
        .class-card:hover .class-card__title { color: var(--apple-blue-link); }
        .class-card__teaser {
            font-size: 14px; color: var(--text-secondary); line-height: 1.55;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
        }
        .class-card__foot {
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            margin: 0 clamp(16px, 1.8vw, 22px); padding: 12px 0 clamp(14px, 1.6vw, 18px);
            border-top: 1px solid var(--border-soft);
        }
        .class-card__cta {
            display: inline-flex; align-items: center; gap: 7px;
            font-size: 13px; font-weight: 600; color: var(--deep-navy);
            transition: gap var(--transition), color var(--transition);
        }
        .class-card__cta:hover { gap: 11px; color: var(--apple-blue-link); }
        .class-card:hover .class-card__cta svg { transform: translateX(2px); }
        .class-card__cta svg { width: 15px; height: 15px; transition: transform var(--transition); }
        .class-card__group {
            display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
            font-size: 12.5px; font-weight: 500; color: var(--apple-blue-link);
            padding: 5px 10px; border-radius: var(--radius-pill); background: var(--apple-blue-soft);
            transition: background var(--transition), transform var(--transition);
        }
        .class-card__group:hover { background: rgba(44,115,200,0.16); transform: translateY(-1px); color: var(--apple-blue-link); }
        .class-card__group svg { width: 14px; height: 14px; }

        @media (max-width: 920px) { .class-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (max-width: 600px) { .class-grid { grid-template-columns: 1fr; } }

        /* ================== Print stylesheet ================== */
        @media print {
            :root { --bg: #fff; --text: #000; }
            body { background: #fff; color: #000; font-size: 12pt; }
            .site-header, .nav-toggle, .scroll-progress, .toc-dots, .float-cta,
            .filter-pills, .breaking, .save-toast, .search-overlay, .mobile-nav,
            .bookmark-btn, .cta-banner, .newsletter, .float-cta, .skip-link,
            .header-search-btn, .site-header__cta { display: none !important; }
            .hero { padding: 0 0 24pt; }
            .hero::before, .hero::after, .hero-featured__media::after { display: none; }
            .section { padding: 18pt 0; page-break-inside: avoid; }
            .stream-grid { grid-template-columns: repeat(2, 1fr); }
            .picks-grid { grid-template-columns: repeat(2, 1fr); }
            .hero-grid, .theme-week, .zone-grid { grid-template-columns: 1fr; }
            .hero__title em, .section-title em, .hero-featured__title, .theme-week em,
            .newsletter em, .cta-banner em, .most-viewed em {
                color: #000 !important; background: none !important; -webkit-text-fill-color: initial !important;
            }
            img[data-cover-key] { display: none; }
            .stream-card, .pick-card { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
            .site-footer { background: none; padding: 12pt 0; border-top: 1px solid #ccc; }
            a { color: #000; text-decoration: underline; }
            a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10pt; color: #666; }
            .pull-quote { background: none; padding: 12pt; border: 1px solid #ccc; }
            .pull-quote p em { color: #000 !important; background: none !important; -webkit-text-fill-color: initial !important; }
        }