/* ═══════════════════════════════════════════════════════════════════════════
   GIAO DIỆN THEO BỐ CỤC dutchgoldhoney.com — ÁP CHO TOÀN BỘ CÁC TRANG.
   Chị chốt 11/08/2026: *"layout y hệt như này"* + *"thích màu và trình bày nhã
   nhặn, không quá nhiều màu vàng như trang này"* + *"chạy live luôn, sửa hết
   toàn bộ các trang, bỏ giao diện trang chủ cũ đi"*.

   ★ TỆP NÀY NẠP SAU site.css VÀ sang.css, TRƯỚC phần <style> riêng của trang.
   Nghĩa là nó đè được nền cũ, còn trang nào có kiểu riêng thì trang đó vẫn nói
   tiếng nói cuối — đúng thứ tự "chung trước, riêng sau" đã ghi trong layout.

   ★ MÀU: BỐ CỤC của Dutch Gold, BẢNG MÀU của Chị.
   Trang họ quét đúng MỘT sắc vàng mật rực lên thanh trên cùng, MỌI nút và MỌI nhãn —
   cộng lại thành mảng vàng chiếm gần hết tầm mắt. Ảnh sản phẩm của Chị vốn đã
   nhiều vàng kim, chồng thêm nữa là rối.
   Nay xanh rừng của thương hiệu làm màu chủ đạo; vàng hạ độ rực xuống
   #D4A83E và chỉ còn là điểm nhấn nhỏ: tên danh mục, gạch chân, viền nhãn.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --dg-nen:#123B2A;
  --dg-nen-nhat:#123B2A;
  --dg-nhan:#D4A83E;
  --dg-nhan-dam:#816632;
  --dg-kem:#F6F3EC;
  --dg-be:#EDE7DC;
  --dg-xam:#F7F6F4;
  --dg-muc:#2B2A26;
  /* ★ 14/08 Chị: "sao mà chữ nó cứ nhạt nhạt". Mực phụ #6E6759 phủ gần hết
     mô tả/đoạn dẫn/ngày tháng — từng chỗ đạt chuẩn tương phản nhưng cả trang
     toàn chữ lưng chừng nên nhìn bợt. Đậm lên MỘT NẤC trong bảng đã chốt
     (#484237 có sẵn nhóm Chữ/viền — không thêm màu mới, không phạm BangMau). */
  --dg-muc-nhat:#484237;
  --dg-vien:#E6E1D7;
  --dg-do:#9C4436;
  /* 1202 = 1170 nội dung + 16px đệm mỗi bên.
     Đo Dutch Gold: nội dung nằm đúng x = 135 … 1305 trên màn 1440 ⇒ 1170px
     RÒNG. Đặt max-width 1170 rồi còn thêm đệm thì nội dung chỉ còn 1138 —
     lưới sản phẩm hụt 8px mỗi ô, ảnh không còn đúng 270. */
  --dg-khung:1202px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ★ ÁNH XẠ BẢNG MÀU CŨ SANG BẢNG MÀU MỚI — Chị 11/08/2026:
   *"kỹ hết phần giao diện cho đồng bộ tất cả màu, cả các trang con nữa"*.

   Toàn bộ trang con vẫn đang vẽ bằng hệ màu đời đầu (--forest-*, --honey-*,
   --bark-*, --cream-*) — đếm được ~650 lần dùng trên 15 biến. Hệ đó rực hơn
   hẳn bảng màu nhã mà Chị chốt, nên trang chủ một tông còn trang con một tông.

   SỬA Ở ĐÂY, KHÔNG SỬA TỪNG TRANG. Định nghĩa lại chính 15 biến ấy là mọi
   `var(--honey-400)` rải khắp 20 mẫu tự đổi theo. Sửa tay từng trang thì vừa
   sót, vừa lệch lại ngay lần thêm trang mới.

   Giữ NGUYÊN TÊN biến: mẫu cũ không phải đụng dòng nào, và ngày nào muốn quay
   lại tông cũ thì xoá đúng khối này.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  /* Xanh rừng — giữ #123B2A làm gốc, các sắc còn lại kéo về cùng họ */
  --forest-900:#123B2A;
  --forest-800:#123B2A;
  --forest-700:#816632;
  --forest-500:#B0904D;
  --forest-100:#F6F1E4;

  /* Vàng — HẠ ĐỘ RỰC. Đây là chỗ làm trang con trông "nhiều vàng" hơn trang chủ */
  --honey-700:#123B2A;
  --honey-600:#816632;
  --honey-500:#B0904D;
  --honey-400:#D4A83E;
  --honey-300:#E8CD75;
  --honey-100:#F6F1E4;
  --honey-50:#FAF7EF;

  /* Nền và chữ */
  --cream-50:#FAF9F6;
  --bark-800:#2B2A26;
  --bark-500:#484237;   /* cùng nấc với --dg-muc-nhat — hai tên một mực phụ */

  /* Bóng đổ: Dutch Gold phẳng, không đổ bóng dày */
  --shadow-card:0 1px 2px rgba(43,42,38,.04), 0 6px 18px -10px rgba(43,42,38,.10);
  --shadow-pop:0 2px 6px rgba(43,42,38,.06), 0 14px 30px -14px rgba(43,42,38,.16);

  /* Bo góc: Dutch Gold gần như vuông */
  --radius-card:3px;
  --radius-btn:2px;
}
/* ── Chữ: Roboto cho toàn trang (phông của behonexmart.com Chị chọn) ──
   15px chứ không 13px như họ: khách mua mật ong phần nhiều lớn tuổi. */
body{
  font-family:'Roboto', system-ui, Arial, sans-serif;
  /* 16px chứ không 13px như Behonex, cũng không 14px như Dutch Gold.
     Chị 11/08: *"chữ phải nét lên"*. Tiếng Việt có dấu nên cùng một cỡ nhìn
     nhỏ hơn tiếng Anh, mà khách mua mật ong phần nhiều lớn tuổi. */
  font-size:16px;
  /* ★ 19/08 — CHỮ NÉT HƠN. Chị: *"font bên thegioididong.com nét thế, mình cứ
     mờ mờ"*. Đo hai trang: họ dùng **Arial** — phông có sẵn trong Windows, được
     tinh chỉnh (hinting) cho màn hình từ mấy chục năm nên nét đanh ngay cả cỡ
     12px. Ta dùng **Roboto biến thiên** tải về: đẹp và đúng bản sắc, nhưng ở độ
     đậm 400 thì nét mảnh hơn Arial, nhìn lâu thành "mờ mờ".
     Không đổi phông (đổi là mất bản sắc, mà 2 tệp Roboto đã tải sẵn); thay vào
     đó nhích trục độ đậm lên 450 — Roboto biến thiên chạy liên tục 100→900 nên
     450 là giá trị THẬT, không phải chữ béo giả do trình duyệt tự bơm. */
  font-weight:450;
  color:var(--dg-muc);
  /* Bật bộ chữ số cùng bề ngang: giá tiền, mã tổ trong bảng thẳng cột */
  font-variant-numeric:tabular-nums;
}
/* Chữ nhỏ mảnh nhất là chỗ lộ rõ nhất — nhích thêm một nấc nữa */
body small, body .muted, body figcaption, body .tc-dan{ font-weight:500 }
h1, h2, h3, h4, h5, .brand, .btn{ font-family:'Roboto', system-ui, Arial, sans-serif; }

/* ═══════════ 1. THANH TRÊN CÙNG ═══════════
   Dutch Gold: khẩu hiệu trái · đăng nhập · giỏ hàng (ô đậm hơn ở góc phải). */
.dg-top{
  background:var(--dg-nen); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.dg-top-in{
  max-width:var(--dg-khung); margin:0 auto; padding:0 1rem;
  display:flex; align-items:center; gap:.9rem; min-height:46px;
}

/* ══ ĐỔI NGÔN NGỮ (23/08 — Chị: "ở trang chủ có đủ icon để chuyển nữa") ══
   Dựng bằng <details> nên không cần JavaScript. Menu neo theo nút, mở ra đè
   lên nội dung chứ không đẩy thanh trên cùng giãn ra. */
.dnn{position:relative; flex:none; margin-left:.2rem}
.dnn > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .5rem; border-radius:999px; color:inherit;
  border:1px solid rgba(255,255,255,.28); line-height:1}
.dnn > summary::-webkit-details-marker{display:none}
.dnn > summary b{font-size:11px; font-weight:800; letter-spacing:.06em}
.dnn > summary:hover{border-color:var(--dg-nhan); color:#E8CD75}
.dnn[open] > summary{background:var(--dg-nhan); border-color:var(--dg-nhan); color:var(--dg-nen)}
.dnn-menu{position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  min-width:172px; background:#fff; border:1px solid var(--dg-vien); border-radius:3px;
  box-shadow:0 14px 34px rgba(18,59,42,.22); padding:.35rem; display:flex; flex-direction:column}
.dnn-nhan{display:block; padding:.4rem .6rem .3rem; font-size:10.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--dg-nhan-dam)}
.dnn-menu a{display:block; padding:.5rem .6rem; min-height:38px; border-radius:2px;
  font-size:14px; font-weight:600; color:var(--dg-muc); text-decoration:none; line-height:1.6}
.dnn-menu a:hover{background:var(--dg-kem); color:var(--dg-nen)}
.dnn-menu a.on{font-weight:800; color:var(--dg-nen)}
.dnn-menu a.on::after{content:"✓"; float:right; color:var(--dg-nhan-dam)}

/* ══ NÚT NGÔN NGỮ TRÊN THANH ĐẦU TRANG (27/08/2026) ══════════════════════
   Chị: *"cho thêm icon ngôn ngữ ở phần trên đầu trang như các trang khác"*.

   Nút cũ chỉ sống trên thanh trên cùng `.dg-top`. Từ khi đổi sang thanh hai
   tầng, `.dg-top` bị ẩn hẳn ở khổ máy tính nên nút ngôn ngữ MẤT LUÔN — mà bộ
   đo chỉ đếm chữ hiện ra, thứ bị `display:none` thì nó không đếm, nên suốt
   mấy đợt rà không ai thấy. Nay có hai bản, mỗi khổ dùng một:

     · `.dnn-pc` — nằm cùng hàng Đơn hàng · Tài khoản · Giỏ hàng, cùng dáng
       icon-trên-nhãn-dưới để không lạc lõng giữa cụm đó;
     · `.dnn-mb` — nút vuông cạnh nút menu, cạnh 44px đủ ngưỡng vùng chạm.

   Mặc định cả hai ẨN, rồi mỗi khổ bật đúng một cái — an toàn hơn là bật sẵn
   rồi đi tắt, vì quên một luật là hiện chồng hai nút. */
body .site-header .dnn-pc,
body .site-header .dnn-mb{display:none}

/* Bản điện thoại: nút vuông cạnh hamburger */
body .site-header .dnn-mb{margin-left:auto; margin-right:.1rem}
body .site-header .dnn-mb > summary{
  width:44px; height:44px; padding:0; border-radius:3px;
  justify-content:center; gap:2px; flex-direction:column;
  background:rgba(255,255,255,.14); border:0; color:#fff;
}
body .site-header .dnn-mb > summary b{font-size:9.5px; letter-spacing:.04em}
body .site-header .dnn-mb > summary:hover{background:rgba(232,205,117,.26); color:#E8CD75}
body .site-header .dnn-mb[open] > summary{background:var(--dg-nhan); color:var(--dg-nen)}

/* Bản máy tính: cùng dáng với các icon bên cạnh — icon trên, nhãn dưới */
body .site-header .tien-ich .dnn-pc > summary{
  flex-direction:column; align-items:center; gap:3px;
  padding:0; border:0; border-radius:0; background:none;
  color:#fff; font-size:12px; font-weight:600; line-height:1;
}
body .site-header .tien-ich .dnn-pc > summary b{
  font-size:12px; font-weight:600; letter-spacing:0;
}
body .site-header .tien-ich .dnn-pc > summary:hover,
body .site-header .tien-ich .dnn-pc[open] > summary{background:none; color:#E8CD75}

/* ══ DẢI GỢI Ý cho khách dùng trình duyệt tiếng nước ngoài ══
   KHÔNG tự đá họ sang trang khác (xem lý do trong layout) — chỉ mời, và có nút
   tắt. Ẩn sẵn, JavaScript nhỏ trong layout mới bật lên khi đúng người. */
.dg-moi{display:none; background:var(--dg-nen); color:#fff; border-bottom:2px solid var(--dg-nhan)}
.dg-moi.hien{display:block}
.dg-moi .in{max-width:var(--dg-khung); margin:0 auto; padding:.55rem 1rem;
  display:flex; align-items:center; gap:.5rem .9rem; flex-wrap:wrap; font-size:14px}
.dg-moi a{color:var(--dg-nen); background:var(--dg-nhan); text-decoration:none;
  font-weight:800; padding:.3rem .8rem; border-radius:999px; font-size:13px}
.dg-moi a:hover{background:#E8CD75}
.dg-moi button{margin-left:auto; background:none; border:0; cursor:pointer;
  color:rgba(255,255,255,.7); font-size:20px; line-height:1; padding:.1rem .4rem;
  font-family:inherit}
.dg-moi button:hover{color:#fff}
.dg-top .khau{margin-right:auto; opacity:.86; font-weight:500; letter-spacing:.06em}
.dg-top a{color:#fff; text-decoration:none; display:flex; align-items:center; gap:.35rem; padding:.4rem .25rem}
.dg-top a:hover{color:var(--dg-nhan)}
.dg-top .gio{background:rgba(255,255,255,.11); align-self:stretch; padding:0 1.1rem; margin-right:-1rem}
.dg-top .gio:hover{background:rgba(255,255,255,.2); color:#fff}

/* ═══════════ 2. ĐẦU TRANG: logo TRÁI · menu PHẢI ═══════════
   Nền cũ là dải xanh đậm bám dính; Dutch Gold là nền TRẮNG, chữ sẫm. */
/* ★ 14/08 — Chị chốt theo mẫu xe.ghepnhanh.vn: thanh menu NỀN XANH RỪNG ĐẬM
   chữ trắng "cho gọn gàng đẹp đồng màu". Trước đó là nền trắng Dutch Gold. */
body .site-header{
  background:var(--dg-nen) !important; border-bottom:1px solid rgba(255,255,255,.14);
  box-shadow:none; position:sticky; top:0; z-index:50;
}
body .site-header.scrolled{box-shadow:0 6px 18px -14px rgba(0,0,0,.35)}
/* ★ ĐẦU TRANG CAO 184px như Dutch Gold (đo thật: thanh vàng 50 + đầu trang
   184 = 234). Bản trước em để 78px nên trang trông chật, đúng chỗ Chị nói
   *"có khoảng cách rõ ràng ra"*.
   Cuộn xuống thì co lại còn ~64px và dính đỉnh — cũng là cách họ làm, giữ
   được cả sự thoáng lẫn menu luôn trong tầm tay. */
/* ★ CHIỀU CAO ĐẦU TRANG PHẢI ĂN KHỚP VỚI LOGO.
   Dutch Gold cao 184px vì logo của họ là cụm chữ nằm ngang 270×102 lấp đầy
   khoảng đó. Logo của Chị là ô vuông nhỏ, nên bê nguyên 184px thì trên dưới
   hở ra hai dải trắng trống trơn — đúng chỗ Chị gạch đỏ 11/08.
   Nay logo to lên 80px và đệm vừa phải: đầu trang ~124px, không còn khoảng
   chết mà vẫn thoáng. */
/* ★ 14/08 — LÀM GỌN ĐẦU TRANG (Chị yêu cầu).
   Đo trước: tổng đầu trang 173px trên máy tính — thanh trên 46 + thanh trắng
   123. Riêng logo 80×80 và đệm 21,6px trên dưới đã ăn gần hết. Trên màn laptop
   1366×768 thì đầu trang chiếm gần 1/4 chiều cao màn hình trước khi thấy nội
   dung. Rút logo về 56 và đệm về 13,6 → thanh trắng còn ~84px, tổng ~130px. */
body .site-header .bar{
  max-width:var(--dg-khung); margin:0 auto; padding:.85rem 1rem;
  display:flex; align-items:center; gap:1rem;
  transition:padding .2s ease;
}
body .site-header.scrolled .bar{padding:.55rem 1rem}
body .site-header .logo{width:56px; height:56px; filter:none}
body .site-header.scrolled .logo{width:40px; height:40px}
body .site-header .brand{transition:font-size .2s ease}
body .site-header.scrolled .brand{font-size:16px}
body .site-header .logo-img{border-radius:2px}
body .site-header .brand{
  color:#fff; font-size:17px; font-weight:900;
  letter-spacing:.02em; text-transform:uppercase; line-height:1.1;
}
body .site-header .nav-toggle{background:rgba(255,255,255,.14)}
body .site-header .nav-toggle span{background:#fff}
/* Hai tầng kiểu thegioihongsam (Chị chốt 14/08) — chỉ bật ở khổ menu ngang,
   điện thoại giữ nguyên hamburger + panel cũ. */
body .site-header .tim-nav,
body .site-header .tien-ich,
body .site-header .dai-muc{display:none}

body .main-nav{margin-left:auto; gap:1.15rem; align-items:center; flex-wrap:nowrap}
body .main-nav a{
  color:var(--dg-muc); background:none; border-radius:0;
  font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:.5rem 0; border-bottom:2px solid transparent;
}
body .main-nav a:hover{background:none; color:var(--dg-nhan-dam); border-bottom-color:var(--dg-nhan)}
/* ★ Mục ĐANG XEM: Dutch Gold đánh dấu bằng GẠCH CHÂN, không phải viên thuốc.
   Phải viết đủ `.site-header .main-nav a.on` mới thắng — sang.css khai đúng ba
   lớp đó, `body .main-nav a.on` (0-2-1) thua (0-3-0). Không sửa thì mục đang
   xem vẫn là viên xanh bo tròn của giao diện cũ, lạc hẳn khỏi dải menu. */
body .site-header .main-nav a.on,
body .site-header .nav-dd.here .dd-btn{
  background:none; color:#fff; border-bottom:2px solid var(--dg-nhan);
}
body .main-nav .dd-btn{
  color:var(--dg-muc); background:none; border:0; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; padding:.5rem 0;
}
body .main-nav .dd-btn:hover{color:var(--dg-nhan-dam)}

/* ★ 12/08 — VIÊN THUỐC TRONG MENU: luật trên KHÔNG ĂN, phải viết lại đủ lớp.
   Chị chỉ ra nút "Giới thiệu" nhìn như bo dở. Đo trên máy thật: rê chuột lên
   MỌI mục menu ra `bo=999px nền=#F6F1E4` KÈM `gạch dưới 2px #D4A83E` — hai đời
   thiết kế chồng lên nhau, viên thuốc cũ nằm dưới gạch chân mới.

   Vì sao: sang.css khai `.site-header .main-nav a` (0-2-1) và
   `.site-header .nav-dd:hover .dd-btn` (0-4-0). Khối Dutch Gold ở trên viết
   `body .main-nav a` (0-1-2) → ĐẾM LỚP THUA, chỉ những thuộc tính sang.css
   không khai (màu nền tảng, text-transform, border-bottom) mới lọt qua. Đó
   đúng là cái bẫy D2 trong CLAUDE.md.

   Sửa: nâng lên 0-2-2 / 0-3-1 / 0-4-1 cho thắng, và CHỈ đụng HÌNH KHỐI. Cỡ
   chữ, giãn chữ, đệm của sang.css giữ nguyên — đó là yêu cầu riêng của Chị
   ngày 28/07 ("menu to hơn một nấc"), kéo về 13px là đi ngược lại.

   ★ NÚT TRÒN VẪN TRÒN — và tròn nhờ ĐÚNG cái luật đếm lớp đó, không phải nhờ
   may. `body .site-header .main-nav a` chỉ có HAI lớp (.site-header, .main-nav)
   vì `a` là thẻ; còn `.site-header .main-nav .nut-tron` có BA lớp nên thắng và
   giữ nguyên 999px. Đã đo lại trên máy thật: nút tìm kiếm 38×38 bo 999px, rê
   chuột ra nền #F6F1E4, không dính gạch chân. Nếu sau này ai đó thêm `.nut-tron`
   vào nhóm chọn dưới đây thì nút sẽ vuông ngay — có test canh.

   Nút thả xuống nay ăn gạch chân y hệt các mục anh em nó, nên "Giới thiệu"
   không còn là mục duy nhất mang dáng khác. */
body .site-header .main-nav a,
body .site-header .nav-dd .dd-btn{ border-radius:0 }
body .site-header .nav-dd .dd-btn{ border-bottom:2px solid transparent }
body .site-header .main-nav a:hover,
body .site-header .nav-dd:hover .dd-btn,
body .site-header .nav-dd.open .dd-btn{
  /* Vàng SÁNG #E8CD75: vàng đậm cũ trên nền xanh đậm chỉ đạt ~2,4 tương phản */
  background:none; color:#E8CD75; border-bottom-color:var(--dg-nhan);
}
body .nav-dd .dd-menu{background:#fff; border:1px solid var(--dg-vien); box-shadow:0 14px 32px -18px rgba(0,0,0,.4)}
body .nav-dd .dd-menu a{color:var(--dg-muc); border-bottom:0; padding:.6rem .9rem; letter-spacing:.05em}
body .nav-dd .dd-menu a:hover{background:var(--dg-kem)}
body .main-nav .nut-tron{color:var(--dg-muc); border:0; background:none; padding:.4rem}
body .main-nav .nut-tron:hover{color:var(--dg-nhan-dam)}
body .site-header .nav-toggle span{background:var(--dg-muc)}

/* ═══ ★ 14/08 — GỘP HAI THANH THÀNH MỘT (Chị chốt qua câu hỏi) ═══
   Trước: thanh xanh (khẩu hiệu · Đăng nhập · Đăng ký · Giỏ) 46px + thanh trắng
   (logo · menu) 87px = 133px. Chị nhắc "làm gọn menu" nhiều lần — vì gọn chiều
   cao thôi chưa đủ, HAI TẦNG vẫn là hai tầng.

   Cách gộp KHÔNG phải viết thêm nút: cụm Giỏ/Tài khoản/Đăng nhập VỐN CÓ SẴN
   trong .main-nav (markup dùng chung với điện thoại), trước giờ bị ẩn ở khổ
   rộng vì thanh xanh đã hiện chúng. Nay đảo lại: ẩn thanh xanh, thôi ẩn cụm đó.
   Khẩu hiệu "Truy xuất nguồn gốc minh bạch" hy sinh ở khổ rộng — đầu trang chỉ
   còn MỘT thanh ~76px. Điện thoại giữ nguyên như cũ.

   Đăng ký không mất: nút Đăng nhập dẫn tới trang có sẵn liên kết Đăng ký, và
   menu điện thoại vẫn đủ cả hai. */
@media (min-width:861px){
  body .dg-top{display:none}

  /* ★ Nút hamburger phải ẨN ngay khi thanh hai tầng tiếp quản (861px) —
     site.css còn cho nó sống tới 1199px, mà .main-nav ở khổ này đã
     display:none → dải 861–1199 (máy tính bảng, điện thoại ngang, cửa sổ
     thu hẹp) nút ☰ hiện nhưng bấm KHÔNG RA GÌ. Đo ma trận 11 khổ 14/08:
     861/1000/1199 đều "CHET" — Chị báo "mất luôn menu" đúng dải này. */
  body .site-header .nav-toggle{display:none}

  /* Cụm tiện ích hiện lại — dáng theo menu Dutch Gold: chữ hoa nhỏ, không nền */
  body .site-header .main-nav .cart,
  body .site-header .main-nav .acct,
  body .site-header .main-nav .dang-nhap{
    display:inline-flex; align-items:center; gap:.35rem;
    background:none; border-radius:0;
  }
  body .site-header .main-nav .dang-nhap{
    border:1.5px solid var(--dg-nen); padding:.4rem 1rem; color:var(--dg-nen);
  }
  body .site-header .main-nav .dang-nhap:hover{background:var(--dg-nen); color:#fff}
  body .site-header .main-nav .cart .chu{display:none}
  body .site-header .main-nav .cart .n{
    background:var(--dg-do); color:#fff; border-radius:999px;
    font-size:11px; font-weight:800; padding:.05rem .42rem; margin-left:.15rem;
  }
  body .site-header .main-nav .acct .ten{max-width:9ch; overflow:hidden; text-overflow:ellipsis}

  /* ── Chữ menu TRẮNG trên nền xanh — chỉ khổ menu ngang. Panel xổ điện thoại
     vẫn nền trắng chữ sẫm, nên các luật này phải nằm gọn trong media 861. ── */
  body .site-header .main-nav a,
  body .site-header .main-nav .dd-btn{color:#fff}
  body .site-header .main-nav .nut-tron{color:#fff}
  body .site-header .main-nav .nut-tron:hover{background:rgba(255,255,255,.14); color:#E8CD75}
  body .site-header .main-nav .cart{color:#fff}
  body .site-header .main-nav .dang-nhap{border-color:#fff; color:#fff}
  body .site-header .main-nav .dang-nhap:hover{background:#fff; color:var(--dg-nen)}
  /* Nút ĐĂNG KÝ vàng — CTA nổi nhất thanh menu (Chị 14/08, thế chỗ mục
     "Thành viên"). Chữ XANH ĐẬM trên vàng, hover vàng SÁNG lên (D5). */
  body .site-header .main-nav .dang-ky{
    display:inline-flex; align-items:center; gap:.35rem;
    background:var(--dg-nhan); border:1.5px solid var(--dg-nhan);
    color:var(--dg-nen); padding:.4rem 1.1rem; border-radius:0;
  }
  body .site-header .main-nav .dang-ky:hover{
    background:#E8CD75; border-color:#E8CD75; color:#fff;
  }

  /* ═══ HAI TẦNG kiểu thegioihongsam — Chị chốt 14/08 "làm như trong ảnh".
     Menu chữ dời hết xuống TẦNG 2 nên tầng 1 rộng chỗ cho ô tìm kiếm TO thật
     như mẫu. .main-nav chỉ còn phục vụ panel điện thoại → ẩn ở khổ ngang. ═══ */
  body .site-header .main-nav{display:none}

  /* Tầng 1: logo | ô tìm to ở giữa | cụm icon có nhãn */
  /* nowrap: khổ 861–~1000 thanh chật, để wrap là cụm tiện ích RƠI XUỐNG DÒNG
     HAI (đo ảnh khổ 861 ngày 14/08) — bắt các mảnh co lại thay vì gãy dòng */
  body .site-header .bar{gap:1.5rem; flex-wrap:nowrap}
  body .site-header .tim-nav{
    /* min-width CỨNG: form có overflow:hidden nên flex được phép ép về 0px —
       đã dính một lần, đo ra 0×40. */
    display:flex; align-items:stretch; flex:1 1 300px; min-width:200px; max-width:560px;
    margin:0 auto; background:#fff; border-radius:999px; overflow:hidden; height:42px;
  }
  body .site-header .tim-nav input{
    flex:1 1 auto; min-width:0; border:0; padding:0 1.15rem;
    font:inherit; font-size:14px; color:var(--dg-muc); background:none;
  }
  body .site-header .tim-nav input::placeholder{color:var(--dg-muc-nhat)}
  body .site-header .tim-nav button{
    flex:none; width:52px; border:0; cursor:pointer; display:flex;
    align-items:center; justify-content:center;
    background:var(--dg-nhan); color:var(--dg-nen);
  }
  body .site-header .tim-nav button:hover{background:#E8CD75}

  /* Cụm icon có nhãn — như "Đơn hàng · Tài khoản · Giỏ hàng" của mẫu */
  body .site-header .tien-ich{display:flex; align-items:center; gap:1.35rem; flex:none}
  /* Khổ máy tính dùng bản trong cụm icon; bản điện thoại nghỉ */
  body .site-header .tien-ich .dnn-pc{display:block}
  body .site-header .dnn-mb{display:none}
  body .site-header .tien-ich > a{
    display:flex; flex-direction:column; align-items:center; gap:3px;
    color:#fff; font-size:12px; font-weight:600; text-decoration:none; line-height:1;
  }
  body .site-header .tien-ich > a:hover{color:#E8CD75}
  body .site-header .tien-ich .gio{position:relative}
  body .site-header .tien-ich .gio .n{
    position:absolute; top:-7px; right:2px; min-width:18px; height:18px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--dg-nhan); color:var(--dg-nen); font-style:normal;
    font-size:11px; font-weight:800; border-radius:999px; padding:0 4px;
  }
  /* Nút ĐĂNG KÝ — CTA nổi nhất thanh. Chị 14/08: "làm cho đẹp hẳn đi":
     bản trước vuông chằn chặn, lạc giữa ô tìm viên thuốc và nút hero viên
     thuốc. Nay cùng dáng VIÊN, cao đúng 42px bằng ô tìm cho thẳng hàng,
     đệm ngang rộng, thêm bóng vàng mờ cho có chiều sâu — hover SÁNG lên và
     nhấc nhẹ (D5: vàng hover phải sáng, không sẫm). */
  body .site-header .tien-ich .dang-ky{
    flex-direction:row; height:42px; padding:0 1.55rem;
    background:linear-gradient(180deg, #E8CD75 0%, var(--dg-nhan) 55%);
    color:var(--dg-nen);
    font-size:13px; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
    border-radius:999px;
    box-shadow:0 2px 10px rgba(212,168,62,.35), inset 0 1px 0 rgba(255,255,255,.35);
    transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  }
  body .site-header .tien-ich .dang-ky:hover{
    filter:brightness(1.07); color:var(--dg-nen);
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(212,168,62,.5), inset 0 1px 0 rgba(255,255,255,.4);
  }

  /* Tầng 2: dải mục — nền xanh NHẠT hơn tầng 1 để phân tầng như mẫu */
  body .site-header .dai-muc{display:block; background:#123B2A;
    border-top:1px solid rgba(255,255,255,.12)}
  body .site-header .dai-muc .in{
    max-width:var(--dg-khung); margin:0 auto; padding:0 16px;
    display:flex; align-items:center; gap:2rem;
  }
  body .site-header .dai-muc a,
  body .site-header .dai-muc .dd-btn{
    display:inline-flex; align-items:center; min-height:46px; padding:0;
    color:#fff; font-family:inherit; font-size:13px; font-weight:700;
    letter-spacing:.09em; text-transform:uppercase; text-decoration:none;
    background:none; border:0; border-bottom:2px solid transparent; cursor:pointer;
    border-radius:0;
  }
  body .site-header .dai-muc a:hover,
  body .site-header .dai-muc .nav-dd:hover .dd-btn{color:#E8CD75; border-bottom-color:var(--dg-nhan); background:none}
  body .site-header .dai-muc a.on,
  body .site-header .dai-muc .nav-dd.here .dd-btn{color:#fff; border-bottom-color:var(--dg-nhan)}

  /* ★ Dải 861–1199: site.css vẫn coi đây là "mobile" (khối max-width:1199 của
     nó TRẢI PHẲNG dropdown: .nav-dd{width:100%}, .dd-btn{display:none},
     .dd-menu tĩnh hiện trần) — đè lên tầng 2 mới → menu nát cả dải: nav-dd
     chiếm nguyên hàng ép 4 mục kia wrap chữ, "Giới thiệu" xổ sẵn khung trắng
     (đo ảnh khổ 861/1000 ngày 14/08, Chị báo "mất luôn menu").
     Kéo dropdown trong .dai-muc về đúng cơ chế desktop của site.css. */
  body .site-header .dai-muc .nav-dd{position:relative; width:auto}
  body .site-header .dai-muc .nav-dd .dd-btn{display:inline-flex}
  body .site-header .dai-muc .nav-dd .dd-menu{
    visibility:hidden; opacity:0; transform:translateY(6px);
    position:absolute; top:calc(100% + .45rem); left:0; min-width:190px; z-index:70;
    padding:.45rem; margin-top:0; border-top:0;
  }
  body .site-header .dai-muc .nav-dd:hover .dd-menu,
  body .site-header .dai-muc .nav-dd.open .dd-menu,
  body .site-header .dai-muc .nav-dd:focus-within .dd-menu{
    visibility:visible; opacity:1; transform:none;
  }

  /* Bảng thả xuống "Giới thiệu" cùng tông tối cho liền khối với thanh */
  body .site-header .nav-dd .dd-menu{background:#123B2A; border-color:rgba(255,255,255,.16);
    box-shadow:0 18px 38px -16px rgba(0,0,0,.55)}
  body .site-header .nav-dd .dd-menu a{color:#fff}
  body .site-header .nav-dd .dd-menu a:hover{background:#123B2A; color:#E8CD75}
  body .site-header .nav-dd .dd-menu a.on{background:rgba(255,255,255,.12); color:#fff}
}

/* Dải hẹp của chế độ hai tầng (861–1099): siết khoảng cách để logo + ô tìm
   + cụm tiện ích nằm vừa MỘT hàng — gap 1.5rem ở khổ này làm tràn/gãy dòng. */
@media (min-width:861px) and (max-width:1099px){
  body .site-header .bar{gap:.9rem}
  body .site-header .tim-nav{min-width:160px}
  body .site-header .tien-ich{gap:.9rem}
}

/* ═══════════ VIỀN TIÊU ĐIỂM DÙNG CHUNG ═══════════
   Ai không dùng chuột thì chỉ định vị được bằng viền này. Đo bằng phím Tab
   THẬT ngày 12/08: ô nhập ở trang Đăng nhập và Liên hệ không phản hồi gì cả.

   Vì sao mất: `sang.css` viết `input:focus{outline:none; border-color:…}` —
   bỏ viền mặc định của trình duyệt rồi thay bằng đổi màu viền. Nhưng luật
   riêng của từng trang (`.dn input`, `.f input`) cùng độ ưu tiên 0-1-1 mà nạp
   SAU, nên phần thay thế bị đè. Còn lại đúng cái `outline:none`.

   Nay khai ở đây với `body` + tên thẻ = 0-2-1, thắng mọi luật trang. Hai lớp:
   viền xanh đậm thấy rõ trên nền sáng, vòng trắng lót bên trong thấy rõ trên
   nền tối — chỗ nào cũng còn ít nhất một lớp nhìn được.

   Dùng `:focus-visible` chứ không phải `:focus`: bấm chuột vào ô thì không
   vẽ viền (thừa), chỉ đi bằng bàn phím mới vẽ. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body summary:focus-visible,
body [tabindex]:focus-visible{
  outline:2px solid var(--dg-nen);
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff;
}

/* ═══════════ Nút chung ═══════════ */
body .btn, body .btn-ong{
  background:var(--dg-nen); color:#fff; border:0; border-radius:2px;
  font-family:inherit; font-size:14px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:.85rem 2rem;
}
body .btn:hover, body .btn-ong:hover{background:var(--dg-nen-nhat); color:#fff}
/* Nút vàng: chữ XANH ĐẬM, không phải trắng.
   Trắng trên vàng #D4A83E chỉ được 2,48 lần tương phản — dưới ngưỡng đọc được
   4,5; ngoài nắng hay trên màn rẻ tiền là chữ tan vào nền, mà đây lại đúng mấy
   nút "MUA NGAY" / "Đăng ký". Xanh #123B2A trên vàng được 5,03.
   Nút vàng trong banner tối vốn đã dùng cách này (sang.css) — nay cả site giống nhau.
   Di chuột thì vàng SÁNG lên chứ không sẫm đi: sẫm đi là chữ xanh lại chìm. */
body .btn.gold, body .btn.vang{background:var(--dg-nhan); color:var(--dg-nen)}
body .btn.gold:hover, body .btn.vang:hover{background:#E8CD75; color:var(--dg-nen)}

/* ═══════════ 8. CHÂN TRANG 4 CỘT ═══════════
   Nền cũ là xanh đậm gần đen; Dutch Gold là nền sáng, chữ sẫm, 4 cột. */
body .site-footer{
  background:#FCFBF9; color:var(--dg-muc);
  border-top:1px solid var(--dg-vien); padding-top:2.6rem;
}
body .site-footer .cols{
  max-width:var(--dg-khung); margin:0 auto; padding:0 1rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
}
body .site-footer h4{
  color:var(--dg-muc); font-size:13px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; margin-bottom:.75rem;
}
body .site-footer a{color:var(--dg-muc-nhat); font-size:14px; padding:.16rem 0}
body .site-footer a:hover{color:var(--dg-nhan-dam)}
body .site-footer p{color:var(--dg-muc-nhat); font-size:14px}
body .site-footer .brandline{color:var(--dg-muc); font-weight:900; text-transform:uppercase; letter-spacing:.02em}
/* ★ DẢI DƯỚI CÙNG — khối cuối của bố cục Dutch Gold.
   Trang họ để dải này màu vàng đặc, gom đường dẫn chính sách + bản quyền.
   Chị muốn bớt vàng nên đổi sang xanh rừng; hình khối giữ y nguyên. */
body .site-footer .copy{
  background:var(--dg-nen); color:rgba(255,255,255,.72);
  border-top:0; margin-top:2.4rem; padding:1.1rem 1rem 1.3rem;
  font-size:13px; letter-spacing:.03em;
}
body .site-footer .copy-link{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem 0;
  margin-bottom:.6rem; font-size:12px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
}
body .site-footer .copy-link a{
  display:inline-block; color:#fff; padding:0 .85rem; position:relative;
}
body .site-footer .copy-link a + a::before{
  content:""; position:absolute; left:0; top:.15em; bottom:.15em;
  border-left:1px solid rgba(255,255,255,.3);
}
body .site-footer .copy-link a:hover{color:var(--dg-nhan)}

/* Hoa lục giác mờ rất lớn làm nền chân trang — chi tiết đặc trưng của họ.
   Vẽ bằng SVG nội tuyến nên không tốn thêm một lượt tải nào. */
body .site-footer .cols{
  position:relative;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 100 100'%3E%3Cg fill='%23F5F2EA'%3E%3Cpolygon points='50,4 68,15 68,37 50,48 32,37 32,15'/%3E%3Cpolygon points='50,52 68,63 68,85 50,96 32,85 32,63'/%3E%3Cpolygon points='12,28 30,39 30,61 12,72 -6,61 -6,39'/%3E%3Cpolygon points='88,28 106,39 106,61 88,72 70,61 70,39'/%3E%3C/g%3E%3C/svg%3E") center bottom / 420px auto no-repeat;
}
body .site-footer .cols > *{position:relative}
body .site-footer form input{
  background:#fff !important; color:var(--dg-muc) !important;
  border:1px solid var(--dg-vien) !important; font-family:inherit;
}
body .site-footer form input::placeholder{color:var(--dg-muc-nhat)}
/* ★ Khối thông tin pháp lý — NĐ 52/2013 buộc phải công bố, nên phải ĐỌC ĐƯỢC.
   Nền chân trang cũ là xanh gần đen nên khối này để chữ trắng mờ và link vàng
   nhạt. Nền mới sáng ⇒ chữ mất hút gần như trắng trên trắng. Đo trên máy thật
   mới thấy: đọc CSS chỉ thấy "có màu", không thấy là không đọc nổi. */
body .site-footer .legal{color:var(--dg-muc-nhat)}
body .site-footer .legal b{color:var(--dg-muc)}
body .site-footer .legal a{color:var(--dg-nhan-dam)}
body .site-footer .legal a:hover{color:var(--dg-nen)}

@media (max-width:860px){
  body .site-footer .cols{grid-template-columns:1fr 1fr}
  body .dg-top .khau{display:none}
  body .dg-top-in{justify-content:flex-end; min-height:40px; font-size:11px}
  /* ★ 23/08 — ẨN nút quả địa cầu khỏi thanh trên cùng ở khổ điện thoại.
     Thanh này dồn phải (flex-end): thêm bất cứ thứ gì là phần thừa tràn sang
     TRÁI và không cuộn tới được — đo ra chữ "ĐĂNG NHẬP" bị nuốt mất một nửa,
     Chị nhìn tưởng hỏng menu. Lối đổi ngôn ngữ vẫn còn nguyên và còn dễ thấy
     hơn: bốn nút Tiếng Việt · English · 中文 · 日本語 nằm trong panel menu. */
  body .dg-top .dnn{display:none}
  /* …và từ 27/08 có thêm nút riêng ngay cạnh nút menu, chỗ rộng rãi hơn hẳn */
  body .site-header .dnn-mb{display:block}
}
@media (max-width:540px){
  body .site-footer .cols{grid-template-columns:1fr}
}

/* ═══════════ Dải mời giới thiệu — theo màu mới ═══════════ */
body .dai-moi{background:var(--dg-kem); border-bottom:1px solid var(--dg-vien); color:var(--dg-muc)}
body .dai-moi b{color:var(--dg-nen)}
body .dai-moi .dm-nut{background:var(--dg-nen); color:#fff}

/* ═══════════ Khối dùng lại ở mọi trang con ═══════════
   Các trang con (Sản phẩm, Farm, Tin tức…) dùng chung mấy lớp này. Đổi ở đây
   là cả site đồng bộ, không phải sửa từng mẫu. */
body .card{border:1px solid var(--dg-vien); border-radius:2px; box-shadow:none; background:#fff}
body .doan{padding:2.4rem 0}
body .doan.dai-kem{background:var(--dg-kem)}
body .wrap{max-width:var(--dg-khung)}
body .cta{background:var(--dg-nen); color:#fff}
body .cta .btn{background:var(--dg-nhan); color:var(--dg-nen)}
body .cta .btn:hover{background:#E8CD75; color:var(--dg-nen)}

/* Tiêu đề khối: dáng Dutch Gold — chữ xám ấm, không viền không gạch màu */
body .doan h2, body .dau h2{color:var(--dg-muc-nhat); font-weight:700; letter-spacing:-.005em}
body .dau .mat{color:var(--dg-nhan-dam); letter-spacing:.12em; text-transform:uppercase; font-size:12px}
body .xem-them{color:var(--dg-nhan-dam)}

/* Thẻ sản phẩm ở mọi trang: ảnh DỌC 0,81:1 như Dutch Gold */
body .sp > a .sp-anh{aspect-ratio:270/333}
body .sp > a{border:0; box-shadow:none; background:none}
body .sp h4{font-size:15px; font-weight:500; text-transform:uppercase; color:var(--dg-muc-nhat)}
body .sp .gia{color:var(--dg-do); font-weight:400}
body .sp .sp-ruy{background:var(--dg-nen)}
body .sp .sp-giam{background:var(--dg-do)}
body .sp .sp-mui{background:var(--dg-nen); color:#fff}

/* Màn hẹp: đầu trang cao 184px là chiếm nửa màn hình điện thoại — thu lại. */
@media (max-width:860px){
  body .site-header .bar{padding:.7rem 1rem}
  body .site-header .logo{width:46px; height:46px}
}

/* ═══════════ THẺ SẢN PHẨM TRANG CỬA HÀNG ═══════════
   Chị 11/08: *"các trang con cũng thế"*. Trang /san-pham dùng lớp `.pcard`
   riêng — thẻ trắng bo góc 16px có đổ bóng, khác hẳn thẻ phẳng ảnh dọc của
   trang chủ. Hai trang hai mặt thì không gọi là cùng một giao diện.
   Chỉnh về đúng khuôn Dutch Gold: phẳng, không viền, ảnh DỌC 270/333,
   tên IN HOA đậm sẫm, giá đậm. */
body .pcard{
  background:none; border:0; border-radius:0; box-shadow:none;
}
body .pcard:hover{transform:none; box-shadow:none}
body .pcard:hover .ph img{transform:scale(1.03)}
body .pcard .ph{
  aspect-ratio:270/333; background:var(--dg-xam); padding:0; border-radius:0;
}
body .pcard .ph img{transition:transform .25s ease}
body .pcard .ribbon, body .pcard .sale{
  border-radius:0; box-shadow:none; top:0; font-size:11px; letter-spacing:.07em;
}
body .pcard .ribbon{left:0; background:var(--dg-nen)}
body .pcard .sale{right:0; left:auto; background:var(--dg-do)}
/* ★ THẺ SẢN PHẨM — cỡ chữ do ĐÂY quyết, không phải khối <style> của trang.
   `body .pcard .name` (0-2-1) thắng `.pcard .name` (0-2-0) của shop/index và
   shop/show, nên sửa ở hai tệp đó là sửa vào chỗ đã chết. Đã mất một vòng đo
   mới phát hiện (13/08). Muốn đổi cỡ thẻ sản phẩm thì đổi ở đây.

   Số nguyên pixel, KHÔNG dùng rem lẻ — xem chú thích "CHỮ SẮC NÉT": .94rem =
   15,04px là chữ nhoè. Hạ một bậc theo yêu cầu 13/08 của Chị. */
/* ★ 15/08 Chị: "mấy tiêu đề sản phẩm toàn viết hoa à?" — BỎ IN HOA (lần hai,
   trang chi tiết đã bỏ 14/08). Tên trong dữ liệu vốn tử tế ("Tour Sài Gòn –
   Suối Rao…"), CSS hoa hoá làm tên tour dài thành khối chữ hét 3 dòng.
   Chữ thường thấp hơn chữ hoa nên nâng 14→15px giữ độ hiện diện. */
body .pcard .name{
  font-size:15px; font-weight:700; text-transform:none;
  color:#2B2A26; letter-spacing:0; line-height:1.4;
}
/* 13px: tên thẻ vừa hạ xuống 14px, để mô tả ở 14px nữa là hai dòng bằng nhau,
   mất thứ bậc. Cũng đúng bằng sàn 13px mà khổ điện thoại vốn đã ép. */
body .pcard .desc{font-size:13px; color:var(--dg-muc-nhat)}
body .pcard .gia, body .pcard .price{font-size:16px; font-weight:700; color:var(--dg-do)}
body .pcard .gia s, body .pcard .price s{color:#7C766B; font-weight:400; font-size:13px}

/* ★ BỘ DÁNG ĐẦY ĐỦ CỦA THẺ SẢN PHẨM .pcard — 15/08.
   Partial `shop.the-san-pham` được nhúng sang trang GIỎ HÀNG, nhưng toàn bộ
   luật thẻ nằm trong <style> của shop/index → ở giỏ thẻ VỠ: nhãn -17%/ribbon
   rơi lơ lửng, tên dính liền mô tả (Chị: "cái gì đây" kèm ảnh). Bộ dáng phải
   sống ở LỚP DÙNG CHUNG. Giá trị chép Y NGUYÊN từ shop/index (specificity
   `body .pcard` thắng `.pcard` của trang, nên giá trị lệch là /san-pham đổi
   dáng theo — đừng sửa một bên). */
body .pcard{
  background:#fff;border-radius:2px;border:1px solid rgba(18,59,42,.08);
  box-shadow:var(--shadow-card);overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;position:relative;
  transition:transform .16s ease, box-shadow .16s ease;
}
body .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop)}
body .pcard .ph{
  aspect-ratio:4/5;position:relative;overflow:hidden;
  background:linear-gradient(158deg,#F3EEE1,#E8E0CD);
  display:flex;align-items:flex-end;padding:1rem;
}
body .pcard .ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
body .pcard .ph-nhan{
  position:relative;z-index:1;
  font-size:clamp(.95rem,1.6vw,1.15rem);font-weight:700;line-height:1.25;
  letter-spacing:-.02em;color:rgba(14,43,29,.6);text-wrap:balance;
}
body .pcard .ribbon{
  position:absolute;top:.7rem;left:.7rem;z-index:2;
  background:linear-gradient(135deg,var(--honey-600),var(--honey-400));color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:2px;box-shadow:0 2px 8px rgba(158,127,63,.4);
}
body .pcard .sale{
  position:absolute;top:.7rem;right:.7rem;z-index:2;
  background:#9C4436;color:#fff;font-size:.75rem;font-weight:800;
  padding:.26rem .5rem;border-radius:2px;
}
body .pcard .body{padding:.85rem .95rem 1.05rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
body .pcard .name{display:block}
body .pcard .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;line-height:1.45}
body .pcard .foot{margin-top:auto;display:flex;align-items:baseline;gap:.4rem .5rem;
  padding-top:.5rem;flex-wrap:wrap;row-gap:.45rem}
body .pcard .price{min-width:0}
body .pcard .price s{white-space:nowrap}
/* 16/08 Chị: "icon bị đẩy xuống dưới... làm hẳn hoi" — nút mũi tên chỉ vừa
   dòng giá khi giá NGẮN; giá dài (1.500.000đ + giá gạch) là nút wrap xuống,
   thẻ lệch thẻ không. Cả thẻ vốn là MỘT link bấm được → bỏ hẳn nút ở mọi
   thẻ, đồng bộ với khối Hot (các sàn thương mại cũng không thẻ nào có nút). */
body .pcard .go{display:none}
body .pcard .oosov{position:absolute;inset:0;z-index:3;background:rgba(255,255,255,.55);
  backdrop-filter:blur(1px);display:flex;align-items:center;justify-content:center}
body .pcard .oosov span{background:rgba(18,59,42,.85);color:#fff;font-weight:800;font-size:.8rem;
  border-radius:999px;padding:.4rem 1rem;letter-spacing:.06em}
body .pcard .sold{font-size:.72rem;color:var(--bark-500);font-weight:600}
body .pcard .rate{display:flex;align-items:center;gap:.25rem;font-size:.74rem;font-weight:800;color:var(--forest-900)}
body .pcard .rate-sao{color:var(--honey-500,#D4A83E);letter-spacing:-.02em}
body .pcard .rate i{font-style:normal;font-weight:600;color:var(--bark-500)}
body .pcard .low{font-size:.72rem;color:#9C4436;font-weight:800}

/* Bước franchise CHƯA có ảnh: ẩn hẳn ô 16/9 gradient trống (4 ô to chiếm nửa
   trang — "trống được trang trí"), bước co về thẻ chữ gọn một cột. Gắn ảnh
   thật trong Cấu hình franchise.steps là ảnh tự hiện lại (15/08 Chị:
   "/franchise làm đẹp gọn gàng"). */
body .zstep .zimg.noimg{display:none}
body .zstep:has(.zimg.noimg){grid-template-columns:1fr}
/* 17/08 Chị gửi ảnh /franchise: bước không ảnh trên desktop vẫn ăn 3 luật của
   dáng zigzag bên site.css (số lục giác left:50% ĐÈ lên tiêu đề, bước chẵn
   text-align:right, đường nối 50% xuyên giữa chữ). Dáng zigzag sống nhờ KHE
   giữa hai cột ảnh–chữ; không ảnh là không có khe → ép trọn về dáng dọc-trái
   như bản điện thoại ở mọi khổ màn. */
@media(min-width:860px){
  body .zstep:has(.zimg.noimg){padding-left:56px;align-items:start}
  body .zstep:has(.zimg.noimg) .ztxt{grid-column:1;grid-row:auto;text-align:left}
  body .zstep:has(.zimg.noimg) .znum{left:0;top:0;transform:none}
  body .zig:has(.zimg.noimg)::before{left:19px;transform:none}
}
/* Chữ bước bọc thẻ trắng cùng ngôn ngữ với hộp FAQ ngay dưới — nổi khỏi nền
   kem, hết cảnh chữ trần lơ lửng cạnh đường đứt nét. */
body .zstep:has(.zimg.noimg) .ztxt{background:#fff;border:1px solid rgba(18,59,42,.09);
  border-radius:2px;padding:.9rem 1.1rem;box-shadow:0 1px 4px rgba(18,59,42,.05)}

/* ★ THẺ KHÔNG ẢNH (.pcell.noimg) — 15/08 Chị: "/dich-vu làm đẹp gọn gàng".
   Thẻ này vốn là THẺ ẢNH: cao 3/4, nền tối, chữ trắng đè lên ảnh. Chưa gắn
   ảnh thì thành một khối xanh TỐI OM trống nửa trên — đo ảnh thấy lặp ở cả
   /dich-vu, /ve-chung-toi, /ong-du (12 thẻ). Không ảnh thì đừng giả làm thẻ
   ảnh: nền kem sáng, chữ sẫm, cao theo nội dung — icon lục giác vàng giữ.
   (Từng bị một dấu đóng chú thích lạc vào dòng đầu — 4 dòng này thành CSS
   rác nuốt mất rule nền kem, chữ xanh rơi trên nền xanh. Đo mới ra.) */
body .pcell.noimg{
  aspect-ratio:auto; min-height:0; color:var(--dg-muc);
  background:linear-gradient(160deg,#FAF7EF,#F6F1E4);
  border:1px solid var(--dg-vien);
}
body .pcell.noimg::after{display:none}
/* Thẻ CÓ ảnh: lớp phủ gốc quá mỏng ở vùng giữa — 6 ô Giá trị cốt lõi dùng
   ảnh xanh sáng vừa nên chữ trắng mờ tịt (Chị 15/08: nhìn ảnh chụp là rõ).
   Phủ đậm dần từ 30% → 94% cho chữ nổi trên MỌI ảnh. */
body .pcell:not(.noimg)::after{
  background:linear-gradient(180deg, rgba(9,29,20,.30) 0%, rgba(9,29,20,.62) 45%, rgba(9,29,20,.94) 100%);
}
body .pcell.noimg .in{margin-top:0; padding:1.35rem 1.15rem 1.25rem}
body .pcell.noimg b{color:var(--dg-nen); text-shadow:none; font-size:16px}
body .pcell.noimg p{color:#484237}
body .pcell.noimg .ic{filter:none}

/* Dải chữ trên các trang con: cùng cỡ số nguyên pixel với trang chủ để chữ
   không bị nội suy (xem chú thích "CHỮ SẮC NÉT" ở site/home.blade.php). */
body .doan h2{font-size:30px}
body .doan h3{font-size:20px}
body .doan h4{font-size:16px}

/* ═══════════════════════════════════════════════════════════════════════════
   MÀN ĐIỆN THOẠI — SÀN CHỮ VÀ SÀN CHẠM
   Chị 11/08/2026: *"cả mobile nữa nhiều cái lệch lắm"*.

   Quét 21 trang bằng trình duyệt ở 390×844, hai lỗi lặp trên MỌI trang:

     · CHỮ DƯỚI 13px — thanh trên cùng 11px, "Đọc tiếp" 11px, nhãn "QR độc bản"
       10px, thông tin pháp lý 12,8px. Trên màn 6 inch cầm xa 30cm thì 11px
       tương đương chữ 6pt trên giấy.
     · NÚT CHẠM CAO 17–30px — đường dẫn chân trang cao 17px, "Đăng nhập" trên
       thanh vàng 30px. Ngón tay người lớn chạm chuẩn cần 44px; 17px là bấm ba
       lần trúng một.

   Đặt SÀN thay vì sửa từng chỗ: thêm khối mới về sau cũng tự đúng.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   ★ THANG TIÊU ĐỀ TRÊN MÁY TÍNH — Chị 13/08 (vòng 2): "đây này chữ nó vẫn to ấy",
   gửi kèm ảnh trang chủ ở khổ RỘNG.

   Vòng 1 em chỉ hạ dưới 640px nên khổ máy tính không đổi. Đo lại ở 1366/1440/1920:

       tiêu đề hero  41,0 · 43,2 · 44,8px      ← 3vw, nở tới khi chạm trần 2,8rem
       .tc-doi b     32px      .tc-tieu 30px
       .tc-o b       24px      tên farm 22px   tiêu đề tin 20px

   44,8px là cỡ chữ của bảng hiệu, không phải của trang bán hàng — mà đoạn văn
   ngay dưới nó chỉ 16px, chênh gần ba lần.

   Gom về: hero 32 · mục 24 · thẻ 18–21. Vẫn dùng clamp để khổ 641–1100px co
   mượt, đáy clamp đúng 1,5rem = 24px nên nối liền với khối điện thoại bên dưới,
   không có bậc nhảy ở ranh giới 640/641.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:641px){
  /* `body` để thắng khối <style> của từng trang — trang nạp SAU dg.css nên
     ngang điểm là trang thắng (bẫy D2). */
  body .tc-lon h1,
  body .pg-hero h1,
  body .sv-hero h1,
  body .fr-hero h1,
  body .ab-hero h1,
  body .od-hero h1,
  body .cr-hero h1,
  body .fhero h1,
  body .bv-dau h1,
  body .mua-dau h1,
  body .shop-hero h1,
  body .sr-hero h1{ font-size:clamp(19px,1.5vw,1.32rem); line-height:1.25; font-weight:800 }

  /* ★ 19/08 — Chị: *"tiêu đề nhìn đơn sơ quá"* rồi *"cho IN HOA đi"*.
     Khối này là thủ phạm thật: nó viết ở mức 0-2-1 nên ĐÈ cả cỡ chữ đặt trong
     <style> của trang chủ (0-2-0) — đặt 32px ở trang mà ra 20px trên màn hình,
     đúng bẫy "đếm lớp thắng đếm thẻ" (D2). Sửa phải sửa Ở ĐÂY.
     Chữ HOA choán ngang hơn chữ thường nên không kéo lên bằng cỡ chữ thường:
     mục lớn 27px, đầu dãy 21px — vẫn dưới hero 32px, giữ đúng bậc đã chốt. */
  body .tc-tieu{ font-size:21px }
  body .tc-tieu.giua{ font-size:27px }
  /* Tiêu đề BÀI VIẾT tách khỏi thang hero: hero là câu trang trí, còn đây là
     TÊN của nội dung chính — 21px làm nó chìm dưới cả đoạn dẫn (Chị 14/08:
     "tin tức chữ thì như này… tôi thấy sao sao ấy"). */
  body .bv-dau h1{ font-size:clamp(24px,2vw,28px); line-height:1.25 }

  body .tc-doi b{ font-size:clamp(1.05rem,1.35vw,1.15rem); font-weight:800 }
  body .tc-o b{ font-size:16px; font-weight:800; line-height:1.14 }

  /* ★ 13/08 — BỎ IN HOA cho ba khối Chị khoanh đỏ (Chị chọn phương án này).
     Hạ px bốn vòng — 44,8 → 32 → 25,3 → 20,5 — mà Chị vẫn thấy to, vì em cứ
     đụng vào cỡ chữ trong khi thứ làm nó "to" là HÌNH KHỐI: chữ IN HOA chiếm
     nhiều diện tích hơn chữ thường khoảng 30% ở cùng một cỡ, lại không có phần
     nhô lên/thò xuống (b, g, h, y) nên cả dòng thành một dải đặc, mắt đọc ra
     một mảng chứ không ra một câu.
     Giữ nguyên 20px và độ đậm 800 — chỉ đổi dáng chữ.
     KHÔNG đụng in hoa ở menu, nhãn danh mục, nút: chuỗi ngắn 1–3 chữ thì in hoa
     là nhận diện Dutch Gold, không phải chỗ gây nặng. */
  body .tc-lon h1,
  body .tc-o b,
  body .tc-doi b{ text-transform:none; letter-spacing:0 }

  body .tc-farm-phai h3{ font-size:17px }
  body .tc-hd h3{ font-size:16px }
  body .scard .sbody h2{ font-size:19px }
  body .bv-than h2{ font-size:19px }
  body .bv-than h3{ font-size:16px }

  /* Đoạn mở đầu dưới tiêu đề hero: 16px giãn dòng 25,6 là cỡ chữ bài báo,
     đứng cạnh tiêu đề vừa hạ thì nó thành khối chữ nặng nhất màn hình. */
  body .tc-lon p{ font-size:15px; line-height:1.5 }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ★ NÚT LÊN ĐẦU TRANG BỊ BONG BÓNG ZALO PHỦ KÍN — Chị báo 13/08.

   Đo trên máy thật, khổ 1440:
       #backtop     46×52  tại x1378→1424  y828→880   z-index 70
       bong bóng Zalo 52×52 tại x1372→1424 y829→881   z-index 80
   ⇒ chồng nhau 46×51px, Zalo nằm trên ⇒ nút lên đầu trang KHÔNG BAO GIỜ bấm
   được. Khổ 414 cũng y hệt (chồng 46×47px). Tức là hỏng ở MỌI trang, MỌI khổ.

   Vì sao đụng nhau — hai lần sửa đều đúng, cộng lại thành sai:
     · site.css neo #backtop góc dưới TRÁI;
     · sang.css dời sang PHẢI vì bên trái đè lên chữ chân trang;
     · mà bên phải đã có sẵn cụm chat, cũng right:1rem bottom:1.2rem.

   Sửa: đẩy #backtop lên TRÊN cụm chat. Đếm bong bóng bằng :has() nên bật/tắt
   Messenger trong Cấu hình là nó tự giãn, không phải nhớ đi sửa con số. Khi
   Chị chưa điền Zalo lẫn Messenger thì không luật nào khớp — nút giữ nguyên
   chỗ cũ, đúng như trước.

   Độ ưu tiên: `:has()` lấy điểm của phần tử cụ thể nhất bên trong, nên
   `body:has(.chat-float a) #backtop` = (1-1-2), thắng `#backtop` (1-0-0) của
   cả site.css lẫn sang.css, kể cả luật trong media query.
   ═══════════════════════════════════════════════════════════════════════════ */
body:has(.chat-float a) #backtop{ bottom:calc(1.2rem + 52px + .6rem) }
body:has(.chat-float a + a) #backtop{ bottom:calc(1.2rem + 113px + .6rem) }
@media (max-width:760px){
  /* Dưới 760px cụm chat tự nâng lên 4,6rem để nhường thanh gọi nhanh ở đáy
     (site.css). Mốc ở đây phải bám theo con số đó, không phải 1,2rem. */
  body:has(.chat-float a) #backtop{ bottom:calc(4.6rem + 52px + .6rem + env(safe-area-inset-bottom)) }
  body:has(.chat-float a + a) #backtop{ bottom:calc(4.6rem + 113px + .6rem + env(safe-area-inset-bottom)) }
}

@media (max-width:640px){

  /* ── ★ THANG TIÊU ĐỀ TRÊN ĐIỆN THOẠI (Chị yêu cầu 13/08: "chữ tiêu đề hơi to") ──
     Đo trên khung 414px trước khi sửa: mỗi trang một cỡ, không theo thang nào —
     trang chủ 30,4px · sản phẩm 29,6px · bài viết 28px · tin tức 25,6px, còn
     `.tc-tieu` là H2 mà 30px, TO HƠN cả H1 của nửa số trang.

     Gom về một thang: H1 24 · H2 21 · H3 17. Chỉ dưới 640px — máy tính giữ
     nguyên, các clamp() vẫn nở đúng như cũ ở khổ rộng.

     ★ Vì sao phải thêm `body`: khối <style> của từng trang nạp SAU dg.css, nên
     ngang điểm là TRANG THẮNG. `body .tc-lon h1` (0-1-2) mới trèo qua được
     `.tc-lon h1` (0-1-1). Riêng `.tc-tieu.giua` trang chủ có 2 lớp nên phải
     viết đủ `body .tc-tieu.giua` (0-2-1), thiếu là nó ở lì 25px một mình.

     line-height 1,2 là BẮT BUỘC, không phải cho đẹp: `.tc-lon h1` đang để 1,02
     — ở 30px thì lọt, thu về 24px là dấu Ậ/Ả/Ồ hàng dưới đội lên chạm hàng trên. */
  body .tc-lon h1,
  body .pg-hero h1,
  body .sv-hero h1,
  body .fr-hero h1,
  body .ab-hero h1,
  body .od-hero h1,
  body .cr-hero h1,
  body .fhero h1,
  body .bv-dau h1,
  body .mua-dau h1,
  body .shop-hero h1,
  body .sr-hero h1{ font-size:19px; line-height:1.28; font-weight:800 }
  body .tc-o b{ font-size:16px; font-weight:800; line-height:1.14 }

  body .tc-lon h1,
  body .tc-o b,
  body .tc-doi b{ text-transform:none; letter-spacing:0 }

  body .tc-lon p{ font-size:15px; line-height:1.5 }

  /* H2 — mọi tiêu đề mục về một bậc. `.scard .sbody h2` không có luật riêng nào
     nên rơi về mặc định trình duyệt 1,5em = 24px, BẰNG H1: nhìn ra hai tiêu đề
     ngang hàng, không biết cái nào là mục con. Phải đủ 2 lớp mới đè được. */
  body .bv-dau h1{ font-size:22px; line-height:1.3 }

  /* Khổ điện thoại: mục lớn vẫn phải nhỉnh hơn đầu dãy để ra bậc */
  body .tc-tieu,
  body .scard .sbody h2{ font-size:18px }
  body .tc-tieu.giua{ font-size:21px }
  body .bv-than h2{ font-size:18px }

  /* H3 — thẻ Farm để 22px, TO HƠN cả H2 vừa hạ; kéo về đúng bậc dưới. */
  body .tc-farm-phai h3,
  body .tc-hd h3{ font-size:16px }
  body .bv-than h3{ font-size:16px }

  /* ── Sàn chữ 13px ── */
  body .dg-top,
  body .dg-top a,
  body .site-footer a,
  body .site-footer p,
  body .site-footer .legal,
  body .site-footer .legal b,
  body .site-footer .copy,
  body .site-footer .copy-link,
  body .mobile-bar span,
  body .tc-o i,
  body .tc-doi .nut,
  body .tc-hd .doc,
  body .tc-farm-trai .nhan,
  body .tc-farm-trai .goi,
  body .tc-farm-phai .so span,
  body .tc-farm-phai .nut .phu,
  body .tc-sp .loai,
  body .pcard .desc,
  body .pcard .sold,
  body .kicker{ font-size:13px }

  /* Nhãn góc ảnh vốn cố ý nhỏ — nhưng 10px thì không đọc được, nâng lên 11px.
     Ba nhãn này nằm ĐÈ TRÊN ẢNH ở góc thẻ, chữ trắng nền đặc, đọc lướt chứ
     không đọc từng chữ — nên được phép nhỏ hơn sàn bên dưới. */
  body .tc-sp .ruy, body .tc-sp .giam,
  body .pcard .ribbon, body .pcard .sale{ font-size:11px }

  /* ══ SÀN CHỮ 13px CHO NHÃN NẰM TRONG DÒNG VĂN ══
     ★ Đo lại 12/08 mới lộ: sàn đặt ở đợt trước IM LẶNG KHÔNG ĂN. `body .kicker`
     là 0-1-1, mà luật của từng trang viết `.fcard .chip` / `.job .tag` là 0-2-0
     — đếm lớp thắng đếm thẻ, nên trang con luôn thắng. Nhìn bảng kiểm thì thấy
     "đã sửa", nhìn máy thật vẫn 11,5–12,2px.

     Đây là SÀN ĐỌC ĐƯỢC, không phải lựa chọn kiểu dáng, nên dùng !important
     có chủ đích: nó phải thắng vô điều kiện, kể cả `style=""` viết thẳng trong
     thẻ (nhãn giảm giá #pv-discount đúng kiểu đó — không có !important thì
     không luật nào trong tệp CSS với tới). Muốn nhãn nào nhỏ hơn thì thêm vào
     nhóm "nhãn góc ảnh" ở trên, đừng gỡ sàn. */
  body .fcard .chip,
  body .job .tag,
  body .pd .tag,
  body .hero-stats span,
  body .kicker,
  body .bv-nhom,
  body .cs-noi thead th,
  body .specs dt,
  body .moc .yr,
  body .buoc-mua .b, body .buoc-mua .b span,
  body #pv-discount{ font-size:13px !important }

  /* ══ ★ 14/08 — VÉT NỐT SÀN 13px, đợt soát "hết ngõ ngách" của Chị ══
     Liệt kê bằng máy trên 16 trang: còn 23 kiểu khối chữ dưới 13px. Đã LOẠI
     TRỪ nhãn góc ảnh (.sale/.giam/.ribbon/.ruy) vì D7 cho phép chúng 11px —
     nền đặc, đọc lướt. Số còn lại đều là chữ NẰM TRONG DÒNG VĂN nên phải lên sàn:

       · nhãn biểu mẫu 12,8px trên 8 biểu mẫu khác nhau — đây là chỗ khách gõ
         họ tên, số điện thoại để đặt hàng, nhỏ nhất lại là chỗ quan trọng nhất;
       · h2 tiêu đề mục 12,8px — một TIÊU ĐỀ mà nhỏ hơn cả chữ thân bài;
       · .trust span và .cs-link a trên trang sản phẩm (bảo hành, đổi trả);
       · chữ trong ô ảnh trống, dòng ngày tháng bài viết, nhãn nút Zalo.

     Dùng !important vì đây là SÀN — đúng trường hợp D3 cho phép. Không dùng thì
     phải đi đếm lớp với 8 tệp mẫu khác nhau, mà mỗi lần thêm trang mới lại sót. */
  body form label,
  body .card label,
  body .job label,
  body .hop label,
  body .tc-tra label,
  body .rem label,
  body .card h2,
  body .pd .trust span,
  body .pd .cs-link a,
  body .pcell .in p,
  body .hero-post .d,
  body .chat-float a,
  body .cats a i,
  body small{ font-size:13px !important }

  /* ── Sàn chạm 44px cho các đường dẫn điều hướng ──
     Chỉ áp cho liên kết ĐỘC LẬP; link nằm giữa câu văn (display:inline) không
     đụng tới — kéo cao chúng lên là dòng chữ bị giãn loang lổ. */
  body .dg-top a,
  body .site-footer .cols a,
  body .site-footer .copy-link a{
    min-height:44px; display:flex; align-items:center;
  }
  body .site-footer .copy-link a{ justify-content:center }

  /* Số điện thoại và email ở khối pháp lý cao có 15px — mà đây đúng là chỗ
     khách bấm để gọi. Chúng nằm giữa dòng chữ nên không kéo cao được cả dòng;
     cho chúng thành khối riêng, đủ 44px. */
  body .site-footer .legal a{
    display:inline-flex; align-items:center; min-height:44px;
    font-weight:700; text-decoration:underline;
  }
  body .tc-farm-phai .nut .phu,
  body .moi-dk-bo,
  body a.quay{ min-height:44px; display:inline-flex; align-items:center }

  /* ══ ★ 14/08 — VÉT NỐT SÀN CHẠM 44px ══
     Đo trên 16 trang: 18 kiểu liên kết điều hướng còn dưới 44px. Tệ nhất là
     hai chỗ chỉ cao 18–19px — link trong bảng thông số sản phẩm và link ở khối
     câu hỏi chính sách; ngón tay người lớn bấm ba lần trúng một.

     CỐ Ý BỎ QUA `.agree label a` (dòng "Tôi đồng ý với điều khoản" cạnh ô tích):
     link đó nằm GIỮA CÂU, kéo cao lên là dòng chữ giãn loang lổ — đúng ngoại lệ
     D7 đã ghi. */
  body .breadcrumb a,
  body .crumbs a,
  body .tc-hd .doc,
  body .cats a,
  body .day-xem,
  body .pd .cs-link a,
  body .bv-chia a,
  body .bv-the a,
  body .job a,
  body .specs dd a,
  body .cs-hoi a,
  body .cs-khac a,
  body .tc-farm a,
  body .card.reveal > a,
  body .lg form a{
    min-height:44px !important; display:inline-flex; align-items:center;
  }
  body .dg-top-in{ min-height:auto; flex-wrap:wrap; row-gap:0 }
  body .dg-top .gio{ margin-right:0; padding:0 .9rem }

  /* ── Hai lỗi nhìn ảnh chụp điện thoại mới thấy (11/08/2026) ──

     1. GIÁ GẠCH NGANG BỊ CẮT. Thẻ trong dải cuộn ngang chỉ rộng ~152px, mà
        "1.500.000₫ 1.800.000₫" cần hơn 200px ⇒ giá cũ đứt giữa số, đọc ra
        thành "1.800" — khách tưởng đó là giá bán.
     2. HOA MỜ CHÂN TRANG PHỦ KÍN MÀN. Hoạ tiết 420px vừa vặn trên máy tính,
        nhưng trên màn 390px nó trùm hết cột chữ, chữ xám trên hoạ tiết xám. */
  body .pcard .gia, body .pcard .price,
  body .tc-sp .gia{ display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .4rem }
  body .pcard .gia s, body .pcard .price s,
  body .tc-sp .gia s{ margin-left:0 }

  body .site-footer .cols{ background-size:230px auto; background-position:center bottom }

  /* Nhãn/chip/thẻ lọc — 11,5–11,8px là quá nhỏ để bấm và để đọc.
     Trang Tin tức có 45 thẻ chủ đề ở cỡ này, đúng thứ khách dùng để lọc bài. */
  body .chip, body .pill, body .kicker,
  body .tags a, body .tags span,
  body .g, body .d{ font-size:13px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU ĐIỆN THOẠI — dựng lại 12/08/2026
   Chị: *"mobile làm sao cho ổn đi chứ như này ko ổn lắm"* (kèm ảnh menu mở).

   Đo được 5 lỗi thật trên máy thật:
     1. 8/14 hàng bo tròn 999px — trên hàng rộng 358×45 thì thành viên thuốc
        lạc lõng, đúng cái vòng oval quanh "TIN TỨC" trong ảnh Chị gửi.
     2. Panel cao 772 trên màn 844, bắt đầu từ y=159 → hụt đáy, lòi chân trang.
     3. Trang vẫn cuộn được sau lưng menu (6821px) → vuốt là thấy chân trang.
     4. Mục con chỉ cao 40px, dưới sàn chạm 44px.
     5. Thừa 93,6px đệm đáy, phải cuộn vô ích.

   ★ VÌ SAO LUẬT CŨ KHÔNG ĂN — ghi lại kẻo lặp lần nữa:
   `sang.css` có `.site-header .main-nav a` = 0-3-0. Nó thắng cả
   `site.css @media .main-nav a` (0-1-1) lẫn `dg.css body .main-nav a` (0-1-1),
   vì ĐẾM LỚP thắng ĐẾM THẺ. Nên khối này phải viết ở mức **0-3-1**
   (`body .site-header .main-nav …`) mới nói được tiếng nói cuối.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:860px){

  /* ── Panel phủ trọn phần màn hình dưới thanh đầu ──
     `--dau-cao` do nút hamburger đặt lúc mở (xem layout.blade.php); có sẵn
     giá trị dự phòng để tắt JS vẫn không vỡ. */
  /* ★ 15/08 — ĐỔI `fixed` → `absolute`, vì hai engine hiểu `fixed` hai kiểu:
     Chrome coi `.site-header` (có backdrop-filter) là KHUNG CHỨA của fixed
     → `top:100%` = đáy thanh đầu, đúng; nhưng SAFARI/iPhone KHÔNG coi
     backdrop-filter là khung chứa → `top:100%` = đáy MÀN HÌNH → panel nằm
     ngoài tầm nhìn, Chị bấm menu thấy trống trơn ("ấn vào menu ko có").
     `.site-header` là `position:sticky` = phần tử định vị, nên `absolute`
     neo vào nó theo CHUẨN trên mọi engine — hết mập mờ. Menu mở thì trang
     đã khoá cuộn (html overflow:hidden) nên absolute hành xử y như fixed.
     `100dvh` vì thanh địa chỉ điện thoại ẩn/hiện làm `100vh` tính dư;
     dòng `100vh` đứng trước làm dự phòng cho iOS cũ chưa hiểu dvh. */
  body .site-header .main-nav.open{
    position:absolute; left:0; right:0;
    top:100%; bottom:auto;
    height:calc(100vh - var(--dau-cao, 160px));
    height:calc(100dvh - var(--dau-cao, 160px));
    max-height:none;
    overflow-y:auto; overscroll-behavior:contain;
    /* Chừa đúng 56px cho thanh đáy `.mobile-bar` (đo được, z-index 90 — cao
       hơn menu nên nó ĐÈ LÊN chứ menu không che được nó). Không chừa thì nút
       Đăng nhập nằm khuất sau thanh đáy, đúng lỗi Chị đã báo BA LẦN. */
    padding:.5rem .9rem calc(56px + .8rem + env(safe-area-inset-bottom));
    /* 18/08 Chị: "menu mobile làm hẳn hoi" — panel trắng gãy tông với header
       nâu mới. Cho panel nối liền header: nâu đậm theo nền logo, chữ kem,
       điểm nhấn vàng kim (các luật màu chữ ngay dưới đây đổi theo). */
    background:linear-gradient(180deg,#123B2A,#123B2A);
    box-shadow:0 14px 34px rgba(0,0,0,.35);
    gap:0;
  }
  /* Trang nào không có thanh đáy thì khỏi chừa chỗ thừa */
  body:not(:has(.mobile-bar)) .site-header .main-nav.open{
    padding-bottom:calc(1rem + env(safe-area-inset-bottom));
  }

  /* ── Hàng menu: VUÔNG, đủ cao để bấm, có vạch ngăn mảnh ──
     ★ CHỮ THƯỜNG ĐẬM, KHÔNG IN HOA — Chị 12/08: *"sao nó ko gọn gàng thế, làm
     cho tôi như trong ảnh 2 và sao cho font chữ như thế đi"*. Ảnh 2 là hộp
     "Đăng ký ID trước khi thanh toán": chữ thường đậm, không giãn chữ.
     IN HOA + giãn chữ hợp cho nhãn ngắn trên thanh ngang máy tính, nhưng xếp
     dọc 14 hàng trên điện thoại thì thành một khối chữ hét, mắt không bám được
     đâu là đầu từ. Chữ thường có phần nhô lên thụt xuống nên đọc lướt nhanh hơn. */
  body .site-header .main-nav.open a,
  body .site-header .main-nav.open .dd-btn{
    border-radius:2px;
    min-height:46px;
    padding:.6rem .8rem;
    font-size:16px;
    font-weight:600;
    text-transform:none;
    letter-spacing:0;
    color:#F6F1E4;
    border-bottom:1px solid rgba(255,255,255,.09);
    justify-content:flex-start;
    width:100%;
  }

  /* ── Đang ở trang nào: vạch vàng bên trái + nền kem.
     Thay cho vòng viên thuốc cũ — vòng oval quanh một hàng dài nhìn như
     lỗi hiển thị chứ không như "bạn đang ở đây". ── */
  body .site-header .main-nav.open a.on,
  body .site-header .main-nav.open .nav-dd.here > .dd-btn{
    background:rgba(255,255,255,.08);
    border-left:3px solid var(--dg-nhan);
    padding-left:calc(.85rem - 3px);
    font-weight:800;
    color:#E8CD75;
  }

  /* ── Nhóm "Giới thiệu": trải phẳng nhưng có đầu mục, thụt vào một nấc ── */
  body .site-header .main-nav.open .nav-dd{ width:100%; display:block }
  body .site-header .main-nav.open .dd-btn{ font-weight:700 }
  body .site-header .main-nav.open .dd-menu{
    display:block; position:static; box-shadow:none; border:0;
    padding:0 0 0 .9rem; margin:0;
    border-left:2px solid rgba(232,205,117,.35);
  }
  body .site-header .main-nav.open .dd-menu a{
    min-height:44px; font-size:15px; font-weight:500; letter-spacing:0;
    text-transform:none; color:rgba(246,241,228,.78);
    border-bottom:1px solid rgba(255,255,255,.09);
  }
  /* Đầu mục nhóm: chữ nhỏ in hoa — ĐÂY mới là chỗ hợp với in hoa, vì nó là
     NHÃN chứ không phải mục bấm được. Có nó thì sáu dòng thụt vào bên dưới
     mới ra nghĩa "đây là một nhóm", chứ không phải danh sách rời rạc. */
  /* Chữ nhãn lấy từ thuộc tính data-nhan trên chính thẻ, KHÔNG ghi cứng ở đây:
     ghi cứng thì bản tiếng Trung/Nhật vẫn trơ ra chữ "Giới thiệu" giữa panel
     (23/08 — cùng lỗi với mọi chữ nằm trong CSS). */
  body .site-header .main-nav.open .nav-dd::before{
    content:attr(data-nhan);
    display:block; padding:.9rem .8rem .35rem;
    font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
    color:#E8CD75;
  }

  /* ── Hàng đổi ngôn ngữ trong panel điện thoại (23/08) ── */
  body .site-header .main-nav.open .dnn-dt{
    display:flex; flex-wrap:wrap; gap:.4rem; width:100%;
    margin-top:.9rem; padding-top:.9rem; border-top:1px solid rgba(255,255,255,.14);
  }
  body .site-header .main-nav.open .dnn-dt a{
    flex:1 1 auto; min-height:40px; min-width:0; width:auto;
    display:inline-flex; align-items:center; justify-content:center;
    padding:.35rem .7rem; border-radius:999px; border-bottom:0;
    border:1px solid rgba(255,255,255,.26);
    font-size:13px; font-weight:700; color:rgba(246,241,228,.9);
  }
  body .site-header .main-nav.open .dnn-dt a.on{
    background:var(--dg-nhan); border-color:var(--dg-nhan); color:var(--dg-nen); font-weight:800;
  }
  body .site-header .main-nav.open .dd-btn{ display:none }
  body .site-header .main-nav.open .dd-menu a:last-child{ border-bottom:0 }

  /* ── Cụm tiện ích: tìm kiếm · giỏ — HÀNG THƯỜNG, đồng kiểu với các hàng
     menu bên trên. Trước đây "Giỏ" mang nguyên hộp viền của thanh ngang còn
     "Tìm kiếm" trần không vạch — hai hàng cạnh nhau hai kiểu (Chị chê 14/08). ── */
  body .site-header .main-nav.open .nut-tron,
  body .site-header .main-nav.open .cart,
  body .site-header .main-nav.open .gio{
    border-radius:2px; width:100%; justify-content:flex-start;
    min-height:48px; margin:0; display:flex; align-items:center; gap:.6rem;
    border:0; border-bottom:1px solid rgba(255,255,255,.09); background:none;
    padding:.6rem .8rem; font-size:16px; font-weight:600; color:#F6F1E4;
  }
  /* Khoảng thở tách nhóm tiện ích khỏi nhóm duyệt trang */
  body .site-header .main-nav.open .nut-tron:first-of-type{ margin-top:.7rem }

  /* ── Cụm nút cuối: Đăng nhập (viền) + ĐĂNG KÝ (vàng) đứng CẠNH NHAU một
     hàng, neo đáy bằng margin-top:auto — KHÔNG position:sticky nữa.
     Bài học 14/08 (Chị bắt hai lần "lỗi tè le"): nút ghim ĐÈ hàng
     "Tìm kiếm"/"Giỏ" khi panel chưa cuộn, panel lại phải chừa đệm 52px nên
     dưới đáy trống hoác. Nút nằm trong luồng thì không che ai; neo bằng
     margin auto thì nội dung ngắn vẫn kín đáy panel, nội dung dài thì nút
     trôi theo luồng cuộn như thường. ── */
  body .site-header .main-nav.open .cum-nut{
    display:flex; gap:.65rem; width:100%;
    margin-top:auto; padding-top:.9rem;
  }
  body .site-header .main-nav.open .cum-nut a{
    flex:1; min-height:50px; margin:0; border-radius:2px;
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    font-size:16px;
    /* site.css còn luật `.main-nav.open .dang-nhap{position:sticky}` đời cũ —
       phải trung hoà, không thì trên màn thấp (panel phải cuộn) nút xê dịch;
       bóng đổ tối của luật đó cũng phải tắt (nút nằm trong luồng rồi). */
    position:static; box-shadow:none;
  }
  body .site-header .main-nav.open .dang-nhap{
    border:1.5px solid rgba(246,241,228,.85); color:#F6F1E4;
    font-weight:700; background:transparent;
  }
  body .site-header .main-nav.open .dang-ky{
    background:var(--dg-nhan); color:var(--dg-nen);
    border:0; font-weight:800;
  }
  /* Đã đăng nhập: hàng "Tài khoản" một mình thay cụm nút — cũng neo đáy */
  body .site-header .main-nav.open .acct{
    position:static; margin-top:auto; width:100%; min-height:50px; border-radius:2px;
    display:flex; align-items:center; justify-content:center; gap:.5rem;
    background:var(--dg-nhan); color:var(--dg-nen); border:0; font-weight:800;
  }

  /* Trang KHÔNG được cuộn sau lưng menu — đây là thứ làm lòi chân trang ra
     dưới panel trong ảnh Chị gửi. Khoá bằng CSS để tắt JS vẫn đúng.
     ★ Phải khoá ở <html>: đo ra `html` mới là thứ đang cuộn (scrollHeight
     6821), đặt `overflow:hidden` mỗi trên <body> thì trang vẫn trôi như thường. */
  html:has(.main-nav.open),
  body:has(.main-nav.open){ overflow:hidden }

  /* ── Menu mở thì giấu mọi bong bóng nổi ──
     Đo được khi menu đang mở: `.chat-float` (Zalo, z=80) và nút lên đầu trang
     (z=70) vẫn hiện, nằm đè lên đúng hàng "GIỎ" và nút Đăng nhập.
     site.css đã có luật ẩn nhưng không ăn; viết lại ở đây với `body` + tên lớp
     để chắc chắn thắng. */
  body:has(.main-nav.open) .chat-float,
  body:has(.main-nav.open) #backtop{ display:none !important }

  /* ── Thanh trên cùng: MỘT hàng, đừng xuống dòng ──
     Đo được cao 88px vì `flex-wrap:wrap` đẩy "Giỏ hàng: 0 sản phẩm" xuống
     hàng hai — nhìn như vỡ bố cục, mà lại chiếm mất 1/10 màn hình.
     Nay ép một hàng và rút gọn nhãn giỏ (chữ "sản phẩm" ẩn đi bằng CSS,
     vẫn còn trong mã cho trình đọc màn hình). */
  body .dg-top-in{ flex-wrap:nowrap; min-height:40px; gap:.55rem }
  body .dg-top .gio{ padding:0 .7rem; white-space:nowrap }
  body .dg-top a{ padding:.35rem .15rem; white-space:nowrap }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NÚT CHÍNH / NÚT PHỤ — 12/08/2026

   Chị gửi ảnh trang "Tổ ong của tôi": bốn nút xanh đậm y hệt nhau — "Xem hồ sơ
   QR", "Xin nhận mật", "Gửi yêu cầu", "Đóng". Nút ĐÓNG nhìn quan trọng ngang
   nút GỬI YÊU CẦU, nên mắt không biết bấm cái nào.

   ★ Mã nguồn KHÔNG sai: markup đã ghi rõ `btn chinh` và `btn phu` từ đầu.
   Thiếu là phần CSS cho hai lớp đó — chưa từng được viết ở đâu. Ý định nằm
   trong HTML, thực thi thì không có. Loại hỏng này không báo lỗi, không có
   dòng nhật ký nào; chỉ nhìn mới thấy, nên nó sống rất lâu.

   Viết ở đây (dg.css, lớp dùng chung) chứ không viết trong từng trang: hai lớp
   này đang dùng ở trang Tổ ong và trang Cập nhật, mai còn trang khác.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Nút chính: giữ nguyên nền đặc — nó là việc ta muốn khách làm */
body .btn.chinh{ background:var(--dg-nen); color:#fff }
body .btn.chinh:hover{ background:var(--dg-nen-nhat); color:#fff }

/* Nút phụ: viền rỗng. Vẫn rõ là nút bấm được, nhưng không tranh mắt với nút
   chính. "Đóng" và "Huỷ" luôn thuộc nhóm này — đó là lối thoát, không phải
   thứ ta mời người ta bấm. */
body .btn.phu{
  background:#fff; color:var(--dg-nen);
  border:1.5px solid var(--dg-nen); box-shadow:none;
}
body .btn.phu:hover{ background:var(--dg-kem); color:var(--dg-nen) }

/* Hai nút đứng cạnh nhau phải bằng chiều cao — lệch vài px là nhìn ra ngay */
body .btn.chinh, body .btn.phu{ min-height:2.9rem }

/* ═══════════ TRANG PHÁP LÝ / CHÍNH SÁCH (.cs-*) — DÙNG CHUNG ═══════════
   Chuyển từ khuôn chinh-sach.blade.php vào đây 16/08 vì trang Điều khoản
   (view riêng) không ăn được style của khuôn — bảng dữ liệu trên iPhone
   chen chúc (Chị chụp máy thật). Lớp dùng chung sống ở tệp dùng chung. */
body .cs-dan{font-size:17px;line-height:1.75;color:#484237;margin:.55rem 0 0;max-width:62ch}
/* 16/08 Chị: "sao không cho nó to ra, cứ đóng khung" — tháo hộp .card,
   nội dung trải thẳng nền trang, chữ 17px, đề mục 22px, khung nới 960px. */
body .cs-noi{font-size:17px;line-height:1.85;color:#2B2A26}
body .cs-phan{margin-top:2.1rem}
body .cs-phan > h2{font-size:24px;font-weight:900;color:var(--forest-900);
  margin:0 0 .9rem;padding-bottom:.55rem;position:relative;letter-spacing:-.01em}
body .cs-phan > h2::after{content:"";position:absolute;left:0;bottom:0;width:52px;height:3px;
  background:var(--honey-400,#D4A83E)}
/* Đề mục to + VẠCH VÀNG ngắn — cùng motif tiêu đề toàn site, mắt lướt là
   thấy từng phần (Chị 16/08: "làm to đẹp rõ ràng ra") */
body .cs-noi h3{font-size:22px;font-weight:800;color:var(--forest-900);
  margin:2rem 0 .7rem;padding-bottom:.5rem;position:relative}
body .cs-noi h3::after{content:"";position:absolute;left:0;bottom:0;width:44px;height:3px;
  background:var(--honey-400,#D4A83E)}
body .cs-noi h3:first-child{margin-top:0}
body .cs-noi ul{margin:.6rem 0 1rem;padding-left:1.25rem}
body .cs-noi li{margin:.4rem 0}
body .cs-noi p{margin:.65rem 0}
body .cs-noi table{width:100%;border-collapse:collapse;margin:.9rem 0;font-size:16px}
body .cs-noi th,.cs-noi td{text-align:left;padding:.7rem .8rem;border-bottom:1px solid var(--forest-100);vertical-align:top}
body .cs-noi td:first-child{font-weight:700;color:var(--forest-900);white-space:nowrap}
body .cs-noi thead th{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
  color:#123B2A;border-bottom:2px solid var(--honey-400,#D4A83E)}
/* Điện thoại: bảng nhiều cột XẾP THÀNH THẺ — mỗi hàng một khối, tiêu chí làm
   đầu mục, từng ô mang nhãn cột riêng (content:attr(data-nhan)) nên không
   phải vuốt ngang gì cả (Chị 16/08: "làm hẳn hoi lên"). Bảng không gắn nhãn
   (2 cột đơn giản) vẫn xếp chồng đọc xuôi tự nhiên. */
@media(max-width:640px){
  body .cs-noi{font-size:16px}
  body .cs-noi h3{font-size:20px}
  body .cs-phan > h2{font-size:21px}
  body .cs-noi table,.cs-noi tbody,.cs-noi tr,.cs-noi td{display:block;width:100%}
  body .cs-noi thead{display:none}
  body .cs-noi tr{border:1px solid var(--forest-100);border-radius:2px;
    padding:.85rem .95rem;margin:.75rem 0;
    background:linear-gradient(180deg,#fff,var(--cream-50))}
  body .cs-noi td{border:0;padding:.25rem 0;white-space:normal}
  body .cs-noi td:first-child{font-size:17px;font-weight:800;color:var(--forest-900);
    padding-bottom:.4rem;border-bottom:1px dashed var(--forest-100);margin-bottom:.3rem}
  body .cs-noi td[data-nhan]::before{content:attr(data-nhan);display:block;
    font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
    color:#123B2A;margin:.5rem 0 .1rem}
}
body .cs-khac{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
body .cs-khac a{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:999px;
  background:#fff;border:1px solid rgba(18,59,42,.12);color:var(--forest-900);
  font-weight:700;font-size:.88rem;text-decoration:none;box-shadow:var(--shadow-card)}
body .cs-khac a:hover{border-color:var(--honey-400);color:var(--honey-600)}
body .cs-hoi{background:linear-gradient(100deg,#FBF6E8,#FDFBF3);border:1px solid var(--honey-300,#E8CD75);
  border-left:4px solid var(--honey-500,#D4A83E);border-radius:2px;padding:1rem 1.15rem;margin-top:1.3rem}
body .cs-hoi b{display:block;color:var(--forest-900);margin-bottom:.25rem}
body .cs-hoi a{color:var(--honey-600);font-weight:800;text-decoration:none}