/* ============================================================
   MU FPT — INTRO WEB
   style.css · tông nâu gỗ + giấy da, chữ serif cổ điển
   ============================================================ */

/* ---------- 0. BIẾN MÀU & RESET ---------- */
:root{
  /* Nền tối tông nâu ấm */
  --bg:        #150c07;
  --bg-2:      #1e120a;
  --wood:      #3d2614;
  --wood-2:    #26160b;

  /* Giấy da dùng cho các thẻ nội dung */
  --parch:     #ece2c8;
  --parch-2:   #dccfab;
  --parch-ink: #3b2a16;
  --parch-mut: #6d5636;

  /* Kim loại và điểm nhấn */
  --gold:      #f0c979;
  --gold-2:    #bf8f3e;
  --gold-3:    #7c5a22;
  --amber:     #e08a2c;
  --red:       #a8321f;
  --red-2:     #6d1d11;

  --ink:       #f3e7cd;
  --muted:     #c2ac86;
  --line:      rgba(191,143,62,.42);

  --ff-dis:    'Cinzel','Playfair Display',Georgia,'Times New Roman',serif;
  --ff-head:   'Playfair Display','Noto Serif',Georgia,'Times New Roman',serif;
  --ff-vn:     'Noto Serif',Georgia,'Times New Roman',serif;
  --ease:      cubic-bezier(.22,.61,.36,1);
  --safe-b:    env(safe-area-inset-bottom,0px);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--ff-vn);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body:not([data-stage="landing"]){ overflow:hidden; height:100dvh; }

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,p{ margin:0; }

::selection{ background:var(--red); color:#ffeccf; }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:#180e08; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--gold-2),var(--red-2));
  border-radius:10px; border:2px solid #180e08;
}

/* ---------- 1. LỚP NỀN: VIDEO + PHỦ ---------- */
.scene{ position:fixed; inset:0; z-index:0; overflow:hidden; background:#0d0704; }

.scene__blur{
  position:absolute; inset:-6%;
  background:url('../img/bg-blur.jpg') center/cover no-repeat;
  filter:blur(18px) saturate(1.05) sepia(.18);
  transform:scale(1.12);
  opacity:.85;
}
.scene__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  transition:opacity .8s var(--ease), filter .8s var(--ease), transform 1.2s var(--ease);
}
@media (orientation:portrait){
  .scene__video{ object-fit:contain; }
}
.scene__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 10%, transparent 30%, rgba(21,12,7,.6) 100%),
    linear-gradient(to bottom, rgba(21,12,7,.55) 0%, rgba(21,12,7,.12) 35%, rgba(21,12,7,.8) 100%);
  transition:opacity .8s var(--ease), background .8s var(--ease);
}
.scene__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.07;
  background-image:radial-gradient(rgba(255,225,180,.6) .5px, transparent .6px);
  background-size:3px 3px;
  mix-blend-mode:overlay;
}

body[data-stage="loading"] .scene__video,
body[data-stage="gate"]    .scene__video{ opacity:.55; filter:blur(3px) saturate(.9) sepia(.12); transform:scale(1.04); }
body[data-stage="intro"]   .scene__video{ opacity:1;  filter:none; transform:none; }
body[data-stage="landing"] .scene__video{ opacity:.34; filter:blur(2px) saturate(.7) sepia(.25) brightness(.72); transform:scale(1.03); }

body[data-stage="intro"] .scene__veil{
  background:radial-gradient(130% 95% at 50% 50%, transparent 55%, rgba(0,0,0,.6) 100%);
}
body[data-stage="intro"] .scene__blur{ opacity:.5; }
body[data-stage="landing"] .scene__veil{
  background:linear-gradient(to bottom, rgba(21,12,7,.84) 0%, rgba(26,15,9,.93) 42%, var(--bg) 90%);
}

/* Tàn lửa bay */
.embers{ position:absolute; inset:0; pointer-events:none; }
.embers i{
  position:absolute; bottom:-6vh;
  width:3px; height:3px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 9px 2px rgba(224,138,44,.6);
  opacity:0; animation:ember linear infinite;
}
.embers i:nth-child(1){ left:8%;  animation-duration:15s; animation-delay:0s;   }
.embers i:nth-child(2){ left:21%; animation-duration:19s; animation-delay:2.5s; }
.embers i:nth-child(3){ left:35%; animation-duration:13s; animation-delay:5s;   }
.embers i:nth-child(4){ left:48%; animation-duration:21s; animation-delay:1.2s; }
.embers i:nth-child(5){ left:62%; animation-duration:16s; animation-delay:7s;   }
.embers i:nth-child(6){ left:74%; animation-duration:18s; animation-delay:3.4s; }
.embers i:nth-child(7){ left:86%; animation-duration:14s; animation-delay:9s;   }
.embers i:nth-child(8){ left:94%; animation-duration:20s; animation-delay:6.2s; }
@keyframes ember{
  0%   { transform:translate3d(0,0,0) scale(.6);    opacity:0; }
  12%  { opacity:.9; }
  100% { transform:translate3d(28px,-108vh,0) scale(1.4); opacity:0; }
}

/* ---------- 2. NÚT BẤM ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:13px 26px; min-height:52px;
  font-family:var(--ff-head); font-weight:700; font-size:.94rem; letter-spacing:.07em;
  border-radius:3px; overflow:hidden; white-space:nowrap;
  border:1px solid var(--gold-3);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.btn__ico{ font-size:1rem; line-height:1; opacity:.92; }
.btn::after{                       /* vệt sáng quét ngang */
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,240,205,.35), transparent);
  transform:skewX(-18deg); transition:left .55s var(--ease);
}
.btn:hover::after{ left:120%; }
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* Vàng đồng — nút chính */
.btn--gold{
  color:#33200a;
  background:linear-gradient(180deg,#f8e2ae 0%,var(--gold) 26%,var(--gold-2) 68%,#8f6626 100%);
  border-color:#f6dda9;
  box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,250,235,.8), inset 0 -2px 6px rgba(90,60,18,.4);
  text-shadow:0 1px 0 rgba(255,245,220,.5);
}
.btn--gold:hover{ box-shadow:0 14px 32px rgba(0,0,0,.6), 0 0 26px rgba(240,201,121,.35), inset 0 1px 0 rgba(255,250,235,.9); }

/* Đỏ gạch */
.btn--red{
  color:#ffeeda;
  background:linear-gradient(180deg,#c4432c 0%,var(--red) 42%,var(--red-2) 100%);
  border-color:#d98a5f;
  box-shadow:0 10px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,190,.3);
  text-shadow:0 1px 2px rgba(0,0,0,.5);
}
.btn--red:hover{ box-shadow:0 14px 32px rgba(0,0,0,.6), 0 0 24px rgba(168,50,31,.45); }

/* Gỗ tối */
.btn--ghost{
  color:var(--gold);
  background:linear-gradient(180deg, rgba(61,38,20,.9), rgba(30,18,10,.92));
  border-color:var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(240,201,121,.18), 0 8px 20px rgba(0,0,0,.45);
  text-shadow:0 1px 2px rgba(0,0,0,.6);
}
.btn--ghost:hover{ color:#ffeec4; border-color:var(--gold-2); box-shadow:inset 0 1px 0 rgba(240,201,121,.3), 0 12px 26px rgba(0,0,0,.55); }

.btn--lg{ padding:18px 44px; min-height:66px; font-size:1.06rem; letter-spacing:.11em; }

/* Nút biểu tượng tròn */
.icobtn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:44px; height:44px; border-radius:999px;
  font-size:1.05rem; color:var(--gold);
  /* Không dùng backdrop-filter: lồng blur trong blur khiến một số trình duyệt không vẽ nút. */
  background:linear-gradient(180deg, rgba(61,38,20,.92), rgba(26,15,9,.92));
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(240,201,121,.2), 0 6px 16px rgba(0,0,0,.5);
  transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease);
}
.icobtn:hover{ color:#fff3d6; border-color:var(--gold-2); }
.icobtn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.icobtn--wide{
  width:auto; padding:0 18px; font-family:var(--ff-head); font-size:.8rem; font-weight:700; letter-spacing:.13em;
}
.icobtn__off{ display:none; }
body.is-muted .icobtn__on{ display:none; }
body.is-muted .icobtn__off{ display:inline; }

/* ---------- 3. MÀN CHỜ TẢI ---------- */
.loader{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:24px; text-align:center;
  background:radial-gradient(60% 60% at 50% 45%, rgba(48,28,14,.6), rgba(13,7,4,.95));
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader__logo{
  width:min(210px,42vw); aspect-ratio:1; border-radius:14px; object-fit:cover;
  border:2px solid var(--gold-3);
  box-shadow:0 0 0 1px rgba(0,0,0,.7), 0 24px 60px rgba(0,0,0,.75), 0 0 70px rgba(191,143,62,.28);
  animation:breathe 3.2s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.035); } }

.loader__brand{
  font-family:var(--ff-dis); font-weight:900; font-size:clamp(1.5rem,5vw,2.2rem);
  letter-spacing:.32em; text-indent:.32em;
  background:linear-gradient(180deg,#fff3d4,var(--gold),var(--gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.loader__bar{
  width:min(280px,72vw); height:4px; border-radius:3px; overflow:hidden;
  background:rgba(240,201,121,.16); border:1px solid rgba(124,90,34,.5);
}
.loader__bar span{
  display:block; width:0; height:100%;
  background:linear-gradient(90deg,var(--red),var(--amber),var(--gold));
  box-shadow:0 0 12px rgba(240,201,121,.8);
  transition:width .3s var(--ease);
}
.loader__hint{ font-size:.84rem; color:var(--muted); letter-spacing:.05em; }
.loader__hint b{ color:var(--gold); }

/* ---------- 4. CỔNG VÀO ---------- */
.gate{
  position:fixed; inset:0; z-index:50;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px calc(32px + var(--safe-b));
  text-align:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.gate__inner{ display:flex; flex-direction:column; align-items:center; gap:16px; max-width:660px; }
.gate__logo{
  width:min(230px,46vw); aspect-ratio:1; border-radius:16px; object-fit:cover;
  border:2px solid var(--gold-3);
  box-shadow:0 24px 70px rgba(0,0,0,.8), 0 0 90px rgba(191,143,62,.32);
  animation:riseIn .9s var(--ease) both;
}
.gate__eyebrow{
  font-family:var(--ff-head); font-size:.82rem; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--amber);
  text-shadow:0 2px 6px rgba(0,0,0,.7);
  animation:riseIn .9s .1s var(--ease) both;
}
.gate__title{
  font-family:var(--ff-head); font-weight:900;
  font-size:clamp(1.7rem,6.6vw,3.3rem); line-height:1.1; letter-spacing:.03em;
  background:linear-gradient(180deg,#fff8e6 0%,var(--gold) 50%,#96692a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.75));
  animation:riseIn .9s .18s var(--ease) both;
}
#btnEnter{ margin-top:8px; animation:riseIn .9s .28s var(--ease) both; }
.gate__skip{
  opacity:1;
  font-size:.88rem; color:var(--muted); letter-spacing:.02em;
  border-bottom:1px dashed rgba(194,172,134,.45); padding-bottom:2px;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.gate__skip:hover{ color:var(--gold); border-color:var(--gold-2); }
.gate__note{ font-size:.78rem; color:rgba(194,172,134,.72); animation:riseIn .9s .44s var(--ease) both; }

@keyframes riseIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }

/* ---------- 5. HUD KHI CHIẾU INTRO ---------- */
.hud{
  position:fixed; inset:0; z-index:40; pointer-events:none;
  transition:opacity .5s var(--ease), visibility .5s;
}
.hud__top{
  position:absolute; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px clamp(14px,3vw,28px);
  background:linear-gradient(to bottom, rgba(13,7,4,.62), transparent);
}
.hud__logo{
  width:52px; height:52px; border-radius:8px; object-fit:cover;
  border:1px solid var(--gold-3); box-shadow:0 8px 24px rgba(0,0,0,.7);
}
.hud__tools{ display:flex; align-items:center; gap:10px; pointer-events:auto; }
#btnSkip[disabled]{ opacity:.55; cursor:default; }
.hud__bar{
  position:absolute; left:0; right:0; bottom:0;
  height:4px; background:rgba(0,0,0,.45);
}
.hud__bar span{
  display:block; width:0; height:100%;
  background:linear-gradient(90deg,var(--red),var(--amber),var(--gold));
  box-shadow:0 0 10px rgba(240,201,121,.75);
}

/* ---------- 6. TRANG CHÍNH ---------- */
.page{
  position:relative; z-index:20;
  transition:opacity .8s var(--ease), visibility .8s;
}

/* Thanh đầu trang — dải gỗ viền vàng */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; gap:16px;
  padding:11px clamp(14px,4vw,42px);
  background:linear-gradient(180deg, rgba(46,28,15,.96), rgba(22,13,7,.94));
  border-bottom:1px solid var(--gold-3);
  box-shadow:0 2px 0 rgba(240,201,121,.12), 0 10px 30px rgba(0,0,0,.55);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.topbar__brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.topbar__brand img{ width:44px; height:44px; border-radius:7px; object-fit:cover; border:1px solid var(--gold-3); }
.topbar__brand span{ display:flex; flex-direction:column; line-height:1.15; }
.topbar__brand b{ font-family:var(--ff-dis); font-size:1.06rem; letter-spacing:.16em; color:var(--gold); }
.topbar__brand small{ font-size:.7rem; color:var(--muted); letter-spacing:.06em; }

.topbar__nav{ display:flex; gap:26px; }
.topbar__nav a{
  position:relative; font-family:var(--ff-head); font-size:.9rem; font-weight:700;
  letter-spacing:.05em; color:var(--parch-2);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  transition:color .25s var(--ease);
}
.topbar__nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-6px; height:1px;
  background:linear-gradient(90deg,var(--amber),transparent); transition:right .3s var(--ease);
}
.topbar__nav a:hover{ color:var(--gold); }
.topbar__nav a:hover::after{ right:0; }
.topbar__tools{ display:flex; gap:8px; }

/* Khối hero */
.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:16px; padding:clamp(18px,4vh,44px) 20px clamp(40px,8vh,80px);
  min-height:calc(100dvh - 68px);
  justify-content:center;
}
.hero__logo{
  width:min(190px,38vw); aspect-ratio:1; border-radius:14px; object-fit:cover;
  border:2px solid var(--gold-3);
  box-shadow:0 22px 60px rgba(0,0,0,.75), 0 0 80px rgba(191,143,62,.26);
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 18px; border-radius:2px;
  font-family:var(--ff-head); font-size:.76rem; font-weight:700;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold);
  background:linear-gradient(180deg, rgba(61,38,20,.85), rgba(26,15,9,.85));
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(240,201,121,.18);
}
.hero__eyebrow i{
  width:6px; height:6px; border-radius:50%; background:var(--amber);
  box-shadow:0 0 10px 2px rgba(224,138,44,.85); animation:blink 1.8s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

.hero__title{
  font-family:var(--ff-head); font-weight:900;
  font-size:clamp(2rem,7.8vw,4.6rem); line-height:1.04; letter-spacing:.02em;
  background:linear-gradient(180deg,#fff8e6 0%,var(--gold) 48%,#96692a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.7));
}
.hero__lead{ max-width:640px; color:var(--muted); font-size:clamp(.9rem,2.4vw,1.02rem); text-shadow:0 2px 6px rgba(0,0,0,.6); }

/* Đồng hồ đếm ngược */
.cd{ margin-top:6px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.cd__label{
  font-family:var(--ff-head); font-size:.76rem; font-weight:700; letter-spacing:.24em; color:var(--amber);
  text-shadow:0 2px 6px rgba(0,0,0,.7);
}
.cd__grid{ display:flex; gap:clamp(8px,2vw,14px); }
.cd__cell{
  min-width:clamp(64px,15vw,90px);
  padding:12px 8px 9px; border-radius:3px; text-align:center;
  background:linear-gradient(180deg, rgba(61,38,20,.92), rgba(22,13,7,.92));
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(240,201,121,.2), 0 10px 26px rgba(0,0,0,.55);
}
.cd__cell b{
  display:block; font-family:var(--ff-dis); font-weight:900;
  font-size:clamp(1.5rem,4.6vw,2.35rem); line-height:1; color:var(--gold);
  text-shadow:0 0 22px rgba(240,201,121,.45), 0 2px 3px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;
}
.cd__cell span{ display:block; margin-top:5px; font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.cd__note{ font-family:var(--ff-head); font-size:.82rem; font-weight:700; letter-spacing:.12em; color:var(--gold); }
.cd.is-pending .cd__grid,
.cd.is-pending .cd__label{ display:none; }

/* Hàng nút hành động */
.cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:10px; }
.cta--center{ margin-top:22px; }
.cta .btn[hidden]{ display:none; }

.hero__more{
  margin-top:18px; display:inline-flex; flex-direction:column; align-items:center; gap:6px;
  font-family:var(--ff-head); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  transition:color .25s var(--ease);
}
.hero__more i{
  width:10px; height:10px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:rotate(45deg); animation:bob 1.9s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(4px,4px); } }
.hero__more:hover{ color:var(--gold); }

/* ---------- 7. TIÊU ĐỀ MỤC — dải gỗ viền vàng ---------- */
.sec-title{
  position:relative; max-width:1160px; margin:0 auto clamp(20px,4vw,32px);
  padding:13px 54px; text-align:center;
  font-family:var(--ff-head); font-weight:800; letter-spacing:.05em;
  font-size:clamp(1.1rem,3.2vw,1.6rem); color:var(--parch);
  text-shadow:0 2px 4px rgba(0,0,0,.75);
  background:linear-gradient(180deg,#4d2f18 0%,#341f0f 55%,#22140a 100%);
  border:1px solid var(--gold-3); border-radius:3px;
  box-shadow:inset 0 1px 0 rgba(240,201,121,.26), inset 0 -1px 0 rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.45);
}
.sec-title::before,
.sec-title::after{
  content:'◆'; position:absolute; top:50%; transform:translateY(-50%);
  font-size:.7rem; color:var(--gold-2); opacity:.85;
}
.sec-title::before{ left:22px; }
.sec-title::after { right:22px; }
.sec-title b{ font-weight:900; color:var(--gold); }

/* ---------- 8. LỊCH TRÌNH ---------- */
.tl{ padding:clamp(44px,8vh,84px) clamp(16px,5vw,42px) clamp(20px,4vh,40px); }
.tl__list{
  position:relative; list-style:none; max-width:1000px; margin:0 auto; padding:0 0 0 34px;
  display:flex; flex-direction:column; gap:13px;
}
.tl__list::before{
  content:''; position:absolute; left:9px; top:10px; bottom:10px; width:2px;
  background:linear-gradient(to bottom, transparent, var(--gold-2) 12%, var(--red-2) 88%, transparent);
  opacity:.8;
}
.tl__item{
  position:relative; display:flex; align-items:center; gap:16px;
  padding:13px 18px; border-radius:3px;
  background:linear-gradient(180deg,var(--parch) 0%,var(--parch-2) 100%);
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(0,0,0,.45);
  color:var(--parch-ink);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tl__item:hover{ transform:translateX(5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 12px 28px rgba(0,0,0,.55); }
.tl__item::before{
  content:''; position:absolute; left:-30px; top:50%; transform:translateY(-50%);
  width:12px; height:12px; border-radius:50%;
  background:linear-gradient(160deg,var(--gold),var(--gold-2));
  box-shadow:0 0 0 3px rgba(21,12,7,.95), 0 0 16px rgba(240,201,121,.65);
}
.tl__tag{
  flex:0 0 auto; min-width:112px; padding:7px 12px; border-radius:2px; text-align:center;
  font-family:var(--ff-head); font-size:.7rem; font-weight:800; letter-spacing:.11em; color:#33200a;
  background:linear-gradient(180deg,#f8e2ae,var(--gold),var(--gold-2));
  border:1px solid var(--gold-3);
  text-shadow:0 1px 0 rgba(255,248,230,.5);
}
.tl__time{
  display:block; font-family:var(--ff-dis); font-weight:900; font-size:1.1rem;
  color:#7a2718; letter-spacing:.05em;
}
.tl__note{ display:block; margin-top:1px; font-size:.85rem; color:var(--parch-mut); }

/* ---------- 9. LỘ TRÌNH PHÁT TRIỂN ---------- */
.rm{ padding:clamp(30px,6vh,60px) clamp(16px,5vw,42px) clamp(20px,4vh,40px); }
.rm__grid{
  display:grid; gap:12px; max-width:1160px; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.rm__card{
  position:relative; padding:20px 20px 18px; border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,var(--parch) 0%,var(--parch-2) 100%);
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 8px 22px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rm__card:hover{ transform:translateY(-5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 16px 34px rgba(0,0,0,.55); }
.rm__step{
  position:absolute; top:8px; right:14px;
  font-family:var(--ff-dis); font-weight:900; font-size:2.3rem; line-height:1;
  color:rgba(122,39,24,.14);
}
.rm__when{
  display:block; font-family:var(--ff-head); font-size:.72rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:#8a3a12; margin-bottom:7px;
}
.rm__what{ font-size:.92rem; color:var(--parch-ink); line-height:1.6; }
.rm__what b{ color:#7a2718; font-weight:700; }

/* ---------- 10. SỰ KIỆN ĐUA TOP ---------- */
.ev{ padding:clamp(30px,6vh,60px) clamp(16px,5vw,42px); }
.ev__grid{
  display:grid; gap:14px; max-width:1160px; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
}
.ev__card{
  position:relative; padding:0 0 18px; border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,var(--parch) 0%,var(--parch-2) 100%);
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(0,0,0,.5);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ev__card:hover{ transform:translateY(-5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 18px 38px rgba(0,0,0,.6); }
.ev__card h3{
  padding:12px 20px 10px;
  font-family:var(--ff-head); font-size:1.04rem; font-weight:800; letter-spacing:.03em;
  color:var(--parch); text-shadow:0 2px 4px rgba(0,0,0,.7);
  background:linear-gradient(180deg,#4d2f18 0%,#341f0f 60%,#22140a 100%);
  border-bottom:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(240,201,121,.24);
}
.ev__when{
  padding:9px 20px 0;
  font-family:var(--ff-head); font-size:.76rem; font-weight:700; letter-spacing:.09em; color:#8a3a12;
}
.ev__rows{ list-style:none; margin:12px 0 0; padding:0 20px; display:flex; flex-direction:column; }
.ev__rows li{
  display:flex; align-items:flex-start; gap:12px;
  padding:9px 0; border-top:1px solid rgba(124,90,34,.25);
}
.ev__rows li:first-child{ border-top:0; padding-top:0; }
.ev__rank{
  flex:0 0 auto; min-width:80px; padding:4px 9px; border-radius:2px; text-align:center;
  font-family:var(--ff-head); font-size:.68rem; font-weight:800; letter-spacing:.07em; color:#33200a;
  background:linear-gradient(180deg,#f8e2ae,var(--gold),var(--gold-2));
  border:1px solid var(--gold-3);
}
.ev__prize{ font-size:.88rem; color:var(--parch-ink); line-height:1.55; }
.ev__prize b{ color:#7a2718; font-weight:700; }
.ev__note{
  margin:12px 20px 0; padding-top:10px; border-top:1px dashed rgba(124,90,34,.35);
  font-size:.8rem; color:var(--parch-mut); font-style:italic;
}
.ev__foot{
  max-width:1160px; margin:20px auto 0; text-align:center;
  font-size:.82rem; font-style:italic; letter-spacing:.03em; color:var(--muted);
}

/* ---------- 11. ĐIỂM ĐẶC SẮC ---------- */
.feat{ padding:clamp(30px,6vh,60px) clamp(16px,5vw,42px); }
.feat__grid{
  display:grid; gap:14px; max-width:1160px; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
}
.card{
  position:relative; padding:24px 22px; border-radius:3px; overflow:hidden;
  background:linear-gradient(180deg,var(--parch) 0%,var(--parch-2) 100%);
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px rgba(0,0,0,.48);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{ transform:translateY(-5px); box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 18px 38px rgba(0,0,0,.58); }
.card__ico{
  width:48px; height:48px; margin-bottom:13px; border-radius:3px;
  display:grid; place-items:center; font-size:1.3rem; color:#33200a;
  background:linear-gradient(180deg,#f8e2ae,var(--gold),var(--gold-2));
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(255,250,235,.7);
}
.card h3{
  font-family:var(--ff-head); font-size:1.04rem; font-weight:800; letter-spacing:.01em;
  margin-bottom:6px; color:#7a2718;
}
.card p{ font-size:.89rem; color:var(--parch-ink); }

/* ---------- 12. 5 CLASS ---------- */
.cls{ padding:clamp(30px,6vh,60px) clamp(16px,5vw,42px); }
.cls__row{
  display:grid; gap:12px; max-width:1160px; margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.cls__item{
  display:flex; align-items:center; gap:14px; padding:15px 18px; border-radius:3px;
  background:linear-gradient(180deg, rgba(61,38,20,.9), rgba(24,14,8,.92));
  border:1px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(240,201,121,.16), 0 8px 22px rgba(0,0,0,.45);
  transition:transform .3s var(--ease), border-color .3s var(--ease);
}
.cls__item:hover{ transform:translateY(-4px); border-color:var(--gold-2); }
.cls__badge{
  flex:0 0 auto; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--ff-dis); font-weight:900; font-size:.92rem; letter-spacing:.03em; color:#33200a;
  background:linear-gradient(160deg,#f8e2ae,var(--gold),var(--gold-2));
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 20px rgba(191,143,62,.4), inset 0 1px 0 rgba(255,250,235,.7);
}
.cls__item b{ display:block; font-family:var(--ff-head); font-size:.97rem; color:var(--gold); letter-spacing:.02em; }
.cls__item small{ display:block; font-size:.78rem; color:var(--muted); }

/* ---------- 13. KHỐI THAM GIA ---------- */
.join{ padding:clamp(30px,6vh,70px) clamp(16px,5vw,42px) clamp(50px,8vh,90px); }
.join__box{
  position:relative; max-width:960px; margin:0 auto; padding:clamp(28px,5vw,52px);
  text-align:center; border-radius:4px; overflow:hidden;
  background:linear-gradient(160deg, rgba(84,32,18,.85), rgba(26,15,9,.94));
  border:2px solid var(--gold-3);
  box-shadow:inset 0 1px 0 rgba(240,201,121,.22), 0 24px 60px rgba(0,0,0,.6);
}
.join__box::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 90% at 50% 0%, rgba(240,201,121,.16), transparent 70%);
  pointer-events:none;
}
.join__box h2{
  position:relative; font-family:var(--ff-head); font-size:clamp(1.25rem,4vw,2.1rem);
  font-weight:900; letter-spacing:.02em; margin-bottom:12px;
  background:linear-gradient(180deg,#fff8e6,var(--gold),#96692a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.join__box p{ position:relative; max-width:660px; margin:0 auto; color:var(--muted); font-size:.94rem; }

/* ---------- 14. CHÂN TRANG ---------- */
.foot{
  padding:clamp(28px,5vh,48px) 20px calc(clamp(28px,5vh,48px) + var(--safe-b));
  text-align:center; border-top:1px solid var(--gold-3);
  background:linear-gradient(to bottom, rgba(46,28,15,.5), rgba(10,6,3,.9));
}
.foot img{ width:56px; height:56px; margin:0 auto 12px; border-radius:8px; object-fit:cover; border:1px solid var(--gold-3); opacity:.92; }
.foot__brand{ font-family:var(--ff-head); font-size:.94rem; letter-spacing:.05em; color:var(--parch-2); }
.foot__brand b{ font-family:var(--ff-dis); color:var(--gold); letter-spacing:.15em; }
.foot__dom a{ display:inline-block; margin-top:4px; font-weight:700; color:var(--amber); letter-spacing:.07em; }
.foot__dom a:hover{ color:var(--gold); }
.foot__copy{ max-width:640px; margin:14px auto 0; font-size:.74rem; line-height:1.75; color:rgba(194,172,134,.6); }

/* ---------- 15. CHUYỂN MÀN ---------- */
.loader,.gate,.hud,.page{ opacity:0; visibility:hidden; }
body[data-stage="loading"] .loader{ opacity:1; visibility:visible; }
body[data-stage="gate"]    .gate  { opacity:1; visibility:visible; }
body[data-stage="intro"]   .hud   { opacity:1; visibility:visible; }
body[data-stage="landing"] .page  { opacity:1; visibility:visible; }

.nojs{
  position:fixed; inset:auto 0 0 0; z-index:99; padding:14px 18px;
  background:var(--red-2); color:#ffeeda; text-align:center; font-size:.88rem;
}
.nojs a{ color:var(--gold); text-decoration:underline; }

/* ---------- 16. MÀN HÌNH NHỎ ---------- */
@media (max-width:760px){
  .topbar__nav{ display:none; }
  .hero{ min-height:calc(100dvh - 62px); gap:13px; }
  .cta .btn{ flex:1 1 calc(50% - 12px); min-width:140px; padding:12px 10px; font-size:.82rem; }
  .cta .btn__ico{ font-size:.9rem; }
  .btn--lg{ width:100%; max-width:340px; padding:16px 22px; font-size:.94rem; }
  .hud__top{ padding:12px 14px; }
  .hud__logo{ width:42px; height:42px; }
  .icobtn{ width:40px; height:40px; }
  .icobtn--wide{ padding:0 14px; font-size:.74rem; }
  .sec-title{ padding:11px 40px; }
  .sec-title::before{ left:15px; }
  .sec-title::after { right:15px; }
  .cls__item{ padding:13px 14px; gap:11px; }
  .cls__badge{ width:46px; height:46px; font-size:.84rem; }

  .tl__list{ padding-left:26px; }
  .tl__list::before{ left:5px; }
  .tl__item{ flex-direction:column; align-items:flex-start; gap:9px; padding:13px 15px; }
  .tl__item::before{ left:-26px; top:22px; transform:none; width:10px; height:10px; }
  .tl__tag{ min-width:0; }
  .ev__rows li{ flex-direction:column; gap:5px; }
  .ev__rank{ min-width:0; align-self:flex-start; }
}
@media (max-width:400px){
  .cd__cell{ min-width:60px; padding:10px 4px 8px; }
  .cd__grid{ gap:7px; }
}

/* Điện thoại nằm ngang */
@media (max-height:520px) and (orientation:landscape){
  .gate__logo{ width:120px; }
  .hero__logo{ width:110px; }
  .hero{ min-height:auto; padding-top:26px; padding-bottom:34px; }
}

/* ---------- 17. GIẢM CHUYỂN ĐỘNG ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .embers{ display:none; }
}