:root{--bg:#FFF9FA;--surface:#fff;--ink:#24151C;--muted:#70525E;--faint:#8F6F7C;--line:#F6D5E0;--line2:#E8A4BC;--accent:#FF2D75;--accent-h:#D91B60;--soft:#FFF1F5;
 --okc:#14532d;--okb:#e7f7ec;--okl:#a7e3b9;--wc:#7a4b00;--wb:#fff3d1;--wl:#f2d17a;--ic:#70525E;--ib:#FCE8EF;--r:14px;--gut:32px}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{max-width:1680px;margin:0 auto;padding:0 var(--gut)}
/* header = đúng nhận diện của site hiện tại */
.hdr{background:rgba(255,249,250,.94);border-bottom:1px solid var(--line)}
.hdr .in{display:flex;align-items:center;gap:28px;min-height:56px}
.brand{display:inline-flex;align-items:center;gap:.625rem;font-size:1.125rem;font-weight:800;letter-spacing:-.02em}
.mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--accent);color:#fff;font-size:.9375rem;font-weight:700;letter-spacing:-.04em}
.brand i{font-style:normal;color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:8px}.nav a{padding:8px 12px;border-radius:10px;font-weight:600;font-size:.9375rem;color:var(--muted)}.nav a.on{background:var(--soft);color:var(--accent)}
.intro{padding:20px 0 12px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.intro h1{margin:0;font-size:1.75rem;line-height:1.15;font-weight:800;letter-spacing:-.03em}
.intro p{margin:0;color:var(--muted);font-size:.9375rem}
/* thanh công cụ dính: 2 hàng, mọi điều khiển cần dùng nằm trong tầm mắt */
.bar{position:sticky;top:0;z-index:20;background:rgba(255,249,250,.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:10px 0 10px}
.row{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}.row+.row{margin-top:10px}
.field{position:relative;display:flex;align-items:center;min-width:0}
.field input[type=text],.field input[type=search]{width:100%;height:44px;padding:0 40px 0 14px;background:var(--surface);border:1.5px solid var(--line2);border-radius:12px;font-size:1rem}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(217,27,96,.16)}
.field .x{position:absolute;right:4px;width:36px;height:36px;border:0;background:transparent;border-radius:9px;color:var(--faint);cursor:pointer;font-size:18px;line-height:1}
.field .x:hover{background:var(--soft);color:var(--accent)}
.f-prev{flex:1 1 420px}.f-search{flex:0 1 320px}
.size{display:flex;align-items:center;gap:10px;flex:0 0 auto;color:var(--muted);font-size:.8125rem;font-weight:600}
.size input{width:140px;accent-color:var(--accent)}.size b{min-width:2.6em;color:var(--ink);font-variant-numeric:tabular-nums}
.seg{display:inline-flex;background:#efebe3;border-radius:12px;padding:3px;flex:0 0 auto}
.seg button{height:36px;padding:0 14px;border:0;background:transparent;border-radius:9px;font-weight:600;font-size:.875rem;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button b{font-weight:700;opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}
.seg button[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 1px 3px rgba(36,21,28,.12)}
.chips{display:flex;gap:6px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;height:36px;padding:0 14px;background:var(--surface);border:1px solid var(--line2);border-radius:999px;font-weight:600;font-size:.875rem;color:var(--ink);cursor:pointer;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent)}.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.btn2{height:36px;padding:0 14px;display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line2);border-radius:10px;font-weight:600;font-size:.875rem;cursor:pointer;white-space:nowrap}
.btn2:hover{border-color:var(--accent);color:var(--accent)}.btn2 .n{background:var(--accent);color:#fff;border-radius:999px;font-size:.6875rem;padding:0 6px;min-width:18px;text-align:center}
select.btn2{padding-right:8px}
.meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0 12px;font-size:.8125rem;color:var(--muted)}
.meta b{color:var(--ink)}
/* LƯỚI: 4 cột ở ≥1200px, thẻ cao đồng đều */
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding-bottom:24px}
@media (max-width:1199px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 10px;min-width:0;height:calc(110px + var(--pvh,80px));transition:border-color .15s,box-shadow .15s;content-visibility:auto;contain-intrinsic-size:auto 190px}
.card:hover{border-color:#F3B5C8;box-shadow:0 4px 14px rgba(217,27,96,.10)}.card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.top{display:flex;align-items:center;gap:8px;min-width:0;height:24px}
.nm{font-weight:700;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}
.vn{flex:0 0 auto;font-size:.6875rem;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;white-space:nowrap}
.vnA{background:var(--okb);color:var(--okc)}.vnN{background:var(--wb);color:var(--wc)}.vnC{background:var(--ib);color:var(--ic)}
.sub{height:20px;font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv{height:var(--pvh,80px);overflow:hidden;margin:4px 0 0;position:relative}
.pt{position:relative;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;color:#24151C;font-family:system-ui,sans-serif}
.card.on .pt{font-family:var(--ff),system-ui,sans-serif}.card:not(.on) .pt{color:#E5C3CF}
.fb{color:#c0392b;text-decoration:underline dotted;text-decoration-thickness:1px}
.ft{margin-top:auto;display:flex;align-items:center;gap:6px;height:28px}
.lic{font-size:.6875rem;font-weight:600;padding:3px 8px;border-radius:6px;background:#FFF1F5;color:var(--muted);white-space:nowrap}
.pop{font-size:.6875rem;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--soft);color:var(--accent);white-space:nowrap}
.nopop{font-size:.6875rem;padding:3px 6px;color:var(--faint);font-style:italic;white-space:nowrap}
.heart{margin-left:auto;width:32px;height:32px;border:0;background:transparent;border-radius:8px;font-size:18px;color:var(--faint);cursor:pointer;display:grid;place-items:center}
.heart:hover{background:var(--soft);color:var(--accent)}.heart[aria-pressed=true]{color:var(--accent)}
.more{display:flex;justify-content:center;padding:8px 0 56px}.more button{height:44px;padding:0 28px;border:1.5px solid var(--accent);background:#fff;color:var(--accent);border-radius:999px;font-weight:700;cursor:pointer}
.more button:hover{background:var(--soft)}
.empty{padding:60px 0;text-align:center;color:var(--muted)}.empty button{margin-top:10px}
/* bảng lọc nâng cao: popover (desktop) / bottom sheet (mobile) */
.scrim{position:fixed;inset:0;background:rgba(36,21,28,.35);z-index:40;display:none}.scrim.on{display:block}
.panel{position:fixed;z-index:41;background:#fff;border:1px solid var(--line2);border-radius:16px;box-shadow:0 18px 48px rgba(36,21,28,.22);display:none;padding:18px 20px 16px;width:420px;right:var(--gut);top:150px;max-height:calc(100vh - 180px);overflow:auto}
.panel.on{display:block}.panel h3{margin:0 0 4px;font-size:1.0625rem}.panel h4{margin:16px 0 8px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.opts{display:flex;flex-wrap:wrap;gap:8px}.opts .chip{height:40px}
.panel .acts{display:flex;gap:10px;margin-top:18px;position:sticky;bottom:-16px;background:#fff;padding:12px 0 0}
.btn{height:44px;padding:0 20px;border-radius:12px;border:1.5px solid var(--accent);background:var(--accent);color:#fff;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover{background:var(--accent-h)}.btn.ghost{background:#fff;color:var(--accent)}.btn.ghost:hover{background:var(--soft)}.btn.full{flex:1}
.only-m{display:none}
@media (max-width:759px){
 :root{--gut:14px}
 .nav a{padding:8px 9px;font-size:.875rem}.hdr .in{gap:10px}.brand{font-size:1rem}
 .intro{padding:12px 0 6px}.intro h1{font-size:1.375rem}.intro p{display:none}
 .bar{padding:8px 0}.row{gap:8px}.row+.row{margin-top:8px}
 .f-prev{flex:1 1 auto}.f-search,.size,.only-d{display:none}.only-m{display:inline-flex}
 .seg{width:100%}.seg button{flex:1;padding:0 6px;font-size:.8125rem}
 .row.r2{flex-wrap:wrap}.chips{flex:1 1 100%}
 .grid{gap:10px}.card{padding:10px 11px 8px;height:calc(92px + var(--pvh,60px))}.sub{height:18px;font-size:.6875rem}.nm{font-size:.875rem}
 .vn{font-size:.625rem;padding:3px 6px}.lic{display:none}.ft{height:30px}
 .meta{padding:8px 0}.grid.one{grid-template-columns:1fr}
 .panel{left:0;right:0;top:auto;bottom:0;width:auto;border-radius:18px 18px 0 0;max-height:82vh;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}
/* ---- trang chi tiết ---- */
.crumb{padding:16px 0 4px;font-size:.8125rem;color:var(--muted)}.crumb a{color:var(--accent);font-weight:600}
.dh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:end;padding:6px 0 14px}
.dh h1{margin:0;font-size:2.25rem;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.dh .by{margin:6px 0 10px;color:var(--muted)}.badges{display:flex;flex-wrap:wrap;gap:8px}
.bd{font-size:.8125rem;font-weight:600;padding:5px 10px;border-radius:999px;background:#FFF1F5;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.bd.ok{background:var(--okb);color:var(--okc)}.bd.in{background:var(--ib);color:var(--ic)}.bd.wr{background:var(--wb);color:var(--wc)}
.dacts{display:flex;gap:10px;align-items:center}
.tabs{position:sticky;top:0;z-index:15;background:rgba(255,249,250,.97);border-bottom:1px solid var(--line);display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.tabs a{padding:14px 16px;font-weight:600;font-size:.9375rem;color:var(--muted);white-space:nowrap;border-bottom:3px solid transparent}.tabs a.on{color:var(--accent);border-color:var(--accent)}
.sec{padding:26px 0 8px;scroll-margin-top:60px}.sec h2{margin:0 0 12px;font-size:1.25rem;letter-spacing:-.01em}.sec p.lead{margin:0 0 14px;color:var(--muted);font-size:.9375rem}
.prev{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 20px}
.ptools{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-size:.8125rem;color:var(--muted);font-weight:600}.ptools label{display:flex;align-items:center;gap:8px}.ptools input[type=range]{accent-color:var(--accent);width:150px}
.big{width:100%;min-height:150px;border:0;resize:vertical;font-size:64px;line-height:1.35;color:var(--ink);background:transparent;padding:6px 0}.big:focus{outline:none}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}.vg{display:grid;place-items:center;height:64px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:30px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}.box h3{margin:0 0 8px;font-size:.9375rem}
.tbl{width:100%;border-collapse:collapse;font-size:.875rem}.tbl td{padding:8px 0;border-top:1px solid var(--line);vertical-align:top}.tbl tr:first-child td{border-top:0}.tbl td:first-child{color:var(--muted);width:42%;padding-right:12px}
pre.code{margin:0;padding:14px 16px;background:#24151C;color:#FFE0EA;border-radius:12px;font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;overflow:auto;white-space:pre}
.wl{display:grid;gap:8px}.wr1{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:center;gap:14px;padding:8px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}.wr1 span{font-size:.8125rem;color:var(--muted);font-weight:600}.wr1 div{font-size:32px;line-height:1.35;white-space:nowrap;overflow:hidden}
.rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.modal{position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 28px));background:#fff;border-radius:18px;padding:22px;box-shadow:0 24px 64px rgba(36,21,28,.3);display:none}.modal.on{display:block}
.modal h3{margin:0 0 4px;font-size:1.25rem}.modal p{margin:0 0 14px;color:var(--muted);font-size:.875rem}
.dl{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1.5px solid var(--line2);border-radius:12px;margin-bottom:10px;cursor:pointer;background:#fff;width:100%;text-align:left}.dl:hover{border-color:var(--accent);background:var(--soft)}
.dl .ic{width:40px;height:40px;border-radius:10px;background:var(--soft);color:var(--accent);display:grid;place-items:center;font-size:20px}.dl b{display:block}.dl small{color:var(--muted)}.dl em{font-style:normal;font-size:.75rem;color:var(--muted);font-weight:600}
.note{font-size:.8125rem;background:var(--wb);color:var(--wc);border:1px solid var(--wl);border-radius:10px;padding:10px 12px;margin-top:6px}
@media (max-width:1199px){.rel{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:899px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}}
@media (max-width:759px){.dh{grid-template-columns:1fr}.dh h1{font-size:1.75rem}.dacts{width:100%}.dacts .btn{flex:1}.big{font-size:40px;min-height:110px}.wr1{grid-template-columns:1fr;gap:2px}.wr1 div{font-size:26px}.vgrid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}.vg{height:52px;font-size:24px}.rel{gap:10px}
 .modal{top:auto;bottom:0;left:0;transform:none;width:auto;border-radius:18px 18px 0 0;padding-bottom:calc(20px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.mtools{display:none}
@media (max-width:759px){.mtools{display:block;padding-top:10px}.mtools .field input{height:42px}.mtools .seg{margin-top:8px;width:100%}.mrow{display:flex;gap:8px;margin-top:8px;align-items:center}.mrow .chips{flex:1 1 auto}.only-d{display:none!important}.only-m{display:inline-flex}.mtools.only-m{display:block}.bar .r1{flex-wrap:nowrap}.bar .f-prev{flex:1 1 auto}}
@media (min-width:760px){.only-m{display:none!important}}
.bar .r1 .btn2{height:44px}

.nav .sh{display:none}
.pv{display:flex;align-items:center}.pt{width:100%}
.card .pv{align-items:center}
@media (max-width:759px){.nav .lg{display:none}.nav .sh{display:inline}.hdr .in{min-height:50px}.intro{padding:10px 0 4px}.intro h1{font-size:1.25rem}.mtools{padding-top:8px}.mrow{margin-top:0}.mtools .seg{margin-top:8px}.chip{height:34px;padding:0 12px;font-size:.8125rem}.meta{padding:6px 0 8px;font-size:.75rem}.meta #sortnote{display:block;width:100%}.bar{padding:6px 0}.bar .r1 .btn2{height:44px}}
/* ===== 9A.1: thẻ ngắn gọn, chữ mẫu ưu tiên, không co chữ nhỏ ===== */
.card{height:auto;min-height:calc(100px + var(--pvh,96px));contain-intrinsic-size:auto 200px}
.sub{height:18px;line-height:18px}
.vn.m-only{display:none}
.mnote{margin:10px 0 0;font-size:.8125rem;color:var(--muted)}
.back{font-weight:700;color:var(--accent);font-size:.9375rem}
@media (max-width:759px){
 .intro{padding:8px 0 2px}.intro h1{font-size:1.125rem}
 .meta{display:none}
 .vn.d-only{display:none}.vn.m-only{display:inline-block}
 .sub,.lic,.pop,.nopop{display:none}
 .card{min-height:calc(78px + var(--pvh,60px));padding:10px 11px 6px}
 .top{height:auto;min-height:36px;align-items:flex-start}
 .nm{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;line-height:1.25;font-size:.875rem}
 .pv{margin-top:2px}
 .ft{height:30px}.ft .vn{margin-right:auto}
 .mtools{padding-top:6px}.mtools .seg{margin-top:6px}.mtools .chips{margin-top:6px!important}
}
/* ---- chi tiết mobile gọn ---- */
.dm{display:none}
@media (max-width:759px){
 main.wrap.dpage{padding-bottom:86px}
 .dm{display:block;padding:6px 0 4px}.dm1{display:flex;justify-content:space-between;align-items:center;min-height:32px}
 .dm h1{margin:0;font-size:1.5rem;line-height:1.15;letter-spacing:-.02em;font-weight:800}
 .dm2{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:.8125rem;color:var(--muted);font-weight:600}
 .dm2 .bd{padding:3px 9px;font-size:.75rem}.dm2 a{color:var(--accent);font-weight:700;margin-left:auto}
 .dpage .crumb,.dpage .dh{display:none}
 .tabs a{padding:11px 14px;font-size:.875rem}
 .sec{padding:18px 0 4px}.sec h2{font-size:1.125rem}
 .dpage .prev{padding:12px 14px}.dpage .big{font-size:36px;min-height:96px}
 .bbar{display:flex}
}
.bbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom));gap:10px}
.bbar .btn{flex:1}.bbar .btn.ghost{flex:0 0 auto;min-width:96px}
.btn[disabled],.dl[disabled]{opacity:.5;cursor:not-allowed}.dl[disabled]:hover{background:#fff;border-color:var(--line2)}
.why{display:block;color:var(--wc);font-size:.75rem;margin-top:2px}
.method{margin:12px 0 0;font-size:.8125rem;color:var(--muted);line-height:1.55}.method b{color:var(--ink)}
.bd.in2{background:var(--soft);color:var(--accent)}
@media (max-width:759px){.bbar{display:flex}}

@media (max-width:759px){
 .top{min-height:18px}.top.two{min-height:36px}
 .nm{-webkit-line-clamp:3}
 .mtools{padding-bottom:10px}
}
.nav a{white-space:nowrap}
@media (max-width:389px){.hdr .in{gap:6px}.brand{font-size:.9375rem;gap:.4rem}.mark{width:28px;height:28px;font-size:.8125rem}.nav{margin-left:0}.nav a{padding:7px 7px;font-size:.8125rem}}
/* 9A.2 */
.dl.off{cursor:default;background:#faf8f4;border-style:dashed}.dl.off:hover{background:#faf8f4;border-color:var(--line2)}.dl.off .ic{background:#eee;color:#8F6F7C}.dl .why{display:block;color:var(--wc);font-size:.75rem;margin-top:2px}
a.dl{text-decoration:none;color:inherit}
.note.q-NANG{background:#fdecec;border-color:#f3b3b3;color:#7a1f1f}.note.q-LOI{background:#fff4e5;border-color:#f3d09a;color:#6b4300}
.qw{font-size:.8rem;line-height:1;padding:3px 5px;border-radius:6px;background:#fff4e5;color:#9a5b00;cursor:help;flex:none}.qw.hard{background:#fdecec;color:#a11d1d}
@media (max-width:759px){.nm{-webkit-line-clamp:4}}
/* 9A.2: tên dài xuống 2 dòng cả trên desktop (không cắt bằng dấu …); các thẻ cùng hàng dùng chung chiều cao dòng tên */
@media (min-width:760px){.top{height:auto;min-height:24px;align-items:flex-start}.top.two{min-height:42px}.nm{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;overflow-wrap:anywhere;line-height:1.3}.top .vn{margin-top:1px}}

/* 9C: hộp thoại tải — nút X, cuộn được trên màn hình thấp, ba lựa chọn rõ nghĩa */
.modal{max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);overflow-y:auto;overscroll-behavior:contain}
.mhead{position:sticky;top:-22px;z-index:2;background:#fff;margin:-22px -22px 6px;padding:22px 66px 6px 22px;border-radius:18px 18px 0 0}
.mhead h3{margin:0}
.mx{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;border-radius:999px;background:var(--soft);color:var(--ink);font-size:28px;line-height:1;display:grid;place-items:center;cursor:pointer;padding:0}
.mx:hover{background:#FFE0EA}.mx:focus-visible,.dl:focus-visible,.modal .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dl small{display:block;margin-top:2px;line-height:1.4}
@media (max-width:759px){.modal{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}}

/* 9D: không còn nút Tải font ở font không có bản tải trực tiếp: nút Lưu đứng một mình chiếm trọn thanh dưới */
.bbar .btn.ghost:only-child{flex:1 1 auto}