@import url("../games/styles/tokens.css");
/* ══════════════════════════════════════════════════════════════════════════════
   LỚP GIAO DIỆN CHUNG CHO TOÀN BỘ TRANG THI — iOS 24G · 12/09/2026   (BƯỚC 4)

   Một tệp này dùng chung cho TẤT CẢ trang thi HSK 1–6 và THPT (≈131 trang).
   Mỗi trang chỉ được thêm ĐÚNG MỘT DÒNG <link> ngay trước </head>, không sửa
   gì khác: không sửa HTML, không sửa JavaScript, không sửa dữ liệu đề, không
   sửa chấm điểm · đồng hồ · nộp bài · quyền truy cập.

   Xoá dòng <link> đó là trang trở lại y như cũ.

   Màu · bo góc · bóng · nhịp chuyển động lấy từ games/styles/tokens.css
   (nạp bằng @import ở dòng đầu) — không dựng hệ màu thứ hai.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── biến bắc cầu: tên ngắn, giá trị vẫn từ token gốc ─────────────────────── */
:root{
  --tx-do:       var(--g24-red,        #E60012);
  --tx-do-dam:   var(--g24-red-dark,   #B3000E);
  --tx-vang:     var(--g24-gold,       #F5C518);
  --tx-muc:      var(--g24-ink,        #2B1419);
  --tx-mo:       var(--g24-muted-2,    #8A7A7A);
  --tx-kem:      var(--g24-cream,      #FFF6E9);
  --tx-dung:     var(--g24-ok,         #1F9D55);
  --tx-dung-nhe: var(--g24-ok-soft,    #E8F5E9);
  --tx-sai-nhe:  var(--g24-bad-soft,   #FFEBEE);

  --tx-o:        #ffffff;                       /* mặt thẻ                   */
  --tx-ke:       rgba(60,60,67,.13);            /* kẻ tóc 0,5px kiểu iOS     */
  --tx-ke-dam:   rgba(60,60,67,.26);
  --tx-chim:     rgba(118,118,128,.11);         /* nền ô nhập chìm           */
  --tx-kinh:     rgba(255,255,255,.80);
  --tx-blur:     saturate(180%) blur(20px);

  --tx-r:        16px;
  --tx-r-lon:    22px;
  --tx-bong:     0 1px 2px rgba(43,20,25,.05), 0 10px 26px -16px rgba(43,20,25,.30);
  --tx-bong-cao: 0 2px 6px rgba(43,20,25,.06), 0 20px 44px -20px rgba(43,20,25,.38);
  --tx-nhanh:    var(--game-transition-fast,   180ms cubic-bezier(.34,1.56,.64,1));
  --tx-vua:      var(--game-transition-normal, 320ms cubic-bezier(.22,.8,.36,1));

  --tx-tren:     var(--safe-top,    env(safe-area-inset-top, 0px));
  --tx-duoi:     var(--safe-bottom, env(safe-area-inset-bottom, 0px));
}

/* ══ 1 · NỀN CHUNG ════════════════════════════════════════════════════════ */
body{letter-spacing:-.004em}
.disp{letter-spacing:-.02em}
.wrap{padding-bottom:calc(132px + var(--tx-duoi))}

/* ══ 2 · THANH TRÊN — kính mờ, chừa tai thỏ · Dynamic Island ══════════════ */
.bar{
  background:var(--tx-kinh);
  -webkit-backdrop-filter:var(--tx-blur);backdrop-filter:var(--tx-blur);
  border-bottom:.5px solid var(--tx-ke);
  padding:8px 14px!important;
  padding-top:calc(8px + var(--tx-tren))!important;
  padding-left:calc(158px + var(--safe-left,0px))!important;   /* chừa chỗ cho nút Trang Chủ */
  min-height:calc(56px + var(--tx-tren));
  gap:8px;
}
/* nút về trang chủ: trên điện thoại thu thành nút tròn 44px chỉ còn biểu tượng,
   nhờ vậy KHÔNG còn đè lên tên phần thi như trước. Liên kết và onclick giữ nguyên. */
.homefab{
  top:calc(8px + var(--tx-tren));left:calc(12px + var(--safe-left,0px));
  height:44px;padding:0 16px;border:.5px solid var(--tx-ke);border-radius:999px;
  background:var(--tx-o);box-shadow:var(--tx-bong);
  font-size:13.5px;letter-spacing:-.01em;
  transition:transform var(--tx-nhanh), box-shadow var(--tx-nhanh);
}
.homefab:hover{border-color:var(--tx-do);transform:none;box-shadow:var(--tx-bong-cao)}
.homefab:active{transform:scale(.94)}
.phasetag{
  font-size:12px;letter-spacing:.06em;line-height:1.25;color:var(--tx-do-dam);
  min-width:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.timer{
  border:.5px solid var(--tx-ke);border-radius:999px;padding:9px 15px;
  min-height:40px;font-size:16px;font-weight:800;letter-spacing:-.01em;
  background:var(--tx-o);box-shadow:0 1px 2px rgba(43,20,25,.06);
  font-variant-numeric:tabular-nums;
}
.timer .dot{width:8px;height:8px;min-height:0;flex:none;align-self:center;border:0;border-radius:50%;box-shadow:0 0 0 3px rgba(31,157,85,.16)}
.timer.warn{background:var(--tx-sai-nhe);border-color:rgba(230,0,18,.4)}
.timer.warn .dot{box-shadow:0 0 0 3px rgba(230,0,18,.16)}

/* ══ 3 · MÀN ĐĂNG NHẬP + MÀN CHUẨN BỊ TRƯỚC KHI THI ══════════════════════ */
.hero{padding-top:calc(30px + var(--tx-tren))}
.card{
  background:var(--tx-o);border:.5px solid var(--tx-ke);
  border-radius:var(--tx-r-lon);box-shadow:var(--tx-bong);padding:22px;
}
.login-card{border-radius:26px;box-shadow:var(--tx-bong-cao)}
.login-card::before{height:5px;background:linear-gradient(90deg,var(--tx-do),var(--tx-vang),var(--tx-do-dam))}
h1.title{font-size:27px;letter-spacing:-.025em;line-height:1.15;text-wrap:balance}
.sub{font-size:14px;line-height:1.5;color:var(--tx-mo)}
label{font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--tx-muc);margin:16px 0 7px}
.inp{
  min-height:50px;padding:14px 16px;border:.5px solid var(--tx-ke);border-radius:14px;
  font-size:16px;background:var(--tx-chim);transition:border-color var(--tx-nhanh), box-shadow var(--tx-nhanh), background var(--tx-nhanh);
}
.inp:focus{background:var(--tx-o);border-color:var(--tx-do);box-shadow:0 0 0 4px rgba(230,0,18,.14)}
.btn{
  min-height:52px;padding:15px 22px;border-radius:16px;font-size:16.5px;letter-spacing:-.012em;
  background:linear-gradient(140deg,var(--tx-do),var(--tx-do-dam));
  box-shadow:0 10px 24px -12px rgba(230,0,18,.85);
  transition:transform var(--tx-nhanh), box-shadow var(--tx-nhanh), filter var(--tx-nhanh);
}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline:3px solid rgba(230,0,18,.35);outline-offset:2px}
.btn.ghost{background:var(--tx-o);border:1.5px solid var(--tx-ke);color:var(--tx-do);box-shadow:0 1px 2px rgba(43,20,25,.05)}
.btn.sm{min-height:46px;padding:12px 18px;font-size:15px;border-radius:14px}
.chip{
  background:var(--tx-chim);color:var(--tx-muc);border-radius:999px;
  padding:8px 14px;font-size:12.5px;font-weight:700;min-height:34px;
}
.struct .row{
  background:var(--tx-o);border:.5px solid var(--tx-ke);border-radius:16px;
  padding:14px 16px;min-height:62px;box-shadow:0 1px 2px rgba(43,20,25,.04);
}
.struct .n{
  min-width:34px;width:34px;height:34px;border-radius:11px;
  background:linear-gradient(140deg,var(--tx-do),var(--tx-do-dam));color:#fff;
  display:grid;place-items:center;font-size:15px;
}
.struct .row small{color:var(--tx-mo);margin-top:2px}
.guide li{font-size:14px;line-height:1.6;color:#4a4046}
.err{font-size:13px;color:var(--tx-do);background:var(--tx-sai-nhe);border-radius:10px;padding:9px 12px}

/* ══ 4 · PHẦN NGHE — khung nghe kiểu iOS (KHÔNG đụng file nghe, số lần nghe) ══ */
.audiobar{
  top:calc(56px + var(--tx-tren));
  background:var(--tx-kinh);
  -webkit-backdrop-filter:var(--tx-blur);backdrop-filter:var(--tx-blur);
  border-bottom:.5px solid var(--tx-ke);padding:10px 16px;
}
.audio-wrap{
  background:linear-gradient(165deg,var(--tx-o),var(--tx-kem));
  border:.5px solid var(--tx-ke);border-radius:20px;padding:16px 18px;
  box-shadow:var(--tx-bong);
}
.audio-head{gap:14px;align-items:flex-start}
.audio-ico{
  font-size:22px;width:44px;height:44px;border-radius:14px;flex:none;
  display:grid;place-items:center;background:var(--tx-chim);
}
.audio-title{font-size:14.5px;letter-spacing:-.01em;color:var(--tx-muc);line-height:1.35}
.audio-sub{font-size:12.5px;color:var(--tx-mo);line-height:1.45;margin-top:2px}
#player{height:44px;border-radius:14px;background:var(--tx-chim);margin-top:12px}
.audio-help{border-top:.5px dashed var(--tx-ke);font-size:12.5px;line-height:1.6;color:var(--tx-mo)}
.play{width:52px;height:52px;box-shadow:0 10px 22px -10px rgba(230,0,18,.85)}
.play:active{transform:scale(.94)}
.prog{height:6px;background:var(--tx-chim);border-radius:999px}
.replay{background:var(--tx-chim);color:var(--tx-do-dam);min-height:36px;display:inline-flex;align-items:center}

/* ══ 5 · THẺ CÂU HỎI ═════════════════════════════════════════════════════ */
.qhead{margin:16px 2px 8px;gap:10px}
.qnum{
  font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--tx-do-dam);
  background:var(--tx-chim);border-radius:999px;padding:6px 13px;
  white-space:nowrap;flex:none;
}
.qmeta{font-size:12px;color:var(--tx-mo);text-align:right;line-height:1.4;min-width:0;flex:1}
.qbox{
  background:var(--tx-o);border:.5px solid var(--tx-ke);
  border-radius:var(--tx-r-lon);box-shadow:var(--tx-bong);padding:20px;
}
.passage{
  background:var(--tx-chim);border-radius:16px;padding:16px 18px;
  font-size:17.5px;line-height:1.9;
}
.stmt{font-size:21px;line-height:1.75;letter-spacing:.01em}
.q-ask{font-size:15px;line-height:1.6;color:var(--tx-do-dam);letter-spacing:-.008em}
.hint{font-size:12.8px;line-height:1.55;color:var(--tx-mo)}
.gq{border-radius:20px;margin-bottom:12px}
.gq-head{
  font-size:13px;font-weight:800;color:var(--tx-do-dam);letter-spacing:.02em;
  border-left:3px solid var(--tx-do);padding-left:9px;margin-bottom:10px;
}
.gpass{max-height:44vh;border-radius:16px}

/* ══ 6 · ĐÁP ÁN — hàng chạm lớn, trạng thái rõ, KHÔNG đổi cách chấm ═══════ */
.opts{gap:10px}
.opt{
  min-height:56px;border:.5px solid var(--tx-ke);border-radius:16px;
  padding:14px 16px;font-size:17.5px;line-height:1.55;
  box-shadow:0 1px 2px rgba(43,20,25,.04);
  transition:transform var(--tx-nhanh), border-color var(--tx-nhanh), background var(--tx-nhanh), box-shadow var(--tx-nhanh);
}
.opt:hover{border-color:rgba(230,0,18,.32);box-shadow:var(--tx-bong)}
.opt:active{transform:scale(.985)}
.opt:focus-visible{outline:3px solid rgba(230,0,18,.35);outline-offset:2px}
.opt .key{
  width:34px;height:34px;border-radius:11px;font-size:15px;
  background:var(--tx-chim);color:var(--tx-muc);
}
.opt.sel{border-color:var(--tx-do);background:rgba(230,0,18,.055);box-shadow:0 6px 18px -12px rgba(230,0,18,.9)}
.opt.sel .key{background:var(--tx-do);color:#fff;box-shadow:0 4px 10px -4px rgba(230,0,18,.9)}
.opt.correct{border-color:rgba(31,157,85,.5);background:var(--tx-dung-nhe);box-shadow:none}
.opt.correct .key{background:var(--tx-dung)}
.opt.wrong{border-color:rgba(230,0,18,.5);background:var(--tx-sai-nhe);box-shadow:none}

/* Đúng · Sai */
.tf{gap:12px}
.tf button{
  min-height:88px;border:.5px solid var(--tx-ke);border-radius:18px;
  font-size:16.5px;box-shadow:0 1px 2px rgba(43,20,25,.04);
  transition:transform var(--tx-nhanh), border-color var(--tx-nhanh), background var(--tx-nhanh);
}
.tf button:active{transform:scale(.97)}
.tf button.sel{border-color:var(--tx-do);background:rgba(230,0,18,.055)}
.tf button.correct{border-color:rgba(31,157,85,.5);background:var(--tx-dung-nhe)}
.tf button.wrong{border-color:rgba(230,0,18,.5);background:var(--tx-sai-nhe)}

/* chọn tranh */
.picgrid{gap:11px}
.picopt{
  border:.5px solid var(--tx-ke);border-radius:16px;padding:7px;
  box-shadow:0 1px 2px rgba(43,20,25,.04);
  transition:transform var(--tx-nhanh), border-color var(--tx-nhanh), box-shadow var(--tx-nhanh);
}
.picopt:active{transform:scale(.97)}
.picopt.sel{border-color:var(--tx-do);box-shadow:0 0 0 3px rgba(230,0,18,.16)}
.picopt .key{border:none;background:var(--tx-chim);color:var(--tx-muc);border-radius:9px;padding:3px 10px}
.picopt.sel .key{background:var(--tx-do);color:#fff}
.qimg{border:.5px solid var(--tx-ke);border-radius:16px;box-shadow:var(--tx-bong)}

/* điền từ */
.bank{gap:10px}
.word{
  min-height:48px;border:.5px solid var(--tx-ke);border-radius:14px;padding:12px 17px;
  font-size:17.5px;box-shadow:0 1px 2px rgba(43,20,25,.04);
  transition:transform var(--tx-nhanh), background var(--tx-nhanh), border-color var(--tx-nhanh);
}
.word:active{transform:scale(.96)}
.word.sel{box-shadow:0 8px 18px -10px rgba(230,0,18,.9)}
.blank{min-width:80px;border-bottom-width:2px}

/* sắp xếp câu */
.arrange{gap:10px}
.frag{
  min-height:56px;border:.5px solid var(--tx-ke);border-radius:15px;padding:14px 16px;
  font-size:17px;box-shadow:0 1px 2px rgba(43,20,25,.04);
  transition:transform var(--tx-nhanh), border-color var(--tx-nhanh);
}
.frag:active{transform:scale(.99)}
.frag .ord{width:30px;height:30px;border-radius:10px;background:var(--tx-chim);color:var(--tx-muc)}
.frag.set{border-color:var(--tx-do)}
.frag.set .ord{background:var(--tx-do);color:#fff}

/* viết */
.warea{
  border:.5px solid var(--tx-ke);border-radius:16px;padding:15px;
  font-size:18px;line-height:1.75;background:var(--tx-chim);
}
.warea:focus{background:var(--tx-o);border-color:var(--tx-do);box-shadow:0 0 0 4px rgba(230,0,18,.14)}
.kw{border-radius:12px;padding:9px 17px;box-shadow:0 8px 18px -10px rgba(230,0,18,.85)}
.wimg{border:.5px solid var(--tx-ke);border-radius:16px;box-shadow:var(--tx-bong)}

/* ══ 7 · THANH ĐIỀU HƯỚNG DƯỚI — chừa vạch Home của iPhone ════════════════ */
.navbar{
  background:var(--tx-kinh);
  -webkit-backdrop-filter:var(--tx-blur);backdrop-filter:var(--tx-blur);
  border-top:.5px solid var(--tx-ke);
  box-shadow:0 -1px 14px rgba(43,20,25,.07);
  padding:10px 14px;
  padding-bottom:calc(10px + var(--tx-duoi));
  padding-left:calc(14px + var(--safe-left,0px));
  padding-right:calc(14px + var(--safe-right,0px));
  gap:9px;
}
.navbtn{
  min-height:52px;border:.5px solid var(--tx-ke);border-radius:15px;
  font-size:15.5px;letter-spacing:-.01em;box-shadow:0 1px 2px rgba(43,20,25,.05);
  transition:transform var(--tx-nhanh), box-shadow var(--tx-nhanh), background var(--tx-nhanh);
}
.navbtn:active{transform:scale(.96)}
.navbtn.primary{
  background:linear-gradient(140deg,var(--tx-do),var(--tx-do-dam));
  box-shadow:0 10px 22px -12px rgba(230,0,18,.9);
}
.navbtn[disabled]{opacity:.32;box-shadow:none}
.gridtoggle{
  width:56px;min-height:52px;border:.5px solid var(--tx-ke);border-radius:15px;
  font-size:19px;box-shadow:0 1px 2px rgba(43,20,25,.05);
  transition:transform var(--tx-nhanh), background var(--tx-nhanh);
}
.gridtoggle:active{transform:scale(.94);background:var(--tx-chim)}

/* ══ 8 · PHIẾU TRẢ LỜI — tấm trượt kiểu iOS, giữ nguyên cách nhảy câu ═════ */
.sheet{background:rgba(28,19,32,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet-in{
  border-radius:26px 26px 0 0;padding:10px 18px calc(24px + var(--tx-duoi));
  max-height:78vh;box-shadow:0 -10px 40px rgba(43,20,25,.25);
}
/* tay nắm kéo kiểu iOS — thuần trang trí, không chặn bấm */
.sheet-in::before{
  content:"";display:block;width:38px;height:5px;border-radius:999px;
  background:var(--tx-ke-dam);margin:0 auto 14px;
}
.sheet h3{font-size:16px;letter-spacing:-.015em;color:var(--tx-muc);margin:.1em 0 1em}
.dotgrid{gap:8px}
.dotgrid .dot{
  border:.5px solid var(--tx-ke);border-radius:13px;font-size:14px;min-height:40px;
  transition:transform var(--tx-nhanh), background var(--tx-nhanh);
}
.dotgrid .dotgrid .dot:active{transform:scale(.92)}
.dotgrid .dot.done{background:var(--tx-dung-nhe);border-color:rgba(31,157,85,.45);color:var(--tx-dung)}
.dotgrid .dot.cur{background:var(--tx-do);border-color:var(--tx-do);color:#fff;box-shadow:0 6px 14px -6px rgba(230,0,18,.9)}
.legend{font-size:12px;color:var(--tx-mo);margin-top:16px;gap:14px}

/* ══ 9 · HỘP THOẠI + NHẮC NGẮN ═══════════════════════════════════════════ */
.modal-bg{background:rgba(28,19,32,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.modal-box{
  border-radius:24px;padding:24px;max-width:360px;
  box-shadow:0 30px 70px -20px rgba(43,20,25,.55);
}
.modal-box h3{font-size:19px;letter-spacing:-.02em;color:var(--tx-muc)}
.modal-box p{font-size:14.5px;line-height:1.6}
.modal-btns{gap:10px}
.toast{
  bottom:calc(104px + var(--tx-duoi));background:rgba(43,20,25,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:13.5px;padding:12px 20px;
}

/* ══ 10 · MÀN KẾT QUẢ — số liệu vẫn do hệ thống cũ tính ══════════════════ */
.score-hero{
  border-radius:26px;padding:30px 20px;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(245,197,24,.32) 0%, rgba(245,197,24,0) 58%),
    linear-gradient(140deg,#E0114A 0%,#B3000E 62%,#7A0F1C 100%);
  box-shadow:0 22px 50px -24px rgba(230,0,18,.9);
}
.score-hero .big{font-size:66px;letter-spacing:-.03em}
.score-hero .rank{
  background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.3);
  padding:10px 22px;min-height:44px;display:inline-flex;align-items:center;
}
.bd{gap:11px}
.bd .b{
  background:var(--tx-o);border:.5px solid var(--tx-ke);border-radius:18px;
  padding:16px 12px;box-shadow:var(--tx-bong);
}
.bd .b .v{font-size:27px;letter-spacing:-.02em}
.bd .b .lab{font-size:12px;color:var(--tx-mo)}
.rev-item{
  border:.5px solid var(--tx-ke);border-radius:18px;padding:16px;
  box-shadow:0 1px 2px rgba(43,20,25,.05);
}
.rev-item.ok{border-left:4px solid var(--tx-dung)}
.rev-item.no{border-left:4px solid var(--tx-do)}
.badge{font-size:11.5px;padding:5px 11px;font-weight:800}
.badge.ok{background:var(--tx-dung-nhe);color:var(--tx-dung)}
.badge.no{background:var(--tx-sai-nhe);color:var(--tx-do)}
.exp{background:var(--tx-chim);border-radius:14px;padding:13px 15px;font-size:13.8px;line-height:1.7}
.sec-h{font-size:17px;letter-spacing:-.018em;color:var(--tx-muc)}
/* đã nộp xong thì ẩn thanh điều hướng cũ — tránh bấm nhầm "Nộp toàn bài" lần nữa.
   Chỉ ẩn bằng CSS, nút vẫn còn trong trang; trình duyệt quá cũ thì hiện như trước. */
body:has(.score-hero) .navbar{display:none}
body:has(.score-hero) .wrap{padding-bottom:calc(40px + var(--tx-duoi))}
.rev-pics .rp{border:.5px solid var(--tx-ke);border-radius:12px}
.rev-pics .rp.ok{border-color:rgba(31,157,85,.55)}
.rev-img{border:.5px solid var(--tx-ke);border-radius:12px}

/* ══ 11 · ĐIỆN THOẠI ═════════════════════════════════════════════════════ */
@media(max-width:680px){
  /* nút Trang Chủ thu thành nút tròn chỉ còn biểu tượng → không đè tên phần thi */
  .homefab{width:44px;padding:0;justify-content:center;font-size:0;gap:0}
  .homefab::before{content:"🏠";font-size:19px;line-height:1}
  .bar{padding-left:calc(68px + var(--safe-left,0px))!important}
  .phasetag{font-size:11.5px;letter-spacing:.04em}
  .timer{padding:8px 13px;font-size:15px}

  .wrap{padding-left:14px;padding-right:14px}
  .card,.qbox{padding:17px;border-radius:20px}
  h1.title{font-size:23px}
  .passage{font-size:16.5px;line-height:1.85;padding:14px 15px}
  .stmt{font-size:19.5px}
  .opt{font-size:16.5px;padding:13px 14px}
  .word{font-size:16.5px}
  .navbtn{font-size:14.5px;min-height:50px}
  .gridtoggle{width:52px;min-height:50px}
  .score-hero{padding:26px 16px;border-radius:22px}
  .score-hero .big{font-size:54px}
  .score-hero .msc{width:86px;right:-4px;bottom:-8px;opacity:.9}
  .score-hero .big,.score-hero .of,.score-hero .rank{position:relative;z-index:2}
  .bd{grid-template-columns:repeat(3,1fr);gap:8px}
  .bd .b{padding:13px 8px}
  .bd .b .v{font-size:22px}
  .bd .b .lab{font-size:11px}
}
@media(max-width:380px){
  .tf button{min-height:76px;font-size:15px}
  .dotgrid{grid-template-columns:repeat(6,1fr)}
}

/* ══ 12 · MÁY TÍNH — giữ bản rộng, chỉ thoáng hơn ════════════════════════ */
@media(min-width:1024px){
  .wrap{max-width:920px}
  .navbar{
    left:50%;right:auto;width:920px;margin-left:-460px;
    border-radius:20px 20px 0 0;border:.5px solid var(--tx-ke);border-bottom:0;
  }
  .qbox{padding:26px 28px}
  .opt{font-size:18.5px}
}

/* ══ 13 · TÔN TRỌNG CÀI ĐẶT "GIẢM CHUYỂN ĐỘNG" CỦA MÁY ═══════════════════ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .timer.warn{animation:none!important}
  .mascot{animation:none!important}
  .opt:active,.btn:active,.navbtn:active,.word:active,
  .tf button:active,.picopt:active,.homefab:active,.gridtoggle:active,
  .dotgrid .dot:active{transform:none}
}

/* ══ 14 · IN GIẤY — giữ nguyên hành vi in đã có ══════════════════════════ */
@media print{
  .homefab,.bar,.navbar,.sheet,.modal-bg{display:none!important}
  .card,.qbox,.rev-item{box-shadow:none;border:1px solid #ddd}
}