/* Conan Video · theme Timeline · bảng Chỉnh Màu (cv-grade) — theo template web.conan1.com/t/conan-video-site */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-fg); font: 400 16px/1.6 var(--font-sans); -webkit-font-smoothing: antialiased; position: relative; }
a { color: var(--color-primary); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: 8px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { letter-spacing: -0.02em; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 32px; } }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--color-surface); padding: 8px 16px; }
.muted { color: var(--color-muted); }
.small { font-size: 12px; }

/* Ánh cam góc trái, teal góc phải — như nền các màn template */
.glow { position: absolute; inset: 0 0 auto; height: 900px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 70% at 0% 0%, rgb(244 127 70 / .22), transparent 70%), radial-gradient(50% 60% at 100% 20%, rgb(0 165 187 / .16), transparent 70%); }

/* Header */
.nav { position: sticky; top: 0; z-index: 5; backdrop-filter: blur(16px); background: rgb(3 15 22 / .72); border-bottom: 1px solid var(--color-border); }
.nav .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; color: var(--color-fg); text-decoration: none; flex: none; }
.nav nav { flex: 1; display: flex; justify-content: center; }
.nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav a:not(.brand):not(.btn) { color: var(--color-muted); text-decoration: none; font-weight: 500; font-size: 14px; padding: 12px 0; display: inline-block; white-space: nowrap; }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--color-fg); }
.nav a[aria-current] { font-weight: 700; }
@media (max-width: 899px) {
  .nav .wrap { gap: 16px; overflow-x: auto; scrollbar-width: none; }
  .nav nav { justify-content: flex-start; }
  .nav ul { gap: 18px; }
  .nav .btn { display: none; }
}

/* Nút & chip */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 24px; border-radius: 14px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--color-fg); border: 1px solid var(--color-border); background: var(--color-bg); transition: background .2s var(--ease), transform .2s var(--ease); white-space: nowrap; }
.btn:hover { background: var(--color-surface); }
.btn.primary { background: var(--color-primary); border-color: transparent; color: var(--color-on-primary); }
.btn.primary:hover { background: #F79766; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 13px; border-radius: 999px; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--color-fg); background: rgb(237 243 246 / .06); border: 1px solid var(--color-border); }
.chip.on { background: var(--color-primary); color: var(--color-on-primary); border-color: transparent; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

main { padding: 0 16px 80px; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.page-head { padding: 56px 0 24px; }
.page-head h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; margin: 12px 0; font-weight: 700; }
.page-head .lead { color: var(--color-muted); font-size: 18px; margin: 0; max-width: 640px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 32px; }
.filters .chip { cursor: pointer; font: 500 15px var(--font-sans); padding: 10px 22px; min-height: 44px; color: var(--color-muted); background: transparent; }
.filters .chip.on { color: var(--color-on-primary); background: var(--color-primary); }

/* Hero trang chủ: phòng dựng tối, timeline kính, đội mascot trên clip */
.stage { position: relative; isolation: isolate; overflow: hidden; border-bottom: 1px solid var(--color-border); margin: 0 -16px; min-height: 600px; display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 768px) { .stage { margin: 0 -32px; } }
.stage .bd { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.stage .scene { width: 100%; height: 100%; }
.stage .dim { position: absolute; inset: 0; background: rgb(3 15 22 / .75); }
.stage-copy { padding: 56px 24px 40px; max-width: 640px; }
.stage h1 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1.05; margin: 16px 0; font-weight: 700; }
.stage h1 em { font-style: normal; color: var(--color-primary); }
.stage .lead { font-size: 18px; color: var(--color-muted); max-width: 520px; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.cast { display: flex; gap: 8px; align-items: flex-end; justify-content: center; padding: 0 24px 40px; }
.cast img { animation: float 3.4s ease-in-out infinite; filter: drop-shadow(0 10px 24px rgb(0 0 0 / .5)); }
@keyframes float { 50% { transform: translateY(-8px); } }
@media (min-width: 900px) {
  .stage { min-height: 640px; }
  .stage-copy { padding: 56px 48px 40px; max-width: 58%; }
  .stage .dim { display: none; }
  .cast { position: absolute; left: 55%; top: 42%; width: 38%; padding: 0; }
}
@media (max-width: 899px) { .cast img { width: 22%; height: auto; } }
@media (prefers-reduced-motion: reduce) { .cast img { animation: none; } }

/* Khối & lưới */
.block { margin-top: 64px; }
.block > .eyebrow { margin-bottom: 20px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px; }
.row-head h2 { font-size: 26px; margin: 0; }
.row-head a { color: var(--color-muted); font-size: 14px; text-decoration: none; }
.grid4 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grid3 { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid4 [hidden] { display: none; }

/* Các bước 01–04 */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.step { padding: 24px; border-radius: 16px; border: 1px solid var(--color-border); background: rgb(237 243 246 / .03); }
.step .num { display: block; font-size: 40px; font-weight: 500; line-height: 1; color: var(--color-primary); }
.step .h3 { font-size: 17px; margin: 16px 0 6px; }
.step p { margin: 0; color: var(--color-muted); font-size: 14px; }

/* Khối media: gradient theo màu, ô vuông viết tắt hoặc ảnh, mascot góc dưới */
.media { --tint: var(--color-primary); position: relative; display: grid; place-items: center; min-height: 160px; background: linear-gradient(135deg, color-mix(in oklch, var(--tint) 35%, transparent), transparent 60%), var(--color-surface); overflow: hidden; }
.media .badge { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgb(3 15 22 / .8); color: var(--color-fg); }
.media .sq { width: 84px; height: 84px; border-radius: 6px; background: var(--tint); display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--color-bg); }
.media .mm { position: absolute; left: 10px; bottom: 6px; width: 64px; height: 64px; filter: drop-shadow(0 6px 14px rgb(0 0 0 / .45)); }
.media .avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 2px solid var(--tint); }
.media .brandlogo { width: 72px; height: 72px; border-radius: 18px; background: #fff; padding: 10px; }
.media .hero-m { width: 120px; height: 120px; }
.media .stack { display: flex; }
.media .stack img { width: 56px; height: 56px; border-radius: 16px; background: #fff; margin-left: -12px; border: 2px solid var(--color-surface); object-fit: cover; }

/* Thẻ dọc */
.vcard { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-fg); text-decoration: none; transition: border-color .24s var(--ease), transform .24s var(--ease); }
a.vcard:hover { border-color: rgb(244 127 70 / .6); transform: translateY(-2px); }
.vcard .body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.vcard .h3 { font-size: 17px; margin: 0; line-height: 1.3; }
.vcard .desc { margin: 0; font-size: 13px; color: var(--color-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.foot-row { margin: auto 0 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }

/* Thẻ ngang (danh sách khóa) */
.hgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 560px), 1fr)); }
.hcard { display: grid; grid-template-columns: 1fr; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
@media (min-width: 640px) { .hcard { grid-template-columns: 2fr 3fr; } .hcard .media { min-height: 100%; } }
.hcard .body { padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.hcard .h3 { font-size: 22px; margin: 0; line-height: 1.25; }
.vi { display: block; font-size: 13px; font-weight: 400; color: var(--color-muted); margin-top: 2px; letter-spacing: 0; }
.lessons { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: l; }
.lessons li { counter-increment: l; position: relative; padding-left: 30px; font-size: 14px; font-weight: 500; }
.lessons li::before { content: counter(l, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 600; color: var(--color-primary); }
.lessons .vi { font-size: 12px; }

/* Câu chuyện / demo */
.stories { display: grid; gap: 20px; }
@media (min-width: 900px) { .stories { grid-template-columns: 2fr 1fr; } }
.player-card { border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.player { aspect-ratio: 16/9; position: relative; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgb(237 243 246 / .04) 0 2px, transparent 2px 28px), radial-gradient(60% 60% at 30% 30%, rgb(201 182 242 / .35), transparent), radial-gradient(50% 50% at 70% 80%, rgb(244 127 70 / .3), transparent), var(--color-surface); }
.play { width: 64px; height: 64px; border-radius: 50%; background: rgb(3 15 22 / .85); position: relative; }
.play::after { content: ""; position: absolute; left: 26px; top: 21px; border-left: 16px solid var(--color-fg); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.bar { position: absolute; left: 24px; right: 24px; bottom: 18px; height: 4px; border-radius: 2px; background: rgb(237 243 246 / .2); }
.bar i { display: block; width: 40%; height: 100%; border-radius: 2px; background: var(--color-accent); }
.player-card .cap { padding: 16px 20px 20px; display: grid; gap: 8px; justify-items: start; }
.player-card .h3 { margin: 0; font-size: 20px; }
.side { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; align-content: start; }
.side-item { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface); }
.side-item.on { border-color: var(--color-primary); }
.side-item .av { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: rgb(237 243 246 / .08); }
.side-item small { display: block; color: var(--color-muted); font-size: 12px; }
.album { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 32px 0 16px; }
.alb { --tint: var(--color-primary); aspect-ratio: 1; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in oklch, var(--tint) 40%, transparent), transparent 70%), var(--color-surface); border: 1px solid var(--color-border); }

/* Dải trích dẫn */
.quote-band { margin-top: 64px; padding: 28px; border-radius: 20px; border: 1px solid var(--color-border); background: rgb(0 165 187 / .08); display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.quote-band p { margin: 0; font-size: 15px; font-weight: 500; }

/* Văn bản pháp lý */
.prose { max-width: 720px; }
.prose h2 { font-size: 20px; margin-top: 32px; }

/* Footer 4 cột */
.foot { border-top: 1px solid var(--color-border); padding: 48px 0 32px; color: var(--color-muted); font-size: 14px; background: rgb(237 243 246 / .02); }
.foot .wrap { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.foot h2 { font-size: 14px; color: var(--color-fg); margin: 0 0 8px; letter-spacing: 0; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot a:not(.brand) { color: var(--color-muted); display: inline-block; padding: 6px 0; text-decoration: none; }
.foot a:not(.brand):hover { color: var(--color-fg); }
.foot .small { grid-column: 1 / -1; margin: 0; }
.filters .chip .n { opacity: .7; font-size: 12px; margin-left: 4px; }

/* Breadcrumb */
.crumbs { padding-top: 24px; font-size: 13px; color: var(--color-muted); }
.crumbs a { color: var(--color-muted); text-decoration: none; }
.crumbs a:hover { color: var(--color-fg); }
.crumbs [aria-current] { color: var(--color-fg); }
.vi-sub { margin: -4px 0 12px; color: var(--color-muted); font-size: 18px; }

/* Danh sách course trong thẻ track */
.lessons.links li::before { top: 2px; }
.lessons.links a { color: var(--color-fg); text-decoration: none; display: block; }
.lessons.links a:hover span[lang] { color: var(--color-primary); }
.hcard .h3 a { color: inherit; text-decoration: none; }
.hcard .foot-row .muted { font-size: 13px; }

/* Trang track */
.track-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; }
.mascot-lg { width: 180px; height: 180px; flex: none; filter: drop-shadow(0 12px 32px rgb(0 0 0 / .45)); animation: float 3.4s ease-in-out infinite; }
@media (max-width: 640px) { .mascot-lg { display: none; } }

/* Trang chi tiết course */
.course-hero { position: relative; isolation: isolate; overflow: hidden; margin: 0 -16px; padding: 0 16px 40px; border-bottom: 1px solid var(--color-border); display: grid; gap: 24px; align-items: start; }
@media (min-width: 768px) { .course-hero { margin: 0 -32px; padding: 0 32px 48px; } }
@media (min-width: 960px) { .course-hero { grid-template-columns: 1fr 360px; } }
.course-hero .bd { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; }
.course-hero .bd .scene { width: 100%; height: 100%; }
.course-hero h1 { font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08; margin: 20px 0 8px; }
.course-hero .lead { color: var(--color-muted); font-size: 17px; max-width: 560px; }
.ch-copy { padding-top: 8px; }
.enroll { margin-top: 24px; border-radius: 18px; overflow: hidden; border: 1px solid var(--color-border); background: rgb(10 24 31 / .85); backdrop-filter: blur(12px); }
.enroll .body { padding: 18px; display: grid; gap: 10px; }
.enroll .btn { justify-content: center; }
.ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; color: var(--color-muted); }
.ticks li::before { content: "◆"; color: var(--color-primary); font-size: 9px; margin-right: 8px; vertical-align: 2px; }
.course-main { display: grid; gap: 24px; }
@media (min-width: 960px) { .course-main { grid-template-columns: 1fr 360px; } }
.course-main h2 { font-size: 22px; margin: 0 0 16px; }
.outs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.outs li { padding: 14px 16px 14px 44px; border-radius: 12px; border: 1px solid var(--color-border); background: var(--color-surface); position: relative; font-weight: 500; font-size: 15px; }
.outs li::before { content: ""; position: absolute; left: 16px; top: 17px; width: 14px; height: 14px; border-radius: 4px; background: var(--color-primary); transform: rotate(45deg) scale(.8); }
.les-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; }
.les-list li { display: flex; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--color-border); font-size: 15px; }
.les-list li:first-child { border-top: 0; }
.les-list .n { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.side-box { padding: 20px; border-radius: 16px; border: 1px solid var(--color-border); background: var(--color-surface); align-self: start; }
.side-box .h3 { margin: 8px 0 12px; font-size: 18px; }
.side-box .h3 a { color: var(--color-fg); text-decoration: none; }
.more { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.more a { color: var(--color-fg); text-decoration: none; }
.more a:hover span[lang] { color: var(--color-primary); }
.more .vi { font-size: 12px; }

/* Showcase: lưới video thumbnail */
.vgrid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); grid-auto-flow: dense; }
.vgrid [hidden] { display: none; }
.vthumb { display: flex; flex-direction: column; gap: 10px; color: var(--color-fg); text-decoration: none; }
.vthumb.wide { grid-column: span 2; }
@media (max-width: 520px) { .vthumb.wide { grid-column: auto; } }
.vthumb .pic { position: relative; display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); }
.vthumb .pic img { display: block; width: 100%; height: auto; transition: transform .3s var(--ease); }
.vthumb:hover .pic img { transform: scale(1.03); }
.vthumb .dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: rgb(3 15 22 / .85); }
.vthumb .pl { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgb(244 127 70 / .92); opacity: 0; transition: opacity .2s; }
.vthumb .pl::after { content: ""; position: absolute; left: 21px; top: 16px; border-left: 15px solid var(--color-on-primary); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.vthumb:hover .pl, .vthumb:focus-visible .pl { opacity: 1; }
.vthumb .meta { display: grid; gap: 6px; }
.vthumb strong { font-size: 15px; line-height: 1.35; }
.empty { padding: 20px; border: 1px dashed var(--color-border); border-radius: 14px; color: var(--color-muted); margin: 0; }

/* Trang chi tiết video */
.vdetail { display: grid; gap: 32px; padding: 24px 0 8px; align-items: start; }
@media (min-width: 900px) { .vdetail { grid-template-columns: minmax(0, 380px) 1fr; } .vdetail.wide { grid-template-columns: minmax(0, 1.4fr) 1fr; } }
.player-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--color-border); background: #000; }
.player-wrap video { display: block; width: 100%; height: auto; max-height: 80vh; }
.vinfo h1 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; margin: 14px 0 10px; }
.vinfo .lead { color: var(--color-muted); font-size: 17px; margin: 0 0 20px; }
.qa { padding: 16px 0; border-top: 1px solid var(--color-border); }
.qa h2 { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 8px; }
.qa p { margin: 0; }
.specs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1px; border: 1px solid var(--color-border); border-radius: 14px; overflow: hidden; background: var(--color-border); }
.specs div { padding: 14px 16px; background: var(--color-surface); }
.specs dt { font-size: 12px; color: var(--color-muted); text-transform: uppercase; letter-spacing: .1em; }
.specs dd { margin: 4px 0 0; font-weight: 600; }
.specs a { color: var(--color-primary); }