/* ============================================================
   v2.css — hành trình qua các miền
   Chữ nằm trong không gian 3D (CSS3D) nên mọi kích thước là px tuyệt đối
   tính theo bề rộng bảng; engine tự co về đơn vị thế giới.
   ============================================================ */
@import url('../../fonts/local.css');

:root{
  --gold:#E3B23C; --gold-l:#F0C75E; --gold-d:#A87A1E;
  --red:#A8171D; --red-l:#E0353C; --red-d:#490A0D;
  --ink:#140F10; --cream:#F4EDE3; --paper:#FBF8F3;
  --f-display:'Playfair Display','Be Vietnam Pro',Georgia,serif;
  --f-sans:'Be Vietnam Pro','Segoe UI',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:auto; overflow-x:clip;}
body{margin:0; background:#120d0e; color:var(--cream); font-family:var(--f-sans); font-weight:300; -webkit-font-smoothing:antialiased;}

/* ---- ba tầng: WebGL · CSS3D · HTML ---- */
/* Thứ tự lớp: 3D dưới cùng, rồi lớp phủ tối, TRÊN CÙNG mới là chữ.
   Nếu để lớp phủ nằm trên chữ thì chính nó làm chữ mờ ở rìa màn hình. */
#gl{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; display:block;}
#vignette{position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(ellipse 86% 76% at 50% 50%, transparent 0%, rgba(8,5,6,.70) 100%);}
#css3d{position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden;}
#css3d > div{pointer-events:none;}

/* ---- điều hướng bám nhịp: trang không cuộn, mỗi cú lướt là một miền ---- */
main{position:relative; z-index:3; pointer-events:none;}
body.snap{overflow:hidden; height:100vh; overscroll-behavior:none; touch-action:none;}

/* ============================================================
   BẢNG CHỮ TRONG KHÔNG GIAN (CSS3DObject)
   ============================================================ */
.panel{
  color:var(--cream); font-family:var(--f-sans); font-weight:300;
  font-size:26px; line-height:1.5; text-align:left;
  text-shadow:0 2px 18px rgba(0,0,0,.92), 0 1px 3px rgba(0,0,0,.85);
  will-change:transform; position:relative; overflow-wrap:anywhere;
}
/* Nền toả mềm sau khối chữ, nằm ngay trong bảng nên xoay cùng nó.
   Đây là thứ giữ cho chữ đọc được khi bay ngang qua bánh răng vàng sáng. */
.panel:not(.tag)::before{
  content:''; position:absolute; inset:-64px -88px -64px -76px; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 60% 58% at 36% 50%,
    rgba(9,6,7,.90) 0%, rgba(9,6,7,.76) 40%, rgba(9,6,7,.36) 70%, rgba(9,6,7,0) 100%);
}
.panel.center::before,.panel.hero::before{
  background:radial-gradient(ellipse 58% 60% at 46% 50%,
    rgba(9,6,7,.90) 0%, rgba(9,6,7,.76) 42%, rgba(9,6,7,.34) 72%, rgba(9,6,7,0) 100%);
}
.panel.center{text-align:center;}
.panel.center .eyebrow{justify-content:center;}
.panel.center .eyebrow::before{display:none;}
.panel .beat{opacity:0; will-change:opacity,transform;}

.panel .eyebrow{
  font-weight:600; font-size:16px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); display:flex; align-items:center; gap:18px; margin:0 0 26px;
}
.panel .eyebrow::before{content:''; width:46px; height:2px; background:currentColor; opacity:.85;}
.panel .eyebrow.dim{color:rgba(244,237,227,.55); margin-top:34px;}

.panel h1,.panel h2{font-family:var(--f-display); font-weight:800; line-height:1.08; letter-spacing:0; margin:0 0 24px; text-wrap:balance; overflow-wrap:normal;}
.panel h1{font-size:76px;}
.panel h1 em{font-style:italic; color:var(--gold-l);}
.panel h2{font-size:62px;}
.panel.hero .lead{font-size:27px; max-width:640px; margin:0 0 10px;}
.panel .lead{font-size:29px; font-weight:300; color:rgba(250,245,238,.95); max-width:720px; margin:0 0 24px; line-height:1.45;}

.panel .quote{
  font-family:var(--f-display); font-style:italic; font-weight:600; font-size:31px; line-height:1.38;
  border-left:4px solid var(--gold); padding:14px 22px 14px 26px; margin:14px 0 24px; max-width:720px;
  background:linear-gradient(90deg, rgba(16,10,11,.72) 0%, rgba(16,10,11,.34) 70%, rgba(16,10,11,0) 100%);
  color:#FBF6EE;
}
.panel .concept-def{
  max-width:820px; padding:18px 22px 18px 26px; margin:10px 0 18px;
  border-left:4px solid var(--gold); background:linear-gradient(90deg, rgba(16,10,11,.78) 0%, rgba(16,10,11,.36) 78%, rgba(16,10,11,0) 100%);
  font-family:var(--f-display); font-weight:700; font-size:28px; line-height:1.32; color:#FBF6EE;
}
.panel .concept-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; max-width:840px;}
.panel .concept-grid > div{padding:13px 15px; border:1px solid rgba(227,178,60,.42); border-radius:4px; background:rgba(16,10,11,.82); font-size:18px; line-height:1.35;}
.panel .concept-grid b{display:block; margin-bottom:5px; font-family:var(--f-display); font-size:20px; line-height:1.1; color:var(--gold-l);}
.panel .concept-grid span{display:block;}
.panel .item{margin:0 0 20px; padding:18px 22px; border:1px solid rgba(227,178,60,.44); border-radius:4px; background:rgba(16,10,11,.82); font-size:24px; line-height:1.48; max-width:720px;}
.panel .item b{display:block; font-family:var(--f-display); font-weight:800; font-size:22px; color:var(--gold-l); letter-spacing:.02em; margin-bottom:6px;}
.panel .item i{color:var(--gold-l); font-style:italic;}
.panel .note{font-size:22px; color:rgba(247,241,233,.88); font-style:italic; max-width:700px; border-top:1px solid rgba(244,237,227,.24); padding-top:14px; margin-top:6px;}
.panel .note.small{font-size:17px; font-style:normal;}
/* chú nguồn trang: nhỏ, vàng nhạt, không phá nhịp đọc */
.panel .src{display:none !important;}
.panel .source-tag{display:inline-flex; align-items:center; max-width:720px; margin-top:10px; padding:6px 9px; border-left:2px solid rgba(227,178,60,.7); background:rgba(12,8,9,.72); color:rgba(244,237,227,.66); font-size:12px; line-height:1.35; font-style:normal; letter-spacing:0; text-shadow:none;}
.panel .item .src,.panel .row2 .src{display:inline-block; margin:6px 0 0 0;}
.panel .lead .src,.panel .note .src{display:inline-block; margin-left:10px;}
.panel .row2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; max-width:760px; font-size:22px; line-height:1.45;}
.panel .row2 > div{padding:16px 18px; border:1px solid rgba(227,178,60,.42); border-radius:4px; background:rgba(16,10,11,.82);}
.panel .row2 b{display:block; font-family:var(--f-display); color:var(--gold-l); font-size:20px; margin-bottom:6px;}
.panel .row2.toc{max-width:820px; margin:0 auto 16px; text-align:left; font-size:19px; line-height:1.38;}
.panel .row2.toc > div{min-height:116px; padding:14px 16px;}
.panel .focus-grid{margin-bottom:18px;}
.panel .challenge-grid{max-width:900px; margin:0 auto 18px; font-size:18px; text-align:left;}
.panel .challenge-grid > div{min-height:112px;}
.panel .action-list{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; max-width:820px; margin-bottom:18px;}
.panel .action-list > div{display:grid; grid-template-columns:48px minmax(0,1fr); gap:12px; align-items:start; padding:15px 17px; border-top:1px solid rgba(227,178,60,.56); background:rgba(16,10,11,.68); font-size:19px; line-height:1.38;}
.panel .action-list b{font-family:var(--f-display); font-size:27px; line-height:1; color:var(--gold-l);}

/* chữ khổng lồ */
.panel.mega-panel .mega{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:142px; line-height:1.02; letter-spacing:0; margin:0;
}
/* chữ viền: tô nhẹ bên trong để dấu tiếng Việt không trông như nét rời */
.panel.mega-panel .mega.o{-webkit-text-stroke:1.6px var(--gold); color:rgba(227,178,60,.34); text-shadow:0 2px 30px rgba(0,0,0,.85);}
.panel.mega-panel .lead{margin:40px auto 0; max-width:860px;}

/* số liệu */
.panel .stats{display:grid; grid-template-columns:1fr 1fr; gap:18px 26px; max-width:760px; margin-bottom:22px;}
.panel .stats .st{border-top:2px solid var(--gold); padding-top:10px; font-size:19px; color:rgba(247,241,233,.88); line-height:1.35;}
.panel .stats .st b{display:block; font-family:var(--f-display); font-weight:800; font-size:64px; line-height:1; color:var(--gold-l); letter-spacing:-.02em; margin-bottom:8px; font-variant-numeric:tabular-nums;}

/* nhãn nhỏ gắn vào vật thể */
.panel.tag{text-align:center; opacity:0;}
.panel .tag{
  display:inline-block; font-family:var(--f-sans); font-weight:600; font-size:17px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-l); background:rgba(12,8,9,.92); border:1px solid rgba(227,178,60,.62); padding:10px 16px; border-radius:3px;
  text-shadow:none;
}
.panel .tag.strong{background:var(--red); border-color:var(--red-l); color:#fff;}
.panel .pillar-lbl{font-family:var(--f-display); font-weight:800; font-size:24px; line-height:1.15; color:#FBF6EE; background:rgba(12,8,9,.92); border:1px solid rgba(227,178,60,.58); padding:14px 16px; border-radius:3px; text-shadow:none;}
.panel .pillar-lbl b{display:block; color:var(--gold-l); font-size:15px; letter-spacing:.2em; margin-bottom:6px;}
.panel .stat-lbl{font-size:17px; color:rgba(250,245,238,.94); background:rgba(12,8,9,.92); border:1px solid rgba(227,178,60,.58); padding:10px 14px; border-radius:3px; line-height:1.3; text-shadow:none;}
.panel .stat-lbl b{display:block; font-family:var(--f-display); font-weight:800; font-size:34px; color:var(--gold-l); line-height:1; margin-bottom:4px; font-variant-numeric:tabular-nums;}
.panel .slab-lbl{font-family:var(--f-display); font-weight:800; font-size:26px; line-height:1.22; color:#FBF6EE; text-align:center; padding:6px 4px; text-shadow:0 2px 10px rgba(0,0,0,.95);}
.panel .slab-lbl i{display:block; font-family:var(--f-sans); font-style:normal; font-weight:600; font-size:15px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-l); margin-bottom:9px;}

/* thẻ câu hỏi thảo luận */
.panel.qpanel{opacity:0;}
.panel .qcard{background:rgba(14,9,10,.94); border:1px solid rgba(227,178,60,.62); border-radius:6px; padding:24px 24px; text-align:left;}
.panel .qhead{font-weight:600; font-size:15px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-l); margin-bottom:12px;}
.panel .qtext{font-family:var(--f-display); font-weight:700; font-size:28px; line-height:1.28; margin-bottom:14px; color:#FBF6EE;}
.panel .qans{max-height:0; overflow:hidden; opacity:0; transition:max-height .8s cubic-bezier(.16,1,.3,1), opacity .5s;}
.panel .qcard.open .qans{max-height:900px; opacity:1;}
.panel.qpanel.single .qcard{padding:22px 24px;}
.panel.qpanel.single .qtext{font-size:30px; line-height:1.22;}
.panel.qpanel.single .qans ul{font-size:18.5px; line-height:1.36;}
.panel.qpanel.single .qans li{margin-bottom:6px;}
.panel.fit-tight h1{font-size:68px;}
.panel.fit-tight h2{font-size:54px;}
.panel.fit-tight.mega-panel .mega{font-size:124px;}
.panel.fit-tight .lead{font-size:25px; line-height:1.35;}
.panel.fit-tight .item{font-size:21px; line-height:1.36; padding:14px 18px; margin-bottom:14px;}
.panel.fit-tight .quote{font-size:27px; line-height:1.3; padding:12px 18px;}
.panel.fit-tight .concept-def{font-size:25px; line-height:1.28; padding:14px 18px; margin-bottom:14px;}
.panel.fit-tight .concept-grid > div{font-size:16.5px; line-height:1.28; padding:11px 13px;}
.panel.fit-tight .stats .st b{font-size:56px;}
.panel.fit-ultra h1{font-size:60px;}
.panel.fit-ultra h2{font-size:46px;}
.panel.fit-ultra.mega-panel .mega{font-size:108px;}
.panel.fit-ultra .lead{font-size:22px; line-height:1.3;}
.panel.fit-ultra .item{font-size:19px; line-height:1.32; padding:12px 16px; margin-bottom:12px;}
.panel.fit-ultra .quote{font-size:24px; line-height:1.28;}
.panel.fit-ultra .concept-def{font-size:22px; line-height:1.25; padding:12px 16px; margin-bottom:12px;}
.panel.fit-ultra .concept-grid > div{font-size:15px; line-height:1.24; padding:10px 12px;}
.panel.fit-ultra .concept-grid b{font-size:18px;}
.panel.fit-ultra .stats{gap:14px 20px;}
.panel.fit-ultra .stats .st b{font-size:48px;}
.panel.fit-micro h1{font-size:52px;}
.panel.fit-micro h2{font-size:40px;}
.panel.fit-micro.mega-panel .mega{font-size:92px;}
.panel.fit-micro .lead{font-size:19px; line-height:1.28;}
.panel.fit-micro .item,.panel.fit-micro .row2{font-size:17px; line-height:1.3;}
.panel.fit-micro .item{padding:10px 14px; margin-bottom:9px;}
.panel.fit-micro .quote{font-size:21px; line-height:1.25; padding:10px 14px;}
.panel.fit-micro .concept-def{font-size:19px; line-height:1.22; padding:10px 14px; margin-bottom:10px;}
.panel.fit-micro .concept-grid{gap:9px;}
.panel.fit-micro .concept-grid > div{font-size:13.5px; line-height:1.22; padding:9px 10px;}
.panel.fit-micro .concept-grid b{font-size:16px;}
.panel.fit-micro .eyebrow{font-size:13px; margin-bottom:16px;}
.panel .ahead{font-weight:600; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-l); margin:6px 0 8px;}
.panel .qans ul{margin:0; padding-left:20px; font-size:21px; line-height:1.48; color:rgba(250,245,238,.94);}
.panel .qans li{margin-bottom:8px;}
.panel .qans b{color:var(--gold-l); font-weight:600;}
.panel .qhint{font-size:14px; color:rgba(244,237,227,.5); letter-spacing:.08em; margin-top:10px;}
.panel .qhint kbd{border:1px solid rgba(244,237,227,.35); border-radius:3px; padding:1px 6px; font-family:var(--f-sans);}
.panel .qcard.open .qhint{display:none;}
.panel .outro-thanks{font-family:var(--f-display); font-size:34px; font-weight:800; color:var(--gold-l); margin-top:26px;}

/* ============================================================
   LỚP HTML PHẲNG: điều hướng, tiến độ, gợi ý, màn chờ
   ============================================================ */
#prog{position:fixed; top:0; left:0; height:2px; width:0; background:var(--gold); z-index:30;}
#rail{position:fixed; top:0; right:0; width:64px; height:100vh; z-index:20; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;}
#rail button{width:8px; height:8px; border-radius:50%; border:1px solid rgba(227,178,60,.55); background:transparent; padding:0; cursor:pointer; transition:all .35s; position:relative;}
#rail button:hover{transform:scale(1.5); background:rgba(227,178,60,.5);}
#rail button.on{background:var(--gold); border-color:var(--gold); transform:scale(1.35);}
#rail button::after{content:attr(data-t); position:absolute; right:20px; top:50%; transform:translateY(-50%); white-space:nowrap; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-l); background:rgba(20,15,16,.92); padding:.3rem .6rem; border-radius:2px; opacity:0; pointer-events:none; transition:opacity .25s;}
#rail button:hover::after{opacity:1;}
.chapter{position:fixed; left:1.5vw; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font-size:.66rem; letter-spacing:.32em; text-transform:uppercase; color:rgba(227,178,60,.55); z-index:20; pointer-events:none; font-weight:600;}
#hint{position:fixed; left:50%; bottom:2rem; transform:translateX(-50%); z-index:25; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,237,227,.5); display:flex; gap:.5rem; align-items:center; transition:opacity .6s; pointer-events:none;}
#hint kbd{border:1px solid rgba(244,237,227,.3); border-radius:3px; padding:.14rem .45rem; font-family:var(--f-sans); font-size:.66rem;}
#hint.hide{opacity:0; visibility:hidden;}
#jumpfade{position:fixed; inset:0; z-index:54; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 45%, rgba(227,178,60,.18), rgba(18,13,14,.98) 62%); transition:opacity .12s;}
#jumpfade.on{display:block;}
#transitionStage{position:fixed; inset:0; z-index:53; pointer-events:none; opacity:0; overflow:hidden;}
#transitionStage::before{content:''; position:absolute; inset:0; background:#f0c75e; opacity:0;}
#transitionStage .transition-label{position:absolute; left:50%; bottom:7.5vh; width:min(760px,76vw); transform:translate(-50%,18px); font-family:var(--f-sans); font-weight:400; font-size:clamp(14px,1.45vw,20px); line-height:1.45; color:rgba(244,237,227,.92); text-align:center; text-shadow:0 2px 14px #000; opacity:0;}
#transitionStage.on{opacity:1;}
#transitionStage.on .transition-label{animation:bridgeCopy 3.2s cubic-bezier(.2,.8,.2,1) both;}
#transitionStage.on.topic::before{animation:topicFlash 3.2s ease-in-out both;}
body.is-transitioning #gl{animation:cameraPulse 3.2s cubic-bezier(.65,0,.2,1) both;}
body.is-transitioning #css3d{animation:focusPass 3.2s cubic-bezier(.65,0,.2,1) both;}
@keyframes bridgeCopy{0%,10%,90%,100%{opacity:0;transform:translate(-50%,18px)} 22%,78%{opacity:1;transform:translate(-50%,0)}}
@keyframes topicFlash{0%,100%{opacity:0} 46%{opacity:.09} 58%{opacity:0}}
@keyframes cameraPulse{0%,100%{transform:scale(1)} 48%{transform:scale(1.045)}}
@keyframes focusPass{0%,100%{filter:blur(0);transform:scale(1)} 44%{filter:blur(5px);transform:scale(1.025)} 62%{filter:blur(1px)}}
#editToggle{position:fixed; right:22px; bottom:22px; z-index:82; width:46px; height:46px; border-radius:50%; border:1px solid rgba(227,178,60,.62); background:rgba(16,10,11,.9); color:var(--gold-l); font:700 23px/1 var(--f-sans); display:grid; place-items:center; cursor:pointer; box-shadow:0 8px 28px rgba(0,0,0,.45);}
#editToggle:hover,#editToggle.on{background:var(--gold); color:var(--ink); border-color:var(--gold-l);}
body.edit #css3d,body.edit #css3d > div,body.edit .panel,body.edit .panel *{pointer-events:auto;}
body.edit [contenteditable="true"]{outline:1px dashed rgba(240,199,94,.55); outline-offset:4px; cursor:text;}
#editbar{position:fixed; left:50%; bottom:.75rem; transform:translateX(-50%); z-index:80; display:none; gap:.42rem; align-items:center; justify-content:center; flex-wrap:wrap; width:min(1120px,calc(100vw - 32px)); padding:.55rem .7rem; border:1px solid rgba(227,178,60,.5); border-radius:5px; background:rgba(16,10,11,.96); color:var(--cream); font-size:.72rem; letter-spacing:.03em; box-shadow:0 10px 30px rgba(0,0,0,.45);}
body.edit #editbar{display:flex;}
#editbar b{color:var(--gold-l);}
#editbar button{font:inherit; color:var(--cream); background:rgba(227,178,60,.18); border:1px solid rgba(227,178,60,.45); border-radius:3px; min-height:30px; padding:.25rem .5rem; cursor:pointer;}
#editbar button[data-move]{width:32px; padding:0; font-size:16px;}
#editbar #activePanel{color:rgba(244,237,227,.68); min-width:92px;}
#editbar small{color:rgba(244,237,227,.58);}
#editbar select{font:inherit; color:var(--cream); background:rgba(227,178,60,.14); border:1px solid rgba(227,178,60,.45); border-radius:3px; min-height:30px; padding:.2rem .35rem; cursor:pointer;}
#editbar select option{background:#161011; color:var(--cream);}
#editbar #fontScaleVal{min-width:46px; text-align:center; color:var(--gold-l); font-variant-numeric:tabular-nums;}
#editbar .edit-sep{width:1px; height:20px; background:rgba(227,178,60,.35);}
.panel.edit-selected{outline:2px solid rgba(240,199,94,.9); outline-offset:10px;}
body.edit #transitionStage.on{pointer-events:auto;}
body.edit #transitionStage.on .transition-label{pointer-events:auto; outline:1px dashed rgba(240,199,94,.7); outline-offset:7px;}
#segueEditor{position:fixed; left:50%; bottom:74px; z-index:84; display:none; width:min(680px,calc(100vw - 28px)); transform:translateX(-50%); padding:14px; border:1px solid rgba(227,178,60,.55); border-radius:5px; background:rgba(14,9,10,.98); box-shadow:0 18px 50px rgba(0,0,0,.58);}
#segueEditor.on{display:block;}
#segueEditor .segue-head,#segueEditor .segue-actions{display:flex; align-items:center; justify-content:space-between; gap:10px;}
#segueEditor .segue-head b{color:var(--gold-l); font-size:13px;}
#segueEditor textarea{display:block; width:100%; margin:10px 0; resize:vertical; min-height:88px; padding:10px 12px; border:1px solid rgba(227,178,60,.4); border-radius:3px; background:#120d0e; color:var(--cream); font:15px/1.45 var(--f-sans);}
#segueEditor button{font:12px var(--f-sans); color:var(--cream); background:rgba(227,178,60,.16); border:1px solid rgba(227,178,60,.42); border-radius:3px; padding:7px 10px; cursor:pointer;}

@media(max-aspect-ratio:1/1){
  #rail{right:10px;}
  #editToggle{right:12px; bottom:12px; width:42px; height:42px;}
  #editbar{bottom:60px; width:calc(100vw - 18px); max-height:38vh; overflow:auto;}
  #segueEditor{bottom:154px;}
  .panel .concept-grid{grid-template-columns:1fr;}
  .panel .concept-def{max-width:720px;}
}

#intro{position:fixed; inset:0; z-index:60; background:#120d0e; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.3rem; transition:opacity 1.1s cubic-bezier(.16,1,.3,1), visibility 1.1s;}
#intro.gone{opacity:0; visibility:hidden;}
#intro .t{font-family:var(--f-display); font-size:1rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);}
#intro .bar{width:min(300px,46vw); height:2px; background:rgba(227,178,60,.22); overflow:hidden;}
#intro .bar i{display:block; height:100%; width:0; background:var(--gold); transition:width .4s;}
#intro .s{font-size:.7rem; letter-spacing:.14em; color:rgba(244,237,227,.45); text-transform:uppercase;}

/* đoạn mở màn render sẵn */
#cine{position:fixed; inset:0; z-index:90; background:#120d0e; display:none; transition:opacity 1.2s cubic-bezier(.16,1,.3,1), visibility 1.2s;}
#cine.on{display:block;}
#cine.gone{opacity:0; visibility:hidden;}
#cine video{width:100%; height:100%; object-fit:cover; display:block;}
#cine .skip{position:absolute; right:2.2rem; bottom:1.8rem; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(244,237,227,.45);}

/* dự phòng khi không có WebGL: hiện nội dung phẳng */
#fallback{display:none; position:relative; z-index:5; padding:8vh 8vw; max-width:1100px; margin:0 auto;}
body.nogl #fallback{display:block;}
body.nogl #gl,body.nogl #css3d,body.nogl main{display:none;}
#fallback .lite-notice{position:sticky; top:0; z-index:8; display:flex; gap:12px; align-items:center; justify-content:space-between; margin:-4vh 0 4vh; padding:12px 14px; border:1px solid rgba(227,178,60,.4); border-radius:6px; background:rgba(18,13,14,.94); box-shadow:0 8px 24px rgba(0,0,0,.36);}
#fallback .lite-notice b{color:var(--gold-l); font-family:var(--f-display); font-size:22px;}
#fallback .lite-notice span{font-size:14px; color:rgba(244,237,227,.72);}
#fallback .lite-notice a{color:var(--ink); background:var(--gold-l); border-radius:4px; padding:8px 10px; text-decoration:none; font-weight:700; white-space:nowrap;}
#fallback .panel{opacity:1; margin-bottom:10vh; font-size:18px; min-height:auto;}
#fallback .panel .beat{opacity:1 !important; transform:none !important;}
#fallback .panel h1{font-size:64px;} #fallback .panel h2{font-size:44px;}
#fallback .panel .mega{font-size:120px;}
#fallback .panel::before{inset:-20px; background:linear-gradient(90deg, rgba(9,6,7,.88), rgba(9,6,7,.42));}
#fallback .lite-panel{padding:22px 0; border-bottom:1px solid rgba(227,178,60,.18);}
#fallback .lite-panel .row2,#fallback .lite-panel .stats,#fallback .lite-panel .action-list,#fallback .lite-panel .concept-grid{grid-template-columns:1fr;}
#fallback .lite-panel .lead,#fallback .lite-panel .quote,#fallback .lite-panel .item,#fallback .lite-panel .note,#fallback .lite-panel .row2,#fallback .lite-panel .stats,#fallback .lite-panel .action-list,#fallback .lite-panel .concept-def,#fallback .lite-panel .concept-grid{max-width:none;}
#fallback .lite-q{margin-top:18px;}

body.reduce-motion *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
@media(max-width:820px){
  #rail{width:36px;} .chapter{display:none;}
  #fallback{padding:6vh 18px;}
  #fallback .lite-notice{position:relative; flex-wrap:wrap; margin:0 0 24px;}
  #fallback .panel h1{font-size:42px;}
  #fallback .panel h2{font-size:34px;}
  #fallback .panel .mega{font-size:58px;}
  #fallback .panel .lead{font-size:20px;}
  #fallback .panel .quote,#fallback .panel .concept-def{font-size:20px; line-height:1.32;}
  #fallback .panel .item,#fallback .panel .row2,#fallback .panel .note{font-size:17px;}
  #fallback .panel .stats .st b{font-size:46px;}
}

/* Che do chup nen cho ban PowerPoint du phong: chi giu lai canh 3D. */
body.notext #css3d,body.notext #rail,body.notext #chapter,body.notext #prog,body.notext #hint,body.notext #editToggle,body.notext #intro,body.notext #cine,body.notext #transitionStage{display:none !important;}