/* Trang giới thiệu chuyên đề AI làm slide động: bổ sung cho mo.css (dùng chung thiết kế trang AI cho mọi người). */
.why-list li b{color:var(--gold-2)}

/* Bài slide mẫu chạy được ngay trên trang */
.demo{display:grid;gap:16px;justify-self:center;width:min(600px,100%)}
.deck{position:relative;background:#0b1424;border:1px solid var(--glass-b);border-radius:18px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);overflow:hidden}
.deck-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:radial-gradient(120% 90% at 85% 10%,rgba(226,184,96,.18),transparent 55%),radial-gradient(90% 80% at 0% 100%,rgba(95,212,255,.14),transparent 60%),#0b1424}
.sl{position:absolute;inset:0;padding:clamp(16px,4%,30px) clamp(18px,5%,36px);display:flex;flex-direction:column;justify-content:center;gap:8px;opacity:0;transform:translateX(24px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.sl.on{opacity:1;transform:none;pointer-events:auto}
.sl.ra{transform:translateX(-24px)}
.sl-k{font-size:clamp(9px,1.6vw,11px);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.sl h4{font-family:var(--serif);font-size:clamp(18px,3.6vw,30px);line-height:1.15;color:#fff}
.sl p,.sl li{font-size:clamp(11px,1.9vw,15px);color:var(--ink-2);line-height:1.45}
.sl ul{list-style:none;display:grid;gap:6px}
.sl li{padding-left:16px;position:relative}
.sl li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--cyan)}
.sl > *{opacity:0;transform:translateY(10px);transition:opacity .45s ease,transform .45s ease}
.sl.on > *{opacity:1;transform:none}
.sl.on > *:nth-child(2){transition-delay:.12s}
.sl.on > *:nth-child(3){transition-delay:.24s}
.sl.on > *:nth-child(4){transition-delay:.36s}
.sl-bars{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,9%,48px);align-items:end;height:clamp(70px,13vw,150px);margin-top:1.7em;padding:0 4px;border-bottom:1px solid rgba(255,255,255,.25);background:repeating-linear-gradient(to top,rgba(255,255,255,.07) 0 1px,transparent 1px 25%)}
.sl-bars i{position:relative;display:block;height:calc(var(--v) / 2410 * 100%)}
.sl-bars i::before{content:"";position:absolute;inset:0;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,var(--c1),var(--c2));box-shadow:0 0 24px -4px var(--c1),inset 0 1px 0 rgba(255,255,255,.5);transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.34,1.45,.64,1) .3s}
.sl-bars i::after{content:"";position:absolute;inset:0;border-radius:10px 10px 3px 3px;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) no-repeat;background-size:250% 100%;background-position:150% 0;opacity:0}
.sl-bars i:nth-child(1){--c1:#7fe3ff;--c2:#2b6cff}
.sl-bars i:nth-child(2){--c1:#c4a8ff;--c2:#6d4aff}
.sl-bars i:nth-child(3){--c1:#ffe08a;--c2:#e0902a}
.sl.on .sl-bars i::before{transform:scaleY(1)}
.sl.on .sl-bars i:nth-child(2)::before{transition-delay:.5s}
.sl.on .sl-bars i:nth-child(3)::before{transition-delay:.7s}
.sl.on .sl-bars i::after{animation:sdshine 1.1s ease 1.6s forwards}
.sl.on .sl-bars i:nth-child(3){animation:sdglow 2.4s ease-in-out 1.7s infinite}
@keyframes sdshine{0%{opacity:1;background-position:150% 0}100%{opacity:1;background-position:-60% 0}}
@keyframes sdglow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,200,90,0))}50%{filter:drop-shadow(0 0 14px rgba(255,200,90,.7))}}
.sl-bars em{position:absolute;top:-1.7em;left:0;right:0;text-align:center;font-style:normal;font-weight:800;font-size:clamp(11px,1.9vw,15px);color:#fff;opacity:0;transition:opacity .4s ease .5s}
.sl.on .sl-bars em{opacity:1}
.sl-bars i:nth-child(3) em{color:#ffe08a}
.sl-bars s{position:absolute;bottom:-1.8em;left:0;right:0;text-align:center;text-decoration:none;font-size:clamp(10px,1.6vw,12px);color:var(--ink-3)}
.sl-tang{margin-top:1.9em;font-size:clamp(11px,1.8vw,14px)!important;color:var(--ink-2)!important}
.sl-tang b{display:inline-block;margin-right:6px;padding:2px 10px;border-radius:999px;background:rgba(61,220,132,.16);color:#5ef0a0;font-weight:800}
.sl.on > .sl-tang{transition-delay:1.5s}
@media (prefers-reduced-motion:reduce){.sl-bars i::before{transition:none}.sl.on .sl-bars i::after,.sl.on .sl-bars i:nth-child(3){animation:none}}
.sl-so{display:flex;align-items:center;gap:clamp(12px,4%,26px)}
.sl-ring{--p:48;width:clamp(70px,16vw,116px);aspect-ratio:1;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p) * 1%),rgba(255,255,255,.1) 0);position:relative}
.sl-ring::before{content:"";position:absolute;inset:14%;border-radius:50%;background:#0b1424}
.sl-ring b{position:relative;font-family:var(--serif);font-size:clamp(18px,4vw,30px);color:#fff}
.sl-cta{display:inline-block;align-self:flex-start;margin-top:6px;padding:6px 14px;border-radius:999px;background:var(--gold);color:#111;font-weight:700;font-size:clamp(11px,1.9vw,14px)}
.deck-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-top:1px solid var(--glass-b);background:rgba(255,255,255,.03)}
.deck-bar button{width:36px;height:36px;border-radius:50%;border:1px solid var(--glass-b);background:var(--glass);color:var(--ink);font-size:18px;line-height:1;cursor:pointer}
.deck-bar button:hover{border-color:var(--gold)}
.deck-dots{display:flex;gap:6px;align-items:center}
.deck-dots span{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22);transition:background .3s,width .3s}
.deck-dots span.on{background:var(--gold);width:18px;border-radius:4px}
.deck-no{font-size:12px;color:var(--ink-3);min-width:44px;text-align:center}
.deck-play{font-size:12px!important;width:auto!important;padding:0 12px;border-radius:999px!important}
@media (prefers-reduced-motion:reduce){.sl,.sl > *,.sl-bars i{transition:none}}
.reg .info dd .price{white-space:nowrap}
.final-bg{background:linear-gradient(0deg,var(--bg),rgba(5,8,15,.55) 40%,var(--bg)),url('../img/hero.jpg') center/cover no-repeat}

/* Hero: sản phẩm chính của chuyên đề (bài slide động chạy thật) thay cho ảnh minh hoạ (Tim 24/10/2026 21:52). Ảnh nền làm không khí, làm tối và mờ. */
.hero-sd .hero-media img{filter:blur(3px) brightness(.5) saturate(1.1)}
.hero-sd .hero-shade{background:linear-gradient(90deg,rgba(5,8,15,.94) 0%,rgba(5,8,15,.7) 40%,rgba(5,8,15,.3) 70%,rgba(5,8,15,.35) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 28%)}
.hero-sd .hero-inner{position:relative}
.hero-show{margin-top:8px}
.deck-hero{border-radius:16px;box-shadow:0 50px 120px -30px rgba(0,0,0,.95),0 0 0 1px rgba(226,184,96,.25),0 0 80px -10px rgba(95,212,255,.25)}
.deck-chrome{display:flex;align-items:center;gap:7px;padding:10px 14px;background:rgba(255,255,255,.05);border-bottom:1px solid var(--glass-b)}
.deck-chrome i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}
.deck-chrome i:first-child{background:#ff6b5f}.deck-chrome i:nth-child(2){background:#ffbd2e}.deck-chrome i:nth-child(3){background:#28c840}
.deck-chrome span{margin-left:10px;font-size:12px;color:var(--ink-3);background:rgba(0,0,0,.25);border-radius:6px;padding:2px 10px}
.sl-2c{display:grid;grid-template-columns:1fr minmax(0,42%);align-items:center;gap:clamp(12px,4%,26px)}
.sl-2c > div{display:flex;flex-direction:column;gap:8px}
.sl-2c img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:12px;box-shadow:0 20px 40px -16px rgba(0,0,0,.8)}
.hero-show-cap{margin-top:12px;font-size:13px;color:var(--ink-3)}
@media (min-width:1100px){
  .hero-sd .hero-inner > :not(.hero-show){max-width:min(560px,48%)}
  .hero-sd h1{font-size:clamp(56px,6.4vw,96px)}
  .hero-show{position:absolute;right:0;top:50%;transform:translateY(-50%);width:min(560px,46%);margin:0}

}
@media (max-width:1099px){
  .hero-sd .hero-inner{display:flex;flex-direction:column}
  .hero-show{order:-1;margin:0 0 26px;max-width:640px;width:100%}
}
@media (max-width:760px){
  .hero-sd .hero-inner{padding-top:84px}
  .hero-sd .hero-media,.hero-sd .hero-shade{height:100%}
  .hero-show{margin-bottom:22px}
  .deck-chrome span{display:none}
}
.js .hero-show{opacity:0;animation:sdin .9s ease .45s forwards}
@keyframes sdin{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .hero-show{opacity:1;animation:none}}
@media (max-width:1099px){.hero-sd .hero-inner{align-items:flex-start}.hero-show{max-width:540px}}
@media (min-width:1100px){.hero-sd .hero-inner > .hero-facts{max-width:none}.hero-show{top:46%}}
@media (max-width:760px){.deck-stage{aspect-ratio:4/3}}
/* Nhãn khung slide: không hiện tên tệp (Tim 23:38), thay bằng tên bài và trạng thái trình chiếu. */
.deck-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffb4ab}
.deck-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5f57;box-shadow:0 0 0 0 rgba(255,95,87,.6);animation:sdlive 1.8s ease-out infinite}
@keyframes sdlive{to{box-shadow:0 0 0 7px rgba(255,95,87,0)}}
@media (prefers-reduced-motion:reduce){.deck-live::before{animation:none}}