/* giacngungon.vn — site.css
   Gốc: site.css của muihuong.vn (129 KB), đã lược bằng PurgeCSS 6.0.0 ngày 2026-10-30
   theo template của giacngungon (còn khoảng 48 KB). So pixel 28 ảnh chụp trước/sau: không khác.
   Thêm class mới: viết vào đây; chạy lại kiem-css.php và kiem-tuong-phan.php. */
/* ═══════════════════════════════════════════════════════════════════════
   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{
  /* bề mặt: đầu trang xanh chàm đêm, thân giấy xám vải lanh */
  --glass:#121A2B; --glass-2:#1C2638; --glass-line:#2E3A50;
  --paper:#EFF1F4; --paper-2:#E5E9EF;

  /* chữ */
  --ink:#141A24; --ink-2:#4A5566; --ink-3:#5E6878;
  --on-glass:#E6ECF5; --on-glass-2:#9AAAC2; --on-glass-3:#8796AE;

  /* đường kẻ */
  --line:#C5CCD6; --rule:#DCE1E8;

  /* hành động: tra cứu bằng xanh trăng, mua bằng hoàng thổ — không dùng chung.
     Hoàng thổ giữ đúng mã của muihuong: "mua" cùng một nghĩa ở cả hai site. */
  --act-look:#8DB8E8; --act-look-ink:#0E1726;
  --act-buy:#B08A2E;
  --focus:#2F6FA8;

  /* Tám nhóm yếu tố — dùng ở mọi nơi, luôn cùng một nghĩa (như 12 họ mùi của
     muihuong). Chỉ dùng cho đồ hoạ, viền, chấm màu; KHÔNG dùng cho chữ thân bài. */
  --nhom-nhiet:#B4532A; --nhom-am:#2F7F8A; --nhom-am-thanh:#6B5CA5; --nhom-anh-sang:#A2730F;
  --nhom-khong-khi:#4F6475; --nhom-be-mat:#7A5C43; --nhom-nhip:#3E6FA8; --nhom-chat:#8A4C6B;

  /* Bí danh để các thành phần muihuong còn dùng --vol-* và --ho không vỡ. */
  --vol-cool:var(--nhom-am); --vol-mid:var(--act-buy); --vol-warm:var(--nhom-nhiet);
  --ho:var(--nhom-khong-khi);

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

/* CHẾ ĐỘ TỐI theo cài đặt máy — thứ muihuong chưa có. Người đọc giacngungon hay
   mở trang trên giường, đèn đã tắt. Không dùng trắng tinh, không dùng đen tuyền. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#151B26; --paper-2:#1C2432;
    --ink:#E3E8F0; --ink-2:#AEB8C7; --ink-3:#8E99AA;
    --line:#334055; --rule:#283245;
    --focus:#7FA9DB;
    --nhom-nhiet:#E08A63; --nhom-am:#5FB3BE; --nhom-am-thanh:#A595E0; --nhom-anh-sang:#E2B55A;
    --nhom-khong-khi:#93A8BA; --nhom-be-mat:#C49C7D; --nhom-nhip:#7FA9DB; --nhom-chat:#D08AAB;
  }
}

*{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}
img{max-width:100%;height:auto}

.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,.masthead.on-glass .nav a[aria-current]{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}
/* Mau ho mui chi o gach chan: vai mau ho (vang thuoc #b08a2e) chi dat 2,8:1 tren nen nhat,
   duoi muc 4,5:1 cua WCAG cho chu 11,5px. Chu giu mau muc; gach chan phan biet link voi chu thuong. */
.crumb a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--acc,var(--line,currentColor));text-decoration-thickness:1px;text-underline-offset:3px}
.crumb a:hover{color:var(--ink);text-decoration-color:currentColor}
h1{margin:0;font-size:clamp(32px,5vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.lede{font-family:var(--serif);font-size:19px;line-height:1.68;max-width:640px;margin:18px 0 0}
.article p+p{margin-top:16px}
.lede a{color:var(--ink);text-decoration-color:var(--acc,currentColor);text-underline-offset:3px}
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}

/* ---------- 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}

/* ---------- dai bay hoi (trang lo) ---------- */
.scroller{overflow-x:auto;padding-bottom:6px}

/* ---------- bang cau tu (trang lo) ---------- */
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:var(--paper-2)}
.mono{font-family:var(--mono);font-size:13.5px;color:var(--ink-2)}
td.r .mono{color:var(--ink)}

/* ---------- khoang dao dong (trang cau tu) ---------- */
.rows{margin:0;padding:0;list-style:none}
/* ---------- 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 .howto p{color:var(--ink)}
.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}
.tell{font-family:var(--serif);font-size:17px;line-height:1.7;margin:18px 0 0}

/* ---------- luoi tu dien ---------- */
.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.off{opacity:.22}
.empty{font-family:var(--mono);font-size:11px;color:var(--ink-3);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:hover{text-decoration:underline}
.lots .meta{font-size:13.5px;color:var(--ink-2)}
.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 ---------- */
.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)}
/* ---------- 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 h3{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:30px 0 8px}
.article h2+h3{margin-top:18px}
.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){
  .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}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- 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:var(--act-look);border:1px solid var(--glass-line);font-weight:500}
.hero-cta .cta:hover{filter:brightness(1.08)}
.hero-cta .cta.ghost:hover{background:var(--glass-2);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{display:grid;grid-template-columns:34px 1fr auto;gap:0 14px;padding:16px 0;
  text-decoration:none;align-items:baseline}
.parts a::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{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}
@media (max-width:600px){
  .parts a{grid-template-columns:26px 1fr;gap:0 10px}
  .parts em{grid-column:2;margin-top:4px}
}

/* ---------- 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}
}
@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}}

/* ==========================================================================
   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, table.data .mono {
  font-variant-numeric: slashed-zero;
  font-feature-settings: "zero" 1;
}

/* [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. */
.data td.canh{color:var(--warn);font-weight:600}

/* ═══ 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}}

/* ═══ HAI CHAI — trai nghiem mo dau ═══
   Khong giai thich; cho doan, roi lat. Vet mui lan ra bang CSS transition
   khi chai duoc .mo. */

/* ═══ 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. */

/* Kim gan mep phai: lat nhan sang ben trai de no khong tran ra ngoai khung */

.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)}

/* 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. */

/* ==========================================================================
   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:var(--glass-2)}

.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:var(--glass);border-color:var(--glass-line);
  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:var(--glass-2);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){
  /* 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}
  .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}

  /* --- 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}

  /* --- 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:not(.r):not(:last-child){padding-right:14px}
  .article table.data.md td.r{text-align:right}
  /* Cot so canh phai khong phai cot cuoi: chua khoang ho voi cot ke ben (mobile, audit 25/10/2026). */
  .article table.data.md td.r:not(:last-child),.article table.data.md th.r:not(:last-child){padding-right:14px!important}
  .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 --- */
  .entry .howto{padding:20px 18px}

  }

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

/* Ả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)}
/* Câu mở trang chủ và Giới thiệu (13/10/2026): chia dòng cân, không để một chữ
   rơi xuống dòng cuối một mình. Trình duyệt cũ bỏ qua thuộc tính này, vô hại. */
.hero .thesis{text-wrap:balance}

/* ═══ GỖ THƠM CHO XE — trang giới thiệu sản phẩm (15/10/2026) ═══
   Ký hoạ SVG nằm trên nền giấy ấm, khác nền xám xanh của site, để đọc như một
   trang sổ phác thảo dán vào. Nét chì màu than ấm (#2c2924), không dùng --ink:
   --ink ngả xanh, đặt cạnh màu gỗ và màu dầu thì nét trông lạnh và "in máy". */
.kh{display:block;width:100%;height:auto}

/* Menu 8 mục (thêm "Sản phẩm", 16/10/2026): bản Anh cần ~641px ở khoảng cách 18px,
   chỗ trống 645px. Dưới 1200px thu khoảng cách và cỡ chữ để vẫn MỘT hàng tới mốc 981px. */
.masthead .nav{gap:18px}
@media (min-width:981px) and (max-width:1199px){.masthead .nav{gap:15px;font-size:13.5px}}
/* ═══════════════════════════════════════════════════════════════════════
   THÀNH PHẦN RIÊNG CỦA GIACNGUNGON (30/10/2026)
   ═══════════════════════════════════════════════════════════════════════ */
.cham-nhom{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--ho);margin-right:.5em;vertical-align:.06em}
.cham-nhom.lon{width:.5em;height:.5em}

/* Thang tham chiếu (lib/do-hoa.php) */
.thang{display:block;max-width:680px;margin:6px 0 18px;font-family:var(--sans)}
.thang .thang-luoi{stroke:var(--rule);stroke-width:1}
.thang .thang-truc{stroke:var(--ink-3);stroke-width:1}
.thang .thang-so,.thang .thang-dv,.thang .thang-nguon{font:11px var(--mono);fill:var(--ink-3)}
.thang .thang-nhan{font:500 13px var(--sans);fill:var(--ink)}
.thang .thang-khoang{font:400 12px var(--mono);fill:var(--ink-2)}

/* Biểu đồ một đêm */
.dem{display:block;max-width:680px;margin:6px 0 10px}
.dem .dem-luoi{stroke:var(--rule);stroke-width:1}
.dem .dem-so{font:11px var(--mono);fill:var(--ink-3)}
.dem .dem-ten{font:500 13px var(--sans);fill:var(--ink)}
.dem .dem-sai{font:400 11px var(--mono);fill:var(--ink-3)}

/* Thẻ sai số — mọi số đo đi kèm thiết bị và ± sai số, không ngoại lệ */
.the-sai-so{margin:0;padding:12px 14px;border:1px solid var(--line);border-left:3px solid var(--ho);border-radius:6px;background:var(--paper-2)}
.the-sai-so .label{display:block;margin-bottom:4px}
.the-sai-so b{font:500 15px var(--mono);color:var(--ink)}

/* Khối "khi nào không còn là chuyện phòng ngủ" */
.khi-kham{margin-top:36px;padding:22px 24px;border:1px solid var(--line);border-left:3px solid var(--focus);border-radius:8px;background:var(--paper-2)}
.khi-kham .sec{margin-top:0}

/* Cảnh báo hồ sơ mẫu */
.canh-mau{margin:0 0 26px;padding:14px 18px;border:1px dashed var(--ink-3);border-radius:8px;color:var(--ink-2);max-width:680px}

/* Chân trang: dòng pháp lý */
footer .chan-phap-ly{display:block;margin-top:8px;font-size:12.5px;color:var(--ink-3)}

/* Thuật ngữ */
.thuat-ngu dt{font-weight:600;margin-top:22px}
.thuat-ngu dt .en{font:400 12.5px var(--mono);color:var(--ink-3);margin-left:6px}
.thuat-ngu dd{margin:6px 0 0;max-width:680px;color:var(--ink-2)}

.nowrap{white-space:nowrap}
.muted{color:var(--ink-3)}

/* ═══ BÀI THEO CHUYÊN MỤC (nội dung chuyển từ site cũ, 30/10/2026) ═══ */
.crumb span[aria-current]{color:var(--ink-3)}
.crumb span[aria-hidden]{color:var(--ink-3);margin:0 2px}
.bai-h1{font-size:clamp(30px,4.6vw,42px);max-width:760px}
.bai-meta{margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.bai-meta a{color:var(--ink-2)}
.article.bai,.article.chu-de{margin-top:30px}
.tom-tat{margin:26px 0 30px;padding:18px 22px;border-left:3px solid var(--act-buy);background:var(--paper-2);border-radius:0 8px 8px 0;max-width:680px}
.tom-tat p{margin:0;font-family:var(--serif);font-size:18px;line-height:1.7}
.tom-tat .tom-tat-nhan{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.article .tra-loi{font-family:var(--sans);font-size:17px;line-height:1.65;font-weight:500;color:var(--ink);margin:0 0 14px}
.ghi-chu{margin:26px 0;padding:16px 20px;border:1px dashed var(--line);border-radius:8px;max-width:680px}
.ghi-chu h3{margin:0 0 6px!important;font-size:17px}
.ghi-chu p,.ghi-chu li{font-size:16px!important}
.ghi-chu p+p{margin-top:10px}
.hoi-nhanh{margin-top:48px;padding-top:8px;border-top:1px solid var(--rule)}
.hoi-nhanh h3{font-size:17px}
.ghi-chu-bai{max-width:680px;margin:40px 0 0;font-size:14px;color:var(--ink-2);line-height:1.6}
.tac-gia{max-width:680px;margin:28px 0 0;padding:16px 20px;background:var(--paper-2);border-radius:8px;font-size:14.5px;line-height:1.6}
.tac-gia p{margin:0}.tac-gia p+p{margin-top:6px}
.doc-tiep .lots .meta{max-width:520px}
.cong-cu{margin-top:24px}
/* ── Sơ đồ kỹ thuật (bảng so_do, migration 026) — nét theo màu chữ, tự đổi ở chế độ tối ── */
.so-do{margin:40px 0 8px;padding:24px 0 0;border-top:1px solid var(--line)}
.so-do-hinh{color:var(--ink);max-width:720px}
.so-do-hinh svg{display:block;width:100%;height:auto;overflow:visible}
.so-do .sd-net{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.so-do .sd-mo{fill:none;stroke:var(--ink-3);stroke-width:1.2;stroke-dasharray:4 4;stroke-linecap:round}
.so-do .sd-nhan{fill:var(--ink-2);font-family:var(--sans);font-size:13px}
.so-do .sd-nhan-nho{fill:var(--ink-3);font-family:var(--mono);font-size:11px}
.so-do .sd-nhom{stroke:var(--ho,var(--ink));fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.so-do .sd-to{fill:var(--ho,var(--ink));opacity:.16}
.so-do .sd-so circle{fill:var(--paper);stroke:var(--ho,var(--ink));stroke-width:1.6}
.so-do .sd-so text{fill:var(--ink);font-family:var(--mono);font-size:12px;font-weight:600;text-anchor:middle;dominant-baseline:central}
.so-do figcaption{margin-top:14px}
.so-do .so-do-td{font-weight:600;font-size:15px;color:var(--ink)}
.so-do .so-do-ct{margin:8px 0 0 20px;font-size:14px;line-height:1.6;color:var(--ink-2)}
.so-do .so-do-ct li::marker{font-family:var(--mono);font-weight:600;color:var(--ink)}
.so-do .so-do-gc{margin-top:8px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
/* Lộ trình Học (31/10/2026): dòng vị trí dưới tiêu đề bài, nút trước/sau cuối bài */
.hoc-vi-tri{margin:8px 0 0;font-size:14px;color:var(--ink-2)}
.hoc-vi-tri a{color:var(--ink-2)}
.hoc-pager{max-width:760px;margin:40px auto 0}
.nc-dan{margin-top:30px}