/* ═══════════════════════════════════════════════════════════════════════
   CHU — TU HOST, KHONG QUA GOOGLE FONTS
   Do ngay 19/9/2026 bang nhat ky mang tren mot trang bat ky:

       truoc:  24 request  =  1 HTML + 1 CSS site + 1 CSS Google + 21 file font
               font 486 KB  |  HTML + CSS cua site chi 39 KB   (ti le 12:1)
       sau:     7 file font, 134 KB, cung mien, khong DNS/TLS toi ben thu ba

   Google Fonts phuc vu ba subset (latin, latin-ext, vietnamese) cho MOI trong
   luong, va trang tieng Viet can ca ba — nen rieng Be Vietnam Pro da la 12
   file. Gop subset lai thanh mot file moi trong luong thi het chuyen do: moi
   trang deu can ca latin lan tieng Viet, nen tach ra chi ton them request.

   Bo ky tu cat theo chinh noi dung site, khong theo pham vi mac dinh.
   Sinh lai: App_Data/assets/fonts/sinh-lai.py

   KHONG dat unicode-range o day. Dat unicode-range tuc la bao trinh duyet chi
   dung font nay cho khoang ay; ta da gop san subset vao mot file nen viec do
   thanh thua, va viet sai mot khoang la mat chu ma khong bao loi.

   font-display: swap — giong tham so display=swap cua duong dan Google Fonts
   cu, giu nguyen hanh vi: hien ngay bang font he thong roi doi sang font that.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/be-vietnam-pro-400.woff2) format("woff2")}
/* Ban nghieng cua Be Vietnam Pro — cung ly do voi ban nghieng cua Source Serif 4 ben duoi.
   Chin quy tac tren site nghieng chu KHONG chan (chu thich bang, ten tap chi trong danh
   sach nguon, nhan trong ba cong cu Lab); khong co tep nay thi chung la nghieng gia. */
@font-face{font-family:"Be Vietnam Pro";font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/be-vietnam-pro-400-italic.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/be-vietnam-pro-500.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url(/assets/fonts/be-vietnam-pro-600.woff2) format("woff2")}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/be-vietnam-pro-700.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2")}
/* Bien thien, truc wght 400-600. Can 600 vi <strong> trong doan serif — bo di
   thi trinh duyet ve dam gia. Mot file bien thien 43,7 KB nho hon hai file
   tinh 52,7 KB, va cho dung 600 thay vi mot muc xap xi. */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/source-serif-4-var.woff2) format("woff2-variations")}
/* BAN NGHIENG THAT. Truoc 21/9/2026 site chi co ban dung cua Source Serif 4, trong khi
   CSS khai font-style:italic cho TEN KHOA HOC tren ca 168 trang loai va cho khau hieu.
   Khong co phong nghieng thi trinh duyet tu xo nghieng net chu dung — nghieng gia: net
   tho hon, va o co nho tren nen toi thi loe ra trong nhu in dam. Tren mot site lay danh
   phap hai phan lam xuong song thi do la chi tiet dang sua.
   Trinh duyet CHI tai tep nay tren trang co chu nghieng co chan. 42,2 KB. */
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/source-serif-4-italic-var.woff2) format("woff2-variations")}

/* =====================================================================
   muihuong.vn — he thong giao dien dung chung
   Thu tu: token -> nen -> bo cuc -> thanh phan -> phan hoi
   ===================================================================== */

:root{
  /* be mat */
  --glass:#10221F; --glass-2:#1B322D; --glass-line:#2E4A43;
  --paper:#EDF0EC; --paper-2:#E4E9E3;

  /* chu */
  --ink:#14201C; --ink-2:#4A5A54;
  /* --ink-3 la #8A968F cho toi 21/9/2026: 2,67 : 1 tren nen, DUOI ca nguong 3 cua
     chu lon, trong khi no duoc dung o 124 cho cho chu thich va nhan co 12–13 px.
     Bang tuong phan trong /admin/ → Giao diện bat duoc ngay lan mo dau tien.
     #606B65 giu nguyen sac do, chi ha do sang: 4,82 tren nen, 4,50 tren o. */
  --ink-3:#606B65;
  --on-glass:#E8EFEB; --on-glass-2:#8FA79E; --on-glass-3:#7E958D;

  /* duong ke */
  --line:#C7CEC7; --rule:#DDE2DC;

  /* hanh dong: tra cuu bang mint, mua bang hoang tho — khong dung chung */
  --act-look:#5DCAA5; --act-look-ink:#0B1F1A;
  --act-buy:#B08A2E;
  --focus:#2F7F79;

  /* dai bay hoi — dung o moi noi, luon cung mot nghia */
  --vol-cool:#2F7F79; --vol-mid:#B08A2E; --vol-warm:#6B3A46;

  /* muoi ho mui */
  --ho-chua-the:#9BA81F; --ho-co-la:#4E8A3C; --ho-hoa:#B25A7A;
  --ho-nhua-go:#5E4A2E; --ho-cay-am:#9A3B26; --ho-ngot-bep:#CFA25E;
  --ho-dat-am:#5A6B4A; --ho-thuoc:#2F7F79; --ho-len-men:#5C4A6B;
  --ho-khoi-khoang:#4A4F52;
  /* Hai ho them ngay 1/9/2026. Chon mau am va trung tinh de tach ro khoi
     muoi ho tu nhien: day la vanh ngoai cua bang phan loai. */
  --ho-nguoi-vat:#8A6B5C; --ho-do-vat:#6B7280;

  --sans:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
img{max-width:100%;height:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1060px}
.block{margin:52px 0 0}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line)}
.masthead.on-glass{background:var(--glass);color:var(--on-glass);border-bottom:0}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:16px}
.brand{font-weight:700;letter-spacing:-.02em;text-decoration:none;white-space:nowrap}
.nav{display:flex;gap:22px;font-size:14px;color:var(--ink-2);flex-wrap:wrap}
.masthead.on-glass .nav{color:var(--on-glass-2)}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.masthead.on-glass .nav a:hover{color:var(--on-glass)}
.nav a[aria-current]{font-weight:500}

/* ---------- dinh danh trang ---------- */
.head{padding:48px 0 0}
.crumb{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 18px}
.crumb a{color:var(--acc,var(--ink-2));text-decoration:none}
.crumb a:hover{text-decoration:underline}
h1{margin:0;font-size:clamp(32px,5vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.binomial{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--ink-2);margin:8px 0 0}
.lede{font-family:var(--serif);font-size:19px;line-height:1.68;max-width:640px;margin:18px 0 0}
.lede-block .lede+.lede{margin-top:16px}
.article p+p{margin-top:16px}
.lede a{color:var(--acc,var(--ink))}
h2.sec{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);font-weight:400;margin:0 0 6px}
.sub{font-size:14px;color:var(--ink-2);margin:0 0 24px;max-width:600px}

/* ---------- khoi thong so ---------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:20px 28px;
  margin:32px 0 0;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.facts dd{margin:5px 0 0;font-size:15px;font-weight:500}
.facts dd.mono{font-family:var(--mono);font-size:14.5px}

/* ---------- o tra cuu lo (trang chu) ---------- */
.hero{background:var(--glass);color:var(--on-glass);padding:54px 0 46px}
.hero .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-glass-3);margin:0 0 16px}
.lookup{display:flex;gap:10px;flex-wrap:wrap;max-width:620px}
.lookup input{flex:1 1 300px;min-width:0;background:transparent;border:0;
  border-bottom:2px solid var(--glass-line);color:var(--on-glass);font-family:var(--mono);
  font-size:clamp(24px,4.6vw,38px);padding:6px 2px 12px}
.lookup input::placeholder{color:#3E5C54}
.lookup input:focus{outline:0;border-bottom-color:var(--act-look)}
.lookup button{align-self:flex-end;background:var(--act-look);color:var(--act-look-ink);border:0;
  border-radius:8px;font-family:var(--sans);font-size:15px;font-weight:600;padding:13px 26px;cursor:pointer}
.lookup button:hover{filter:brightness(1.1)}
.hero .hint{font-size:13.5px;color:var(--on-glass-3);margin:16px 0 0}
.hero .hint a{color:#9FE1CB}
.result{margin:26px 0 0}
.result .card{border:1px solid var(--glass-line);border-radius:10px;padding:20px 22px;
  background:var(--glass-2);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.result .code{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--on-glass-3)}
.result .oil{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:4px 0 0}
.result .meta{font-size:13.5px;color:var(--on-glass-2);margin:3px 0 0}
.result .go{border:1px solid var(--act-look);color:#9FE1CB;border-radius:8px;padding:11px 20px;
  text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
.result .go:hover{background:#16302A}
.result .miss{border:1px solid #4A2F32;border-radius:10px;padding:20px 22px;background:#1E2422}
.result .miss p{margin:0;font-family:var(--serif);font-size:17px;line-height:1.65;color:#D9C9C9}
.result .miss p+p{margin-top:10px;font-size:14.5px;color:var(--on-glass-2);font-family:var(--sans)}

/* ---------- dai bay hoi (trang lo) ---------- */
.ribbon{background:var(--glass);color:var(--on-glass);padding:38px 0 30px;margin:8px 0 0}
.ribbon-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:30px}
.ribbon-head h2{margin:0;font-size:18px;font-weight:600;letter-spacing:-.01em}
.ribbon-head p{margin:0;font-size:13.5px;color:var(--on-glass-2)}
.scroller{overflow-x:auto;padding-bottom:6px}
.plot{position:relative;min-width:660px;height:150px}
.plot .axis-line{position:absolute;left:0;right:0;top:96px;height:1px;background:var(--glass-line)}
.plot .tick{position:absolute;top:96px;width:1px;height:7px;background:var(--glass-line)}
.plot .dot{position:absolute;transform:translate(-50%,-50%);border:0;padding:0;border-radius:50%;
  cursor:pointer;transition:box-shadow .18s ease,transform .18s ease}
.plot .dot:hover,.plot .dot.on{box-shadow:0 0 0 5px rgba(255,255,255,.16);
  transform:translate(-50%,-50%) scale(1.12)}
.plot .stage{position:absolute;top:112px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-glass-3)}
.readout{margin-top:22px;min-height:52px;border-top:1px solid #24413A;padding-top:16px;
  display:flex;flex-wrap:wrap;gap:8px 34px;align-items:baseline}
.readout .name{font-size:20px;font-weight:600;letter-spacing:-.02em}
.readout .num{font-family:var(--mono);font-size:13px;color:var(--on-glass-2)}
.readout .num i{font-style:normal;color:var(--on-glass)}
.readout .hint{font-size:14px;color:var(--on-glass-3)}

/* vach bay hoi thu nho (trang cau tu) */
/* Dai bay hoi thu nho tren trang cau tu.
   Truoc day nhan nhiet do dat o top:-2px con thanh do o top:9px — chu cao
   ~13px nen no phu dung len thanh. Nay xep ba tang tach bach:
   thanh o tren, kim chi vi tri xuyen qua, nhan nam duoi. */
.volstrip{margin:18px 0 0;position:relative;height:34px;max-width:520px}
.volstrip .track{position:absolute;left:0;right:0;top:6px;height:3px;border-radius:2px;opacity:.55;
  background:linear-gradient(90deg,var(--vol-cool),var(--vol-mid),var(--vol-warm))}
.volstrip .pin{position:absolute;top:1px;width:3px;height:13px;border-radius:2px;background:var(--ink)}
.volstrip .ends{position:absolute;top:19px;width:100%;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);line-height:1}

/* ---------- dai day nghe ---------- */
.teach{border-bottom:1px solid var(--line);background:var(--paper-2)}
.teach .wrap{padding:18px 24px;font-size:14.5px;color:var(--ink-2)}
.teach a{color:var(--ink);font-weight:500}

/* ---------- bang cau tu (trang lo) ---------- */
.grid-2{display:grid;grid-template-columns:1fr 290px;gap:56px;padding:44px 0 8px}
table.data{width:100%;border-collapse:collapse;font-size:15px}
table.data th{text-align:left;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding:0 10px 10px 0;border-bottom:1px solid var(--line)}
table.data th.r,table.data td.r{text-align:right;padding-right:0}
/* Cot so canh phai ma KHONG phai cot cuoi thi dinh sat chu cot ke ben ("NhiệtDung môi",
   "HeatSolvent" o trang so sanh phuong phap — audit 26/9/2026). Chua cho moi bang mot lan,
   thay vi va tung bang nhu mdc-bang, mpl-bang da lam. */
table.data th.r:not(:last-child),table.data td.r:not(:last-child){padding-right:18px}
table.data td{padding:11px 10px 11px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
table.data tbody tr{transition:background .15s ease}
table.data tr.on td{background:#DCE6E1}
.swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:9px}
.mono{font-family:var(--mono);font-size:13.5px;color:var(--ink-2)}
td.r .mono{color:var(--ink)}
.bar{display:block;height:3px;margin:5px 0 0 auto;border-radius:2px}
.side dl{margin:0;font-size:14px}
.side dt{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-top:16px}
.side dt:first-child{margin-top:0}
.side dd{margin:3px 0 0}
.side .doc{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}

/* ---------- khoang dao dong (trang cau tu) ---------- */
.axis{position:relative;height:18px;margin:0 0 6px;border-bottom:1px solid var(--line)}
.axis span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);
  font-size:10.5px;color:var(--ink-3)}
.rows{margin:0;padding:0;list-style:none}
.rows .row{display:grid;grid-template-columns:190px 1fr 118px;align-items:center;gap:18px;
  padding:13px 0;border-bottom:1px solid var(--rule)}
.rows .row:hover{background:var(--paper-2)}
.rows .oil{font-size:15px;font-weight:500}
.rows .oil a{text-decoration:none}
.rows .oil a:hover{text-decoration:underline}
.rows .oil small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;
  color:var(--ink-3);margin-top:2px}
/* width:100% khong doi gi trong o luoi 1fr hien tai, nhung lam phan tu nay
   khong con phu thuoc vao ngu canh cha — cung mau da lam .hai-truc .thanh
   bien mat tren dien thoai. */
.rows .track{position:relative;width:100%;height:22px}
.rows .track .gridline{position:absolute;top:0;bottom:0;width:1px;background:var(--rule)}
.rng{position:absolute;top:8px;height:6px;border-radius:3px}
.rng i{position:absolute;top:-3px;width:12px;height:12px;border-radius:50%;transform:translateX(-50%)}
.nums{font-family:var(--mono);font-size:13px;color:var(--ink-2);text-align:right}
.nums b{color:var(--ink);font-weight:500}

/* ---------- dau van tay lo (trang tinh dau) ---------- */
table.fp{border-collapse:collapse;min-width:640px;width:100%}
table.fp th{font-weight:400;text-align:center;padding:0 0 12px;vertical-align:bottom}
table.fp thead th:first-child{width:190px}
table.fp tbody th{text-align:left;padding:0 18px 0 0;font-size:14.5px;font-weight:500}
table.fp tbody th a{text-decoration:none}
table.fp tbody th a:hover{text-decoration:underline}
table.fp tbody th small{display:block;font-family:var(--mono);font-size:11px;font-weight:400;
  color:var(--ink-3);margin-top:1px}
table.fp td{padding:0;text-align:center}
.lotlab{font-family:var(--mono);font-size:11px;color:var(--ink-2);text-decoration:none;display:block}
.lotlab:hover{color:var(--ink);text-decoration:underline}
.lotlab em{display:block;font-style:normal;font-size:10px;color:var(--ink-3);margin-top:3px}
.fpcell{margin:2px;height:42px;border-radius:4px;font-family:var(--mono);font-size:12.5px;
  display:flex;align-items:center;justify-content:center}
.legend{display:flex;align-items:center;gap:10px;margin:18px 0 0;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.legend .ramp{display:flex;gap:2px}
.legend .ramp i{width:26px;height:9px;border-radius:2px;display:block}

/* ---------- muc tu dien ---------- */
.entry{border-left:3px solid var(--ho,var(--line));padding-left:34px;max-width:720px}
.entry .en{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin:6px 0 0}
.anchor{margin:38px 0 0}
.anchor .label{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}
.anchor .imperative{font-family:var(--serif);font-size:clamp(28px,4.6vw,42px);line-height:1.22;
  letter-spacing:-.015em;margin:0;font-weight:400}
.anchor .after{font-size:14px;color:var(--ink-2);margin:18px 0 0}
.desc p{font-family:var(--serif);font-size:18px;line-height:1.74;margin:0 0 18px}
.desc p:last-child{margin-bottom:0}
.entry .block p{font-family:var(--serif);font-size:17px;line-height:1.72;color:var(--ink-2);margin:0 0 16px;max-width:640px}
.entry .block p:last-child{margin-bottom:0}
.entry .howto{background:var(--paper-2);border-radius:10px;padding:26px 28px;border-top:0!important;margin-top:40px}
.entry .sci p{font-family:var(--mono);font-size:14px;line-height:1.78;color:var(--ink-2)}
.entry .howto p{color:var(--ink)}
.strip{display:flex;gap:6px}
.seg{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:6px;font-size:13.5px;color:var(--ink-3)}
.seg b{display:block;font-weight:500;font-size:14px;color:var(--ink-3)}
.seg.on{border-color:var(--ho);background:var(--paper-2)}
.seg.on b{color:var(--ink)}
.seg.on span{color:var(--ink-2)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:8px;overflow:hidden}
.compare>div{background:var(--paper);padding:20px}
.compare .this{background:var(--paper-2)}
.compare .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 8px}
.compare .term{font-size:19px;font-weight:600;letter-spacing:-.015em;margin:0}
.compare .fam{font-size:13px;color:var(--ink-2);margin:5px 0 0}
.tell{font-family:var(--serif);font-size:17px;line-height:1.7;margin:18px 0 0}

/* ---------- luoi tu dien ---------- */
.tools{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:30px 0 0;
  padding:0 0 22px;border-bottom:1px solid var(--line)}
.tools input{flex:1 1 280px;min-width:0;background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:11px 14px;font-family:var(--sans);font-size:15px;color:var(--ink)}
.tools input:focus{outline:0;border-color:var(--focus)}
.tools .count{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.colhead,.frow{display:grid;grid-template-columns:172px repeat(3,1fr);gap:0 14px}
.colhead{padding:20px 0 10px;position:sticky;top:0;background:var(--paper);z-index:2;
  border-bottom:1px solid var(--rule)}
.colhead div{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.colhead div span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:0;
  text-transform:none;color:#A6B0AA;margin-top:3px}
.frow{padding:16px 0;border-bottom:1px solid var(--rule);align-items:start}
.frow.dim{opacity:.28}
.fname{border-left:3px solid var(--ho);padding-left:13px}
.fname b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.fname span{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.cell{display:flex;flex-wrap:wrap;gap:6px;align-content:start;min-height:34px}
.cell a{display:inline-block;text-decoration:none;font-size:14px;padding:6px 12px;border-radius:16px;
  border:1px solid var(--line);background:var(--paper)}
.cell a:hover{border-color:var(--ho);background:var(--paper-2)}
.cell a.hit{border-color:var(--ho);background:var(--paper-2);font-weight:500}
.cell a.off{opacity:.22}
.empty{font-family:var(--mono);font-size:11px;color:#B4BCB6;padding:8px 0}

/* ---------- chips, danh sach lo, danh muc ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips a{display:inline-block;text-decoration:none;padding:9px 15px;border-radius:20px;
  border:1px solid var(--line);font-size:14px;background:var(--paper)}
.chips a:hover{border-color:var(--ink)}
.chips .lead{background:var(--paper-2);border-color:var(--acc,var(--ink));font-weight:500}
.chips .all{border-color:var(--ink);font-weight:500}
.chips .chip-flat{display:inline-block;padding:9px 15px;border-radius:20px;
  border:1px dashed var(--line);font-size:14px;color:var(--ink-3)}
.chips .num,.chips .role{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-left:8px}
.lots{margin:0;padding:0;list-style:none;font-size:15px}
.lots li{padding:14px 0;border-bottom:1px solid var(--rule);display:flex;justify-content:space-between;
  gap:6px 24px;flex-wrap:wrap;align-items:baseline}
.lots .meta{flex:1 1 320px;max-width:560px}
.lots a{text-decoration:none;font-weight:500}
.lots a.code{font-family:var(--mono);font-size:14px}
.lots a:hover{text-decoration:underline}
.lots .meta{font-size:13.5px;color:var(--ink-2)}
.fam{margin:0 0 34px}
.fam h3{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:15px;font-weight:600}
.fam h3 i{width:10px;height:10px;border-radius:50%;display:block}
.oils{margin:0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:2px;background:var(--rule);
  border:1px solid var(--rule);border-radius:8px;overflow:hidden}
.oils li{background:var(--paper)}
.oils a{display:block;text-decoration:none;padding:15px 17px}
.oils a:hover{background:var(--paper-2)}
.oils b{display:block;font-size:15px;font-weight:500}
.oils span{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin-top:3px}

/* ---------- khoi mua ---------- */
.buy{margin:54px 0 0;padding:28px;border:1px solid var(--line);border-radius:10px;background:var(--paper-2)}
.buy h2{margin:0 0 4px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.buy .note{font-size:14.5px;color:var(--ink-2);margin:0 0 22px;max-width:560px}
.sizes{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px;padding:0;list-style:none}
/* Tung o dung tich gio la MOT LIEN KET toi trang ban cua chai do, khong con la
   mot o chet liet ke ba dung tich viet cung. Vi the .sizes li khong con la thu
   ve khung — the <a> ben trong nhan phan do, neu khong thi vung bam chi bang
   dong chu chu khong bang ca o. */
.sizes li{border:1px solid var(--line);border-radius:8px;background:var(--paper);
  transition:border-color .15s,background .15s}
.sizes li a{display:block;padding:13px 18px;text-decoration:none;color:inherit}
.sizes li:hover{border-color:var(--act-buy);background:var(--paper-2)}
.sizes b{display:block;font-size:15px;font-weight:600}
.sizes span{font-family:var(--mono);font-size:13.5px;color:var(--ink-2)}
/* .contact da go 19/9/2026 cung khoi "Đặt hàng" bia tren trang tinh dau. Khong
   con template nao dung, va bo kiem CSS bao no mo coi. */

/* ---------- khoi thua nhan gioi han ---------- */
.note-blk{margin:52px 0 0;padding:26px 0 0;border-top:1px solid var(--line)}
.note-blk p{font-family:var(--serif);font-size:16.5px;line-height:1.72;color:var(--ink-2);
  margin:0 0 14px;max-width:640px}
.note-blk p strong{color:var(--ink);font-weight:600}

/* ---------- bai viet ---------- */
.article{max-width:680px}
.article h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:44px 0 12px}
.article p,.article li{font-family:var(--serif);font-size:18px;line-height:1.74}
.article ul{padding-left:22px}

/* ---------- dieu huong cuoi trang ---------- */
.pager{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:52px 0 0;
  padding:26px 0 0;border-top:1px solid var(--line);font-size:15px}
.pager a{text-decoration:none}
.pager a:hover{text-decoration:underline}
.pager .dir{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}

footer{margin-top:64px;border-top:1px solid var(--line)}
footer .wrap{padding:30px 24px 70px;display:flex;justify-content:space-between;gap:20px;
  flex-wrap:wrap;font-size:14px;color:var(--ink-3)}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* ---------- phan hoi ---------- */
@media (max-width:820px){
  .grid-2{grid-template-columns:1fr;gap:44px;padding-top:36px}
  .colhead{display:none}
  .frow{grid-template-columns:1fr;gap:10px;padding:20px 0}
  .cell{padding-left:13px;border-left:1px dashed var(--rule)}
  .cell::before{content:attr(data-col);display:block;width:100%;font-family:var(--mono);
    font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
}
@media (max-width:720px){
  .head{padding-top:32px}
  .hero{padding:38px 0 46px}
  .entry{padding-left:22px}
  .compare{grid-template-columns:1fr}
  .strip{flex-direction:column}
  .rows .row{grid-template-columns:1fr;gap:8px;padding:16px 0}
  .nums{text-align:left}
  .buy{padding:22px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- tuyen bai viet ---------- */
.serie{margin:0;padding:0;list-style:none;counter-reset:s}
.serie li{counter-increment:s;border-bottom:1px solid var(--rule)}
.serie a{display:grid;grid-template-columns:34px 1fr;gap:0 14px;padding:15px 0;text-decoration:none;align-items:baseline}
.serie a::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.serie a:hover b{text-decoration:underline}
.serie b{font-size:15.5px;font-weight:500;letter-spacing:-.01em}
.serie span{grid-column:2;display:block;font-size:14px;color:var(--ink-2);margin-top:3px;max-width:620px}
@media (max-width:600px){.serie a{grid-template-columns:26px 1fr;gap:0 10px}}

/* ---------- trang chu moi ---------- */
.hero .thesis{font-family:var(--serif);font-size:clamp(38px,7vw,68px);line-height:1.06;
  letter-spacing:-.03em;font-weight:400;margin:0}
.hero .thesis-sub{font-size:17px;line-height:1.62;color:var(--on-glass-2);max-width:520px;margin:22px 0 0}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 0}
.hero-cta .cta{display:inline-block;text-decoration:none;font-size:15px;font-weight:600;
  padding:13px 24px;border-radius:8px;background:var(--act-look);color:var(--act-look-ink)}
.hero-cta .cta.ghost{background:transparent;color:#9FE1CB;border:1px solid var(--glass-line);font-weight:500}
.hero-cta .cta:hover{filter:brightness(1.08)}
.hero-cta .cta.ghost:hover{background:#16302A;filter:none}

.parts{margin:0;padding:0;list-style:none;counter-reset:p}
.parts li{counter-increment:p;border-bottom:1px solid var(--rule)}
.parts a,.parts .dead{display:grid;grid-template-columns:34px 1fr auto;gap:0 14px;padding:16px 0;
  text-decoration:none;align-items:baseline}
.parts a::before,.parts .dead::before{content:counter(p,decimal-leading-zero);
  font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.parts b{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.parts>li>a>span,.parts>li>.dead>span{grid-column:2;display:block;font-size:14px;
  color:var(--ink-2);margin-top:4px;max-width:600px}
.parts em{font-style:normal;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap}
.parts a:hover b{text-decoration:underline}
.parts li.off{opacity:.5}
.parts .dead{cursor:default}
@media (max-width:600px){
  .parts a,.parts .dead{grid-template-columns:26px 1fr;gap:0 10px}
  .parts em{grid-column:2;margin-top:4px}
}

/* ---------- bang canh bao vi du ---------- */
.warn{border:1px solid #C9A227;border-left-width:4px;border-radius:8px;
  background:#F6F1E2;padding:20px 22px;margin:26px 0 0;max-width:720px}
.warn .warn-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#8A6D14;margin:0 0 8px}
.warn p{font-size:15.5px;line-height:1.66;color:var(--ink);margin:0}

/* ---------- nguon hang ---------- */
.src-badge{display:inline-block;margin-left:12px;padding:3px 10px;border-radius:12px;
  font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none;
  border:1px solid currentColor}
.src-nhap_khau{color:#5C4A6B}
.src-tu_san_xuat{color:#4E8A3C}
.src-claim{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:30px 0 0}
.src-claim>div{background:var(--paper);padding:22px 24px}
.src-claim>div.lim{background:var(--paper-2)}
.src-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 10px}
.src-claim p{font-family:var(--serif);font-size:16px;line-height:1.68;color:var(--ink-2);margin:0}
.src-claim>div.lim p{color:var(--ink)}
@media (max-width:760px){.src-claim{grid-template-columns:1fr}}

/* ---------- dai bay hoi thu nho ---------- */
.mini-vol{margin:0;padding:20px 20px 16px;background:var(--glass);border-radius:10px;color:var(--on-glass)}
.mini-vol figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-glass-3);margin:0 0 18px}
.mv-plot{position:relative}
.mv-axis{position:absolute;left:0;right:0;top:16px;height:1px;background:var(--glass-line)}
.mv-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  display:block;transition:transform .15s ease,box-shadow .15s ease}
.mv-dot.lead{width:18px;height:18px;margin:-9px 0 0 -9px;box-shadow:0 0 0 2px var(--glass)}
.mv-dot span{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:10px;color:var(--on-glass);opacity:0;pointer-events:none;
  transition:opacity .12s ease;background:#0A1815;padding:3px 7px;border-radius:4px;
  border:1px solid var(--glass-line)}
.mv-dot:hover,.mv-dot:focus-visible{transform:scale(1.3);box-shadow:0 0 0 4px rgba(255,255,255,.18);z-index:5}
.mv-dot:hover span,.mv-dot:focus-visible span{opacity:1}
.mv-scale{display:flex;justify-content:space-between;margin:10px 0 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:#5E7A72}
.mv-scale span{display:flex;flex-direction:column;gap:2px}
.mv-scale span:nth-child(2){align-items:center}
.mv-scale span:last-child{align-items:flex-end;text-align:right}
.mv-scale em{font-style:normal;text-transform:uppercase;letter-spacing:.12em;color:var(--on-glass-3)}
.mv-note{font-size:12.5px;line-height:1.55;color:var(--on-glass-3);margin:16px 0 0}
.mv-split{position:absolute;top:6px;bottom:0;width:0;border-left:1px dashed #3A5A52}
.mv-zone{position:absolute;top:-14px;left:0;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#4E6B63;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mv-dot.light{border:1px solid rgba(255,255,255,.35)}
.mini-vol.wide{padding:26px 30px 20px}
.mini-vol.wide .mv-note{font-size:13.5px;max-width:640px}

/* ---------- muc tu dien: hai cot tren man hinh rong ---------- */
@media (min-width:1120px){
  .entry-wrap{display:grid;grid-template-columns:minmax(0,660px) 300px;gap:0 56px;align-items:start}
  .entry{max-width:none}
  .entry-rail{position:sticky;top:24px;padding-top:52px}
  .entry-rail>*+*{margin-top:26px}
  .entry-rail .sec{margin-bottom:12px}
  .entry-rail .strip{flex-direction:column;gap:4px}
  .entry-rail .seg{padding:9px 12px;font-size:12.5px}
  .entry-rail .seg b{font-size:13px}
}
@media (max-width:1119px){
  .entry-rail{max-width:720px;margin:34px 0 0;padding-left:34px}
  .entry-rail>*+*{margin-top:30px}
}
@media (max-width:700px){.entry-rail{padding-left:22px}}

/* ---------- trang ho mui ---------- */
.ho-head{border-left:4px solid var(--ho);padding:52px 0 0 30px}
.ho-head h1{font-size:clamp(32px,5vw,46px)}
.ho-head .lede{color:var(--ink-2);margin-top:16px}
.ho-head .ho-count{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:18px 0 0}
.ho-vol{margin:34px 0 0;max-width:840px}
.ho-list .serie li{border-bottom:1px solid var(--rule)}
.ho-list .serie a{padding:14px 0}
.ho-list .serie a::before{content:none}
.ho-list .serie span{grid-column:1}

/* ---------- bang thu vien cau tu: ba cot, cot giua can phai ---------- */
.ct-list td{vertical-align:top;padding-top:13px;padding-bottom:13px}
.ct-list td.r{padding-right:22px!important;white-space:nowrap}
.ct-list td:first-child{padding-right:16px}
.ct-list td:last-child{line-height:1.6}
@media (max-width:720px){
  .ct-list td{display:block;border-bottom:0;padding:0}
  .ct-list tr{display:block;border-bottom:1px solid var(--rule);padding:14px 0}
  .ct-list td.r{text-align:left;padding:4px 0 0!important}
  .ct-list td:last-child{padding-top:5px}
}


/* ==========================================================================
   SỐ KHÔNG GẠCH CHÉO
   Công thức phân tử C10H18O kết thúc bằng chữ O hoa, nhưng trong phông mono
   nó trông hệt số 0 — người đọc thấy "C10H180" và tưởng dữ liệu sai.
   Cùng vấn đề với số CAS, mã lô, và mọi chuỗi trộn chữ với số.
   Kiểu chữ dạng số slashed-zero vẽ số 0 có gạch chéo, chữ O thì không.
   Đây là quy ước chuẩn trong tài liệu kỹ thuật và bảng dữ liệu.
   ========================================================================== */
.mono, code, pre, kbd, samp,
.facts dd, .volstrip .ends, table.data .mono, .dong-nghia span {
  font-variant-numeric: slashed-zero;
  font-feature-settings: "zero" 1;
}

.facts dd.ct sub{font-size:.72em;line-height:0;vertical-align:baseline;position:relative;bottom:-.28em}

/* Chat nam ngoai dai 150-290: kim ghim o mep, nen phai noi ro vi sao.
   Vien dut o dau tuong ung cho biet truc khong vuon toi cho do. */
.volstrip.ngoai-thang .pin{background:var(--ink-3)}
.volstrip.ngoai-thang.trai .track{border-left:2px dashed var(--ink-3)}
.volstrip.ngoai-thang.phai .track{border-right:2px dashed var(--ink-3)}
/* ═══ MAY DOC CONG THUC ═══ */
.mdc-them{position:relative;max-width:520px;margin-top:20px}
.mdc-them label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.mdc-them input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:3px;
  font:inherit;font-size:14px;background:#fff;color:var(--ink)}
.mdc-them input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.mdc-goi{position:absolute;left:0;right:0;top:calc(100% + 4px);bottom:auto;z-index:20;
  background:#fff;border:1px solid var(--line);border-radius:3px;
  box-shadow:0 6px 20px rgba(28,35,33,.10);max-height:320px;overflow-y:auto}
.mdc-goi-mot{display:block;width:100%;text-align:left;padding:9px 12px;border:0;
  background:none;font:inherit;cursor:pointer;border-bottom:1px solid var(--line)}
.mdc-goi-mot:last-child{border-bottom:0}
.mdc-goi-mot:hover,.mdc-goi-mot:focus{background:var(--paper);outline:none}
.mdc-goi-mot .ten{display:block;color:var(--ink);font-size:14px}
.mdc-goi-mui{display:block;font-size:12px;font-style:italic;color:var(--ink-2);
  margin:3px 0 2px;line-height:1.4}
.mdc-goi-mot .meta{display:block;font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px}

.mdc-xoa{border:0;background:none;cursor:pointer;font-size:17px;line-height:1;
  color:var(--ink-3);padding:2px 6px;border-radius:2px}
.mdc-xoa:hover{color:var(--warn);background:rgba(176,64,46,.08)}

.mdc-luu{margin-top:20px;max-width:600px}
.mdc-luu button{padding:8px 15px;border:1px solid var(--line);border-radius:3px;
  background:#fff;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer}
.mdc-luu button:hover{border-color:var(--ink-3)}
.mdc-chep-bao{margin-left:10px;font-family:var(--mono);font-size:12px;color:var(--focus)}
.mdc-luu .mdc-nho{margin-top:8px}

.mdc-canhbao{max-width:700px;padding:16px 18px;border:1px solid var(--line);
  border-left:3px solid var(--vol-warm);background:rgba(107,58,70,.04);border-radius:3px;
  font-size:14px;line-height:1.65;color:var(--ink-2)}
.mdc-canhbao b{color:var(--ink)}

.mdc-kho{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:18px}
.mdc-the{text-align:left;padding:15px 16px;border:1px solid var(--line);border-radius:4px;
  background:#fff;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.mdc-the:hover{border-color:var(--ink-3)}
.mdc-the.chon{border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.mdc-the.baitap{background:rgba(47,127,121,.04)}
.mdc-the .ten{display:block;font-weight:600;color:var(--ink);margin-bottom:5px}
.mdc-the .nhan{display:inline-block;margin-bottom:5px;padding:1px 7px;border-radius:2px;
  background:var(--focus);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.08em}
.mdc-the .tt{display:block;font-size:13px;line-height:1.55;color:var(--ink-2)}

.mdc-bang-wrap{overflow-x:auto;margin-top:18px}
/* Cot dinh lien nhau: "TỈ LỆ" va "CHỈNH" cham nhau thanh "TỈ LỆCHỈNH",
   "GIÁ TRỊ MÙI" cham "ĐÓNG GÓP". Dat be rong ro rang cho tung cot. */
/* Be rong toi thieu ha tu 820 xuong 660: cot chai chiem 190px + 26px khe,
   nen 820 lam bang tran ngang va cot cuoi bi cat. */
.mdc-bang{min-width:660px;table-layout:fixed}
.mdc-bang th,.mdc-bang td{padding-right:18px;vertical-align:middle}
table.data.mdc-bang th.r,table.data.mdc-bang td.r{padding-right:18px}
.mdc-bang th:nth-child(1),.mdc-bang td:nth-child(1){width:30px;padding-right:6px}
.mdc-bang th:nth-child(2),.mdc-bang td:nth-child(2){width:26%}
.mdc-bang th:nth-child(3),.mdc-bang td:nth-child(3){width:21%}
.mdc-bang th:nth-child(4),.mdc-bang td:nth-child(4){width:12%}
.mdc-bang th:nth-child(5),.mdc-bang td:nth-child(5){width:auto}
.mdc-bang th:last-child,.mdc-bang td:last-child{width:30px;padding-right:0}
.mdc-ml{display:block;margin-top:5px;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-3);white-space:nowrap}
.mdc-ng-so{display:block;font-family:var(--mono);font-size:14px;color:var(--ink)}
.mdc-ng-dv{display:block;font-size:10.5px;color:var(--ink-3);margin-top:1px}
.mdc-ng-thieu{font-size:12px;color:var(--ink-3);font-style:italic}
/* Canh bao khoang do rong — con so nguong quyet dinh bang xep hang,
   nen do tin cay cua no phai hien ngay canh no. */
.mdc-ng-rong{display:block;margin-top:4px;padding:1px 6px;border-radius:9px;
  background:rgba(176,64,46,.09);color:var(--warn);
  font-family:var(--mono);font-size:9.5px;line-height:1.5;white-space:nowrap}

/* Thu hang — cho hang co thu bac thay vi phang deu nhau */
.mdc-bang .c-hang{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:center}
.mdc-bang .c-hang.nhat{color:var(--focus);font-weight:600}
.mdc-bang tr{transition:background .15s}
.mdc-bang tbody tr:hover{background:var(--paper-2)}
/* KHONG lam mo ca hang nua.
   Lam mo nghia la "kem quan trong". Nhung o cong thuc sa chanh, hai chat bi
   lam mo — geranial 45 % va neral 30 % — lai la HAI CHAT LON NHAT, chiem ba
   phan tu the tich chai. Lam mo chung la noi nguoc voi su that.

   Nguoi dung phai hoi "các chất mờ là gì" — tuc giao dien da khong noi duoc.

   Nay chi lam nhat DUNG O suc mui, la o that su khong do duoc; ten, ti le,
   so giot va mo ta mui giu nguyen do dam. */
.mdc-bang tr.mdc-mo td{opacity:1}
.mdc-bang tr.mdc-mo td:nth-child(4),
.mdc-bang tr.mdc-mo td:nth-child(5){opacity:.6}
.mdc-bang tr.mdc-mo .c-hang{color:var(--ink-3)}

.mdc-bang td a{font-weight:500;text-decoration:none;border-bottom:1px solid var(--line)}
.mdc-bang td a:hover{border-color:var(--ink)}
.mdc-bang .mdc-bp{display:block;font-family:var(--mono);font-size:10.5px;color:var(--ink-3);margin-top:3px}
/* Mo ta mui duoi ten chat — de nguoi doc biet con so nay noi ve MUI gi. */
.mdc-mui{display:block;font-size:12px;line-height:1.45;color:var(--ink-2);margin-top:5px;
  font-style:italic}
.mdc-mui-nho{font-style:italic;color:var(--ink-2)}
.mdc-slider{width:100%;accent-color:var(--focus);display:block}
/* O nhap so ben canh thanh truot: keo de uoc luong, go de dat chinh xac. */
.mdc-onhap{display:block;width:88px;margin-top:7px;padding:4px 8px;
  border:1px solid var(--line);border-radius:3px;background:#fff;
  font-family:var(--mono);font-size:13px;color:var(--ink);text-align:right}
.mdc-onhap:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}

/* HAI THANH: mo la khoi luong, dam la suc mui.
   Dat chong nhau theo chieu doc de mat so sanh duoc ngay trong mot hang —
   day la ca bai hoc, va bang cu giau no sau mot con so tuyet doi. */
.mdc-cap{display:block;min-width:150px}
.mdc-h{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.mdc-h i{display:block;height:11px;border-radius:2px;min-width:2px;
  transition:width .45s cubic-bezier(.22,.61,.36,1)}
.mdc-h b{font-family:var(--mono);font-size:11px;font-weight:400;white-space:nowrap}
.mdc-h.mo i{background:var(--ink-3);opacity:.38}
.mdc-h.mo b{color:var(--ink-3)}
.mdc-h.dam i{background:linear-gradient(90deg,var(--vol-cool),var(--vol-mid))}
.mdc-h.dam b{color:var(--ink);font-weight:600}

/* [hidden] cua trinh duyet la display:none voi do uu tien THAP HON quy tac
   lop nay, nen huy hieu an roi VAN HIEN. Anh chup nguoi dung cho thay
   Limonene deo "↓ 3 lần" trong khi khoi luong 3,49 % va suc mui 3,40 % —
   ti le 1,03, dang le khong co huy hieu nao. Con so den tu lan ve truoc. */
.mdc-lech[hidden]{display:none}
.mdc-lech{display:inline-block;margin-top:2px;padding:1px 8px;border-radius:10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.03em}
.mdc-lech.len{background:rgba(47,127,121,.13);color:var(--focus)}
.mdc-lech.xuong{background:rgba(107,58,70,.10);color:var(--vol-warm)}

.mdc-khong{font-family:var(--mono);font-size:11px;color:var(--ink-2);line-height:1.5;
  display:block}
.mdc-khong .vi{color:var(--ink-3);font-size:10.5px}
.mdc-chuthich[hidden]{display:none}
.mdc-chuthich{max-width:700px;margin:16px 0 0;padding:11px 14px;border-left:3px solid var(--line);
  background:var(--paper-2);border-radius:0 3px 3px 0;font-size:13.5px;line-height:1.65;
  color:var(--ink-2)}
.mdc-chuthich b{color:var(--ink)}
.mdc-chuthich a{color:var(--focus)}
.data td.canh{color:var(--warn);font-weight:600}

@media (max-width:820px){
  .mdc-cap{min-width:110px}
  .mdc-h b{font-size:10px}
}

.mdc-tong{max-width:680px;margin-top:18px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.mdc-tong b{color:var(--ink)}
.mdc-tong p{margin:0 0 10px}

.mdc-truc{margin-top:14px;max-width:760px}

/* ═══ CẢNH MÙI MỞ RA THEO THỜI GIAN ═══
   Nen toi vi hai ly do: mot, cac vet mau phat sang tren nen toi giong cach
   mui hien ra tren nen khong co gi hon la tren giay trang; hai, no dung
   ngon ngu da co o dai bay hoi trang ho mui. */
/* ═══ DANH SACH HO HOA HOC ═══ */
.hh-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-top:8px}
.hh-mot{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:6px;background:#fff;
  color:inherit;text-decoration:none;transition:border-color .18s,box-shadow .18s}
.hh-mot:hover{border-color:var(--ink-3);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.hh-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.hh-dau b{font-size:17px;font-weight:500;color:var(--ink)}
.hh-dau .en{margin:0;flex:1}
.hh-n{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.hh-ben{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0 0 8px}
.hh-vd{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:0;line-height:1.5}

/* ═══ SVG CHAI SINH LUC DUNG (bd_chai_svg) ═══
   Toi tung xoa khoi nay khi thay poster bang hai chai — ma bd_chai_svg
   van dung. Co chai den dac, nhan khong vien. Bat duoc tu anh chup ro.
   Gio kiem-css.php quet ca lop trong SVG. */
.bd-tinh{display:block;width:100%;height:auto}
.bd-vien{fill:none;stroke:var(--ink-3);stroke-width:1.2}
.bd-muc{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 3}
.bd-muc-lb{fill:var(--ink-3);font-family:var(--mono);font-size:11px}
.bd-nen{fill:var(--ink-3);font-family:var(--mono);font-size:11px}
.bd-lop{fill:#fff;font-size:12px;font-weight:500;paint-order:stroke;stroke:rgba(0,0,0,.4);stroke-width:3px;stroke-linejoin:round}
.bd-lop-so{fill:rgba(255,255,255,.88);font-family:var(--mono);font-size:10px;paint-order:stroke;stroke:rgba(0,0,0,.4);stroke-width:3px;stroke-linejoin:round}

/* ═══ TRANG SAN PHAM BAN LE ═══ */
.sp{padding-top:36px}
.sp-tren{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:44px;align-items:start;
  padding-bottom:40px;border-bottom:1px solid var(--line)}
.sp-chai{background:#fff;border:1px solid var(--line);border-radius:8px;padding:24px;
  display:flex;justify-content:center}
.sp-chai svg{width:100%;max-width:220px;height:auto}
.sp-mua h1{font-size:clamp(30px,4.4vw,42px);margin:6px 0 8px}
.sp-khoa-hoc{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 18px}
.sp-ky-uc{font-family:var(--serif);font-size:20px;line-height:1.5;color:var(--ink);margin:0 0 26px;max-width:520px}
.sp-gia{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.sp-ml{font-family:var(--mono);font-size:13px;color:var(--ink-3);padding:4px 10px;border:1px solid var(--line);border-radius:999px}
.sp-gia b{font-size:30px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.sp-gia i{font-size:13px;color:var(--ink-3);font-style:normal}
.sp-gia-lh{font-size:20px!important;color:var(--ink-2)!important}
.sp-nut{margin:0 0 22px}
.sp-het{font-size:15px;color:var(--vol-warm);margin:0 0 22px}
.sp-lo{font-size:13.5px;color:var(--ink-3);margin:0}
.sp-lo a{color:var(--ink-2)}

.sp-than{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:40px 0 64px}
.sp-cot h2.sec{margin-top:0}
.sp-cot h3{font-size:16px;font-weight:500;margin:26px 0 8px}
.sp-cot p{font-size:15.5px;line-height:1.7;color:var(--ink-2)}
.sp-ct{list-style:none;padding:0;margin:14px 0 18px;counter-reset:ct}
.sp-ct li{display:grid;grid-template-columns:22px auto 1fr;gap:6px 12px;align-items:baseline;
  padding:10px 0;border-bottom:1px solid var(--line);counter-increment:ct}
.sp-ct li::before{content:counter(ct);font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.sp-ct li a{font-weight:500;color:var(--ink);text-decoration:none}
.sp-ct li a:hover{text-decoration:underline}
.sp-ct-pt{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}
.sp-ct li i{grid-column:2/4;font-size:13px;color:var(--ink-3);font-style:italic}
.sp-an-toan{margin-top:16px;padding:12px 14px;border-left:3px solid var(--warn);
  background:rgba(176,64,46,.05);border-radius:0 4px 4px 0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.sp-an-toan b{color:var(--ink)}
@media (max-width:760px){
  .sp-tren{grid-template-columns:1fr;gap:24px}
  .sp-chai svg{max-width:180px}
  .sp-than{grid-template-columns:1fr;gap:32px}
  .sp-ky-uc{font-size:18px}
}

/* ═══ TAGLINE DUOI LOGO ═══ */
.brand{display:inline-flex;flex-direction:column;line-height:1.15}
/* Bieu tuong + ten tren mot hang; khau hieu o hang duoi, thut vao thang voi chu
   chu khong thang voi bieu tuong — de ten va khau hieu doc nhu mot khoi. */
.brand-hang{display:inline-flex;align-items:center;gap:9px}
.brand-dau{flex:none;display:block}
/* Khau hieu: 11 px nghieng co chan o do mo .6 la qua nho va qua nhat de doc. Len
   12 px, do mo .72. Van la dong phu, nhung la dong phu doc duoc. */
.brand-tag{font-family:var(--serif);font-size:12px;font-style:italic;font-weight:400;
  letter-spacing:.015em;opacity:.72;margin-top:2px;padding-left:42px}
@media (max-width:600px){.brand-tag{display:none}}

/* ═══ TRANG GIOI THIEU ═══ */
.gt-hero{background:var(--glass);padding:72px 0 64px}
.gt-tag{font-family:var(--serif);font-size:clamp(26px,4vw,40px);font-style:italic;color:#fff;
  margin:0;line-height:1.2}
.gt-than{max-width:640px;margin:56px auto 80px;padding:0 24px}
.gt-than p{font-family:var(--serif);font-size:18px;line-height:1.8;color:var(--ink-2);margin:0 0 22px}
.gt-than p i{color:var(--ink)}
.gt-than p b{color:var(--ink);font-weight:500}
.gt-than p a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px}
.gt-than p a:hover{text-decoration-color:var(--ink)}
.gt-than h2{font-family:var(--serif);font-size:24px;font-weight:400;color:var(--ink);
  margin:56px 0 20px;line-height:1.3}
.gt-mo{font-size:26px!important;line-height:1.45!important;color:var(--ink)!important;
  margin-bottom:32px!important}
.gt-nhan{font-size:20px!important;color:var(--ink)!important;margin:28px 0 8px!important}
.gt-ket{font-size:22px!important;line-height:1.5!important;color:var(--ink)!important;
  margin-top:48px!important}
.gt-tag-cuoi{font-style:italic;font-size:15px!important;color:var(--ink-3)!important;
  margin-top:40px!important;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:600px){
  .gt-hero{padding:52px 0 44px}
  .gt-than{margin-top:40px}
  .gt-than p{font-size:17px}
  .gt-mo{font-size:22px!important}
}

/* ═══ THUAT NGU SONG NGU ═══ */
.tn-nhay{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 36px}
.tn-nhay a{padding:6px 13px;border:1px solid var(--line);border-radius:999px;font-size:13px;
  color:var(--ink-2);text-decoration:none;background:#fff;transition:border-color .18s}
.tn-nhay a:hover{border-color:var(--ink-3);color:var(--ink)}
.tn-nhay span{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-left:4px}
.tn-nhom{margin-bottom:40px;scroll-margin-top:80px}
.tn-ds{margin:0;max-width:760px}
.tn-mot{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:6px 28px;padding:16px 0;
  border-bottom:1px solid var(--line);scroll-margin-top:80px}
.tn-mot:last-child{border-bottom:0}
.tn-mot dt{margin:0}
.tn-mot dt b{display:block;font-size:16px;font-weight:500;color:var(--ink)}
.tn-en{display:block;font-family:var(--mono);font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.5}
.tn-en i{font-style:normal;color:var(--focus)}
.tn-mot dd{margin:0}
.tn-mot dd p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:0 0 8px}
.tn-mot dd p:last-child{margin-bottom:0}
.tn-vi-sao{font-size:13px!important;color:var(--ink-3)!important;padding-left:12px;border-left:2px solid var(--line)}
@media (max-width:600px){
  .tn-mot{grid-template-columns:1fr;gap:6px}
}

/* ═══ HAI CHAI — trai nghiem mo dau ═══
   Khong giai thich; cho doan, roi lat. Vet mui lan ra bang CSS transition
   khi chai duoc .mo. */
.hc{background:var(--glass);padding:56px 0 64px;color:#fff}
.hc-nhan{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin:0 0 12px}
.hc-hoi{font-family:var(--serif);font-size:clamp(30px,4.4vw,44px);font-weight:400;line-height:1.15;
  margin:0 0 10px;color:#fff}
.hc-dan{font-size:15.5px;color:rgba(255,255,255,.65);margin:0 0 32px}
.hc-hai{display:grid;grid-template-columns:repeat(2,minmax(0,280px));gap:32px;justify-content:start}
.hc-chai{position:relative;display:block;padding:20px 16px 18px;border:1px solid rgba(255,255,255,.14);
  border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;text-align:center;color:#fff;
  font:inherit;transition:border-color .25s,background .25s,transform .25s}
.hc-chai:hover:not(:disabled){border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);transform:translateY(-3px)}
.hc-chai:disabled{cursor:default}
.hc-chai.chon{border-color:rgba(255,255,255,.55)}
.hc-svg{display:block;width:100%;max-width:200px;height:auto;margin:0 auto 14px;overflow:visible}
.hc-vien{fill:none;stroke:rgba(255,255,255,.4);stroke-width:1.4}
.hc-nap{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.hc-chai.mo .hc-nap{transform:translate(0,-26px) rotate(-12deg);transform-origin:70px 44px}
.hc-vet{opacity:0;transition:r 1.4s cubic-bezier(.22,.61,.36,1),opacity 1.2s ease}
.hc-chai.mo .hc-vet{r:115px;opacity:.55}
.hc-lop{fill:#fff;font-size:14px;font-weight:500;paint-order:stroke;stroke:rgba(0,0,0,.4);stroke-width:3px;stroke-linejoin:round}
.hc-lop-mo{fill:rgba(255,255,255,.3);stroke:none;font-style:italic;font-weight:400}
.hc-lop-so{fill:rgba(255,255,255,.85);font-family:var(--mono);font-size:12px;paint-order:stroke;stroke:rgba(0,0,0,.4);stroke-width:3px;stroke-linejoin:round}
.hc-ten{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hc-mo{display:block;font-size:14px;color:rgba(255,255,255,.8);margin-top:5px;line-height:1.45}

.hc-kq{max-width:720px;margin-top:40px;opacity:0;transform:translateY(12px);
  transition:opacity .7s ease,transform .7s ease}
.hc-kq.hien{opacity:1;transform:none}
.hc-kq[hidden]{display:none}
.hc-kq-dau{font-family:var(--serif);font-size:19px;line-height:1.55;color:rgba(255,255,255,.8);margin:0 0 20px}
.hc-kq-dau b{color:#fff;font-weight:500}
.hc-so{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin:0 0 22px}
.hc-so>div{padding:16px 18px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.04)}
.hc-so span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.hc-so b{display:block;font-size:30px;font-weight:500;color:#fff;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.hc-so i{display:block;font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);font-style:normal}
.hc-vs{font-family:var(--serif);font-size:38px;color:rgba(255,255,255,.4);padding:0 4px}
.hc-kq-giai,.hc-kq-baldini{font-family:var(--serif);font-size:17px;line-height:1.7;color:rgba(255,255,255,.72);margin:0 0 16px}
.hc-kq-giai b,.hc-kq-baldini b{color:#fff;font-weight:500}
.hc .cta{background:#fff;color:var(--glass);border-color:#fff}
.hc .cta.ghost{background:transparent;color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.35)}
@media (max-width:640px){
  .hc-hai{grid-template-columns:1fr 1fr;gap:14px}
  .hc-chai{padding:14px 10px 12px}
  .hc-svg{max-width:140px}
  /* SVG thu tu 220 xuong 140px → chu thu 0,64 lan. 14px thanh 8,9px.
     Tang len de sau khi thu con ~13px. */
  .hc-lop{font-size:20px}.hc-lop-so{font-size:17px}
  .hc-mo{font-size:12.5px}
  .hc-so{grid-template-columns:1fr;gap:10px}
  .hc-vs{transform:rotate(90deg);text-align:center}
  .hc-so b{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .hc-nap,.hc-vet,.hc-kq,.hc-chai{transition:none}
}

/* ═══ BANG 4 COT TREN MOBILE: xep doc thanh the ═══
   .mbp-bang (may doc ban) va .mpl-bang (bac thang pha loang) deu 4 cot,
   tran o 390px. Dung cung cach voi .mdc-bang: moi hang thanh mot the,
   nhan cot hien truoc tung o. */
@media (max-width:640px){
  .mbp-bang,.mpl-bang,.mbp-bang tbody,.mpl-bang tbody,.mbp-bang tr,.mpl-bang tr{display:block}
  .mbp-bang thead,.mpl-bang thead{display:none}
  .mbp-bang tr,.mpl-bang tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .mbp-bang td,.mpl-bang td{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
    border:0;text-align:left!important}
  .mbp-bang td::before,.mpl-bang td::before{content:attr(data-nhan);font-family:var(--mono);
    font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);flex:0 0 auto}
  .mbp-bang td.r,.mpl-bang td.r{padding-right:0!important}
  .mpl-dich td{background:transparent}
  .mpl-dich{background:var(--paper-2);border-radius:5px;padding:12px 10px}
}

/* ═══ MAY PHA LOANG ═══ */
.mpl-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px 22px;
  max-width:720px;margin-top:16px}
.mpl-luoi label{display:block}
.mpl-luoi label>span:first-child{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.mpl-o{display:flex;align-items:center;gap:8px}
.mpl-o input{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--line);border-radius:4px;
  background:#fff;font-family:var(--mono);font-size:14px;color:var(--ink);text-align:right}
.mpl-o input:focus,.mpl-luoi select:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.mpl-o b{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:400;flex:0 0 auto}
.mpl-luoi select{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:4px;
  background:#fff;font:inherit;font-size:13.5px;color:var(--ink)}

.mpl-kq{margin-top:24px;max-width:720px}
.mpl-the{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:14px}
.mpl-dong{padding:14px 16px;border:1px solid var(--line);border-radius:5px;background:#fff}
.mpl-dong span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.mpl-dong b{display:block;font-size:22px;font-weight:500;color:var(--ink);margin:4px 0 2px;
  font-variant-numeric:tabular-nums}
.mpl-dong i{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);font-style:normal}
.mpl-dong.tong{background:var(--paper-2)}
.mpl-goc{padding:11px 14px;border-left:3px solid var(--warn);background:rgba(176,64,46,.06);
  border-radius:0 3px 3px 0}
.mpl-bang{min-width:0;max-width:720px}
table.data.mpl-bang th.r,table.data.mpl-bang td.r{padding-right:24px}
.mpl-dich td{background:var(--paper-2);font-weight:500}

/* ═══ MAY DOC BAN PHAN TICH ═══ */
#mbp-nhap{width:100%;max-width:640px;padding:12px 14px;border:1px solid var(--line);
  border-radius:5px;background:#fff;font-family:var(--mono);font-size:13px;line-height:1.6;
  color:var(--ink);resize:vertical;tab-size:4}
#mbp-nhap:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
#mbp-nhap::placeholder{color:var(--ink-3);opacity:.7}
.mbp-nut{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.mbp-nut button{padding:9px 20px;border:1px solid var(--glass);border-radius:999px;
  background:var(--glass);font:inherit;font-size:13.5px;color:var(--on-glass);cursor:pointer;
  transition:opacity .18s}
.mbp-nut button:hover{opacity:.88}
.mbp-nut button.ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.mbp-nut button.ghost:hover{border-color:var(--ink-3);opacity:1}
.mbp-bang{min-width:0}
/* table.data td.r{padding-right:0} la (0,2,2). Quy tac cu .mbp-bang
   td:nth-child(3) chi (0,2,1) → thua, cot % dinh sat cot Tinh trang.
   Lan thu ba viet quy tac yeu hon quy tac can ghi de. Dung dung mau
   nhu .mdc-bang da lam o dong 576. */
table.data.mbp-bang th.r,table.data.mbp-bang td.r{padding-right:24px;width:64px}
.mbp-mo-hang td{color:var(--ink-3)}
.mbp-tt{display:inline-block;padding:1px 9px;border-radius:10px;font-family:var(--mono);
  font-size:11px;white-space:nowrap}
.mbp-tt.co{background:rgba(47,127,121,.13);color:var(--focus)}
.mbp-tt.khong{background:rgba(90,90,90,.10);color:var(--ink-3)}
.mbp-mo{margin-top:22px}
#mbp-kq[hidden],#mbp-khong[hidden]{display:none}

/* ═══ SO GHI CAC LAN THU ═══
   Luu o trinh duyet nguoi dung. Trang van khong luu gi tren may chu. */
.mdc-so{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);max-width:720px}
.mdc-so-luu{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.mdc-so-luu input{flex:1;min-width:200px;padding:8px 12px;border:1px solid var(--line);
  border-radius:4px;background:#fff;font:inherit;font-size:13.5px;color:var(--ink)}
.mdc-so-luu input:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 1px var(--focus)}
.mdc-so-luu button{padding:8px 18px;border:1px solid var(--line);border-radius:4px;
  background:#fff;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;
  transition:border-color .18s,background .18s}
.mdc-so-luu button:hover:not(:disabled){border-color:var(--ink-3);background:var(--paper-2)}
.mdc-so-luu button:disabled{opacity:.45;cursor:default}

.mdc-so-ds{margin-bottom:10px}
.mdc-so-mot{display:grid;grid-template-columns:1fr auto 28px;align-items:center;gap:11px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.mdc-so-mot:last-child{border-bottom:0}
.mdc-so-mot .mo{text-align:left;border:0;background:none;font:inherit;font-size:14px;
  color:var(--ink);cursor:pointer;padding:0;text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:3px}
.mdc-so-mot .mo:hover{text-decoration-color:var(--ink)}
.mdc-so-mot .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap}
.mdc-so-mot .xoa{border:0;background:none;font-size:17px;line-height:1;color:var(--ink-3);
  cursor:pointer;padding:2px 6px}
.mdc-so-mot .xoa:hover{color:var(--vol-warm)}

@media (max-width:600px){
  .mdc-so-luu button{width:100%}
  .mdc-so-mot{grid-template-columns:1fr 28px;row-gap:2px}
  .mdc-so-mot .meta{grid-column:1}
}

/* ═══ SO SANH HAI PHIEN BAN ═══
   Thao tac cot loi cua nghe: thu bien the roi dat canh nhau ma xem. */
.mdc-ab{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.mdc-ab-giu{padding:8px 18px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;
  transition:border-color .18s,background .18s}
.mdc-ab-giu:hover{border-color:var(--ink-3);background:var(--paper-2)}
.mdc-ab-noi{font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.mdc-ab-noi b{color:var(--ink)}

.mdc-ab-bang[hidden]{display:none}
.mdc-ab-bang{margin-top:14px;max-width:720px}
.mdc-ab-t{width:100%}
.mdc-ab-t td,.mdc-ab-t th{padding:7px 12px 7px 0}
.mdc-ab-d{display:inline-block;padding:1px 9px;border-radius:10px;
  font-family:var(--mono);font-size:11px;white-space:nowrap}
.mdc-ab-d.len{background:rgba(47,127,121,.13);color:var(--focus)}
.mdc-ab-d.xuong{background:rgba(107,58,70,.10);color:var(--vol-warm)}
.mdc-ab-d.them{background:rgba(47,127,121,.18);color:var(--focus)}
.mdc-ab-d.bo{background:rgba(90,90,90,.12);color:var(--ink-3)}

@media (max-width:600px){
  .mdc-ab{gap:9px}
  .mdc-ab-giu{width:100%}
}

/* ═══ HAI CACH DOC CUNG MOT CHAI ═══
   Cap thanh doi cho nhau khi bam nut. Chuyen tiep 0,7s de mat KIP THEO vach
   geosmin bung tu gan khong len gan mot phan ba — do la ca bai hoc, va no
   khong can mot chu giai thich nao. */
.mdc-doi{margin-top:18px;max-width:820px}
/* Bo nut chon san pham cuoi — nhieu muc hon nut hai-cach-doc nen cho xuong
   dong duoc thay vi ep mot hang. */
.mdc-pha-nut{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 18px}
.mdc-pha-nut button{padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font:inherit;font-size:13px;color:var(--ink-2);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.mdc-pha-nut button:hover{border-color:var(--ink-3);color:var(--ink)}
.mdc-pha-nut button.chon{background:var(--glass);color:var(--on-glass);
  border-color:var(--glass)}

.mdc-doi-nut{display:inline-flex;border:1px solid var(--line);border-radius:999px;
  overflow:hidden;background:#fff;margin-bottom:18px}
.mdc-doi-nut button{padding:9px 20px;border:0;background:none;font:inherit;font-size:13.5px;
  color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s}
.mdc-doi-nut button:hover{color:var(--ink)}
.mdc-doi-nut button.chon{background:var(--glass);color:var(--on-glass)}

.mdc-cot{margin-top:4px}
.mdc-cot-hang{display:grid;grid-template-columns:150px 1fr 118px;align-items:center;
  gap:14px;margin-bottom:11px}
.mdc-cot-hang .ten{font-size:13.5px;color:var(--ink);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdc-cot-hang .thanh{position:relative;height:26px;background:var(--paper-2);
  border-radius:3px;overflow:hidden}
.mdc-cot-hang .thanh i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;
  transition:width .7s cubic-bezier(.22,.61,.36,1)}
.mdc-cot-hang .so{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

.mdc-doi-noi{margin-top:16px;font-size:14.5px;line-height:1.7;color:var(--ink-2);
  max-width:660px}
.mdc-doi-noi b{color:var(--ink)}

@media (prefers-reduced-motion:reduce){ .mdc-cot-hang .thanh i{transition:none} }
@media (max-width:640px){
  .mdc-cot-hang{grid-template-columns:104px 1fr 92px;gap:9px}
  .mdc-cot-hang .ten{font-size:12.5px}
}

/* ═══ CHAI 10 ML CAT DOC ═══
   Doi lap voi cac thanh phia tren: chai = thu ROT VAO, thanh = thu NGUI THAY. */
/* Chai va bang la MOT khoi: chai la dong ho do sông ben trai, bang la cho
   chinh ben phai. Truoc day chung la hai khoi chong nhau, nen nguoi dung
   phai cuon qua lai de doi chieu. */
.mdc-ghep{display:grid;grid-template-columns:190px minmax(0,1fr);gap:26px;align-items:start}
.mdc-cot-chai{position:sticky;top:20px}
.mdc-chai-wrap{display:block}
.mdc-chai{width:100%}
.mdc-chai-svg{display:block;width:100%;height:auto}
.mdc-thuy{fill:none;stroke:var(--ink-3);stroke-width:1.6;opacity:.55}
.mdc-lop{transition:y .45s cubic-bezier(.22,.61,.36,1),height .45s cubic-bezier(.22,.61,.36,1),
  opacity .15s;cursor:default}
.mdc-chai-svg:hover .mdc-lop{opacity:.42}
.mdc-chai-svg .mdc-lop.mdc-roi,.mdc-chai-svg:hover .mdc-lop.mdc-roi{opacity:1}
.mdc-bang tbody tr.mdc-roi{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--focus)}
.mdc-nen{fill:var(--ink-3);opacity:.10}
.mdc-nen-lb{fill:var(--ink-3);font-family:var(--mono);font-size:12px;text-anchor:middle}
.mdc-muc{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.mdc-muc-lb{fill:var(--ink-3);font-family:var(--mono);font-size:12px}

.mdc-tran-vung{fill:var(--warn);opacity:.09}
.mdc-tran-lb{fill:var(--warn);font-family:var(--mono);font-size:13px;text-anchor:middle;
  letter-spacing:.12em;text-transform:uppercase}

.mdc-tran-noi{padding:12px 15px;border-left:3px solid var(--warn);
  background:rgba(176,64,46,.06);border-radius:0 3px 3px 0;font-size:14px;line-height:1.65;
  color:var(--ink-2);margin:0 0 16px}
.mdc-tran-noi b{color:var(--ink)}

.mdc-chai-ghi{padding-top:0}
.mdc-chai-ghi .mdc-nho{font-size:11.5px;line-height:1.55}
.mdc-chai-nen{display:flex;align-items:flex-start;gap:8px;font-size:13px;
  line-height:1.55;color:var(--ink-2);margin:14px 0 8px}
.mdc-chai-nen b{color:var(--ink)}
.mdc-chai-nen .o{width:12px;height:12px;border-radius:2px;background:var(--ink-3);opacity:.18;
  flex:0 0 auto;margin-top:3px}
.mdc-chai-ds{list-style:none;padding:0;margin:0 0 14px}
.mdc-chai-ds li{display:grid;grid-template-columns:14px 1fr auto;gap:11px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--line);font-size:14px}
.mdc-chai-ds li:last-child{border-bottom:0}
.mdc-chai-ds .o{width:14px;height:14px;border-radius:3px}
.mdc-chai-ds .tn{color:var(--ink)}
.mdc-chai-ds .sl{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.mdc-chai-ds li.nen{color:var(--ink-3)}
.mdc-chai-ds li.nen .o{background:var(--ink-3);opacity:.18}
.mdc-chai-ds li.nen .tn,.mdc-chai-ds li.nen .sl{color:var(--ink-3)}

/* ═══ DIEN THOAI ═══
   Bang 6 cot rong toi thieu 660px, nam trong khung 380px thi phai cuon ngang
   — ma bang la phan CHINH cua cong cu, khong the bat nguoi dung cuon ngang de
   keo thanh truot. Doi sang the xep doc: moi cau tu mot the, nhan cot hien
   ben trai tung dong. */
@media (max-width:700px){
  .mdc-bang-wrap{overflow-x:visible}
  .mdc-bang{min-width:0;display:block;table-layout:auto}
  .mdc-bang thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* Quy tac td:nth-child(n){width:..%} co do uu tien (0,2,1), cao hon
     td{width:auto} (0,1,1) — nen o van bi ep theo be rong cot cua ban may
     tinh va thanh truot chi rong ~100px. Ghi de dung muc uu tien do. */
  .mdc-bang tbody,.mdc-bang tr,.mdc-bang td{display:block}
  .mdc-bang td:nth-child(1),.mdc-bang td:nth-child(2),.mdc-bang td:nth-child(3),
  .mdc-bang td:nth-child(4),.mdc-bang td:nth-child(5),.mdc-bang td:last-child{width:auto}
  .mdc-bang tr{border:1px solid var(--line);border-radius:5px;padding:14px 15px;
    margin-bottom:12px;position:relative}
  .mdc-bang tbody tr:hover{background:transparent}
  .mdc-bang td{padding:0 0 9px;border:0}
  .mdc-bang td:last-child{padding:0;position:absolute;top:11px;right:11px;width:auto}
  .mdc-bang .c-hang{position:absolute;top:13px;right:40px;padding:0}
  /* Nhan cot vo ba dong tren dien thoai: "NGƯỠNG / PHÁT / HIỆN". Cam xuong
     dong va ha co chu cho vua. */
  .mdc-bang td[data-nhan]::before{content:attr(data-nhan);display:block;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-3);margin:10px 0 5px;white-space:nowrap}
  .mdc-bang td.r{text-align:left}

  /* Thanh truot chi rong 90px thi khong keo chinh xac bang ngon tay duoc.
     Cho no chiem het chieu ngang the, va o nhap nam ngay duoi. */
  .mdc-slider{width:100%;height:26px}
  .mdc-onhap{width:120px;margin-top:9px}
  .mdc-cap{min-width:0}
  .mdc-ml{display:inline;margin-left:12px}
  /* Thanh dai 99 % day con so sat mep the. Chua thanh trong khung hep hon. */
  .mdc-h{gap:8px}
  .mdc-h i{max-width:calc(100% - 46px)}
  .mdc-h b{flex:0 0 auto}

  /* Nguong: so va don vi tren CUNG mot dong — hai dong la bo cuc cho cot
     hep cua ban may tinh, o day thanh lac long. */
  .mdc-ng-so{display:inline;font-size:15px}
  /* "phần tỷ" bi ngat giua hai chu vi o hep — khong phai hai dong span.
     Cam ngat tu. */
  .mdc-ng-dv{display:inline;margin-left:5px;font-size:11.5px;white-space:nowrap}
  .mdc-bang td:nth-child(4){white-space:nowrap}

  .mdc-doi-nut{display:flex;width:100%}
  .mdc-doi-nut button{flex:1;padding:9px 8px;font-size:12.5px}
  .mdc-cot-hang{grid-template-columns:88px 1fr 76px;gap:8px}

  /* Quy tac 1000px ep chai thanh luoi 150px + 1fr. O 500px thi con chu thich
     chi con ~180px — chat ca hai ben. Tren dien thoai cho chai xep TREN chu
     thich, va gioi han chieu cao de no khong chiem het man hinh.
     Dat trong khoi 700px nhung phai co do uu tien cao hon: quy tac 1000px
     nam SAU trong tep nen thang khi cung do uu tien. */
  .mdc-ghep .mdc-cot-chai{display:block}
  .mdc-ghep .mdc-chai{max-width:190px;margin:0 auto}
  .mdc-ghep .mdc-chai-ghi{margin-top:14px}
}

@media (max-width:1000px){
  .mdc-ghep{grid-template-columns:1fr;gap:18px}
  .mdc-cot-chai{position:static;display:grid;grid-template-columns:150px 1fr;gap:18px;
    align-items:center}
}

/* ═══ PHAC THAO MUI CA CHAI ═══
   Ba nhip doc nhu mot the mo ta chai — dung cach nguoi lam nghe viet. */
.mdc-phac{margin-top:18px;max-width:820px;border:1px solid var(--line);border-radius:5px;
  padding:20px 22px;background:var(--paper-2)}
.mdc-nhip{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.mdc-nhip:last-of-type{border-bottom:0}
.mdc-nhip .lb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.mdc-nhip .noi{font-size:15px;line-height:1.65;color:var(--ink)}
.mdc-nhip .noi em{display:block;margin-top:4px;font-family:var(--mono);font-size:11px;
  font-style:normal;color:var(--ink-3)}
.mdc-phac .mdc-nho{margin-top:12px}
@media (max-width:600px){
  .mdc-nhip{grid-template-columns:1fr;gap:4px}
}

.mdc-canh{margin:18px 0 0;max-width:1180px}
.mdc-canh-in{background:var(--glass);border-radius:6px;overflow:hidden;
  border:1px solid var(--glass-line)}
.mdc-svg{display:block;width:100%;height:auto}
.mdc-vach{stroke:var(--glass-line);stroke-width:1;stroke-dasharray:2 5}
.mdc-vach-lb{fill:var(--on-glass-3);font-family:var(--mono);font-size:13px}
.mdc-kim{stroke:var(--act-look);stroke-width:1.5;opacity:.75}
.mdc-ten-svg{fill:#F2F7F4;font-family:var(--mono);font-size:15px;font-weight:600;
  text-anchor:middle;paint-order:stroke;stroke:rgba(9,20,18,.92);stroke-width:5px;
  letter-spacing:.01em}

/* Chuyen tiep muot: ban kinh va do mo troi dan thay vi nhay tung khung.
   Bo cuc van tinh — chi cai TAN DAN la co chuyen dong, dung nhu mui that. */
.mdc-bong,.mdc-quang{transition:r .42s cubic-bezier(.22,.61,.36,1),opacity .42s ease}
.mdc-svg .mdc-ten-svg{transition:opacity .42s ease}
.mdc-kim{transition:none}
.mdc-svg.tinh .mdc-bong,
.mdc-svg.tinh .mdc-quang,
.mdc-svg.tinh .mdc-ten-svg{transition:none}
@media (prefers-reduced-motion:reduce){
  .mdc-bong,.mdc-quang,.mdc-svg .mdc-ten-svg{transition:none}
}

.mdc-dieu{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.mdc-chay{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;transition:all .18s}
.mdc-chay:hover{border-color:var(--focus);color:var(--focus)}
.mdc-chay .ico{font-size:11px;line-height:1}
.mdc-chay .lb{line-height:1}
.mdc-chay.chay{background:var(--focus);border-color:var(--focus);color:#fff}
.mdc-chay.chay .ico::before{content:'❚❚'}
.mdc-chay.chay .ico{font-size:9px}
.mdc-chay.chay .ico{color:#fff}
.mdc-gio{flex:1;min-width:200px;accent-color:var(--focus)}
.mdc-dongho{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  min-width:118px;text-align:right}
.mdc-canh figcaption{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--ink-3);
  max-width:660px}
.mdc-canh figcaption b{color:var(--ink-2)}

.mdc-luc{margin-top:14px;max-width:720px;font-size:14.5px;line-height:1.75;color:var(--ink-2);
  min-height:26px}
.mdc-luc b{color:var(--ink)}
.mdc-luc p{margin:0}

@media (max-width:680px){
  .mdc-dieu{gap:10px}
  .mdc-dongho{min-width:0;text-align:left}
}
.mdc-truc-in{position:relative;height:112px;border-top:2px solid var(--line);margin-top:8px}
.mdc-cham{position:absolute;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-2);
  background:var(--paper);padding:1px 5px;border-radius:2px;border:1px solid var(--line)}
.mdc-cham b{color:var(--ink);font-weight:600}
.mdc-cham.ngoai-trai,.mdc-cham.ngoai-phai{border-style:dashed;color:var(--ink-3)}
.mdc-truc-nhan{display:flex;justify-content:space-between;margin-top:6px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}

.mdc-nho{font-size:13px;color:var(--ink-3);line-height:1.6}

.chu-thich-bang{max-width:720px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line)}
.chu-thich-bang p{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--ink-2)}
.chu-thich-bang b{color:var(--ink)}
.chu-thich-bang i{font-style:italic}

.ngoai-note{font-size:13.5px;line-height:1.65;color:var(--ink-2);
  margin:-12px 0 22px;padding-left:90px}
.hai-truc .ngoai-note b{color:var(--ink);font-weight:600}
.ngoai-note b{color:var(--ink)}

/* Vung phai cua dai nho — chat nang hon 290 do */
.mv-zone.right{left:auto;right:0;text-align:right}
.mv-dot.heavy{box-shadow:0 0 0 2px var(--paper),0 0 0 3px var(--ink-3)}

.nhiet-truc{max-width:620px;margin:6px 0 0}
.nhiet-truc .hang{display:flex;align-items:center;gap:14px;margin:0 0 11px}
.nhiet-truc .nh{flex:0 0 190px;font-size:13px;text-align:right}
.nhiet-truc .nh a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.nhiet-truc .nh a:hover{border-color:var(--ink-3)}
.nhiet-truc .th{position:relative;flex:1;height:14px}
.nhiet-truc .th .track{position:absolute;left:0;right:0;top:6px;height:2px;border-radius:1px;opacity:.4;
  background:linear-gradient(90deg,var(--vol-cool),var(--vol-mid),var(--vol-warm))}
.nhiet-truc .th .pin{position:absolute;top:1px;width:3px;height:12px;border-radius:2px;background:var(--ink)}
.nhiet-truc .th .val{position:absolute;top:0;transform:translateX(8px);font-family:var(--mono);
  font-size:10.5px;color:var(--ink-3);line-height:14px;white-space:nowrap}
/* Kim gan mep phai: lat nhan sang ben trai de no khong tran ra ngoai khung */
.nhiet-truc .th .val.trai{transform:translateX(calc(-100% - 8px))}
.nhiet-truc .moc{display:flex;justify-content:space-between;margin:10px 0 0 204px;
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3)}
@media (max-width:680px){
  .nhiet-truc .hang{flex-direction:column;align-items:stretch;gap:3px}
  .nhiet-truc .nh{text-align:left;flex:none}
  .nhiet-truc .moc{margin-left:0}
}

.nguon-blk{margin-top:56px;padding-top:28px;border-top:1px solid var(--line)}
ol.nguon{max-width:660px;margin:0;padding-left:22px}
ol.nguon li{margin:0 0 18px;font-size:14.5px;line-height:1.6}
ol.nguon li b{color:var(--ink)}
ol.nguon li i{color:var(--ink-2);font-style:italic}
ol.nguon .dung{display:block;margin-top:5px;color:var(--ink-3);font-size:13.5px;line-height:1.55}
.capnhat{margin:26px 0 0;font-family:var(--mono);font-size:12px;color:var(--ink-3)}

.sp-blk{border-top:1px solid var(--line);padding-top:26px}
.sp-blk:first-of-type{border-top:none}
.luuy{border-left:2px solid var(--vol-warm);padding-left:14px;margin-top:16px;color:var(--ink-2)}
.luuy b{color:var(--ink)}

/* ---------- HAI TRỤC trên trang cấu tử ----------
   Hai thanh từng nằm rời nhau và trông y hệt nhau dù mã hoá hai tính chất
   khác hẳn — người đọc không phân biệt được. Nay xếp thành hai hàng có nhãn
   bên trái: sự giống nhau trở thành phép so sánh thay vì gây nhầm.
   Màu khác nhau để phân biệt: bay hơi đi lạnh→ấm, ngưỡng đi xanh→đỏ. */
.hai-truc{margin:18px 0 0;max-width:640px}
.hai-truc .truc{display:flex;align-items:flex-start;gap:16px;margin:0 0 22px}
.hai-truc .nhan{flex:0 0 74px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);padding-top:3px;text-align:right}
.hai-truc .thanh{position:relative;flex:1;height:30px}
.hai-truc .thanh .track{position:absolute;left:0;right:0;top:5px;height:3px;border-radius:2px;opacity:.55}
.hai-truc .thanh.volstrip .track{background:linear-gradient(90deg,var(--vol-cool),var(--vol-mid),var(--vol-warm))}
.hai-truc .thanh.nguong .track{background:linear-gradient(90deg,#2F7F79,#8A6D14,#B0402E)}
.hai-truc .thanh .pin{position:absolute;top:0;width:3px;height:13px;border-radius:2px;background:var(--ink)}
.hai-truc .thanh .ends{position:absolute;top:18px;width:100%;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);line-height:1}
/* Site dat box-sizing:border-box toan cuc, nen max-width TINH CA padding.
   Ban cu dat max-width:520px cong padding-left:90px — be rong chu thuc te
   chi con 430px va thuc te con hep hon nua, khoang bon muoi ky tu moi dong.
   Bo max-width, de khoi cha 640px quyet dinh: chu rong 550px, khop voi thanh. */
.hai-truc .giai-truc{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:6px 0 0;
  padding-left:90px}
.hai-truc .giai-truc b{color:var(--ink);font-weight:600}
@media (max-width:680px){
  /* KHOI HAI TRUC TREN DIEN THOAI.
     Quy tac goc dat align-items:flex-start. Khi doi sang flex-direction:column,
     align-items chuyen sang truc NGANG, va flex-start lam con co lai bang be
     rong noi dung. Nhung .thanh chi chua cac phan tu position:absolute nen be
     rong noi dung cua no bang KHONG — thanh do bien mat, hai nhan hai dau don
     ve mot cho va chong len chu.
     Da mac loi nay ngay 1/9/2026, va no hien ro tren anh chup cua nguoi dung
     trong khi file xem truoc 390px toi vua tao lai khong duoc mo ra xem. */
  .hai-truc .truc{flex-direction:column;gap:6px;align-items:stretch}
  .hai-truc .nhan{text-align:left;flex:none;padding-top:0}
  .hai-truc .thanh{flex:none;width:100%;height:32px}
  .hai-truc .giai-truc{padding-left:0;margin-top:12px}
  .ngoai-note{padding-left:0;margin:0 0 18px}
}

/* ---------- tên đồng nghĩa của cấu tử ---------- */
.dong-nghia{font-size:14px;color:var(--ink-3);margin:6px 0 0;line-height:1.7}
.dong-nghia span{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.dong-nghia .vi-sao{display:block;font-family:var(--sans);font-size:12.5px;
  color:var(--ink-3);margin-top:4px}

/* ==========================================================================
   MENU THẢ TRÊN ĐIỆN THOẠI
   Dùng <details>/<summary> nên không cần JavaScript — menu mở được ngay cả
   khi JS bị chặn. Trên màn hình rộng nó ẩn hẳn và thanh ngang hiện lại.

   ĐẶT TRƯỚC KHỐI MOBILE CÓ CHỦ ĐÍCH. Trước đây khối này nằm SAU media query,
   nên `.menu-thao{display:none}` ở đây đè lên `.menu-thao{display:block}`
   trong media query — cùng độ ưu tiên, quy tắc đứng sau thắng. Hậu quả:
   trên điện thoại nav bị ẩn mà nút menu cũng bị ẩn, không còn gì để bấm.
   Đã mắc lỗi này ngày 31/8/2026.
   ========================================================================== */
.menu-thao{display:none;position:relative}
.menu-thao>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  padding:9px 13px 9px 11px;margin:-9px -6px -9px 0;border-radius:9px;
  font-size:14px;font-weight:500;color:var(--ink-2);-webkit-tap-highlight-color:transparent}
.menu-thao>summary::-webkit-details-marker{display:none}
.menu-thao>summary:hover{color:var(--ink)}
.masthead.on-glass .menu-thao>summary{color:var(--on-glass-2)}
.masthead.on-glass .menu-thao>summary:hover{color:var(--on-glass)}

/* Ba gạch — vẽ bằng CSS, không cần ảnh */
.menu-thao .gach{position:relative;width:19px;height:2px;background:currentColor;border-radius:2px;
  display:block;transition:background .15s ease}
.menu-thao .gach::before,.menu-thao .gach::after{content:"";position:absolute;left:0;width:19px;
  height:2px;background:currentColor;border-radius:2px;transition:transform .18s ease}
.menu-thao .gach::before{top:-6px}
.menu-thao .gach::after{top:6px}
.menu-thao[open] .gach{background:transparent}
.menu-thao[open] .gach::before{transform:translateY(6px) rotate(45deg)}
.menu-thao[open] .gach::after{transform:translateY(-6px) rotate(-45deg)}
.menu-thao[open]>summary{background:var(--paper-2)}
.masthead.on-glass .menu-thao[open]>summary{background:#16302A}

.nav-tha{position:absolute;right:0;top:calc(100% + 9px);z-index:60;min-width:212px;
  background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:6px;
  box-shadow:0 12px 32px rgba(28,35,33,.16);display:flex;flex-direction:column}
.masthead.on-glass .nav-tha{background:#123029;border-color:#2A4B43;
  box-shadow:0 12px 32px rgba(0,0,0,.4)}
.nav-tha a{display:block;padding:12px 14px;border-radius:8px;text-decoration:none;
  font-size:15px;color:var(--ink-2)}
.nav-tha a:hover{background:var(--paper-2);color:var(--ink)}
.nav-tha a[aria-current]{color:var(--ink);font-weight:600;background:var(--paper-2)}
.masthead.on-glass .nav-tha a{color:var(--on-glass-2)}
.masthead.on-glass .nav-tha a:hover,
.masthead.on-glass .nav-tha a[aria-current]{background:#16302A;color:var(--on-glass)}

/* Nền mờ phía sau khi menu mở, chạm vào để đóng */
.menu-thao[open]>summary::after{content:"";position:fixed;inset:56px 0 0;background:rgba(28,35,33,.28);
  z-index:-1}
/* Menu thả dùng tới 980px, không phải 680px (audit 26/9/2026). Từ 681 tới khoảng
   900px, 6–7 mục menu cộng tên site và nút ngôn ngữ không vừa một hàng: nav xuống
   dòng, hàng hai tràn khỏi khung .masthead cao 60px — lỗi có ở CẢ bản Việt (7 mục)
   lẫn bản Anh. Đo ở 768px: hai hàng, đáy nav 63px trong khung 60px.
   Mốc đầu tiên đặt 900px là ƯỚC TÍNH và sai: đo trên site thật, bản Anh ở cửa sổ 901px
   (nội dung 886px sau thanh cuộn) vẫn hai hàng. Hàng menu Anh cần: nav 537 + tên site
   194 + nút ngôn ngữ 82 + khoảng cách 32 + lề 48 = 893px nội dung. Thêm mục "Lab" ở
   đợt 5B (~48px) thành ~941px, cộng thanh cuộn 15px ≈ 956px. Chốt 980px để còn dư.
   Media query tính CẢ thanh cuộn — đo bằng cửa sổ, đừng đo bằng vùng nội dung. */
@media (min-width:981px){.menu-thao{display:none!important}}
@media (max-width:980px){
  .masthead .nav{display:none}
  .masthead .menu-thao{display:block}
}

/* ==========================================================================
   MOBILE — soát lại toàn bộ ở chiều rộng điện thoại
   Vấn đề gốc: thanh điều hướng 5 mục cộng brand cần ~470px, trong khi
   màn hình 390px chỉ còn 342px sau padding. Nav xuống dòng nhưng
   .masthead .wrap khoá cứng height:60px nên hàng hai tràn khỏi khung.
   ========================================================================== */

@media (max-width:680px){
  /* --- Thanh điều hướng: gom vào menu thả --- */
  /* Do uu tien cao hon quy tac goc: khong phu thuoc vao thu tu trong file. */
  .masthead .nav{display:none}
  .masthead .menu-thao{display:block}
  .masthead .wrap{height:56px}

  /* --- Vùng chạm tối thiểu --- */
  .chips a,.chips .chip-flat{padding:10px 15px}
  .serie a,.parts a{padding-top:15px;padding-bottom:15px}
  .pager a{padding:14px 0}

  /* --- Chữ và khoảng cách --- */
  .wrap{padding:0 20px}
  .head{padding-top:26px}
  .hero{padding:32px 0 38px}
  .hero .thesis{font-size:clamp(31px,8.6vw,42px);line-height:1.1}
  .hero .thesis-sub{font-size:15.5px;margin-top:16px}
  .hero-cta{gap:8px;margin-top:26px}
  .hero-cta .cta{padding:12px 18px;font-size:14px}
  .lede,.desc p,.entry .block p{font-size:16.5px;line-height:1.68}
  h1{font-size:clamp(26px,7.4vw,32px)}

  /* --- Mục từ điển: bỏ thụt lề sâu, giữ vạch màu --- */
  .entry{padding-left:16px;border-left-width:3px}
  .entry-rail{padding-left:16px;margin-top:28px}

  /* --- Dải bay hơi thu nhỏ --- */
  .mini-vol{padding:16px 16px 14px}
  .mv-dot{width:11px;height:11px;margin:-5.5px 0 0 -5.5px}
  .mv-dot.lead{width:16px;height:16px;margin:-8px 0 0 -8px}
  .mv-note{font-size:12px}
  .mv-scale{font-size:9px}

  /* --- Bảng dữ liệu: xếp dọc thay vì bó cột --- */
  table.data thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.data tr{display:block;border-bottom:1px solid var(--rule);padding:13px 0}
  table.data td{display:block;border-bottom:0;padding:0}
  table.data td.r{text-align:left;padding-right:0!important}
  table.data td:first-child{font-weight:500;margin-bottom:3px}
  table.data td .mono{font-size:13px;color:var(--ink-2)}
  table.data td:last-child{font-size:14px;color:var(--ink-2);margin-top:4px;line-height:1.6}
  .bar{display:none}

  /* --- Bảng trong văn xuôi giữ dạng bảng, chỉ thu nhỏ --- */
  .article table.data.md tr{display:table-row;padding:0}
  .article table.data.md td{display:table-cell;padding:10px 0;border-bottom:1px solid var(--rule)}
  .article table.data.md td:first-child{padding-right:14px;max-width:none;margin:0}
  .article table.data.md td.r{text-align:right}
  .article table.data.md thead{position:static;width:auto;height:auto;clip:auto}
  .article table.data.md{font-size:13.5px}

  /* --- Khối cảnh báo và trích dẫn --- */
  .warn{padding:16px 18px}
  .src-claim>div{padding:18px 18px}
  .entry .howto{padding:20px 18px}

  /* --- Lưới danh mục và họ mùi --- */
  .facts{gap:16px 20px}
  .ho-head{padding-left:16px}
  .ho-vol{margin-top:26px}
}

@media (max-width:400px){
  .wrap{padding:0 16px}
  .nav{margin:0 -16px;padding:0 16px}
  .entry,.entry-rail,.ho-head{padding-left:13px}
  .hero .thesis{font-size:29px}
}


/* ---------- anh ---------- */
/* width/height tren the <img> giu cho truoc khi anh ve — do la cach CLS bang 0.
   Nhung hai thuoc tinh do cung khoa cung kich thuoc, nen CSS phai tra lai
   tinh co gian: height:auto giu ti le theo chieu rong thuc te.
   Bo mot trong hai dong duoi day la hong mot trong hai thu — hoac bo cuc nhay,
   hoac anh meo tren dien thoai. */
.sp-anh,.oil-anh{display:block;width:100%;height:auto;border-radius:10px;background:var(--paper-2)}
.oil-hinh{margin:26px 0 0;max-width:680px}
.oil-hinh img{border:1px solid var(--line)}
.sp-chai img{max-width:420px}

/* ---------- lưới tinh dầu /tinh-dau/ ---------- */
/* Mau tu collection cua aromatics.com, bo phan khong co du lieu that dang sau.
   Bo loc chi hien khi facet co tu hai gia tri — voi mot loai dau thi khoi
   .td-loc khong duoc in ra, va CSS duoi day don gian khong co gi de to. */
.td-thanh{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin:26px 0 0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.td-dem{font-size:14px;color:var(--ink-2);margin:0}
.td-dem b{color:var(--ink);font-weight:600}
.td-sap{font-size:13.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.td-sap select{font:inherit;color:var(--ink);padding:6px 9px;border:1px solid var(--line);
  border-radius:7px;background:var(--paper)}

.td-loc{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;align-items:flex-start}
.td-nhom{border:1px solid var(--line);border-radius:8px;background:var(--paper);position:relative}
.td-nhom summary{cursor:pointer;padding:8px 13px;font-size:13.5px;list-style:none;white-space:nowrap}
.td-nhom summary::-webkit-details-marker{display:none}
.td-nhom summary span{color:var(--ink-3);font-family:var(--mono);font-size:12px;margin-left:4px}
/* Mo ra thi phu LEN luoi thay vi day luoi xuong — mo mot bo loc khong duoc
   lam ca trang nhay. */
.td-nhom[open]{border-color:var(--act-buy)}
.td-nhom .td-o{position:absolute;z-index:5;top:calc(100% + 4px);left:0;min-width:210px;max-height:320px;
  overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;box-shadow:0 6px 20px rgba(0,0,0,.09)}
.td-o label{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;cursor:pointer}
.td-o i{margin-left:auto;font-style:normal;color:var(--ink-3);font-family:var(--mono);font-size:12px}
#td-xoa,#td-xoa2{font:inherit;font-size:13.5px;padding:8px 13px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-2)}

.td-luoi{list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:20px}
.td-the a{display:block;text-decoration:none;color:inherit}
/* Ti le co dinh cho o hinh: luoi khong giat khi mot so the co anh con so khac
   chua co. Xem the_anh() — width/height tren <img> giu CLS bang 0, o giu cho
   nay lo phan con lai. */
.td-hinh{aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.td-anh{width:100%;height:100%;object-fit:cover}
.td-the h2{font-size:16px;font-weight:600;margin:11px 0 0;line-height:1.35}
.td-kh{font-family:var(--serif);font-style:italic;font-size:13.5px;color:var(--ink-2);margin:3px 0 0}
.td-ap{font-size:12.5px;color:var(--ink-2);margin:7px 0 0;font-family:var(--mono)}
.td-ap b{color:var(--ink);font-weight:500}
.td-gia{font-size:14px;margin:8px 0 0;font-weight:500}
.td-ml{color:var(--ink-3);font-weight:400;font-family:var(--mono);font-size:12px;margin-left:5px}
.td-mau{font-size:12px;color:var(--ink-3);margin:4px 0 0}
.td-the a:hover h2{text-decoration:underline;text-underline-offset:3px}
.td-khong{margin:28px 0;color:var(--ink-2);display:flex;gap:12px;align-items:center}
@media (max-width:700px){
  .td-luoi{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .td-nhom .td-o{position:static;max-height:none;box-shadow:none;border:0;padding:4px 12px 10px}
}
/* Nhãn "Nhiều nhất" trên thẻ: nhỏ, xám, đặt trước con số. Nó là phần quan
   trọng nhất của dòng đó — bỏ nó đi thì con số phần trăm đọc như thể đấy là
   cấu tử quyết định mùi, điều mà site có hẳn một bài để bác. */
.td-nhan{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-3);font-family:var(--sans);margin-right:5px}
/* Tiêu đề nhóm trong lưới tinh dầu. Ẩn cùng lưới của nó khi lọc hết — xem
   loc.js; một dòng "Nhập khẩu 77" treo trên khoảng trống trông như trang hỏng. */
.td-nhomten{font-size:15px;font-weight:600;margin:30px 0 0;padding-bottom:9px;
  border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:9px}
.td-nhomten span{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);font-weight:400}
.td-nhomten + .td-luoi{margin-top:18px}
/* Liên kết chéo trên trang loại chưa có lô. Thay cho khối boilerplate ~200 từ
   vốn giống hệt nhau trên mọi trang — xem ghi chú trong build.php. */
.cheo{margin:12px 0 0;font-size:14px;line-height:1.75}
.cheo b{display:block;font-weight:500;font-size:12.5px;color:var(--ink-3);margin-bottom:2px}
/* Liên kết sang mục từ điển mùi cùng tên. */
.oil-td{margin:20px 0 0;font-size:14.5px;color:var(--ink-2)}
.oil-td b{color:var(--ink);font-weight:500}
/* Cảnh báo an toàn trên trang loại. Đặt dưới bảng thông số, trên khối mua —
   người đọc gặp nó trước khi nghĩ tới chuyện mua. Không dùng màu đỏ báo động:
   đây là thông tin xử lý, không phải lệnh cấm. */
.oil-at{margin:22px 0 0;padding:14px 16px;border:1px solid var(--line);
  border-left:3px solid var(--vang);border-radius:8px;background:var(--paper)}
.oil-at b{display:block;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-2);font-weight:500;margin-bottom:5px}
.oil-at p{margin:0;font-size:14.5px;line-height:1.65}
.oil-at a{margin-left:5px;white-space:nowrap}
/* Chemotype và kết quả đối chiếu với bản phân tích lô. */
.ct-khop{font-size:11.5px;color:var(--ok);border:1px solid var(--ok);border-radius:4px;
  padding:1px 6px;margin-left:6px;white-space:nowrap}
.ct-lech{font-size:11.5px;color:var(--warn);border:1px solid var(--warn);border-radius:4px;
  padding:1px 6px;margin-left:6px;white-space:nowrap}
.oil-ct{margin:18px 0 0;font-size:14.5px;line-height:1.7;padding-left:13px;
  border-left:3px solid var(--ok)}
.oil-ct.lech{border-left-color:var(--warn)}
/* Ba tầng tên trên thẻ: tiếng Việt (h2), tiếng Anh, tên khoa học + họ. */
.td-en{font-size:13px;color:var(--ink-2);margin:2px 0 0}
.td-kh .td-ho{display:block;font-family:var(--mono);font-style:normal;font-size:11.5px;
  color:var(--ink-3);margin-top:2px;letter-spacing:.01em}
/* Nhãn chemotype: hai thẻ cùng loài dùng chung một ảnh là ĐÚNG, không phải lỗi. */
.td-ct{font-size:12px;color:var(--ink-3);margin:6px 0 0;font-family:var(--mono)}
/* Tên quốc tế và họ thực vật dưới tên khoa học, trên trang loại. */
.bi-phu{margin:3px 0 0;font-size:14px;color:var(--ink-2)}
.bi-phu .bi-ho{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}
.binomial .bi-ct{font-family:var(--mono);font-style:normal;font-size:13px;color:var(--ink-3)}
/* Ảnh trong khối Mốc quy chiếu của mục từ điển. Đặt cạnh câu mệnh lệnh, không
   phải đầu trang: nó trả lời "tìm cái gì", không thay thế việc ngửi. */
.anchor.co-anh{display:flex;gap:22px;align-items:flex-start}
.anchor.co-anh .anchor-chu{flex:1 1 auto;min-width:0}
.anchor-hinh{flex:0 0 230px;margin:0}
.anchor-anh{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.anchor-hinh figcaption{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);margin-top:6px;text-align:center}
@media (max-width:760px){
  .anchor.co-anh{flex-direction:column-reverse;gap:16px}
  .anchor-hinh{flex:none;width:100%;max-width:300px;align-self:center}
}
/* Ghi nguồn ảnh. Chỉ hiện khi giấy phép buộc — CC BY, CC BY-SA. */
.anh-nguon{display:block;font-size:11px;color:var(--ink-3);margin-top:5px;font-style:normal;
  text-transform:none;letter-spacing:0}
.anh-nguon a{color:inherit;text-decoration:underline;text-underline-offset:2px}
/* Nhãn lô mẫu trên trang chai. Không đỏ báo động: đây là thông tin về nguồn
   con số, không phải cảnh báo nguy hiểm. Cùng kiểu với khối Lưu ý an toàn. */
.sp-mau{margin:16px 0 0;padding:13px 15px;border:1px solid var(--line);
  border-left:3px solid var(--vang);border-radius:8px;background:var(--paper);
  font-size:14.5px;line-height:1.65;color:var(--ink-2)}
/* Nhóm sản phẩm trên /san-pham/. Nhóm chưa mở bán vẫn hiện — đó là khung danh
   mục, không phải hàng mô phỏng — nhưng nhạt hơn để không trông như hàng thật. */
.nsp{padding:24px 0;border-top:1px solid var(--line)}
.nsp:first-child{border-top:0;padding-top:8px}
.nsp-dau{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.nsp-dau .sec{margin:0}
.nsp-tt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:2px 8px;white-space:nowrap}
.nsp:not(.cho) .nsp-tt{color:var(--ok);border-color:var(--ok)}
.nsp-chuan{margin:8px 0 0;font-size:13.5px;line-height:1.65;color:var(--ink-3);
  max-width:660px;padding-left:12px;border-left:2px solid var(--line)}
.nsp.cho .sub,.nsp.cho .nsp-chuan{color:var(--ink-3)}
/* Ảnh trong bài viết — chèn bằng ![mô tả](/anh/bai-viet/ten.jpg "chú thích"). */
.bai-hinh{margin:30px 0}
.bai-anh{width:100%;height:auto;border-radius:10px;display:block;border:1px solid var(--line)}
.bai-hinh figcaption{font-size:13px;color:var(--ink-3);margin-top:8px;line-height:1.55}

/* ---------- lớp ngôn ngữ /en/ (26/9/2026) ----------
   .nn-doi  — nút đổi ngôn ngữ ở đầu trang. Chỉ xuất hiện trên trang CÓ bản
              kia; build-en.php chèn nó, layout chỉ giữ chỗ.
   .nn-vi   — liên kết trên trang tiếng Anh trỏ sang trang CHỈ có tiếng Việt.
              Nhãn "VI" báo trước khi bấm, thay vì để người đọc tự phát hiện. */
.nn-doi{flex:none;font-size:12px;line-height:1;padding:6px 10px;border:1px solid var(--line);
  border-radius:999px;text-decoration:none;color:var(--ink-2);white-space:nowrap}
.nn-doi:hover{color:var(--ink);border-color:currentColor}
.masthead.on-glass .nn-doi{color:var(--on-glass-2);border-color:rgba(255,255,255,.28)}
.masthead.on-glass .nn-doi:hover{color:var(--on-glass)}
a.nn-vi::after{content:"VI";display:inline-block;margin-left:5px;padding:1px 4px;font-size:9px;
  font-weight:600;letter-spacing:.04em;line-height:1.3;vertical-align:.18em;border-radius:3px;
  border:1px solid currentColor;opacity:.55;text-decoration:none}
/* Chấm trên dải bay hơi là liên kết nhưng không có chữ — nhãn "VI" chen vào chấm
   làm vỡ hình. Chấm vẫn mang hreflang="vi"; nhãn chỉ hiện trong chú thích rê chuột. */
a.mv-dot.nn-vi::after{content:none}
/* Nhãn rê chuột của chấm trên dải bay hơi: căn giữa chấm thì chấm sát mép phải
   (nootkatone 290 °C, santalol…) đẩy nhãn ra ngoài khung — trên điện thoại cả trang
   cuộn ngang 33px. Nhãn vẫn ẩn (opacity 0) nhưng vẫn chiếm chỗ. Chấm ở 35% trái /
   phải nay neo nhãn vào mép tương ứng. Phát hiện khi audit trực tiếp 26/9/2026 —
   lỗi có từ bản tiếng Việt, không do lớp /en/. */
.mv-dot.nhan-phai span{left:auto;right:-4px;transform:none}
.mv-dot.nhan-trai span{left:-4px;transform:none}
/* Lưới /en/scent-dictionary/: mục chưa dịch đã hiện bằng chữ Việt, và tiêu đề
   hàng họ ấy đã mang nhãn VI. Gắn thêm VI cho từng chip là 120 nhãn lặp lại một
   thông tin — audit trực tiếp 26/9/2026 thấy lưới rối hẳn. Liên kết vẫn mang
   hreflang="vi"; chỉ bỏ nhãn nhìn thấy trong ô lưới. */
#matrix .cell a.nn-vi::after{content:none}