:root{
  /* Bang mau spekspek: den, xanh cerulean #007BA7, hong #FF2D95.
     --brand  #007BA7  nen nut, thanh, vien, logo
     --hot    #FF2D95  diem nhan: chu nghieng o tieu de, nhan Pro, huy hieu
     --acc    sac sang hon cua #007BA7, chi dung cho CHU nho tren nen den
              (#007BA7 tren nen den chi dat ti le tuong phan ~4.4:1, hoi thap
              cho chu co nho; ban sang hon dat ~7:1)
     --teal   ten cu, giu lai de khong phai sua 100 cho; bang --brand */
  --ink:#000000;
  --ink-2:#0A1016;
  --ink-3:#111B24;
  --paper:#EEF6FA;
  --text:#EEF3F6;
  --muted:#8C9BA8;
  --brand:#007BA7;
  --hot:#FF2D95;
  --acc:#4DA9CF;
  --teal:#007BA7;
  --red:#FF4D5E;
  --amber:#F2B441;
  --line:rgba(140,155,168,.22);
  --display:"Newsreader",Georgia,serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--ink)}
body{
  min-height:100%;margin:0;background:
    radial-gradient(1100px 700px at 78% -10%, rgba(0,123,167,.30) 0%, transparent 60%),
    var(--ink);
  color:var(--text);font-family:var(--body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
/* Một khung lề duy nhất. Trước đây thanh tren va chan trang nam
   ngoai .wrap nen dinh sat mep man hinh. Gio ca ba dung chung
   .shellinner, nen le luon thang hang.
   One gutter scale. The header and footer used to sit outside the
   padded container and ran to the screen edge; now all three share
   the same inner width. */
:root{ --shell:1180px; --gut:clamp(20px, 5vw, 64px) }
.wrap,.shellinner{max-width:var(--shell);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.wrap{padding-top:38px;padding-bottom:88px}
.shellinner{width:100%}

/* ---------- masthead ---------- */
.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mark{font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.01em}
.mark em{font-style:italic;color:var(--hot)}
.mast-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- setup screen ---------- */
.lede{font-family:var(--display);font-size:clamp(30px,4.6vw,46px);line-height:1.12;font-weight:300;
  margin:38px 0 10px;max-width:19ch;letter-spacing:-.015em}
.lede em{font-style:italic;color:var(--hot)}
.sub{color:var(--muted);max-width:56ch;margin:0 0 30px}
.setup{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:start}
@media(max-width:820px){.setup{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}
select,input[type=text]{width:100%;padding:10px 12px;background:var(--ink-2);color:var(--text);
  border:1px solid var(--line);border-radius:8px;font-family:var(--body);font-size:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;padding:9px 0;color:var(--muted);font-size:14px}
.check input{margin-top:3px;accent-color:var(--teal)}
.check b{color:var(--text);font-weight:500;display:block}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 22px;border-radius:999px;
  background:var(--teal);color:#FFFFFF;font-weight:600;letter-spacing:.01em;transition:transform .12s,filter .12s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text);font-weight:500}
.btn.ghost:hover{border-color:var(--teal);filter:none}
.btn.danger{background:transparent;border:1px solid rgba(255,77,94,.5);color:#FF8A96}
.btn[disabled]{opacity:.4;pointer-events:none}
.note{font-size:13px;color:var(--muted);margin-top:14px}
.note code{font-family:var(--mono);font-size:12px;background:var(--ink-2);padding:2px 6px;border-radius:4px}

/* ---------- examiner portrait + timer ring (signature) ---------- */
.portrait-block{display:flex;flex-direction:column;align-items:center;gap:14px}
.portrait{position:relative;width:240px;height:240px}
.portrait svg.ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring .track{fill:none;stroke:rgba(140,155,168,.18);stroke-width:3}
.ring .prog{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;
  transition:stroke-dashoffset .25s linear,stroke .3s}
.portrait .frame{position:absolute;inset:14px;border-radius:50%;overflow:hidden;
  background:var(--ink-2);border:1px solid var(--line)}
.portrait .frame img{width:100%;height:100%;object-fit:cover;display:block}
.portrait.speaking .frame{box-shadow:0 0 0 3px rgba(0,123,167,.28),0 0 46px rgba(0,123,167,.3)}
.portrait.listening .frame{box-shadow:0 0 0 3px rgba(255,77,94,.3),0 0 46px rgba(255,77,94,.28)}
.clock{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  font-family:var(--mono);font-size:15px;padding:4px 12px;border-radius:999px;
  background:var(--ink);border:1px solid var(--line);letter-spacing:.06em}
.clock.warn{color:var(--amber);border-color:rgba(242,180,65,.45)}
.status{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;min-height:18px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.status.rec .dot{background:var(--red);animation:pulse 1.1s infinite}
.status.spk .dot{background:var(--teal);animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ---------- test screen ---------- */
.test-grid{display:grid;grid-template-columns:280px 1fr;gap:40px;margin-top:30px;align-items:start}
@media(max-width:820px){.test-grid{grid-template-columns:1fr;gap:26px}}
.partbar{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.pchip{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pchip.on{background:var(--teal);color:#FFFFFF;border-color:var(--teal)}
.pchip.done{color:var(--acc);border-color:rgba(0,123,167,.45)}
.qcard{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:26px 28px;min-height:190px;
  display:flex;flex-direction:column;justify-content:center}
.qmeta{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.qtext{font-family:var(--display);font-size:clamp(21px,2.7vw,29px);line-height:1.32;font-weight:300;margin:0}
.controls{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.transcript{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}
.transcript h4{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);margin:0 0 8px;font-weight:400}
.tbody{color:var(--muted);font-size:15px;min-height:26px}
.tbody b{color:var(--text);font-weight:400}

/* ---------- cue card modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;padding:22px;z-index:50}
.overlay.on{display:flex}
.cuecard{background:var(--paper);color:#1B2A2E;border-radius:6px;max-width:560px;width:100%;
  padding:34px 38px 30px;box-shadow:0 30px 70px rgba(0,0,0,.5);
  animation:cardin .35s cubic-bezier(.2,.8,.3,1)}
@keyframes cardin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.cuecard .kick{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:#7A6A52;margin-bottom:16px;display:flex;justify-content:space-between}
.cuecard h3{font-family:var(--display);font-size:25px;font-weight:500;margin:0 0 16px;line-height:1.28}
.cuecard ul{margin:0 0 18px;padding-left:20px}
.cuecard li{margin-bottom:7px}
.cuecard .and{margin:0 0 22px;font-style:italic;font-family:var(--display);font-size:18px}
.prepbar{border-top:1px solid rgba(27,42,46,.16);padding-top:16px;display:flex;
  align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.prepstate{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#7A6A52}
.bigclock{font-family:var(--mono);font-size:30px;letter-spacing:.03em}
.bigclock.warn{color:#B8442F}
.cuecard .btn{background:#1B2A2E;color:var(--paper)}
.meter{height:3px;background:rgba(27,42,46,.14);border-radius:2px;overflow:hidden;width:100%;margin-top:14px}
.meter i{display:block;height:100%;background:#1B2A2E;width:100%;transition:width .25s linear}
.meter.rec i{background:var(--red)}

/* ---------- results ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:26px 0 34px}
@media(max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--ink);padding:18px 20px}
.stat .v{font-family:var(--mono);font-size:26px;color:var(--acc)}
.stat .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ans{border-top:1px solid var(--line);padding:20px 0}
.ans .who{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.ans .q{font-family:var(--display);font-size:19px;font-weight:300;margin:0 0 12px;line-height:1.4}
.ans audio{width:100%;max-width:420px;height:38px;margin-bottom:10px;filter:invert(.9) hue-rotate(180deg)}
.ans .said{color:var(--muted);font-size:14.5px}
.ans .tags{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:8px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(80px);
  background:var(--ink-3);border:1px solid var(--line);padding:11px 18px;border-radius:999px;
  font-size:14px;transition:transform .3s, opacity .3s, visibility .3s;z-index:80;
  opacity:0;visibility:hidden;pointer-events:none}
.toast.on{transform:translateX(-50%);opacity:1;visibility:visible;pointer-events:auto}
/* ---------- login ---------- */
.loginwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;margin-top:6vh}
@media(max-width:820px){.loginwrap{grid-template-columns:1fr;gap:30px;margin-top:3vh}}
.signin{margin:26px 0 18px;min-height:44px}
.whybox{font-size:13.5px;color:var(--muted);max-width:44ch}
.whybox li{margin-bottom:6px}

/* ---------- checkout ---------- */
.pay{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;max-width:440px;width:100%;
  padding:28px 30px;animation:cardin .3s cubic-bezier(.2,.8,.3,1);max-height:92vh;overflow-y:auto}
.pay h3{font-family:var(--display);font-size:24px;font-weight:500;margin:0 0 4px}
.pay .amt{font-family:var(--mono);font-size:15px;color:var(--acc);margin-bottom:20px}
.tabs{display:flex;gap:6px;margin-bottom:20px}
.tabs button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.tabs button.on{background:var(--teal);color:#FFFFFF;border-color:var(--teal);font-weight:600}
.qrbox{background:var(--paper);border-radius:10px;padding:14px;text-align:center;margin-bottom:16px}
.qrbox img{width:100%;max-width:250px;display:block;margin:0 auto}
.bankrow{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.bankrow:last-child{border:0}
.bankrow span{color:var(--muted)}
.bankrow b{font-family:var(--mono);font-weight:500;text-align:right;word-break:break-all}
.copy{color:var(--acc);font-size:11px;margin-left:7px;font-family:var(--body)}
.waiting{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);
  margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.spin{width:13px;height:13px;border:2px solid var(--line);border-top-color:var(--teal);
  border-radius:50%;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.paid{text-align:center;padding:20px 0}
.paid .tick{font-size:40px;color:var(--acc);line-height:1}
#ppBox{min-height:52px}
.payhint{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}

/* ---------- masthead: hai vùng, không chen chúc ---------- */
.masthead{position:sticky;top:0;z-index:40;padding:0}
.masthead .shellinner{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-top:14px;padding-bottom:14px}
.mast-left{display:flex;align-items:center;gap:12px;min-width:0}
.mast-left .mark{white-space:nowrap}
.mast-right{display:flex;align-items:center;gap:10px;flex:none}

.mast-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:3px 10px;border:1px solid var(--line);border-radius:999px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.homebtn{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
  display:none;white-space:nowrap}
.homebtn:hover{color:var(--text);border-color:var(--teal)}
.homebtn.on{display:inline-block}
.btn.confirming{background:var(--red);color:#fff;border-color:var(--red)}

/* ---------- chip tài khoản + thực đơn ---------- */
.account{position:relative}
.acctchip{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;
  border:1px solid var(--line);border-radius:999px;color:var(--text);max-width:220px}
.acctchip:hover{border-color:var(--teal)}
.acctchip img{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover}
.acctinitial{width:26px;height:26px;border-radius:50%;background:var(--ink-3);color:var(--acc);
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:none}
.acctname{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:110px}
.acctadmin{font-family:var(--mono);font-size:9px;letter-spacing:.12em;padding:2px 6px;
  border-radius:4px;background:var(--teal);color:#FFFFFF;flex:none}
.acctchip .caret{font-size:10px;color:var(--muted);flex:none}

.acctmenu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;z-index:50;
  background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);display:none}
.acctmenu.on{display:block}
.acctmail{font-size:12.5px;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--line);
  margin-bottom:4px;word-break:break-all}
.acctmenu button{display:block;width:100%;text-align:left;padding:9px 10px;border-radius:8px;
  font-size:13.5px;color:var(--text)}
.acctmenu button:hover{background:var(--ink-3)}

/* ---------- đăng nhập cục bộ ---------- */
.loginrow{display:flex;gap:9px;max-width:400px}
.loginrow input{flex:1}
.loginrow .btn{flex:none;padding:11px 20px}

@media(max-width:720px){
  .masthead{flex-wrap:wrap;gap:10px;padding:11px 0}
  .mast-left{width:100%;justify-content:space-between}
  .mast-right{width:100%;justify-content:flex-start}
  .mark{font-size:21px}
  .acctname{max-width:80px}
  .loginrow{flex-direction:column}
  .loginrow .btn{width:100%;justify-content:center}
}

/* ---------- quota ---------- */
.quota{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;
  border:1px solid var(--line);font-family:var(--mono);font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.quota b{color:var(--acc);font-weight:500}
.quota.out{border-color:rgba(242,180,65,.45);color:var(--amber)}
.quota.paid b{color:var(--acc)}
.pips{display:flex;gap:4px}
.pips i{width:16px;height:3px;border-radius:2px;background:var(--teal)}
.pips i.used{background:rgba(140,155,168,.28)}

/* ---------- plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0 26px}
@media(max-width:860px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);border-radius:14px;padding:24px 22px;background:var(--ink-2);
  display:flex;flex-direction:column}
.plan.best{border-color:var(--teal);background:linear-gradient(180deg,rgba(0,123,167,.09),transparent 40%),var(--ink-2)}
.plan .tag{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acc);margin-bottom:12px;min-height:14px}
.plan h3{font-family:var(--display);font-size:23px;font-weight:500;margin:0 0 4px}
.plan .price{font-family:var(--mono);font-size:27px;margin:10px 0 2px}
.plan .per{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.plan ul{list-style:none;padding:0;margin:0 0 22px;flex:1}
.plan li{padding:6px 0 6px 22px;position:relative;font-size:14px;color:var(--muted)}
.plan li:before{content:"";position:absolute;left:4px;top:13px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}
.plan li.no{opacity:.5}.plan li.no:before{background:rgba(140,155,168,.35)}
.plan .btn{justify-content:center;width:100%}
.redeem{border-top:1px solid var(--line);padding-top:22px;margin-top:8px;max-width:440px}
.redeem .row{display:flex;gap:10px}
.redeem input{flex:1}
.warnbox{border:1px solid rgba(242,180,65,.4);background:rgba(242,180,65,.06);border-radius:10px;
  padding:14px 18px;margin:24px 0;font-size:13.5px;color:var(--muted)}
.warnbox b{color:var(--amber);display:block;margin-bottom:4px;font-weight:500}
.resfoot{border-top:1px solid var(--line);margin-top:26px;padding-top:24px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- speech-to-text status ---------- */
.sttflag{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted);margin-left:8px}
.sttflag.live{color:var(--acc);border-color:rgba(0,123,167,.45)}
.sttflag.bad{color:#FF8A96;border-color:rgba(255,77,94,.45)}
.transcript h4{display:flex;align-items:center}

/* ---------- editable transcript on results ---------- */
.said[contenteditable]{border:1px dashed transparent;border-radius:6px;padding:4px 6px;margin-left:-6px}
.said[contenteditable]:hover{border-color:var(--line)}
.said[contenteditable]:focus{border-color:var(--teal);outline:none;color:var(--text)}

.iconbtn{width:32px;height:32px;border-radius:8px;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--muted);font-size:15px}
.iconbtn:hover{color:var(--text);border-color:var(--teal)}
.typing span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--teal);
  margin-right:4px;animation:bob 1s infinite}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes bob{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   BỔ SUNG - additions for the bilingual, reorganised layout
   ============================================================ */

/* chuyển ngôn ngữ / language switch */
.langswitch{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.langswitch button{padding:4px 11px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted)}
.langswitch button.on{background:var(--teal);color:#FFFFFF;font-weight:600}
.langswitch button:not(.on):hover{color:var(--text)}

/* nhóm tuỳ chọn / grouped settings */
.group{border:1px solid var(--line);border-radius:12px;padding:14px 18px 6px;margin:0 0 16px}
.group legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acc);padding:0 8px}
.group .field:last-child,.group .row2:last-child{margin-bottom:10px}
.check i{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:1px}
.check b{display:block;color:var(--text);font-weight:500}

/* nghĩa tiếng Việt / Vietnamese meaning */
.qvi{font-size:15px;color:var(--muted);margin:14px 0 0;padding-top:13px;
  border-top:1px dashed var(--line);line-height:1.5}
.cuevi{background:rgba(27,42,46,.05);border-left:2px solid rgba(27,42,46,.25);
  padding:12px 14px;margin:0 0 20px;font-size:13.5px;line-height:1.6;color:#4A5A5E}
.cuevi b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#7A6A52;margin-bottom:6px;font-weight:400}

/* danh sách lý do đăng nhập / login reasons */
.whybox{font-size:13.5px;color:var(--muted);max-width:44ch;padding-left:18px;margin:0}
.whybox li{margin-bottom:6px}

/* tiếng Việt dài hơn tiếng Anh - cho tiêu đề chỗ thở */
html[lang="vi"] .lede{max-width:22ch}
html[lang="vi"] .pchip,html[lang="vi"] .qmeta{letter-spacing:.06em}

/* ---------- chọn giám khảo / character picker ---------- */
.whopick{display:flex;gap:6px;flex-wrap:wrap}
.whopick button{flex:1;min-width:72px;padding:8px 10px;border-radius:9px;border:1px solid var(--line);
  font-size:12.5px;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.whopick button:hover{color:var(--text);border-color:var(--teal)}
.whopick button.on{background:var(--teal);color:#FFFFFF;border-color:var(--teal);font-weight:600}

/* ---------- canvas nhân vật / character canvas ---------- */
.avatar3d{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%}
.frame{position:relative}

/* ============================================================
   HEADER TRONG SUỐT - sticky header that blends with the page
   Nền phẳng var(--ink) đè lên gradient của body tạo ra một dải
   màu khác hẳn. Để trong suốt, chỉ làm mờ nền khi đã cuộn.
   ============================================================ */
.masthead{background:transparent;border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,backdrop-filter .25s}
.masthead.stuck{background:rgba(0,0,0,.78);border-bottom-color:var(--line);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%)}
@supports not (backdrop-filter:blur(1px)){ .masthead.stuck{background:#05090C} }

/* ---------- màn hình đăng nhập / login screen ---------- */
.loginwrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;
  align-items:center;margin-top:4vh}
.loginpanel{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:28px 30px 24px}
.authtabs{display:flex;gap:4px;background:var(--ink);border:1px solid var(--line);
  border-radius:999px;padding:4px;margin-bottom:22px}
.authtabs button{flex:1;padding:8px;border-radius:999px;font-size:13.5px;color:var(--muted)}
.authtabs button.on{background:var(--teal);color:#FFFFFF;font-weight:600}
.authtitle{font-family:var(--display);font-size:26px;font-weight:500;margin:0 0 4px;letter-spacing:-.01em}
.authsub{color:var(--muted);font-size:14px;margin:0 0 20px}
.pwwrap{position:relative}
.pwwrap input{padding-right:62px}
.pwtoggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--muted);padding:4px 6px;border-radius:6px}
.pwtoggle:hover{color:var(--acc)}
.hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.authrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px}
.check.tight{padding:0;font-size:13.5px}
.check.tight input{margin-top:2px}
.linkbtn{font-size:13px;color:var(--acc)}
.linkbtn:hover{text-decoration:underline}
.autherr{color:#FF8A96;font-size:13.5px;min-height:19px;margin:0 0 10px}
.btn.wide{width:100%;justify-content:center}
.divider{display:flex;align-items:center;gap:14px;margin:20px 0 16px;
  font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}
.social{display:flex;flex-direction:column;gap:10px;align-items:center}
.social > div{display:flex;justify-content:center;width:100%}
.socialbtn{width:100%;padding:11px;border-radius:999px;border:1px solid var(--line);
  font-size:14px;color:var(--text);display:flex;align-items:center;justify-content:center;gap:9px}
.socialbtn:hover{border-color:var(--teal)}
.loginside{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.loginside .robotwrap{width:100%;display:flex;justify-content:center}
.loginside .slogan{margin:0;text-align:center;text-wrap:balance}
.loginside .whybox{text-align:left;margin:0 auto;padding-left:18px}
.sidetitle{font-family:var(--display);font-size:30px;font-weight:300;line-height:1.2;margin:0;letter-spacing:-.015em}
.sidetitle em{font-style:italic;color:var(--acc)}

/* Dien thoai: robot nho + khau hieu nam TREN khung dang nhap, danh sach ly
   do an di de khung dang nhap len som. */
@media(max-width:900px){
  .loginwrap{grid-template-columns:1fr;gap:18px;margin-top:8px}
  .loginside{order:-1;flex-direction:row;gap:14px;text-align:left;justify-content:center}
  .loginside .robotwrap{width:92px;flex:none}
  .loginside .robot{max-width:92px}
  .loginside .slogan{text-align:left;font-size:clamp(20px,5.6vw,26px);line-height:1.25}
  .loginside .whybox{display:none}
  .loginpanel{padding:22px 18px 18px;border-radius:16px}
  .authrow{flex-wrap:wrap;row-gap:8px}
}
@media(max-width:380px){
  .loginside .robotwrap{width:72px}.loginside .robot{max-width:72px}
  .authtabs button{font-size:13px;padding:8px 4px}
}

/* ---------- một gói duy nhất / single plan ---------- */
.plans{grid-template-columns:1fr}
.plan.solo{max-width:420px;margin:0 auto}
.plan.solo .price{font-size:38px}

/* ============================================================
   NHỊP SỐNG CHO TRANG / MOTION
   Nền chuyển màu chậm, phần tử trượt vào khi đổi màn hình,
   nút và ô nhập phản hồi rõ khi chạm.
   ============================================================ */
body{background:
  radial-gradient(1200px 760px at 78% -12%, rgba(0,123,167,.30) 0%, transparent 58%),
  radial-gradient(900px 620px at 8% 105%, rgba(255,45,149,.10) 0%, transparent 55%),
  var(--ink);
  background-attachment:fixed}
/* dien thoai bo qua nen "fixed" va chi to mot man hinh dau, de lai vach den
   khi cuon. Tren man hinh nho cho nen cuon theo trang. */
@media(max-width:900px){body{background-attachment:scroll}}

body:before{
  content:"";position:fixed;inset:-30% -10% auto -10%;height:70vh;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,123,167,.16), transparent 72%);
  filter:blur(28px);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(-6%,0,0) scale(1)}
  50%{transform:translate3d(4%,4%,0) scale(1.12)}
  100%{transform:translate3d(8%,-3%,0) scale(1.04)}}

section{animation:rise .42s cubic-bezier(.2,.8,.28,1)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.btn{position:relative;overflow:hidden}
.btn:not(.ghost):not(.danger):after{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-120%)}
.btn:not(.ghost):not(.danger):hover:after{transform:translateX(120%);transition:transform .65s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.plan,.qcard,.loginpanel{transition:transform .25s,box-shadow .25s,border-color .25s}
.plan:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.32)}

/* ============================================================
   Ô NHẬP / FORM FIELDS
   Trước đây chỉ là hộp phẳng. Giờ có chiều sâu, viền sáng khi
   focus, và nhãn không bị dính vào ô.
   ============================================================ */
input[type=text],input[type=email],input[type=password],input[type=tel],select,textarea{
  width:100%;padding:13px 14px;font-family:var(--body);font-size:14.5px;
  color:var(--text);background:rgba(0,0,0,.72);
  border:1px solid var(--line);border-radius:11px;
  transition:border-color .18s,box-shadow .18s,background .18s}
input::placeholder,textarea::placeholder{color:#5F7A85}
input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,select:hover{border-color:#3A6070}
input[type=text]:focus,input[type=tel]:focus,input[type=email]:focus,input[type=password]:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--teal);background:rgba(0,0,0,.95);
  box-shadow:0 0 0 3px rgba(0,123,167,.16)}
input:-webkit-autofill{-webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 40px #0D2129 inset;caret-color:var(--text)}
.field label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.field{margin-bottom:16px}
select{appearance:none;-webkit-appearance:none;padding-right:36px;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

/* ============================================================
   TRANG ĐĂNG NHẬP / LOGIN ART
   ============================================================ */
.hero{width:100%;max-width:360px;margin:0 auto}
.heroart{width:100%;height:auto;display:block;overflow:visible}
.hbody{animation:bob 4.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.hmouth{animation:talk 1.5s steps(1,end) infinite;transform-origin:160px 190px}
@keyframes talk{0%{ry:6}25%{ry:2}50%{ry:9}75%{ry:3}100%{ry:6}}
.heyes{animation:wink 5.2s infinite}
@keyframes wink{0%,94%,100%{transform:none}96%,98%{transform:translateY(160px) scaleY(.08)}}
.hbubble{animation:pop 5s ease-in-out infinite}
.hb2{animation-delay:1.6s}
@keyframes pop{0%,72%,100%{opacity:.35;transform:translateY(4px) scale(.96)}
               18%,54%{opacity:1;transform:none}}
.hf{animation:float 7s ease-in-out infinite}
.hf2{animation-duration:9s;animation-delay:.8s}
.hf3{animation-duration:6s;animation-delay:1.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
.hring{animation:spinslow 14s linear infinite;transform-origin:262px 60px}
@keyframes spinslow{to{transform:rotate(360deg)}}
.hmic{animation:mic 2.4s ease-in-out infinite}
@keyframes mic{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

.slogan{font-family:"Fraunces",var(--display);font-size:clamp(30px,3.6vw,42px);
  font-weight:300;line-height:1.1;margin:26px 0 4px;letter-spacing:-.02em;
  font-variation-settings:"SOFT" 40,"WONK" 1}
.slogan em{font-style:italic;font-weight:600;color:var(--acc)}
.slogan em.aim{color:var(--hot)}

.gnote{font-size:12.5px;line-height:1.55;text-align:left;background:rgba(0,0,0,.5);
  border:1px dashed var(--line);border-radius:10px;padding:11px 13px;margin:0}

/* nhân vật vẽ tay / illustrated examiner */
.avhost{position:absolute;inset:0}
.avsvg{width:100%;height:100%;display:block}

/* ============================================================
   CHÂN TRANG / FOOTER
   ============================================================ */
.foot{margin-top:0;border-top:1px solid var(--line);background:rgba(0,0,0,.4)}
.foot .shellinner{padding-top:52px;padding-bottom:24px}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.15fr 1.1fr;gap:30px}
.footbrand p{color:var(--muted);font-size:13.5px;max-width:34ch;margin:10px 0 16px}
.footcol h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);margin:0 0 12px;font-weight:500}
.footcol a{display:block;color:var(--muted);font-size:13.5px;text-decoration:none;padding:4px 0;
  transition:color .15s,transform .15s}
.footcol a:hover{color:var(--acc);transform:translateX(3px)}
.social-links{display:flex;gap:8px}
.social-links a{width:34px;height:34px;border-radius:10px;border:1px solid var(--line);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);
  text-decoration:none;transition:all .18s}
.social-links a:hover{color:#FFFFFF;background:var(--teal);border-color:var(--teal);transform:translateY(-2px)}
.footbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:32px;padding:16px 0 8px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
@media(max-width:1060px){
  .footgrid{grid-template-columns:1fr 1fr 1fr;gap:26px}
  .footabout{grid-column:1 / -1}
}
@media(max-width:800px){
  .footgrid{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:480px){ .footgrid{grid-template-columns:1fr} }

@media(prefers-reduced-motion:reduce){
  body:before,.hbody,.hmouth,.heyes,.hbubble,.hf,.hring,.hmic,section{animation:none!important}
}

/* ============================================================
   NHIỀU TRANG / MULTI-PAGE
   ============================================================ */
/* Trang co san chu tieng Viet trong HTML, nen khong can giau di
   cho JS chay xong. Neu JS hong, nguoi dung van doc duoc noi dung
   va Google van thay chu.
   The markup now ships with Vietnamese text, so there is nothing to
   hide while JS boots, and the page still reads if JS fails. */

.mainnav{display:flex;gap:4px;margin-left:8px}
.mainnav a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:6px 11px;
  border-radius:999px;white-space:nowrap;transition:color .15s,background .15s}
.mainnav a:hover{color:var(--text);background:rgba(140,155,168,.09)}
.mainnav a.on{color:var(--acc);background:rgba(0,123,167,.11)}
.btn.small{padding:7px 15px;font-size:13px}
.mark{text-decoration:none;color:inherit}
.acctmenu a{display:block;padding:9px 10px;border-radius:8px;font-size:13.5px;
  color:var(--text);text-decoration:none}
.acctmenu a:hover{background:var(--ink-3)}
.pagehead{margin-bottom:38px}
.secttitle{font-family:var(--display);font-size:clamp(24px,3vw,32px);font-weight:300;
  margin:52px 0 8px;letter-spacing:-.015em}
.secttitle.sm{font-size:21px;margin:44px 0 16px}

/* ---------- trang chủ ---------- */
.lhero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,72px);align-items:center;padding:clamp(24px,6vh,64px) 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);margin:0 0 14px}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:44px 0 8px}
.step3{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  transition:transform .2s,border-color .2s}
.step3:hover{transform:translateY(-3px);border-color:var(--teal)}
.step3 span{font-family:var(--mono);font-size:12px;color:var(--acc);
  border:1px solid var(--teal);width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;margin-bottom:14px}
.step3 h3{font-family:var(--display);font-size:19px;font-weight:500;margin:0 0 8px}
.step3 p{color:var(--muted);font-size:14px;margin:0;line-height:1.6}
.critgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0 10px}
.critcard{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--ink-2)}
.critcard.off{opacity:.62;border-style:dashed}
.critcard h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc);margin:0 0 10px;font-weight:500}
.critcard.off h4{color:var(--muted)}
.critcard p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.6}
@media(max-width:900px){.lhero{grid-template-columns:1fr;gap:26px}
  .steps3,.critgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps3,.critgrid{grid-template-columns:1fr}}

/* ---------- thời lượng cố định ---------- */
.examtimes{display:flex;flex-direction:column;gap:4px;padding:12px 14px;margin-bottom:12px;
  background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:10px}
.examtimes span{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.examtimes b{font-size:13px;font-weight:400;color:var(--text);line-height:1.5}

/* ---------- bảng band ---------- */
.bandbox{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;
  padding:26px 28px;margin:0 0 26px}
.bandtop{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.bandbig{text-align:center;flex:none}
.bandnum{display:block;font-family:var(--mono);font-size:52px;line-height:1;color:var(--acc)}
.bandlabel{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-top:8px}
.banddisclaim{font-size:13px;color:var(--muted);line-height:1.65;margin:0}
.crits{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 30px;padding:22px 0}
.crit.off{opacity:.6}
.crithead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.crithead span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.crithead b{font-family:var(--mono);font-size:19px;color:var(--acc);font-weight:500}
.crit.off .crithead b{font-size:12px;color:var(--muted)}
.critbar{height:5px;border-radius:3px;background:rgba(140,155,168,.18);overflow:hidden;margin-bottom:9px}
.critbar i{display:block;height:100%;border-radius:3px;
  background:linear-gradient(90deg,#005F82,var(--teal));
  animation:grow .7s cubic-bezier(.2,.8,.3,1)}
@keyframes grow{from{width:0!important}}
.crit p{font-size:13px;color:var(--muted);margin:0;line-height:1.55}
.bandacts{display:flex;gap:10px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line)}
.bandacts .btn{text-decoration:none}
.bandnone{color:var(--muted);font-size:14px;margin:0;line-height:1.6}
@media(max-width:700px){.crits{grid-template-columns:1fr}
  .bandtop{grid-template-columns:1fr;gap:16px;text-align:left}}

/* ---------- hồ sơ ---------- */
.pfcard{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
  background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:24px 28px}
.pfid{display:flex;align-items:center;gap:18px}
.pfavatar{width:62px;height:62px;border-radius:50%;background:var(--ink-3);flex:none;
  display:grid;place-items:center;overflow:hidden;
  font-family:var(--display);font-size:26px;color:var(--acc)}
.pfavatar img{width:100%;height:100%;object-fit:cover}
.pfid h2{font-family:var(--display);font-size:24px;font-weight:500;margin:0 0 2px}
.pfid p{color:var(--muted);font-size:13.5px;margin:0 0 8px}
.pftags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pfmode{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:2px 7px}
.pfplan{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.pfplan b{color:var(--acc)}
.pfplan .btn{text-decoration:none}
.pfgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pfchecks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 22px;margin-top:6px}
@media(max-width:820px){.pfgrid,.pfchecks{grid-template-columns:1fr}}

/* ---------- lịch sử ---------- */
.hist{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;
  padding:16px 0;border-top:1px solid var(--line)}
.histband{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:19px;color:var(--acc);
  background:rgba(0,123,167,.1);border:1px solid rgba(0,123,167,.3)}
.histmain h4{font-family:var(--display);font-size:17px;font-weight:400;margin:0 0 5px}
.histmeta{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--muted)}
.histacts{display:flex;gap:14px;flex:none}
.linkbtn.danger{color:#E58A82}
.linkbtn.armed{color:var(--red);font-weight:600}
.histbody{display:none;padding:4px 0 18px 70px}
.histbody.on{display:block;animation:rise .3s}
.histans{padding:12px 0;border-bottom:1px solid var(--line)}
.histans:last-child{border:0}
.histans .q{font-family:var(--display);font-size:16px;font-weight:300;margin:0 0 7px}
.histans .said{color:var(--muted);font-size:14px;margin:0;line-height:1.6}
@media(max-width:640px){
  .hist{grid-template-columns:auto 1fr;gap:12px}
  .histacts{grid-column:1 / -1;padding-left:64px}
  .histbody{padding-left:0}
}

/* ============================================================
   TRANG CHU / HOMEPAGE
   ============================================================ */
.landing > .secttitle{margin-top:clamp(56px,9vh,96px)}
.landing > .sub{max-width:62ch;margin-bottom:26px}
.centered{text-align:center;margin-top:20px}
.centered a{color:var(--acc)}

.trustrow{display:flex;gap:34px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.trustrow div{display:flex;flex-direction:column;gap:3px}
.trustrow b{font-family:var(--mono);font-size:25px;color:var(--acc);font-weight:500;line-height:1}
.trustrow span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

/* de mau */
.samplewrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,52px);align-items:start}
.cuecard.sample{box-shadow:0 22px 60px rgba(0,0,0,.34);transform:rotate(-.7deg);
  transition:transform .3s}
.cuecard.sample:hover{transform:rotate(0deg) translateY(-4px)}
.samplenote h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--acc);margin:0 0 8px;font-weight:500}
.samplenote h4:not(:first-child){margin-top:26px}
.samplenote p{color:var(--muted);font-size:14px;line-height:1.65;margin:0}

/* dai gia */
.pricestrip{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  margin-top:clamp(56px,9vh,96px);padding:32px clamp(24px,4vw,42px);border-radius:18px;
  background:linear-gradient(120deg,rgba(0,123,167,.13),rgba(0,123,167,.03));
  border:1px solid rgba(0,123,167,.28)}
.pricestrip h2{font-family:var(--display);font-size:clamp(21px,2.6vw,27px);font-weight:400;margin:0 0 6px}
.pricestrip p{color:var(--muted);font-size:14px;margin:0;max-width:52ch}
.pricestrip .btn{text-decoration:none;flex:none}

/* cau hoi thuong gap */
.faq{max-width:78ch}
.faq details{border-bottom:1px solid var(--line);padding:2px 0}
.faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
  font-family:var(--display);font-size:18px;font-weight:400;transition:color .15s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acc)}
.faq summary:after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:19px;color:var(--muted);transition:transform .2s,color .2s}
.faq details[open] summary:after{content:"-";color:var(--acc)}
.faq details p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 20px;max-width:70ch;
  animation:rise .3s}

/* keu goi cuoi trang */
.endcta{text-align:center;margin-top:clamp(56px,9vh,96px);padding:clamp(38px,6vh,64px) 24px;
  border-radius:18px;border:1px solid var(--line);background:var(--ink-2)}
.endcta h2{font-family:var(--display);font-size:clamp(26px,3.4vw,36px);font-weight:300;
  margin:0 0 10px;letter-spacing:-.015em}
.endcta p{color:var(--muted);max-width:52ch;margin:0 auto 26px;line-height:1.65}
.endcta .btn{text-decoration:none}

@media(max-width:900px){
  .samplewrap{grid-template-columns:1fr}
  .cuecard.sample{transform:none}
  .trustrow{gap:24px;flex-wrap:wrap}
}

/* lien ket dang nut khong bi gach chan */
a.btn{text-decoration:none}

/* ============================================================
   spekspek: logo, nhan goi, bang xep hang, khuyen mai, so sanh
   ============================================================ */
.mark{display:flex;align-items:center;gap:9px;text-decoration:none}
.logomark{flex:none;display:block}
.wordmark{font-family:var(--display);font-size:23px;font-weight:500;letter-spacing:-.02em;color:var(--text)}
.wordmark em{font-style:normal;color:var(--acc)}
.footmark{margin-bottom:12px}
.foottag{color:var(--muted);font-size:13.5px;max-width:34ch;margin:0 0 16px}

/* nhan Standard / Pro */
.tier{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;flex:none}
.tier.std{background:rgba(140,155,168,.16);color:var(--muted)}
.tier.pro{background:linear-gradient(120deg,var(--hot),#C4146D);color:#FFFFFF;font-weight:600}

/* so lieu ngan hang de */
.bankinfo{display:flex;gap:22px;padding:13px 15px;margin-bottom:12px;border-radius:10px;
  background:rgba(0,0,0,.5);border:1px solid var(--line)}
.bankinfo div{display:flex;flex-direction:column;gap:2px}
.bankinfo b{font-family:var(--mono);font-size:17px;color:var(--acc);font-weight:500;line-height:1}
.bankinfo span{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* bang xep hang */
.boardwrap{margin-top:clamp(56px,9vh,96px)}
.board{display:grid;gap:10px;max-width:520px}
.boardrow{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:16px;
  padding:15px 20px;border-radius:13px;background:var(--ink-2);border:1px solid var(--line)}
.boardrow .rank{font-family:var(--mono);font-size:17px;color:var(--muted);text-align:center}
.boardrow .who{font-family:var(--display);font-size:18px}
.boardrow .score{font-family:var(--mono);font-size:19px;color:var(--acc)}
.boardrow.r1{border-color:rgba(242,180,65,.5);background:linear-gradient(120deg,rgba(242,180,65,.12),transparent 60%),var(--ink-2)}
.boardrow.r1 .rank,.boardrow.r1 .score{color:var(--amber)}
.boardrow.r2{border-color:rgba(140,155,168,.4)}

/* >>> STICKER-PROMO: khuyen mai sticker (cac lop .promo*, .stickerline xoa duoc khi go) */
.promo{background:var(--ink-2);border:1px solid rgba(0,123,167,.35);border-radius:20px;
  max-width:420px;width:100%;padding:34px 34px 28px;text-align:center;position:relative;
  animation:cardin .35s cubic-bezier(.2,.8,.3,1)}
.promoclose{position:absolute;right:14px;top:10px;font-size:22px;color:var(--muted);
  width:32px;height:32px;border-radius:8px}
.promoclose:hover{color:var(--text)}
.promoart{width:132px;height:132px;margin:0 auto 18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,123,167,.22),transparent);display:grid;place-items:center}
.promoart img{max-width:110px;max-height:110px;object-fit:contain}
.promokick{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amber);margin:0 0 10px}
.promo h3{font-family:var(--display);font-size:24px;font-weight:500;margin:0 0 10px;line-height:1.25}
.promobody{color:var(--muted);font-size:14px;line-height:1.65;margin:0 0 22px}
.promoacts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.promoacts .btn{text-decoration:none}
.promofine{font-size:11.5px;color:var(--muted);margin:18px 0 0}
.promoline{color:var(--amber);font-size:13px;margin:12px 0 0}

/* goi cuoc trong ho so */
.billbox{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.billrow{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.billrow b{font-size:16px;color:var(--text);display:block;margin-bottom:3px}
.billrow p{color:var(--muted);font-size:13.5px;margin:0}
.billrow .btn{text-decoration:none;flex:none}
.billfeat{list-style:none;padding:18px 0 0;margin:16px 0 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:7px 20px}
.billfeat li{position:relative;padding-left:20px;font-size:13.5px;color:var(--muted)}
.billfeat li:before{content:"";position:absolute;left:3px;top:8px;width:6px;height:6px;
  border-radius:50%;background:var(--teal)}
@media(max-width:640px){.billfeat{grid-template-columns:1fr}}

/* so sanh truoc / sau */
.fixbox{padding:0 0 6px}
.fixbox:not(:empty){padding:14px 0 18px}
.fixnote{color:var(--muted);font-size:13.5px;margin:0}
.fixnote.err{color:#FF8A96}
.fixbtn.b7{color:var(--amber);border-bottom-color:rgba(242,180,65,.4)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.side{border-radius:12px;padding:15px 17px;border:1px solid var(--line)}
.side h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  margin:0 0 9px;font-weight:500}
.side p{margin:0;font-size:14px;line-height:1.65}
.side.before{background:rgba(0,0,0,.5)}
.side.before h5{color:var(--muted)}
.side.before p{color:var(--muted)}
.side.after{background:rgba(0,123,167,.07);border-color:rgba(0,123,167,.32)}
.side.after h5{color:var(--acc)}
.changes{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.7}
.changes li{margin-bottom:5px}
@media(max-width:700px){.compare{grid-template-columns:1fr}}

/* trang phap ly */
.legal{max-width:76ch}
.legal h2{font-family:var(--display);font-size:21px;font-weight:500;margin:38px 0 12px}
.legal p{color:var(--muted);line-height:1.75;margin:0 0 14px}
.legal a{color:var(--acc)}
.legal ul:not(.bigpoints),.legal ol{color:var(--muted);line-height:1.7;margin:0 0 16px;padding-left:22px}
.legal li{margin:0 0 8px}
.legal li b,.legal p b{color:var(--text);font-weight:500}
.legal code{font-family:var(--mono);font-size:.92em;color:var(--text)}
.legal table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:14px;line-height:1.55}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.legal th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.legal td{color:var(--muted)} .legal td:first-child{color:var(--text)}
.legal h2[id]{scroll-margin-top:90px}
.legaltoc{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.legaltoc a{font-size:13px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;text-decoration:none;color:var(--text)}
.legaltoc a:hover{border-color:var(--acc);color:var(--acc)}
.ownerbox{border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:0 0 14px}
.ownerbox p{margin:0 0 6px}
.ownerbox p:last-child{margin:0}
@media(max-width:600px){
  .legal table,.legal thead,.legal tbody,.legal tr,.legal th,.legal td{display:block}
  .legal thead{display:none}
  .legal tr{border:1px solid var(--line);border-radius:10px;padding:8px 4px;margin:0 0 10px}
  .legal td{border:0;padding:4px 12px}
  .legal td:first-child{font-weight:500}
  .legal td[data-label]::before{content:attr(data-label) ": ";font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);opacity:.8}
}
.bigpoints{list-style:none;padding:0;margin:0 0 10px;display:grid;gap:10px}
.bigpoints li{position:relative;padding:14px 18px 14px 44px;border-radius:11px;
  background:var(--ink-2);border:1px solid var(--line);color:var(--muted);font-size:14.5px}
.bigpoints li:before{content:"";position:absolute;left:19px;top:20px;width:8px;height:8px;
  border-radius:50%;background:var(--teal)}
.bigpoints b{color:var(--text);font-weight:500}

/* video giam khao quay san, nam de len khung tron */
.examvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:2}
.examvid.on{opacity:1}

/* ---------- bang xep hang day du ---------- */
.rankmeta{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-top:12px}
.rankmeta b{color:var(--acc)}
.rankrow{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:16px;
  padding:15px 20px;margin-bottom:9px;border-radius:13px;
  background:var(--ink-2);border:1px solid var(--line);transition:transform .18s}
.rankrow:hover{transform:translateX(3px)}
.rankrow .rn{font-family:var(--mono);font-size:17px;color:var(--muted);text-align:center}
.rankrow .rname{font-family:var(--display);font-size:18px}
.rankrow .rname i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc);margin-left:7px}
.rankrow .rband{font-family:var(--mono);font-size:19px;color:var(--acc)}
.rankrow.r1{border-color:rgba(242,180,65,.5);background:linear-gradient(120deg,rgba(242,180,65,.12),transparent 55%),var(--ink-2)}
.rankrow.r1 .rn,.rankrow.r1 .rband{color:var(--amber)}
.rankrow.r2{border-color:rgba(185,196,203,.35)}
.rankrow.r3{border-color:rgba(190,140,90,.35)}
.rankrow.me{box-shadow:0 0 0 2px rgba(0,123,167,.28)}

/* ---------- lich su thanh toan ---------- */
.subhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:30px 0 12px;font-weight:500}
.paybox{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:6px 6px}
.nodata{color:var(--muted);font-size:14px;margin:0;padding:18px 18px;text-align:center}
.paytable{width:100%;border-collapse:collapse;font-size:13.5px}
.paytable th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:12px 16px;font-weight:500;border-bottom:1px solid var(--line)}
.paytable td{padding:13px 16px;color:var(--muted);border-bottom:1px solid var(--line)}
.paytable tr:last-child td{border-bottom:0}

/* ---------- hai nut dang nhap / dang ky ---------- */
.authbtns{display:flex;gap:8px;flex:none}
.authbtns .btn{text-decoration:none;white-space:nowrap}

/* ---------- vi du dung sai o trang meo ---------- */
.egbad,.eggood{border-left:3px solid;padding:11px 16px;border-radius:0 9px 9px 0;margin:0 0 12px;
  font-size:14.5px;line-height:1.7}
.egbad{border-color:var(--red);background:rgba(255,77,94,.07)}
.eggood{border-color:var(--teal);background:rgba(0,123,167,.07)}
.egbad i,.eggood i{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:6px}
.fbgroup{color:var(--acc)!important}
.banktotal b{color:var(--amber)!important}

/* ============================================================
   DIEN THOAI / MOBILE
   Duoi 680px thi thanh tren xuong hai hang va cac luoi ve mot cot.
   ============================================================ */
@media(max-width:680px){
  .wrap{padding-top:22px;padding-bottom:56px}
  .mainnav{width:100%;order:3;margin:6px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:4px;scrollbar-width:none}
  .mainnav::-webkit-scrollbar{display:none}
  .mainnav a{padding:6px 12px;font-size:13px}
  .masthead .shellinner{flex-wrap:wrap;gap:10px;padding-top:11px;padding-bottom:11px}
  .mast-left{width:100%;justify-content:space-between;flex-wrap:wrap}
  .mast-right{width:100%;justify-content:space-between;gap:8px}
  .mast-meta{display:none}
  .wordmark{font-size:20px}
  .lede,.slogan{font-size:clamp(26px,7.5vw,34px)}
  .btn{padding:12px 18px;font-size:14px}
  .controls{gap:8px}
  .controls .btn{flex:1 1 auto;justify-content:center;min-width:140px}
  .setup,.test-grid,.loginwrap,.pfgrid,.pfchecks,.crits,.steps3,.critgrid,.compare,.billfeat{
    grid-template-columns:1fr!important}
  .portrait-block{order:-1}
  .portrait{width:170px!important;height:170px!important;margin:0 auto}
  .qcard{padding:20px 18px;min-height:0}
  .qtext{font-size:20px}
  .bandtop{grid-template-columns:1fr}
  .bandbox,.pfcard,.billbox{padding:20px 18px}
  .bankinfo{flex-wrap:wrap;gap:14px}
  .cuecard{padding:24px 20px 20px}
  .cuecard h3{font-size:21px}
  .promo{padding:26px 22px 22px}
  .promoart{width:104px;height:104px}
  .hist{grid-template-columns:auto 1fr}
  .histacts{grid-column:1/-1;padding-left:0;padding-top:6px}
  .paytable th:nth-child(3),.paytable td:nth-child(3){display:none}
  .rankrow{grid-template-columns:34px 1fr auto;gap:10px;padding:13px 15px}
  .rankrow .rname{font-size:16px}
  .foot .shellinner{padding-top:36px}
}
@media(max-width:400px){
  .authbtns .btn{padding:8px 12px;font-size:12.5px}
}

/* dong chuyen giua dang nhap va dang ky */
.switchline{text-align:center;font-size:14px;color:var(--muted);margin:18px 0 4px}
.switchline .linkbtn{font-size:14px;margin-left:5px;font-weight:500}

/* ---------- trang chu: bang xep hang + ngan hang de ---------- */
.boardhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:18px}
.boardhead .sub{margin:0;max-width:56ch}
.boardhead .btn{text-decoration:none;flex:none}
.bankstrip{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,52px);align-items:center;
  margin-top:clamp(56px,9vh,96px);padding:30px clamp(22px,3.5vw,38px);
  border-radius:18px;background:var(--ink-2);border:1px solid var(--line)}
.bankfig{display:grid;gap:14px}
.bankfig div{display:flex;flex-direction:column;gap:2px}
.bankfig b{font-family:var(--mono);font-size:30px;color:var(--acc);font-weight:500;line-height:1}
.bankfig span{font-family:var(--mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.banktext h3{font-family:var(--display);font-size:21px;font-weight:500;margin:0 0 9px}
.banktext p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0 0 12px;max-width:60ch}
@media(max-width:700px){
  .bankstrip{grid-template-columns:1fr;gap:22px;padding:24px 20px}
  .bankfig{grid-template-columns:repeat(3,1fr);gap:12px}
  .bankfig b{font-size:24px}
}


/* ============================================================
   TRANG BANG GIA / PRICING
   Hai cot canh nhau, de so sanh truc tiep cai nao co cai nao khong.
   ============================================================ */
.pricegrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:6px 0 10px;align-items:start}
.pcard{position:relative;background:var(--ink-2);border:1px solid var(--line);border-radius:18px;
  padding:30px 28px 26px;display:flex;flex-direction:column;
  transition:transform .22s,border-color .22s,box-shadow .22s}
.pcard:hover{transform:translateY(-3px)}
.pcard.pro{border-color:var(--teal);
  background:linear-gradient(170deg,rgba(0,123,167,.10),transparent 44%),var(--ink-2);
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.ptag{position:absolute;top:-11px;left:28px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 11px;border-radius:999px;
  background:var(--ink-3);color:var(--muted);border:1px solid var(--line)}
.ptag.hot{background:var(--hot);color:#FFFFFF;border-color:var(--hot);font-weight:600}
.pcard h2{font-family:var(--display);font-size:25px;font-weight:500;margin:6px 0 14px}
.pprice{display:flex;align-items:baseline;gap:7px;margin-bottom:6px}
.pprice b{font-family:var(--mono);font-size:38px;font-weight:500;color:var(--acc);line-height:1}
.pcard:not(.pro) .pprice b{color:var(--text)}
.pprice span{font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pnote{color:var(--muted);font-size:13.5px;margin:0 0 22px}
.plist{list-style:none;padding:0;margin:0 0 24px;flex:1;display:grid;gap:11px}
.plist li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.5}
.plist li:before{position:absolute;left:2px;top:0;font-family:var(--mono);font-size:14px}
.plist li.yes{color:var(--text)}
.plist li.yes:before{content:"+";color:var(--acc);font-weight:600}
.plist li.no{color:var(--muted);opacity:.58}
.plist li.no:before{content:"-";color:var(--muted)}
.pcard .btn{justify-content:center}
.pcard .btn:disabled,.pcard .btn[disabled]{opacity:.45;pointer-events:none}
.pfine{font-size:12px;color:var(--muted);text-align:center;margin:12px 0 0}

/* noi ro ve tien */
.clearbox{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.citem{border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--ink-2)}
.citem h4{font-family:var(--display);font-size:17px;font-weight:500;margin:0 0 8px;color:var(--acc)}
.citem p{color:var(--muted);font-size:14px;line-height:1.7;margin:0}

/* huong dan dat mua */
.order{background:var(--ink-2);border:1px solid rgba(0,123,167,.35);border-radius:20px;
  max-width:480px;width:100%;padding:34px 34px 28px;position:relative;
  animation:cardin .35s cubic-bezier(.2,.8,.3,1);max-height:92vh;overflow-y:auto}
.order h3{font-family:var(--display);font-size:25px;font-weight:500;margin:0 0 6px}
.orderprice{display:flex;align-items:baseline;gap:7px;margin-bottom:18px}
.orderprice b{font-family:var(--mono);font-size:32px;color:var(--acc);font-weight:500}
.orderprice span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.orderlead{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 22px}
.ordersteps{counter-reset:s;list-style:none;padding:0;margin:0 0 24px;display:grid;gap:15px}
.ordersteps li{counter-increment:s;position:relative;padding-left:42px}
.ordersteps li:before{content:counter(s);position:absolute;left:0;top:-1px;width:27px;height:27px;
  border-radius:50%;border:1px solid var(--teal);color:var(--acc);
  display:grid;place-items:center;font-family:var(--mono);font-size:12px}
.ordersteps b{display:block;font-size:14.5px;font-weight:500;margin-bottom:3px}
.ordersteps span{color:var(--muted);font-size:13.5px;line-height:1.6}
.orderacts{display:grid;gap:9px}
.orderacts .btn{text-decoration:none;justify-content:center}

@media(max-width:820px){
  .pricegrid,.clearbox{grid-template-columns:1fr}
  .pcard{padding:26px 22px 22px}
  .order{padding:26px 22px 22px}
}

/* >>> STICKER-PROMO: nhac tang sticker tren the gia */
.stickerline{margin:10px 0 0;padding:10px 12px;border-radius:9px;text-align:center;
  font-size:12.5px;line-height:1.5;color:var(--amber);
  background:rgba(242,180,65,.09);border:1px dashed rgba(242,180,65,.4)}

/* ============================================================
   ROBOT DONG
   ============================================================ */
.robot{width:100%;max-width:260px;height:auto;display:block;margin:0 auto;overflow:visible}
.rb-all{animation:rbFloat 3.6s ease-in-out infinite;transform-origin:110px 190px}
@keyframes rbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.rb-shadow{animation:rbShadow 3.6s ease-in-out infinite}
@keyframes rbShadow{0%,100%{rx:52;opacity:.3}50%{rx:44;opacity:.18}}
.rb-head{animation:rbTilt 5.2s ease-in-out infinite;transform-origin:110px 128px}
@keyframes rbTilt{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.rb-eyes{animation:rbBlink 4.4s infinite}
@keyframes rbBlink{0%,92%,100%{transform:scaleY(1)}95%,97%{transform:scaleY(.12);transform-origin:center 86px}}
.rb-armL{animation:rbWave 2.8s ease-in-out infinite;transform-origin:54px 142px}
@keyframes rbWave{0%,70%,100%{transform:rotate(0)}80%{transform:rotate(-24deg)}90%{transform:rotate(-8deg)}}
.rb-armR{animation:rbArm 3.6s ease-in-out infinite;transform-origin:166px 142px}
@keyframes rbArm{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
.rb-ant{animation:rbTilt 5.2s ease-in-out infinite;transform-origin:110px 44px}
.rb-blip{animation:rbBlip 1.5s ease-in-out infinite}
@keyframes rbBlip{0%,100%{opacity:1;r:7}50%{opacity:.35;r:5.5}}
.rb-led{animation:rbLed 1.1s infinite}
.rb-led.b{animation-delay:.18s}
.rb-led.c{animation-delay:.36s}
@keyframes rbLed{0%,100%{opacity:.25}50%{opacity:1}}
.rb-dot{animation:rbDot 1.3s infinite}
.rb-dot.d2{animation-delay:.16s}
.rb-dot.d3{animation-delay:.32s}
@keyframes rbDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.rb-bubble{animation:rbPop 4.2s ease-in-out infinite}
@keyframes rbPop{0%,68%,100%{opacity:.25;transform:scale(.94);transform-origin:180px 46px}
                 16%,52%{opacity:1;transform:scale(1)}}

/* ============================================================
   SLOGAN CHAY CHU
   Tung tu hien ra lan luot, roi chu "aim" sang len.
   ============================================================ */
.slogan .w{display:inline-block;opacity:0;animation:wIn .55s cubic-bezier(.2,.8,.3,1) forwards}
.slogan .w:nth-child(1){animation-delay:.05s}
.slogan .w:nth-child(2){animation-delay:.16s}
.slogan .w:nth-child(3){animation-delay:.27s}
.slogan .w:nth-child(4){animation-delay:.38s}
.slogan .w:nth-child(5){animation-delay:.49s}
.slogan .w:nth-child(6){animation-delay:.60s}
.slogan .w:nth-child(7){animation-delay:.71s}
.slogan .w:nth-child(8){animation-delay:.82s}
.slogan .w:nth-child(9){animation-delay:.93s}
.slogan .w:nth-child(10){animation-delay:1.04s}
@keyframes wIn{from{opacity:0;transform:translateY(14px) rotate(-3deg)}
               to{opacity:1;transform:none}}
.slogan em{font-style:italic;color:var(--acc);position:relative}
/* Hai animation cung luc: wIn de hien ra nhu cac chu khac, aimGlow de
   sang nhip nhang sau khi da hien. Khai bao rieng aimGlow se ghi de wIn.
   Both animations at once. Declaring aimGlow alone would replace wIn. */
.slogan .aim{display:inline-block;
  animation:wIn .55s cubic-bezier(.2,.8,.3,1) .82s forwards,
            aimGlow 2.8s ease-in-out 1.6s infinite}
@keyframes aimGlow{0%,100%{text-shadow:none;transform:scale(1)}
                   50%{text-shadow:0 0 22px rgba(255,45,149,.6);transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){
  .rb-all,.rb-shadow,.rb-head,.rb-eyes,.rb-armL,.rb-armR,.rb-ant,.rb-blip,
  .rb-led,.rb-dot,.rb-bubble,.slogan .w,.slogan .aim{animation:none!important}
  .slogan .w{opacity:1}
}

.robotwrap{margin-bottom:6px}
.loginside .slogan{font-size:clamp(26px,3.2vw,36px);margin:10px 0 18px;text-align:center}
.loginside .whybox{margin:0 auto}


/* slogan co hai ban, hien theo ngon ngu dang chon */
.slogan .sl-en{display:none}
html[lang="en"] .slogan .sl-vi{display:none}
html[lang="en"] .slogan .sl-en{display:inline}

/* ============================================================
   POP-UP STICKER: anh lon ben trai, chu ben phai
   Anh sticker nhieu chi tiet nen can dien tich. Dat canh chu thay vi
   tren dau chu de khong bi nho lai thanh mot o tron be ti.
   ============================================================ */
.promo{max-width:860px;width:100%;padding:0;overflow:hidden;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.promoart{width:auto;height:auto;margin:0;border-radius:0;
  background:linear-gradient(160deg,#FBEFF3,#F4E6F4 55%,#E9E8F7);
  display:flex;align-items:center;justify-content:center;padding:22px}
.promoart img{width:100%;max-width:none;max-height:520px;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 22px rgba(120,60,90,.18))}
.promotext{padding:40px 36px 32px;display:flex;flex-direction:column;justify-content:center}
.promo h3{font-size:27px;margin:0 0 12px}
.promobody{margin:0 0 24px}
.promoacts{justify-content:flex-start}
.promofine{text-align:left}
.promoclose{z-index:2;background:rgba(0,0,0,.28);color:#fff}
.promoclose:hover{background:rgba(0,0,0,.45);color:#fff}

@media(max-width:720px){
  .promo{grid-template-columns:1fr;max-width:440px;max-height:92vh;overflow-y:auto}
  .promoart{padding:18px}
  .promoart img{max-height:280px}
  .promotext{padding:22px 22px 24px}
  .promo h3{font-size:22px}
  .promoacts .btn{flex:1 1 auto;justify-content:center}
}

.fixlock{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:11px;border:1px dashed rgba(242,180,65,.45);
  background:rgba(242,180,65,.07)}
.fixlock p{margin:0;font-size:13.5px;color:var(--muted);flex:1 1 260px}
.fixlock .btn{text-decoration:none;flex:none}

/* thanh tien do buoi thi */
.progress{display:flex;align-items:center;gap:12px;margin:-6px 0 16px}
.progbar{flex:1;height:5px;border-radius:3px;background:rgba(140,155,168,.18);overflow:hidden}
.progbar i{display:block;height:100%;width:0;border-radius:3px;background:var(--teal);
  transition:width .45s cubic-bezier(.2,.8,.3,1)}
.progress span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  white-space:nowrap;flex:none}

/* ============================================================
   TRANG THANH TOAN / CHECKOUT
   ============================================================ */
.backlink{display:inline-block;font-size:13.5px;color:var(--muted);text-decoration:none;margin-bottom:22px}
.backlink:hover{color:var(--acc)}
.cogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;align-items:start}
.cocard{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:26px 26px 24px}
.cocard h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 16px;font-weight:500}
.corow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.corow span{color:var(--muted)}
.corow b{font-weight:500;text-align:right;word-break:break-all}
.corow.gift b{color:var(--amber)}
.costack{font-size:13px;color:var(--muted);line-height:1.6;margin:14px 0 0;padding:11px 13px;
  border-radius:9px;background:rgba(0,123,167,.07);border:1px solid rgba(0,123,167,.25)}
.cototal{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:18px;padding-top:18px;border-top:2px solid var(--line)}
.cototal span{font-size:15px}
.cototal b{font-family:var(--mono);font-size:30px;font-weight:500;color:var(--acc)}

.ppslot{min-height:96px;border-radius:12px;border:1px dashed var(--line);
  display:flex;align-items:center;justify-content:center;padding:16px;margin-bottom:16px}
.ppslot:has(iframe),.ppslot:has(div[id^="zoid"]){border:0;padding:0}
.ppwait{color:var(--muted);font-size:13.5px;text-align:center;margin:0}
.coalt{padding:14px 0 16px;border-bottom:1px solid var(--line);margin-bottom:16px}
.coalt p{font-size:13.5px;color:var(--muted);margin:0 0 10px;line-height:1.6}
.coalt .btn{text-decoration:none}
.codev{padding:14px 15px;border-radius:11px;margin-bottom:16px;
  border:1px dashed rgba(242,180,65,.5);background:rgba(242,180,65,.06)}
.codev b{display:block;font-size:13px;color:var(--amber);margin-bottom:5px;font-weight:500}
.codev p{font-size:12.5px;color:var(--muted);margin:0 0 11px;line-height:1.55}
.cosafe{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:9px}
.cosafe li{position:relative;padding-left:22px;font-size:13px;color:var(--muted);line-height:1.55}
.cosafe li:before{content:"";position:absolute;left:4px;top:7px;width:7px;height:7px;
  border-radius:50%;background:var(--teal)}
.cocard .btn.wide{text-decoration:none;justify-content:center}

.codone{text-align:center;max-width:520px;margin:30px auto 0;padding:44px 32px;
  background:var(--ink-2);border:1px solid var(--line);border-radius:20px;animation:rise .4s}
.donetick{width:66px;height:66px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;
  font-size:30px;color:var(--ink);background:var(--teal)}
.codone h2{font-family:var(--display);font-size:28px;font-weight:500;margin:0 0 10px}
.codone p{color:var(--muted);margin:0 0 8px;line-height:1.6}
.codone .btn{text-decoration:none;margin-top:16px}

@media(max-width:820px){
  .cogrid{grid-template-columns:1fr}
  .cocard{padding:22px 18px}
  .cototal b{font-size:26px}
}

/* thong tin lich cap nhat bang xep hang */
.rankinfo{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 14px;
  border-radius:14px;overflow:hidden;background:var(--line);border:1px solid var(--line)}
.rankinfo div{background:var(--ink-2);padding:15px 18px;display:flex;flex-direction:column;gap:5px}
.rankinfo span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rankinfo b{font-size:14.5px;font-weight:500;line-height:1.4}
.rankinfo div:last-child b{color:var(--acc)}
.rankrule{margin:0 0 22px}
.boardwhen{margin:-6px 0 14px;font-family:var(--mono);font-size:11px}
@media(max-width:820px){.rankinfo{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.rankinfo{grid-template-columns:1fr}}

/* ============================================================
   LOI CAM ON SAU KHI THANH TOAN
   Moi ky tu mot mau theo vi tri, ca dong doi mau lien tuc, ky tu
   nay len tung cai, roi ca man hinh mo dan.
   ============================================================ */
.thanks{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .35s ease;padding:24px}
.thanks.on{opacity:1}
.thanks.out{opacity:0;transition:opacity .7s ease}
.thanks.out .thanksText{transform:scale(1.08) translateY(-10px);filter:blur(6px);
  transition:transform .7s ease, filter .7s ease}
.thanksText{font-family:var(--display);font-weight:600;line-height:1.15;text-align:center;
  font-size:clamp(34px,8vw,84px);letter-spacing:-.01em;max-width:14ch;
  animation:thanksHue 3.2s linear infinite}
@keyframes thanksHue{to{filter:hue-rotate(360deg)}}
.thanksText .tc{display:inline-block;color:hsl(calc(var(--i) * 24 + 330) 92% 70%);
  text-shadow:0 0 28px hsla(calc(var(--i) * 24 + 330), 92%, 60%, .45);
  animation:tcIn .42s cubic-bezier(.2,1.4,.4,1) both}
.thanksText .tc.sp{width:.28em}
@keyframes tcIn{from{opacity:0;transform:translateY(.45em) scale(.4) rotate(-12deg)}
                to{opacity:1;transform:none}}
/* con tro go chu, tat khi xong */
.thanksText:after{content:"";display:inline-block;width:.07em;height:.9em;margin-left:.06em;
  vertical-align:-.08em;background:currentColor;color:#fff;opacity:.85;animation:caret .8s steps(1) infinite}
.thanksText.done:after{display:none}
@keyframes caret{50%{opacity:0}}
.thanksText.done .tc{animation:tcIn .42s cubic-bezier(.2,1.4,.4,1) both, tcBob 1.6s ease-in-out .2s infinite;
  animation-delay:0s, calc(var(--i) * 60ms)}
@keyframes tcBob{0%,100%{transform:none}50%{transform:translateY(-6px)}}
/* kim tuyen */
.sparks{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.sparks i{position:absolute;width:9px;height:9px;border-radius:2px;opacity:0;
  animation:spark 1.1s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes spark{0%{opacity:1;transform:translate(0,0) rotate(0) scale(1)}
                 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(320deg) scale(.4)}}
@media(prefers-reduced-motion:reduce){
  .thanksText,.thanksText .tc,.thanksText.done .tc{animation:none}
  .thanksText:after{display:none}
}

/* ghi chu truoc khi thi: tung phan mot the */
.examnote{margin-top:4px;padding:18px 20px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line)}
.examnote h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:500}
.examnote p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0 0 8px}
.examnote p:last-child{margin-bottom:0}
.examnote .enlead{color:var(--text);margin-bottom:14px}
.enpart{padding:12px 0 2px 14px;border-left:2px solid var(--line);margin-top:10px}
.enpart > b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;margin-bottom:6px;color:var(--text)}
.enpart.hot{border-left-color:var(--teal)}
.enbadge{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:rgba(0,123,167,.14);color:var(--acc);font-weight:500}

/* ============================================================
   LOI CAM ON: anh sang quet + toa sang (bo sung cho .thanks o tren)
   ============================================================ */
.thanks{cursor:pointer}
.thanksText{position:relative;display:inline-block;padding:.08em .1em;overflow:hidden}
/* vet sang quet ngang qua chu */
.thanksText .shine{position:absolute;top:-20%;bottom:-20%;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.0) 20%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 80%,transparent 100%);
  mix-blend-mode:overlay;transform:skewX(-18deg);opacity:0}
.thanks.lit .thanksText .shine{animation:shineSweep 1.15s cubic-bezier(.3,.6,.3,1) .05s 2 forwards}
@keyframes shineSweep{0%{left:-60%;opacity:0}12%{opacity:1}100%{left:120%;opacity:0}}
/* chu toa sang nhip nhang sau khi go xong */
.thanks.lit .thanksText .tc{animation:tcIn .42s cubic-bezier(.2,1.4,.4,1) both, tcGlow 1.4s ease-in-out .1s infinite;
  animation-delay:0s, calc(var(--i) * 45ms)}
@keyframes tcGlow{0%,100%{text-shadow:0 0 18px hsla(calc(var(--i) * 24 + 330), 92%, 62%, .35)}
                  50%{text-shadow:0 0 34px hsla(calc(var(--i) * 24 + 330), 95%, 70%, .95), 0 0 70px hsla(calc(var(--i) * 24 + 330), 95%, 60%, .45)}}
/* quang sang nen phia sau */
.thanksGlow{position:absolute;width:min(90vw,760px);height:min(60vw,420px);border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,107,157,.32),rgba(110,168,255,.18) 55%,transparent 75%);
  filter:blur(10px);opacity:0;transform:scale(.7);transition:opacity .6s ease,transform 1.2s ease}
.thanks.on .thanksGlow{opacity:.75;transform:scale(1)}
.thanks.lit .thanksGlow{animation:glowPulse 1.6s ease-in-out infinite}
@keyframes glowPulse{50%{opacity:1;transform:scale(1.08)}}
.thanksSkip{position:absolute;bottom:26px;left:0;right:0;text-align:center;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.45)}
@media(prefers-reduced-motion:reduce){
  .thanks.lit .thanksText .shine,.thanks.lit .thanksText .tc,.thanks.lit .thanksGlow{animation:none}
}

/* ============================================================
   THANH TOAN SEPAY
   ============================================================ */
.mono{font-family:var(--mono);letter-spacing:.02em}
.coerr{padding:14px 16px;border-radius:11px;background:rgba(255,77,94,.09);border:1px solid rgba(255,77,94,.35);
  color:#FF8A96;font-size:14px;margin:0 0 18px}
.paycard{display:flex;flex-direction:column;gap:14px}
.payhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.payhead h3{margin:0}
.paystate{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:500;padding:5px 11px;
  border-radius:999px;background:rgba(242,180,65,.12);color:var(--amber)}
.paystate i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulseDot 1.4s ease-in-out infinite}
.paystate[data-state="under"]{background:rgba(255,77,94,.12);color:#FF8A96}
@keyframes pulseDot{50%{opacity:.25}}
.qrwrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border-radius:14px;background:#fff}
.qrwrap img{width:min(260px,70vw);height:auto;aspect-ratio:1;display:block;border-radius:8px}
.qrhint{margin:0;font-size:12.5px;color:#4b6470;text-align:center;max-width:30ch}
.underbox{padding:12px 14px;border-radius:11px;font-size:13.5px;line-height:1.6;
  background:rgba(255,77,94,.08);border:1px solid rgba(255,77,94,.3);color:var(--text)}
.underbox b{color:#FF8A96}
.paylines{display:grid;gap:2px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.pline{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;padding:11px 14px;background:rgba(0,0,0,.35)}
.pline span{font-size:12.5px;color:var(--muted)}
.pline b{font-weight:500;font-size:14.5px;word-break:break-all}
.pline.memo{background:rgba(242,180,65,.08)}
.pline.memo b{color:var(--amber);font-size:16px}
.copybtn{font-size:12px;padding:5px 11px;border-radius:8px;border:1px solid var(--line);color:var(--text);flex:none}
.copybtn:hover{border-color:var(--teal);color:var(--acc)}
.copybtn.done{border-color:var(--teal);background:var(--teal);color:#FFFFFF}
.memowarn{font-size:12.5px;color:var(--muted);margin:-4px 0 0;line-height:1.55}
.paywait{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px;border:1px dashed var(--line)}
.paywait b{display:block;font-size:13.5px;font-weight:500}
.paywait span#coCountdown{font-family:var(--mono);font-size:12px;color:var(--muted)}
.paywait span#coCountdown.warn{color:var(--amber)}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--teal);
  animation:spin .9s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.paybtns{display:flex;gap:9px;flex-wrap:wrap}
.paybtns .btn{flex:1 1 auto;justify-content:center}
.btn.ghost.danger{color:#FF8A96;border-color:rgba(255,77,94,.4)}

/* ============================================================
   BIEN NHAN: thanh cong / chua thanh cong
   ============================================================ */
.receipt{display:flex;justify-content:center}
.rcpt{width:100%;max-width:620px;background:var(--ink-2);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  animation:rise .4s ease}
.rcpthead{display:flex;gap:18px;align-items:flex-start;padding:28px 28px 22px;border-bottom:1px solid var(--line)}
.rcpthead.ok{background:linear-gradient(160deg,rgba(0,123,167,.16),transparent 70%)}
.rcpthead.fail{background:linear-gradient(160deg,rgba(242,180,65,.14),transparent 70%)}
.rcpticon{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:24px;font-weight:700}
.rcpthead.ok .rcpticon{background:var(--teal);color:#FFFFFF}
.rcpthead.fail .rcpticon{background:var(--amber);color:#2a1b00}
.rcpthead h1{font-family:var(--display);font-size:clamp(22px,3vw,28px);font-weight:500;margin:4px 0 6px}
.rcpthead p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.rcptbody{padding:8px 28px 18px}
.rrow{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
.rrow span{color:var(--muted);flex:none}
.rrow b{font-weight:500;text-align:right;word-break:break-word}
.rrow.gift b{color:var(--amber)}
.rnote{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.6}
.rnote.ok{color:var(--acc)}
.paidbox{margin:0 28px 6px;padding:14px 16px;border-radius:12px;background:rgba(0,123,167,.07);border:1px solid rgba(0,123,167,.28)}
.paidbox b{display:block;font-size:14px;margin-bottom:6px}
.paidbox p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.65}
.recheck{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.rcptacts{display:flex;gap:9px;flex-wrap:wrap;padding:18px 28px}
.rcptacts .btn{text-decoration:none;flex:1 1 auto;justify-content:center}
.rcptfoot{padding:0 28px;margin:0 0 6px;font-size:12.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.rcpthelp{padding:0 28px 24px;margin:0;font-size:12.5px;color:var(--muted)}
@media(max-width:600px){
  .rcpthead,.rcptbody,.rcptacts{padding-left:18px;padding-right:18px}
  .rcptfoot,.rcpthelp{padding-left:18px;padding-right:18px}
  .paidbox{margin-left:18px;margin-right:18px}
  .pline{grid-template-columns:1fr auto}
  .pline span{grid-column:1/-1}
}
@media print{
  #shellHeader,#shellFooter,.rcptacts,.rcptfoot,.toast,#promoMount{display:none!important}
  body{background:#fff!important;color:#000!important}
  .rcpt{border-color:#999;box-shadow:none;background:#fff}
  .rcpt *{color:#000!important}
}

/* ============================================================
   TRANG QUAN TRI
   ============================================================ */
.admstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.admstat{padding:16px 18px;border-radius:13px;background:var(--ink-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.admstat span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.admstat b{font-family:var(--mono);font-size:22px;font-weight:500;color:var(--acc)}
.admstat i{font-style:normal;font-size:12px;color:var(--muted)}
.admstat.hot{border-color:rgba(255,77,94,.5)}
.admstat.hot b{color:#FF8A96}
.admtabs{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.admtabs button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.admtabs button.on{background:var(--teal);color:#FFFFFF;border-color:var(--teal)}
.admtabs select{margin-left:auto;padding:7px 10px;border-radius:9px;background:var(--ink-2);color:var(--text);border:1px solid var(--line)}
.admtime{font-family:var(--mono);font-size:11px;color:var(--muted)}
.admtable{overflow-x:auto;border-radius:13px;border:1px solid var(--line);background:var(--ink-2)}
.paytable.adm td{white-space:nowrap;font-size:13px}
.paytable.adm tr.act td{background:rgba(255,77,94,.06)}
.rtag{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:500;background:rgba(140,155,168,.15);color:var(--muted)}
.rtag.r-paid,.rtag.s-paid{background:rgba(0,123,167,.16);color:var(--acc)}
.rtag.r-paid_late{background:rgba(0,123,167,.1);color:var(--acc)}
.rtag.r-underpaid,.rtag.s-underpaid,.rtag.r-paid_again,.rtag.r-unmatched,.rtag.r-rejected{background:rgba(255,77,94,.14);color:#FF8A96}
.rtag.s-pending{background:rgba(242,180,65,.14);color:var(--amber)}
@media(max-width:820px){.admstats{grid-template-columns:1fr 1fr}}

/* ============================================================
   BAND v2: do tin cay, so do giong noi, loi phat hien, goi y luyen
   ============================================================ */
.bandconf{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.bandconf.c-high{color:var(--acc);border-color:color-mix(in srgb, var(--teal) 45%, transparent)}
.bandconf.c-low{color:var(--amber);border-color:color-mix(in srgb, var(--amber) 45%, transparent)}
.vstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;padding:4px 0 18px;
  border-bottom:1px solid var(--line);margin-bottom:16px}
.vstats div{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.vstats b{display:block;font-family:var(--display);font-size:24px;font-weight:500}
.vstats span{font-size:12px;color:var(--muted)}
.bfinds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px 26px}
.bfind h4{margin:0 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:500}
.bfind ul{margin:0;padding-left:18px;font-size:14px}
.bfind li{margin:3px 0}
.bfind s{color:var(--red);text-decoration-thickness:1.5px}
.bfind b{color:var(--acc);font-weight:500}
.bfind p{margin:0;line-height:2}
.wchip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:13px;border:1px solid var(--line);white-space:nowrap}
.wchip.bad{color:var(--amber);border-color:color-mix(in srgb, var(--amber) 40%, transparent)}
.wchip.good{color:var(--acc);border-color:color-mix(in srgb, var(--teal) 40%, transparent)}
.ans .tags .warnTag{color:var(--amber)}
.drillrec{margin-top:20px;padding:18px;border-radius:16px;border:1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 10%, transparent), transparent 70%)}
.drillrechead{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.drillrechead h4{margin:0;font-family:var(--display);font-size:20px;font-weight:500}
.drillreclist{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.drillpick{display:block;position:relative;padding:14px 60px 14px 14px;border-radius:12px;background:var(--ink-2);
  border:1px solid var(--line);color:var(--text);text-decoration:none;transition:border-color .2s, transform .2s}
.drillpick:hover{border-color:var(--teal);transform:translateY(-1px)}
.drillpick b{display:block;font-weight:600;margin-bottom:3px}
.drillpick span{font-size:13px;color:var(--muted)}
.drillpick i{position:absolute;right:14px;top:14px;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--amber)}

/* nhan "doc quyen" */
.exbadge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;color:#FFFFFF;
  background:linear-gradient(110deg, var(--brand), var(--hot) 55%, var(--brand));background-size:200% 100%;
  animation:exshine 4s linear infinite;font-weight:500}
.exbadge:before{content:"✦"}
@keyframes exshine{to{background-position:-200% 0}}
@media (prefers-reduced-motion: reduce){.exbadge{animation:none}}

/* ============================================================
   PHONG LUYEN CHUYEN SAU / practice.html
   ============================================================ */
#prHome .pagehead .lede{margin-top:16px}
.prmeta{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch;margin:-8px 0 26px}
.prmeta > div{background:var(--ink-2);border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:150px}
.prmeta span{display:block;font-size:12px;color:var(--muted)}
.prmeta b{font-family:var(--display);font-size:22px;font-weight:500}
.prmeta .btn{align-self:center}
.prgrid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px}
@media(max-width:820px){.prgrid2{grid-template-columns:1fr}}
.prcard{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:20px 22px}
.prcard h3,.prh,.prhow h3{font-family:var(--display);font-weight:500;font-size:22px;margin:0 0 14px}
.prh{margin-top:6px}
.skrow{display:grid;grid-template-columns:130px 1fr 34px;gap:12px;align-items:center;margin:9px 0}
.skname{font-size:14px}
.skbar{height:8px;border-radius:5px;background:rgba(140,155,168,.16);overflow:hidden}
.skbar i{display:block;height:100%;border-radius:5px;background:var(--muted);transition:width .6s}
.skbar i.lo{background:var(--red)} .skbar i.mid{background:var(--amber)} .skbar i.hi{background:var(--teal)}
.skrow b{font-family:var(--mono);font-size:13px;text-align:right}
.prrec{display:grid;gap:12px}
.prgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:34px}
.drcard{text-align:left;display:flex;flex-direction:column;gap:5px;padding:16px 18px;border-radius:16px;background:var(--ink-2);
  border:1px solid var(--line);transition:border-color .2s, transform .2s;min-height:140px}
.drcard:hover{border-color:var(--teal);transform:translateY(-2px)}
.drcard b{font-size:17px;font-weight:600}
.drcrit{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.drwhy{font-size:13.5px;color:var(--muted);flex:1}
.drbest{font-size:12.5px;color:var(--amber)}
.drcard.rec{min-height:0;background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, var(--ink-2)), var(--ink-2))}
.drcard.rec.top{border-color:color-mix(in srgb, var(--teal) 55%, transparent)}
.prhow{border-top:1px solid var(--line);padding-top:22px;color:var(--muted);max-width:75ch}
.prhow p{margin:0 0 10px}

/* chay bai luyen */
.drunhead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.crittag{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--acc)}
.drtitle{margin-top:18px}
.drgoal{color:var(--muted);max-width:62ch;margin:0 0 20px}
.drgoal b{color:var(--text)}
.drq{background:var(--paper);color:#1B2A2E;border-radius:18px;padding:20px 22px;margin-bottom:16px}
.drqhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.drq .kick{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#5B7480}
.drq .linkbtn{color:#1B2A2E;text-decoration:underline}
.drq h3{font-family:var(--display);font-size:clamp(20px,2.6vw,26px);font-weight:500;margin:8px 0 4px;line-height:1.3}
.drvi{margin:4px 0 0;color:#5B7480;font-size:14px}
.drcue p{margin:10px 0 4px;font-size:14px} .drcue ul{margin:0;padding-left:20px} .drcue .and{font-style:italic}
.drtargets{margin-bottom:14px}
.drtlabel{font-size:12.5px;color:var(--muted);margin:10px 0 6px}
.drchips{display:flex;flex-wrap:wrap;gap:8px}
.drchip{display:inline-flex;flex-direction:column;gap:2px;padding:8px 14px;border-radius:12px;border:1px dashed var(--line);
  font-size:14px;color:var(--muted);transition:all .25s}
.drchip i{font-style:normal;font-size:11.5px;opacity:.8}
.drchip.hit{border-style:solid;border-color:var(--teal);color:var(--text);background:color-mix(in srgb, var(--teal) 16%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--teal) 30%, transparent)}
.drchip.ban{border-style:solid}
.drchip.ban.hit{border-color:var(--red);background:color-mix(in srgb, var(--red) 14%, transparent);box-shadow:none;animation:banshake .3s}
.drchip.ghost{opacity:.6}
.drchips.steps{counter-reset:st}
.drchips.steps .drchip:before{counter-increment:st;content:counter(st) " ·";font-family:var(--mono);font-size:11px}
@keyframes banshake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.drlive{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;padding:16px 18px;border:1px solid var(--line);
  border-radius:16px;background:var(--ink-2);margin-bottom:12px}
.drclock{font-family:var(--mono);font-size:44px;line-height:1;min-width:3.2ch}
.drclock.warn{color:var(--red)} .drclock.prep{color:var(--amber)}
.drmeters{display:grid;gap:10px}
.drlevel,.drsil{display:grid;grid-template-columns:100px 1fr auto;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.drlevel{grid-template-columns:100px 1fr}
.lvbar,.silbar{position:relative;height:8px;border-radius:5px;background:rgba(140,155,168,.16);overflow:hidden}
.lvbar i,.silbar i{display:block;height:100%;width:0;border-radius:5px;background:var(--teal);transition:width .08s linear}
.silbar i{background:var(--muted)} .silbar i.amber{background:var(--amber)} .silbar i.red{background:var(--red)}
.silbar em{position:absolute;left:75%;top:-2px;bottom:-2px;width:2px;background:var(--red);opacity:.6}
.drbrk b{color:var(--text);font-family:var(--mono)}
.drsil.flash{animation:silflash .5s}
@keyframes silflash{50%{background:color-mix(in srgb, var(--red) 18%, transparent)}}
@media(max-width:600px){.drlive{grid-template-columns:1fr}.drlevel,.drsil{grid-template-columns:84px 1fr auto}.drlevel{grid-template-columns:84px 1fr}}
.drtext{min-height:76px;padding:14px 16px;border-radius:14px;border:1px dashed var(--line);color:var(--text);font-size:15px;margin-bottom:14px}
.drtext.off{color:var(--muted);font-style:italic}
.drresult{margin-top:18px;padding:20px 22px;border-radius:18px;border:1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 10%, transparent), transparent 70%);animation:drin .4s ease-out}
@keyframes drin{from{opacity:0;transform:translateY(8px)}}
.drscore{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.drnum{font-family:var(--display);font-size:56px;line-height:1;font-weight:500}
.drnum small{font-size:18px;color:var(--muted)}
.drstars span{font-size:26px;color:rgba(140,155,168,.3);margin-right:2px}
.drstars span.on{color:#FFC94D;text-shadow:0 0 12px rgba(255,201,77,.5)}
.drscore p{margin:0;color:var(--muted);flex-basis:100%}
.drlines{margin:6px 0 10px;padding-left:18px}
.drnext{margin:0;color:var(--text)}
.drwall h4{margin:0 0 6px;font-family:var(--display);font-size:22px;font-weight:500}
.drwall p{color:var(--muted)}
.drtip{margin-top:14px}

/* trang chu: khoi gioi thieu phong luyen */
.drillpromo{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;margin:56px 0 10px;padding:28px 30px;
  border-radius:22px;border:1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  background:linear-gradient(135deg, color-mix(in srgb, var(--teal) 12%, var(--ink-2)), var(--ink-2) 65%)}
.drillpromo h2{font-family:var(--display);font-weight:500;font-size:clamp(24px,3vw,32px);margin:12px 0 10px;line-height:1.2}
.drillpromo p{color:var(--muted);margin:0 0 18px;max-width:52ch}
.drilldemo{display:grid;gap:12px;padding:18px;border-radius:16px;background:var(--ink);border:1px solid var(--line)}
.ddrow{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center;font-size:12.5px;color:var(--muted)}
.silbar i.dd1{animation:ddsil 3.2s ease-in-out infinite}
@keyframes ddsil{0%,20%{width:5%;background:var(--muted)}55%{width:55%;background:var(--amber)}80%{width:82%;background:var(--red)}100%{width:5%;background:var(--muted)}}
@media (prefers-reduced-motion: reduce){.silbar i.dd1{animation:none;width:40%}}
@media(max-width:760px){.drillpromo{grid-template-columns:1fr;padding:22px 18px}}
.plist li.star{color:var(--text)}

/* ============================================================
   CAI THIEN CAU TRA LOI (BAND 7+)
   ============================================================ */
.impbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:12px 0 4px}
.implabel{font-size:14px;font-weight:500}
.protag{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;background:var(--hot);color:#FFFFFF;font-weight:600}
.protag.big{font-size:11px;padding:4px 12px}
/* cong tac bat/tat */
.switch{position:relative;display:inline-block;width:44px;height:24px;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.switch .knob{position:absolute;inset:0;border-radius:999px;background:var(--ink-3);border:1px solid var(--line);transition:background .2s,border-color .2s}
.switch .knob:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:var(--muted);transition:transform .2s,background .2s}
.switch input:checked + .knob{background:var(--brand);border-color:var(--brand)}
.switch input:checked + .knob:after{transform:translateX(20px);background:#FFFFFF}
.switch input:focus-visible + .knob{outline:2px solid var(--hot);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.switch .knob,.switch .knob:after{transition:none}}

.imppanel{margin:10px 0 16px;padding:16px 18px;border-radius:16px;border:1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  background:linear-gradient(160deg, color-mix(in srgb, var(--brand) 10%, var(--ink-2)), var(--ink-2) 70%)}
.imppanel[hidden]{display:none}
.impmsg{margin:0;color:var(--muted);font-size:14px}
.impmsg.err{color:#FF8A96}
.impmsg + .btn{margin-top:10px}
.impdemo{margin:0 0 10px;font-size:12.5px;color:var(--amber)}
.impwarn{margin:0 0 10px;font-size:13.5px;color:var(--amber)}
.impsum{margin:0 0 12px;font-size:14.5px;line-height:1.6}
.imptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.imptabs button{padding:7px 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.imptabs button.on{background:var(--brand);border-color:var(--brand);color:#FFFFFF;font-weight:600}
.impcount{display:inline-block;min-width:18px;padding:0 5px;border-radius:999px;background:var(--hot);color:#FFFFFF;font-size:11px;text-align:center}
.impsec[hidden]{display:none}
.impsec h5{margin:14px 0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:500}
.implegend{margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.imptext{margin:0;font-size:15.5px;line-height:1.85}
.imptext del{color:#FF8A96;text-decoration:line-through;text-decoration-thickness:1.5px}
.imptext ins{text-decoration:none;background:color-mix(in srgb, var(--brand) 35%, transparent);color:#FFFFFF;border-radius:4px;padding:1px 3px}
.impcmp{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.impcmp.solo{grid-template-columns:1fr}
.impcmp.solo .before{display:none}
.impcmp .side{padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink)}
.impcmp .side h5{margin:0 0 6px}
.impcmp .side p{margin:0;font-size:15px;line-height:1.7}
.impcmp .after{border-color:color-mix(in srgb, var(--hot) 50%, transparent)}
.impcmp .after h5{color:var(--hot)}
@media(max-width:700px){.impcmp{grid-template-columns:1fr}}
.impacts{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.imperrs,.impvocab,.imptips{margin:0;padding-left:0;list-style:none;display:grid;gap:8px}
.imptips{padding-left:18px;list-style:disc}
.imperrs li,.impvocab li{display:grid;gap:3px;padding:10px 12px;border-radius:10px;background:var(--ink);border:1px solid var(--line)}
.impfix s{color:#FF8A96}
.impfix b{color:var(--acc);font-weight:600}
.impwhy{font-size:13.5px;color:var(--muted)}
.impcat{justify-self:start;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.impcat.c-grammar{color:var(--acc);border-color:color-mix(in srgb, var(--brand) 50%, transparent)}
.impcat.c-vocabulary{color:var(--hot);border-color:color-mix(in srgb, var(--hot) 45%, transparent)}
.impcat.c-expression{color:var(--amber);border-color:color-mix(in srgb, var(--amber) 45%, transparent)}
.impfoot{margin:14px 0 0;font-size:12px;color:var(--muted)}

/* popup goi Pro */
.impwall{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;
  background:rgba(0,0,0,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.impwall.on{opacity:1}
.impwallcard{position:relative;width:min(440px,100%);padding:28px 26px 24px;border-radius:22px;background:var(--ink-2);
  border:1px solid color-mix(in srgb, var(--hot) 45%, transparent);box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform:translateY(8px);transition:transform .2s}
.impwall.on .impwallcard{transform:none}
.impwallcard h3{font-family:var(--display);font-weight:500;font-size:26px;margin:14px 0 8px;line-height:1.2}
.impwallcard p{color:var(--muted);margin:0 0 14px}
.impwallpts{margin:0 0 20px;padding-left:20px;display:grid;gap:6px;font-size:14px}
.impwallpts li::marker{color:var(--hot)}
.impwallacts{display:flex;gap:10px;flex-wrap:wrap}
.impx{position:absolute;top:10px;right:14px;font-size:24px;line-height:1;color:var(--muted);padding:4px 8px}
@media (prefers-reduced-motion: reduce){.impwall,.impwallcard{transition:none}}

/* bang xep hang theo thang */
.ranklive{margin:-6px 0 18px;padding:10px 14px;border-radius:12px;border:1px dashed color-mix(in srgb, var(--hot) 50%, transparent);
  color:var(--text);font-size:14px}
.ranklistt{font-family:var(--display);font-weight:500;font-size:24px;margin:8px 0 12px}

/* ============================================================
   TRANG MEO THI
   Hai ban noi dung: tieng Viet mac dinh, tieng Anh khi <html lang="en">.
   ============================================================ */
html[lang="en"] .lang-vi, html:not([lang="en"]) .lang-en{display:none}
.tips{max-width:900px}
.tips h2{font-family:var(--display);font-size:24px;font-weight:500;margin:44px 0 14px;scroll-margin-top:90px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tips p{color:var(--muted);line-height:1.75;margin:0 0 14px}
.tips p b,.tips li b{color:var(--text);font-weight:600}
.tiplead{margin-top:-4px}
.tipnav{display:flex;flex-wrap:wrap;gap:8px;margin:-6px 0 10px;position:sticky;top:64px;z-index:5;padding:8px 0;
  background:linear-gradient(var(--ink) 70%, transparent)}
.tipnav a{padding:6px 13px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--muted);text-decoration:none;white-space:nowrap}
.tipnav a:hover{border-color:var(--brand);color:var(--text)}
.ptn{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:3px 10px;border-radius:999px;
  background:var(--brand);color:#FFFFFF;font-weight:600}
.p2 .ptn{background:var(--hot)}
.p3 .ptn{background:linear-gradient(110deg,var(--brand),var(--hot))}
.partstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.partcard{padding:18px;border-radius:16px;background:var(--ink-2);border:1px solid var(--line);border-top:3px solid var(--brand)}
.partcard.p2{border-top-color:var(--hot)}
.partcard.p3{border-top-color:var(--acc)}
.partcard b{display:block;font-family:var(--display);font-size:22px;font-weight:500;margin:10px 0 8px}
.partcard ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px;display:grid;gap:4px}
.tipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tipgrid.two{grid-template-columns:repeat(2,1fr)}
.tipcard{padding:16px 18px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line)}
.tipcard b{display:block;margin-bottom:6px;font-size:15.5px}
.tipcard p{margin:0;font-size:14px;line-height:1.65}
.tipcard.err{border-left:3px solid var(--hot)}
.tippart{margin:40px 0 0;padding:4px 0 22px;border-bottom:1px solid var(--line)}
.tippart h2{margin-top:10px}
.formula{margin:0 0 16px;padding:12px 16px;border-radius:12px;background:color-mix(in srgb, var(--brand) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--brand) 40%, transparent);font-size:15px}
.formula span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-right:8px}
.egpair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 14px}
.egpair .egbad,.egpair .eggood{margin:0;display:flex;flex-direction:column;gap:6px;font-size:14.5px;line-height:1.6;color:var(--text)}
.egpair small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.egpair i{font-size:12.5px;color:var(--muted)}
.tipnote{margin:0 0 14px;padding:12px 16px;border-radius:12px;border:1px dashed color-mix(in srgb, var(--hot) 55%, transparent);font-size:14.5px;color:var(--text);line-height:1.65}
.tipsteps{margin:0 0 16px;padding-left:22px;display:grid;gap:10px;color:var(--muted);line-height:1.65}
.tipsteps li::marker{color:var(--acc);font-family:var(--mono)}
.tipsteps.big li{padding-left:4px}
.tipcta{display:inline-block;margin-top:4px;font-size:14px;font-weight:600;color:var(--acc);text-decoration:none}
.tipcta:hover{color:var(--hot)}
@media(max-width:760px){.partstrip,.tipgrid,.tipgrid.two,.egpair{grid-template-columns:1fr}.tipnav{position:static}}

/* band v3: bao vi sao diem bi gioi han */
.covnote{margin:0 0 18px;padding:14px 16px;border-radius:12px;border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);
  background:color-mix(in srgb, var(--amber) 9%, transparent)}
.covnote b{display:block;margin-bottom:4px;color:var(--amber);font-weight:600}
.covnote p{margin:0;color:var(--text);font-size:14px;line-height:1.6}

/* ---------- tai khoan tren trang ho so (app/account.js) ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.acgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:34px}
@media(max-width:980px){.acgrid{grid-template-columns:1fr}}
.accard{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.accard h4{margin:0;font-family:var(--display);font-size:19px;font-weight:500}
.accard .note{margin:0}
.accard .field{margin:0}
.acrow{display:flex;gap:8px}
.acrow input{flex:1;min-width:0}
.accard > .btn{align-self:flex-start}
.acmsg{margin:0;min-height:18px;font-size:13px;color:#FF8A96}
.acmsg.ok{color:var(--teal)}
.acdanger{border-top:1px solid var(--line);padding-top:10px;margin-top:4px}
.acdanger summary{cursor:pointer;color:#FF8A96;font-size:14px}
.acdanger[open]{display:flex;flex-direction:column;gap:10px}
.acdanger .btn{align-self:flex-start}

/* hang 1 tren bang xep hang: danh hieu "Bá Khí" thay cho so 1 (ban tieng Viet) */
.rankrow .rtitle,.boardrow .rtitle{font-family:var(--display);font-style:italic;font-weight:500;font-size:17px;white-space:nowrap;
  color:var(--amber);letter-spacing:.01em;text-shadow:0 0 18px rgba(242,180,65,.35)}
@media(max-width:520px){.rankrow{grid-template-columns:64px 1fr auto;gap:10px}.boardrow{grid-template-columns:62px 1fr auto;gap:10px}
  .rankrow .rtitle,.boardrow .rtitle{font-size:15px}}

/* logo anh */
.logomark{display:block;object-fit:contain}
.wordimg{display:block;width:auto}
@media(max-width:520px){.mark .wordimg{height:18px;width:auto}}

/* thong bao thanh cong o khung dang nhap (da gui link dat lai mat khau) */
.authok{color:var(--text);background:rgba(0,123,167,.14);border:1px solid rgba(0,123,167,.45);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5;margin:0 0 12px}

/* ---------- AI cham diem: bang ket qua (app/exam.js) ---------- */
.aigrading{display:flex;gap:14px;align-items:center;margin:0 0 18px;padding:14px 16px;border-radius:12px;
  border:1px solid color-mix(in srgb, var(--teal) 55%, transparent);background:color-mix(in srgb, var(--teal) 12%, transparent)}
.aigrading b{display:block;font-weight:600}
.aigrading p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.bandsrc{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.bandsrc.ai{color:var(--acc);border-color:color-mix(in srgb, var(--teal) 55%, transparent)}
.gradenote{margin:0 0 16px;font-size:13.5px;color:var(--muted);padding:10px 14px;border-left:3px solid var(--amber);background:rgba(242,180,65,.06);border-radius:0 10px 10px 0}
.aicomment{margin:0 0 6px;padding:16px 18px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line)}
.aicomment p{margin:0;line-height:1.6}
.aicomment h5{margin:14px 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.aicomment ol{margin:0;padding-left:20px;line-height:1.6}
.partfb{padding:6px 0 22px}
.partfb > h4{margin:0 0 14px;font-family:var(--display);font-size:22px;font-weight:500}
.pflist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media(max-width:1020px){.pflist{grid-template-columns:1fr}}
.pf{background:var(--ink-2);border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;min-width:0}
.pfhead{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pfname{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pfband{font-family:var(--display);font-size:30px;font-weight:500;line-height:1;color:var(--acc)}
.pfcount{margin-left:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.pfcount.warn{color:var(--amber)}
.pfsum{margin:0 0 10px;font-size:14.5px;line-height:1.55}
.pf h5{margin:12px 0 6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.pf h5.good{color:var(--acc)} .pf h5.bad{color:var(--amber)}
.pf ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.pfgood li{font-size:14px;line-height:1.5;padding-left:16px;position:relative}
.pfgood li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.pfbad li{font-size:14px;line-height:1.5}
.pftype{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:999px;margin-right:6px;white-space:nowrap;
  border:1px solid color-mix(in srgb, var(--amber) 45%, transparent);color:var(--amber)}
.pftype.t-unanswered,.pftype.t-off_topic{border-color:rgba(255,138,150,.5);color:#FF8A96}
.pfdetail q{display:block;margin-top:3px;color:var(--muted);font-style:italic;quotes:"\201C" "\201D"}
.pfnext{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.pfnext b{color:var(--acc);font-weight:600}

/* ---------- AI Band 7+: y tuong, y duoc giu lai, dung ban da sua (app/improve.js) ---------- */
.impkept{margin:0 0 12px}
.impkept h5{margin:0 0 6px}
.impkept p{margin:0;display:flex;flex-wrap:wrap;gap:6px}
.impkept .wchip{white-space:normal}
.impadded{margin:0 0 12px;font-size:13.5px;padding:8px 12px;border-radius:10px;background:rgba(242,180,65,.08);
  border:1px solid color-mix(in srgb, var(--amber) 40%, transparent)}
.impideas{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.impideas li{padding:10px 12px;border-radius:10px;background:var(--ink-3, rgba(255,255,255,.03));border:1px solid var(--line)}
.impideas b{display:block;font-weight:600}
.impideas .impwhy{display:block;margin-top:2px}
.impcat.c-idiom{color:#C9A2FF;border-color:rgba(201,162,255,.45)}
.impcat.c-spelling{color:#FF8A96;border-color:rgba(255,138,150,.45)}
.impsec[data-sec="fix"] .imperrs{margin-top:14px}
.impsec[data-sec="fix"] .impacts{margin-top:14px;align-items:center}

/* ---------- lich su diem tren trang ho so (app/profile.js) ---------- */
.scorebox{margin:14px 0 34px}
.scorewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--ink-2)}
.scoretable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:620px}
.scoretable th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:500;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.scoretable td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;font-family:var(--mono)}
.scoretable tr:last-child td{border-bottom:0}
.scoretable .sdate{font-family:inherit}
.scoretable .sall b{font-family:var(--display);font-size:20px;font-weight:500;color:var(--acc)}
.scoretable .sact{text-align:right}
.srcchip{font-family:inherit;font-size:12px;padding:2px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.srcchip.ai{color:var(--acc);border-color:color-mix(in srgb, var(--teal) 50%, transparent)}
#pfScoresMore{margin-top:10px}
@media(max-width:640px){
  .scorewrap{border:0;background:none;overflow:visible}
  .scoretable{min-width:0}
  .scoretable thead{display:none}
  .scoretable tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px 10px;padding:14px;margin-bottom:10px;
    border:1px solid var(--line);border-radius:14px;background:var(--ink-2)}
  .scoretable td{padding:0;border:0;white-space:normal}
  .scoretable .sdate{grid-column:1 / 3;color:var(--muted);font-size:13px}
  .scoretable .sall{grid-column:3;text-align:right}
  .scoretable td[data-l]::before{content:attr(data-l);display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .scoretable .sact{grid-column:3;text-align:right;align-self:end}
}

/* ---------- thanh toan: ba buoc, gia ro rang, tro giup ---------- */
.costeps{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:none}
.costeps li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--ink-2);font-size:14.5px;line-height:1.5}
.costeps b{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--mono);font-size:13px;
  background:color-mix(in srgb, var(--teal) 28%, transparent);color:var(--text);border:1px solid color-mix(in srgb, var(--teal) 60%, transparent)}
@media(max-width:820px){.costeps{grid-template-columns:1fr;gap:8px}}
.coincl{margin:16px 0 6px;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.coincl h4{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.coincl ul{margin:0;padding-left:18px;font-size:14.5px;line-height:1.6}
.corow.price b{font-family:var(--mono)}
.qrsave{display:inline-block;margin-top:8px;font-size:13.5px;color:#07729C;text-decoration:underline}
.qrfail{margin:10px 0 0;color:#B3261E;font-size:14px}
.qrphone{display:none;margin:10px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
@media(max-width:820px){.qrphone{display:block}}
.cohelp{margin-top:16px;border-top:1px solid var(--line);padding-top:14px}
.cohelp summary{cursor:pointer;font-size:14.5px;color:var(--acc)}
.cohelp ul{margin:10px 0 12px;padding-left:18px;font-size:14px;line-height:1.6;color:var(--text)}
/* thanh dau trang: logo moi rong hon, giu khoang cach giua menu va nut ngon ngu */
.mast-right{margin-left:16px}

/* thanh dau trang khi da dang nhap co 7 muc: thu nho mot chut de khong cham nut ngon ngu */
@media(min-width:901px) and (max-width:1340px){.mainnav{gap:0;margin-left:2px}.mainnav a{padding:6px 8px;font-size:13px}.mast-left{gap:8px}}

/* ---------- Email va Google (trang Ho so) ---------- */
.acline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:14px;min-width:0}
.acline b{overflow-wrap:anywhere}
.aclabel{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono);min-width:118px}
.aclock{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.gpill{font-size:13px;border-radius:999px;padding:3px 11px;border:1px solid var(--line);color:var(--muted);overflow-wrap:anywhere}
.gpill.on{color:#7FD3F5;border-color:rgba(0,123,167,.6);background:rgba(0,123,167,.16)}
.gpill.on::before{content:"\2713  "}
#acGBtn{min-height:0}
.acconfirm{border:1px solid rgba(255,45,149,.45);background:rgba(255,45,149,.08);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.5}
.acconfirm p{margin:0 0 10px}
.acunlink{align-self:flex-start;color:var(--muted);font-size:13px}

/* ---------- dang ky bang Google, buoc 2 (trang dang nhap) ---------- */
.loginpanel.gmode > *:not(#gSignup):not(#localNote){display:none !important}
.gsignup[hidden]{display:none}
.gsteps{list-style:none;display:flex;gap:8px;margin:0 0 18px;padding:0;font-size:12.5px}
.gsteps li{display:flex;align-items:center;gap:7px;color:var(--muted);flex:1;min-width:0}
.gsteps li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-family:var(--mono);font-size:11.5px;flex:none}
.gsteps li b{font-weight:500}
.gsteps li.done span{background:var(--teal);border-color:var(--teal);color:#fff;font-size:0}
.gsteps li.done span::after{content:"\2713";font-size:12px}
.gsteps li.on{color:var(--text)}
.gsteps li.on span{border-color:#FF2D95;color:#FF2D95}
.gidcard{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:0 0 16px;background:rgba(255,255,255,.03)}
.gidcard img{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.gidcard div{display:flex;flex-direction:column;gap:2px;min-width:0}
.gidcard b{font-size:14.5px;overflow-wrap:anywhere}
.gverified{font-size:12.5px;color:#7FD3F5}
.gverified::before{content:"\2713  "}
.gaccept{margin:4px 0 6px;font-size:14px}
.gaccept a{color:#7FD3F5}
.gnopw{margin-top:12px}

/* >>> STICKER-PROMO: form dia chi nhan sticker (app/sticker-ship.js) */
#shipMount{margin:18px 0 26px}
#shipMount[hidden]{display:none}
.shipcard{border:1px solid rgba(255,45,149,.45);background:linear-gradient(180deg,rgba(255,45,149,.10),rgba(0,123,167,.06));
  border-radius:16px;padding:18px 18px 14px;display:flex;flex-direction:column;gap:10px;text-align:left}
.shipcard h3{margin:0;font-family:var(--display);font-weight:500;font-size:21px;line-height:1.25}
.shipcard .note{margin:0}
.shipcard .field{margin:0}
.shipcard textarea{width:100%;resize:vertical;min-height:58px;font:inherit}
.shipgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.shipgrid{grid-template-columns:1fr}}
.shipcard.done{border-color:rgba(0,123,167,.55);background:rgba(0,123,167,.10)}
.shipsum{margin:0;font-size:14.5px;line-height:1.55;overflow-wrap:anywhere}
.shipcard .linkbtn{align-self:flex-start}
.shipprivacy{font-size:12.5px}
/* <<< STICKER-PROMO */

/* thong tin chu so huu website (OWNER trong app/core.js) */
.footlegal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:12.5px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:14px;margin-top:22px;line-height:1.5}
.footlegal img{display:block}

/* Logo "Da thong bao Bo Cong Thuong" o chan trang: nen trang de doc duoc ca khi giao dien toi */
.footbadge{display:inline-flex}
.footbadge img{display:block;width:118px;height:auto;background:#fff;border-radius:6px;padding:3px 5px;box-sizing:content-box}

/* Dong "Ba luot thi dau tien mien phi" o trang chu: to hon tren may tinh */
@media(min-width:900px){ .note.landfree{font-size:16px} }

/* ============================================================
   MENU DIEN THOAI (hamburger)
   Tu 900px tro xuong: thanh dau mot hang (logo, tai khoan, nut menu);
   cac muc menu, doi ngon ngu va "Tao tai khoan" nam trong bang tha xuong.
   ============================================================ */
.navtoggle,.mobilemenu{display:none}
@media(max-width:900px){
  .masthead .shellinner{flex-wrap:nowrap!important;gap:10px;padding-top:10px;padding-bottom:10px}
  .mast-left{width:auto!important;flex:1 1 auto;justify-content:flex-start;flex-wrap:nowrap}
  .mast-right{width:auto!important;flex:none;justify-content:flex-end;gap:8px;margin-left:0}
  .mainnav{display:none!important}
  .mast-right .langswitch,.authbtns .signupbtn{display:none}
  .navtoggle{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
    border:1px solid var(--line);border-radius:10px;color:var(--text);background:rgba(255,255,255,.03);flex:none}
  .navtoggle:hover,.navtoggle.on{border-color:var(--acc);color:#fff}
  .navtoggle svg path{transition:transform .2s ease,opacity .2s ease;transform-origin:12px 12px}
  .navtoggle.on .l1{transform:translateY(5px) rotate(45deg)}
  .navtoggle.on .l2{opacity:0}
  .navtoggle.on .l3{transform:translateY(-5px) rotate(-45deg)}
  .masthead.menuopen{background:#05090C;border-bottom-color:var(--line)}
  .mobilemenu{display:block;position:absolute;left:0;right:0;top:100%;z-index:60;
    background:#05090C;border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.55);
    padding:6px var(--gut) 16px;max-height:calc(100vh - 64px);overflow-y:auto;
    opacity:0;transform:translateY(-6px);pointer-events:none;visibility:hidden;
    transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s}
  .mobilemenu.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .18s ease,transform .18s ease}
  .mobilemenu > a{display:flex;align-items:center;gap:14px;padding:13px 4px;color:var(--text);
    text-decoration:none;font-size:16px;border-bottom:1px solid var(--line)}
  .mobilemenu > a .mmicon{color:#DCE6EC;flex:none}
  .mobilemenu > a.on{color:var(--acc)}
  .mobilemenu > a.on .mmicon{color:var(--acc)}
  .mobilemenu > a:active{background:rgba(255,255,255,.04)}
  .mmfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px}
  .mmfoot .langswitch button{padding:7px 14px;font-size:12px}
  .mmsignup{text-decoration:none}
  .acctchip{padding:4px 10px 4px 4px}
}
@media(max-width:420px){
  .acctname,.acctchip .caret{display:none}
  .authbtns .btn{padding:8px 12px;font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){ .mobilemenu,.navtoggle svg path{transition:none} }