:root{
  --ink:#1f1a17;--ink2:#38332e;--mid:#5f5952;--soft:#7d776e;--border:#e6e2da;
  --bg:#fafaf7;--card:#fff;--sky:#c8372d;--sky-l:#fdefec;--sky-d:#a82d24;
  --snow:#fdf5e6;--cold:#e9a23b;--warm:#d9580c;--warm-l:#fff1e6;
  --green:#1f8a4c;--green-l:#e9f6ee;--red:#c62828;--red-l:#fdecea;
  --gold:#b7791f;--gold-l:#fdf5e6;--teal:#0d8a80;--teal-l:#e6f7f5;
  --purple:#7c3aed;--purple-l:#f3e8ff;
  --py:#a8691a;
  /* Font serif cho tieu de — dung chung voi trang chinh. */
  --font-display:'Newsreader','Be Vietnam Pro',Georgia,serif;
  --font-hanzi:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --font-hanzi-display:'Noto Serif SC','Noto Sans SC','PingFang SC',serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{font-size:112.5%;}
@media (max-width:640px){html{font-size:106.25%;}}
body{font-family:'Be Vietnam Pro','Noto Sans SC',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;}

/* HEADER */
.site-header{
  background:radial-gradient(120% 160% at 100% 0%,rgba(242,191,107,0.30),transparent 55%),linear-gradient(160deg,#c8372d 0%,#a82d24 100%);
  padding:28px 40px 26px;position:relative;overflow:hidden;
}
.site-header::before{
  content:'';position:absolute;right:-50px;bottom:-70px;width:260px;height:260px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23fff6e9' stroke-width='2' opacity='0.16'%3E%3Cellipse cx='50' cy='28' rx='10' ry='16'/%3E%3Cellipse cx='50' cy='28' rx='10' ry='16' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='28' rx='10' ry='16' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='28' rx='10' ry='16' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='28' rx='10' ry='16' transform='rotate(288 50 50)'/%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
.site-header>*{max-width:1200px;margin-left:auto;margin-right:auto;}
.back-link{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:36px;color:rgba(255,255,255,0.95);font-size:0.85rem;font-weight:600;text-decoration:none;margin-bottom:10px;}
.back-link:hover{color:#fff;text-decoration:underline;}
.header-badge{display:inline-block;background:rgba(var(--rgbn-255-255-255, 255, 255, 255), 0.16);border:1px solid rgba(255,255,255,0.3);color:#fff;font-size:0.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:12px;position:relative;}
.header-zh{font-family:var(--font-hanzi-display);font-size:2.4rem;font-weight:900;color:#fff;letter-spacing:2px;line-height:1.2;position:relative;}
.header-py{color:#fff3e0;font-size:1rem;letter-spacing:1px;margin-top:6px;position:relative;}
.header-vn{color:rgba(255,255,255,0.95);font-size:0.95rem;margin-top:2px;position:relative;}
.header-meta{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;position:relative;}
.h-chip{background:rgba(var(--rgbn-255-255-255, 255, 255, 255), 0.14);border:1px solid rgba(255,255,255,0.22);color:#fff;font-size:0.8rem;padding:5px 12px;border-radius:20px;}

/* TABS */
.tab-nav{background:rgba(var(--rgbn-255-255-255, 255, 255, 255), 0.97);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;overflow-x:auto;padding:0 max(20px,calc((100% - 1200px)/2));position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(31,26,23,0.05);scrollbar-width:thin;}
.tab-btn{flex-shrink:0;min-height:48px;padding:12px 16px;background:none;border:none;font-family:'Be Vietnam Pro',sans-serif;font-size:0.88rem;font-weight:600;color:var(--mid);cursor:pointer;border-bottom:3px solid transparent;transition:all 0.2s;white-space:nowrap;display:flex;align-items:center;gap:6px;}
.tab-btn:hover{color:var(--sky);}
.tab-btn.active{color:var(--sky);border-bottom-color:var(--sky);}
/* Man hinh du rong thi cho thanh the XUONG HANG, dung cuon ngang.
   Bai HSK 5 co 13 the — cuon ngang lam ba the cuoi bi cat mat ma khong
   co dau hieu gi, giao vien tuong web thieu chuc nang.                */
@media (min-width:900px){
  .tab-nav{flex-wrap:wrap;overflow-x:visible;}
}
/* Man hinh hep van cuon ngang, nhung bot dem cho lot duoc nhieu the hon,
   va them vet mo o mep de biet con the phia sau — vet nay tu bien mat
   khi da cuon het ve mot ben.                                          */
@media (max-width:899px){
  .tab-btn{padding:12px 11px;font-size:0.83rem;gap:4px;}
  .tab-nav{
    background-image:
      linear-gradient(to right,rgba(var(--rgbn-255-255-255, 255, 255, 255), 0.97),rgba(var(--rgbn-255-255-255, 255, 255, 255), 0)),
      linear-gradient(to left,rgba(var(--rgbn-255-255-255, 255, 255, 255), 0.97),rgba(var(--rgbn-255-255-255, 255, 255, 255), 0)),
      linear-gradient(to right,rgba(31,26,23,0.18),rgba(31,26,23,0)),
      linear-gradient(to left,rgba(31,26,23,0.18),rgba(31,26,23,0));
    background-position:left center,right center,left center,right center;
    background-repeat:no-repeat;
    background-size:26px 100%,26px 100%,12px 100%,12px 100%;
    background-attachment:local,local,scroll,scroll;
  }
}

/* MAIN */
.main{max-width:1264px;margin:0 auto;padding:28px 32px 96px;}
.section{display:none;animation:fadeUp 0.3s ease;}
.section.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* SECTION TITLES */
.sec-head{margin-bottom:28px;}
.sec-title{font-family:var(--font-display);font-size:1.4rem;font-weight:600;letter-spacing:-0.02em;color:var(--ink);display:flex;align-items:center;gap:10px;margin-bottom:5px;}
.sec-badge{background:var(--nen-sky, var(--sky));color:white;font-size:0.7rem;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:1px;}
.sec-sub{color:var(--soft);font-size:0.88rem;}
.divider{height:1px;background:var(--border);margin:24px 0;}

/* KHỞI ĐỘNG */
.warmup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;}
.wu-card{background:var(--color-white, #fff);border:2px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative;}
.wu-card:hover{border-color:var(--sky);transform:translateY(-3px);box-shadow:0 8px 24px rgba(200,55,45,0.12);}
.wu-card.matched{border-color:var(--green);background:var(--green-l);}
.wu-emoji{font-size:4rem;text-align:center;padding:20px;background:linear-gradient(135deg,var(--xb-faf6f1, #faf6f1),var(--xb-f6efe6, #f6efe6));}
.wu-label{padding:12px 16px;text-align:center;font-family:var(--font-hanzi-display);font-size:1.5rem;font-weight:600;color:var(--ink);}
.wu-py{font-size:0.8rem;color:var(--soft);margin-top:2px;}
.wu-options{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;}
.wu-opt{padding:10px 20px;border:2px solid var(--border);border-radius:10px;cursor:pointer;font-family:var(--font-hanzi-display);font-size:1.5rem;background:var(--color-white, #fff);transition:all 0.2s;}
.wu-opt:hover{border-color:var(--sky);color:var(--sky);}
.wu-opt.sel-ok{border-color:var(--green);background:var(--green-l);color:var(--green);pointer-events:none;}
.wu-opt.sel-err{border-color:var(--red);background:var(--red-l);color:var(--red);}
.wu-score{background:var(--sky-l);border:1.5px solid var(--xv-f0b8b0, #f0b8b0);border-radius:14px;padding:16px 22px;display:none;align-items:center;gap:16px;margin-top:16px;}

/* TỪ MỚI */
.lesson-tabs{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.lesson-tab{padding:9px 22px;border:2px solid var(--border);border-radius:20px;background:var(--color-white, #fff);font-family:'Be Vietnam Pro',sans-serif;font-size:0.88rem;cursor:pointer;transition:all 0.2s;color:var(--mid);}
.lesson-tab:hover{border-color:var(--sky);color:var(--sky);}
.lesson-tab.active{border-color:var(--sky);background:var(--sky-l);color:var(--sky);font-weight:600;}
.vocab-grid{display:grid;grid-template-columns:1fr;gap:12px;}
.vocab-card{background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:16px;cursor:pointer;transition:all 0.2s;display:flex;align-items:flex-start;gap:16px;padding:16px 18px;}
.vocab-card:hover{border-color:var(--sky);box-shadow:0 4px 18px rgba(200,55,45,0.1);}
.vocab-card.flipped{border-color:var(--sky);background:var(--xb-faf6f1, #faf6f1);}
.vc-icon{flex-shrink:0;width:64px;height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--xb-faf6f1, #faf6f1),var(--xb-f6efe6, #f6efe6));position:relative;}
.vc-emoji{font-size:1.9rem;}
/* O chu co anh minh hoa: rong hon de nhin ro tranh, anh phu kin o. */
.vc-icon.has-img{width:92px;height:92px;overflow:hidden;}
.vc-img{width:100%;height:100%;object-fit:cover;border-radius:14px;}
/* Emoji chi la lop duoi: anh che len, khi anh loi (bi remove) thi emoji hien ra. */
.vc-icon.has-img .vc-emoji.is-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:-1;}
.vc-num{position:absolute;top:-6px;left:-6px;width:20px;height:20px;background:var(--nen-sky, var(--sky));color:white;border-radius:50%;font-size:0.68rem;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:'Be Vietnam Pro',sans-serif;}
.vc-body{flex:1;min-width:0;}
.vc-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.vc-pos-badge{flex-shrink:0;background:var(--gold-l);color:var(--gold);font-size:0.7rem;font-weight:600;padding:3px 10px;border-radius:8px;white-space:nowrap;}
.vc-zh{font-family:var(--font-hanzi-display);font-size:1.5rem;font-weight:700;color:var(--ink);line-height:1;display:flex;align-items:center;gap:8px;}
.vc-py{color:var(--py);font-size:0.88rem;letter-spacing:1px;margin-top:4px;}
.vc-vn{color:var(--mid);font-size:0.9rem;padding-top:10px;margin-top:10px;border-top:1px dashed var(--border);display:none;line-height:1.6;}
.vocab-card.flipped .vc-vn{display:block;}
.vc-hv{font-size:0.82rem;color:var(--gold,var(--xt-8a5a0f, #8a5a0f));margin-top:2px;}
.vc-ex{margin-top:10px;padding:10px 12px;background:var(--xb-f6efe6, #f6efe6);border-radius:8px;display:none;font-size:0.85rem;}
.vocab-card.flipped .vc-ex{display:block;}
.vc-ex-label{font-size:0.72rem;font-weight:700;letter-spacing:0.5px;color:var(--sky-d);margin-bottom:8px;text-transform:uppercase;}
.vc-ex-item{background:var(--color-white, #fff);border-left:3px solid var(--cold);border-radius:0 7px 7px 0;padding:7px 10px;margin-bottom:7px;}
.vc-ex-item:last-child{margin-bottom:0;}
.vc-hz{margin-top:10px;display:none;}
.vocab-card.flipped .vc-hz{display:block;}
.hz-btn{width:100%;padding:9px 12px;border:1.5px solid var(--sky);border-radius:9px;background:var(--color-white, #fff);color:var(--sky-d);font-family:'Be Vietnam Pro',sans-serif;font-size:0.83rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.hz-btn:hover{background:var(--sky-l);}
.hz-panel{display:none;margin-top:10px;}
.hz-panel.open{display:block;}
.hz-item{background:var(--xb-faf8f5, #faf8f5);border:1px solid var(--border);border-radius:12px;padding:12px;margin-bottom:10px;}
.hz-item:last-child{margin-bottom:0;}
.hz-writer-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:10px;}
.hz-writer-box{width:130px;height:130px;background:var(--color-white, #fff);border:1px dashed var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.hz-writer-box .hz-fallback{font-family:var(--font-hanzi-display);font-size:2.6rem;font-weight:700;color:var(--sky-d);line-height:1;}
.hz-writer-under{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;}
.hzw-py{font-family:'Be Vietnam Pro',sans-serif;font-size:0.85rem;color:var(--soft);font-weight:600;}
.hz-replay-btn{padding:6px 12px;border:1.5px solid var(--gold);border-radius:999px;background:var(--xb-fffdf5, #fffdf5);color:var(--xt-8a5a00, #8a5a00);font-family:'Be Vietnam Pro',sans-serif;font-size:0.78rem;font-weight:700;cursor:pointer;transition:all 0.2s;}
.hz-replay-btn:hover{background:var(--nen-gold, var(--gold));color:white;}
.hz-rad-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#d8202e;margin-right:2px;vertical-align:middle;}
.hz-info{font-size:0.82rem;}
.hz-row{margin-bottom:4px;line-height:1.5;}
.hz-k{color:var(--soft);font-weight:600;}
.hz-rad{color:var(--sky-d);font-weight:600;}
.hz-strokes{display:inline-block;background:var(--sky-l);color:var(--sky-d);font-size:0.7rem;font-weight:600;padding:1px 8px;border-radius:10px;margin-left:4px;}
.hz-tip{background:var(--xb-fffdf5, #fffdf5);border:1px solid var(--xv-fde68a, #fde68a);border-radius:9px;padding:8px 11px;font-size:0.82rem;margin-top:9px;line-height:1.5;color:var(--ink);}
.hz-tip b{color:var(--gold);}
.hz-words{background:var(--color-white, #fff);border:1px solid var(--border);border-radius:8px;padding:7px 11px;font-family:var(--font-hanzi);font-size:0.92rem;color:var(--ink);margin-top:8px;}
.hz-wl{font-family:'Be Vietnam Pro',sans-serif;font-size:0.72rem;color:var(--soft);font-weight:600;margin-right:5px;}
.vc-ex-zh{font-family:var(--font-hanzi);font-size:0.95rem;color:var(--ink);margin-bottom:2px;}
.vc-ex-py{color:var(--soft);font-size:0.77rem;letter-spacing:0.4px;margin-bottom:2px;}
.vc-ex-vn{color:var(--mid);font-size:0.82rem;}
.vc-ex-vn[hidden]{display:none;}
.vc-ex-vn-btn{display:inline-block;margin:3px 0 2px;padding:2px 10px;border:1px dashed var(--gold);border-radius:999px;background:var(--xb-fff8ea, #fff8ea);color:var(--sky-d);font-size:0.74rem;font-weight:600;cursor:pointer;line-height:1.5;font-family:'Be Vietnam Pro',sans-serif;}
.vc-ex-vn-btn:hover,.vc-ex-vn-btn.open{background:var(--nen-sky-d, var(--sky-d));border-style:solid;border-color:var(--sky-d);color:white;}
.vc-ex-vn-btn+.vc-ex-vn{margin-top:4px;}
.vc-ex-detail{margin-top:4px;}
.vc-ex-detail[hidden]{display:none;}
.flip-tip{text-align:center;color:var(--soft);font-size:0.82rem;margin-bottom:18px;}

/* FLASHCARD */
.flash-wrap{perspective:900px;margin-bottom:20px;}
.flash-outer{width:100%;max-width:500px;margin:0 auto;height:230px;cursor:pointer;position:relative;transform-style:preserve-3d;transition:transform 0.55s cubic-bezier(0.4,0,0.2,1);}
.flash-outer.flipped{transform:rotateY(180deg);}
.flash-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;border:1.5px solid var(--border);}
.f-front{background:linear-gradient(135deg,var(--xb-f6efe6, #f6efe6),var(--xb-f1e3d3, #f1e3d3));}
.f-back{background:linear-gradient(135deg,var(--xb-dcfce7, #dcfce7),var(--xb-bbf7d0, #bbf7d0));transform:rotateY(180deg);}
.f-emoji{font-size:2.5rem;margin-bottom:10px;}
.f-img{width:132px;height:132px;object-fit:contain;display:block;margin:0 auto;}
.f-zh{font-family:var(--font-hanzi-display);font-size:2.8rem;font-weight:900;color:var(--ink);}
.f-py{color:var(--py);font-size:1rem;letter-spacing:1px;margin-top:6px;}
.f-hint{color:var(--soft);font-size:0.8rem;margin-top:8px;}
.f-vn{font-size:1.3rem;font-weight:600;color:var(--teal);margin-bottom:6px;text-align:center;}
.f-ex{font-family:var(--font-hanzi);font-size:0.9rem;color:var(--ink2);text-align:center;line-height:1.6;}
.flash-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:18px;}
.flash-btn{width:42px;height:42px;border:2px solid var(--border);border-radius:50%;background:var(--color-white, #fff);cursor:pointer;font-size:1rem;color:var(--mid);transition:all 0.2s;display:flex;align-items:center;justify-content:center;}
.flash-btn:hover{border-color:var(--sky);color:var(--sky);}
.flash-ctr{color:var(--soft);font-size:0.85rem;min-width:60px;text-align:center;}

/* NGỮ PHÁP */
.grammar-card{background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:20px;padding:28px;margin-bottom:22px;}
.g-num{display:inline-flex;width:34px;height:34px;background:var(--nen-sky, var(--sky));color:white;border-radius:50%;align-items:center;justify-content:center;font-size:0.9rem;font-weight:700;margin-right:10px;flex-shrink:0;}
.g-title{font-family:'Be Vietnam Pro',var(--font-hanzi);font-size:1.2rem;font-weight:700;color:var(--ink);display:flex;align-items:center;margin-bottom:8px;}
.g-sub{color:var(--soft);font-size:0.85rem;margin-bottom:16px;padding-left:44px;}
.g-rule{background:linear-gradient(135deg,var(--xb-fdf3f1, #fdf3f1),var(--xb-fbe4e0, #fbe4e0));border-left:4px solid var(--sky);border-radius:0 12px 12px 0;padding:14px 18px;margin-bottom:14px;font-size:0.95rem;line-height:1.8;color:var(--ink);}
.g-rule strong{color:var(--sky-d);}
.g-table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;margin:14px 0;font-size:0.93rem;}
.g-table th{background:var(--nen-sky, var(--sky));color:white;padding:10px 14px;font-weight:500;font-size:0.83rem;}
.g-table td{padding:11px 14px;border-bottom:1px solid var(--border);text-align:center;}
.g-table tr:nth-child(even) td{background:var(--xb-faf8f5, #faf8f5);}
.g-table tr:last-child td{border-bottom:none;}
.note{background:var(--gold-l);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:12px 16px;margin:12px 0;font-size:0.88rem;color:var(--ink);}
.formula-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0;padding:14px 18px;background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:12px;}
.fb{padding:8px 14px;border-radius:8px;font-family:var(--font-hanzi);font-size:1rem;font-weight:600;text-align:center;}
.fb-s{background:var(--xb-fff7ed, #fff7ed);color:var(--warm);border:1.5px solid var(--xv-fed7aa, #fed7aa);}
.fb-le{background:var(--xb-fbe4e0, #fbe4e0);color:var(--sky-d);border:1.5px solid var(--xv-f0b8b0, #f0b8b0);font-size:1.2rem;}
.fb-t{background:var(--xb-ede9fe, #ede9fe);color:var(--purple);border:1.5px solid var(--xv-c4b5fd, #c4b5fd);font-size:1.2rem;}
.fb-adj{background:var(--teal-l);color:var(--teal);border:1.5px solid var(--xv-5eead4, #5eead4);}
.fb-arrow{color:var(--soft);font-size:1.2rem;}

/* HỘI THOẠI */
.dlg-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;}
.dlg-tb{padding:9px 20px;border:2px solid var(--border);border-radius:20px;background:var(--color-white, #fff);font-family:'Be Vietnam Pro',sans-serif;font-size:0.87rem;cursor:pointer;transition:all 0.2s;color:var(--mid);}
.dlg-tb:hover{border-color:var(--sky);color:var(--sky);}
.dlg-tb.active{border-color:var(--sky);background:var(--sky-l);color:var(--sky);font-weight:600;}
.dlg-card{background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:20px;padding:26px;display:none;}
.dlg-card.active{display:block;}
.dlg-scene{display:inline-flex;align-items:center;gap:6px;background:var(--teal-l);color:var(--teal);font-size:0.8rem;font-weight:600;padding:5px 14px;border-radius:20px;margin-bottom:22px;}
.dlg-line{display:flex;gap:12px;margin-bottom:16px;align-items:flex-start;}
.dlg-sp{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-hanzi);font-size:0.9rem;font-weight:700;flex-shrink:0;line-height:1.2;text-align:center;}
.sp1{background:var(--xb-fbe4e0, #fbe4e0);color:var(--sky-d);}
.sp2{background:var(--teal-l);color:var(--teal);}
.sp3{background:var(--xb-fdf0d9, #fdf0d9);color:var(--xt-a86a12, #a86a12);}
.sp4{background:var(--xb-e9e6f7, #e9e6f7);color:var(--xt-5a4bb5, #5a4bb5);}
.dlg-bub{border-radius:0 16px 16px 16px;padding:12px 16px;flex:1;}
.dlg-line.r .dlg-bub{border-radius:16px 0 16px 16px;}
.bub1{background:var(--xb-faf6f1, #faf6f1);}
.bub2{background:var(--xb-eef8f6, #eef8f6);}
.bub3{background:var(--xb-fdf8ee, #fdf8ee);}
.bub4{background:var(--xb-f4f2fb, #f4f2fb);}
.dlg-zh{font-family:var(--font-hanzi);font-size:1.05rem;color:var(--ink);margin-bottom:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dlg-py{color:var(--soft);font-size:0.76rem;letter-spacing:0.4px;margin-bottom:3px;}
.dlg-vn{color:var(--mid);font-size:0.86rem;}
/* AUDIO (Web Speech thay cho file mp3 thật) */
.audio-box{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--xb-fdf3f1, #fdf3f1),var(--xb-fbe4e0, #fbe4e0));border:1.5px solid var(--xv-f0b8b0, #f0b8b0);border-radius:14px;padding:12px 18px;margin-bottom:18px;flex-wrap:wrap;}
.audio-box .a-label{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--sky-d);font-size:0.92rem;}
.audio-box .a-ico{font-size:1.3rem;}
.speak-box-btn{border:none;background:var(--nen-sky, var(--sky));color:#fff;border-radius:20px;padding:8px 18px;font-family:'Be Vietnam Pro',sans-serif;font-size:0.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;}
.speak-box-btn:hover{background:var(--nen-sky-d, var(--sky-d));}
.speak-mini{border:none;background:var(--sky-l);color:var(--sky-d);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:0.8rem;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.speak-mini:hover{background:var(--nen-sky, var(--sky));color:#fff;}
.audio-hint{font-size:0.78rem;color:var(--soft);width:100%;}
.audio-box.real-box{background:linear-gradient(135deg,var(--xb-f0fdf4, #f0fdf4),var(--xb-dcfce7, #dcfce7));border-color:var(--xv-86efac, #86efac);}
/* Ghim audio hoi thoai ngay duoi thanh tab khi keo xuong doc/nghe */
.audio-box.real-box{position:sticky;top:66px;z-index:90;box-shadow:0 6px 16px rgba(31,26,23,0.10);}
@media (max-width:640px){
  .audio-box.real-box{top:55px;padding:8px 12px;gap:6px;}
  .audio-box.real-box .audio-hint{display:none;}
}
.real-audio{height:38px;flex:1 1 220px;max-width:320px;}
.audio-missing{font-size:0.82rem;color:var(--soft);font-style:italic;}
.vocab-audio-list{display:flex;flex-direction:column;gap:8px;width:100%;}
.vocab-audio-part{display:flex;align-items:center;gap:10px;}
.vap-label{font-size:0.78rem;font-weight:600;color:var(--sky-d);flex-shrink:0;min-width:52px;}
.qa-question{margin-bottom:12px;}
.qa-zh{font-family:var(--font-hanzi);font-size:1.3rem;color:var(--ink);font-weight:600;margin:8px 0 4px;}
.qa-vn{color:var(--mid);font-size:0.86rem;}
.qa-py{color:var(--soft);font-size:0.8rem;margin-bottom:4px;}

/* QUIZ CHUNG */
.quiz-card{background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:16px;padding:22px 26px;margin-bottom:16px;transition:all 0.25s;}
.quiz-card.ok{border-color:var(--green);background:var(--green-l);}
.quiz-card.err{border-color:var(--red);background:var(--red-l);}
.q-num{display:inline-flex;width:26px;height:26px;background:var(--nen-sky, var(--sky));color:white;border-radius:50%;align-items:center;justify-content:center;font-size:0.78rem;font-weight:700;margin-right:8px;flex-shrink:0;}
.q-text{font-family:var(--font-hanzi);font-size:1.05rem;color:var(--ink);line-height:1.7;margin-bottom:10px;display:flex;align-items:center;flex-wrap:wrap;gap:5px;}
.q-inp{border:2px solid var(--border);border-radius:8px;padding:6px 12px;font-size:0.98rem;font-family:var(--font-hanzi);color:var(--ink);width:130px;outline:none;transition:border-color 0.2s;background:var(--color-white, #fff);}
.q-inp:focus{border-color:var(--sky);}
.q-inp.ok{border-color:var(--green);background:var(--green-l);}
.q-inp.err{border-color:var(--red);background:var(--red-l);}
.q-hint{color:var(--soft);font-size:0.8rem;margin-top:5px;}
.q-fb{margin-top:8px;font-size:0.88rem;padding:7px 12px;border-radius:8px;display:none;}
.q-fb.ok{display:block;color:var(--green);background:var(--green-l);}
.q-fb.err{display:block;color:var(--red);background:var(--red-l);}
.q-opts{display:flex;flex-wrap:wrap;gap:9px;margin-top:10px;}
.q-opt{padding:9px 18px;border:2px solid var(--border);border-radius:10px;cursor:pointer;font-family:var(--font-hanzi);font-size:0.93rem;color:var(--ink);background:var(--color-white, #fff);transition:all 0.2s;user-select:none;}
.q-opt:hover{border-color:var(--sky);color:var(--sky);}
.q-opt.sel-err{border-color:var(--red);background:var(--red-l);color:var(--red);}
.q-opt.show-ok{border-color:var(--green);background:var(--green-l);color:var(--green);pointer-events:none;}
.prog-bar{height:4px;background:var(--border);border-radius:4px;margin-bottom:22px;overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--nen-sky, var(--sky)),var(--nen-teal, var(--teal)));border-radius:4px;transition:width 0.4s;}
.score-box{background:var(--sky-l);border:1.5px solid var(--xv-f0b8b0, #f0b8b0);border-radius:16px;padding:16px 22px;display:none;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px;}
.score-n{font-size:1.9rem;font-weight:700;color:var(--sky-d);font-family:var(--font-hanzi);}
.score-m{color:var(--mid);font-size:0.88rem;}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.btn-p{background:var(--nen-sky, var(--sky));color:white;border:none;padding:11px 26px;border-radius:11px;font-family:'Be Vietnam Pro',sans-serif;font-size:0.93rem;cursor:pointer;transition:all 0.2s;box-shadow:0 4px 12px rgba(200,55,45,0.25);}
.btn-p:hover{background:var(--nen-sky-d, var(--sky-d));transform:translateY(-1px);}
.btn-s{background:var(--color-white, #fff);color:var(--sky);border:2px solid var(--sky);padding:9px 20px;border-radius:11px;font-family:'Be Vietnam Pro',sans-serif;font-size:0.88rem;cursor:pointer;transition:all 0.2s;}
.btn-s:hover{background:var(--sky-l);}

/* MATCH */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:18px;}
.mcol-title{font-size:0.78rem;color:var(--soft);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;}
.m-item{background:var(--color-white, #fff);border:2px solid var(--border);border-radius:11px;padding:13px 16px;margin-bottom:10px;cursor:pointer;font-family:var(--font-hanzi);font-size:0.95rem;transition:all 0.2s;user-select:none;position:relative;}
.m-item{display:flex;align-items:center;justify-content:center;text-align:center;min-height:64px;padding:12px 30px;line-height:1.35;font-size:1.1rem;font-weight:600;}
.m-item.m-sz-lg{font-size:1.65rem;white-space:nowrap;}
.m-item.m-sz-md{font-size:1.25rem;}
.m-item.m-sz-sm{font-size:1rem;}
@media(max-width:640px){.m-item{min-height:56px;padding:10px 26px;}.m-item.m-sz-lg{font-size:1.3rem;}.m-item.m-sz-md{font-size:1.1rem;}.m-item.m-sz-sm{font-size:0.92rem;}}
.m-item:hover{border-color:var(--sky);transform:translateX(2px);}
.m-item.sel{border-color:var(--sky);background:var(--sky-l);}
.m-item.m-ok{border-color:var(--green);background:var(--green-l);color:var(--green);cursor:default;}
.m-item.m-ok::after{content:'✓';position:absolute;right:12px;top:50%;transform:translateY(-50%);font-weight:700;}
.m-item.m-shake{animation:shake 0.3s;border-color:var(--red);background:var(--red-l);}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.m-fb{min-height:26px;font-size:0.9rem;margin-bottom:12px;}

/* SORT */
.sort-q{margin-bottom:26px;}
.sort-lbl{font-size:0.88rem;color:var(--mid);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
.word-bank{display:flex;flex-wrap:wrap;gap:9px;padding:14px;background:var(--xb-f5f3ee, #f5f3ee);border-radius:11px;min-height:55px;margin-bottom:10px;border:2px dashed var(--border);}
.w-chip{background:var(--color-white, #fff);border:2px solid var(--border);border-radius:7px;padding:6px 13px;font-family:var(--font-hanzi);font-size:0.93rem;cursor:pointer;transition:all 0.2s;user-select:none;}
.w-chip:hover{border-color:var(--sky);color:var(--sky);}
.w-chip.used{opacity:0.35;cursor:default;pointer-events:none;}
.ans-zone{min-height:50px;padding:9px 12px;border:2px solid var(--border);border-radius:11px;background:var(--color-white, #fff);display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:8px;transition:border-color 0.2s;}
.ans-zone.ok-z{border-color:var(--green);background:var(--green-l);}
.ans-zone.err-z{border-color:var(--red);background:var(--red-l);}
.p-chip{background:var(--sky-l);border:2px solid var(--sky);border-radius:7px;padding:5px 11px;font-family:var(--font-hanzi);font-size:0.93rem;cursor:pointer;color:var(--sky-d);transition:all 0.2s;}
.p-chip:hover{background:var(--red-l);border-color:var(--red);color:var(--red);}
.w-chip.punc-chip{background:var(--warm-l);border-color:var(--xv-fdba74, #fdba74);color:var(--warm);font-weight:700;}
.w-chip.punc-chip:hover{border-color:var(--warm);color:var(--warm);}
.p-chip.punc-pchip{background:var(--warm-l);border-color:var(--warm);color:var(--warm);font-weight:700;}

/* LUYỆN NÓI 3 TẦNG */
.speak-tabs{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.speak-tb{padding:11px 26px;border:2px solid var(--border);border-radius:24px;background:var(--color-white, #fff);font-family:'Be Vietnam Pro',sans-serif;font-size:0.92rem;font-weight:600;cursor:pointer;transition:all 0.2s;color:var(--mid);}
.speak-tb:hover{border-color:var(--sky);color:var(--sky);}
.speak-tb.active{border-color:var(--sky);background:var(--nen-sky, var(--sky));color:white;box-shadow:0 4px 12px rgba(200,55,45,0.25);}
.tier-intro{background:var(--gold-l);border-left:4px solid var(--gold);border-radius:0 12px 12px 0;padding:14px 18px;margin-bottom:22px;font-size:0.92rem;color:var(--ink);line-height:1.7;}
.tier-intro b{color:var(--gold);}
.speak-grid{display:grid;gap:16px;}
@media(min-width:1000px){.speak-grid.two{grid-template-columns:1fr 1fr;}.speak-grid.three{grid-template-columns:1fr 1fr 1fr;}}
.model-card{background:var(--color-white, #fff);border:1.5px solid var(--border);border-left:4px solid var(--sky);border-radius:0 14px 14px 0;padding:16px 20px;}
.model-zh{font-family:var(--font-hanzi);font-size:1.4rem;color:var(--ink);font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px;}
.model-py{color:var(--py);font-size:0.88rem;margin-bottom:3px;}
.model-vn{color:var(--mid);font-size:0.86rem;}
.drill-card{background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:16px;padding:18px 22px;}
.drill-frame{font-family:var(--font-hanzi);font-size:1.5rem;color:var(--ink);font-weight:700;margin-bottom:4px;}
.drill-frame b{color:var(--gold);background:var(--gold-l);padding:0 6px;border-radius:6px;}
.drill-py{color:var(--soft);font-size:0.85rem;margin-bottom:2px;}
.drill-vn{color:var(--mid);font-size:0.88rem;margin-bottom:12px;}
.drill-opts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.drill-opt{background:var(--sky-l);border:1.5px solid var(--xv-f0b8b0, #f0b8b0);color:var(--sky-d);border-radius:9px;padding:7px 16px;font-family:var(--font-hanzi);font-size:1.05rem;font-weight:600;}
.drill-samples{background:var(--xb-eef8f6, #eef8f6);border-radius:10px;padding:10px 14px;display:none;}
.drill-samples.show{display:block;}
.drill-samples .ds{font-family:var(--font-hanzi);font-size:1.05rem;color:var(--teal);margin-bottom:4px;}
.task-card{background:var(--color-white, #fff);border:1.5px solid var(--border);border-top:4px solid var(--teal);border-radius:14px;padding:20px 24px;}
.task-role{font-family:var(--font-hanzi);font-size:1.15rem;font-weight:700;color:var(--teal);margin-bottom:10px;}
.task-guide{background:var(--teal-l);border-radius:10px;padding:11px 15px;font-size:0.9rem;color:var(--ink);margin-bottom:14px;line-height:1.6;}
.task-struct{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.task-chip{background:var(--xb-faf8f5, #faf8f5);border:1.5px dashed var(--sky);border-radius:9px;padding:7px 14px;font-family:var(--font-hanzi);font-size:1.05rem;color:var(--sky-d);}
.task-sample{display:none;background:var(--xb-faf6f1, #faf6f1);border-radius:10px;padding:12px 16px;margin-top:8px;}
.task-sample.show{display:block;}
.task-sample .ts-zh{font-family:var(--font-hanzi);font-size:1.15rem;color:var(--sky-d);margin-bottom:4px;line-height:1.7;}
.task-sample .ts-py{color:var(--soft);font-size:0.8rem;margin-bottom:4px;}
.task-sample .ts-vn{color:var(--mid);font-size:0.86rem;}
.task-note{background:var(--xb-fffdf5, #fffdf5);border:1px solid var(--xv-fde68a, #fde68a);border-radius:10px;padding:10px 15px;margin-top:12px;font-size:0.85rem;line-height:1.6;color:var(--ink);}
.task-note b{color:var(--gold);}
.show-ans-btn{padding:6px 16px;border:1.5px solid var(--border);border-radius:20px;background:none;font-size:0.8rem;color:var(--soft);cursor:pointer;margin-top:6px;font-family:'Be Vietnam Pro',sans-serif;transition:all 0.2s;}
.show-ans-btn:hover{border-color:var(--sky);color:var(--sky);}

@media(min-width:1000px){
  #fill-list,#mc-list{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  #fill-list .quiz-card,#mc-list .quiz-card{margin-bottom:0;}
  #sort-list{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px;}
  #sort-list .sort-q{margin-bottom:0;}
  .vocab-grid{gap:16px;}
}
@media(min-width:1400px){
  #fill-list,#mc-list{grid-template-columns:1fr 1fr 1fr;}
}
@media(max-width:700px){
  .site-header{padding:18px 16px 18px;}.header-zh{font-size:1.75rem;}
  .main{padding:18px 14px 110px;}.match-grid{grid-template-columns:1fr;}
  .warmup-grid{grid-template-columns:repeat(2,1fr);}
  .vc-icon{width:52px;height:52px;}.vc-emoji{font-size:1.6rem;}.vc-zh{font-size:1.3rem;}
  .vc-icon.has-img{width:74px;height:74px;}.f-img{width:104px;height:104px;}
  .tab-nav{padding:0;}.wu-emoji{font-size:3rem;padding:14px;}
}

/* ══════════════════════════════════════════
   PHẦN 2 · NGHE (Listening)
   ══════════════════════════════════════════ */
.listen-passage{border:2px dashed var(--border);border-radius:16px;padding:18px;margin-bottom:20px;}
.listen-play-btn{background:var(--nen-warm, var(--warm));color:#fff;border:none;border-radius:999px;padding:12px 26px;font-weight:700;font-size:1rem;cursor:pointer;margin-bottom:16px;display:block;}
.listen-play-btn:hover{background:#c2410c;}

/* ══════════════════════════════════════════
   PHẦN 4 · GHI ÂM (Voice recording)
   ══════════════════════════════════════════ */
.rec-box{margin-top:14px;padding:14px 16px;background:var(--snow);border-radius:14px;border:1.5px solid var(--border);}
.rec-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
.rec-btn{border:none;border-radius:999px;padding:8px 16px;font-size:0.82rem;font-weight:600;cursor:pointer;font-family:'Be Vietnam Pro',sans-serif;background:var(--color-white, #fff);border:1.5px solid var(--border);color:var(--ink);}
.rec-btn.rec-start{background:var(--nen-red, var(--red));color:#fff;border-color:var(--red);}
.rec-btn.rec-stop{background:var(--nen-ink, var(--ink));color:#fff;}
.rec-btn.rec-play{background:var(--nen-sky, var(--sky));color:#fff;border-color:var(--sky);}
.rec-btn.rec-submit{background:var(--nen-green, var(--green));color:#fff;border-color:var(--green);}
.rec-btn:disabled{opacity:0.4;cursor:not-allowed;}
.rec-status{font-size:0.82rem;color:var(--mid);min-height:20px;}
.rec-result{margin-top:8px;}
.rec-scores{display:flex;flex-wrap:wrap;gap:10px;}
.rec-score-item{background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:10px;padding:8px 14px;font-size:0.8rem;color:var(--mid);text-align:center;}
.rec-score-item b{display:block;font-size:1.2rem;color:var(--sky-d);}
.rec-recognized{margin-top:8px;font-size:0.82rem;color:var(--soft);font-style:italic;}
.rec-fallback{font-size:0.85rem;color:var(--warm);background:var(--warm-l);border-radius:10px;padding:10px 14px;}

/* ══════════════════════════════════════════
   PHẦN 5 · TỔNG KẾT (Score summary dashboard)
   ══════════════════════════════════════════ */
.sum-total{text-align:center;padding:24px;background:linear-gradient(135deg,var(--sky-l),var(--snow));border-radius:20px;margin-bottom:20px;}
.sum-total-n{font-size:3rem;font-weight:800;color:var(--sky-d);}
.sum-total-n span{font-size:1.4rem;color:var(--soft);font-weight:600;}
.sum-badge{font-size:1.2rem;font-weight:700;margin-top:6px;}
.sum-parts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:16px;}
.sum-part{background:var(--color-white, #fff);border:1.5px solid var(--border);border-radius:14px;padding:16px;text-align:center;}
.sum-part span{display:block;font-size:0.85rem;color:var(--mid);margin-bottom:6px;}
.sum-part b{font-size:1.3rem;color:var(--sky-d);}
.sum-tip{font-size:0.85rem;color:var(--soft);text-align:center;}

/* Nghe — câu ★ đúng/sai (判断对错) và câu hỏi 问 của đề HSK4 */
.wb-judge{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px 30px;padding:6px 10px;border:1px dashed var(--soft,var(--xv-bbbbbb, #bbbbbb));border-radius:8px}
.wb-judge-stmt{font-weight:600;flex:1 1 180px}
.wb-judge-btn{padding:5px 12px;font-size:0.82rem}
.wb-judge.done .wb-judge-btn{opacity:.55;pointer-events:none}
.wb-judge.done .wb-judge-btn.chosen{opacity:1}
.wb-judge.ok .wb-judge-btn.chosen{background:var(--green-l,var(--xb-e6f7ea, #e6f7ea));border-color:var(--green,#2e8b57);color:var(--green,var(--xt-2e8b57, #2e8b57))}
.wb-judge.err .wb-judge-btn.chosen{background:var(--red-l,var(--xb-fdeaea, #fdeaea));border-color:var(--red,#c0392b);color:var(--red,var(--xt-c0392b, #c0392b))}
.wb-judge-result{font-size:.82rem;font-weight:600}
.wb-judge-result.ok{color:var(--green,var(--xt-2e8b57, #2e8b57))}
.wb-judge-result.err{color:var(--red,var(--xt-c0392b, #c0392b))}
.wb-mc-q{margin-left:8px;font-weight:600}
/* Loi hoc sinh Viet hay mac tren trang bai hoc */
.g-errors{margin-top:16px;border:1.5px solid var(--xv-f1d9a8, #f1d9a8);background:var(--xb-fffaf0, #fffaf0);border-radius:14px;padding:14px 18px;}
.g-errors-title{font-weight:700;color:var(--xt-8a5a12, #8a5a12);font-size:0.92rem;margin-bottom:8px;}
.g-err{padding:8px 0;border-top:1px dashed var(--xv-f1d9a8, #f1d9a8);}
.g-err:first-of-type{border-top:none;padding-top:0;}
.g-err-wrong{font-family:var(--font-hanzi-display);font-size:1.05rem;color:var(--red);text-decoration:line-through;text-decoration-color:rgba(198,40,40,0.4);}
.g-err-why{font-size:0.86rem;color:var(--mid);margin:2px 0;}
.g-err-right{font-family:var(--font-hanzi-display);font-size:1.05rem;color:var(--green);font-weight:600;}


/* ══════════════════════════════════════════
   THE BAC CAU HAN–VIET — dung chung cho MOI bai hoc
   Lay am Han-Viet co san trong vocabData cua tung bai.
   ══════════════════════════════════════════ */
.h5-spk {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.95em;
  padding: 0 2px;
  opacity: 0.55;
}
.h5-spk:hover { opacity: 1; }


/* ---------- Bắc cầu Hán–Việt ---------- */
.h5-hv-intro {
  background: var(--paper, var(--xb-faf7f2, #faf7f2));
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--mid, var(--xt-5b5249, #5b5249));
  margin-bottom: 20px;
}
.h5-block { margin-bottom: 24px; }
.h5-block-title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--line, var(--xv-e6e0d8, #e6e0d8));
}
.h5-block-title.ok { color: var(--xt-1f8a4c, #1f8a4c); border-color: var(--xv-b8e0c8, #b8e0c8); }
.h5-block-title.warn { color: var(--xt-c0392b, #c0392b); border-color: var(--xv-f2c4bd, #f2c4bd); }

.h5-hv {
  display: grid;
  grid-template-columns: minmax(110px, auto) minmax(190px, auto) 1fr;
  gap: 8px 20px;
  align-items: baseline;
  border: 1px solid var(--line, var(--xv-e6e0d8, #e6e0d8));
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 8px;
  background: var(--color-white, #fff);
}
.h5-hv.trap { background: var(--xb-fffaf9, #fffaf9); border-color: var(--xv-f2c4bd, #f2c4bd); }
.h5-hv-zh { font-family: 'Noto Serif SC', serif; font-size: 1.35rem; color: var(--sky-d, var(--xt-1f6f8b, #1f6f8b)); }
.h5-hv-mid { font-size: 0.92rem; }
.h5-hv-hv { color: var(--gold-d, var(--xt-8a5a0f, #8a5a0f)); font-weight: 600; font-style: italic; }
.h5-hv-arrow { margin: 0 8px; color: var(--soft, var(--xt-8d8279, #8d8279)); }
.h5-hv-vn { color: var(--ink, var(--xt-2b2b2b, #2b2b2b)); font-weight: 600; }
.h5-hv-note { font-size: 0.85rem; color: var(--mid, var(--xt-5b5249, #5b5249)); line-height: 1.6; }
.h5-hv.trap .h5-hv-note { color: var(--xt-c0392b, #c0392b); }


@media (max-width:720px){
  .h5-hv{grid-template-columns:1fr;gap:4px;}
}


/* ============================================================
   Dong bo voi trang chu (thang 9/2026)
   ============================================================ */
/* Chu phu + pinyin dam hon cho doc ro tren nen sang (che do toi: toi-bai.css) */
:root { --py: #8a5a0f; --soft: #6b645c; }
/* Mot kieu chu Han cho ca trang (serif chi con o con dau trang tri) */
:root { --font-hanzi-display: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; }

/* Thanh tab: icon net manh + vong so thu tu thay emoji */
.tab-ico { width: 18px; height: 18px; flex-shrink: 0; }
.tab-so {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--sky-l); color: var(--sky-d);
  font-size: 0.72rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.tab-btn.active .tab-so { background: var(--nen-sky, var(--sky)); color: #fff; }

/* Nut loa: icon net manh */
.loa-ico { width: 1.15em; height: 1.15em; flex-shrink: 0; }
.speak-mini { width: 32px; height: 32px; }
.speak-mini .loa-ico { width: 16px; height: 16px; }
.speak-box-btn, .listen-play-btn { gap: 8px; }
.listen-play-btn { display: flex; align-items: center; margin-left: auto; margin-right: auto; }
.h4-spk, .h5-spk { display: inline-flex; align-items: center; vertical-align: middle; color: var(--sky-d); }
.h4-spk .loa-ico, .h5-spk .loa-ico { width: 16px; height: 16px; }

/* Nut nen sang / toi o goc dau trang (theme.js tu gan vao) */
.lt-theme-toggle {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer;
}
.lt-theme-toggle svg { width: 20px; height: 20px; }
.lt-theme-toggle:hover { background: rgba(255, 255, 255, 0.28); }
.lt-theme-toggle:focus-visible { outline: 3px solid #fde2b8; outline-offset: 2px; }
.site-header > .lt-theme-toggle { max-width: none; margin: 0; }
@media (max-width: 640px) { .lt-theme-toggle { top: 12px; right: 12px; width: 40px; height: 40px; } }

/* ===== Giao dien am tuoi (2026-10): nen nga + may line-art, do gach, nut noi khoi ===== */
:root{--bg:#fbf6ec;--card:#fffdf8;--border:#eadfcf;--sky:#c2412d;--sky-l:#fbe9e3;--sky-d:#9e3221;--snow:#fcecc9;}
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140' viewBox='0 0 220 140'%3E%3Cg fill='none' stroke='%23c2412d' stroke-opacity='.045' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 90c0-14 12-24 26-22 4-12 22-16 31-6 10-8 27-2 27 12 12 0 18 14 8 22H28c-6 0-8-3-8-6z'/%3E%3Cpath d='M44 80c4-6 12-6 15 0M76 76c4-6 12-6 15 0'/%3E%3Cpath d='M140 40c0-9 8-15 17-14 3-8 14-10 20-4 7-5 17-1 17 8 8 0 11 9 5 14h-53c-4 0-6-2-6-4z'/%3E%3C/g%3E%3C/svg%3E");background-size:440px 280px;}
.btn-p{border-radius:14px;font-weight:700;box-shadow:0 4px 0 var(--nen-sky-d, var(--sky-d));transition:transform .08s ease,box-shadow .08s ease,background-color .15s ease;}
.btn-p:hover{transform:none;}
.btn-p:active{transform:translateY(3px);box-shadow:0 1px 0 var(--nen-sky-d, var(--sky-d));}
.btn-s{border-radius:14px;font-weight:700;box-shadow:0 3px 0 var(--sky-l);}
.btn-s:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sky-l);}

/* ===== De nhin (2026-10): chu phu dam hon, nhan nho to len, dau trang gon tren dien thoai ===== */
:root{--soft:#6b645c;}
.header-badge{font-size:.78rem;letter-spacing:1px;}
.sec-badge{font-size:.76rem;}
@media (max-width:640px){
  .site-header{padding:16px 16px 14px;}
  .site-header::before{width:170px;height:170px;bottom:-50px;right:-40px;}
  .back-link{margin-bottom:6px;min-height:32px;}
  .header-badge{margin-bottom:8px;}
  .header-zh{font-size:1.75rem;letter-spacing:1px;}
  .header-py{font-size:.92rem;margin-top:4px;}
  .header-vn{font-size:.9rem;}
  /* the chu de / so tu / bai khoa: mot hang cuon ngang thay vi chiem 3 dong */
  .header-meta{flex-wrap:nowrap;overflow-x:auto;margin:10px -16px 0 0;padding:0 16px 2px 0;scrollbar-width:none;}
  .header-meta::-webkit-scrollbar{display:none;}
  .h-chip{white-space:nowrap;flex:none;}
}

/* ===== Goi y an mac dinh: nut "💡 Gợi ý" (dien tu / trac nghiem) ===== */
:root{--hint-ink:var(--sky-d);--hint-bd:var(--sky);--hint-bg:var(--sky-l);--hint-text:var(--mid);}
.hint-wrap{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;}
.hint-btn{font:inherit;font-size:0.8rem;font-weight:600;line-height:1.2;padding:4px 12px;min-height:30px;border-radius:999px;cursor:pointer;border:1.5px dashed var(--hint-bd);background:transparent;color:var(--hint-ink);}
.hint-btn:hover,.hint-btn.open{border-style:solid;background:var(--hint-bg);}
.hint-btn:focus-visible{outline:2px solid var(--hint-ink);outline-offset:2px;}
.hint-text{font-size:0.86rem;color:var(--hint-text);}
/* Giai thich sau khi tra loi (exp/why/giai): chu thuong, mau trung tinh, xuong dong gon tren dien thoai */
.q-fb .q-exp{margin-top:6px;padding-top:6px;border-top:1px dashed var(--border);font-weight:400;font-size:0.84rem;line-height:1.55;color:var(--ink2);overflow-wrap:anywhere;}
.q-fb .q-exp.is-ngan{color:var(--mid);}