/* Homepage only: Cyberpunk Deep Navy (Đồng bộ Desktop App v3.1.3 & Studio) */
:root {
    color-scheme: dark;
    --bg: #03050a;
    --panel: rgba(13, 20, 38, 0.85);
    --ink: #FFFFFF;
    --text: #FFFFFF;
    --muted: #94A3B8;
    --line: rgba(56, 189, 248, 0.22);
    --accent: #00D4FF;
    --accent-dark: #0284c7;
    --orange: #00FFA3;
    --font: 'Be Vietnam Pro', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body {
    margin: 0;
    background: var(--bg);
    background-color: #03050a;
    background-image: 
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        radial-gradient(circle at 20% 25%, rgba(122, 92, 255, 0.12) 0%, transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(0, 212, 255, 0.12) 0%, transparent 45%);
    background-size: 40px 40px, 40px 40px, 100% 100%, 100% 100%;
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { color: #fff; background: rgba(0, 212, 255, 0.4); }
:focus-visible { outline: 2px solid #00D4FF; outline-offset: 4px; }
.container { width: min(1220px, calc(100% - 80px)); margin-inline: auto; }

.site-header {
    height: 86px;
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgba(56, 189, 248, 0.22);
    background: rgba(6, 11, 25, 0.94);
    backdrop-filter: blur(18px);
}
.header-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.header-left {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: max-content;
}
.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
}
.header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    flex: 0 0 auto;
}
.studio-pro-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 20px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 22px rgba(0, 212, 255, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
    color: #FFFFFF !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    overflow: hidden;
}
.studio-pro-btn:before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    transition: left .6s ease;
}
.studio-pro-btn:hover:before {
    left: 130%;
}
.studio-pro-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 32px rgba(0, 212, 255, 0.7), 0 0 45px rgba(122, 92, 255, 0.45);
    filter: brightness(1.1);
}
.studio-pro-btn:active {
    transform: translateY(0) scale(0.98);
}
.studio-pro-btn .pro-sparkle {
    font-size: 14px;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
    animation: proSparklePulse 2.4s ease-in-out infinite;
}
.studio-pro-btn .pro-text {
    font-weight: 700;
    letter-spacing: -0.2px;
}
.studio-pro-btn .arrow {
    font-family: system-ui;
    font-size: 15px;
    line-height: 1;
    transition: transform .18s ease;
}
.studio-pro-btn:hover .arrow {
    transform: translate(2px, -2px);
}
@keyframes proSparklePulse {
    0%, 100% { transform: scale(1); opacity: 0.95; }
    50% { transform: scale(1.25) rotate(8deg); opacity: 1; filter: drop-shadow(0 0 8px #00FFA3); }
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 10px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(15, 23, 42, 0.75);
    color: #00D4FF;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    flex-shrink: 0;
}
.theme-toggle-btn:hover {
    background: rgba(20, 30, 55, 0.95);
    border-color: #00D4FF;
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.35);
    transform: translateY(-1px);
}
.theme-toggle-btn:active {
    transform: scale(0.94);
}
.theme-toggle-btn .theme-icon {
    display: inline-block;
    transition: transform .3s ease;
    user-select: none;
}
.theme-toggle-btn:hover .theme-icon {
    transform: rotate(15deg) scale(1.1);
}

.mobile-nav .mobile-nav-pro {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(122, 92, 255, 0.15) 100%);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 8px;
    color: #00FFA3 !important;
    font-weight: 700;
    text-align: center;
    padding: 10px 14px !important;
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.2);
}

.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand img { width: 39px; height: 39px; padding: 0; object-fit: contain; background: transparent; border-radius: 0; }
.brand-name { font-size: 14px; font-weight: 700; letter-spacing: -.45px; color: #FFFFFF; }
.brand-name b {
    display: inline-block;
    color: #00FFA3;
    background: rgba(0, 255, 163, 0.12);
    border: 1px solid #00FFA3;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 10px;
    margin-left: 3px;
    vertical-align: 1px;
    text-shadow: 0 0 8px rgba(0, 255, 163, 0.5);
}
.brand-sub { display: block; margin-top: 2px; font-size: 8px; font-weight: 500; letter-spacing: 1.1px; color: var(--muted); }
.desktop-nav { display: flex; gap: 29px; font-size: 12px; color: #94A3B8; }
.desktop-nav a { position: relative; padding-block: 7px; transition: color .2s; }
.desktop-nav a:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #00D4FF; box-shadow: 0 0 8px #00D4FF; transition: width .2s; }
.desktop-nav a:hover { color: #00D4FF; }
.desktop-nav a:hover:after { width: 100%; }
.header-actions { display: flex; align-items: center; gap: 23px; font-size: 12px; }
.login-link { color: #cbd5e1; }
.login-link:hover { color: #00D4FF; }

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 50px;
    padding: 12px 22px;
    border: 1px solid rgba(56, 189, 248, 0.5);
    border-radius: 12px;
    background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.35);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    transition: transform .18s, box-shadow .18s, filter .18s;
}
.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px rgba(0, 212, 255, 0.55);
    filter: brightness(1.1);
}
.button.small {
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 9px;
    font-size: 12px;
    gap: 8px;
}
.button.secondary {
    background: rgba(15, 23, 42, 0.7);
    color: #cbd5e1;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: none;
}
.button.secondary:hover {
    background: rgba(20, 30, 55, 0.9);
    border-color: #00D4FF;
    color: #00D4FF;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.25);
}
.arrow { font-family: system-ui; font-size: 18px; line-height: 1; }
.menu-toggle { display: none; border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 8px; color: #FFFFFF; background: rgba(15, 23, 42, 0.6); padding: 6px 11px; }
.mobile-nav { display: none; }

.hero { position: relative; overflow: hidden; padding: 50px 0 0; }
.hero:before {
    content: '';
    position: absolute;
    pointer-events: none;
    width: 720px;
    height: 720px;
    background: radial-gradient(ellipse, rgba(0, 212, 255, 0.12), transparent 65%);
    right: -200px;
    top: -200px;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.03fr .97fr; gap: 46px; align-items: center; }
.hero-content { padding: 23px 0 35px; }
.eyebrow { display: flex; gap: 9px; align-items: center; color: #00D4FF; font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; }
.hero-content > .eyebrow {
    display: inline-flex;
    padding: 7px 14px;
    border: 1px solid rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.08);
    border-radius: 50px;
    font-size: 9px;
    letter-spacing: 1.15px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
}
.status-dot { width: 6px; height: 6px; background: #00FFA3; border-radius: 50%; box-shadow: 0 0 8px #00FFA3; }
.hero h1 { font-size: clamp(43px, 4.5vw, 63px); font-weight: 700; letter-spacing: -2.9px; line-height: 1.22; margin: 25px 0; color: #FFFFFF; }
.hero h1 span {
    background: linear-gradient(135deg, #FFFFFF 0%, #00D4FF 50%, #7A5CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 25px rgba(0, 212, 255, 0.4);
    position: relative;
    display: inline-block;
}
.hero h1 span:after {
    content: '';
    position: absolute;
    left: 1%;
    right: 0;
    bottom: -5px;
    height: 9px;
    border-top: 3px solid #00FFA3;
    border-radius: 50%;
    transform: rotate(-1.5deg);
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.6);
}
.hero-copy { font-size: 15px; color: #94A3B8; max-width: 460px; line-height: 1.95; margin: 0; }
.hero-copy strong { font-weight: 600; color: #FFFFFF; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-actions .button.secondary { border: 1px solid rgba(56, 189, 248, 0.3); gap: 10px; padding-inline: 18px; }
.hero-actions .button.secondary > span { font-size: 20px; color: #00D4FF; }
.hero-note { display: flex; align-items: center; gap: 7px; color: #94A3B8; font-size: 10px; margin: 17px 0 0; }
.hero-note b { font-weight: 700; color: #00FFA3; text-shadow: 0 0 8px rgba(0, 255, 163, 0.4); }
.check { color: #00FFA3; margin-right: 5px; font-weight: 700; }
.hero-benefits { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(56, 189, 248, 0.2); color: #94A3B8; font-size: 10px; }

.hero-visual { position: relative; isolation: isolate; min-height: 585px; display: flex; align-items: center; justify-content: center; padding: 25px 30px; }
.hero-visual:before {
    content: '';
    position: absolute;
    inset: 14px 0;
    z-index: -2;
    background: radial-gradient(circle, rgba(122, 92, 255, 0.15), transparent 70%);
    border-radius: 160px 160px 110px 110px;
    transform: rotate(-4deg);
}
.hero-visual:after {
    content: '';
    position: absolute;
    width: 410px;
    height: 410px;
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 50%;
    z-index: -1;
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
}
.visual-asterisk { position: absolute; top: 17px; right: 30px; font-family: Georgia, serif; color: #00FFA3; font-size: 100px; line-height: 1; transform: rotate(14deg); opacity: 0.25; }
.visual-side-label { position: absolute; left: 20px; top: 125px; writing-mode: vertical-rl; transform: rotate(180deg); color: #7A5CFF; font-size: 9px; letter-spacing: 2.8px; font-weight: 700; }
.visual-language {
    position: absolute;
    z-index: 3;
    top: 124px;
    right: -5px;
    width: 161px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 212, 255, 0.15);
    border-radius: 15px;
    background: rgba(13, 20, 38, 0.95);
    padding: 13px 16px;
    transform: rotate(6deg);
    backdrop-filter: blur(12px);
}
.visual-language small { display: block; color: #94A3B8; font-size: 8px; letter-spacing: .4px; font-weight: 600; }
.visual-language strong { font-size: 13px; font-weight: 700; color: #00D4FF; white-space: nowrap; text-shadow: 0 0 8px rgba(0, 212, 255, 0.4); }
.visual-language span { margin-inline: 9px; color: #7A5CFF; }
.visual-caption { position: absolute; bottom: 20px; right: 28px; font-size: 9px; letter-spacing: 1.3px; color: #00FFA3; font-weight: 700; }

.demo-shell {
    width: 280px;
    flex-shrink: 0;
    background: rgba(13, 20, 38, 0.92);
    padding: 8px;
    border: 1.5px solid rgba(56, 189, 248, 0.35);
    border-radius: 24px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 35px rgba(0, 212, 255, 0.2);
    transform: rotate(-2deg);
    backdrop-filter: blur(16px);
}
.demo-toolbar { display: flex; flex-direction: column; gap: 9px; padding: 8px 5px 11px; }
.demo-title { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 9px; color: #94A3B8; font-weight: 600; }
.demo-title svg { width: 13px; height: 13px; color: #00D4FF; }
.demo-switch { display: flex; flex-shrink: 0; gap: 3px; background: rgba(6, 11, 25, 0.85); padding: 4px; border-radius: 9px; border: 1px solid rgba(56, 189, 248, 0.2); }
.demo-switch button { white-space: nowrap; flex: 1; border: 0; background: transparent; color: #94A3B8; border-radius: 6px; font-size: 9px; min-height: 29px; padding: 5px 10px; font-weight: 600; }
.demo-switch button[aria-pressed=true] { background: linear-gradient(135deg, #00D4FF, #7A5CFF); color: #FFFFFF; font-weight: 700; box-shadow: 0 0 12px rgba(0, 212, 255, 0.4); }
.video-stage { position: relative; background: #03050a; aspect-ratio: 9/13; overflow: hidden; border-radius: 15px; border: 1px solid rgba(56, 189, 248, 0.2); }
.video-stage video { width: 100%; height: 100%; object-fit: cover; }
.video-stage:after { content: ''; position: absolute; inset: 65% 0 0; pointer-events: none; background: linear-gradient(transparent, rgba(3, 5, 10, 0.85)); }
.video-caption { position: absolute; left: 10px; right: 10px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.caption-tag { color: #FFFFFF; font-size: 7px; letter-spacing: 1px; font-weight: 700; text-shadow: 0 0 8px rgba(0,0,0,0.8); }
.sound-button {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: rgba(10, 16, 32, 0.95);
    border: 1px solid #00D4FF;
    border-radius: 30px;
    padding: 9px 16px;
    color: #00D4FF;
    font-size: 10px;
    font-weight: 700;
    min-height: 35px;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}
.sound-button svg { width: 14px; height: 14px; }
.demo-footer { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 13px 4px 5px; }
.voice-info { display: flex; gap: 7px; align-items: center; }
.voice-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; background: rgba(0, 212, 255, 0.15); border: 1px solid rgba(0, 212, 255, 0.35); color: #00D4FF; display: grid; place-items: center; box-shadow: 0 0 10px rgba(0, 212, 255, 0.2); }
.voice-icon svg { width: 14px; height: 14px; }
.voice-info strong { display: block; font-size: 8px; color: #FFFFFF; font-weight: 700; }
.voice-info small { display: block; font-size: 6px; color: #94A3B8; margin-top: 2px; }
.wave {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 65px;
    width: 124px;
    left: -63px;
    bottom: 74px;
    border-radius: 14px;
    border: 1px solid rgba(56, 189, 248, 0.35);
    background: rgba(13, 20, 38, 0.95);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 212, 255, 0.15);
    transform: rotate(5deg);
    backdrop-filter: blur(12px);
}
.wave i { width: 4px; height: calc(var(--height) * 1.3); background: #00D4FF; border-radius: 5px; box-shadow: 0 0 6px #00D4FF; }
.wave i:nth-child(3n) { background: #7A5CFF; box-shadow: 0 0 6px #7A5CFF; }
.wave i:nth-child(4n) { background: #00FFA3; box-shadow: 0 0 6px #00FFA3; }
#btnHeroPlay { color: #00D4FF; font-size: 16px; width: 27px; height: 27px; justify-content: center; }
.demo-floating {
    position: absolute;
    z-index: 3;
    bottom: -17px;
    right: -30px;
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 8px;
    background: rgba(13, 20, 38, 0.95);
    color: #00FFA3;
    border: 1px solid rgba(0, 255, 163, 0.4);
    border-radius: 50px;
    padding: 7px 13px;
    transform: rotate(3deg);
    box-shadow: 0 0 15px rgba(0, 255, 163, 0.2);
    font-weight: 700;
}
.demo-floating span { color: #00FFA3; }
.media-error { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; text-align: center; padding: 25px; background: #0A0F1E; color: #94A3B8; font-size: 11px; }
.media-error[hidden] { display: none; }
.media-error strong { color: #fff; font-size: 15px; display: block; margin-bottom: 8px; }
.media-error a { color: #00D4FF; margin-top: 12px; }

.format-strip { margin-top: 47px; border-top: 1px solid rgba(56, 189, 248, 0.2); padding: 25px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.format-strip > span { color: #94A3B8; font-size: 10px; }
.format-list { display: flex; align-items: center; gap: 40px; color: #cbd5e1; font-size: 15px; font-weight: 600; letter-spacing: -.5px; }
.format-icon { color: #00D4FF; font-size: 19px; margin-right: 7px; font-family: system-ui; }

.section { padding: 82px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 38px; margin-bottom: 35px; }
.section-heading h2 { font-size: 34px; font-weight: 700; line-height: 1.4; letter-spacing: -1.4px; margin: 13px 0 0; color: #FFFFFF; }
.section-heading p { color: #94A3B8; max-width: 350px; font-size: 13px; line-height: 1.9; margin: 0 0 3px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #00D4FF; font-size: 12px; font-weight: 600; }
.text-link:hover { color: #38bdf8; text-shadow: 0 0 8px rgba(0, 212, 255, 0.5); }

.demo-section { background: #060b19; color: #FFFFFF; position: relative; overflow: hidden; border-top: 1px solid rgba(56, 189, 248, 0.18); border-bottom: 1px solid rgba(56, 189, 248, 0.18); }
.demo-section:before { content: '↗'; font-family: system-ui; color: rgba(0, 212, 255, 0.03); font-size: 500px; line-height: 1; position: absolute; right: -40px; top: -90px; pointer-events: none; }
.demo-section .container { position: relative; }
.demo-section .eyebrow { color: #00D4FF; }
.demo-section .section-heading p { color: #94A3B8; }
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 25px; }
.category-tabs button { font-size: 11px; border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 50px; padding: 9px 17px; color: #cbd5e1; background: rgba(13, 20, 38, 0.7); font-weight: 600; }
.category-tabs button[aria-pressed=true] { color: #FFFFFF; background: linear-gradient(135deg, #00D4FF, #7A5CFF); border-color: #00D4FF; box-shadow: 0 0 16px rgba(0, 212, 255, 0.35); font-weight: 700; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px; }
.compare-card { background: rgba(13, 20, 38, 0.85); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 17px; overflow: hidden; }
.compare-card.after { background: rgba(20, 25, 50, 0.85); border-color: rgba(122, 92, 255, 0.5); box-shadow: 0 0 25px rgba(122, 92, 255, 0.2); }
.compare-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; font-size: 11px; background: rgba(10, 15, 30, 0.9); color: #FFFFFF; border-bottom: 1px solid rgba(56, 189, 248, 0.18); }
.compare-top strong { font-weight: 700; color: #FFFFFF; }
.compare-top span { font-size: 10px; color: #94A3B8; }
.compare-card.after .compare-top strong { color: #00FFA3; }
.compare-top .check { color: #00FFA3; }
.compare-stage { position: relative; aspect-ratio: 16/9; background: #03050a; }
.compare-stage video { height: 100%; width: 100%; object-fit: contain; }
.compare-card > p { margin: 0; padding: 15px 20px; font-size: 11px; color: #94A3B8; background: rgba(10, 15, 30, 0.9); border-top: 1px solid rgba(56, 189, 248, 0.15); }
.section-footnote { color: #94A3B8; font-size: 10px; line-height: 1.85; margin: 18px 0 0; }
.demo-section .section-footnote { color: #94A3B8; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step { border-top: 1px solid rgba(56, 189, 248, 0.25); position: relative; padding: 26px 22px 0 0; }
.step-number { display: inline-block; color: #00D4FF; background: rgba(0, 212, 255, 0.12); border: 1px solid rgba(0, 212, 255, 0.3); padding: 5px 10px; border-radius: 7px; font-size: 9px; font-weight: 700; letter-spacing: .5px; }
.step:nth-child(2) .step-number { color: #7A5CFF; background: rgba(122, 92, 255, 0.12); border-color: rgba(122, 92, 255, 0.3); }
.step:nth-child(3) .step-number { color: #00FFA3; background: rgba(0, 255, 163, 0.12); border-color: rgba(0, 255, 163, 0.3); }
.step h3 { font-size: 17px; font-weight: 700; line-height: 1.6; letter-spacing: -.4px; margin: 20px 0 10px; color: #FFFFFF; }
.step p { font-size: 12px; color: #94A3B8; margin: 0; line-height: 1.9; }
.step-detail { display: block; font-size: 10px; color: #64748B; margin-top: 20px; }

#tinh-nang { background: #03050a; }
.feature-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 47px; }
.feature-main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
    padding: 34px;
    color: #fff;
    background: linear-gradient(135deg, rgba(13, 20, 38, 0.95) 0%, rgba(25, 20, 50, 0.95) 100%);
    border: 1.5px solid rgba(122, 92, 255, 0.4);
    box-shadow: 0 0 35px rgba(122, 92, 255, 0.2);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
}
.feature-main:before { content: 'Aa'; font-family: Georgia, serif; font-size: 230px; line-height: 1; position: absolute; right: -20px; top: 20px; transform: rotate(-15deg); color: rgba(255, 255, 255, 0.04); pointer-events: none; }
.feature-main > * { position: relative; }
.feature-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #00D4FF; background: rgba(0, 212, 255, 0.15); color: #00D4FF; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 0 15px rgba(0, 212, 255, 0.3); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-main h3 { font-size: 26px; line-height: 1.5; letter-spacing: -.75px; font-weight: 700; margin: 0 0 14px; color: #FFFFFF; }
.feature-main p { color: #cbd5e1; font-size: 12px; max-width: 410px; margin: 0; line-height: 1.9; }
.language-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.language-tags span { color: #00D4FF; border: 1px solid rgba(56, 189, 248, 0.35); background: rgba(0, 212, 255, 0.08); padding: 6px 10px; border-radius: 6px; font-size: 10px; font-weight: 600; }
.feature-list { display: flex; flex-direction: column; justify-content: space-between; }
.feature-row { display: flex; align-items: flex-start; gap: 18px; padding: 23px 0; border-bottom: 1px solid rgba(56, 189, 248, 0.18); }
.feature-row:first-child { padding-top: 7px; }
.feature-row:last-child { border: 0; padding-bottom: 7px; }
.feature-row > svg { flex-shrink: 0; width: 23px; height: 23px; color: #00D4FF; margin-top: 3px; }
.feature-row h3 { margin: 0 0 8px; font-size: 15px; font-weight: 700; letter-spacing: -.3px; color: #FFFFFF; }
.feature-row p { margin: 0; font-size: 12px; color: #94A3B8; line-height: 1.9; }
.use-cases { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 33px; align-items: center; }
.use-cases span { border: 1px solid rgba(56, 189, 248, 0.3); color: #00D4FF; background: rgba(0, 212, 255, 0.08); padding: 7px 13px; border-radius: 50px; font-size: 10px; font-weight: 600; }
.use-cases .use-label { padding-left: 0; border: 0; color: #94A3B8; background: transparent; }

.pricing-section { background: #060b19; border-top: 1px solid rgba(56, 189, 248, 0.18); border-bottom: 1px solid rgba(56, 189, 248, 0.18); }
.pricing-section .section-heading { margin-bottom: 24px; }
.pricing-intro { display: flex; gap: 10px; align-items: center; width: fit-content; padding: 9px 15px; border: 1px solid rgba(0, 212, 255, 0.35); background: rgba(0, 212, 255, 0.1); border-radius: 9px; color: #00D4FF; font-size: 11px; margin-bottom: 28px; font-weight: 600; box-shadow: 0 0 15px rgba(0, 212, 255, 0.15); }
.pricing-intro span { color: #00FFA3; font-size: 17px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.price-card {
    display: flex;
    flex-direction: column;
    padding: 25px 21px;
    background: rgba(13, 20, 38, 0.85);
    border: 1.5px solid rgba(56, 189, 248, 0.25);
    border-radius: 17px;
    position: relative;
    transition: transform .2s, box-shadow .2s;
    backdrop-filter: blur(14px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}
.price-card:hover { transform: translateY(-5px); border-color: rgba(56, 189, 248, 0.6); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 25px rgba(0, 212, 255, 0.2); }
.price-card.popular {
    background: linear-gradient(180deg, rgba(20, 25, 55, 0.95) 0%, rgba(13, 20, 38, 0.95) 100%);
    color: #fff;
    border: 2px solid #7A5CFF;
    box-shadow: 0 0 35px rgba(122, 92, 255, 0.35);
}
.popular-label {
    color: #FFFFFF;
    background: linear-gradient(135deg, #7A5CFF, #00D4FF);
    border: none;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .3px;
    border-radius: 50px;
    padding: 4px 10px;
    position: absolute;
    right: 12px;
    top: 24px;
    box-shadow: 0 0 12px rgba(122, 92, 255, 0.5);
}
.price-card h3 { margin: 0 0 25px; color: #94A3B8; font-weight: 700; font-size: 13px; }
.price-card.popular h3 { color: #c084fc; }
.price-value { font-size: 29px; font-weight: 800; line-height: 1.25; letter-spacing: -1.1px; color: #FFFFFF !important; }
.price-value small { font-size: 14px; margin-left: 3px; color: #94A3B8; font-weight: 600; }
.price-points { color: #94A3B8; margin: 12px 0 22px; font-size: 11px; }
.price-points strong { color: #00D4FF; font-weight: 800; text-shadow: 0 0 8px rgba(0, 212, 255, 0.4); }
.price-card.popular .price-points strong { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.5); }
.price-capacity { color: #00FFA3; padding-top: 20px; border-top: 1px solid rgba(56, 189, 248, 0.2); font-size: 13px; font-weight: 700; }
.price-capacity small { color: #94A3B8; font-size: 9px; font-weight: 400; margin-top: 7px; display: block; }
.price-card.popular .price-capacity { color: #00FFA3; border-color: rgba(122, 92, 255, 0.3); }
.price-card ul { margin: 19px 0 26px; padding: 0; list-style: none; color: #cbd5e1; font-size: 11px; flex: 1; }
.price-card li { margin: 10px 0; }
.price-card li:before { content: '✓'; color: #00FFA3; margin-right: 7px; font-weight: 700; }
.price-card .button { min-height: 42px; padding: 10px 8px; font-size: 11px; gap: 8px; border-radius: 8px; background: rgba(15, 23, 42, 0.9); border: 1.5px solid rgba(56, 189, 248, 0.35); color: #00D4FF; }
.price-card .button:hover { background: rgba(0, 212, 255, 0.15); border-color: #00D4FF; box-shadow: 0 0 15px rgba(0, 212, 255, 0.3); }
.price-card.popular .button { background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%) !important; color: #FFFFFF !important; border: none !important; box-shadow: 0 0 20px rgba(0, 212, 255, 0.4) !important; font-weight: 700; }
.price-card.popular .button:hover { filter: brightness(1.15); }
.price-vip { display: flex; gap: 20px; justify-content: space-between; align-items: center; border: 1px solid rgba(56, 189, 248, 0.25); background: rgba(13, 20, 38, 0.7); border-radius: 10px; padding: 17px 21px; margin-top: 18px; font-size: 11px; color: #cbd5e1; }
.price-vip strong { color: #00FFA3; font-weight: 700; }
.price-vip .text-link { font-size: 10px; flex-shrink: 0; }

.calculator { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 27px 30px; background: rgba(13, 20, 38, 0.85); border: 1.5px solid rgba(56, 189, 248, 0.25); border-radius: 14px; margin-top: 28px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.calculator h3 { font-size: 16px; margin: 0 0 7px; font-weight: 700; letter-spacing: -.3px; color: #FFFFFF; }
.calculator p { font-size: 11px; color: #94A3B8; margin: 0; }
.calc-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.calc-controls label { font-size: 10px; color: #94A3B8; }
.calc-controls select { color: #FFFFFF; background: rgba(15, 23, 42, 0.9); padding: 7px 10px; border: 1px solid rgba(56, 189, 248, 0.35); border-radius: 7px; font-weight: 600; }
.calc-check { display: flex; align-items: center; gap: 5px; }
.calc-check input { accent-color: #00D4FF; width: 15px; height: 15px; }
.calc-result { color: #00FFA3; font-size: 16px; font-weight: 800; margin-top: 13px; text-shadow: 0 0 10px rgba(0, 255, 163, 0.5); }
.calc-note { font-size: 9px; color: #94A3B8; margin-top: 5px; }

#faq { border-top: 1px solid rgba(56, 189, 248, 0.2); }
.faq-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; }
.faq-heading h2 { font-size: 34px; font-weight: 700; letter-spacing: -1.2px; line-height: 1.45; margin: 14px 0; color: #FFFFFF; }
.faq-heading p { font-size: 13px; color: #94A3B8; max-width: 290px; }
.faq-heading .text-link { margin-top: 11px; }
.faq-list details { border-bottom: 1px solid rgba(56, 189, 248, 0.18); }
.faq-list details:first-child { border-top: 1px solid rgba(56, 189, 248, 0.18); }
.faq-list details:not([open]) > :not(summary) { display: none !important; }
.faq-list summary { list-style: none; cursor: pointer; position: relative; padding: 22px 32px 22px 0; color: #FFFFFF; font-size: 13px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary:after { content: '+'; color: #00D4FF; position: absolute; right: 3px; top: 16px; font-size: 22px; font-weight: 400; text-shadow: 0 0 8px rgba(0, 212, 255, 0.5); }
.faq-list details[open] summary:after { content: '−'; }
.faq-list p { color: #94A3B8; font-size: 12px; line-height: 1.95; margin: 0; padding: 0 28px 22px 0; }

.closing { padding: 0 0 70px; }
.closing-inner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    background: linear-gradient(135deg, rgba(13, 20, 38, 0.95) 0%, rgba(20, 30, 60, 0.95) 100%);
    border: 1.5px solid rgba(0, 212, 255, 0.35);
    box-shadow: 0 0 35px rgba(0, 212, 255, 0.2);
    border-radius: 24px;
    padding: 42px;
}
.closing-inner:after { content: '✳'; font-size: 170px; color: rgba(0, 212, 255, 0.1); position: absolute; right: 210px; top: -55px; transform: rotate(15deg); opacity: .35; pointer-events: none; }
.closing-inner > * { position: relative; z-index: 1; }
.closing h2 { font-size: 25px; font-weight: 700; letter-spacing: -.7px; margin: 0 0 10px; color: #FFFFFF; }
.closing p { color: #94A3B8; font-size: 12px; margin: 0; }
.closing .button { flex-shrink: 0; background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%); border: none; box-shadow: 0 0 20px rgba(0, 212, 255, 0.4); color: #fff; }

.site-footer { background: #03050a; color: #94A3B8; padding: 37px 0 25px; border-top: 1px solid rgba(56, 189, 248, 0.2); }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.site-footer .brand-name { color: #FFFFFF; font-weight: 700; }
.site-footer .brand-name b { color: #00FFA3; background: rgba(0, 255, 163, 0.12); border: 1px solid #00FFA3; }
.site-footer .brand-sub { color: #64748B; }
.footer-links { display: flex; gap: 25px; flex-wrap: wrap; font-size: 10px; color: #94A3B8; }
.footer-links a:hover { color: #00D4FF; }
.footer-bottom { display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid rgba(56, 189, 248, 0.15); margin-top: 28px; padding-top: 20px; color: #64748B; font-size: 9px; }
.mobile-cta { display: none; }
.skip-link { position: fixed; left: 16px; top: -100px; padding: 10px 20px; color: #fff; background: var(--accent); z-index: 100; }
.skip-link:focus { top: 10px; }

@media(min-width: 1500px) { .container { width: min(1300px, calc(100% - 120px)); } .hero { padding-top: 65px; } .hero-grid { gap: 70px; } .hero h1 { font-size: 70px; } .hero-visual { min-height: 620px; } .demo-shell { width: 295px; } }
@media(max-width: 1100px) { .container { width: calc(100% - 48px); } .desktop-nav { gap: 18px; font-size: 11px; } .header-actions { gap: 12px; } .studio-pro-btn { min-height: 38px; padding: 0 16px; font-size: 12px; } .brand-name { font-size: 12px; } .brand-sub { font-size: 7px; } .hero-grid { gap: 25px; } .hero h1 { font-size: 51px; letter-spacing: -2.5px; } .hero-copy { font-size: 13px; } .hero-actions { gap: 8px; } .hero-actions .button { padding-inline: 18px; font-size: 11px; } .hero-actions .button.secondary { padding-inline: 7px; } .hero-visual { padding-inline: 15px; } .hero-benefits { gap: 11px; font-size: 9px; } .visual-language { right: -10px; width: 120px; padding: 10px 13px; } .visual-language strong { font-size: 11px; } .format-list { gap: 25px; font-size: 13px; } .section-heading h2 { font-size: 30px; } .feature-grid { gap: 30px; } .price-card { padding-inline: 16px; } .popular-label { position: static; order: -1; width: fit-content; margin: -8px 0 10px; font-size: 7px; } .price-card.popular h3 { margin-bottom: 10px; } .faq-layout { gap: 55px; } }
@media(max-width: 850px) { .desktop-nav { display: none; } .header-inner { gap: 8px; } .header-center { margin: 0; } .studio-pro-btn { min-height: 36px; padding: 0 14px; font-size: 11px; gap: 6px; } .hero h1 { font-size: 41px; letter-spacing: -1.9px; } .hero-visual { min-height: 540px; } .hero-visual:after { width: 300px; height: 300px; } .demo-shell { width: 245px; } .visual-language { right: -8px; top: 110px; width: 108px; } .visual-language strong { font-size: 10px; } .visual-asterisk { font-size: 80px; right: 10px; } .wave { width: 90px; left: -35px; height: 55px; gap: 3px; } .wave i { width: 3px; } .voice-info strong { font-size: 7px; } .voice-info small { font-size: 5.5px; } .visual-side-label { left: 6px; font-size: 8px; } .format-strip { margin-top: 35px; } .format-list { gap: 18px; font-size: 11px; } .format-strip > span { font-size: 9px; max-width: 140px; } .section { padding: 60px 0; } .section-heading h2 { font-size: 27px; } .section-heading p { font-size: 11px; max-width: 285px; } .steps { gap: 20px; } .step { padding-right: 5px; } .step h3 { font-size: 15px; } .feature-grid { gap: 25px; } .feature-main { padding: 27px; } .feature-main h3 { font-size: 23px; } .feature-row h3 { font-size: 13px; } .feature-row p { font-size: 11px; } .pricing-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .price-card { padding: 27px 24px; } .popular-label { position: absolute; top: 30px; right: 18px; margin: 0; } .price-card.popular h3 { margin-bottom: 25px; } .calculator { gap: 25px; padding: 24px; } .faq-layout { grid-template-columns: .9fr 1.1fr; gap: 35px; } .faq-heading h2 { font-size: 28px; } .faq-list summary { font-size: 12px; } .closing-inner { padding: 30px; } .closing h2 { font-size: 21px; } .closing p { font-size: 11px; } .closing .button { padding-inline: 17px; font-size: 11px; } }
@media(max-width: 600px) { .container { width: calc(100% - 36px); } .site-header { height: 72px; } .header-inner { gap: 10px; } .brand { gap: 8px; } .brand img { width: 32px; height: 32px; border-radius: 0; } .brand-name { font-size: 10px; } .brand-name b { font-size: 7px; margin-left: 2px; padding-inline: 3px; } .brand-sub { font-size: 6px; letter-spacing: .7px; } .header-actions { gap: 6px; } .header-actions .login-link { display: none; } .studio-pro-btn { min-height: 33px; padding: 0 10px; font-size: 10.5px; gap: 5px; } .studio-pro-btn .pro-sparkle { font-size: 12px; } .theme-toggle-btn { width: 33px; height: 33px; font-size: 14px; border-radius: 8px; } .header-actions .arrow { font-size: 17px; } .menu-toggle { display: block; line-height: 19px; padding: 6px 8px; } .mobile-nav.open { display: grid; grid-template-columns: 1fr 1fr; position: absolute; top: 71px; left: 0; right: 0; padding: 12px 18px; gap: 6px; border-bottom: 1px solid rgba(56, 189, 248, 0.25); background: #060b19; } .mobile-nav a { font-size: 12px; padding: 9px; color: #cbd5e1; } .hero { padding-top: 22px; } .hero-grid { grid-template-columns: 1fr; gap: 12px; } .hero-content { padding: 12px 0 15px; } .hero-content > .eyebrow { font-size: 8px; padding: 6px 10px; letter-spacing: .7px; } .hero h1 { font-size: 43px; letter-spacing: -2px; margin: 21px 0 25px; } .hero-copy { font-size: 13px; max-width: 100%; } .hero-actions { gap: 5px; margin-top: 23px; } .hero-actions .button { padding: 12px 16px; min-height: 47px; font-size: 11px; gap: 12px; } .hero-actions .button.secondary { padding-inline: 12px; font-size: 10px; gap: 8px; } .hero-note { font-size: 9px; margin-top: 14px; } .hero-benefits { margin-top: 21px; padding-top: 16px; gap: 12px; font-size: 8px; } .hero-visual { min-height: 535px; padding: 20px; margin-inline: 7px; } .hero-visual:before { inset: 15px -4px; border-radius: 120px 120px 80px 80px; } .hero-visual:after { width: 285px; height: 285px; top: 115px; } .demo-shell { width: 240px; transform: rotate(-2deg); padding: 7px; } .demo-toolbar { padding-top: 5px; gap: 7px; } .demo-title { font-size: 8px; } .demo-switch button { min-height: 26px; font-size: 8px; } .voice-info strong { font-size: 7px; } .voice-info small { font-size: 5.5px; } .visual-language { width: 104px; top: 107px; right: -3px; padding: 9px 11px; } .visual-language small { font-size: 6px; } .visual-language strong { font-size: 10px; } .visual-language span { margin-inline: 5px; } .visual-asterisk { right: 5px; top: 15px; font-size: 70px; } .visual-side-label { left: 0; top: 110px; font-size: 7px; } .visual-caption { font-size: 7px; right: 12px; bottom: 15px; } .wave { width: 94px; left: -34px; bottom: 66px; height: 52px; gap: 3px; border-radius: 12px; } .wave i { width: 3px; height: var(--height); } .demo-floating { font-size: 7px; bottom: -15px; right: -10px; padding: 6px 10px; } .format-strip { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 0; margin-top: 25px; } .format-strip > span { max-width: none; font-size: 9px; } .format-list { width: 100%; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 10px; } .format-icon { font-size: 13px; margin-right: 4px; } .section { padding: 45px 0; } .section-heading { align-items: flex-start; flex-direction: column; gap: 15px; margin-bottom: 26px; } .section-heading h2 { font-size: 27px; letter-spacing: -.9px; margin-top: 11px; } .section-heading p { font-size: 12px; max-width: none; } .eyebrow { font-size: 9px; letter-spacing: 1.1px; } .category-tabs { gap: 7px; margin-bottom: 20px; } .category-tabs button { font-size: 9px; padding: 8px 11px; } .compare-grid { grid-template-columns: 1fr; gap: 18px; } .compare-top { padding: 14px 16px; font-size: 10px; } .compare-top span { font-size: 9px; } .compare-card > p { padding: 14px 16px; font-size: 10px; } .section-footnote { font-size: 10px; } .steps { grid-template-columns: 1fr; gap: 26px; } .step { padding: 22px 0 0; } .step h3 { font-size: 17px; margin-top: 14px; } .step-detail { margin-top: 14px; } .feature-grid { grid-template-columns: 1fr; gap: 25px; } .feature-main { padding: 28px; min-height: 340px; border-radius: 20px; } .feature-main h3 { font-size: 24px; } .feature-row { padding: 20px 0; gap: 14px; } .feature-row h3 { font-size: 14px; } .feature-row p { font-size: 12px; } .use-cases { gap: 7px; margin-top: 24px; } .use-cases span { font-size: 9px; padding: 6px 10px; } .pricing-grid { gap: 12px; } .price-card { padding: 21px 15px; border-radius: 14px; } .price-card h3 { font-size: 11px; margin-bottom: 23px; } .price-value { font-size: 24px; letter-spacing: -.8px; } .price-value small { font-size: 12px; } .price-points { font-size: 9px; margin: 10px 0 18px; } .price-capacity { font-size: 11px; padding-top: 17px; } .price-capacity small { font-size: 8px; line-height: 1.8; } .price-card ul { font-size: 9px; margin-bottom: 18px; } .price-card .button { font-size: 8px; gap: 5px; min-height: 39px; padding-inline: 3px; } .popular-label { position: static; order: -1; margin: -6px 0 10px; font-size: 6px; width: fit-content; padding: 3px 6px; } .price-card.popular h3 { margin-bottom: 13px; } .pricing-intro { font-size: 9px; padding: 10px 12px; border-radius: 9px; } .price-vip { align-items: flex-start; flex-direction: column; gap: 9px; padding: 16px; font-size: 10px; } .calculator { grid-template-columns: 1fr; gap: 20px; padding: 21px 18px; margin-top: 24px; } .calculator h3 { font-size: 15px; } .calc-controls { gap: 10px; } .calc-controls label { font-size: 9px; } .calc-controls select { font-size: 12px; } .calc-note { font-size: 9px; } .faq-layout { grid-template-columns: 1fr; gap: 25px; } .faq-heading h2 { font-size: 28px; } .faq-heading p { max-width: none; font-size: 12px; } .faq-list summary { font-size: 12px; padding-block: 20px; } .faq-list p { font-size: 12px; } .closing { padding-bottom: 45px; } .closing-inner { flex-direction: column; align-items: flex-start; padding: 29px 24px; border-radius: 20px; gap: 24px; } .closing h2 { font-size: 23px; } .closing p { font-size: 11px; } .closing-inner:after { right: -25px; top: 40px; } .footer-top { align-items: flex-start; flex-direction: column; gap: 25px; } .footer-links { gap: 18px; font-size: 10px; } .footer-bottom { flex-direction: column; gap: 8px; font-size: 8px; } .site-footer { padding-bottom: 100px; } .mobile-cta { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; background: rgba(6, 11, 25, 0.95); backdrop-filter: blur(15px); border-top: 1px solid rgba(56, 189, 248, 0.25); padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 10px; } .mobile-cta strong { display: block; font-size: 10px; font-weight: 600; color: #FFFFFF; } .mobile-cta small { font-size: 8px; color: #94A3B8; } .mobile-cta .button { min-height: 37px; padding: 8px 15px; font-size: 10px; gap: 12px; border-radius: 9px; } }
@media(max-width: 365px) { .container { width: calc(100% - 28px); } .brand-sub { display: none; } .studio-pro-btn { min-height: 30px; padding: 0 7px; font-size: 9px; gap: 4px; } .studio-pro-btn .arrow { display: none; } .theme-toggle-btn { width: 30px; height: 30px; font-size: 13px; } .hero h1 { font-size: 37px; } .hero-actions { gap: 4px; } .hero-actions .button { padding-inline: 13px; font-size: 10px; } .hero-actions .button.secondary { padding-inline: 6px; } .hero-benefits { gap: 7px; font-size: 7px; } .pricing-grid { gap: 9px; } .price-card { padding: 19px 12px; } .price-value { font-size: 21px; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { animation: none !important; transition: none !important; } }
.brand-wordmark { display: flex; align-items: center; line-height: 1.2; overflow: visible; flex-shrink: 0; }
.brand-kicker { color: #00D4FF; font-size: 8px; font-weight: 600; letter-spacing: 2.2px; }
.brand-main { color: #FFFFFF; font-size: 17px; font-weight: 700; letter-spacing: -.7px; white-space: nowrap; }
.brand-main b { display: inline-block; color: #00FFA3; font-size: 11px; font-weight: 700; letter-spacing: 0; border: 1px solid #00FFA3; background: rgba(0, 255, 163, 0.12); border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: 2px; text-shadow: 0 0 8px rgba(0, 255, 163, 0.5); }
.site-footer .brand-kicker { color: #94A3B8; }
.site-footer .brand-main { color: #FFFFFF; }
.site-footer .brand-main b { color: #00FFA3; }
@media(max-width: 1100px) { .brand-main { font-size: 16px; } .brand-kicker { font-size: 7px; } }
@media(max-width: 850px) {
  .desktop-nav { display: none; }
  .header-inner { gap: 8px; }
  .header-center { margin: 0; }
  .brand-main { font-size: 14.5px; }
  .brand img { width: 34px; height: 34px; }
  .studio-pro-btn { min-height: 34px; padding: 0 12px; font-size: 11px; gap: 5px; }
}

@media(max-width: 600px) {
  .container { width: calc(100% - 20px); }
  .header-inner { gap: 6px; }
  .header-left { flex-shrink: 0; min-width: max-content; }
  .brand { gap: 6px; flex-shrink: 0; }
  .brand img { width: 26px; height: 26px; }
  .brand-wordmark { overflow: visible; flex-shrink: 0; white-space: nowrap; }
  .brand-main { font-size: 12px; letter-spacing: -.2px; white-space: nowrap; }
  .brand-kicker { font-size: 6px; letter-spacing: 1.5px; }
  .brand-main b { font-size: 7.5px; margin-left: 2px; padding: 1px 3px; vertical-align: 1px; }
  .header-center { flex: 0 0 auto; margin: 0; }
  .studio-pro-btn { min-height: 29px; padding: 0 8px; font-size: 10px; gap: 4px; border-radius: 999px; }
  .studio-pro-btn .pro-sparkle { font-size: 10px; }
  .studio-pro-btn .arrow { display: none; }
  .header-right { flex: 0 0 auto; margin-left: 0; gap: 5px; }
  .header-actions { gap: 5px; }
  .header-actions .login-link { display: none; }
  .theme-toggle-btn { width: 29px; height: 29px; font-size: 13px; border-radius: 8px; }
  .menu-toggle { display: block; line-height: 1; padding: 5px 8px; font-size: 13px; }
}

@media(max-width: 360px) {
  .container { width: calc(100% - 16px); }
  .header-inner { gap: 4px; }
  .brand img { width: 23px; height: 23px; }
  .brand-main { font-size: 11px; letter-spacing: -.3px; }
  .brand-main b { font-size: 7px; padding: 0.5px 2.5px; }
  .studio-pro-btn { min-height: 27px; padding: 0 6px; font-size: 9.5px; gap: 3px; }
  .theme-toggle-btn { width: 27px; height: 27px; font-size: 12px; }
  .menu-toggle { padding: 4px 6px; font-size: 12px; }
}


/* =====================================================================
   LIGHT THEME (Giao diện Sáng - Thanh Lịch, Tương Phản Cao, Chuẩn Modern)
   ===================================================================== */
html[data-theme="light"] {
    color-scheme: light;
    --bg: #f8fafc;
    --panel: rgba(255, 255, 255, 0.95);
    --ink: #0f172a;
    --text: #0f172a;
    --muted: #64748b;
    --line: rgba(148, 163, 184, 0.3);
    --accent: #0284c7;
    --accent-dark: #0369a1;
    --orange: #059669;
}

html[data-theme="light"] body {
    background: #f8fafc;
    background-color: #f8fafc;
    background-image: 
        linear-gradient(rgba(2, 132, 199, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, 0.04) 1px, transparent 1px),
        radial-gradient(circle at 20% 25%, rgba(122, 92, 255, 0.08) 0%, transparent 45%),
        radial-gradient(circle at 80% 75%, rgba(2, 132, 199, 0.08) 0%, transparent 45%);
    color: #0f172a;
}

html[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

html[data-theme="light"] :is(.brand-name, .brand-main) {
    color: #0f172a;
}
html[data-theme="light"] .brand-name b,
html[data-theme="light"] .brand-main b {
    color: #059669;
    border-color: #059669;
    background: rgba(5, 150, 105, 0.1);
    text-shadow: none;
}
html[data-theme="light"] .desktop-nav {
    color: #475569;
}
html[data-theme="light"] .desktop-nav a:hover {
    color: #0284c7;
}
html[data-theme="light"] .desktop-nav a:after {
    background: #0284c7;
    box-shadow: 0 0 8px rgba(2, 132, 199, 0.5);
}
html[data-theme="light"] .login-link {
    color: #475569;
}
html[data-theme="light"] .login-link:hover {
    color: #0284c7;
}
html[data-theme="light"] .theme-toggle-btn {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(148, 163, 184, 0.4);
    color: #f59e0b;
}
html[data-theme="light"] .theme-toggle-btn:hover {
    background: #ffffff;
    border-color: #f59e0b;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
}
html[data-theme="light"] .menu-toggle {
    background: #f1f5f9;
    border-color: rgba(148, 163, 184, 0.4);
    color: #0f172a;
}
html[data-theme="light"] .mobile-nav.open {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
html[data-theme="light"] .mobile-nav a {
    color: #334155;
}
html[data-theme="light"] .mobile-nav .mobile-nav-pro {
    background: linear-gradient(135deg, rgba(2, 132, 199, 0.12) 0%, rgba(122, 92, 255, 0.12) 100%);
    border-color: rgba(2, 132, 199, 0.4);
    color: #0284c7 !important;
}

html[data-theme="light"] .hero h1 {
    color: #0f172a;
}
html[data-theme="light"] .hero h1 span {
    background: linear-gradient(135deg, #0f172a 0%, #0284c7 50%, #7A5CFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
html[data-theme="light"] .hero-copy {
    color: #475569;
}
html[data-theme="light"] .hero-copy strong {
    color: #0f172a;
}
html[data-theme="light"] .hero-content > .eyebrow {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.35);
    color: #0284c7;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.12);
}
html[data-theme="light"] .status-dot {
    background: #059669;
    box-shadow: 0 0 6px #059669;
}
html[data-theme="light"] .hero-note {
    color: #475569;
}
html[data-theme="light"] .hero-note b {
    color: #059669;
    text-shadow: none;
}
html[data-theme="light"] .hero-benefits {
    border-top-color: rgba(148, 163, 184, 0.3);
    color: #475569;
}
html[data-theme="light"] .button.secondary {
    background: #ffffff;
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.4);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
html[data-theme="light"] .button.secondary:hover {
    background: #f8fafc;
    border-color: #0284c7;
    color: #0284c7;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.2);
}
html[data-theme="light"] .visual-language {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .visual-language small {
    color: #64748b;
}
html[data-theme="light"] .visual-language strong {
    color: #0284c7;
    text-shadow: none;
}
html[data-theme="light"] .format-strip {
    border-top-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="light"] .format-strip > span {
    color: #64748b;
}
html[data-theme="light"] .format-list {
    color: #334155;
}

html[data-theme="light"] .demo-section {
    background: #f1f5f9;
    border-top-color: rgba(148, 163, 184, 0.3);
    border-bottom-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="light"] .section-heading h2 {
    color: #0f172a;
}
html[data-theme="light"] .section-heading p {
    color: #475569;
}
html[data-theme="light"] .category-tabs button {
    background: #ffffff;
    color: #475569;
    border-color: rgba(148, 163, 184, 0.35);
}
html[data-theme="light"] .compare-card {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .compare-top {
    background: #f8fafc;
    border-bottom-color: rgba(148, 163, 184, 0.25);
    color: #0f172a;
}
html[data-theme="light"] .compare-top strong {
    color: #0f172a;
}
html[data-theme="light"] .compare-top span {
    color: #64748b;
}
html[data-theme="light"] .compare-card > p {
    background: #f8fafc;
    border-top-color: rgba(148, 163, 184, 0.25);
    color: #475569;
}

html[data-theme="light"] .step {
    border-top-color: rgba(148, 163, 184, 0.35);
}
html[data-theme="light"] .step h3 {
    color: #0f172a;
}
html[data-theme="light"] .step p {
    color: #475569;
}

html[data-theme="light"] #tinh-nang {
    background: #f8fafc;
}
html[data-theme="light"] .feature-main {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border-color: rgba(122, 92, 255, 0.35);
    box-shadow: 0 8px 30px rgba(122, 92, 255, 0.1);
}
html[data-theme="light"] .feature-main:before {
    color: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .feature-main h3 {
    color: #0f172a;
}
html[data-theme="light"] .feature-main p {
    color: #334155;
}
html[data-theme="light"] .language-tags span {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.3);
    color: #0284c7;
}
html[data-theme="light"] .feature-row {
    border-bottom-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="light"] .feature-row h3 {
    color: #0f172a;
}
html[data-theme="light"] .feature-row p {
    color: #475569;
}
html[data-theme="light"] .use-cases span {
    background: rgba(2, 132, 199, 0.06);
    border-color: rgba(148, 163, 184, 0.35);
    color: #0284c7;
}
html[data-theme="light"] .use-cases .use-label {
    color: #64748b;
}

html[data-theme="light"] .pricing-section {
    background: #f1f5f9;
    border-top-color: rgba(148, 163, 184, 0.3);
    border-bottom-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="light"] .pricing-intro {
    background: rgba(2, 132, 199, 0.08);
    border-color: rgba(2, 132, 199, 0.35);
    color: #0284c7;
    box-shadow: 0 0 15px rgba(2, 132, 199, 0.1);
}
html[data-theme="light"] .price-card {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .price-card h3 {
    color: #64748b;
}
html[data-theme="light"] .price-value {
    color: #0f172a !important;
}
html[data-theme="light"] .price-value small {
    color: #64748b;
}
html[data-theme="light"] .price-points {
    color: #64748b;
}
html[data-theme="light"] .price-points strong {
    color: #0284c7;
    text-shadow: none;
}
html[data-theme="light"] .price-capacity {
    color: #059669;
    border-top-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="light"] .price-capacity small {
    color: #64748b;
}
html[data-theme="light"] .price-card ul {
    color: #334155;
}
html[data-theme="light"] .price-card li:before {
    color: #059669;
}
html[data-theme="light"] .price-card .button {
    background: #f8fafc;
    border-color: rgba(148, 163, 184, 0.4);
    color: #0284c7;
}
html[data-theme="light"] .price-card.popular {
    background: linear-gradient(180deg, #ffffff 0%, #f5f3ff 100%);
    border-color: #7A5CFF;
    box-shadow: 0 8px 30px rgba(122, 92, 255, 0.2);
}
html[data-theme="light"] .price-vip {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.35);
    color: #334155;
}
html[data-theme="light"] .calculator {
    background: #ffffff;
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .calculator h3 {
    color: #0f172a;
}
html[data-theme="light"] .calculator p {
    color: #64748b;
}
html[data-theme="light"] .calc-controls select {
    background: #f8fafc;
    color: #0f172a;
    border-color: rgba(148, 163, 184, 0.4);
}
html[data-theme="light"] .calc-result {
    color: #059669;
    text-shadow: none;
}
html[data-theme="light"] .calc-note {
    color: #64748b;
}

html[data-theme="light"] #faq {
    border-top-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="light"] .faq-heading h2 {
    color: #0f172a;
}
html[data-theme="light"] .faq-heading p {
    color: #475569;
}
html[data-theme="light"] .faq-list details {
    border-bottom-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="light"] .faq-list details:first-child {
    border-top-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="light"] .faq-list summary {
    color: #0f172a;
}
html[data-theme="light"] .faq-list p {
    color: #475569;
}

html[data-theme="light"] .closing-inner {
    background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
    border-color: rgba(2, 132, 199, 0.35);
    box-shadow: 0 8px 30px rgba(2, 132, 199, 0.1);
}
html[data-theme="light"] .closing h2 {
    color: #0f172a;
}
html[data-theme="light"] .closing p {
    color: #475569;
}

html[data-theme="light"] .site-footer {
    background: #f1f5f9;
    border-top-color: rgba(148, 163, 184, 0.3);
    color: #64748b;
}
html[data-theme="light"] .site-footer .brand-main {
    color: #0f172a;
}
html[data-theme="light"] .footer-links {
    color: #64748b;
}
html[data-theme="light"] .footer-links a:hover {
    color: #0284c7;
}
html[data-theme="light"] .mobile-cta {
    background: rgba(255, 255, 255, 0.95);
    border-top-color: rgba(148, 163, 184, 0.3);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .mobile-cta strong {
    color: #0f172a;
}
html[data-theme="light"] .mobile-cta small {
    color: #64748b;
}

/* Additional Light Mode Polish */
html[data-theme="light"] .format-strip {
    background: transparent !important;
    border-top: 1px solid rgba(148, 163, 184, 0.3) !important;
}
html[data-theme="light"] .format-strip > span {
    color: #64748b !important;
}
html[data-theme="light"] .format-list {
    color: #334155 !important;
}
html[data-theme="light"] .demo-shell {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.4) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 0 25px rgba(2, 132, 199, 0.1) !important;
}
html[data-theme="light"] .demo-title {
    color: #475569 !important;
}
html[data-theme="light"] .demo-switch {
    background: #f1f5f9 !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
}
html[data-theme="light"] .demo-switch button {
    color: #64748b !important;
}
html[data-theme="light"] .demo-switch button[aria-pressed=true] {
    background: linear-gradient(135deg, #0284c7, #7A5CFF) !important;
    color: #ffffff !important;
}
html[data-theme="light"] .voice-info strong {
    color: #0f172a !important;
}
html[data-theme="light"] .voice-info small {
    color: #64748b !important;
}
html[data-theme="light"] .wave {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="light"] .demo-floating {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(5, 150, 105, 0.4) !important;
    color: #059669 !important;
    box-shadow: 0 4px 15px rgba(5, 150, 105, 0.15) !important;
}


/* ==========================================================================
   FLAGSHIP BEFORE / AFTER INTERACTIVE SHOWCASE (11 CATEGORIES · 62 PAIRS)
   ========================================================================== */

/* Defer offscreen rendering for below-the-fold sections (modern-web-guidance) */
#cach-su-dung,
#tinh-nang,
#bang-gia-point,
#faq {
  content-visibility: auto;
  contain-intrinsic-size: auto 680px;
}

.showcase-heading {
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 28px;
}

.showcase-heading h2 span {
  background: linear-gradient(135deg, #00F2FE 0%, #7A5CFF 60%, #00FF87 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.showcase-heading-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 58ch;
}

.showcase-heading-right p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.65;
}

.showcase-heading-right p strong {
  color: var(--ink);
}

.showcase-stats-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.showcase-stats-pills span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  background: rgba(13, 21, 38, 0.85);
  border: 1px solid rgba(0, 242, 254, 0.25);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.showcase-stats-pills span b {
  color: var(--teal);
  font-weight: 700;
}

/* 11 Category Filter Tabs */
.category-tabs-wrap {
  margin-bottom: 18px;
}

#showcaseCategoryTabs.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

#showcaseCategoryTabs button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(13, 21, 38, 0.75);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}

#showcaseCategoryTabs button:hover {
  border-color: rgba(0, 242, 254, 0.45);
  color: #fff;
  transform: translateY(-1px);
  background: rgba(19, 31, 56, 0.9);
}

#showcaseCategoryTabs button[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.18) 0%, rgba(122, 92, 255, 0.28) 100%);
  color: #fff;
  border-color: var(--teal);
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.cat-tab-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.cat-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}

#showcaseCategoryTabs button[aria-pressed="true"] .cat-tab-count {
  background: var(--teal);
  color: #03050a;
}

/* Category Context Panel & Playlist Strip */
.showcase-playlist-panel {
  background: rgba(10, 16, 30, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(14px);
}

.showcase-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.showcase-cat-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.showcase-cat-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 1.45rem;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.14), rgba(122, 92, 255, 0.2));
  border: 1px solid rgba(0, 242, 254, 0.3);
  flex-shrink: 0;
}

.showcase-cat-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 3px;
}

.showcase-cat-title-row h3 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  color: #fff;
}

.showcase-cat-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--teal);
  background: rgba(0, 242, 254, 0.1);
  border: 1px solid rgba(0, 242, 254, 0.3);
}

.showcase-cat-info p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.showcase-nav-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.showcase-counter {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal);
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(0, 242, 254, 0.08);
  border: 1px solid rgba(0, 242, 254, 0.2);
}

.showcase-nav-btn {
  padding: 7px 13px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.showcase-nav-btn:hover {
  border-color: var(--teal);
  background: rgba(0, 242, 254, 0.14);
  color: var(--teal);
}

/* Playlist Horizontal Strip */
.showcase-playlist {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(215px, 240px);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 242, 254, 0.35) rgba(255, 255, 255, 0.04);
}

.showcase-playlist::-webkit-scrollbar {
  height: 6px;
}

.showcase-playlist::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
}

.showcase-playlist::-webkit-scrollbar-thumb {
  background: rgba(0, 242, 254, 0.35);
  border-radius: 999px;
}

.playlist-item-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 8px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(15, 24, 44, 0.78);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
}

.playlist-item-card:hover {
  border-color: rgba(0, 242, 254, 0.45);
  transform: translateY(-2px);
  background: rgba(20, 32, 58, 0.92);
}

.playlist-item-card.active {
  border-color: var(--teal);
  background: linear-gradient(180deg, rgba(0, 242, 254, 0.14) 0%, rgba(122, 92, 255, 0.16) 100%);
  box-shadow: 0 6px 20px rgba(0, 242, 254, 0.18);
}

.playlist-thumb-wrap {
  position: relative;
  width: 100%;
  height: 112px;
  border-radius: 9px;
  overflow: hidden;
  background: #050811;
  margin-bottom: 8px;
}

.playlist-thumb-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.playlist-item-card:hover .playlist-thumb-wrap img {
  transform: scale(1.04);
}

.playlist-idx-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(3, 5, 10, 0.82);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.playlist-item-card.active .playlist-idx-badge {
  background: var(--teal);
  color: #03050a;
  border-color: transparent;
}

.playlist-dur-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  background: rgba(3, 5, 10, 0.84);
  color: #e2e8f0;
}

.playlist-aspect-tag {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(122, 92, 255, 0.85);
  color: #fff;
}

.playlist-item-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 6px;
  padding: 0 2px;
}

.playlist-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.38;
  color: #f1f5f9;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.playlist-item-status {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--muted);
}

.playlist-item-card.active .playlist-item-status {
  color: var(--lime);
}

/* Active Stage Toolbar & Instant A/B Switch */
.showcase-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(13, 21, 38, 0.92) 0%, rgba(18, 28, 52, 0.92) 100%);
  border: 1px solid rgba(0, 242, 254, 0.22);
  margin-bottom: 18px;
}

.showcase-active-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.active-idx-pill {
  padding: 6px 11px;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--teal), var(--amber));
  color: #fff;
  flex-shrink: 0;
}

.showcase-active-meta strong {
  display: block;
  font-size: 0.98rem;
  color: #fff;
  line-height: 1.35;
}

.showcase-active-meta small {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2px;
}

.showcase-ab-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.ab-quick-switch {
  display: inline-flex;
  padding: 4px;
  border-radius: 11px;
  background: rgba(3, 5, 10, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  gap: 4px;
}

.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.ab-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.ab-btn.before-btn[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.ab-btn.after-btn {
  color: var(--teal);
}

.ab-btn.after-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--teal), var(--amber));
  color: #fff;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.35);
}

.ab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.ab-btn[aria-pressed="true"] .ab-dot {
  background: var(--lime);
  opacity: 1;
  box-shadow: 0 0 8px var(--lime);
}

.sync-time-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sync-time-toggle input {
  accent-color: var(--teal);
}

/* Adaptive Side-by-Side Compare Stage */
#showcaseCompareGrid.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.compare-title-group {
  display: flex;
  align-items: center;
  gap: 9px;
}

.compare-step-badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.compare-step-badge.after-badge {
  background: rgba(0, 255, 135, 0.16);
  color: var(--lime);
  border: 1px solid rgba(0, 255, 135, 0.35);
}

.compare-tag-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
}

.compare-tag-pill.after-pill {
  background: rgba(0, 242, 254, 0.12);
  color: var(--teal);
  border: 1px solid rgba(0, 242, 254, 0.28);
}

#showcaseCompareGrid .compare-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #0b1325 0%, #03050a 100%);
  position: relative;
  overflow: hidden;
}

#showcaseCompareGrid[data-aspect="9:16"] .compare-stage {
  aspect-ratio: auto;
  height: 510px;
  max-height: 72vh;
  padding: 10px;
}

#showcaseCompareGrid[data-aspect="9:16"] .compare-stage video {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

#showcaseCompareGrid[data-aspect="16:9"] .compare-stage {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 390px;
  padding: 0;
}

#showcaseCompareGrid[data-aspect="16:9"] .compare-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.compare-card.is-playing {
  border-color: var(--lime) !important;
  box-shadow: 0 0 32px rgba(0, 255, 135, 0.25) !important;
}

.compare-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid var(--line);
}

.compare-card-footer p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.compare-aspect-badge {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  white-space: nowrap;
}

.compare-aspect-badge.after-aspect {
  background: rgba(0, 255, 135, 0.12);
  color: var(--lime);
}

/* Bottom Pipeline Highlights & Studio CTA */
.showcase-bottom-bar {
  margin-top: 22px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(13, 21, 38, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.showcase-pipeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #e2e8f0;
}

.use-cases a[data-jump-cat] {
  padding: 8px 14px;
  border-radius: 8px;
  background: rgba(0, 242, 254, 0.05);
  border: 1px solid var(--line);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--teal);
  transition: all 0.18s ease;
}

.use-cases a[data-jump-cat]:hover {
  background: rgba(0, 242, 254, 0.15);
  border-color: var(--teal);
  transform: translateY(-1px);
}

/* Responsive Mobile & Tablet Adjustments for Showcase */
@media (max-width: 980px) {
  #showcaseCompareGrid.compare-grid {
    grid-template-columns: 1fr;
  }
  #showcaseCompareGrid[data-aspect="9:16"] .compare-stage {
    height: 440px;
  }
  .showcase-cat-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .showcase-nav-controls {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  #showcaseCategoryTabs.category-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #showcaseCategoryTabs.category-tabs::-webkit-scrollbar {
    display: none;
  }
  #showcaseCategoryTabs button {
    flex-shrink: 0;
    scroll-snap-align: start;
    padding: 8px 13px;
    font-size: 0.83rem;
  }
  .showcase-playlist {
    grid-auto-columns: minmax(185px, 205px);
  }
  .showcase-stage-toolbar {
    padding: 12px 14px;
  }
  .ab-quick-switch {
    width: 100%;
  }
  .ab-btn {
    flex: 1;
    justify-content: center;
    padding: 8px 10px;
    font-size: 0.78rem;
  }
  #showcaseCompareGrid[data-aspect="9:16"] .compare-stage {
    height: 390px;
  }
  .showcase-bottom-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .showcase-bottom-bar .button {
    width: 100%;
  }
}

/* Light Mode Overrides for Showcase */
html[data-theme="light"] .showcase-stats-pills span {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.3);
  color: #0f172a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .showcase-stats-pills span b {
  color: #0284c7;
}
html[data-theme="light"] #showcaseCategoryTabs button {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.35);
  color: #475569;
}
html[data-theme="light"] #showcaseCategoryTabs button:hover {
  border-color: #0284c7;
  color: #0f172a;
  background: #f8fafc;
}
html[data-theme="light"] #showcaseCategoryTabs button[aria-pressed="true"] {
  background: linear-gradient(135deg, #0284c7 0%, #7A5CFF 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(2, 132, 199, 0.25);
}
html[data-theme="light"] .cat-tab-count {
  background: #f1f5f9;
  color: #475569;
}
html[data-theme="light"] #showcaseCategoryTabs button[aria-pressed="true"] .cat-tab-count {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}
html[data-theme="light"] .showcase-playlist-panel {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .showcase-cat-header {
  border-bottom-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="light"] .showcase-cat-title-row h3 {
  color: #0f172a;
}
html[data-theme="light"] .showcase-cat-badge {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.28);
}
html[data-theme="light"] .showcase-counter {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border-color: rgba(2, 132, 199, 0.25);
}
html[data-theme="light"] .showcase-nav-btn {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.38);
  color: #0f172a;
}
html[data-theme="light"] .showcase-nav-btn:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0284c7;
}
html[data-theme="light"] .playlist-item-card {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="light"] .playlist-item-card:hover {
  background: #ffffff;
  border-color: #0284c7;
}
html[data-theme="light"] .playlist-item-card.active {
  background: linear-gradient(180deg, rgba(2, 132, 199, 0.1) 0%, rgba(122, 92, 255, 0.1) 100%);
  border-color: #0284c7;
}
html[data-theme="light"] .playlist-item-title {
  color: #0f172a;
}
html[data-theme="light"] .playlist-item-card.active .playlist-item-status {
  color: #059669;
}
html[data-theme="light"] .showcase-stage-toolbar {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
html[data-theme="light"] .showcase-active-meta strong {
  color: #0f172a;
}
html[data-theme="light"] .ab-quick-switch {
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.35);
}
html[data-theme="light"] .ab-btn {
  color: #475569;
}
html[data-theme="light"] .ab-btn.before-btn[aria-pressed="true"] {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .sync-time-toggle {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.35);
  color: #475569;
}
html[data-theme="light"] .compare-step-badge {
  background: #e2e8f0;
  color: #334155;
}
html[data-theme="light"] .compare-step-badge.after-badge {
  background: rgba(5, 150, 105, 0.14);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.35);
}
html[data-theme="light"] .compare-tag-pill {
  background: #f1f5f9;
  color: #475569;
}
html[data-theme="light"] .compare-tag-pill.after-pill {
  background: rgba(2, 132, 199, 0.1);
  color: #0284c7;
}
html[data-theme="light"] .compare-card-footer {
  background: #f8fafc;
  border-top-color: rgba(148, 163, 184, 0.25);
}
html[data-theme="light"] .compare-card-footer p {
  color: #475569;
}
html[data-theme="light"] .showcase-bottom-bar {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .showcase-pipeline-tags {
  color: #334155;
}


/* ==========================================================================
   HERO COMPLETED VIDEO PLAYER (AUTO-ADVANCE + ‹ › NAVIGATION)
   ========================================================================== */

.hero-showcase-toolbar {
  gap: 7px;
  padding: 6px 5px 10px;
}

.hero-toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.hero-clip-counter {
  font-size: 9px;
  font-weight: 700;
  color: #00D4FF;
  background: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.3);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.4px;
}

.hero-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  background: rgba(6, 11, 25, 0.85);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(56, 189, 248, 0.22);
}

.hero-step-btn {
  border: 1px solid rgba(56, 189, 248, 0.22);
  background: rgba(15, 23, 42, 0.85);
  color: #e2e8f0;
  border-radius: 7px;
  font-size: 9.5px;
  font-weight: 700;
  padding: 5px 10px;
  min-height: 27px;
  cursor: pointer;
  transition: all 0.18s ease;
  flex-shrink: 0;
}

.hero-step-btn:hover {
  background: linear-gradient(135deg, #00D4FF, #7A5CFF);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.4);
}

.hero-cat-pill {
  flex: 1;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 4px;
}

#heroVideoStage[data-aspect="16:9"] video {
  object-fit: contain;
  background: #03050a;
}

.hero-arrow-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 212, 255, 0.45);
  background: rgba(6, 11, 25, 0.82);
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  transition: all 0.18s ease;
  padding: 0 0 2px;
}

.hero-arrow-btn.prev {
  left: 8px;
}

.hero-arrow-btn.next {
  right: 8px;
}

.hero-arrow-btn:hover {
  background: linear-gradient(135deg, #00D4FF, #7A5CFF);
  border-color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 212, 255, 0.55);
  transform: translateY(-50%) scale(1.07);
}

.hero-arrow-btn:active {
  transform: translateY(-50%) scale(0.95);
}

.demo-shell .voice-info {
  min-width: 0;
  flex: 1;
}

.demo-shell .voice-info > div {
  min-width: 0;
}

.demo-shell #heroVoiceLabel {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 158px;
}

.demo-shell #heroVoiceDetail {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 158px;
}

/* Light Mode for Hero Completed Video Player */
html[data-theme="light"] .hero-clip-counter {
  color: #0284c7;
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.3);
}

html[data-theme="light"] .hero-nav-bar {
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.35);
}

html[data-theme="light"] .hero-step-btn {
  background: #ffffff;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.4);
}

html[data-theme="light"] .hero-step-btn:hover {
  background: linear-gradient(135deg, #0284c7, #7A5CFF);
  color: #ffffff;
  border-color: transparent;
}

html[data-theme="light"] .hero-cat-pill {
  color: #0f172a;
}

html[data-theme="light"] .hero-arrow-btn {
  background: rgba(255, 255, 255, 0.9);
  color: #0f172a;
  border-color: rgba(2, 132, 199, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html[data-theme="light"] .hero-arrow-btn:hover {
  background: linear-gradient(135deg, #0284c7, #7A5CFF);
  color: #ffffff;
}


/* ==========================================================================
   KLING-STYLE VIDEO CARD WALL & DUAL-VIDEO SEAMLESS PREVIEW MODAL
   ========================================================================== */

/* Modern Web Guidance: Dialog scroll containment */
dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(2, 5, 14, 0.84);
  backdrop-filter: blur(14px);
}

/* Stacked Dual Videos on Hero Stage */
#heroVideoStage {
  position: relative;
}

.hero-stacked-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}

.hero-stacked-video.is-active {
  opacity: 1;
  pointer-events: auto;
}

#heroVideoStage[data-aspect="16:9"] .hero-stacked-video {
  object-fit: contain;
  background: #03050a;
}

/* 2 Floating Popup Pills on Hero Preview Screen */
.stage-floating-popups {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(6, 11, 25, 0.86);
  border: 1px solid rgba(0, 212, 255, 0.38);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.65);
  white-space: nowrap;
}

.stage-popup-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #cbd5e1;
  font-size: 9.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.stage-popup-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

.stage-popup-pill.is-active {
  background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.45);
}

.popup-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.stage-popup-pill.is-active .popup-dot {
  background: #00FFA3;
  box-shadow: 0 0 8px #00FFA3;
}

/* Kling Filter Bar (Tabs + Search Box) */
.kling-filter-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.kling-filter-bar .kling-tabs {
  flex: 1;
  min-width: 280px;
}

.kling-search-box {
  position: relative;
  width: 260px;
  flex-shrink: 0;
}

.kling-search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.86rem;
  opacity: 0.7;
  pointer-events: none;
}

.kling-search-box input {
  width: 100%;
  padding: 9px 14px 9px 36px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(13, 21, 38, 0.82);
  color: #ffffff;
  font-size: 0.86rem;
  font-family: inherit;
  outline: none;
  transition: all 0.2s ease;
}

.kling-search-box input::placeholder {
  color: #64748b;
}

.kling-search-box input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 242, 254, 0.15);
  background: rgba(16, 26, 48, 0.95);
}

/* Category Summary Strip */
.kling-cat-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  border-radius: 14px;
  background: rgba(10, 16, 30, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.kling-cat-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.kling-cat-emoji {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.14), rgba(122, 92, 255, 0.2));
  border: 1px solid rgba(0, 242, 254, 0.28);
  flex-shrink: 0;
}

.kling-cat-left strong {
  display: block;
  font-size: 0.96rem;
  color: #ffffff;
  margin-bottom: 2px;
}

.kling-cat-left span {
  display: block;
  font-size: 0.83rem;
  color: var(--muted);
}

/* Kling Video Card Grid */
.kling-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(242px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.kling-video-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #070c18;
  border: 1px solid rgba(255, 255, 255, 0.09);
  cursor: pointer;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.24s ease, box-shadow 0.24s ease;
  outline: none;
}

.kling-video-card:hover,
.kling-video-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 24px rgba(0, 242, 254, 0.22);
}

.kling-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 13.5;
  overflow: hidden;
  background: #040710;
}

.kling-card-media img,
.kling-card-hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.38s ease, opacity 0.22s ease;
}

.kling-video-card.aspect-landscape .kling-card-media img,
.kling-video-card.aspect-landscape .kling-card-hover-video {
  object-fit: cover;
  object-position: center;
}

.kling-card-hover-video {
  opacity: 0;
  pointer-events: none;
}

.kling-video-card.is-hover-playing .kling-card-hover-video {
  opacity: 1;
}

.kling-video-card:hover .kling-card-media img {
  transform: scale(1.04);
}

.kling-card-top-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.kling-play-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 700;
  background: rgba(3, 6, 15, 0.78);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
}

.kling-play-pill i {
  font-style: normal;
  font-size: 0.65rem;
  color: var(--teal);
}

.kling-cat-tag {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(3, 6, 15, 0.78);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Floating Quick Chips on Card */
.kling-card-hover-popups {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(5, 10, 22, 0.9);
  border: 1px solid rgba(0, 242, 254, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.kling-video-card:hover .kling-card-hover-popups,
.kling-video-card:focus-visible .kling-card-hover-popups {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.mini-popup-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #cbd5e1;
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.16s ease;
}

.mini-popup-chip.active,
.mini-popup-chip:hover {
  background: linear-gradient(135deg, var(--teal), var(--amber));
  color: #ffffff;
}

.kling-card-overlay {
  position: relative;
  padding: 11px 13px 12px;
  background: rgba(9, 15, 30, 0.96);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: 8px;
}

.kling-card-title {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kling-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.kling-aspect-pill {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(0, 255, 163, 0.12);
  color: #00FFA3;
  border: 1px solid rgba(0, 255, 163, 0.28);
}

.kling-compare-cta {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--teal);
}

.kling-load-more-wrap {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.kling-load-more-wrap[hidden] {
  display: none !important;
}

.kling-more-btn {
  padding: 12px 26px;
  border-radius: 999px;
  font-size: 0.9rem;
}

.kling-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 20px;
  border-radius: 16px;
  background: rgba(13, 21, 38, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.15);
}

/* ==========================================================================
   CINEMA PREVIEW MODAL WITH 2 FLOATING ON-SCREEN POPUPS (GỐC / ĐÃ XỬ LÝ)
   ========================================================================== */

dialog#videoPreviewModal.preview-modal {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  max-width: min(94vw, 920px);
  width: min(94vw, 920px);
  max-height: 94vh;
  margin: auto;
  overflow: auto;
}

dialog#videoPreviewModal.preview-modal[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-modal-Dialog {
  width: 100%;
  background: linear-gradient(180deg, #0b1326 0%, #060a15 100%);
  border: 1px solid rgba(0, 242, 254, 0.32);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.88), 0 0 40px rgba(0, 242, 254, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(13, 21, 38, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-modal-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.preview-cat-pill {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(0, 242, 254, 0.12);
  color: var(--teal);
  border: 1px solid rgba(0, 242, 254, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

.preview-title-wrap {
  min-width: 0;
}

.preview-title-wrap h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-title-wrap small {
  display: block;
  font-size: 0.77rem;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-modal-top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.preview-counter-badge {
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.07);
  color: #e2e8f0;
}

.preview-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 0.18s ease;
}

.preview-close-btn:hover {
  background: rgba(239, 68, 68, 0.22);
  border-color: #ef4444;
  color: #fca5a5;
}

/* Preview Stage Container */
.preview-stage-container {
  position: relative;
  width: 100%;
  height: min(64vh, 560px);
  min-height: 360px;
  background: radial-gradient(circle at center, #0d172e 0%, #020409 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-stacked-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  cursor: pointer;
}

.modal-stacked-video.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* THE 2 FLOATING POPUP CARDS ON THE PREVIEW SCREEN */
.preview-screen-popups {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  display: inline-flex;
  align-items: stretch;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: rgba(5, 10, 22, 0.86);
  border: 1.5px solid rgba(0, 242, 254, 0.42);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 242, 254, 0.2);
  backdrop-filter: blur(14px);
}

.screen-popup-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.screen-popup-card:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transform: translateY(-1px);
}

.screen-popup-card.is-active {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.24) 0%, rgba(122, 92, 255, 0.36) 100%);
  border-color: var(--teal);
  color: #ffffff;
  box-shadow: 0 0 20px rgba(0, 242, 254, 0.32);
}

.screen-popup-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.screen-popup-card.is-active .screen-popup-indicator {
  background: #00FFA3;
  box-shadow: 0 0 10px #00FFA3;
}

.screen-popup-content {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.screen-popup-content strong {
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.screen-popup-content small {
  font-size: 0.69rem;
  color: #94a3b8;
  white-space: nowrap;
}

.screen-popup-card.is-active .screen-popup-content small {
  color: #e0f2fe;
}

/* Live Status Badge on Preview Stage */
.preview-live-status {
  position: absolute;
  bottom: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(3, 6, 15, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
  pointer-events: none;
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.preview-stage-container[data-active-mode="after"] .preview-live-status {
  border-color: rgba(0, 255, 163, 0.45);
  color: #00FFA3;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}

/* Left / Right Navigation Arrows on Preview Stage */
.preview-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(0, 242, 254, 0.4);
  background: rgba(6, 11, 25, 0.82);
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  transition: all 0.18s ease;
  padding: 0 0 3px;
}

.preview-nav-arrow.prev {
  left: 16px;
}

.preview-nav-arrow.next {
  right: 16px;
}

.preview-nav-arrow:hover {
  background: linear-gradient(135deg, var(--teal), var(--amber));
  border-color: #ffffff;
  transform: translateY(-50%) scale(1.08);
}

/* Unified Transport Bar */
.preview-transport-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(6, 11, 25, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}

.transport-play-btn,
.transport-mute-btn {
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.transport-play-btn:hover,
.transport-mute-btn:hover {
  background: var(--teal);
  color: #03050a;
}

.transport-time {
  font-size: 0.76rem;
  font-weight: 700;
  color: #cbd5e1;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.transport-scrubber {
  flex: 1;
  accent-color: var(--teal);
  height: 5px;
  cursor: pointer;
}

/* Modal Footer */
.preview-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(13, 21, 38, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.preview-footer-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 52ch;
}

.preview-footer-hint b {
  color: #ffffff;
}

.preview-footer-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.preview-cta-btn {
  padding: 9px 16px;
  font-size: 0.84rem;
}

/* Mobile Responsive Adjustments for Kling Grid & Modal */
@media (max-width: 680px) {
  .kling-search-box {
    width: 100%;
  }
  .kling-video-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .kling-card-title {
    font-size: 0.78rem;
  }
  .kling-compare-cta {
    display: none;
  }
  .preview-screen-popups {
    top: 10px;
    width: calc(100% - 20px);
    justify-content: center;
  }
  .screen-popup-card {
    flex: 1;
    padding: 7px 10px;
    justify-content: center;
  }
  .screen-popup-content small {
    display: none;
  }
  .preview-stage-container {
    height: 56vh;
  }
  .preview-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .preview-footer-buttons {
    width: 100%;
    justify-content: space-between;
  }
  .preview-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Light Mode Overrides for Kling Grid & Modal */
html[data-theme="light"] .kling-search-box input {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.4);
  color: #0f172a;
}
html[data-theme="light"] .kling-cat-summary {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
html[data-theme="light"] .kling-cat-left strong {
  color: #0f172a;
}
html[data-theme="light"] .kling-video-card {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.35);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .preview-modal-Dialog {
  background: #ffffff;
  border-color: rgba(2, 132, 199, 0.35);
}
html[data-theme="light"] .preview-modal-header,
html[data-theme="light"] .preview-modal-footer {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.28);
}
html[data-theme="light"] .preview-title-wrap h3,
html[data-theme="light"] .preview-footer-hint b {
  color: #0f172a;
}
html[data-theme="light"] .preview-counter-badge,
html[data-theme="light"] .preview-close-btn {
  background: #e2e8f0;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.4);
}


/* ==========================================================================
   V2 REFINEMENT: UNOBSTRUCTED VIDEO STAGE + ADAPTIVE 9:16/16:9 MODAL + DIRECT HERO
   ========================================================================== */

.hero {
  padding: 28px 0 18px;
}

.hero h1 {
  font-size: clamp(34px, 3.8vw, 52px);
  letter-spacing: -1.8px;
  line-height: 1.18;
  margin: 16px 0 14px;
}

.hero-copy {
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 540px;
  margin-bottom: 14px;
}

.hero-capability-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 540px;
}

.hero-capability-list li {
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(13, 21, 38, 0.72);
  border: 1px solid rgba(56, 189, 248, 0.18);
  font-size: 13px;
  line-height: 1.5;
  color: #cbd5e1;
}

.hero-capability-list li strong {
  color: #00D4FF;
  font-weight: 700;
}

.hero-capability-list li b {
  color: #ffffff;
  font-weight: 600;
}

.hero-actions {
  margin-top: 18px;
}

/* Unobstructed Hero Phone Player */
.hero-visual {
  min-height: 520px;
  padding: 10px 16px;
}

.demo-shell {
  width: 304px;
  padding: 10px;
  border-radius: 22px;
  transform: none;
}

.hero-top-right-nav {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.hero-mini-nav {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(0, 212, 255, 0.35);
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0 0 1px;
  transition: all 0.16s ease;
}

.hero-mini-nav:hover {
  background: linear-gradient(135deg, #00D4FF, #7A5CFF);
  border-color: transparent;
}

.clean-video-stage {
  aspect-ratio: 9 / 14;
  border-radius: 14px;
}

.clean-video-stage:after {
  display: none !important;
}

.hero-bottom-deck {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}

.hero-mode-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 4px;
  border-radius: 11px;
  background: rgba(6, 11, 25, 0.9);
  border: 1px solid rgba(0, 212, 255, 0.28);
}

.hero-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
}

.hero-mode-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.hero-mode-btn.is-active {
  background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%);
  color: #ffffff;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.38);
}

.hero-mode-btn.is-active .popup-dot {
  background: #00FFA3;
  box-shadow: 0 0 8px #00FFA3;
}

.hero-audio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 2px 0;
}

.hero-track-meta {
  min-width: 0;
  flex: 1;
}

.hero-track-meta strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-track-meta small {
  display: block;
  font-size: 9.5px;
  color: #94a3b8;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-audio-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.hero-sound-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 212, 255, 0.45);
  background: rgba(0, 212, 255, 0.12);
  color: #00D4FF;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
}

.hero-sound-pill svg {
  width: 12px;
  height: 12px;
}

.hero-sound-pill[aria-pressed="true"] {
  background: rgba(0, 255, 163, 0.16);
  border-color: #00FFA3;
  color: #00FFA3;
}

.hero-play-icon-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Direct Kling Section Spacing (No bloated header above tabs) */
.kling-showcase-section {
  padding-top: 26px;
  padding-bottom: 48px;
}

/* ==========================================================================
   ADAPTIVE PREVIEW MODAL (PORTRAIT 9:16 vs LANDSCAPE 16:9 + BOTTOM DECK)
   ========================================================================== */

dialog#videoPreviewModal.preview-modal {
  width: min(94vw, 840px);
  max-width: min(94vw, 840px);
  transition: width 0.22s ease, max-width 0.22s ease;
}

/* Portrait 9:16 video -> compact vertical frame with zero side black bars */
dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) {
  width: min(94vw, 470px);
  max-width: min(94vw, 470px);
}

/* Landscape 16:9 video -> widescreen theater frame */
dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="16:9"]) {
  width: min(94vw, 860px);
  max-width: min(94vw, 860px);
}

.preview-modal-header {
  padding: 11px 16px;
}

.preview-title-wrap h3,
.preview-modal-meta h3 {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#modalVideoStage.preview-stage-container {
  width: 100%;
  background: #02040a;
}

#modalVideoStage.preview-stage-container[data-aspect="9:16"] {
  height: min(62vh, 540px);
  min-height: 320px;
}

#modalVideoStage.preview-stage-container[data-aspect="16:9"] {
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 60vh;
  min-height: 240px;
}

/* Dedicated Control Deck BELOW the Video (Never covers video or subtitles) */
.preview-control-deck {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px;
  background: rgba(11, 18, 34, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.preview-scrubber-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(4, 8, 18, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.preview-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.preview-bottom-popups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(4, 8, 18, 0.9);
  border: 1px solid rgba(0, 242, 254, 0.32);
  flex: 1;
  min-width: 260px;
}

.bottom-mode-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.bottom-mode-pill:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.bottom-mode-pill.is-active {
  background: linear-gradient(135deg, rgba(0, 242, 254, 0.25) 0%, rgba(122, 92, 255, 0.4) 100%);
  border-color: var(--teal);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.28);
}

.mode-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
}

.bottom-mode-pill.is-active .mode-pill-dot {
  background: #00FFA3;
  box-shadow: 0 0 8px #00FFA3;
}

.preview-deck-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* When modal is narrow (9:16 portrait), stack switch row cleanly */
dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) .preview-switch-row {
  flex-direction: column;
  align-items: stretch;
}

dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) .preview-deck-actions {
  justify-content: space-between;
}

dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) .preview-cta-btn {
  flex: 1;
  justify-content: center;
}

.deck-step-btn {
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.16s ease;
  white-space: nowrap;
}

.deck-step-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(0, 242, 254, 0.12);
}

/* Light Mode Overrides for V2 Refinement */
html[data-theme="light"] .hero-capability-list li {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.35);
  color: #334155;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .hero-capability-list li strong {
  color: #0284c7;
}
html[data-theme="light"] .hero-capability-list li b {
  color: #0f172a;
}
html[data-theme="light"] .hero-mode-bar {
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.4);
}
html[data-theme="light"] .hero-mode-btn {
  color: #475569;
}
html[data-theme="light"] .hero-mode-btn.is-active {
  color: #ffffff;
}
html[data-theme="light"] .hero-track-meta strong {
  color: #0f172a;
}
html[data-theme="light"] .hero-mini-nav,
html[data-theme="light"] .hero-play-icon-btn {
  background: #f1f5f9;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.4);
}
html[data-theme="light"] .preview-control-deck {
  background: #f8fafc;
  border-top-color: rgba(148, 163, 184, 0.3);
}
html[data-theme="light"] .preview-scrubber-row,
html[data-theme="light"] .preview-bottom-popups {
  background: #ffffff;
  border-color: rgba(148, 163, 184, 0.38);
}
html[data-theme="light"] .bottom-mode-pill {
  color: #475569;
}
html[data-theme="light"] .bottom-mode-pill.is-active {
  background: linear-gradient(135deg, #0284c7 0%, #7A5CFF 100%);
  color: #ffffff;
  border-color: transparent;
}
html[data-theme="light"] .transport-play-btn,
html[data-theme="light"] .transport-mute-btn,
html[data-theme="light"] .deck-step-btn {
  background: #f1f5f9;
  color: #0f172a;
  border-color: rgba(148, 163, 184, 0.4);
}
html[data-theme="light"] .transport-time {
  color: #334155;
}
html[data-theme="light"] .preview-modal-meta h3 {
  color: #0f172a;
}
html[data-theme="light"] .site-theme .kling-card-overlay {
  background: #ffffff;
  border-top-color: rgba(148, 163, 184, 0.22);
}
html[data-theme="light"] .site-theme .kling-card-overlay .kling-card-title {
  color: #0f172a !important;
  text-shadow: none !important;
}
html[data-theme="light"] .site-theme .kling-card-overlay .kling-aspect-pill {
  background: rgba(5, 150, 105, 0.1);
  color: #059669;
  border-color: rgba(5, 150, 105, 0.25);
}
html[data-theme="light"] .site-theme .kling-card-overlay .kling-compare-cta {
  color: #0284c7 !important;
}
html[data-theme="light"] .site-theme .demo-section #showcaseCategoryTabs.category-tabs button[aria-pressed="true"] {
  background: linear-gradient(135deg, #0284c7 0%, #7A5CFF 100%) !important;
  border-color: #0284c7 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.28) !important;
}

/* Crisp HD Thumbnail & Video Rendering */
.kling-card-media img {
  backface-visibility: hidden;
  transform: translateZ(0);
  filter: contrast(1.03) saturate(1.04);
}

/* ==========================================================================
   V3 MULTI-DEVICE SPACING, PADDING & CONTRAST POLISH (ALL VIEWPORTS & THEMES)
   ========================================================================== */

/* Typography balance & orphan prevention (modern-web-guidance: improve-text-layout-and-legibility) */
.hero h1,
.section-heading h2,
.faq-heading h2,
.closing h2,
.step h3,
.feature-main h3,
.feature-row h3 {
  text-wrap: balance;
}

.hero-copy,
.step p,
.feature-main p,
.feature-row p,
.faq-list p,
.section-footnote {
  text-wrap: pretty;
}

/* 1. 3-Step Workflow Cards (#cach-su-dung .steps > .step) — generous 4-sided card padding */
#cach-su-dung .steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

#cach-su-dung .step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 26px 26px 24px !important;
  border-radius: 18px !important;
  background: rgba(13, 20, 38, 0.85);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#cach-su-dung .step:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 212, 255, 0.45);
}

#cach-su-dung .step .step-number {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

#cach-su-dung .step h3 {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.42;
  margin: 16px 0 10px;
}

#cach-su-dung .step p {
  font-size: 13px;
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

#cach-su-dung .step .step-detail {
  display: block;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px dashed rgba(148, 163, 184, 0.26);
  font-size: 11px;
  font-weight: 600;
}

/* 2. Core Technical Capabilities (#tinh-nang .feature-grid, .feature-main, .feature-list) */
#tinh-nang .feature-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 26px;
  align-items: stretch;
}

#tinh-nang .feature-main {
  padding: 32px !important;
  border-radius: 22px !important;
}

#tinh-nang .feature-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px 28px !important;
  border-radius: 22px !important;
  background: rgba(13, 20, 38, 0.85);
  border: 1.5px solid rgba(56, 189, 248, 0.25);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.4);
}

#tinh-nang .feature-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0 !important;
  border-bottom: 1px solid rgba(56, 189, 248, 0.18);
}

#tinh-nang .feature-row:first-child {
  padding-top: 2px !important;
}

#tinh-nang .feature-row:last-child {
  padding-bottom: 2px !important;
  border-bottom: 0 !important;
}

#tinh-nang .feature-row h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.4;
}

#tinh-nang .feature-row p {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.72;
}

#tinh-nang .language-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

#tinh-nang .language-tags span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* 3. Quick Category Jump Strip (#the-loai.use-cases) — fix label overflow & pill alignment */
#the-loai.use-cases {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 20px !important;
  border-radius: 16px !important;
  background: rgba(13, 20, 38, 0.72) !important;
  border: 1px solid rgba(56, 189, 248, 0.22) !important;
}

html[data-theme="light"] #the-loai.use-cases {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04) !important;
}

#the-loai.use-cases .use-label {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px 6px 4px 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #cbd5e1 !important;
  white-space: nowrap;
}

html[data-theme="light"] #the-loai.use-cases .use-label {
  color: #334155 !important;
  background: transparent !important;
}

#the-loai.use-cases a[data-jump-cat] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #00D4FF;
  transition: all 0.18s ease;
}

html[data-theme="light"] #the-loai.use-cases a[data-jump-cat] {
  background: #f8fafc;
  border-color: rgba(148, 163, 184, 0.4);
  color: #0f172a;
}

html[data-theme="light"] #the-loai.use-cases a[data-jump-cat]:hover {
  background: #e0f2fe;
  border-color: #0284c7;
  color: #0284c7;
}

/* 4. Pricing Cards (#bang-gia-point) — clean header spacing, visible price numbers, non-cramped buttons */
#bang-gia-point .pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

#bang-gia-point .price-card {
  padding: 26px 22px !important;
  border-radius: 18px !important;
  display: flex;
  flex-direction: column;
}

#bang-gia-point .price-card h3 {
  font-size: 14px !important;
  margin: 0 0 16px !important;
}

#bang-gia-point .price-card.popular h3 {
  padding-right: 112px;
}

#bang-gia-point .popular-label {
  top: 24px !important;
  right: 16px !important;
  padding: 4px 10px !important;
  font-size: 8.5px !important;
  white-space: nowrap;
}

#bang-gia-point .price-card .button {
  min-height: 44px !important;
  padding: 10px 14px !important;
  font-size: 12px !important;
  border-radius: 10px !important;
  white-space: nowrap;
  width: 100%;
  justify-content: center;
}

/* 5. Kling Video Card Overlay & Aspect Pill — prevent "9:16 HD" wrapping */
.kling-card-overlay {
  padding: 11px 13px 13px !important;
  gap: 7px !important;
}

.kling-aspect-pill {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
}

.kling-compare-cta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-sound-pill,
.hero-mode-btn,
.bottom-mode-pill,
.deck-step-btn {
  white-space: nowrap;
}

.pricing-intro {
  max-width: 100%;
  flex-wrap: wrap;
}

/* 6. High-Contrast WCAG AA Light Mode Typography & Badges */
html[data-theme="light"] #cach-su-dung .step,
html[data-theme="light"] #tinh-nang .feature-list {
  background: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] #tinh-nang .feature-row {
  border-bottom-color: rgba(148, 163, 184, 0.25) !important;
}

html[data-theme="light"] .theme-toggle-btn {
  color: #b45309 !important;
  background: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .hero-content > .eyebrow {
  color: #0369a1 !important;
}

html[data-theme="light"] .hero-content > .eyebrow {
  background: rgba(2, 132, 199, 0.09) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

html[data-theme="light"] .text-link,
html[data-theme="light"] .text-link .arrow {
  color: #0369a1 !important;
}

html[data-theme="light"] .text-link:hover,
html[data-theme="light"] .text-link:hover .arrow {
  color: #0284c7 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .hero-actions .button.secondary > span {
  color: #0369a1 !important;
}

html[data-theme="light"] .hero-note .check,
html[data-theme="light"] .hero-note b {
  color: #047857 !important;
  text-shadow: none !important;
}

html[data-theme="light"] .visual-asterisk {
  color: #047857 !important;
  opacity: 0.14 !important;
}

html[data-theme="light"] .hero-mode-btn:not(.is-active) .popup-dot,
html[data-theme="light"] .bottom-mode-pill:not(.is-active) .mode-pill-dot {
  background: #64748b !important;
}

html[data-theme="light"] .hero-track-meta small {
  color: #475569 !important;
}

html[data-theme="light"] .hero-sound-pill {
  color: #0369a1 !important;
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.38) !important;
}

html[data-theme="light"] .hero-sound-pill[aria-pressed="true"] {
  color: #047857 !important;
  background: rgba(4, 120, 87, 0.12) !important;
  border-color: #059669 !important;
}

html[data-theme="light"] #btnHeroPlay,
html[data-theme="light"] .hero-play-icon-btn {
  color: #0f172a !important;
  background: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.42) !important;
}

html[data-theme="light"] #cach-su-dung .step .step-number {
  color: #0369a1 !important;
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.34) !important;
}

html[data-theme="light"] #cach-su-dung .step:nth-child(2) .step-number {
  color: #6d28d9 !important;
  background: rgba(109, 40, 217, 0.1) !important;
  border-color: rgba(109, 40, 217, 0.32) !important;
}

html[data-theme="light"] #cach-su-dung .step:nth-child(3) .step-number {
  color: #047857 !important;
  background: rgba(4, 120, 87, 0.1) !important;
  border-color: rgba(4, 120, 87, 0.34) !important;
}

html[data-theme="light"] #cach-su-dung .step .step-detail {
  color: #475569 !important;
  border-top-color: rgba(148, 163, 184, 0.32) !important;
}

html[data-theme="light"] .feature-icon {
  color: #0284c7 !important;
  background: rgba(2, 132, 199, 0.1) !important;
  border-color: rgba(2, 132, 199, 0.38) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .feature-row > svg {
  color: #0284c7 !important;
}

html[data-theme="light"] #tinh-nang .language-tags span {
  color: #0369a1 !important;
  background: rgba(2, 132, 199, 0.09) !important;
  border-color: rgba(2, 132, 199, 0.32) !important;
}

html[data-theme="light"] .pricing-intro,
html[data-theme="light"] .pricing-intro span {
  color: #0369a1 !important;
  background: rgba(2, 132, 199, 0.09) !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

html[data-theme="light"] .price-vip strong {
  color: #047857 !important;
}

html[data-theme="light"] .calc-controls label,
html[data-theme="light"] .calc-note,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .footer-bottom span {
  color: #475569 !important;
}

/* 7. Responsive Multi-Device Breakpoints (Tablet 980px / 850px & Mobile 600px / 480px) */
@media (max-width: 980px) {
  #cach-su-dung .steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #tinh-nang .feature-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  #bang-gia-point .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (max-width: 600px) {
  #cach-su-dung .step {
    padding: 22px 20px !important;
  }
  #tinh-nang .feature-main,
  #tinh-nang .feature-list {
    padding: 22px 20px !important;
    border-radius: 18px !important;
  }
  #the-loai.use-cases {
    padding: 12px 14px !important;
    gap: 8px;
  }
  #the-loai.use-cases .use-label {
    width: 100%;
    padding: 0 0 4px 0 !important;
    white-space: normal;
  }
  #bang-gia-point .pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #bang-gia-point .price-card {
    padding: 24px 20px !important;
  }
  #bang-gia-point .price-card.popular h3 {
    padding-right: 0;
  }
  #bang-gia-point .popular-label {
    position: static !important;
    order: -1;
    margin: 0 0 10px 0 !important;
    width: fit-content;
  }
  #bang-gia-point .price-card .button {
    font-size: 13px !important;
    padding: 12px 16px !important;
  }
}

@media (max-width: 480px) {
  .hide-xs {
    display: none;
  }
}

/* ==========================================================================
   8. V4 HERO SIDE ARROWS & BEFORE/AFTER MODAL SYMMETRY, NO-SCROLLBAR & ALIGNMENT
   ========================================================================== */

/* 8.1. Unified Circular Side Navigation Arrows (< >) on BOTH Hero Stage & Preview Modal */
.hero-arrow-btn,
.preview-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  border-radius: 50%;
  border: 1px solid rgba(0, 242, 254, 0.42);
  background: rgba(6, 11, 25, 0.84);
  color: #ffffff;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.hero-arrow-btn {
  width: 36px;
  height: 36px;
}

.hero-arrow-btn.prev {
  left: 10px;
}

.hero-arrow-btn.next {
  right: 10px;
}

.preview-nav-arrow {
  width: 42px;
  height: 42px;
}

.preview-nav-arrow.prev {
  left: 14px;
}

.preview-nav-arrow.next {
  right: 14px;
}

.hero-arrow-btn svg,
.preview-nav-arrow svg {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.hero-arrow-btn:hover,
.preview-nav-arrow:hover {
  background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%);
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 0 0 18px rgba(0, 212, 255, 0.55);
  transform: translateY(-50%) scale(1.07);
}

.hero-arrow-btn:active,
.preview-nav-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

html[data-theme="light"] .hero-arrow-btn,
html[data-theme="light"] .preview-nav-arrow {
  background: rgba(15, 23, 42, 0.78);
  border-color: rgba(56, 189, 248, 0.5);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.35);
}

html[data-theme="light"] .hero-arrow-btn:hover,
html[data-theme="light"] .preview-nav-arrow:hover {
  background: linear-gradient(135deg, #0284c7 0%, #7A5CFF 100%);
  border-color: #ffffff;
  color: #ffffff;
}

/* Harmonious Hero Stage framing for both 9:16 and 16:9 clips */
#heroVideoStage.clean-video-stage {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: radial-gradient(circle at center, #0c152b 0%, #03060f 100%);
  transition: aspect-ratio 0.2s ease;
}

#heroVideoStage.clean-video-stage[data-aspect="16:9"] {
  aspect-ratio: 16 / 10;
}

/* Prevent background scroll chaining & hide root scrollbar when modal dialog is open */
dialog:modal {
  overscroll-behavior: contain;
}

dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
}

html:has(dialog#videoPreviewModal[open]),
body:has(dialog#videoPreviewModal[open]) {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

/* 8.2. Before/After Preview Modal: Zero Scrollbar & Balanced 4-Sided Spacing */
dialog#videoPreviewModal.preview-modal {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  inset: 0 !important;
  margin: auto !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  max-height: calc(100dvh - 28px) !important;
  width: min(calc(100vw - 28px), 840px);
  max-width: min(calc(100vw - 28px), 840px);
  box-sizing: border-box !important;
}

dialog#videoPreviewModal.preview-modal::-webkit-scrollbar,
dialog#videoPreviewModal.preview-modal *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) {
  width: min(calc(100vw - 36px), 352px) !important;
  max-width: min(calc(100vw - 36px), 352px) !important;
}

dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="16:9"]) {
  width: min(calc(100vw - 28px), 840px) !important;
  max-width: min(calc(100vw - 28px), 840px) !important;
}

.preview-modal-Dialog {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  max-height: calc(100dvh - 28px) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  border-radius: 20px !important;
  display: flex;
  flex-direction: column;
}

.preview-modal-header {
  padding: 11px 14px !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}

.preview-modal-meta {
  flex: 1 1 auto;
  min-width: 0 !important;
  overflow: hidden;
}

.preview-modal-meta h3 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Harmonized Video Stage Padding (Equal 12px margin on top, bottom, left, right) */
#modalVideoStage.preview-stage-container {
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  background: radial-gradient(circle at center, #0d172e 0%, #03060e 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

#modalVideoStage.preview-stage-container[data-aspect="9:16"] {
  height: min(58dvh, 510px) !important;
  min-height: 290px !important;
}

#modalVideoStage.preview-stage-container[data-aspect="16:9"] {
  aspect-ratio: 16 / 9;
  height: auto !important;
  max-height: min(54dvh, 470px) !important;
  min-height: 210px !important;
}

#modalVideoStage .modal-stacked-video {
  position: absolute;
  inset: 12px !important;
  width: calc(100% - 24px) !important;
  height: calc(100% - 24px) !important;
  object-fit: cover;
  border-radius: 12px;
  background: #02040a;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55);
}

#modalVideoStage[data-aspect="16:9"] .modal-stacked-video {
  object-fit: contain;
}

/* 8.3. Aligned Control Deck Buttons (Zero Horizontal Overflow, Equal Heights, Flush Edges) */
.preview-control-deck {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 11px 14px 13px !important;
  gap: 9px !important;
  box-sizing: border-box !important;
  flex-shrink: 0;
}

.preview-scrubber-row {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 6px 8px !important;
  gap: 7px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.transport-scrubber {
  flex: 1 1 0% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.preview-switch-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* On wide 16:9 desktop modal (> 720px), allow single row for switch + actions */
@media (min-width: 720px) {
  dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="16:9"]) .preview-switch-row {
    flex-direction: row !important;
    align-items: center !important;
  }
  dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="16:9"]) .preview-bottom-popups {
    flex: 1 1 auto !important;
    width: auto !important;
  }
  dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="16:9"]) .preview-deck-actions {
    width: auto !important;
    flex: 0 0 auto !important;
  }
}

.preview-bottom-popups {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 4px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

.bottom-mode-pill {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 9px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hide verbose suffixes in portrait 9:16 modal or on screens <= 680px so buttons are 100% balanced */
dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) .hide-compact {
  display: none !important;
}

@media (max-width: 680px) {
  .hide-compact {
    display: none !important;
  }
}

.preview-deck-actions {
  display: grid !important;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.deck-step-btn,
.preview-cta-btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

.preview-cta-btn {
  width: 100% !important;
  min-width: 0 !important;
}

@media (max-width: 480px) {
  dialog#videoPreviewModal.preview-modal,
  dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="16:9"]) {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: calc(100dvh - 28px) !important;
  }
  dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) {
    width: min(calc(100vw - 36px), 344px) !important;
    max-width: min(calc(100vw - 36px), 344px) !important;
    max-height: calc(100dvh - 28px) !important;
  }
  .preview-modal-Dialog {
    max-height: calc(100dvh - 28px) !important;
    border-radius: 18px !important;
  }
  #modalVideoStage.preview-stage-container {
    padding: 12px !important;
  }
  #modalVideoStage .modal-stacked-video {
    inset: 12px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
    border-radius: 12px;
  }
  #modalVideoStage.preview-stage-container[data-aspect="9:16"] {
    height: min(57dvh, 486px) !important;
    min-height: 260px !important;
  }
  .preview-nav-arrow {
    width: 38px;
    height: 38px;
  }
  .preview-nav-arrow.prev {
    left: 12px;
  }
  .preview-nav-arrow.next {
    right: 12px;
  }
  .deck-step-btn,
  .preview-cta-btn {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 12px !important;
    font-size: 0.8rem !important;
  }
}

/* ==========================================================================
   9. V5 PLAY/PAUSE SVG ALIGNMENT, FULLSCREEN BUTTONS & FULLSCREEN STAGE
   ========================================================================== */

/* 9.1. Hero Secondary CTA SVG Alignment */
.hero-actions .button.secondary svg {
  display: block;
  flex-shrink: 0;
  color: #00D4FF;
}

html[data-theme="light"] .hero-actions .button.secondary svg {
  color: #0369a1;
}

/* 9.2. Hero Player Bottom Actions (Sound Pill + Play/Pause + Fullscreen) — Identical 30px Height & Centered SVG */
.hero-audio-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

.hero-sound-pill {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

.hero-sound-pill svg {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
}

#btnHeroPlay,
.hero-play-icon-btn,
#btnHeroFullscreen,
.hero-fullscreen-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56, 189, 248, 0.36) !important;
  background: rgba(15, 23, 42, 0.84) !important;
  color: #00D4FF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  box-sizing: border-box !important;
  transition: all 0.16s ease;
}

#btnHeroPlay svg,
.hero-play-icon-btn svg,
#btnHeroFullscreen svg,
.hero-fullscreen-btn svg {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  pointer-events: none;
}

#btnHeroPlay:hover,
.hero-play-icon-btn:hover,
#btnHeroFullscreen:hover,
.hero-fullscreen-btn:hover {
  background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.45);
}

html[data-theme="light"] #btnHeroPlay,
html[data-theme="light"] .hero-play-icon-btn,
html[data-theme="light"] #btnHeroFullscreen,
html[data-theme="light"] .hero-fullscreen-btn {
  color: #0369a1 !important;
  background: #f1f5f9 !important;
  border-color: rgba(2, 132, 199, 0.36) !important;
}

html[data-theme="light"] #btnHeroPlay:hover,
html[data-theme="light"] .hero-play-icon-btn:hover,
html[data-theme="light"] #btnHeroFullscreen:hover,
html[data-theme="light"] .hero-fullscreen-btn:hover {
  background: linear-gradient(135deg, #0284c7 0%, #7A5CFF 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 9.3. Modal Transport Bar Buttons (Play/Pause, Mute/Unmute, Fullscreen) — Identical 32px Square & Centered SVG */
.transport-play-btn,
.transport-mute-btn,
.transport-fullscreen-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  background: rgba(15, 23, 42, 0.88) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  box-sizing: border-box !important;
  transition: all 0.16s ease;
}

.transport-play-btn svg,
.transport-mute-btn svg,
.transport-fullscreen-btn svg {
  display: block !important;
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0 !important;
  pointer-events: none;
}

.transport-play-btn:hover,
.transport-mute-btn:hover,
.transport-fullscreen-btn:hover {
  background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(0, 212, 255, 0.45);
}

html[data-theme="light"] .transport-play-btn,
html[data-theme="light"] .transport-mute-btn,
html[data-theme="light"] .transport-fullscreen-btn {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
}

html[data-theme="light"] .transport-play-btn:hover,
html[data-theme="light"] .transport-mute-btn:hover,
html[data-theme="light"] .transport-fullscreen-btn:hover {
  background: linear-gradient(135deg, #0284c7 0%, #7A5CFF 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 9.4. Kling Video Card Play Pill & Fullscreen Button */
.kling-play-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  line-height: 1 !important;
}

.kling-play-pill svg {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  color: #00D4FF !important;
  flex-shrink: 0 !important;
}

.kling-card-right-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-shrink: 0;
}

.kling-card-fs-btn {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 7px !important;
  border: 1px solid rgba(56, 189, 248, 0.34) !important;
  background: rgba(15, 23, 42, 0.84) !important;
  color: #00D4FF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  cursor: pointer;
  transition: all 0.16s ease;
}

.kling-card-fs-btn svg {
  display: block !important;
  width: 13px !important;
  height: 13px !important;
  flex-shrink: 0 !important;
  pointer-events: none;
}

.kling-card-fs-btn:hover {
  background: linear-gradient(135deg, #00D4FF 0%, #7A5CFF 100%) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: scale(1.06);
}

html[data-theme="light"] .kling-card-fs-btn {
  background: #f1f5f9 !important;
  color: #0369a1 !important;
  border-color: rgba(2, 132, 199, 0.35) !important;
}

html[data-theme="light"] .kling-card-fs-btn:hover {
  background: linear-gradient(135deg, #0284c7 0%, #7A5CFF 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* 9.5. Fullscreen Stage Styling for Hero Player & Before/After Modal */
.demo-shell:fullscreen,
.demo-shell:-webkit-full-screen,
.preview-modal-Dialog:fullscreen,
.preview-modal-Dialog:-webkit-full-screen {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 12px 16px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #03060f !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.demo-shell:fullscreen #heroVideoStage,
.demo-shell:-webkit-full-screen #heroVideoStage,
.preview-modal-Dialog:fullscreen #modalVideoStage,
.preview-modal-Dialog:-webkit-full-screen #modalVideoStage {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

.demo-shell:fullscreen .hero-stacked-video,
.demo-shell:-webkit-full-screen .hero-stacked-video,
.preview-modal-Dialog:fullscreen .modal-stacked-video,
.preview-modal-Dialog:-webkit-full-screen .modal-stacked-video {
  object-fit: contain !important;
}

.demo-shell:fullscreen .hero-bottom-deck,
.demo-shell:-webkit-full-screen .hero-bottom-deck,
.preview-modal-Dialog:fullscreen .preview-control-deck,
.preview-modal-Dialog:-webkit-full-screen .preview-control-deck {
  max-width: 680px !important;
  width: 100% !important;
  margin-inline: auto !important;
}

/* ==========================================================================
   10. V6 ENLARGED NORMAL VIDEO STAGE & ULTRA-SMOOTH GPU COMPOSITING
   ========================================================================== */

/* 10.1. GPU Hardware Compositor Layering for 0ms Instant A/B Video Switching */
.hero-stacked-video,
.modal-stacked-video {
  will-change: opacity;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.05s linear !important;
}

/* 10.2. Larger, Well-Proportioned Hero Video Player in Normal View */
@media (min-width: 981px) {
  .hero-grid {
    grid-template-columns: 0.95fr 1.05fr !important;
    gap: 34px !important;
    align-items: center !important;
  }
}

.hero-visual {
  min-height: 0 !important;
  padding: 6px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#heroDemoShell.demo-shell,
.demo-shell {
  width: min(100%, 384px) !important;
  max-width: 100% !important;
  padding: 11px !important;
  border-radius: 23px !important;
  transition: width 0.24s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* When Hero plays a 16:9 horizontal clip (e.g., Mẫu #49), expand to full widescreen theater width */
#heroDemoShell.demo-shell:has(#heroVideoStage[data-aspect="16:9"]),
.demo-shell:has(#heroVideoStage[data-aspect="16:9"]) {
  width: min(100%, 556px) !important;
}

#heroVideoStage.clean-video-stage {
  aspect-ratio: 9 / 13.6 !important;
  border-radius: 15px !important;
}

#heroVideoStage.clean-video-stage[data-aspect="16:9"] {
  aspect-ratio: 16 / 9 !important;
}

#heroVideoStage[data-aspect="16:9"] .hero-stacked-video {
  object-fit: cover !important;
}

@media (max-width: 850px) and (min-width: 601px) {
  #heroDemoShell.demo-shell,
  .demo-shell {
    width: min(100%, 366px) !important;
  }
  #heroDemoShell.demo-shell:has(#heroVideoStage[data-aspect="16:9"]),
  .demo-shell:has(#heroVideoStage[data-aspect="16:9"]) {
    width: min(100%, 490px) !important;
  }
}

@media (max-width: 600px) {
  #heroDemoShell.demo-shell,
  .demo-shell {
    width: min(100%, 346px) !important;
    padding: 9px 10px 10px !important;
  }
  #heroDemoShell.demo-shell:has(#heroVideoStage[data-aspect="16:9"]),
  .demo-shell:has(#heroVideoStage[data-aspect="16:9"]) {
    width: min(100%, 358px) !important;
    padding: 9px 10px 10px !important;
  }
  #heroVideoStage.clean-video-stage:not([data-aspect="16:9"]) {
    aspect-ratio: 9 / 13.2 !important;
    max-height: calc(100dvh - 266px) !important;
  }
}

/* 10.3. Larger Normal Video Stage in Before/After Preview Modal */
#modalVideoStage.preview-stage-container {
  padding: 8px !important;
}

#modalVideoStage .modal-stacked-video {
  inset: 8px !important;
  width: calc(100% - 16px) !important;
  height: calc(100% - 16px) !important;
}

@media (min-width: 601px) {
  dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="9:16"]) {
    width: min(92dvw, 436px) !important;
    max-width: min(92dvw, 436px) !important;
  }
  #modalVideoStage.preview-stage-container[data-aspect="9:16"] {
    height: min(65dvh, 600px) !important;
    min-height: 360px !important;
  }
  dialog#videoPreviewModal.preview-modal:has(#modalVideoStage[data-aspect="16:9"]) {
    width: min(92dvw, 960px) !important;
    max-width: min(92dvw, 960px) !important;
  }
  #modalVideoStage.preview-stage-container[data-aspect="16:9"] {
    max-height: min(65dvh, 550px) !important;
    min-height: 260px !important;
  }
}

/* 10.4. Full-Viewport Cinema Fullscreen (Zero Chrome Bottom White Popup + <3s Top Toast Hint) */
html.has-cinema-fullscreen,
html.has-cinema-fullscreen body {
  overflow: hidden !important;
  scrollbar-width: none !important;
}

html:has(dialog#videoPreviewModal[open])::-webkit-scrollbar,
body:has(dialog#videoPreviewModal[open])::-webkit-scrollbar,
html.has-cinema-fullscreen::-webkit-scrollbar,
html.has-cinema-fullscreen body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html.has-cinema-fullscreen .site-header,
html.has-cinema-fullscreen .mobile-sticky-cta {
  visibility: hidden !important;
  pointer-events: none !important;
}

#heroDemoShell.demo-shell.is-cinema-fullscreen,
.demo-shell.is-cinema-fullscreen,
dialog#videoPreviewModal.preview-modal.is-cinema-fullscreen,
dialog#videoPreviewModal.preview-modal.is-cinema-fullscreen:has(#modalVideoStage[data-aspect="9:16"]),
dialog#videoPreviewModal.preview-modal.is-cinema-fullscreen:has(#modalVideoStage[data-aspect="16:9"]),
.preview-modal-Dialog.is-cinema-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: #03060f !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  transform: none !important;
  transition: none !important;
  box-sizing: border-box !important;
}

#heroDemoShell.demo-shell.is-cinema-fullscreen,
.demo-shell.is-cinema-fullscreen {
  padding: 10px 14px 14px !important;
}

.demo-shell.is-cinema-fullscreen #heroVideoStage,
#heroDemoShell.demo-shell.is-cinema-fullscreen #heroVideoStage,
.preview-modal-Dialog.is-cinema-fullscreen #modalVideoStage,
dialog#videoPreviewModal.is-cinema-fullscreen #modalVideoStage {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: auto !important;
}

#heroDemoShell.demo-shell.is-cinema-fullscreen .hero-stacked-video,
.demo-shell.is-cinema-fullscreen .hero-stacked-video,
.preview-modal-Dialog.is-cinema-fullscreen .modal-stacked-video,
dialog#videoPreviewModal.is-cinema-fullscreen .modal-stacked-video {
  object-fit: contain !important;
}

#heroDemoShell.demo-shell.is-cinema-fullscreen .hero-bottom-deck,
.demo-shell.is-cinema-fullscreen .hero-bottom-deck,
.preview-modal-Dialog.is-cinema-fullscreen .preview-control-deck,
dialog#videoPreviewModal.is-cinema-fullscreen .preview-control-deck {
  max-width: 680px !important;
  width: 100% !important;
  margin-inline: auto !important;
}

/* Compact Top Toast Hint (Auto-fades in 2.5s < 3s, never covers bottom controls) */
.cinema-fs-toast {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translate(-50%, -6px);
  z-index: 12;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(10, 16, 30, 0.86);
  border: 1px solid rgba(56, 189, 248, 0.42);
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.cinema-fs-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
  cursor: pointer;
}

.cinema-fs-toast[hidden] {
  display: none !important;
}

/* 10.5. Tap-to-Pause / Tap-to-Play Stage Indicator (Centered Play Badge When Paused) */
#heroVideoStage,
#modalVideoStage {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.stage-tap-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.82);
  z-index: 4;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(6, 11, 25, 0.72);
  border: 1.5px solid rgba(0, 212, 255, 0.58);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.65), 0 0 18px rgba(0, 212, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.stage-tap-indicator svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
  display: block;
}

#heroVideoStage.is-stage-paused .stage-tap-indicator,
#modalVideoStage.is-stage-paused .stage-tap-indicator {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* 10.6. Light Mode Harmonized Before/After Video Stage Frame (Zero Dark Borders) */
html[data-theme="light"] #modalVideoStage.preview-stage-container {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

html[data-theme="light"] #modalVideoStage .modal-stacked-video {
  background: #f1f5f9 !important;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.10) !important;
  border: 1px solid rgba(148, 163, 184, 0.30);
}

html[data-theme="light"] .video-stage,
html[data-theme="light"] #heroVideoStage.clean-video-stage,
html[data-theme="light"] #heroVideoStage .hero-stacked-video,
html[data-theme="light"] #heroVideoStage[data-aspect="16:9"] .hero-stacked-video {
  background: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}

html[data-theme="light"] #heroDemoShell.demo-shell.is-cinema-fullscreen,
html[data-theme="light"] .demo-shell.is-cinema-fullscreen,
html[data-theme="light"] dialog#videoPreviewModal.preview-modal.is-cinema-fullscreen,
html[data-theme="light"] .preview-modal-Dialog.is-cinema-fullscreen,
html[data-theme="light"] .demo-shell:fullscreen,
html[data-theme="light"] .preview-modal-Dialog:fullscreen {
  background: #f8fafc !important;
}