/* ==========================================================================
   TIZINO ACADEMY — component riêng cho trang khoá học
   Nạp SAU tizino-ds.css. Chỉ dùng token có sẵn của design system.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PLACEHOLDER ẢNH — thay bằng <img> thật khi có ảnh
   Cách dùng: <div class="ph" style="aspect-ratio:4/5" data-ph="Ảnh: giảng viên"></div>
   -------------------------------------------------------------------------- */
.ph{
  position:relative;
  width:100%;
  aspect-ratio:4/5;
  border-radius:14px;
  background:
    repeating-linear-gradient(135deg,
      rgba(14,13,11,.035) 0 10px,
      rgba(14,13,11,.015) 10px 20px),
    var(--paper-3);
  border:1px dashed var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.ph::after{
  content:attr(data-ph);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  text-align:center;
  padding:0 18px;
  line-height:1.6;
}
.ph.wide{aspect-ratio:16/10}
.ph.square{aspect-ratio:1/1}
.ph.tall{aspect-ratio:3/4}

/* Placeholder trong hero phải phủ kín cột ảnh tuyệt đối của .hero .art */
.hero .art .ph{
  height:100%;
  aspect-ratio:auto;
  border:0;
  border-radius:0;
}
@media(max-width:900px){
  .hero .art .ph{border-radius:18px}
}

/* --------------------------------------------------------------------------
   HERO — tiêu đề một dòng
   Cụm "KHOÁ HỌC ‘’AI WEDDING PRODUCTION’’" rộng ≈19,15em nên phải hạ cỡ chữ
   so với v22 để nằm gọn một dòng trong cột chữ 720px, không đè lên ảnh.
   Dưới 760px thì cho phép xuống dòng để chữ không bị quá nhỏ.
   -------------------------------------------------------------------------- */
.hero .copy{max-width:860px}
.hero .mh-main{font-size:clamp(22px,3.9vw,44px);white-space:nowrap}
.hero .lede{max-width:845px}
.hero .lede + .lede{margin-top:14px}
/* chữ lấn sâu hơn sang vùng ảnh nên tăng độ phủ của lớp loang */
.hero .art::after{
  background:linear-gradient(90deg,
    var(--paper) 6%,
    rgba(237,235,230,.72) 38%,
    rgba(237,235,230,.28) 60%,
    transparent 78%);
}
@media(max-width:760px){
  .hero .mh-main{white-space:normal;font-size:clamp(28px,7.4vw,38px)}
}

/* --------------------------------------------------------------------------
   BẢNG CUỘN NGANG TRÊN MÀN HÌNH HẸP
   -------------------------------------------------------------------------- */
.tbl-scroll{margin-top:38px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-scroll .ptable{margin-top:0;min-width:620px}
.tbl-scroll::-webkit-scrollbar{height:6px}
.tbl-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}

/* --------------------------------------------------------------------------
   LEVEL — 3 thẻ lộ trình
   -------------------------------------------------------------------------- */
.levels{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  margin-top:34px;
}
.level{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:30px 28px 32px;
  display:flex;
  flex-direction:column;
  transition:transform .35s ease;
}
.level:hover{transform:translateY(-6px)}
.level .lv-n{
  font-family:'DidotVN',"Cormorant Garamond",serif;
  font-style:italic;
  font-size:34px;
  line-height:1;
  color:var(--muted);
  margin-bottom:14px;
}
.level h3{
  font-family:'AvantGarde',system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:19px;
  line-height:1.18;
  margin-bottom:10px;
}
.level p{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.7;
}
.level .lv-out{
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
}
.level .lv-out b{
  display:block;
  font-family:'AvantGarde',system-ui,sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:.02em;
  color:var(--ink);
  text-transform:none;
  margin-top:6px;
  line-height:1.5;
}

/* --------------------------------------------------------------------------
   TIMELINE 5 NGÀY
   -------------------------------------------------------------------------- */
.days{margin-top:34px;border-top:1px solid var(--line)}
.day{
  display:grid;
  grid-template-columns:190px 1fr 1fr 240px;
  gap:26px;
  padding:26px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.day .d-when .d-n{
  font-family:'AvantGarde',system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:17px;
  letter-spacing:-.01em;
  line-height:1.2;
}
.day .d-when .d-phase{
  margin-top:6px;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
}
.day .slot .s-lab{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  margin-bottom:8px;
}
.day .slot p{font-size:15px;color:var(--ink-soft);line-height:1.7}
.day .slot p + p{margin-top:10px}
.day .d-out{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px 18px;
}
.day .d-out .o-lab{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  margin-bottom:6px;
}
.day .d-out p{font-size:14px;line-height:1.6;color:var(--ink)}
.day .d-out.milestone{background:var(--ink)}
.day .d-out.milestone .o-lab{color:rgba(237,235,230,.6)}
.day .d-out.milestone p{color:var(--paper)}

/* --------------------------------------------------------------------------
   BẢNG HỌC PHÍ — biến thể của .ptable
   -------------------------------------------------------------------------- */
.ptable .lv{
  font-family:'AvantGarde',system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.01em;
  font-size:15px;
}
.ptable .fee{
  font-family:'AvantGarde',system-ui,sans-serif;
  font-weight:700;
  font-size:17px;
  letter-spacing:-.01em;
  white-space:nowrap;
}
.ptable tr.best td,.ptable tr.best th{background:rgba(14,13,11,.035)}
.tag-best{
  display:inline-block;
  margin-left:8px;
  font-family:"Manrope",sans-serif;
  font-size:9px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  padding:3px 9px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  vertical-align:middle;
}

/* --------------------------------------------------------------------------
   SPEC — cấu hình máy 2 cột
   -------------------------------------------------------------------------- */
.specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:34px;
}
.spec{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:28px 26px;
}
.spec .sp-kick{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  margin-bottom:8px;
}
.spec h3{
  font-family:'AvantGarde',system-ui,sans-serif;
  font-weight:700;
  text-transform:uppercase;
  font-size:18px;
  letter-spacing:-.01em;
  line-height:1.2;
  margin-bottom:16px;
}
.spec ul{list-style:none}
.spec ul li{
  font-size:15px;
  color:var(--ink-soft);
  line-height:1.7;
  padding:11px 0;
  border-top:1px solid var(--line);
  display:flex;
  gap:14px;
}
.spec ul li:first-child{border-top:0;padding-top:0}
.spec ul li .k{
  flex:0 0 118px;
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--muted);
  padding-top:3px;
}

/* --------------------------------------------------------------------------
   HIGHLIGHT — dải số liệu nổi bật
   -------------------------------------------------------------------------- */
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  margin-top:34px;
}
.stat{
  padding:24px 0;
  border-top:1px solid var(--ink);
}
.stat .s-num{
  font-family:'AvantGarde',system-ui,sans-serif;
  font-weight:700;
  font-size:clamp(26px,3.2vw,38px);
  line-height:1.1;
  letter-spacing:-.02em;
}
.stat .s-lab{
  margin-top:8px;
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
}

/* --------------------------------------------------------------------------
   CALLOUT — khối nhấn mạnh
   -------------------------------------------------------------------------- */
.callout{
  margin-top:30px;
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--ink);
  border-radius:0 14px 14px 0;
  padding:22px 26px;
}
.callout p{font-size:15px;color:var(--ink-soft);line-height:1.7}
.callout p b{font-weight:600;color:var(--ink)}
.callout p + p{margin-top:10px}

/* --------------------------------------------------------------------------
   SLIDER KÉO SO SÁNH — Section Lợi ích (cách cũ ↔ cách mới)
   Khung đặt đúng tỉ lệ gốc 1414:2000 nên ảnh hiện đủ 100%, không bị xén.
   -------------------------------------------------------------------------- */
.ba{
  --p:50%;
  position:relative;
  aspect-ratio:1414/2000;
  border-radius:16px;
  overflow:hidden;
  background:var(--card);
  touch-action:none;
  user-select:none;
  cursor:ew-resize;
}
.ba img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  -webkit-user-drag:none;
}
.ba .ba-old{z-index:1}
.ba .ba-new{z-index:2;clip-path:inset(0 0 0 var(--p))}
.ba .ba-div{
  position:absolute;top:0;bottom:0;left:var(--p);
  width:2px;margin-left:-1px;
  background:#fff;
  box-shadow:0 0 14px rgba(0,0,0,.35);
  z-index:3;pointer-events:none;
}
.ba .ba-handle{
  position:absolute;top:50%;left:var(--p);
  transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:999px;
  background:#fff;color:var(--ink);
  border:0;padding:0;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;letter-spacing:.06em;
  box-shadow:0 6px 20px -6px rgba(14,13,11,.6);
  cursor:ew-resize;z-index:4;
}
.ba .ba-hint{
  position:absolute;left:0;right:0;top:16px;z-index:4;
  text-align:center;
  font-family:"Manrope";font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  pointer-events:none;
  transition:opacity .3s ease;
}
.ba.touched .ba-hint{opacity:0}

/* --------------------------------------------------------------------------
   DANH SÁCH CÓ TIÊU ĐỀ — dùng ở Lợi ích, Level 1, Level 3
   -------------------------------------------------------------------------- */
.feat2{list-style:none}
.feat2 li{
  display:flex;gap:16px;
  padding:20px 0;
  border-bottom:1px solid var(--line);
}
.feat2 li:first-child{padding-top:0}
.feat2 .mk{
  font-family:'DidotVN',"Cormorant Garamond",serif;font-style:italic;
  color:var(--muted);font-size:17px;flex:0 0 auto;padding-top:1px;
}
.feat2 h4{
  font-family:'AvantGarde',system-ui,sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;
  font-size:15px;line-height:1.3;margin-bottom:7px;
}
.feat2 p{font-size:14.5px;color:var(--ink-soft);line-height:1.7}

/* --------------------------------------------------------------------------
   KHUNG VIDEO — thumbnail, bấm mới chạy
   -------------------------------------------------------------------------- */
.vid{
  position:relative;
  aspect-ratio:16/9;
  border-radius:16px;
  overflow:hidden;
  background:var(--ink);
}
.vid video{width:100%;height:100%;object-fit:cover;display:block}
.vid .vid-poster{
  position:absolute;inset:0;z-index:2;
  border:0;padding:0;
  background:none;cursor:pointer;
  transition:opacity .4s ease;
}
.vid .vid-poster img{width:100%;height:100%;object-fit:cover;display:block}
.vid .vid-poster::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(14,13,11,.35),rgba(14,13,11,.08));
}
.vid .vid-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:76px;height:76px;border-radius:999px;
  background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 40px -12px rgba(14,13,11,.7);
  transition:transform .25s ease, background .25s ease;
  z-index:3;
}
.vid .vid-play::before{
  content:"";
  border-style:solid;
  border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ink);
  margin-left:4px;
}
.vid .vid-poster:hover .vid-play{transform:translate(-50%,-50%) scale(1.08)}
.vid.playing .vid-poster{opacity:0;pointer-events:none}

/* Level 1 & 2 — chia 5 phần: tiêu đề + video 3 phần trái, panel chữ 2 phần phải.
   Tiêu đề nằm trong cột trái nên chiều cao hai cột gần cân nhau. */
.vidsplit{display:grid;grid-template-columns:3fr 2fr;gap:24px;align-items:start;margin-top:0}
.vidsplit .mixhead{margin-bottom:26px}
/* Tiêu đề gói gọn một dòng trong cột 660px.
   Cụm dài nhất là Level 02 (18,53em) nên 32px là mức an toàn.
   Dòng nhỏ hạ xuống 18px cho cân với dòng chính. */
.vidsplit .mh-main{font-size:clamp(20px,2.75vw,32px);white-space:nowrap}
.vidsplit .mh-sub{font-size:clamp(14px,1.6vw,18px);margin-top:8px}
@media(max-width:900px){
  .vidsplit{grid-template-columns:1fr;gap:22px}
}
@media(max-width:700px){
  .vidsplit .mh-main{white-space:normal;font-size:clamp(24px,6vw,30px)}
  .vidsplit .mh-sub{font-size:clamp(14px,3.6vw,17px)}
}

/* Lợi ích — 2 cột đều nhau, tiêu đề nằm trong cột chữ.
   Ghìm bề rộng ảnh và bề rộng chữ cùng ở 470px để hai cột cao gần bằng nhau:
   ảnh 470px -> cao 665px, khối chữ 470px -> cao ~568px, hụt còn ~97px
   thay vì 219px như khi để tràn hết cột 534px. */
.two > div > .mixhead{margin-bottom:28px}
/* .ba chứa toàn ảnh position:absolute nên KHÔNG có chiều rộng nội tại —
   phải để nó là khối thường có width:100%, không bọc trong flex, nếu không
   nó sẽ co về 0 và biến mất. */
.two .ba-col{display:block}
.two .ba{width:100%;max-width:470px;margin-left:auto;margin-right:auto}
.two .txt-col{max-width:470px}
@media(max-width:860px){
  .two .ba,
  .two .txt-col{max-width:100%}
}

/* --------------------------------------------------------------------------
   SLIDER / CAROUSEL — lấy lại từ v22 (Level 1 kiểu Lookbook)
   -------------------------------------------------------------------------- */
.lb3{display:grid;grid-template-columns:1fr 1fr .95fr;gap:24px;align-items:end;margin-top:8px}
.vsl-label{font-family:"Manrope";font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hsl{position:relative}
.hsl-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:14px}
.hsl-track::-webkit-scrollbar{display:none}
.hsl-slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:1414/2000;overflow:hidden;background:var(--card)}
.hsl-slide img{width:100%;height:100%;object-fit:cover;object-position:center top}
.hsl-nav{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;z-index:3}
.hsl-nav button{width:38px;height:38px;border-radius:999px;border:none;background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.2);transition:all .2s}
.hsl-nav button:hover{background:var(--ink);color:#fff}

/* --------------------------------------------------------------------------
   LIGHTBOX — lấy lại từ v22 (Level 3)
   -------------------------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(14,13,11,.94);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb-img{max-width:88vw;max-height:82vh;object-fit:contain;border-radius:6px;user-select:none;-webkit-user-drag:none}
.lb-shield{position:absolute;inset:0;z-index:3}
.lb-close,.lb-prev,.lb-next{position:absolute;z-index:5;width:50px;height:50px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(6px)}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:#fff;color:var(--ink)}
.lb-close{top:24px;right:24px}
.lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lb-next{right:24px;top:50%;transform:translateY(-50%)}
.lb-bar{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:14px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:9px 18px;border-radius:999px;backdrop-filter:blur(6px)}
.lb-bar .c{font-family:'AvantGarde',sans-serif;font-weight:700;font-size:13px;letter-spacing:.06em}
.lb-bar .n{font-size:12.5px;opacity:.75}

/* Lưới ảnh thực chiến — 4 cột, có nhãn, có nút xem thêm */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
.gal .cell{border-radius:12px;overflow:hidden;aspect-ratio:2/3;position:relative;cursor:zoom-in;background:var(--paper-3)}
.gal .cell img{width:100%;height:100%;object-fit:cover;object-position:center top;transition:transform .55s}
.gal .cell:hover img{transform:scale(1.05)}
.gal .cell .cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:26px 12px 11px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
  opacity:0;transition:opacity .3s ease;
}
.gal .cell:hover .cap,
.gal .cell:focus-within .cap{opacity:1}
/* Nhãn để trống thì ẩn hẳn. Không có dòng này, rê chuột vào ảnh chưa đặt nhãn
   sẽ hiện một dải đen cao 37px trống trơn — trông như lỗi. */
.gal .cell .cap:empty{display:none}
.gal .cell.more{display:none}
.gal.expanded .cell.more{display:block}
.gal-more{display:flex;justify-content:center;margin-top:34px}
.gal-more.hidden{display:none}

/* --------------------------------------------------------------------------
   POPUP ĐĂNG KÝ
   -------------------------------------------------------------------------- */
.pop{
  position:fixed;inset:0;z-index:300;
  background:rgba(14,13,11,.72);
  backdrop-filter:blur(5px);
  display:none;align-items:center;justify-content:center;
  padding:24px;
}
.pop.on{display:flex}
.pop-box{
  position:relative;
  width:100%;max-width:720px;max-height:88vh;
  overflow-y:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:42px 40px 38px;
  box-shadow:0 40px 90px -30px rgba(14,13,11,.7);
}
.pop-box .mixhead{margin-bottom:16px}
.pop-box .mh-main{font-size:clamp(26px,3.4vw,38px)}
.pop-box .lede{font-size:15px;color:var(--ink-soft);line-height:1.75;margin-bottom:26px}
.pop-close{
  position:absolute;top:16px;right:16px;z-index:5;
  width:40px;height:40px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:15px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s ease;
}
.pop-close:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pop-box form.lead{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.pop-box .form-done{margin-top:0}
@media(max-width:620px){
  .pop{padding:14px}
  .pop-box{padding:34px 22px 28px;border-radius:18px;max-height:92vh}
  .pop-box form.lead{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   ĐỐI TƯỢNG — 3 cột ảnh trên / chữ dưới
   -------------------------------------------------------------------------- */
.who3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:34px}
.who3 .w-img{aspect-ratio:1414/2000;border-radius:14px;overflow:hidden;margin-bottom:18px;background:var(--paper-3)}
.who3 .w-img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s}
.who3 .col:hover .w-img img{transform:scale(1.05)}
.who3 .w-txt{display:flex;gap:14px;border-top:1px solid var(--line);padding-top:14px}
.who3 .w-txt .mk{font-family:'DidotVN',"Cormorant Garamond",serif;font-style:italic;color:var(--muted);font-size:17px;flex:0 0 auto}
.who3 .w-txt p{font-size:15.5px;color:var(--ink);line-height:1.7}

/* --------------------------------------------------------------------------
   RESPONSIVE — bám đúng breakpoint của design system gốc
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  .lb3{grid-template-columns:1fr 1fr;gap:20px}
  .lb3 .lb-panel{grid-column:1 / -1}
}
@media(max-width:860px){
  .who3{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .gal{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media(max-width:700px){
  .lb-prev{left:10px}
  .lb-next{right:10px}
  .lb-img{max-width:94vw}
  .lb3{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
}
@media(max-width:560px){
  .gal{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   MOBILE — nút menu bung ra + hero xếp dọc
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nút menu 3 gạch (chỉ hiện dưới 900px)
   -------------------------------------------------------------------------- */
.navtoggle{
  display:none;
  width:42px;height:42px;flex:0 0 auto;
  border:1px solid var(--line);border-radius:999px;
  background:transparent;cursor:pointer;
  padding:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  transition:background .25s ease;
}
.navtoggle span{
  display:block;width:16px;height:1.5px;background:var(--ink);
  transition:transform .28s ease, opacity .2s ease;
}
.navtoggle[aria-expanded="true"]{background:var(--ink)}
.navtoggle[aria-expanded="true"] span{background:var(--paper)}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Bảng menu bung ra */
.navmenu{
  display:none;
  position:absolute;top:calc(100% + 10px);left:0;right:0;
  background:rgba(244,242,236,.97);
  backdrop-filter:saturate(150%) blur(12px);
  border:1px solid var(--line-2);
  border-radius:22px;
  box-shadow:0 20px 46px -20px rgba(14,13,11,.45);
  padding:10px;
  overflow:hidden;
}
.navmenu.open{display:block}
.navmenu a{
  display:block;
  font-family:"Manrope";font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  padding:15px 18px;border-radius:14px;
  transition:background .2s ease;
}
.navmenu a + a{border-top:1px solid var(--line-2)}
.navmenu a:active{background:var(--paper-2)}

@media(max-width:900px){
  .navtoggle{display:flex}
  .bar nav{gap:10px}
  .bar .btn{padding:11px 18px;font-size:11px;letter-spacing:.1em}
}
@media(max-width:420px){
  .bar .inner{padding:0 10px 0 18px;height:56px}
  .brand{font-size:18px}
  .bar .btn{padding:10px 14px;font-size:10px}
  .navtoggle{width:38px;height:38px}
}

/* --------------------------------------------------------------------------
   Hero mobile — xếp dọc: ảnh 1:1 full khổ → tiêu đề → mô tả → 2 nút ngang
   -------------------------------------------------------------------------- */
@media(max-width:900px){
  /* Ảnh chạm mép trên cùng, thanh menu nổi đè lên ảnh */
  .hero{
    display:block;
    min-height:auto;
    padding:0 0 56px;
  }
  .hero .art{
    position:relative;
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    max-height:none;
    margin:0 0 30px;
    border-radius:0;
  }
  .hero .art img{object-position:center}
  .hero .copy{max-width:none}
  .hero .lede{font-size:15px}

  /* Loang đáy ảnh xuống nền giấy, để ảnh và phần chữ nối liền nhau
     thay vì cắt ngang một đường thẳng. Bản gốc v22 có lớp này nhưng
     bị tắt dưới 900px — bật lại và kéo dài cho hợp khổ ảnh vuông. */
  .hero .art::before{
    display:block;
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;top:auto;
    height:30%;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(0deg,
      var(--paper) 2%,
      rgba(237,235,230,.92) 22%,
      rgba(237,235,230,.55) 50%,
      transparent 100%);
  }

  /* 2 nút luôn nằm ngang, chia đều bề ngang */
  .hero .cta-row{flex-wrap:nowrap;gap:10px;margin-top:26px}
  .hero .cta-row .btn{
    flex:1 1 0;
    justify-content:center;
    text-align:center;
    padding:14px 12px;
    font-size:11px;
    letter-spacing:.08em;
    gap:6px;
  }
}
@media(max-width:400px){
  .hero .cta-row .btn{padding:13px 8px;font-size:10px;letter-spacing:.05em}
  .hero .cta-row .btn .arr{display:none}
}
@media(max-width:980px){
  .day{grid-template-columns:150px 1fr 1fr;}
  .day .d-out{grid-column:1 / -1}
}
@media(max-width:860px){
  .levels{grid-template-columns:1fr;max-width:440px;margin-left:auto;margin-right:auto}
  .specs{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;gap:18px}
  .day{grid-template-columns:1fr;gap:16px;padding:24px 0}
  .day .d-when{padding-bottom:2px}
  .spec ul li{flex-direction:column;gap:2px}
  .spec ul li .k{flex:none;padding-top:0}
}
@media(max-width:560px){
  .stats{grid-template-columns:1fr}
  .level{padding:26px 22px 28px}
}