@charset "UTF-8";
/* ==========================================================================
   gemlab.vn — gemlab.css  ·  v1.0  ·  02/08/2026

   File này thay thế ~19.000 thuộc tính style nội tuyến trên toàn site.
   Riêng /ruby có 77 KB style nội tuyến trên 178 KB HTML (43%).

   ĐỊNH KIỂU THEO PHẦN TỬ, KHÔNG THEO CLASS — làm được vì nội dung sau khi
   bóc khỏi nopCommerce là HTML ngữ nghĩa rất sạch: cả trang /ruby chỉ có ĐÚNG
   MỘT class. Cấu trúc thật đo được: article > header, section#tabN,
   h3#sec-N-N, nav (mục lục), aside (khối lưu ý), figure+figcaption, table,
   blockquote, ul/ol, sub/sup (công thức hoá học: 103 <sub> + 72 <sup>).

   Chỉ ba class do bước chuẩn hoá sinh ra:
       .tw    khung cuộn ngang bọc bảng   (25 bảng/trang, màn hình 360px)
       .num   ô bảng căn phải  — chuyển từ text-align:right, là quy ước đọc số
       .mid   ô bảng căn giữa
   và một class có sẵn trong nội dung gốc: .related-cluster

   TIẾNG VIỆT: dấu thanh nằm TRÊN nguyên âm nên chiều cao dòng phải rộng hơn
   tiếng Anh. Toàn file không dùng letter-spacing âm cho chữ có dấu, và
   line-height tối thiểu 1.35 cho tiêu đề, 1.7 cho thân bài.
   ========================================================================== */

/* ---------- 1. FONT TỰ LƯU TRỮ ---------------------------------------------
   KHÔNG dùng Google Fonts trên production:
     · CSP hiện tại đặt font-src 'self'
     · bỏ được một phụ thuộc bên thứ ba và một vòng DNS + TLS
     · tránh nhấp nháy chữ khi mạng chậm
   Tải bộ vietnamese + latin, đặt tại /fonts/. Cần đúng 5 file:
     spectral-400.woff2  spectral-600.woff2  spectral-400i.woff2
     plexsans-400.woff2  plexsans-600.woff2
   plexmono chỉ dùng cho số liệu, nạp sau cùng, không chặn hiển thị.
   -------------------------------------------------------------------------- */
/* KHÔNG khai unicode-range. File woff2 đã được rút gọn sẵn về đúng bộ ký tự
   cần dùng (latin + tiếng Việt + Hy Lạp + chỉ số + tiền tệ), nên khai thêm
   unicode-range chỉ gây hại: bản trước giới hạn ở latin+tiếng Việt, tức
   CHẶN LUÔN các chữ Hy Lạp ω ε α δ dùng trong ký hiệu quang học — trình duyệt
   sẽ mượn font hệ thống cho riêng chúng dù font đã có sẵn glyph. */
/* MỘT HỌ CHỮ DUY NHẤT: SPECTRAL.
   ---------------------------------------------------------------------------
   Trước đây ba họ: Spectral cho tiêu đề, IBM Plex Sans cho văn bản, IBM Plex
   Mono cho nhãn và số. Ba họ trên một trang là ba nhịp đọc khác nhau, và đó
   là gốc của cảm giác "chưa đồng nhất".

   Spectral làm được cả ba vai vì nó có sẵn:
     tnum  số đẳng rộng — cột số trong bảng thẳng hàng như font đẳng rộng
     smcp  chữ hoa nhỏ — dùng cho nhãn dữ liệu thay vì mượn font đẳng rộng
     sups/sinf  chỉ số trên và dưới thật
   Đây là lời giải kinh điển của nghề chữ: nhãn dùng chữ hoa nhỏ và số đẳng
   rộng, không cần họ chữ thứ hai.

   NGOẠI LỆ DUY NHẤT — CHỮ HY LẠP. Spectral không có bộ Hy Lạp, mà nội dung
   quang học dùng ω ε α δ hơn 30 chỗ (tia thường/bất thường, chiết suất α β γ).
   Nên có thêm MỘT file 8,8 KB chỉ chứa 73 ký tự Hy Lạp, khai theo unicode-range
   nên trình duyệt chỉ tải khi trang thật sự có chữ Hy Lạp. Ký hiệu toán học
   hiện bằng một dáng chữ trung tính là thông lệ bình thường trong ấn phẩm khoa học.

   Tổng: 4 file, 152 KB — trước là 6 file, 210 KB.
   --------------------------------------------------------------------------- */
@font-face{font-family:Spectral;src:url(/fonts/spectral-400.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(/fonts/spectral-400i.woff2)format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Spectral;src:url(/fonts/spectral-600.woff2)format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Spectral;src:url(/fonts/greek.woff2)format("woff2");
  font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0370-03FF}
@font-face{font-family:Spectral;src:url(/fonts/greek.woff2)format("woff2");
  font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0370-03FF}


/* ---------- 2. TOKEN ------------------------------------------------------ */
:root{
  --paper:#F2F2EE;      /* giấy phòng thí nghiệm — xám-lục nhạt, KHÔNG phải kem ấm */
  --paper-2:#E8E9E3;
  --ink:#12161C;        /* nền trường tối kính hiển vi */
  --ink-2:#1B2230;
  --rline:#B3122F;      /* vạch R₁ của Cr³⁺ tại 694,3 nm */
  --brass:#9A7B3F;      /* đồng thau thân kính hiển vi — chỉ dùng cho hairline */
  --mist:#5C6472;
  /* KÍCH THƯỚC ĐIỀU CHỈNH ĐƯỢC TỪ /admin/giao-dien.php.
     gen.php ghi đè các biến này trong <style> ở <head> mỗi trang, nên đổi
     trong quản trị rồi Xuất bản là có hiệu lực — không phải sửa file CSS. */
  --w-fig:936px;     /* bề rộng hình — 936 = đúng viewBox, tỉ lệ 1,00 */
  --fs-body:16.5px;  /* cỡ chữ thân bài */
  --fs-cap:13.5px;   /* cỡ chữ chú thích hình */
  /* --w (khung ngoài) và --w-doc (cột chữ) đã có sẵn phía trên — dùng lại
     thay vì đẻ thêm tên mới, để admin chỉnh một chỗ là ăn khắp nơi. */
  --mist-d:#8D9AAE;
  --rule:#D3D4CC;
  --rule-d:#2B3444;

  --serif:Spectral,Georgia,"Times New Roman",serif;
  --sans:Spectral,Georgia,"Times New Roman",serif;
  --mono:Spectral,Georgia,"Times New Roman",serif;

  --w:1160px;      /* chiều rộng khung chung */
  --w-doc:760px;   /* chiều rộng cột chữ — khoảng 75 ký tự tiếng Việt */

  /* --- Bốn nhóm sau chỉnh được trong /admin/giao-dien.php ---
     Khai biến ở đây để trang luôn có giá trị mặc định; gen.php chỉ ghi đè
     những biến bạn ĐỔI KHÁC mặc định, nên HTML sạch khi chưa chỉnh gì. */
  --anh-w:560px;      /* ảnh chụp: rộng tối đa */
  --anh-h:460px;      /* ảnh chụp: cao tối đa  */
  --logo-fs:27px;     /* cỡ chữ GemLab.vn      */
  --slogan-fs:11px;   /* cỡ chữ dòng slogan    */
  --hero-pad:60px;    /* khoảng thở trên banner trang chủ */
  --hero-fs:52px;     /* cỡ tối đa của tiêu đề banner     */
  --spec-w:100%;      /* bề rộng hình phổ hấp thụ         */
}

/* ---------- 3. NỀN ------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
/* Nhãn dữ liệu dùng chữ hoa nhỏ; mọi con số dùng bộ đẳng rộng để cột thẳng hàng. */
.eyebrow,.doc-meta dt,th,.crumbs,.sbody .sku,.fig .lb,.fig .en,.fig .axis,
figcaption .nguon,figcaption .schema{font-variant-caps:all-small-caps;letter-spacing:.06em}
table,.doc-meta,.fig,.num,.sfoot .price,.mua .gia{font-variant-numeric:tabular-nums lining-nums}

body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.7 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--rline);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
.eyebrow{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:99}

/* ---------- 4. MASTHEAD --------------------------------------------------- */
.masthead{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 28px}
/* Logo xếp DỌC: tên trên, khẩu hiệu dưới. Trước đây nằm ngang nên khẩu hiệu
   đọc như một mẩu chú thích rời; xếp dưới thì nó thành phụ đề của tên, đúng
   quan hệ giữa hai dòng. Chữ hoa nhỏ thay vì chữ hoa thường — cùng hệ với
   nhãn dữ liệu trên toàn site. */
.mark{display:block;text-decoration:none;flex-shrink:0;line-height:1}
.mark b{display:block;font:600 var(--logo-fs)/1.1 var(--serif);letter-spacing:.004em}
.mark b i{font-style:normal;color:var(--rline)}
.mark span{display:block;margin-top:5px;font:400 var(--slogan-fs)/1 var(--serif);
  font-variant-caps:all-small-caps;letter-spacing:.19em;color:var(--mist);white-space:nowrap}
.mnav{display:flex;gap:30px;align-items:center}
.mnav a{text-decoration:none;font-size:14.5px;font-weight:500;padding:4px 0;
  border-bottom:1.5px solid transparent;white-space:nowrap}
.mnav a:hover,.mnav a[aria-current]{border-bottom-color:var(--rline)}
.mnav a.lookup{font:12.5px var(--mono);letter-spacing:.04em;border:1px solid var(--ink);
  border-radius:2px;padding:7px 14px}
.mnav a.lookup:hover{background:var(--ink);color:var(--paper)}
.burger{display:none;background:none;border:1px solid var(--rule);border-radius:2px;padding:9px 11px;cursor:pointer;line-height:0}

/* ---------- 5. ĐƯỜNG DẪN + TIÊU ĐỀ TRANG --------------------------------- */
.crumbs{font:12px/1.7 var(--mono);color:var(--mist);padding:18px 0 0}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--rline)}
.crumbs span{margin:0 6px;color:var(--rule)}
.doc-head{border-bottom:1px solid var(--ink);padding:10px 0 20px;margin-bottom:34px}
.doc-head h1{font:400 clamp(28px,3.6vw,42px)/1.3 var(--serif);margin:8px 0 0}
.doc-head .sub{font-style:italic;color:var(--mist);margin:10px 0 0;font-size:16.5px}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;
  font:11px/1.7 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mist)}
.doc-meta b{color:var(--ink);font-weight:500}

/* ==========================================================================
   6. .prose — NỘI DUNG BÀI. Đây là phần thay thế toàn bộ style nội tuyến.
   ========================================================================== */
.prose{max-width:var(--w-doc);font-size:var(--fs-body);line-height:1.75}
.prose>*+*{margin-top:1.1em}

/* --- tiêu đề --- */
.prose h2{font:400 clamp(22px,2.5vw,29px)/1.35 var(--serif);
  margin:2.2em 0 .6em;padding-bottom:.3em;border-bottom:1px solid var(--rule)}
/* h3 và h4 CŨNG phải co theo màn hình.
   Đo trên khung 390px: h1 co 42→28, h2 co 29→22, nhưng h3 giữ nguyên 20,5.
   Kết quả h2 chỉ hơn h3 có 7% — mắt không phân biệt được cấp nữa, trong khi
   trên máy tính tỉ lệ là 41%. Thang bậc tiêu đề vỡ đúng ở nơi cần nó nhất,
   vì màn hình hẹp thì người đọc càng dựa vào cỡ chữ để biết mình đang ở đâu. */
.prose h3{font:600 clamp(17px,1.9vw,20.5px)/1.4 var(--serif);margin:1.9em 0 .5em;color:var(--ink)}
.prose h4{font:600 clamp(14px,1.4vw,15px)/1.5 var(--sans);margin:1.5em 0 .4em;
  letter-spacing:.02em;color:#39414E}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
/* Neo mục lục: 222 id trong trang bách khoa, 34 trong mỗi hồ sơ đá quý */
.prose :is(h2,h3,h4)[id]{scroll-margin-top:92px}

/* --- đoạn văn, nhấn mạnh --- */
.prose p{margin:0}
.prose strong{font-weight:600}
/* <em> mang thuật ngữ tiếng Anh chuẩn quốc tế — 424 cái riêng trang bách khoa.
   Giữ nghiêng nhưng đổi màu để đọc được là thuật ngữ, không phải nhấn mạnh. */
.prose em{font-style:italic;color:#4A5260}
.prose sub,.prose sup{font-size:.72em;line-height:0}  /* Al₂O₃ : Cr³⁺ */
.prose sup{vertical-align:.5em}
.prose sub{vertical-align:-.25em}
.prose a{color:var(--rline);text-decoration:none;border-bottom:1px solid rgba(179,18,47,.35)}
.prose a:hover{border-bottom-color:var(--rline)}
.prose hr{border:0;border-top:1px solid var(--rule);margin:2.4em 0}

/* --- danh sách --- */
.prose :is(ul,ol){margin:0;padding-left:1.35em}
.prose li+li{margin-top:.35em}
.prose ul{list-style:none;padding-left:1.1em}
.prose ul>li{position:relative}
.prose ul>li::before{content:"";position:absolute;left:-1.1em;top:.72em;
  width:5px;height:1px;background:var(--brass)}
.prose ol{list-style:decimal}
.prose ol::marker{font-family:var(--mono)}

/* --- section (tab1…tab4 trong hồ sơ đá quý) --- */
.prose section{margin-top:3em;padding-top:2em;border-top:2px solid var(--ink)}
.prose section:first-of-type{margin-top:2em}
.prose section>h2:first-child{border-bottom:0;padding-bottom:0;margin-top:0}

/* --- nav = khối mục lục (5 cái mỗi hồ sơ đá quý) --- */
.prose nav{background:var(--paper-2);border-left:2px solid var(--brass);
  padding:20px 24px;margin:1.8em 0}
.prose nav h2{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border:0;padding:0;margin:0 0 .7em}
.prose nav ul{padding-left:0}
.prose nav li::before{display:none}
.prose nav a{border-bottom:0;color:var(--ink);font-size:15px}
.prose nav a:hover{color:var(--rline)}

/* --- aside = khối lưu ý (10 cái mỗi hồ sơ đá quý) --- */
.prose aside{background:#fff;border:1px solid var(--rule);border-left:3px solid var(--rline);
  padding:16px 20px;margin:1.8em 0;font-size:15.5px}
.prose aside>*+*{margin-top:.6em}
.prose aside p:first-child{font-weight:600}

/* --- blockquote --- */
.prose blockquote{margin:1.8em 0;padding:0 0 0 22px;border-left:2px solid var(--brass);
  font:italic 17px/1.7 var(--serif);color:#39414E}

/* --- BẢNG. 25 bảng mỗi hồ sơ đá quý, 736/952 style nội tuyến nằm ở đây --- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.8em 0;
  border:1px solid var(--rule);background:#fff}
.tw:focus-visible{outline:2px solid var(--rline)}
.prose table{width:100%;border-collapse:collapse;font-size:14.8px;min-width:min(100%,520px)}
.prose caption{text-align:left;font:11px/1.7 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);padding:12px 16px 0}
/* Đầu bảng từ 10,5px lên 12px. Con số 10,5 đặt hồi còn dùng IBM Plex Mono —
   font không chân, nét đều, đọc được ở cỡ rất nhỏ. Spectral là font CÓ CHÂN
   dựng theo dạng chữ hoa nhỏ, nét mảnh dần ở chân, nên cùng 10,5px thì mờ hơn
   hẳn. Đổi font mà giữ nguyên cỡ là bỏ sót. */
.prose thead th{font:500 12px/1.6 var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--mist);text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--ink);white-space:nowrap;background:var(--paper)}
.prose td,.prose tbody th{padding:11px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose tbody th{text-align:left;font-weight:600}
.prose tbody tr:last-child :is(td,th){border-bottom:0}
.prose tbody tr:hover :is(td,th){background:var(--paper)}
/* .num / .mid do bước chuẩn hoá sinh ra từ text-align nội tuyến.
   Số liệu ngọc học dùng font mono để các cột chiết suất, tỉ trọng thẳng hàng. */
.prose .num{text-align:right;font-family:var(--mono);font-size:13.5px;white-space:nowrap}
.prose .mid{text-align:center}

/* --- figure. Sau đợt dọn minh hoạ, số này giảm mạnh --- */
.prose figure{margin:2em 0}
.prose figure img{display:block;width:100%;border:1px solid var(--rule);background:#fff}
/* Selector phải bao CẢ hình chính. Hình chính nằm NGOÀI .prose (nó ở cấp
   .wrap để trải rộng được), nên mọi quy tắc .prose figcaption không áp cho nó
   — đo được: chú thích hình chính 16px trong khi hình trong bài 13,5px.
   Đây là hệ quả trực tiếp của việc chuyển hình chính ra ngoài .prose, và là
   loại lỗi chỉ lộ ra khi đo chứ nhìn lướt không thấy. */
.prose figcaption, figure.lead figcaption{font-size:var(--fs-cap);line-height:1.65;color:var(--mist);
  margin-top:10px;padding-left:14px;border-left:2px solid var(--brass)}
/* Nhãn bắt buộc cho sơ đồ hiện tượng — xem chiến lược minh hoạ §7.2 */
.prose figcaption .nguon, figure.lead figcaption .nguon{display:block;margin-top:5px;
  font:11.5px/1.6 var(--mono);letter-spacing:.03em;color:var(--brass)}
.prose figcaption .schema, figure.lead figcaption .schema{display:block;margin-top:5px;font:11px/1.6 var(--mono);
  letter-spacing:.05em;color:var(--brass)}

/* --- header/footer trong bài --- */
.prose>header{border-bottom:1px solid var(--rule);padding-bottom:1.2em}
.prose>footer{margin-top:3em;padding-top:1.4em;border-top:1px solid var(--rule);
  font-size:14px;color:var(--mist)}

/* --- khối liên kết chủ đề có sẵn trong nội dung gốc --- */
.prose .related-cluster{background:var(--paper-2);padding:20px 24px;margin-top:2.5em;font-size:15px}
.prose .related-cluster a{color:var(--ink)}
.prose .related-cluster a:hover{color:var(--rline)}

/* --- khối thương mại: DUY NHẤT một khối, ở cuối, có nhãn.
       Tường lửa trong firewall.php chặn publish nếu vùng tri thức có giá
       hoặc liên kết sản phẩm NGOÀI khối này. --- */
.zone-commerce{margin-top:3em;border:1px solid var(--rule);border-top:3px solid var(--brass);
  padding:20px 24px;background:#fff}
.zone-commerce::before{content:"Thương mại";display:block;
  font:11px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass);margin-bottom:8px}

/* --- giá tham khảo học thuật trong bài về giá --- */
.prose .ref-price{font-family:var(--mono);font-size:.94em;
  background:var(--paper-2);padding:1px 6px;border-radius:2px;white-space:nowrap}

/* ---------- 7. CHÂN TRANG ------------------------------------------------ */
.site-foot{margin-top:80px;border-top:1px solid var(--ink);padding:38px 0 54px}
.site-foot .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.site-foot h2{font:500 10.5px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);margin:0 0 12px}
.site-foot a{display:block;text-decoration:none;font-size:14px;padding:4px 0;color:#2B333E}
.site-foot a:hover{color:var(--rline)}
.site-foot p{font-size:13.6px;line-height:1.7;color:var(--mist);max-width:40ch;margin:0 0 12px}
.colophon{margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);
  font:11.5px/1.8 var(--mono);color:var(--mist)}

/* ---------- 8. MÀN HÌNH NHỎ ---------------------------------------------- */
@media(max-width:900px){
  .site-foot .cols{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:820px){
  .mnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;padding:8px 28px 18px}
  .mnav.open{display:flex}
  .mnav a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .mnav a.lookup{margin-top:12px;text-align:center}
  .burger{display:block}
  .masthead .wrap{position:relative}
}
@media(max-width:560px){
  .wrap{padding:0 18px}
  body{font-size:16px}
  .prose{font-size:16px}
  /* Bảng tràn viền để tận dụng hết chiều rộng màn hình */
  .tw{margin-left:-18px;margin-right:-18px;border-left:0;border-right:0}
  .prose nav,.prose aside,.zone-commerce{padding-left:16px;padding-right:16px}
  .site-foot .cols{grid-template-columns:1fr}
}

/* ---------- 9. IN ẤN -----------------------------------------------------
   Tài liệu tham chiếu ngọc học sẽ được in ra và mang theo. Bản in phải đọc
   được: bỏ chrome, hiện URL của liên kết, không cắt bảng giữa chừng. -------- */
@media print{
  .masthead,.site-foot,.crumbs,.zone-commerce,.burger{display:none!important}
  body{background:#fff;font-size:11pt;color:#000}
  .prose{max-width:100%}
  .prose a{color:#000;border-bottom:0}
  .prose a[href^="/"]::after{content:" (gemlab.vn" attr(href) ")";font-size:9pt;color:#555}
  .tw{overflow:visible;border:0}
  .prose table{min-width:0;font-size:9.5pt}
  .prose :is(table,figure,aside,blockquote){break-inside:avoid}
  .prose :is(h2,h3,h4){break-after:avoid}
}

/* ---------- 10. GIẢM CHUYỂN ĐỘNG ---------------------------------------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   11. MINH HOẠ SVG SINH TỪ DỮ LIỆU  (admin/figures.php)
   --------------------------------------------------------------------------
   Thay thế 469 ảnh PNG vẽ tay của site cũ. Vì hình nhúng thẳng vào HTML nên
   nó thừa hưởng biến CSS ở đây — đổi hệ màu một chỗ là mọi hình đổi theo,
   và bản in tự chuyển sang mực đen mà không cần file ảnh riêng.
   ========================================================================== */
/* HÌNH CHÍNH — trải hết chiều rộng khung, không bó trong cột chữ.
   .wrap rộng 1160px với padding 28px nên vùng dùng được là 1104px, trong khi
   cột chữ chỉ 760px — thừa 344px không dùng tới. Bảng hằng số là hình mang
   nhiều dữ liệu nhất nên chịu thiệt nhiều nhất khi bị thu nhỏ: ở 760px tỉ lệ
   0,81× và nhãn 11px hiện ra còn 8,9px. Trải hết khung thì 1,18× và 13,0px.
   Đặt ngoài .prose nên không cần âm lề — nó vốn đã ở cấp .wrap. */
figure.lead{margin:6px 0 34px}
figure.lead .figw{border-radius:3px}
figure.lead .fig{min-width:0}
figure.lead figcaption{max-width:var(--w-doc)}

/* BỀ RỘNG HÌNH = 936px, ĐÚNG BẰNG viewBox → TỈ LỆ 1,0.
   Đây là cỡ mà hình được thiết kế để hiển thị: nhãn 11px ra đúng 11px,
   trị số 26px ra đúng 26px.

   Hai lần trước đều lệch khỏi cỡ này theo hai hướng ngược nhau:
     bó trong cột chữ 760px  -> 0,81× -> nhãn 8,9px  (quá nhỏ)
     trải hết khung 1104px   -> 1,18× -> trị số 30,7px (to hơn cả tiêu đề mục)
   Và tệ hơn cả hai: hình chính 1,18× đứng cạnh ba hình 0,81× — chênh 1,6 lần
   trên cùng một trang.

   Cột chữ lệch trái, chừa 372px trống bên phải, nên hình nới sang phải tới
   936px mà KHÔNG cần âm lề. Áp cho cả hình chính lẫn hình trong bài, để mọi
   hình trên trang cùng một tỉ lệ. */
@media(min-width:1024px){
  /* Dùng selector HẬU DUỆ, không phải con trực tiếp.
     Đo trên /ruby: một hình nằm trong <section> lồng trong .prose, nên
     `.prose > figure` không khớp và nó rơi về 100% bề rộng cột — đó là
     "lệch khung giữa các bài", vì bài có section bài không.
     An toàn khi dùng hậu duệ vì gl_vi_tri_chen() đã bảo đảm hình không bao
     giờ lọt vào aside, li, td hay blockquote — những thẻ CÓ lề trong. */
  /* HÌNH VÀ BẢNG RỘNG: NEO MÉP TRÁI, NỚI SANG PHẢI.
     KHÔNG dùng lề âm để căn giữa. Tôi đã thử và sai:

     Đo trên /ruby, khung nhìn 1385px —
        khung ngoài trang        105 → 1265
        H1, đoạn văn, bảng thường  mép trái 133
        bảng rộng + hình (lề −88)  mép trái  45   ← NGOÀI cả khung ngoài

     Lề âm đẩy nội dung rộng ra ngoài khung trang và phá mép trái chung của
     cả trang. Mép trái 133 là điểm neo mà H1, chữ và mọi bảng thường cùng
     dùng — và H1 (133 → 1237) đã cho thấy quy ước sẵn có của site: NEO TRÁI,
     NỚI SANG PHẢI.

     Trang là một cột đọc từ trái sang; mép trái là thứ mắt bám vào. Thứ rộng
     hơn phải nới về phía không có gì, không phải kéo lệch cái neo đó. */
  figure.lead > .figw,
  .prose figure > .figw,
  .prose .tw.rong,
  /* KHỐI CÔNG CỤ cũng thuộc nhóm này.
     Đo trên /thiet-ke-cat-mai-96-index: hình 936px, bảng trình tự 936px,
     nhưng CÔNG CỤ chỉ 760px — khối HẸP NHẤT trang, kẹp giữa hai khối rộng.
     Mà nó là thiết bị chính: chứa mặt cắt, bánh chia 96 và bảng kết quả.

     Nới ra 936px cho ba cái lợi đo được:
       · thẳng hàng với hình và bảng, hết cảm giác thụt vào
       · hàng ô nhập từ 2 hàng xuống 1 — "Đường kính" hết đứng lẻ
       · ô nhập rộng thêm, đỡ chật sau khi thêm nút −/+ hai bên */
  .prose .instrument{width:var(--w-fig);max-width:calc(100vw - 56px)}

  /* BẢNG DỮ LIỆU RỘNG ĐƯỢC TRÀN RA BẰNG HÌNH.
     Ảnh chụp trên màn 1349px cho thấy bảng hằng số bị CẮT CỤT ở cột "Đặc
     tính quang học" ngay trên desktop — vì .tw bám cột chữ 760px trong khi
     nội dung bảng ~978px. Hình thì đã được tràn ra 936px, bảng thì không.
     Bảng hằng số là DỮ LIỆU, không phải văn xuôi; ràng nó vào bề rộng đọc
     thoải mái của cột chữ là áp sai loại nội dung. */
  /* ĐỆM Ô HẸP HƠN CHO BẢNG RỘNG.
     Nới khung ra 936px vẫn CHƯA ĐỦ: bảng hằng số 8 cột cần 994px, còn thừa
     60px nên cột "Đặc tính quang học" vẫn cụt. Riêng đệm ô đã chiếm 256px
     (16px × 2 × 8 cột).

     Đo trực tiếp trên trang thật: đệm 13px còn thừa 12px, đệm 12px vừa khít.
     Lấy 11px để có biên — và đã thử với tên dài hơn "Tourmalin (elbait)"
     sẽ xuất hiện sau khi nạp lại dữ liệu loài, vẫn vừa.

     Chỉ áp cho .rong: bảng ít cột giữ đệm 16px cho thoáng. */
  .prose .tw.rong :is(td, th){padding-left:11px;padding-right:11px}
  .prose .tw.rong caption{padding-left:11px;padding-right:11px}
}

/* DẤU HIỆU CÒN CUỘN ĐƯỢC — áp ở MỌI bề rộng, không riêng điện thoại.
   Bảng bị cắt mà không có dấu hiệu gì thì người đọc tưởng đó là hết bảng.
   Bóng mờ hai mép chỉ hiện khi thực sự còn nội dung bị che. */
.tw{
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  #fff 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(12,22,38,.16), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(12,22,38,.16), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:40px 100%, 40px 100%, 16px 100%, 16px 100%;
  background-attachment:local, local, scroll, scroll}

/* GIỮ DÍNH CỘT ĐẦU ở mọi bề rộng, không riêng điện thoại — bảng tra bị cuộn
   ngang trên desktop cũng mất tên loài y như trên điện thoại. */
.tw th[scope="row"],
.tw tbody td:first-child{
  position:sticky;left:0;z-index:2;background:var(--paper);
  box-shadow:1px 0 0 var(--rule), 3px 0 7px -4px rgba(12,22,38,.30)}
.tw thead th:first-child{position:sticky;left:0;z-index:3;background:var(--paper)}
.tw tbody tr:hover th[scope="row"],
.tw tbody tr:hover td:first-child{background:var(--paper-2)}

/* Khung cuộn ngang cho hình. Đo được: ở cột chữ 354px (iPhone 390px) tỉ lệ
   hình còn 0,39× và chữ nhỏ nhất thành 3,7px — không đọc được. Đặt min-width
   để hình không co dưới ngưỡng, người dùng cuộn ngang thay vì nheo mắt. */
.figw{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:2px}
.figw:focus-visible{outline:2px solid var(--rline);outline-offset:2px}
.fig{width:100%;height:auto;display:block;background:var(--ink);border-radius:2px}
@media(max-width:820px){
  .fig,figure.lead .fig{min-width:820px}
  .figw{margin-left:-18px;margin-right:-18px;border-radius:0}
  .figw .fig{border-radius:0}
}
/* CỠ CHỮ PHẢI KHỚP VỚI figures.php.
   CSS thắng thuộc tính trình bày trong SVG — đó là thiết kế có chủ ý để đổi
   hệ màu và bản in được. Nhưng nó cũng nghĩa là nâng cỡ chữ trong figures.php
   mà quên sửa ở đây thì KHÔNG CÓ TÁC DỤNG GÌ. Đã dính đúng lỗi đó: SVG xuất
   ra font-size="11" nhưng màn hình vẫn hiện 8,0px vì dòng .fig .lb bên dưới
   còn ghi 9.5px. Sửa hai chỗ thì phải sửa cả hai. */
.fig text{font-family:var(--mono);fill:#96A1B1}
.fig .cap{font-family:var(--serif);font-size:15.5px;fill:#EDEFF2;font-weight:600}
.fig .tick{font-size:11.5px;fill:#6C7788}
.fig .axis{font-size:11px;fill:#7C8798;letter-spacing:.1em}
.fig .note{font-size:11.5px;fill:#96A1B1;font-style:italic}
.fig .lb{font-size:11px;fill:#96A1B1;letter-spacing:.06em}
.fig .val{font-size:16.5px;fill:#EDEFF2}
/* Chữ tiếng Việt trong hình dùng font chữ thường, không dùng font đẳng rộng.
   Trước đây khai bằng thuộc tính font-family ngay trên thẻ <text> — và CSS
   thắng thuộc tính trình bày, nên "Ba phương" và "Một trục, âm" bị vẽ bằng
   IBM Plex Mono, giãn ra như máy chữ. Cùng loại lỗi với cỡ chữ hôm trước:
   khai ở hai nơi thì phải sửa ở nơi CSS. */
.fig .vi{font-family:var(--sans);letter-spacing:0}
.fig .en{font-size:11px;fill:#6C7788}
.fig .grid{stroke:var(--rule-d);stroke-width:1}
.fig .axis-l{stroke:var(--mist-d);stroke-width:1}
.fig .box{stroke:var(--rule-d)}
.fig .cell{fill:var(--ink-2);stroke:var(--rule-d)}

/* phổ hấp thụ */
.fig .curve{fill:none;stroke:#E8465F;stroke-width:2;stroke-linejoin:round}
.fig .fill{fill:rgba(179,18,47,.16)}
.fig .mask{fill:var(--ink)}
.fig .mark{stroke:var(--brass);stroke-width:1;stroke-dasharray:2 3;opacity:.65}
.fig .marklb{font-size:11.5px;fill:#C7A461}

/* thang Mohs */
.fig .moc{font-size:11px;fill:#6C7788}
.fig .dai{fill:var(--rline)}
.fig .daiLb{font-size:12.5px;fill:#EDEFF2;font-weight:500}
.fig .nguong{stroke:#C7A461;stroke-width:1;stroke-dasharray:3 3}

/* biểu đồ chiết suất × tỉ trọng */
.fig .plot{fill:var(--ink-2);stroke:var(--rule-d)}
.fig .sp{fill:rgba(141,154,174,.16);stroke:var(--mist-d);stroke-width:1}
.fig .sp.hi{fill:rgba(179,18,47,.30);stroke:#E8465F;stroke-width:1.6}
.fig .splb{font-size:11px;fill:#8B96A6}
.fig .splb.hi{font-size:11px;fill:#E8465F;font-weight:500}

@media print{
  /* Bản in: nền trắng mực đen. Đây là lợi thế SVG không thể có với PNG —
     cùng một hình phục vụ cả màn hình tối lẫn giấy trắng. */
  .fig{background:#fff;border:1px solid #999}
  .fig text{fill:#000}
  .fig .cap{fill:#000}
  .fig .tick,.fig .axis,.fig .note,.fig .lb,.fig .en,.fig .moc,.fig .splb{fill:#444}
  .fig .val,.fig .daiLb{fill:#000}
  .fig .mask{fill:#fff}
  .fig .cell,.fig .plot{fill:#fff;stroke:#999}
  .fig .sp{fill:rgba(0,0,0,.06);stroke:#666}
  .fig .sp.hi{fill:rgba(0,0,0,.18);stroke:#000}
}

/* bổ sung cho bản hình v2 */
.fig .sub{font-family:var(--mono);font-size:11px;fill:#C7A461;letter-spacing:.08em}
/* dashboard hằng số */
.fig .track{fill:var(--rule-d)}
.fig .range{fill:var(--rline)}
.fig .valbig{font-size:26px;fill:#EDEFF2}
.fig .glyph{stroke:var(--mist-d);stroke-width:1.2;fill:none}
.fig .glyph2{stroke:#C7A461;stroke-width:1.4;fill:#C7A461}
@media print{.fig .track{fill:#DDD}.fig .range{fill:#000}.fig .valbig{fill:#000}
  .fig .glyph{stroke:#444}.fig .glyph2{stroke:#000;fill:#000}}
.fig .vuot{fill:#C7A461}
@media print{.fig .vuot{fill:#000}}

/* ==========================================================================
   12. TRANG CHỦ — LẤY NGUYÊN TỪ BẢN MẪU gemlab-mau-thiet-ke-v2.html
   --------------------------------------------------------------------------
   Chép nguyên văn, KHÔNG viết lại. Bản trước tôi tự dựng lại bố cục theo trí
   nhớ và ra một trang khác hẳn: sai class, sai thứ tự khối, mất hẳn dải chỉ số
   dưới máy đo phổ và mất khối "Đá quý đang có".
   Bản mẫu là hợp đồng về giao diện — nên khi có bản mẫu thì chép, không diễn giải.
   Chỉ bỏ những khối đã có ở mục 1–11 phía trên (token, reset, masthead) để
   không khai trùng.
   ========================================================================== */
/* ================= HERO ================= */
.hero{padding:var(--hero-pad) 0 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:56px;align-items:start}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,4.1vw,var(--hero-fs));line-height:1.24;letter-spacing:-.005em;
  margin:16px 0 0;
}
.hero h1 em{font-style:italic;color:var(--rline)}
.hero .lede{
  font-size:17px;line-height:1.72;color:#39414E;margin:22px 0 0;max-width:44ch;
}
.hero .lede strong{font-weight:600;color:var(--ink)}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{
  display:inline-block;text-decoration:none;font-size:14.5px;font-weight:500;
  padding:12px 22px;border-radius:2px;border:1px solid var(--ink);
  transition:.15s;
}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--rline);border-color:var(--rline)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- THIẾT BỊ PHỔ (chữ ký của trang) ---------- */
.instrument{
  background:var(--ink);border-radius:3px;overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(18,22,28,.6);
}
.inst-head{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--rule-d);flex-wrap:wrap;
}
.inst-head .t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:#C7A461}
.inst-head .s{font-family:var(--mono);font-size:11px;color:var(--mist-d)}
.inst-
.spec-svg{width:var(--spec-w);max-width:100%;height:auto;display:block;margin:0 auto}
.inst-tabs{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule-d)}
.inst-tabs button{
  flex:1 1 auto;background:none;border:0;border-right:1px solid var(--rule-d);
  color:var(--mist-d);font-family:var(--sans);font-size:13px;font-weight:500;
  padding:13px 8px;cursor:pointer;transition:.15s;min-width:88px;
}
.inst-tabs button:last-child{border-right:0}
.inst-tabs button:hover{color:#fff;background:var(--ink-2)}
.inst-tabs button[aria-selected="true"]{
  color:#fff;background:var(--ink-2);
  box-shadow:inset 0 2px 0 var(--rline);
}
.inst-foot{
  padding:14px 20px 18px;border-top:1px solid var(--rule-d);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:14px 18px;
}
.rd{min-width:0}
.rd dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist-d);line-height:1.7}
.rd dd{font-family:var(--mono);font-size:14px;color:#EDEFF2;line-height:1.55;
  overflow-wrap:break-word}
.rd dd em{font-style:normal;color:#C7A461}

/* ================= BA CHỨC NĂNG ================= */
.functions{padding:78px 0 0}
.sec-head{border-top:1px solid var(--ink);padding-top:14px;margin-bottom:34px}
.sec-head h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.6vw,31px);
  line-height:1.35;margin-top:6px;
}
.sec-head p{color:var(--mist);font-size:15px;margin-top:8px;max-width:62ch}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--rule)}
.fcard{padding:28px 28px 30px;border-right:1px solid var(--rule);position:relative}
.fcard:last-child{border-right:0}
.fcard:first-child{padding-left:0}
.fcard h3{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.4;margin:10px 0 4px}
.fcard .en{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mist);
  text-transform:uppercase}
.fcard p{font-size:14.8px;color:#3D4550;margin:12px 0 18px;line-height:1.7}
.fcard a{font-family:var(--mono);font-size:12.5px;letter-spacing:.03em;text-decoration:none;
  border-bottom:1px solid var(--rline);padding-bottom:2px;color:var(--rline)}
.fcard a:hover{background:var(--rline);color:var(--paper);border-bottom-color:transparent}

/* ================= CHỈ MỤC MẪU VẬT ================= */
.index{padding:78px 0 0}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.specimens{width:100%;border-collapse:collapse;min-width:720px}
table.specimens caption{
  text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);padding-bottom:12px;
}
table.specimens th{
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist);text-align:left;
  padding:10px 14px 10px 0;border-bottom:1px solid var(--ink);white-space:nowrap;
}
table.specimens th.num,table.specimens td.num{text-align:right;padding-right:20px}
table.specimens td{
  padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);
  font-size:14.5px;vertical-align:baseline;
}
table.specimens td.num{font-family:var(--mono);font-size:13.5px;white-space:nowrap}
table.specimens tbody tr:hover td{background:var(--paper-2)}
td.nm a{font-family:var(--serif);font-size:17px;font-weight:600;text-decoration:none;
  line-height:1.4}
td.nm a:hover{color:var(--rline)}
td.nm span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--mist);text-transform:uppercase;line-height:1.7}
.chip{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  padding:2px 7px;border:1px solid var(--rule);border-radius:2px;color:var(--mist);
  white-space:nowrap;
}
.chip.vn{border-color:var(--rline);color:var(--rline)}
.more{margin-top:26px;font-family:var(--mono);font-size:12.5px}
.more a{color:var(--rline);text-decoration:none;border-bottom:1px solid var(--rline)}

/* ================= BÁCH KHOA ================= */
.glossary{margin-top:78px;background:var(--ink);color:#E7EAEE;border-radius:3px;
  padding:44px 40px 46px}
.gl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:center}
.glossary h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.7vw,32px);
  line-height:1.35;margin:10px 0 0;color:#fff}
.glossary p{color:#A9B4C2;font-size:15.2px;margin-top:14px;line-height:1.72}
.gl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--rule-d);
  border:1px solid var(--rule-d);border-radius:2px;overflow:hidden}
.gl-stats div{background:var(--ink-2);padding:20px 18px}
.gl-stats b{display:block;font-family:var(--mono);font-size:27px;font-weight:400;color:#fff;
  line-height:1.3}
.gl-stats span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mist-d);line-height:1.7}
.gl-terms{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px}
.gl-terms a{font-family:var(--mono);font-size:12px;text-decoration:none;color:#C6CFDA;
  border:1px solid var(--rule-d);border-radius:2px;padding:5px 10px}
.gl-terms a:hover{border-color:#C7A461;color:#fff}

/* ================= BẢN GHI MẪU VẬT (vùng thương mại) ================= */
.zone-tag{
  display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 9px;border:1px solid var(--brass);color:var(--brass);
  border-radius:2px;
}
.stock{padding:78px 0 0}
.sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:6px}
.spec{
  border:1px solid var(--rule);border-radius:2px;background:#fff;
  display:flex;flex-direction:column;overflow:hidden;
}
.spec .plate{
  height:5px;background:linear-gradient(90deg,#6D00A8,#0062FF,#00DC64,#FFBE00,#EE0E10);
}
.spec .s
.spec .sku{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--mist)}
.spec h3{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.4;margin:4px 0 2px}
.spec .vari{font-size:13.5px;color:var(--mist);line-height:1.6}
.spec dl{margin-top:16px;border-top:1px solid var(--rule)}
.spec dl>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--rule)}
.spec dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mist);line-height:1.8;flex-shrink:0}
.spec dd{font-family:var(--mono);font-size:12.5px;text-align:right;line-height:1.8;
  overflow-wrap:anywhere}
.spec dd a{color:var(--rline);text-decoration:none;border-bottom:1px solid var(--rline)}
.spec .sfoot{padding:16px 20px 20px;display:flex;align-items:baseline;
  justify-content:space-between;gap:12px;flex-wrap:wrap}
.spec .price{font-family:var(--mono);font-size:17px;font-weight:500}
.spec .buy{
  font-family:var(--sans);font-size:13.5px;font-weight:500;text-decoration:none;
  border:1px solid var(--ink);border-radius:2px;padding:8px 16px;transition:.15s;
}
.spec .buy:hover{background:var(--ink);color:var(--paper)}
.spec.sold{opacity:.72}
.spec.sold .plate{filter:saturate(.15)}
.spec .soldtag{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mist);border:1px solid var(--rule);
  border-radius:2px;padding:8px 14px}
.disclosure{
  margin-top:26px;border-left:3px solid var(--rline);background:var(--paper-2);
  padding:18px 22px;font-size:14.6px;line-height:1.72;color:#333B46;
}
.disclosure strong{font-weight:600;color:var(--ink)}
@media(max-width:900px){.sgrid{grid-template-columns:1fr}}

/* ================= NGUYÊN TẮC ================= */
.principle{padding:78px 0 0}
.pr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--rule)}
.pr{padding:26px 30px 28px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pr:nth-child(2n){border-right:0}
.pr:nth-child(odd){padding-left:0}
.pr h4{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.45;margin:8px 0 0}
.pr p{font-size:14.6px;color:#3D4550;margin-top:9px;line-height:1.7}

/* ================= FOOTER ================= */
footer{margin-top:80px;border-top:1px solid var(--ink);padding:38px 0 54px}
.fgrid2{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px}
.fcol h5{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);margin-bottom:12px}
.fcol a{display:block;text-decoration:none;font-size:14px;padding:4px 0;color:#2B333E}
.fcol a:hover{color:var(--rline)}
.fcol p{font-size:13.6px;color:var(--mist);line-height:1.7;max-width:40ch}
.colophon{margin-top:34px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;color:var(--mist);line-height:1.8}

/* ================= RESPONSIVE ================= */
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .gl-grid{grid-template-columns:1fr;gap:30px}
  .fgrid2{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:820px){
  .mnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    border-bottom:1px solid var(--rule);flex-direction:column;align-items:stretch;gap:0;
    padding:8px 28px 18px}
  .mnav.open{display:flex}
  .mnav a{padding:12px 0;border-bottom:1px solid var(--rule)}
  .mnav a.lookup{margin-top:12px;text-align:center;border:1px solid var(--ink)}
  .burger{display:block}
  .masthead 
  .fgrid{grid-template-columns:1fr}
  .fcard{border-right:0;border-bottom:1px solid var(--rule);padding-left:0;padding-right:0}
  .fcard:last-child{border-bottom:0}
  .pr-grid{grid-template-columns:1fr}
  .pr{border-right:0;padding-left:0;padding-right:0}
  .glossary{padding:32px 24px 34px;border-radius:0;margin-left:-28px;margin-right:-28px}
  .gl-stats{grid-template-columns:1fr}
}
@media(max-width:560px){
  
  .fgrid2{grid-template-columns:1fr}
  .hero{padding-top:38px}
  .glossary{margin-left:-20px;margin-right:-20px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
:focus-visible{outline:2px solid var(--rline);outline-offset:3px}

/* trang chỉ mục bài viết & thư mục tham khảo */
.prose.lst section.cum{margin-top:2.4em}
.prose.lst h2{display:flex;align-items:baseline;gap:12px}
.prose.lst h2 b{font:400 12px var(--mono);color:var(--brass);font-weight:500}
.prose ul.ds{padding-left:0;list-style:none}
.prose ul.ds>li{border-bottom:1px solid var(--rule);padding:11px 0;position:relative}
.prose ul.ds>li::before{display:none}
.prose ul.ds a{font:600 16.5px/1.45 var(--serif);border-bottom:0}
.prose ul.ds span{display:block;font-size:13.8px;color:var(--mist);margin-top:3px;line-height:1.6}
.prose ol.refs{padding-left:1.6em;font-size:15px}
.prose ol.refs li{margin-top:.8em;line-height:1.65}
.prose ol.refs .au{font-weight:600}
.prose .en{font:11px var(--mono);letter-spacing:.06em;color:var(--mist);text-transform:uppercase}

/* bách khoa thuật ngữ dựng từ dữ liệu */
.prose .azbox{background:var(--paper-2);border-left:2px solid var(--brass);padding:20px 24px;margin:0 0 2.4em}
.prose .azbox h2{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border:0;padding:0;margin:0 0 .8em}
.prose p.az{font-size:14px;line-height:1.9;margin:0}
.prose p.az b{display:inline-block;min-width:1.4em;font:600 13px var(--mono);color:var(--rline)}
.prose p.az a{border-bottom:0;color:var(--ink)}
.prose p.az a:hover{color:var(--rline);border-bottom:1px solid var(--rline)}
.prose.bk h2{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.prose.bk h2 b{font:400 12px var(--mono);color:var(--brass);font-weight:500}
.prose.bk h2 em{font-style:italic;font-size:.72em;color:var(--mist);font-weight:400}
.prose.bk>p[id]{padding:12px 0 12px 16px;border-left:2px solid var(--rule);margin-top:.9em}
.prose.bk>p[id]:target{border-left-color:var(--rline);background:var(--paper-2)}
.prose.bk>p[id] strong{font-size:16.5px}

/* ==========================================================================
   13. VÙNG THƯƠNG MẠI — trang mẫu vật, danh mục, đặt hàng
   ========================================================================== */
.spec-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;margin-top:8px}
.sd-anh{position:sticky;top:24px;align-self:start}
.sd-anh img,.sd-anh .plate{width:100%;height:auto;display:block;border-radius:3px;background:var(--ink)}
.sd-anh img+img{margin-top:10px}
.mua{border:1px solid var(--ink);border-radius:3px;padding:20px 22px;margin-bottom:24px}
.mua .gia{font:400 27px/1.2 var(--mono);margin-bottom:14px}
.mua .btn{width:100%;text-align:center}
.mua .doc{margin-top:12px}
.mua.sold{border-color:var(--rule);background:var(--paper-2)}
.soldtag{display:inline-block;font:11px var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mist);border:1px solid var(--rule);border-radius:2px;padding:5px 10px}
table.sd-bang{width:100%;border-collapse:collapse;font-size:14.8px}
table.sd-bang caption{text-align:left;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--mist);padding-bottom:10px}
table.sd-bang th{text-align:left;font-weight:500;color:var(--mist);width:40%;
  padding:10px 0;border-bottom:1px solid var(--rule);font-size:13.5px}
table.sd-bang td{padding:10px 0;border-bottom:1px solid var(--rule)}
.sd-ct{margin-top:26px;border-left:2px solid var(--brass);padding:14px 0 14px 18px}
.sd-ct h2{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);border:0;padding:0;margin:0 0 .5em}
.sd-ct p{font-size:15px;margin:0 0 8px}

.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px;margin-top:26px}
.spec{border:1px solid var(--rule);border-radius:3px;overflow:hidden;background:#fff;
  display:flex;flex-direction:column}
.spec .plate{width:100%;height:auto;display:block}
.spec.sold{opacity:.62}
.sbody{padding:16px 18px;flex:1}
.sbody .sku{font:11px var(--mono);letter-spacing:.08em;color:var(--mist)}
.sbody h3{font:600 18px/1.35 var(--serif);margin:5px 0 3px}
.sbody h3 a{text-decoration:none;color:inherit}
.sbody h3 a:hover{color:var(--rline)}
.sbody .vari{font-size:13px;color:var(--mist);margin-bottom:12px}
.sbody dl{margin:0;font-size:13px}
.sbody dl>div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid var(--rule)}
.sbody dt{color:var(--mist)}
.sbody dd{margin:0;text-align:right}
.sfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:13px 18px;border-top:1px solid var(--ink)}
.sfoot .price{font:400 16px var(--mono)}
.sfoot .buy{font:12.5px var(--mono);text-decoration:none;color:var(--rline);
  border-bottom:1px solid var(--rline);padding-bottom:2px}
.zone-commerce{border-left:2px solid var(--brass);background:var(--paper-2);
  padding:14px 18px;border-radius:2px;margin-top:8px}
.zone-commerce p{font-size:14.2px;color:#3D4550;margin:0}

.dathang{max-width:940px}
.dh-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:38px;margin-top:8px}
.dh-form label{display:block;font:11px var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--mist);margin:16px 0 5px}
.dh-form label .phu{text-transform:none;letter-spacing:0;font-family:var(--sans)}
.dh-form input,.dh-form textarea{width:100%;padding:11px 13px;border:1px solid var(--rule);
  border-radius:3px;font:15px/1.6 var(--sans);background:#fff;color:var(--ink)}
.dh-form input:focus,.dh-form textarea:focus{outline:2px solid var(--rline);outline-offset:1px;border-color:var(--rline)}
.dh-form .dongy{display:flex;gap:10px;align-items:flex-start;margin:20px 0 18px;
  font:14.2px/1.6 var(--sans);text-transform:none;letter-spacing:0;color:var(--ink)}
.dh-form .dongy input{width:auto;margin-top:3px}
.dh-form .btn{width:100%;text-align:center}
.dh-tom{background:var(--paper-2);border:1px solid var(--rule);border-radius:3px;padding:20px 22px;align-self:start}
.dh-tom h2{font:500 11px/1.6 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--mist);border:0;padding:0;margin:0 0 14px}
.dh-tom dl{margin:0;font-size:14px}
.dh-tom dl>div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--rule)}
.dh-tom dt{color:var(--mist)}
.dh-tom dd{margin:0;text-align:right}
.dh-tom dd.gia{font:400 17px var(--mono)}
.prose aside.loi{border-left-color:var(--rline)}
.prose aside.loi ul{margin:8px 0 0 18px}

@media(max-width:900px){
  .spec-detail,.dh-grid{grid-template-columns:1fr;gap:28px}
  .sd-anh{position:static}
}

/* ==========================================================================
   14. ĐIỆN THOẠI — đo trên khung nhúng 390px, ngày 03/08/2026
   ==========================================================================
   Bốn vấn đề đo được và cách xử lý:

   1. 17/25 bảng và cả 4 hình phải cuộn ngang mà KHÔNG có dấu hiệu nào cho
      biết. Người đọc thấy nội dung cụt ở mép phải và tưởng đó là hết.
   2. Đầu trang dính cao 79px — 9,4% màn hình 844px, chiếm chỗ vĩnh viễn.
      Nguyên nhân là logo xếp dọc, vốn hợp lý trên máy tính.
   3. 39 vùng bấm dưới 44px; nặng nhất là liên kết mục lục chỉ cao 19px.
   4. Chữ trong hình còn 9,6px ở tỉ lệ 0,88×.
   ========================================================================== */

/* --- 1. BÓNG CUỘN: cho biết còn nội dung bên phải ---
   Kỹ thuật thuần CSS, không cần JS: hai lớp nền `local` trôi theo nội dung và
   che hai lớp bóng `scroll` đứng yên. Cuộn hết thì lớp local phủ kín bóng, nên
   bóng tự biến mất — đúng lúc không còn gì để báo nữa. */
.tw{
  background:
    linear-gradient(90deg, var(--paper) 40%, rgba(242,242,238,0)) left / 26px 100% no-repeat local,
    linear-gradient(90deg, rgba(242,242,238,0), var(--paper) 60%) right / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(18,22,28,.20), transparent) left / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(18,22,28,.20), transparent) right / 11px 100% no-repeat scroll;
}
.figw{
  background:
    linear-gradient(90deg, var(--ink) 40%, rgba(18,22,28,0)) left / 26px 100% no-repeat local,
    linear-gradient(90deg, rgba(18,22,28,0), var(--ink) 60%) right / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(199,164,97,.38), transparent) left / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(199,164,97,.38), transparent) right / 11px 100% no-repeat scroll;
}

@media(max-width:820px){
  /* --- 2. Đầu trang gọn lại. Trên điện thoại, mỗi pixel dính là pixel
         lấy mất của nội dung. Logo về một dòng, khẩu hiệu nhỏ hơn. --- */
  .masthead .wrap{padding:10px 18px}
  .mark b{font-size:21px}
  .mark span{margin-top:2px;font-size:9.5px;letter-spacing:.15em}

  /* --- 3. Vùng bấm đủ ngón tay. 44px là ngưỡng của cả Apple lẫn Google;
         liên kết mục lục đang cao 19px, tức chưa tới một nửa. --- */
  .prose nav a,.prose nav li>a{display:block;padding:11px 0;line-height:1.4}
  .mnav a{padding:12px 0}
  .crumbs a{display:inline-block;padding:6px 0}
  .prose ul.ds>li{padding:14px 0}
  .sfoot .buy,.fcard a,.more a{display:inline-block;padding:9px 0}

  /* --- 4. Chữ trong hình: nới ngưỡng cuộn từ 820 lên 880px, tỉ lệ 0,88×
         lên 0,94× — nhãn nhỏ nhất từ 9,6px lên 10,3px. Đổi lại phải cuộn
         thêm một đoạn, nhưng cuộn được thì hơn là đọc không ra. --- */
  .fig,figure.lead .fig{min-width:880px}

  /* Bảng dữ liệu: nới ô cho dễ đọc trên màn hình nhỏ */
  .prose td,.prose th{padding-left:12px;padding-right:12px}
}

@media(max-width:480px){
  .mark b{font-size:19px}
  .mark span{font-size:9px;letter-spacing:.13em}
  .masthead .wrap{padding:9px 16px}
  .wrap{padding:0 16px}
}

/* --- ẢNH CHỤP MẪU VẬT ---
   Bản trước cho ảnh width:100% nên một ảnh VUÔNG 1056×1056 giãn ra đúng 900px
   — bằng chiều rộng các biểu đồ dữ liệu, và cao gần hết một màn hình.
   Đó là lỗi thứ bậc: biểu đồ là nội dung chính, ảnh chỉ minh hoạ, mà lại cùng cỡ.

   Nay chặn theo CẢ HAI CHIỀU và để khung ôm sát ảnh:
     · rộng tối đa 560px — hẹp hơn hẳn cột chữ 900px, nên đọc ra ngay là
       hình minh hoạ chứ không phải hình chính
     · cao tối đa 460px — ảnh vuông hay ảnh dọc không còn chiếm trọn màn hình
     · KHÔNG cắt xén: dùng max-width/max-height chứ không object-fit:cover,
       vì cắt một ảnh mẫu vật có thể cắt mất chính viên đá
   Ảnh ngang 1200×526 sẽ ra 560×246; ảnh vuông 1056 ra 460×460. --- */
figure.anh{margin:32px 0;width:fit-content;max-width:min(var(--anh-w), 100%)}
figure.anh img{display:block;max-width:100%;max-height:var(--anh-h);width:auto;height:auto;
  border-radius:2px;border:1px solid var(--rule);background:var(--paper-2)}
figure.anh figcaption{font-size:var(--fs-cap);line-height:1.6;color:var(--mist);
  margin-top:10px;padding-left:13px;border-left:2px solid var(--brass);max-width:520px}
figure.anh figcaption .nguon{display:block;margin-top:4px;font:11px/1.6 var(--mono);
  font-variant-caps:all-small-caps;letter-spacing:.07em;color:var(--brass)}

@media(max-width:820px){
  /* Trên điện thoại cột chữ chỉ 339px nên ảnh dùng trọn bề ngang, nhưng vẫn
     chặn chiều cao để không phải cuộn hết một màn hình mới qua được một ảnh. */
  figure.anh{width:auto;max-width:100%;margin:24px 0}
  figure.anh img{max-height:340px;width:100%;object-fit:cover}
}

/* --- KHỐI PHỔ TƯƠNG TÁC trên /pho-hap-thu-da-quy ---
   Dùng lại lớp .instrument của trang chủ, thêm ba thứ trang chủ không có:
   dòng đọc số, ô chọn phổ so sánh, và vạch chẩn đoán bấm được. --- */
.ph-may{margin:0 0 30px}
.ph-doc{background:#0E1219;border-top:1px solid var(--rule-d);
  padding:11px 16px;font:400 14px/1.5 var(--mono);color:var(--mist);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:44px}
.ph-doc b{color:#EDEFF2;font-weight:600;font-variant-numeric:tabular-nums}
.ph-doc em{font-style:italic;color:var(--brass)}
.ph-doc .o{display:inline-block;width:26px;height:14px;border-radius:2px;
  border:1px solid #2B3444;vertical-align:-2px}
.ph-doc .ss{margin-left:auto;color:var(--brass);font-size:13px}

.ph-dk{background:#0E1219;border-top:1px solid var(--rule-d);padding:11px 16px;
  display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.ph-dk label{font:400 12.5px/1.4 var(--mono);color:var(--mist-d);
  font-variant-caps:all-small-caps;letter-spacing:.07em}
.ph-dk select{font:400 13.5px/1.4 var(--serif);background:#161B22;color:#EDEFF2;
  border:1px solid #2B3444;border-radius:3px;padding:6px 10px;min-width:190px}
.ph-dk select:focus{outline:2px solid var(--brass);outline-offset:1px}

/* Vạch chẩn đoán: bấm được nên phải trông bấm được, và phải thấy được khi
   người dùng bàn phím Tab tới. */
#ph-marks .ph-mark{cursor:pointer}
#ph-marks .ph-mark line{stroke:var(--brass);stroke-width:1;stroke-dasharray:2 3;opacity:.75}
#ph-marks .ph-mark text{fill:var(--brass);font-size:11px}
#ph-marks .ph-mark:hover line,#ph-marks .ph-mark:focus-visible line{opacity:1;stroke-width:1.6}
#ph-marks .ph-mark:hover text,#ph-marks .ph-mark:focus-visible text{fill:#EDEFF2}
#ph-marks .ph-mark:focus-visible{outline:2px solid var(--brass)}
#ph-svg:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
#ph-svg{cursor:crosshair;touch-action:pan-y}

.tip-js{font-size:13.5px;line-height:1.65;color:var(--mist);margin:-18px 0 30px;
  padding-left:13px;border-left:2px solid var(--brass)}

@media(max-width:820px){
  .ph-doc{font-size:13px;padding:10px 12px}
  .ph-doc .ss{margin-left:0;width:100%}
  .ph-dk{padding:10px 12px}
  .ph-dk select{min-width:0;flex:1}
}

/* ==========================================================================
   ĐIỆN THOẠI — ba chỗ đo được là hỏng trên khung 390px, 05/08/2026
   ========================================================================== */

/* [1] MÁY ĐO PHỔ TƯƠNG TÁC.
   Đo được: SVG co còn 343×102, tỉ lệ 0,38× — nhãn 11px thành 4,2px, không đọc
   nổi. Biểu đồ có trục bước sóng 380–720 nm nên nó RỘNG theo bản chất, không
   thu nhỏ được mà vẫn đọc được.
   Cách xử: cho cuộn ngang với bề rộng tối thiểu 700px (tỉ lệ 0,78×), và dựa
   vào DÒNG ĐỌC SỐ phía dưới — dòng đó là HTML nên tự xuống dòng và luôn đọc
   được, mang đúng con số mà biểu đồ đang chỉ. */
@media(max-width:820px){
  .instrument .inst-body{overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:linear-gradient(to right,#12161C 30%,rgba(18,22,28,0)),
               linear-gradient(to left,#12161C 30%,rgba(18,22,28,0)) 100% 0,
               radial-gradient(farthest-side at 0 50%,rgba(199,164,97,.38),transparent),
               radial-gradient(farthest-side at 100% 50%,rgba(199,164,97,.38),transparent) 100% 0;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,14px 100%,14px 100%;
    background-attachment:local,local,scroll,scroll}
  .instrument .spec-svg{min-width:700px}

  /* [2] Ô CHỌN PHỔ SO SÁNH chỉ còn 69px vì nhãn chiếm hết hàng.
     Cho nhãn xuống dòng riêng thì ô chọn dùng trọn bề ngang. */
  .ph-dk{flex-direction:column;align-items:stretch;gap:7px}
  .ph-dk label{margin:0}
  .ph-dk select{width:100%;min-width:0}
}

/* [3] LIÊN KẾT TRONG Ô BẢNG cao 24px, không có đệm — dưới ngưỡng chạm 44px.
   Trang góc tới hạn có 20 liên kết như vậy trong một bảng.
   Đệm dọc 10px đưa vùng chạm lên 44px mà không làm giãn dòng chữ. */
@media(max-width:820px){
  .prose td a,.prose th a{display:inline-block;padding:10px 0;line-height:1.25}
  .prose td,.prose th{padding-top:4px;padding-bottom:4px}
}

/* --- CÔNG CỤ TÍNH THIẾT KẾ trên /thiet-ke-cat-mai-96-index --- */
.tk-may{margin:0 0 30px}
.tk-dk{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;
  padding:14px 16px;background:#0E1219;border-top:1px solid var(--rule-d)}
.tk-nhan{display:block;font:400 11px/1.4 var(--mono);color:var(--mist-d);
  font-variant-caps:all-small-caps;letter-spacing:.08em;margin-bottom:5px}
.tk-dk select,.tk-dk input{width:100%;font:400 14px/1.4 var(--serif);background:#161B22;
  color:#EDEFF2;border:1px solid #2B3444;border-radius:3px;padding:7px 9px;
  font-variant-numeric:tabular-nums}
.tk-dk select:focus,.tk-dk input:focus{outline:2px solid var(--brass);outline-offset:1px}

/* --- NÚT − / + CHO Ô SỐ -------------------------------------------------
   Ô góc pavilion có 80 nấc (30–50°, bước 0,25°). Trước đây cách duy nhất đi
   từng nấc là mũi tên spinner mặc định: rất nhỏ, chỉ hiện khi rê chuột, và
   TRÊN ĐIỆN THOẠI THÌ KHÔNG CÓ. Mà việc chính của công cụ là dò góc từng nấc.

   Nút cao 44px — đúng ngưỡng vùng chạm. Ẩn spinner mặc định vì nay đã thừa
   và nó làm hẹp ô nhập. */
.tk-so{display:flex;align-items:stretch;gap:0}
.tk-so input{border-radius:0;text-align:center;flex:1 1 auto;min-width:0}
.tk-b{flex:0 0 40px;min-height:44px;display:flex;align-items:center;justify-content:center;
  font:400 19px/1 var(--serif);color:#C9D2DE;background:#1B2230;border:1px solid #2B3444;
  cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;
  transition:background .12s ease,color .12s ease}
.tk-b:first-child{border-radius:3px 0 0 3px;border-right:0}
.tk-b:last-child{border-radius:0 3px 3px 0;border-left:0}
.tk-b:hover{background:#263041;color:#fff}
.tk-b:active{background:var(--brass);color:#0E1219}
.tk-so input::-webkit-outer-spin-button,
.tk-so input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.tk-so input[type=number]{-moz-appearance:textfield;appearance:textfield}
@media(prefers-reduced-motion:reduce){.tk-b{transition:none}}

/* --- NÚT CHỌN TẦNG --------------------------------------------------------
   Đo được cao 27px trên CẢ máy tính lẫn điện thoại — dưới ngưỡng vùng chạm
   44px, cả 5 nút. Đây là nút bấm nhiều nhất trên trang. */
.tk-may [role="tab"]{min-height:44px;padding:0 14px}

.tk-khung{display:grid;grid-template-columns:1fr 232px;gap:8px;padding:14px 16px;
  background:#0E1219;border-top:1px solid var(--rule-d);align-items:center}
#tk-svg{width:100%;height:auto;display:block}
.tk-banh-hop{text-align:center}
#tk-banh{width:100%;max-width:216px;height:auto;display:block;margin:0 auto}
.tk-banh-hop .inst-tabs{margin-top:8px;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.tk-banh-hop .inst-tabs button:last-child{grid-column:1/-1}
.tk-banh-hop .inst-tabs button{font-size:11.5px;padding:5px 9px}

/* 7 giá trị: auto-fit cho 6 cột rồi bỏ 1 xuống hàng riêng trông lệch.
   Ép 4 cột thì thành 4 + 3, cân hơn. */
.tk-out{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tk-out div{padding:11px 14px;border-top:1px solid var(--rule-d);border-right:1px solid var(--rule-d)}
.tk-out dt{font:400 10.5px/1.4 var(--mono);color:var(--mist-d);
  font-variant-caps:all-small-caps;letter-spacing:.07em}
.tk-out dd{font:600 17px/1.3 var(--serif);color:#EDEFF2;margin-top:3px;
  font-variant-numeric:tabular-nums}

.tk-warn{padding:12px 16px;background:#0E1219;border-top:1px solid var(--rule-d)}
.tk-warn p{font-size:13.5px;line-height:1.6;margin:0 0 6px;padding-left:13px;border-left:2px solid}
.tk-warn p:last-child{margin-bottom:0}
.tk-warn .tk-nguy{color:#F2889B;border-color:#B3122F}
.tk-warn .tk-canh{color:#D9BA7E;border-color:var(--brass)}
.tk-warn .tk-ok{color:#8FD3AE;border-color:#2F7D53}

@media(max-width:820px){
  .tk-khung{grid-template-columns:1fr}
  .tk-banh-hop{margin-top:14px}
  .tk-dk{grid-template-columns:1fr 1fr}
  .tk-dk select,.tk-dk input{font-size:16px}   /* dưới 16px iOS tự phóng to trang */
  .tk-out{grid-template-columns:1fr 1fr}
  .tk-banh-hop .inst-tabs{grid-template-columns:1fr 1fr}
}

/* --- Bảng trình tự mài: cột chỉ số dài nên cần chữ hẹp và không xuống dòng
       giữa số. Tên tiếng Anh xuống dòng dưới tên Việt. --- */
.bang-tt table{font-size:14px}
.bang-tt th[scope="row"]{min-width:160px;line-height:1.35}
.bang-tt th[scope="row"] .en{font:400 12px/1.4 var(--mono);color:var(--mist);
  font-style:italic;letter-spacing:.01em}
.bang-tt code{font:400 12.5px/1.6 var(--mono);letter-spacing:.02em;
  word-spacing:.08em;display:inline-block;max-width:230px}
.bang-tt .khong{color:var(--mist);font-style:italic}
.bang-tt td{vertical-align:top}

/* Khối cột dính dành riêng cho điện thoại đã được gộp lên phần chung phía
   trên — cùng vấn đề xảy ra ở mọi bề rộng khi bảng bị cuộn ngang.
   Dấu } của @media cũ được gỡ cùng khối; giữ lại sẽ đóng nhầm một khối khác
   và làm hỏng toàn bộ phần CSS phía sau. */

/* Ô CÔNG THỨC HOÁ HỌC được xuống dòng.
   Nephrite có Ca2(Mg,Fe)5Si8O22(OH)2 — dài tới mức đẩy bảng tra vượt khung
   17px và làm cột "Lưỡng chiết" cụt. Cho riêng cột này xuống dòng thì bảng
   vừa khung mà bảy cột còn lại giữ nguyên đệm 11px.
   Ngắt ở dấu ngoặc và dấu phẩy chứ không giữa chỉ số dưới. */
.prose .tw.rong td.ct{white-space:normal;overflow-wrap:anywhere;max-width:150px}

/* KẺ SỌC HÀNG cho bảng dữ liệu rộng.
   Bảng tra có 16 hàng × 8 cột và không có gì để mắt bám khi dò ngang — đọc
   tới cột thứ sáu là dễ nhảy nhầm hàng. Nền xen kẽ rất nhạt đủ để giữ hàng
   mà không làm bảng thành sọc rằn.
   Ô cột đầu (dính khi cuộn) phải cùng nền, nếu không nó sẽ lệch màu với
   phần hàng còn lại. */
.prose .tw.rong tbody tr:nth-child(even) :is(td, th){background:var(--paper-2)}
.prose .tw.rong tbody tr:nth-child(even) :is(th[scope="row"], td:first-child){background:var(--paper-2)}

/* KHỐI TRẢ LỜI NHANH của hồ sơ đá quý.
   Nó nằm ngoài .prose vì phải đứng trước hình chính, nên không thừa hưởng bề
   rộng cột đọc. Đo được 1104px so với 760px của cột chữ — dòng dài gấp rưỡi
   mức đọc thoải mái và lệch hẳn với mọi đoạn văn phía dưới.
   Ràng về đúng cột đọc, giữ khoảng cách với hình ngay bên dưới.
   margin-left PHẢI là 0, không phải auto: site neo mọi khối vào mép trái chung
   chứ không căn giữa. Dùng auto thì khối lệch 172px so với cột chữ. */
.tl-nhanh,
/* Bộ chọn dự phòng, KHÔNG phụ thuộc gen.php.
   Khối trả lời nhanh cần class="tl-nhanh" do gen.php sinh ra, mà file PHP phải
   Xuất bản lại mới có hiệu lực — trong khi CSS ăn ngay khi tải lên. Đã hai lần
   CSS lên trước còn HTML chưa, nên bề rộng vẫn sai dù quy tắc đã có.

   Bộ chọn này bám cấu trúc thay vì bám class: <section> con trực tiếp của
   .wrap, mở đầu bằng <p><strong>. Kiểm trên toàn bộ 120 trang: khớp ĐÚNG 20 hồ
   sơ đá quý, 0 khối bị khớp nhầm.

   Giữ cả hai để khi gen.php lên thì class vẫn là đường chính. */
.wrap > section:has(> p > strong:first-child){
  max-width:var(--w-doc);margin:0 0 26px;font-size:var(--fs-body)}
.tl-nhanh p,
.wrap > section:has(> p > strong:first-child) p{margin:0}