/* ==========================================================================
   Vi Chất — V3 · MỘT hệ thống giao diện cho toàn web (28/10/2026)
   Chuẩn: D:\Rac\Website\YEU-CAU-UI-UX.txt — mọi thay đổi sửa ở BIẾN hoặc THÀNH PHẦN DÙNG CHUNG, không vá từng trang.

   Ngôn ngữ hình (theo codeage.vn) — màu của Vi Chất (không dùng màu codeage):
   · Góc VUÔNG ở mọi nơi (nút, ô nhập, thẻ, khung); chỉ nút liên hệ nổi là tròn.
   · Nút chính: nền xanh thương hiệu đặc. Nút phụ: viền mảnh 1px màu xanh đậm. Chữ trên nút IN HOA 14px, đậm mềm (500), giãn nhẹ.
   · Thẻ sản phẩm: ảnh trên nền trắng, KHÔNG ô nền, KHÔNG khung, chữ căn giữa (hãng → tên → giá → nút).
   · MÀU (lần 2, theo nguyên tắc 60·30·10, mỗi màu một việc):
       60% trắng · 30% TRUNG TÍNH ẤM (chữ, vạch, viền, một nền phụ duy nhất #F5F3EF) · 10% XANH thương hiệu
       (nút mua, dải cam kết mảnh, nhãn "Nổi bật", ô đang chọn, biểu tượng). Đỏ chỉ cho giá sau mã, số trên giỏ, lỗi.
       Không còn màu trung tính ngả xanh (trước đây chữ, vạch, nền phụ đều ngả xanh → cả trang xanh nhạt, đục).
       Đổi sang "trung tính lạnh": thay 6 biến --ink --ink-2 --muted --line --line-2 --surface (xem HUONG-DAN 6.9).
   · CHỮ Montserrat chỉ 3 độ đậm: 400 (chữ đọc, tiêu đề khối, tên SP ở banner) · 500 (menu, nhãn phụ) · 600 (tên SP,
       giá, tiêu đề nhỏ, nút, nhãn in hoa). KHÔNG dùng 700/800.

   Thang chữ (không bao giờ dưới 13px) — điện thoại → máy tính, THỨ BẬC KHÔNG ĐẢO (28/10, cân đối):
   tiêu đề trang 26 → 32 (500) ≥ tên SP banner 20 → 32 (400) · tên SP ở trang SP 20 → 28 (500)
   > tiêu đề khối 22 → 28 (400) > tiêu đề đoạn bài viết 20 → 24 (500) > tiêu đề mục 18 → 20 (500, chữ thường)
   · Độ đậm: 400 / 500 (đậm mềm) / 560 (chỉ điểm nhấn: giá chính, tổng tiền, chữ nhấn trong bài) — 29/10.
   > chữ đọc 16 > chữ phụ 15 · 14 > chữ nhỏ 13. Tiêu đề mục KHÔNG in hoa (in hoa chỉ cho nhãn nhỏ 13 và nút).
   khoảng cách 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 64 — đệm dải 40 (điện thoại) / 64 (máy tính)
   BẢNG TỶ LỆ (một hệ cho mọi trang — chỉ các cỡ dưới đây, không cỡ lẻ):
     · Điều khiển L = 48: mọi nút chữ, ô nhập, ô chọn, ô tìm, ô số lượng, ô mã giảm, nút quy cách.
     · Điều khiển S = 36: nút trong thẻ sản phẩm, nút ở banner điện thoại, nút lọc, phân trang, số lượng trong giỏ, nút biểu tượng.
       Nút chữ: L chữ 14 in hoa 600 đệm 24 · S chữ 13 in hoa 600 đệm 16 (nút phụ nhẹ, không lấn ảnh). Viền mảnh 1px (--control).
     · Ô biểu tượng: S = 40 (ký hiệu 20) trong danh sách · L = 48 (ký hiệu 24) ở ô danh mục, tin tức, khung gợi ý.
       Ký hiệu luôn chiếm 1/2 ô (trước đây 24 trong ô 56 = 43% → ô trông rỗng).
     · Ảnh nhỏ sản phẩm 72 (giỏ, ngăn giỏ, ảnh phụ trang SP) · 56 (điện thoại, xem ảnh lớn) · 48 (gợi ý tìm kiếm).
     · Nhãn nhỏ (Nổi bật, Còn hàng, Mã -30K): cao 28.
     · Đầu trang: dải cam kết 40 · menu 64 (điện thoại) / 72 (máy tính).
     · Khoảng cách: dải 40 / 64 · khối đầu tiên dưới menu cách 16 / 24 · tiêu đề khối → nội dung 20 / 28 · lưới thẻ 12 / 24.
   Bề rộng: mua sắm 1200 · trang tiện ích có lưới (liên hệ, thương hiệu) 960 · trang để ĐỌC (bài viết, chính sách) 720.
   Hai cột cạnh nhau phải cân: cột ngắn hơn đi theo khi cuộn (ảnh SP, khung tóm tắt) hoặc nội dung căn giữa theo chiều dọc.
   ========================================================================== */

/* ---------- 1. Biến ---------- */
:root {
  --ink: #1C1917;            /* chữ chính 17.5:1 */
  --ink-2: #44403C;          /* chữ đọc phụ 10:1 */
  --muted: #57534E;          /* chữ phụ 7.6:1 trên trắng, 6.9:1 trên nền phụ */
  --line: #E7E5E4;           /* vạch ngăn */
  --line-2: #D6D3D1;         /* viền ô nhập, nút viền xám */
  --control: #98918B;        /* viền MỌI ô nhập / nút lọc / nút quy cách: 3.1:1 (đủ thấy, không nặng) */
  --surface: #F5F3EF;        /* NỀN PHỤ DUY NHẤT (trung tính ấm) */
  --surface-2: #ECE9E4;
  --white: #FFFFFF;
  --brand: #0E3A2E;          /* xanh logo: nút chính, dải đậm */
  --brand-hover: #0A2B22;
  --brand-2: #0E3A2E;        /* biểu tượng, liên kết khi rê chuột (cùng xanh thương hiệu) */
  --leaf: #0E3A2E;           /* dấu tích, trạng thái thành công: dùng chính xanh thương hiệu, không thêm màu xanh khác */
  --sale: #D92D20;           /* giá sau mã giảm, nút liên hệ */
  --red: #D92D20;
  --zalo: #0068FF;
  --on-dark: rgba(255, 255, 255, .82);
  --ok-bg: #F5F3EF; --ok-ink: #0E3A2E;
  --warn-bg: #FFF6DB; --warn-ink: #6B4E00;
  --err-bg: #FEF3F2; --err-ink: #B42318;
  --sale-bg: #FDECEA; --sale-ink: #8F1D14;
  --ok-bg: #E6F1EC; /* 06/11, mẫu 176: nền câu mã giảm giá áp dụng thành công */
  /* tên cũ vẫn được mã PHP/JS của giao diện gốc dùng */
  --tile: var(--surface); --tint: var(--surface-2); --cream: var(--surface); --card-line: var(--line);
  --danger: var(--err-ink); --moss: var(--brand-2); --lime: #FFFFFF;

  /* ĐỘ ĐẬM (29/10, anh Tùng: "đậm chỉ để điểm xuyết, nét đậm mềm hơn"): Montserrat nạp dạng biến thiên → chỉnh từng nấc.
     400 chữ thường · 500 "đậm mềm" cho nhãn, nút, tiêu đề, tên mục · 560 CHỈ cho điểm nhấn duy nhất của một vùng
     (giá chính, tổng tiền, chữ nhấn trong bài). Không dùng 600/700 nữa. */
  --fw-regular: 400; --fw-medium: 500; --fw-strong: 560;
  --fw-bold: 700;   /* RIÊNG thẻ sản phẩm (anh Tùng 29/10, theo codeage.vn): giá + chữ trên nút — cuối thang đậm dần của thẻ; và nút "Mua ngay" đóng khung trên banner (cùng kiểu nút thẻ) */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-13: .8125rem; --fs-14: .875rem; --fs-15: .9375rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem;
  --fs-h3: 1.125rem;         /* tiêu đề mục (600, chữ thường): 18 → 20 */
  --fs-h2: 1.375rem;         /* tiêu đề khối (400): 22 → 24 → 28 — luôn NHỎ HƠN tiêu đề trang */
  --fs-h1: 1.625rem;         /* tiêu đề trang (500): 26 → 28 → 32 */
  --fs-display: 1.25rem;     /* tên sản phẩm ở banner (400): 20 → 28 → 32 */
  --fs-title: 1.375rem;      /* tên sản phẩm ở trang SP (500): 22 → 28. 04/11 anh Tùng, ảnh 143: điện thoại từ 20 lên 22, không nhỏ hơn tiêu đề khối */
  --fs-price: 1.375rem;      /* giá ở trang SP (560): 22 → 26 */
  --fs-article-h2: 1.25rem;  /* tiêu đề đoạn trong bài viết (500): 20 → 24 */

  --band: 40px;              /* đệm trên/dưới mỗi dải */
  --head-gap: 20px;          /* tiêu đề khối → nội dung */
  --pad: 16px;               /* đệm trong khung */
  --pad-lg: 20px;
  --h-sm: 36px; --h-md: 48px; --h-lg: 48px;   /* S = 36 (nút phụ, thẻ, lọc) · L = 48 (ô nhập + nút mua đứng cạnh nhau thẳng hàng) */
  --icon-s: 40px; --icon-l: 48px; --thumb: 72px; --label-h: 28px; --top-gap: 16px;
  --bw: 1px;                 /* viền nút phụ, viền chọn: mảnh */
  --gutter: 16px;
  --content: 1200px;
  --read: 720px;
  --header-h: 64px;
  --admin-h: 0px;            /* thanh quản trị WordPress (chỉ khi chủ shop đăng nhập) */
  --strip-h: 0px;            /* dải xanh trên cùng khi DÍNH đầu trang (máy tính 40px; điện thoại dải cuộn đi → 0) */
  --shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 12px 32px -8px rgba(28, 25, 23, .16);
  --shadow-up: 0 -8px 24px rgba(15, 23, 42, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --star: #C77700;
  --vang-nhan: #D9A441;      /* 07/11 (anh duyệt mẫu 183): màu nhấn nhỏ: gạch dưới tiêu đề khu, menu đang xem, vạch câu cảnh báo, viền dải đáy. Cùng màu viền huy hiệu hội viên. Chỉ làm đường kẻ, không làm chữ (2,2:1 trên trắng). */
}
@media (min-width: 640px) {
  :root { --top-gap: 24px; --gutter: 24px; --pad: 20px; --pad-lg: 24px; --fs-h1: 1.75rem; --fs-h2: 1.5rem; --fs-display: 1.75rem; }
}
@media (min-width: 900px) {
  :root { --band: 64px; --head-gap: 28px; --pad: 24px; --pad-lg: 32px; --fs-h1: 2rem; --fs-h2: 1.75rem; --fs-h3: 1.25rem; --fs-title: 1.75rem; --fs-price: 1.625rem; --fs-article-h2: 1.5rem; }
}
@media (min-width: 1024px) {
  :root { --strip-h: 40px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 32px; --header-h: 72px; --fs-display: 2rem; }
}

/* ---------- 2. Nền ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--admin-h) + var(--strip-h) + var(--header-h) + 16px); }
html.has-sheet, html.viewer-open { overflow: hidden; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-16); line-height: 1.6; color: var(--ink); background: var(--white); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fw-medium); line-height: 1.3; letter-spacing: 0; color: var(--ink); }
b, strong { font-weight: var(--fw-strong); } /* nhấn trong câu: đậm MỀM 560 (29/10) */
th { font-weight: var(--fw-medium); }
p { margin: 0 0 12px; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.icon { flex: none; }
.nb { display: inline-block; max-width: 100%; } /* 06/11 (kiểm tổng): vừa dòng thì vẫn đứng liền như nowrap; chữ phóng to quá khung thì tự xuống dòng, không tràn */
.muted { color: var(--muted); }
.sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--white); }
.skip-link:focus { top: 12px; }
[hidden], .vcr-hidden { display: none !important; }
.container { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.site-main { min-height: 40vh; }

/* ---------- 3. Dải, tiêu đề khối, tiêu đề trang (dùng chung mọi trang) ---------- */
.section { padding-block: var(--band); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: var(--head-gap); }
.section-head h2, .brands26 h2, .assure26 h2, .related > h2, .upsells > h2, .pdp-info__head h2, .pdp-reviews > h2, .empty-suggest h2, .cta-card h2 {
  font-size: var(--fs-h2); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: -.01em; color: var(--brand); text-wrap: balance;
}
/* 07/11 (anh duyệt mẫu 183, đề xuất 2): mọi tiêu đề khu một kiểu: xanh thương hiệu, nét 500, gạch vàng ngắn; chỉ có chữ, không nền, không khung (mở rộng quyết định 29/10 vốn chỉ áp 2 tiêu đề trang chủ). */
.section-head h2::after, .brands26 h2::after, .assure26 h2::after, .related > h2::after, .upsells > h2::after, .pdp-info__head h2::after, .pdp-reviews > h2::after, .empty-suggest h2::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 10px; background: var(--vang-nhan); }
/* Điện thoại: tiêu đề khối một dòng; "Xem tất cả" xuống cuối khối, sau danh sách */
@media (max-width: 639px) {
  .container:has(> .section-head) { display: flex; flex-direction: column; }
  .section-head { display: contents; }
  .section-head > div, .section-head > h2 { margin-bottom: var(--head-gap); }
  .section-head > .link-arrow { order: 2; align-self: center; margin-top: 24px; }
}
.page-head, .catalog-head { padding: var(--top-gap) 0 var(--head-gap); }
.page-head h1, .catalog-head h1, .article-head h1 { font-size: var(--fs-h1); line-height: 1.3; text-wrap: balance; }
.page-head__lead { max-width: 64ch; margin: 8px 0 0; color: var(--ink-2); }
.breadcrumb { overflow: hidden; font-size: var(--fs-13); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb__sep { margin: 0 8px; color: var(--control); }

/* ---------- 4. Nút & liên kết ---------- */
.btn, .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, #place_order {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-md); padding: 0 24px;
  border: var(--bw) solid var(--brand); border-radius: 0; background: var(--brand); color: var(--white);
  font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, #place_order:hover { border-color: var(--brand-hover); background: var(--brand-hover); color: var(--white); }
/* Nút phụ: viền mảnh xanh đậm, nền trắng */
.btn--ghost, .woocommerce a.button.wc-backward, .woocommerce .coupon button.button, .woocommerce a.button.button-outline {
  border-color: var(--brand); background: var(--white); color: var(--brand);
}
.btn--ghost:hover, .woocommerce a.button.wc-backward:hover, .woocommerce .coupon button.button:hover, .woocommerce a.button.button-outline:hover {
  border-color: var(--brand); background: var(--brand); color: var(--white);
}
/* Nút "Nhắn Zalo": cùng màu hành động của web (xanh thương hiệu) — chữ "Zalo" và biểu tượng đã đủ nhận ra;
   mảng xanh dương lớn là thứ nặng nhất khối và lệch hệ màu 60·30·10 (28/10). Biểu tượng tròn ở hàng liên hệ / nút nổi giữ màu Zalo. */
.btn--zalo, .woocommerce .vc-inventory-note a.vc-order-zalo { border-color: var(--brand); background: var(--brand); color: var(--white); }
.btn--zalo:hover, .woocommerce .vc-inventory-note a.vc-order-zalo:hover { border-color: var(--brand-hover); background: var(--brand-hover); color: var(--white); }
/* Trên dải xanh đậm: nút trắng đặc / viền trắng */
.btn--block { display: flex; width: 100%; }
.btn .icon--arrow { transition: transform .25s var(--ease); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.button.disabled, .button:disabled, .single_add_to_cart_button.disabled { opacity: .45; cursor: not-allowed; }
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after { content: ""; position: absolute; inset: 0; width: 18px; height: 18px; margin: auto; border: 2px solid rgba(255, 255, 255, .45); border-top-color: var(--white); border-radius: 50%; animation: spin .7s linear infinite; }
.btn--ghost.is-loading::after, .single_add_to_cart_button.is-loading::after, .card__add.is-loading::after { border-color: rgba(28, 25, 23, .2); border-top-color: var(--ink); }
.is-done { border-color: var(--leaf) !important; background: var(--leaf) !important; color: var(--white) !important; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes fade { from { opacity: 0; } }
/* "Xem tất cả →": in hoa, gạch chân như codeage */
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 4px; border-bottom: var(--bw) solid currentColor;
  max-width: 100%; font-size: var(--fs-14); font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--ink);
}
@media (max-width: 399px) { .link-arrow { white-space: normal; } } /* 06/11 (kiểm tổng): chữ phóng to ở máy hẹp thì xuống dòng, không tràn */
.link-arrow .icon { flex: none; transition: transform .2s var(--ease); }
.link-arrow:hover .icon { transform: translateX(3px); }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: var(--h-sm); height: var(--h-sm); padding: 0; border: 0; background: transparent; color: var(--ink); transition: background-color .2s; }
.icon-btn:hover { background: var(--surface); }
.pill-link { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 16px; border: 1px solid var(--control); font-size: var(--fs-14); font-weight: 500; }
.pill-link:hover { border-color: var(--ink); }
.round-btn { display: grid; place-items: center; width: var(--h-sm); height: var(--h-sm); padding: 0; border: 1px solid var(--control); border-radius: 0; background: var(--white); color: var(--ink); transition: border-color .2s, background-color .2s, color .2s; }
.round-btn:hover { border-color: var(--brand); background: var(--brand); color: var(--white); }
.round-btn--small { border-color: transparent; background: transparent; }
.round-btn--small:hover { border-color: transparent; background: transparent; color: var(--ink); }
.round-btn .icon--play, .is-paused [data-toggle] .icon--pause { display: none; }
.is-paused [data-toggle] .icon--play { display: block; }
.checks { display: grid; gap: 8px; list-style: none; }
.checks li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-15); color: var(--ink-2); }
.checks .icon { margin-top: 4px; color: var(--leaf); }
/* Chip (nhóm sản phẩm) và pill (phiên bản): vuông, viền mảnh */
.chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 40px; padding: 0 16px; border: 1px solid var(--control); background: var(--white); font-size: var(--fs-14); font-weight: 500; white-space: nowrap; transition: border-color .2s, background-color .2s, color .2s; }
.chip:hover { border-color: var(--brand); }
.chip[aria-current="page"] { border-color: var(--brand); background: var(--brand); color: var(--white); }
.chip--active { border-color: var(--surface-2); background: var(--surface-2); }

/* ---------- 5. Ô nhập (vuông) ---------- */
select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231C1917' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="url"], input[type="search"]:not(.search-input), textarea, select,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  width: 100%; height: var(--h-md); padding: 0 14px; border: 1px solid var(--control); border-radius: 0; background-color: var(--white);
  font-size: var(--fs-16); color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
select, .woocommerce form .form-row select { padding-right: 40px; }
textarea, .woocommerce form .form-row textarea { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; margin: 3px 8px 0 0; accent-color: var(--brand); flex: none; }
.woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.woocommerce form .form-row label { display: block; margin-bottom: 6px; font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: 1.35; color: var(--ink-2); } /* nhãn ô nhập: chữ thường — trang thanh toán không còn kín chữ đậm */
.woocommerce form .form-row .required { color: var(--err-ink); text-decoration: none; border: 0; }
.woocommerce form .form-row .optional { font-weight: 400; color: var(--muted); }
.woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid select { border-color: var(--err-ink); }
.checkout-inline-error-message, .tv-loi-giu { margin: 6px 0 0; font-size: var(--fs-14); font-weight: 500; color: var(--err-ink); } /* lỗi ngay dưới ô: chữ đỏ, cùng màu viền ô */
.woocommerce-input-wrapper { display: block; }
.woocommerce form .woocommerce-form__label-for-checkbox { position: relative; display: block; font-weight: 500; line-height: 1.5; cursor: pointer; }
.woocommerce form .woocommerce-form__label-for-checkbox input[type="checkbox"] { position: absolute; left: 0; margin: 0; top: 0; }
.woocommerce form .form-row-first, .woocommerce form .form-row-last, .woocommerce-page form .form-row-first, .woocommerce-page form .form-row-last { float: none; width: 100%; }
@media (min-width: 480px) {
  .woocommerce-billing-fields__field-wrapper, .woocommerce-address-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .woocommerce-billing-fields__field-wrapper > *, .woocommerce-address-fields__field-wrapper > *, .woocommerce-shipping-fields__field-wrapper > * { grid-column: 1 / -1; }
  .woocommerce-billing-fields__field-wrapper > .form-row-first, .woocommerce-address-fields__field-wrapper > .form-row-first, .woocommerce-shipping-fields__field-wrapper > .form-row-first { grid-column: 1; }
  .woocommerce-billing-fields__field-wrapper > .form-row-last, .woocommerce-address-fields__field-wrapper > .form-row-last, .woocommerce-shipping-fields__field-wrapper > .form-row-last { grid-column: 2; }
}
.woocommerce .clear, .woocommerce-page .clear { clear: both; }

/* ---------- 6. Đầu trang ---------- */
.accent-line { display: none; }
.site-header { position: sticky; top: calc(var(--admin-h) + var(--strip-h)); z-index: 50; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); transition: box-shadow .3s var(--ease); }
/* Chủ shop đăng nhập: thanh quản trị (32 / 46px) nằm trên cùng → menu dính và các khối dính lùi xuống theo; ≤600px thanh đó cuộn đi */
body.admin-bar { --admin-h: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { body.admin-bar { --admin-h: 0px; } }
.site-header.is-scrolled { box-shadow: 0 8px 28px -16px rgba(28, 25, 23, .3); }
.header-bar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; height: var(--header-h); }
.header-menu { justify-self: start; margin-left: -8px; }
.header-logo { justify-self: center; }
.header-logo img { width: auto; height: 38px; }
.header-nav { display: none; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 4px; margin-right: -8px; }
.header-zalo span { display: none; }
.cart-count { position: absolute; top: 0; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--sale); color: var(--white); font-size: 13px; font-weight: var(--fw-strong); line-height: 20px; text-align: center; }
.cart-count.bump { animation: bump .55s var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1); } }
.fly-img { position: fixed; z-index: 300; margin: 0; background: var(--white); object-fit: contain; pointer-events: none; box-shadow: 0 18px 40px -12px rgba(28, 25, 23, .35); will-change: transform; }
/* form.search, không phải .search: WordPress cũng gắn class "search" lên <body> của trang kết quả tìm kiếm */
form.search { position: relative; display: none; align-items: center; gap: 8px; height: var(--h-md); padding: 0 14px; border: 1px solid var(--control); background: var(--white); color: var(--muted); }
.search-input { width: 100%; min-width: 0; height: 100%; border: 0; background: transparent; font-size: var(--fs-15); color: var(--ink); outline: none; }
form.search:focus-within { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.site-header.is-searching form.search { position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + 8px); display: flex; height: var(--h-md); box-shadow: var(--shadow); }
/* div.search-results, không phải .search-results: WordPress gắn class "search-results" lên <body> của trang kết quả tìm kiếm (trang trắng) */
div.search-results { position: absolute; left: -1px; right: -1px; top: calc(100% + 8px); z-index: 80; max-height: min(70vh, 480px); overflow: auto; padding: 8px; border: 1px solid var(--line); background: var(--white); color: var(--ink); box-shadow: var(--shadow); }
.search-result { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 8px; }
.search-result img { width: 48px; height: 48px; object-fit: contain; }
.search-result__brand { display: block; font-size: var(--fs-13); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.search-result__name { display: block; font-size: var(--fs-14); font-weight: 500; line-height: 1.35; }
.search-result__price { font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap; }
.search-result:hover, .search-result[aria-selected="true"] { background: var(--surface); }
.search-all { display: block; padding: 12px 8px 6px; font-size: var(--fs-14); font-weight: var(--fw-medium); letter-spacing: .04em; text-align: center; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.search-empty { margin: 0; padding: 12px; font-size: var(--fs-14); color: var(--muted); }
.search-empty a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* 06/11 (H14) */
/* 31/10: bài Cẩm nang trong gợi ý tìm kiếm — dưới sản phẩm, có nhãn nhóm; ô biểu tượng 48 cùng cột ảnh sản phẩm */
.search-group { margin: 8px 8px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.search-result--post { grid-template-columns: 48px 1fr; }
.search-result__icon { width: 48px; height: 48px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3A2E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H11v15H5.5A1.5 1.5 0 0 1 4 17.5z'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H13v15h5.5a1.5 1.5 0 0 0 1.5-1.5z'/%3E%3C/svg%3E") center / 22px no-repeat; }
.search-result__time { display: block; margin-top: 2px; font-size: var(--fs-13); color: var(--muted); } /* 06/11: ngày đăng bài */
@media (min-width: 1100px) {
  .header-bar { grid-template-columns: auto 1fr auto; gap: 32px; }
  .header-menu, .header-search-toggle { display: none; }
  .header-logo { justify-self: start; }
  .header-logo img { height: 46px; }
  .header-nav { display: block; justify-self: center; }
  .header-nav > ul { display: flex; gap: max(10px, calc(32px - (1rem - 16px) * 2.5)); list-style: none; }
  .header-nav > ul > li { position: relative; }
  .header-nav > ul > li > a { display: inline-flex; align-items: center; gap: 4px; height: var(--header-h); font-size: var(--fs-14); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
  .header-nav > ul > li > a:hover { color: var(--brand-2); }
  /* 07/11 (anh duyệt mẫu 183, đề xuất 5): menu báo đang ở khu nào. Tính từ giữa thanh menu nên chữ phóng to vẫn nằm dưới chữ. */
  .header-nav > ul > li.is-current > a { position: relative; }
  .header-nav > ul > li.is-current > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 18px); height: 2px; background: var(--vang-nhan); }
  .nav-panel {
    position: absolute; left: -16px; top: calc(100% - 1px); display: grid; min-width: 280px; padding: 8px; border: 1px solid var(--line); background: var(--white); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  }
  .has-panel:hover .nav-panel, .has-panel:focus-within .nav-panel { opacity: 1; visibility: visible; transform: none; }
  .nav-panel a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; font-size: var(--fs-15); font-weight: 500; }
  .nav-panel a:hover { background: var(--surface); }
  .nav-panel__all { margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .nav-panel a.nav-panel__brands { justify-content: flex-start; gap: 8px; margin-top: 4px; border-top: 1px solid var(--line); font-weight: var(--fw-medium); color: var(--brand-2); }
  /* 06/11 (kiểm tổng): chữ trình duyệt phóng to thì ô tìm kiếm và khoảng cách menu thu lại, không đẩy Tài khoản, Giỏ hàng ra ngoài màn hình. Cỡ chữ mặc định: (1rem - 16px) = 0, không đổi gì. */
  form.search { display: flex; width: max(110px, calc(300px - (1rem - 16px) * 25)); }
  .header-zalo span { display: inline; }
}
/* Máy tính nhỏ 1100–1279px: menu một dòng — khoảng cách và ô tìm kiếm thu lại */
@media (min-width: 1100px) and (max-width: 1279px) {
  .header-bar { gap: 24px; }
  .header-nav > ul { gap: max(8px, calc(22px - (1rem - 16px) * 2)); }
  form.search { width: max(110px, calc(230px - (1rem - 16px) * 18)); }
}

/* ---------- 7. Ngăn kéo (menu trái, giỏ hàng phải) ---------- */
.sheet { position: fixed; display: none; flex-direction: column; width: min(92vw, 420px); height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: var(--white); color: var(--ink); }
.sheet[open] { display: flex; }
.sheet--left { inset: 0 auto 0 0; animation: from-left .28s var(--ease); }
.sheet--right { inset: 0 0 0 auto; animation: from-right .28s var(--ease); }
.sheet::backdrop { background: rgba(28, 25, 23, .4); }
@keyframes from-left { from { opacity: 0; transform: translateX(-24px); } }
@keyframes from-right { from { opacity: 0; transform: translateX(24px); } }
.sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); }
.sheet__title { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-medium); line-height: 1.3; color: var(--ink); } /* 05/11 (S1.7): thẻ p thay h2, nhìn y như cũ */
.sheet__head .icon-btn { width: 44px; height: 44px; margin: -4px; } /* 05/11: vùng bấm 44 x 44, chiều cao đầu ngăn giữ nguyên */
.drawer-count { font-weight: 400; color: var(--muted); }
.sheet__body { flex: 1; overflow-y: auto; padding: 4px 20px 20px; }
.sheet__label { margin: 20px 0 4px; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sheet__list { list-style: none; }
.sheet__list a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-16); font-weight: 500; }
.sheet__list--quiet a { font-size: var(--fs-15); font-weight: 400; color: var(--ink-2); }
.sheet__list a[aria-current="page"] { border-bottom-color: var(--vang-nhan); box-shadow: inset 0 -1px 0 var(--vang-nhan); font-weight: var(--fw-medium); color: var(--brand); } /* 07/11 (đề xuất 5): menu điện thoại cũng báo trang đang xem */
.sheet__foot { display: grid; gap: 8px; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }

/* ---------- 8. Dải liên hệ (chỉ trang danh mục và Tin tức) + chân trang 2 tầng ---------- */
.cta-band { margin-top: var(--band); padding-block: var(--band); background: var(--surface); color: var(--ink); }
.cta-card { display: grid; gap: 20px; }
.cta-card__icon { display: grid; place-items: center; width: var(--icon-l); height: var(--icon-l); background: var(--white); color: var(--brand); }
.cta-card__text p { margin: 8px 0 0; color: var(--ink-2); }
.cta-card .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-card .actions .btn--ghost { border-color: var(--brand); background: var(--white); color: var(--brand); }
.cta-card .actions .btn--ghost:hover { border-color: var(--brand); background: var(--brand); color: var(--white); }
@media (max-width: 639px) { .cta-card .actions .btn { flex: 1 1 100%; } }
@media (min-width: 900px) { .cta-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 32px; } }

.site-footer { margin-top: var(--band); font-size: var(--fs-15); color: var(--ink-2); }
.cta-band + .site-footer { margin-top: 0; }
.footer-main { padding-block: var(--band); border-top: 1px solid var(--line); background: var(--white); }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
.footer-grid > .footer-brand, .footer-grid > div:last-child { grid-column: 1 / -1; }
.footer-brand img { width: auto; height: 46px; margin-bottom: 12px; }
.footer-brand p { max-width: 36ch; margin: 0; }
.footer-contact { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer-contact a { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 16px; border: 1px solid var(--control); background: var(--white); font-size: var(--fs-14); font-weight: 500; color: var(--ink); }
.footer-contact a:hover { border-color: var(--brand); }
.site-footer h2 { margin-bottom: 8px; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.site-footer ul { display: grid; list-style: none; }
.site-footer li a { display: inline-block; padding: 6px 0; color: var(--ink-2); }
.site-footer li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-info li { padding: 6px 0; line-height: 1.5; overflow-wrap: break-word; }
.footer-info li:has(> a) { padding: 0; }
/* 06/11 (L6-2): email có <wbr> trước @, ở điện thoại xuống dòng khi không đủ chỗ (320). Từ 640 ẩn <wbr> (white-space: nowrap không chặn được <wbr>) để email giữ một dòng và cột chân trang không đổi. */
@media (min-width: 640px) { .footer-info a[href^="mailto:"] wbr { display: none; } }
/* 07/11 (anh chọn phương án B, mẫu 183): dải đáy mảnh màu xanh, cân với dải cam kết trên cùng; phần trên chân trang giữ nền trắng theo quyết định 28/10, 29/10. Câu "không phải là thuốc" chữ trắng, rõ hơn. */
.footer-bottom { padding-block: 18px calc(18px + env(safe-area-inset-bottom)); border-top: 3px solid var(--vang-nhan); background: var(--brand); font-size: var(--fs-13); color: var(--on-dark); }
.footer-bottom p { margin: 0 0 6px; }
.footer-bottom p:first-child { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--white); }
.footer-bottom__row { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 !important; }
.footer-bottom a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.5fr; gap: 40px; }
  .footer-grid > .footer-brand, .footer-grid > div:last-child { grid-column: auto; }
  .site-footer h2 { margin-bottom: 12px; font-size: var(--fs-13); }
}

/* ---------- 9. Nút liên hệ nổi (máy tính: nút đỏ tròn; điện thoại: thanh trắng sát đáy) ---------- */
.dock { --dock-main: var(--red); --dock-shadow: 0 8px 28px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .05); position: fixed; z-index: 70; font-size: 14px; line-height: 1.4; }
.dock__items { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.dock__item { position: relative; }
.dock__item--mail { --c: var(--red) !important; }
.dock__btn { display: flex; align-items: center; color: var(--ink); text-decoration: none; }
.dock__ico { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex: none; width: var(--h-md); height: var(--h-md); border-radius: 50%; background: var(--c); color: var(--white); box-shadow: 0 8px 20px -8px var(--c), 0 2px 6px rgba(15, 23, 42, .08); }
.dock__item--white .dock__ico { background: var(--white); color: var(--c); box-shadow: var(--dock-shadow); }
.dock__ico b { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: -.02em; }
.dock__card { display: flex; align-items: center; gap: 8px; }
.dock__txt { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.dock__lbl { overflow: hidden; font-size: 15px; font-weight: var(--fw-medium); line-height: 1.25; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.dock__sub { overflow: hidden; font-size: 13px; line-height: 1.3; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.dock__chev { display: grid; flex: none; color: var(--muted); transition: transform .2s, color .2s; }
.dock__lbl-m { display: none; }
.dock__main-wrap { position: relative; display: flex; align-items: center; }
.dock__main {
  position: relative; display: flex; align-items: center; justify-content: center; width: var(--icon-l); height: var(--icon-l); padding: 0; border: 0; border-radius: 50%;
  background: var(--dock-main); color: var(--white); cursor: pointer; animation: dock-halo 2s ease-in-out infinite;
  box-shadow: 0 0 0 8px rgba(217, 45, 32, .14), 0 12px 26px -8px rgba(217, 45, 32, .7); transition: transform .2s, background-color .2s, color .2s, box-shadow .2s;
}
.dock__main:hover { transform: scale(1.05); }
.dock__main:focus-visible { outline: 3px solid rgba(217, 45, 32, .45); outline-offset: 3px; }
.dock__main::before, .dock__main::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--dock-main); animation: dock-pulse 2s cubic-bezier(.2, .6, .35, 1) infinite; }
.dock__main::after { animation-delay: 1s; }
.dock__main-ico, .dock__main-x { position: absolute; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; transition: transform .25s, opacity .2s; }
.dock__main-ico svg { width: 28px; height: 28px; }
.dock__main-x { opacity: 0; transform: rotate(-90deg) scale(.5); }
.dock.is-open .dock__main { background: var(--white); color: var(--ink); box-shadow: var(--dock-shadow); animation: none; }
.dock.is-open .dock__main::before, .dock.is-open .dock__main::after { animation: none; opacity: 0; }
.dock.is-open .dock__main-ico { opacity: 0; transform: rotate(90deg) scale(.5); }
.dock.is-open .dock__main-x { opacity: 1; transform: none; }
.dock__bubble {
  position: absolute; right: 36px; bottom: calc(100% - 4px); display: flex; align-items: center; gap: 8px; padding: 8px 15px;
  background: var(--white); color: var(--dock-main); font-size: 14px; font-weight: var(--fw-medium); white-space: nowrap; box-shadow: var(--dock-shadow);
  pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility 0s linear .2s;
}
.dock__bubble::after { content: ""; position: absolute; right: 18px; bottom: -4px; width: 10px; height: 10px; background: var(--white); transform: rotate(45deg); }
.dock__bubble i { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dock-main); }
.dock__main-wrap:hover .dock__bubble, .dock__main-wrap:focus-within .dock__bubble { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .2s, visibility 0s; }
.dock.is-open .dock__bubble { display: none; }
@keyframes dock-pulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes dock-halo { 0%, 100% { box-shadow: 0 0 0 6px rgba(217, 45, 32, .16), 0 12px 26px -8px rgba(217, 45, 32, .7); } 50% { box-shadow: 0 0 0 13px rgba(217, 45, 32, .24), 0 12px 26px -8px rgba(217, 45, 32, .7); } }
@media (min-width: 768px) {
  /* 05/11: hộp đóng: khung bao và danh sách trong suốt nhưng vẫn chiếm chỗ (các mục chỉ ẩn, không bỏ khỏi bố cục) nên chặn chuột một vùng 242x248 đè lên trang (nút Ẩn ở Đăng ký bấm không ăn). Nay chỉ nút tròn nhận chuột; mở hộp thì nhận như cũ. Bàn phím: các mục visibility hidden nên Tab không vào được. */
  .dock { right: 24px; bottom: 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
  .dock.is-open, .dock__main-wrap { pointer-events: auto; }
  .dock__items { align-items: stretch; }
  .dock__item { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px) scale(.94); transition: opacity .15s, transform .2s, visibility 0s linear .2s; }
  .dock.is-open .dock__item { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .25s ease calc(var(--i) * 50ms), transform .45s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 50ms), visibility 0s; }
  .dock__btn { gap: 12px; width: 100%; min-width: 206px; padding: 6px 14px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); box-shadow: 0 10px 30px rgba(15, 23, 42, .16); transition: transform .2s, box-shadow .2s; }
  .dock__ico { order: -1; width: var(--icon-s); height: var(--icon-s); box-shadow: none; }
  .dock__item--white .dock__ico { box-shadow: 0 0 0 1px rgba(15, 23, 42, .06); }
  .dock__card { flex: 1; min-width: 0; }
  .dock__btn:hover { box-shadow: 0 14px 34px rgba(15, 23, 42, .2); transform: translateX(-4px); }
  .dock__btn:hover .dock__chev { color: var(--c); transform: translateX(3px); }
}
@media (max-width: 767px) {
  /* Sát mép dưới, kín hai bên, chừa vùng vuốt của máy */
  /* Điện thoại: VIÊN NỔI bo tròn cách mép 10px như codeage.vn (28/10 tối) — trang vẫn thấy quanh viên, không còn khối trắng
     dài ở đáy. Viên cao 56 (2 nút 48). Thanh mua / thanh thanh toán vẫn là thanh ngang sát đáy (nút vuông). */
  .dock { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); }
  /* 07/11: chừa chỗ cho thanh Gọi điện, Zalo ngay trong dải đáy để màu xanh chạy kín tới mép dưới, thay khoảng trắng dưới dải */
  body:has(.dock) .footer-bottom { padding-bottom: calc(18px + 76px + env(safe-area-inset-bottom)); }
  .dock__main-wrap, .dock__item--mail { display: none; }
  /* Gọn và SÁT mép dưới (28/10 tối): biểu tượng + chữ trên MỘT hàng, cả thanh 56px (trước 68px + khoảng trắng dưới chữ) */
  .dock__items { flex-direction: row; align-items: center; gap: 0; padding: 4px 6px; border-radius: 999px; background: var(--white); box-shadow: 0 10px 30px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06); }
  .dock__item { flex: 1; min-width: 0; }
  .dock__item + .dock__item::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
  .dock__btn { flex-direction: row; justify-content: center; gap: 10px; width: 100%; height: var(--h-md); padding: 0 6px; -webkit-tap-highlight-color: transparent; }
  .dock__card { display: none; }
  .dock__lbl-m { display: block; min-width: 0; overflow: hidden; font-size: 15px; font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
  .dock__ico { order: -1; width: 32px; height: 32px; box-shadow: none; }
  .dock__item--white .dock__ico { box-shadow: 0 0 0 1px var(--line); }
  .dock__ico svg { width: 18px; height: 18px; }
  html.has-bar .dock { visibility: hidden; }
}
/* 05/11 tối (anh Tùng duyệt mẫu 172): thanh giữ nguyên, thêm sóng dịu quanh 2 biểu tượng, 6 giây một lần (nhiều khách lướt qua không thấy thanh). Sóng nằm sau biểu tượng: lớp riêng ở .dock__btn, biểu tượng không tạo lớp, nên nền trắng của ô Zalo che sóng, không phủ màu lên chữ. Chỉ điện thoại; nút đỏ máy tính không đổi. Thanh bị ẩn (has-bar) thì không chạy. */
@media (max-width: 767px) {
  .dock__btn { position: relative; z-index: 0; }
  .dock__ico { z-index: auto; }
  .dock__ico::before, .dock__ico::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--c); opacity: 0; pointer-events: none; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .dock__item:nth-child(1) .dock__ico::before { animation: hv-song 6s ease-out 1.4s infinite; }
  .dock__item:nth-child(1) .dock__ico::after { animation: hv-song 6s ease-out 1.9s infinite; }
  .dock__item:nth-child(2) .dock__ico::before { animation: hv-song 6s ease-out 4.4s infinite; }
  .dock__item:nth-child(2) .dock__ico::after { animation: hv-song 6s ease-out 4.9s infinite; }
  html.has-bar .dock__item .dock__ico::before, html.has-bar .dock__item .dock__ico::after { animation: none; }
}
@keyframes hv-song { 0% { opacity: .4; transform: none; } 34%, 100% { opacity: 0; transform: scale(1.9); } }

/* ---------- 10. Thông báo nhỏ ---------- */
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 2147483000; max-width: min(92vw, 440px); padding: 12px 18px; background: var(--ink); color: var(--white); font-size: var(--fs-14); line-height: 1.45; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45); opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .25s, transform .3s var(--ease); }
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--err-ink); }
@media (max-width: 767px) { body:has(.dock) .toast, html.has-bar .toast, html.has-pay-bar .toast { bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- 11. Thẻ sản phẩm & lưới (một thẻ cho trang chủ, danh mục, tìm kiếm, sản phẩm liên quan) ----------
   Ô ảnh vuông nền nhạt, không viền (ảnh nền trắng hoà vào nền ô → ảnh nào cũng thành ô cùng cỡ, kể cả ảnh có nền màu)
   · chữ căn giữa: hãng (in hoa nhỏ) → tên → giá đậm → nút viền vuông cùng bề rộng. */
.woocommerce ul.products, ul.products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; margin: 0; padding: 0; list-style: none; clear: none; }
.woocommerce ul.products::before, .woocommerce ul.products::after, ul.products::before, ul.products::after { display: none; content: none; }
.woocommerce ul.products li.product, ul.products li.product { float: none; width: auto; margin: 0; padding: 0; }
.card { display: flex; flex-direction: column; align-items: center; text-align: center; } /* không đặt chiều cao: lưới và hàng vuốt tự kéo các thẻ cùng hàng bằng nhau → nút luôn thẳng hàng */
.card__tile { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--white); }
.card__media { position: relative; display: block; height: 100%; }
.card__media img { width: 100%; height: 100%; object-fit: contain; transform: var(--pk, scale(1.12)); transition: opacity .5s; } /* 04/11 anh Tùng, ảnh 138: mỗi ảnh nền trắng nhận --pk từ PHP (vcr_packshot_frame) để sản phẩm cân cỡ, căn giữa ngang và đứng chung một đường đáy. Ảnh chưa có số đo, ảnh nền màu giữ phóng 1,12 như cũ */
.card__media .packshot--alt { position: absolute; inset: 0; opacity: 0; }
/* Ảnh dạng "ảnh chụp" (nền màu, banner, hộp tràn khung) thu về ~80% ô như ảnh lọ chuẩn (lọ chiếm ~78% chiều cao ô):
   hàng thẻ cùng một độ nặng thay vì một ảnh tràn kín ô cạnh các lọ trên nền trắng. Ảnh nền trắng thật vẫn là cách tốt nhất. */
.card__media img.packshot--photo, .card__media img.packshot--solid { position: absolute; inset: 10%; width: 80%; height: 80%; }
/* Ảnh chuẩn nền "gần trắng" (254 thay vì 255) hiện thành Ô XÁM MỜ trên màn hình điện thoại (ảnh anh Tùng chụp 28/10) →
   nâng sáng 1,2% cho nền trắng hẳn, hoà vào trang; màu sản phẩm không đổi bằng mắt. Mọi ảnh chuẩn: thẻ, banner, ảnh chính trang SP
   (không áp cho ảnh nhỏ cạnh ảnh chính: lớp lọc vẽ đè mất khung ảnh đang chọn). */
img.packshot { filter: brightness(1.012); }
/* Rê chuột vào thẻ: ẢNH THỨ HAI của sản phẩm (ảnh nhãn, ảnh cận viên…) hiện dần 0,5 giây như codeage.vn — không phóng to.
   Ảnh thứ hai chỉ tải khi rê chuột lần đầu (site.js), máy cảm ứng không tải. Sản phẩm chỉ có 1 ảnh thì giữ nguyên. */
@media (hover: hover) {
  .card:hover .card__media.has-alt img:first-child { opacity: 0; }
  .card:hover .card__media .packshot--alt { opacity: 1; }
}
.card__flag, .card__offer { position: absolute; left: 0; top: 0; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: var(--label-h); padding: 0 10px; font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.card__flag { background: var(--surface-2); color: var(--muted); }
.card__offer { background: var(--sale); color: var(--white); }
.card__body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 0; width: 100%; padding-top: 14px; } /* 04/11 anh Tùng, ảnh 138: hãng cách tên 2px, tên cách giá 8px, giá cách nút 12px; giá ghim đáy phần chữ nên giá và nút cùng hàng luôn thẳng */
/* Thẻ sản phẩm ĐẬM DẦN từ trên xuống như codeage.vn (29/10): hãng (nhỏ, in hoa, xám, 400) → tên (đen, 400) → GIÁ (700)
   → NÚT (chữ 700, viền 2px). Mắt đọc từ nhẹ đến nặng, dừng ở giá và nút. */
.card__brand { margin-bottom: 2px; font-size: var(--fs-13); font-weight: 400; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card__name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-15); font-weight: 400; line-height: 1.45; letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 639px) { .card__name { -webkit-line-clamp: 3; } } /* điện thoại: thẻ hẹp → 3 dòng để tên không mất phần quy cách ("– 240 viên") */
.card__body:hover .card__name { text-decoration: underline; text-underline-offset: 3px; }
.card__price { margin-top: auto; padding-top: 8px; font-size: var(--fs-16); font-weight: var(--fw-bold); line-height: 1.25; } /* 04/11 anh Tùng, ảnh 138: bỏ chỗ giữ cố định dòng tên, giá ghim đáy (không dùng subgrid vì hàng trượt là flex) */
.card__price del { display: block; margin: 2px 0 0; font-size: var(--fs-13); line-height: 1.25; }
.card__add {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: 100%; min-height: 40px; margin-top: 12px; padding: 0 18px;
  border: 2px solid var(--brand); background: var(--white); color: var(--brand);
  font-size: var(--fs-13); font-weight: var(--fw-bold); line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; transition: background-color .3s, color .3s, border-color .3s; /* 06/11 (kiểm tổng): bỏ nowrap và chiều cao cố định: chữ phóng to thì nút cao thêm, không cắt chữ; chữ thường vẫn 40px một dòng */
} /* nút gọn vừa chữ, căn giữa dưới giá (như codeage.vn, 29/10) — không còn kéo hết bề ngang thẻ. 04/11 anh Tùng, ảnh 138: cao 40px ở mọi cỡ màn hình */
/* 04/11 anh Tùng, ảnh 138 (phương án B): từ 640px nút rộng 208px căn giữa thẻ; ô hẹp hơn thì vừa ô. Dùng min() vì min-width thắng max-width. */
@media (min-width: 640px) { .card__add { min-width: min(208px, 100%); padding: 0 20px; } }
.card__add:hover { background: var(--brand); color: var(--white); }
/* 21h38 anh Tùng: nút ghi đầy đủ "THÊM VÀO GIỎ HÀNG" (rộng hơn "Thêm vào giỏ" ~40px). Điện thoại: thẻ chỉ còn 150–180px →
   nút kéo hết bề ngang thẻ, chữ bỏ giãn; máy rất hẹp (dưới 380px: 360, 375) chữ thường để không bị cắt — vẫn 13px. */
@media (max-width: 639px) { .card__add { width: 100%; padding: 0 6px; letter-spacing: 0; } }
@media (max-width: 379px) { .card__add { text-transform: none; } }
.card__add.loading { color: transparent; pointer-events: none; transition: none; } /* 29/10: chữ ẩn ngay, không mờ dần 0,3s đè lên vòng xoay */
.card__add.loading::after { content: ""; position: absolute; inset: 0; width: 16px; height: 16px; margin: auto; border: 2px solid rgba(28, 25, 23, .2); border-top-color: var(--ink); border-radius: 50%; animation: spin .7s linear infinite; }
.card__add.added { border-color: var(--leaf); background: var(--leaf); color: var(--white); }
.added_to_cart { display: none !important; } /* 05/11 (L2): WooCommerce gắn chữ trơn "Xem giỏ hàng" cạnh nút vừa bấm; ở mọi nơi (thẻ, trang sản phẩm, popup) ngăn giỏ đã tự mở nên không cần */
.price { color: var(--ink); font-variant-numeric: tabular-nums; }
.price__from { font-size: var(--fs-14); font-weight: 400; color: var(--muted); } /* 31/10 (ảnh 123): .86em (15,48 / 13,76px) → 14px */
.price del { margin-left: 6px; font-weight: 400; color: var(--muted); }
.price ins { text-decoration: none; }
.price-ask { font-size: max(13px, .72em); font-weight: var(--fw-medium); color: var(--sale); }
@media (min-width: 640px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; } }
@media (min-width: 1024px) { .woocommerce ul.products, ul.products { gap: 32px 24px; } } /* 04/11 anh Tùng, ảnh 138: Cửa hàng cùng nhịp với trang chủ */
@media (min-width: 1100px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Hàng "Sản phẩm nổi bật" trang chủ — TRƯỢT KIỂU CODEAGE.VN (29/10, đo trực tiếp trên codeage.vn):
   · một hàng: 4 thẻ (máy tính) / 3 (máy tính bảng) / 2 (điện thoại, tràn sát hai mép màn hình); thẻ sát nhau, ảnh to;
   · mũi tên chỉ là dấu ‹ › mảnh trên ảnh, ẩn — rê chuột vào hàng thì trượt nhẹ vào và hiện 70%, rê vào mũi tên thì đậm 100%
     và chuyển xanh thương hiệu (máy cảm ứng: luôn hiện 80%);
   · mỗi lần bấm sang đủ một "trang" thẻ, vòng tròn không có điểm cuối, kéo chuột / vuốt được (v3.js);
   · chưa có JS: vẫn là một hàng vuốt ngang được. */
.pslider { --per: 2; position: relative; }
@media (min-width: 640px) { .pslider { --per: 3; } }
@media (min-width: 900px) { .pslider { --per: 4; } }
.pslider .woocommerce { overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } /* 2px: viền dưới nút không bị khung cắt */
.pslider .woocommerce::-webkit-scrollbar { display: none; }
.pslider .woocommerce ul.products { display: flex; gap: 0; }
.pslider .woocommerce ul.products li.product { flex: 0 0 calc(100% / var(--per)); min-width: 0; padding: 0 6px; }
.pslider.is-ready .woocommerce { overflow: hidden; touch-action: pan-y; cursor: grab; }
.pslider.is-ready ul.products { will-change: transform; }
.pslider.is-dragging .woocommerce { cursor: grabbing; user-select: none; }
.pslider.is-dragging a { pointer-events: none; }
.pslider img { -webkit-user-drag: none; }
.js-reveal .pslider [data-reveal] { opacity: 1; transform: none; transition: none; } /* thẻ nằm ngoài khung trượt không bao giờ "lọt vào màn hình" */
.pslider__nav {
  position: absolute; top: var(--nav-top, 30%); z-index: 2; display: grid; place-items: center; width: 44px; height: 64px; margin-top: -32px; padding: 0;
  border: 0; background: transparent; color: var(--ink); opacity: 0; cursor: pointer; transition: transform .3s, opacity .3s, color .3s;
}
.pslider__nav .icon { width: 32px; height: 32px; stroke-width: 1.4; }
.pslider__nav--prev { left: 2%; transform: translateX(20%); }
.pslider__nav--prev .icon { transform: scaleX(-1); }
.pslider__nav--next { right: 2%; transform: translateX(-20%); }
.pslider:hover .pslider__nav, .pslider__nav:focus-visible { opacity: .7; transform: none; }
.pslider .pslider__nav:hover { opacity: 1; color: var(--brand); }
@media (hover: none) { .pslider__nav { opacity: .8; transform: none; } }
@media (max-width: 639px) {
  .pslider { margin-inline: calc(var(--gutter) * -1); }
  .pslider .woocommerce ul.products li.product { padding: 0; }
  .pslider .card__body { padding-inline: 10px; }
  .pslider__nav { width: 32px; }
  .pslider__nav .icon { width: 24px; height: 24px; }
  .pslider__nav--prev { left: 0; } .pslider__nav--next { right: 0; }
}
/* 29/10, 21h25 anh Tùng (duyệt ảnh 72): MÁY TÍNH hiện ĐỦ 8 sản phẩm thành 2 HÀNG × 4, không trượt, không mũi tên
   (--per 8 = đủ chỗ cho cả 8 thẻ → v3.js tự tắt chế độ trượt). Điện thoại / máy tính bảng vẫn là hàng trượt.
   04/11 anh Tùng, ảnh 138: dùng đúng lưới của Cửa hàng, 4 cột, khe 24, mép ngoài trùng mép khung. */
@media (min-width: 1024px) {
  .pslider { --per: 8; }
  .pslider .woocommerce { overflow: visible; padding-bottom: 0; }
  .pslider .woocommerce ul.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; }
  .pslider .woocommerce ul.products li.product { padding: 0; }
}
.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- 12. Trang chủ ----------
   Dải: banner (trắng) → cam kết (nền nhạt) → Mua theo nhu cầu, Sản phẩm nổi bật (trắng) → Thương hiệu (nền nhạt)
   → Mua sắm an tâm (xanh đậm) → chân trang. Điện thoại: banner → cam kết → Sản phẩm nổi bật → Mua theo nhu cầu → Tin tức
   → Thương hiệu → Mua sắm an tâm. Hai dải trắng liền nhau chỉ cách một nhịp (không cộng đôi khoảng đệm). */
/* Tin tức & Cẩm nang: máy tính (≥1024) nằm TRONG banner (cột phải, chạy dọc); điện thoại / máy tính bảng là dải riêng
   bên dưới (29/10). Dải trắng liền nhau chỉ cách một nhịp. */
.home26 .section, .home26 > .news-m { padding-block: var(--band) 0; }
.home26 > .rail-section { padding-bottom: var(--band); }
/* 29/10, 21h32 anh Tùng chọn B (ảnh 71): máy tính — banner → "Mua theo nhu cầu" và lưới danh mục → "Sản phẩm nổi bật"
   cách 40px (trước 64). Không dưới 40: tiêu đề khối cách nội dung của nó 28px, khoảng giữa hai khối phải lớn hơn. */
@media (min-width: 1024px) { .home26 > .needs-section, .home26 > .rail-section { padding-top: 40px; } }
.home26 > .news-m { padding-bottom: var(--band); }
@media (min-width: 640px) { .home26 > .rail-section + .news-m { padding-top: 0; } }
@media (max-width: 639px) {
  .home26 { display: flex; flex-direction: column; }
  .home26 > .hero { order: 1; } .home26 > .facts { order: 2; } .home26 > .rail-section { order: 3; padding-bottom: 0; } .home26 > .needs-section { order: 4; }
  .home26 > .news-m { order: 5; } .home26 > .brands26 { order: 6; } .home26 > .assure26 { order: 7; }
}

/* Banner: điện thoại ảnh đi trước, to (khung 280); máy tính bảng chữ | ảnh 44%; máy tính sản phẩm | tin tức trong một khối
   (xem cuối mục). Ảnh chuẩn có lề trắng → chỉ cắt lề, không bao giờ cắt vào sản phẩm. */
.hero { padding-block: var(--top-gap) 0; } /* khoảng dưới = đệm trên của dải kế tiếp (không cộng đôi) */
.hero__grid { display: grid; gap: 24px; }
.hero-stage { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; overflow: hidden; }
.hero-stage__badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 36px; /* điện thoại: cao BẰNG nút "Mua ngay" (36) cho cân — anh Tùng 29/10, 15h59 */ margin: 0; padding: 0 14px 0 12px; background: var(--brand); color: var(--white); font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: 1; letter-spacing: .1em; text-transform: uppercase; }
.hero-stage__badge .icon { width: 16px; height: 16px; }
/* Nhãn "SẢN PHẨM BÁN CHẠY NHẤT" (29/10): to — là tiêu đề của cả khối banner, nền xanh giữ nguyên.
   Nút "Mua ngay" (29/10, 14h26, anh Tùng): NỀN XANH ĐẬM như cũ, chữ trắng 700, viền 2px; rê chuột / bấm vào thì CHỈ CÒN
   VIỀN (nền trắng, chữ xanh). Cỡ giữ như bản 14h: máy tính cao 30px, điện thoại 36px cho dễ bấm.
   Hai nút mũi tên ‹ › của banner: giữ như cũ (nền trắng, viền xám; rê chuột tô xanh) — 15h04 anh Tùng bỏ bản nền xanh. */
.hero-slide__cta .btn { border: 2px solid var(--brand); background: var(--brand); color: var(--white); font-weight: var(--fw-bold); transition: background-color .3s, color .3s, border-color .3s; }
.hero-slide__cta .btn:hover, .hero-slide__cta .btn:active, .hero-slide__cta .btn:focus-visible { border-color: var(--brand); background: var(--white); color: var(--brand); }
@media (min-width: 640px) {
  .hero-stage__badge { height: 36px; padding: 0 16px 0 14px; font-size: var(--fs-14); }
  .hero-stage__badge .icon { width: 18px; height: 18px; }
  }
.hero-stage__body { display: flex; flex-direction: column; min-width: 0; }
.hero-slides { display: grid; }
/* Chuyển cảnh "tắt hẳn rồi mới hiện": chữ hai sản phẩm không bao giờ chồng nhau */
.hero-slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0;
  background: var(--white); opacity: 0; visibility: hidden; transform: translateX(16px); transition: opacity .22s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.hero-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .24s, transform .55s var(--ease) .24s, visibility 0s; }
.hero-slide.is-leaving { transform: translateX(-16px); }
.hero-slide__text { min-width: 0; }
.hero-slide__media { position: relative; order: -1; display: grid; place-items: center; height: 280px; overflow: hidden; background: var(--white); }
.hero-slide__media img { width: auto; height: 100%; max-width: 100%; object-fit: contain; transform: scale(1.12); } /* ảnh chuẩn có lề trắng 11%: chỉ cắt lề, KHÔNG BAO GIỜ cắt vào sản phẩm */
.hero-slide__brand { margin: 0 0 6px; font-size: var(--fs-13); font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hero-slide__name { margin: 0; font-size: var(--fs-display); font-weight: 400; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; }
.hero-slide__name a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.hero-slide__facts { display: grid; gap: 8px; margin: 10px 0 0; list-style: none; }
.hero-slide__facts li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); }
.hero-slide__facts .icon { margin-top: 2px; color: var(--leaf); }
.hero-slide__price { margin: 10px 0 0; font-size: 1.25rem; font-weight: var(--fw-strong); line-height: 1.2; }
.hero-slide__price .price__from, .hero-slide__price del { font-size: max(.62em, var(--fs-13)); font-weight: 400; color: var(--muted); } /* chữ "Từ" không dưới 13px */
@media (min-width: 640px) { .hero-slide__price .price__from { font-size: var(--fs-16); } } /* 31/10 (ảnh 123): 16,12 → 16px */
.hero-slide__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 14px; }
.hero-stage__nav { position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 0; }
.hero-stage__nav [data-prev], .hero-stage__nav [data-next] { display: none; }
.showcase__dots { display: flex; align-items: center; gap: 6px; }
.dot { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: transparent; }
.hero-stage__nav [data-toggle] { width: 44px; height: 44px; margin: -4px; } /* 05/11: nút tạm dừng: vùng bấm 44 x 44, hàng chấm và biểu tượng không dời */
.dot__bar { position: relative; display: block; width: 100%; height: 3px; overflow: hidden; background: rgba(28, 25, 23, .15); }
.dot__bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--brand); }
.dot.is-active .dot__bar span { width: 100%; }
.is-ticking .dot.is-active .dot__bar span { animation: dot-fill var(--slide-delay, 3s) linear both; }
@keyframes dot-fill { from { width: 0; } to { width: 100%; } }
/* Điện thoại (như codeage.vn): ẢNH đi trước và TO (khung 280, lọ ~245px), dưới là hãng · tên · một ý; giá và nút NHỎ (S 36)
   chung một hàng — nút không còn là khối tối to nhất banner. */
@media (max-width: 639px) {
  .hero-slide__facts li:nth-child(n+2) { display: none; }
  /* 05/11: bỏ lưới 2 cột (cột nút có thể co về 0 làm nút tràn), dùng flex tự xuống hàng: thiếu chỗ thì nút xuống dòng, không bao giờ chồng */
  .hero-slide__text { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
  .hero-slide__text > * { flex: 0 0 100%; min-width: 0; }
  .hero-slide__name { font-size: 1.375rem; }
  .hero-slide__facts { margin-top: 6px; }
  .hero-slide__price { flex: 1 1 auto; margin-top: 10px; }
  .hero-slide__cta { flex: 0 0 auto; margin-top: 10px; }
  .hero-slide__cta .btn { height: var(--h-sm); padding: 0 16px; font-size: var(--fs-13); letter-spacing: .04em; }
  /* nhãn "SẢN PHẨM BÁN CHẠY NHẤT" dài hơn → hàng chấm chuyển ảnh xuống DƯỚI sản phẩm, căn giữa (không đè lên nhãn) */
  .hero-stage__nav { position: static; justify-content: center; margin-top: 6px; }
  .hero-stage__nav [data-toggle] { margin: -4px -8px -4px 0; padding: 0 8px 0 0; } /* 05/11: nút đứng sát chấm cuối: nới vùng bấm sang phải, không đè chấm */
  /* 29/10, 15h59 (anh Tùng): "GỢI Ý CỦA SHOP" kéo lên gần — đường kẻ (hàng chấm) → "Gợi ý của shop" BẰNG nút "Mua ngay" →
     đường kẻ (27px; trước 61px). Tên dài xuống 2 dòng ở máy hẹp: phần chênh dồn lên giữa ảnh và chữ, nút + đường kẻ đứng yên. */
  .hero-slide { align-content: space-between; }
  .home26 > .rail-section { padding-top: 6px; }
  /* 29/10, 19h10 + 19h17 (anh Tùng): nhãn dịch LÊN 6px (cách menu 16 → 10px, cách ảnh 8 → 14px) và cả KHUNG nhãn dịch
     sang TRÁI 6px → mép trái màn hình → nhãn = 10px = menu → nhãn (hai khoảng BẰNG NHAU). Đệm trong nhãn giữ cân như cũ.
     Khối banner cắt phần tràn (cho hiệu ứng trượt) → nới khối sang trái 6px rồi đệm lại 6px: ảnh, chữ, nút đứng yên. */
  .hero { padding-top: 10px; }
  .hero-stage { margin-left: -6px; padding-left: 6px; }
  .hero-stage__badge { margin-left: -6px; margin-bottom: 6px; }
}
@media (min-width: 640px) {
  .hero-stage__nav { gap: 8px; }
  .hero-stage__nav [data-prev], .hero-stage__nav [data-next] { display: grid; }
  .dot { width: 26px; height: 32px; }
  .hero-slide { grid-template-columns: minmax(0, 1fr) 44%; align-items: center; gap: 24px; }
  .hero-slide__media { order: 0; height: 280px; }
  .hero-slide__media img { width: auto; height: 260px; max-width: 100%; transform: none; }
  .hero-slide__facts li { font-size: var(--fs-15); }
  .hero-slide__price { margin-top: 14px; font-size: 1.625rem; }
  .hero-slide__cta { margin-top: 18px; }
}
/* Máy tính (≥1024): BANNER ĐỘNG CŨ (anh Tùng duyệt lại 29/10) — sản phẩm chạy (2,1 phần) | tin tức chạy dọc (1 phần),
   gói trong MỘT KHỐI nhận diện: khung mảnh xám, VIỀN TRÊN 3px xanh thương hiệu — cùng màu nhãn "Nổi bật", vạch chạy của
   chấm chuyển ảnh và gạch dưới đầu cột tin tức. Khung trùng mép nội dung trang (thẳng logo / menu), trong khung đệm 32px.
   29/10, 20h59 anh Tùng chọn MẪU 5 (ảnh 68): khung banner SÁT ngay dưới menu (bỏ khoảng trắng 24px), BỎ viền xanh trên —
   chỉ còn viền xám mảnh, mép trên chính là đường kẻ xám đáy menu; màu xanh chỉ còn ở nhãn, nút, vạch đầu cột tin tức.
   21h22 anh Tùng: chỗ nối menu ↔ banner phải CÓ ĐỔ BÓNG như ảnh anh gửi → trang chủ máy tính: menu luôn đổ bóng mềm
   (đúng bóng lúc cuộn trang, .is-scrolled), kể cả khi đang ở đầu trang. */
@media (min-width: 1024px) {
      .hero__grid { position: relative; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: 0; }
  .hero__grid--solo { grid-template-columns: minmax(0, 1fr); }
  .hero__grid::before { content: ""; position: absolute; inset: 0 var(--gutter); border: 1px solid var(--line); pointer-events: none; border-top: 3px solid var(--brand); }
  /* 3px viền trên + 24 */
  .hero-stage__nav { top: 27px; right: 32px; } /* hàng chấm / mũi tên (36) thẳng hàng với nhãn "Sản phẩm nổi bật" (36) */
      /* ảnh chuẩn có lề trắng 11%: phần bị cắt chỉ là lề */
    .hero-slide__price { margin-top: 18px; }
  .hero-slide__cta { margin-top: 22px; }
}

/* Tin tức & Cẩm nang — danh sách chạy dọc chậm (~6 giây/bài), rê chuột / chạm thì dừng.
   Máy tính: cột phải của banner (.hero-news). Điện thoại / máy tính bảng: dải riêng dưới sản phẩm (.news-band). */
.hero-news { display: none; min-width: 0; }
@media (min-width: 1024px) {
  .home26 > .news-m { display: none; } /* tin tức đã nằm trong banner */
  .hero-news { display: flex; flex-direction: column; padding: 27px 32px 32px; border-left: 1px solid var(--line); }
  /* 29/10 (anh Tùng): tiêu đề MỘT DÒNG "Tin tức sức khoẻ" (19h48 rút gọn để đủ chỗ); đầu cột cao 36px = hàng nhãn +
     mũi tên bên trái, đường kẻ xanh nằm đúng mép dưới hàng mũi tên (19h41). "XEM TẤT CẢ →" nằm cạnh tiêu đề (19h56): BỎ ô vuông,
     chữ mảnh 400, không gạch chân, có mũi tên → như "Tất cả sản phẩm →". Đệm dưới 8px → chữ nhích lên 4px, không sát vạch xanh.
     20h05 anh Tùng chọn A: tiêu đề IN HOA 20px đậm 600; "XEM TẤT CẢ" 11px (NGOẠI LỆ mức tối thiểu 13px, anh Tùng tự chọn),
     mũi tên 12px; hai chữ đứng chung một chân chữ (baseline), đệm trên 2px giữ tiêu đề đúng chỗ cũ.
     20h22–20h24 anh Tùng: tiêu đề 16px (mọi cỡ máy tính); tin chạy lên KHÔNG sát vạch xanh: cách vạch 12px, mờ dần phía
     trên DÀY, phía dưới MỎNG (20h27: trên 90px, dưới 10px) — 20h40 anh Tùng thử: trên dưới ĐỀU 15px. */
      .hero-news .hero-news__viewport { flex: 1 1 0; height: auto; min-height: 0; margin-top: 12px; contain: size;
    -webkit-mask-image: linear-gradient(transparent, #000 15px, #000 calc(100% - 15px), transparent);
            mask-image: linear-gradient(transparent, #000 15px, #000 calc(100% - 15px), transparent); } /* cao bằng cột sản phẩm */
      /* 29/10 rà soát: vùng bấm "XEM TẤT CẢ" chỉ cao 12px → nới lên 28px bằng đệm trong + lề âm (hình và vị trí giữ nguyên). */
      }
/* Máy tính nhỏ (1024–1279): cột tin tức rộng thêm (1,8 : 1), đệm 24 → tiêu đề cột tin tức gọn 2 dòng; banner chỉ còn NÚT chính
   (tên sản phẩm vẫn bấm được) để nút + liên kết không rớt dòng trong cột chữ hẹp. */
@media (min-width: 1024px) and (max-width: 1279px) { /* 05/11: nới từ 1199 lên 1279 cùng mục "máy tính nhỏ" bên dưới */
  .hero__grid:not(.hero__grid--solo) { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .hero-stage, .hero-news { padding-inline: 24px; }
  .hero-stage__nav { right: 24px; }
}
.hero-news__list { list-style: none; }
.hero-news__list li + li { border-top: 1px solid var(--line); }
.hero-news__item { display: flex; align-items: center; gap: 14px; padding: 12px 0; color: var(--ink); }
.hero-news__thumb { display: grid; place-items: center; flex: none; width: var(--icon-l); height: var(--icon-l); overflow: hidden; background: var(--surface); color: var(--brand); }
.hero-news__thumb.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-news__text { display: grid; gap: 4px; min-width: 0; }
.hero-news__text strong { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.42; }
.hero-news__excerpt { display: none; }
.hero-news__item:hover strong { color: var(--brand-2); text-decoration: underline; text-underline-offset: 3px; }
.hero-news__text small { font-size: var(--fs-13); color: var(--muted); } /* 06/11: ngày đăng bài */
.hero-news__viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(transparent, #000 7%, #000 93%, transparent); }
.hero-news__track { animation: news-up var(--news-dur, 48s) linear infinite; will-change: transform; }
.hero-news__viewport:hover .hero-news__track, .hero-news__viewport:focus-within .hero-news__track, .hero-news__viewport:active .hero-news__track { animation-play-state: paused; }
.is-ticker .hero-news__list li + li { border-top: 0; }
.is-ticker .hero-news__list li { border-bottom: 1px solid var(--line); }
@keyframes news-up { to { transform: translateY(-50%); } }
/* 06/11 (ảnh 179): dưới 640 tên bài hiện tối đa 3 dòng, không cắt giữa chữ. Mọi bài cao bằng nhau kể cả tên ngắn (ô bài 114 + vạch 1 = 115), khung đúng 3 bài = 345, bằng số v3.js đo nên canh khung không nhảy, bài nào trượt tới cũng không bị cắt. */
.news-band .hero-news__viewport { height: 345px; }
@media (max-width: 639px) {
  .news-band .hero-news__text strong { -webkit-line-clamp: 3; }
  .news-band .hero-news__item { min-height: 114px; }
}
@media (min-width: 640px) {
  .hero-news__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 1; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); }
  .news-band .hero-news__viewport { height: 352px; }
}
@media (min-width: 900px) {
  .news-band .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: center; gap: 64px; }
  .news-band .section-head { flex-direction: column; align-items: flex-start; justify-content: center; gap: 24px; margin: 0; }
}

/* ---------- 31/10 — anh Tùng duyệt PA-B ("banner ở ảnh này oke đó"): banner MÁY TÍNH (≥1024) ----------
   Khối banner cách menu 24px: khung mảnh xám + viền trên 3px xanh thương hiệu (thay mẫu 5 ngày 29/10: sát menu, có bóng).
   Trái: khung sản phẩm NỀN PHỤ cao 320 — nhãn "Nổi bật" · hãng · tên 32 · 1 dòng thông tin · giá 26 + nút MUA NGAY 48 |
   ảnh 280 có bóng đổ mềm; dưới là hàng ảnh nhỏ 48 + tên 13 (bấm để xem; vạch trên chạy theo thời gian tự chuyển, bấm chọn
   thì dừng). Phải: "Cẩm nang vi chất" đứng yên (bài mới có tóm tắt + 2 bài). "Xem tất cả" 13px (hết ngoại lệ 11px).
   15h57 anh Tùng: cột phải đổi tên "Tin tức & Cẩm nang" và CHẠY DỌC CHẬM lại như trước (~8 giây/bài).
   Điện thoại / máy tính bảng: giữ banner cũ — anh xem ảnh rồi quyết. */
.hero-tabs { display: none; }
@media (min-width: 1024px) {
  .home .site-header { box-shadow: none; }
  .hero { padding-top: 24px; }
    .hero-stage { gap: 16px; padding: 27px 32px 24px; }
  .hero-stage__nav { display: none; }
  .hero-stage__badge { position: absolute; top: calc(27px + 28px); left: calc(32px + 32px); z-index: 3; gap: 6px; height: 28px; padding: 0 12px 0 10px; font-size: var(--fs-13); }
  .hero-stage__badge .icon { width: 14px; height: 14px; }
  /* khung sản phẩm cao tối thiểu 320, giãn theo cột Cẩm nang để hàng ảnh nhỏ luôn nằm sát đáy khối (không hở trắng) */
  .hero-stage__body { flex: 1 1 auto; gap: 16px; }
  .hero-slides { flex: 1 1 auto; min-height: 320px; background: var(--surface); }
  /* nền phụ đặt ở chính từng sản phẩm → ảnh nền trắng "hoà" vào nền phụ (multiply), không thành ô trắng */
  .hero-slide { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 16px; padding: 28px 32px; background: var(--surface); }
  /* 05/11: bỏ lưới "auto | 1fr" (giá dài thì cột nút co về 0, nút tràn sang ảnh; đo được ở 1024 đến 1279 kể cả khách), dùng flex tự xuống hàng: giá và nút chung hàng khi đủ chỗ, thiếu chỗ thì nút xuống dòng. */
  .hero-slide__text { display: flex; flex-wrap: wrap; align-content: flex-end; align-self: stretch; column-gap: 24px; padding-top: 44px; }
  .hero-slide__text > * { flex: 0 0 100%; min-width: 0; }
  .hero-slide__brand { margin-bottom: 8px; }
  /* 05/11: bỏ giới hạn 2 dòng của tên và dòng mô tả: giới hạn cắt giữa chữ ("vitamin D3 tron..."). 5 slide nằm chung một ô nên banner cao theo slide dài nhất, không nhảy khi đổi slide. */
  .hero-slide__name { font-size: 2rem; }
  .hero-slide__facts { display: block; margin: 10px 0 0; font-size: var(--fs-15); line-height: 1.5; color: var(--ink-2); }
  .hero-slide__facts li { display: inline; font-size: inherit; }
  .hero-slide__facts li:nth-child(n+3), .hero-slide__facts .icon { display: none; }
  .hero-slide__facts li + li::before { content: " · "; }
  /* Lề dưới -8 của giá: chung hàng thì không đổi gì (nút cao hơn giá), nút xuống dòng thì cách giá 12 thay vì 20 cho gọn.
     Lề phải -8 của nút: nút được lấn 8px vào khoảng trống 16 trước ảnh rồi mới xuống dòng (giá dài nhất của khách lấn 4px, không chạm ảnh). */
  .hero-slide__price { flex: 0 1 auto; margin: 20px 0 -8px; font-size: 1.625rem; }
  .hero-slide__cta { flex: 0 0 auto; margin: 20px -8px 0 0; }
  .hero-slide__cta .btn { height: var(--h-lg); padding: 0 28px; font-size: var(--fs-14); letter-spacing: .06em; }
  .hero-slide__media { height: 264px; overflow: visible; background: transparent; }
  .hero-slide__media::before { content: ""; position: absolute; left: 60px; right: 60px; bottom: 12px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(28, 25, 23, .18), rgba(28, 25, 23, 0)); }
  .hero-slide__media img { position: relative; width: 280px; height: 280px; max-width: 100%; object-fit: contain; transform: none; mix-blend-mode: multiply; }
  .hero-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  /* 05/11: tên trong ô được tới 3 dòng, không còn cắt giữa từ ("Liposomal Magnesiu..."). Dòng cao 1,2 nên 3 dòng (47px) vẫn thấp hơn ảnh 48: hàng ô cao như cũ, không đổi cao khi chữ ô đang chọn đậm hơn.
     Từ quá dài không vừa cạnh ảnh (min-content): riêng ô đó tên xuống dưới ảnh, không ngắt giữa từ. */
  .hero-tabs { --tab-ten: calc(3 * 1.2 * var(--fs-13)); }
  .hero-tab { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; padding: 12px 0 0; border: 0; border-top: 2px solid var(--line); background: transparent; font: inherit; text-align: left; color: var(--muted); cursor: pointer; }
  .hero-tab::before { content: ""; position: absolute; top: -2px; left: 0; width: 0; height: 2px; background: var(--brand); }
  .hero-tab.is-active::before { width: 100%; }
  .is-ticking .hero-tab.is-active::before { animation: dot-fill var(--slide-delay, 3s) linear both; }
  .hero-tab__img { display: grid; flex: none; place-items: center; width: 48px; height: 48px; }
  .hero-tab__img img { width: 48px; height: 48px; object-fit: contain; }
  .hero-tab__name { display: -webkit-box; flex: 1 1 0; overflow: hidden; overflow-wrap: break-word; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-width: min-content; font-size: var(--fs-13); line-height: 1.2; }
  .hero-tab.is-active .hero-tab__name, .hero-tab:hover .hero-tab__name { color: var(--ink); }
  .hero-tab.is-active .hero-tab__name { font-weight: var(--fw-medium); }
  .hero-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .hero-guide { padding: 27px 32px 24px; }
  .hero-guide__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 4px 0 14px; border-bottom: 1px solid var(--brand); }
  .hero-guide__head h2 { margin: 0; font-size: 1.125rem; font-weight: var(--fw-medium); line-height: 1.3; }
  .hero-guide__all { flex: none; margin: -8px 0; padding: 8px 0; font-size: var(--fs-13); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; }
  .hero-guide__all:hover { color: var(--brand); }
  /* 15h57 (anh Tùng): "Tin tức & Cẩm nang" chạy dọc chậm lại (~8 giây/bài) trong khung PA-B — mỗi bài một vạch mảnh ở đáy
     (cả chỗ nối vòng), mép trên/dưới mờ 15px như bản 29/10; rê chuột thì dừng. Dưới 4 bài: đứng yên, bài cuối không vạch. */
  .hero-guide__list { margin: 0; padding: 0; list-style: none; }
  .hero-guide__list > li { border-bottom: 1px solid var(--line); }
  .hero-guide > .hero-guide__list > li:last-child { border-bottom: 0; }
  .hero-guide .hero-guide__viewport { margin-top: 0; }
  .hero-guide__lead { padding: 18px 0; }
  .hero-guide__lead h3 { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-medium); line-height: 1.4; } /* 31/10 (ảnh 123): 17 → 18px */
  .hero-guide__lead h3 a:hover, .hero-guide__item > a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
  .hero-guide__excerpt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 8px 0 0; font-size: var(--fs-14); line-height: 1.55; color: var(--muted); }
  .hero-guide__time { margin: 10px 0 0; font-size: var(--fs-13); color: var(--muted); } /* 06/11: ngày đăng bài */
  .hero-guide__item { padding: 14px 0; }
  .hero-guide__item > a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.42; }
  .hero-guide__item .hero-guide__time { margin-top: 4px; }
}
/* Máy tính nhỏ: khung chữ hẹp hơn → ảnh 220, đệm 24, tên 28. 05/11: nới từ 1199 lên 1279: ở 1200 đến 1279 ảnh 300 làm cột chữ chỉ còn 340 đến 393px, tên to bị cắt ("Liposomal Magnesium...") và nút tràn sang ảnh. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero-stage__badge { top: calc(27px + 24px); left: calc(32px + 24px); } /* 05/11: khối banner đệm 32, slide đệm 24: nhãn thẳng mép với hãng, tên, giá (trước lệch trái 8px) */
  .hero-slide { grid-template-columns: minmax(0, 1fr) 220px; padding: 24px; }
  .hero-slide__text { padding-top: 40px; }
  .hero-slide__name { font-size: 1.75rem; }
  .hero-slide__media::before { left: 40px; right: 40px; bottom: 38px; height: 19px; } /* 05/11: ảnh 220 giữa khung 264 nên đáy sản phẩm cao hơn: bóng nhích lên sát đáy, cùng tỉ lệ với 1280 (trước lơ lửng cách đáy 25 đến 30px) */
  .hero-slide__media img { width: 220px; height: 220px; }
  .hero-guide { padding-inline: 24px; }
  /* ô ảnh nhỏ hẹp (chỗ cho tên cạnh ảnh chưa tới 80px, không đủ cho chữ "Glutathione"): ảnh trên, tên dưới, căn giữa */
  .hero-tab { flex-direction: column; flex-wrap: nowrap; gap: 6px; min-height: calc(66px + var(--tab-ten)); padding-top: 10px; text-align: center; }
  .hero-tab__name { flex: none; min-width: 0; max-width: 100%; }
}

/* 05/11: cột chữ hẹp nhất (1024 đến 1059): tên 26 để "Magnesium Glycinate" vừa một dòng, tên dài không lên 3 dòng làm banner cao thêm 33px. */
@media (min-width: 1024px) and (max-width: 1059px) { .hero-slide__name { font-size: 1.625rem; } }

/* Dải cam kết MẢNH trên nền xanh thương hiệu, TRÊN CÙNG mọi trang (trên menu; menu vẫn dính đầu khi cuộn).
   Mọi màn hình cao 40px. Máy tính (≥1024): 4 ý một hàng, ngăn bằng vạch mờ. Điện thoại/máy tính bảng: mỗi lần một ý,
   3,5 giây đổi (v3.js), chạm/rê chuột thì dừng; máy bật "giảm chuyển động" thì không tự đổi mà để vuốt ngang. */
.facts { background: var(--brand); color: var(--white); }
.facts__list { display: flex; align-items: center; justify-content: center; min-height: 40px; padding-block: 4px; list-style: none; }
.facts__list > li { display: none; }
.facts__list > li.is-active { display: flex; animation: fade .45s var(--ease); }
.fact-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; font-size: var(--fs-14); line-height: 1.3; text-align: center; color: var(--white); }
.fact-link .icon { width: 18px; height: 18px; opacity: .85; }
.fact-link strong { font-weight: var(--fw-medium); }
.fact-link span { color: var(--on-dark); }
a.fact-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .facts__list { justify-content: flex-start; gap: 28px; overflow-x: auto; scrollbar-width: none; }
  .facts__list > li { display: flex; }
}
/* 31/10 (anh Tùng, sau ảnh 105): điện thoại / máy tính bảng (<1024) BỎ CHỮ của dải — chỉ còn vạch xanh thương hiệu 3px
   làm điểm nhấn trên cùng. (Trước: chữ chạy 3,5 giây; máy bật "giảm chuyển động" thì chữ gãy 4–5 dòng.) Máy tính giữ 4 ý. */
@media (max-width: 1023px) {
  .facts--top { height: 3px; overflow: hidden; }
  .facts--top .container { display: none; }
}
@media (min-width: 1024px) {
  /* Máy tính: dải xanh DÍNH sát mép trên cùng cùng menu khi cuộn (29/10). Điện thoại: dải cuộn đi, chỉ menu dính (giữ chỗ cho nội dung). */
  .facts--top { position: sticky; top: var(--admin-h); z-index: 51; }
  .facts--top .facts__list { height: var(--strip-h); min-height: 0; }
  .facts__list { justify-content: space-between; padding-block: 0; }
  .fact-link { min-width: 0; white-space: nowrap; }
  .fact-link > :not(.icon) { overflow: hidden; text-overflow: ellipsis; } /* 06/11 (kiểm tổng): chữ phóng to thì dải trên cùng cắt gọn "…", không làm tràn trang */
  .facts__list > li, .facts__list > li.is-active { display: flex; align-items: center; min-width: 0; animation: none; }
  .facts__list > li + li::before { content: ""; width: 1px; height: 20px; margin-right: 24px; background: rgba(255, 255, 255, .22); }
  .facts__list > li + li { padding-left: 0; }
  .fact-link .icon { width: 20px; height: 20px; }
}

/* Mua theo nhu cầu: ô NGANG viền mảnh ở mọi cỡ màn hình (biểu tượng trái · tên + số sản phẩm phải · mũi tên trên máy tính).
   Điện thoại trước đây là ô đứng cao 140px, chữ dồn trên, trống dưới → 6 ô chiếm 450px; nay ô ngang ~80px, cả khối ~260px. */
.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; list-style: none; }
/* 31/10 (anh Tùng chọn B, ảnh 122): điện thoại (< 640) ô biểu tượng 32px (ký hiệu 16), khe 8px, đệm ngang 10px để tên danh mục
   đủ chỗ, ít gãy dòng. Ngoại lệ anh duyệt của bảng tỷ lệ 40/48; từ 640px trở lên về lại 40 / 48. */
.cat-tile { position: relative; display: flex; align-items: center; gap: 8px; height: 100%; min-height: 64px; padding: 12px 10px; border: 1px solid var(--line); background: var(--white); text-align: left; transition: border-color .2s, box-shadow .3s var(--ease); }
.cat-tile__icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; background: var(--surface); color: var(--brand); transition: background-color .2s, color .2s; }
.cat-tile__icon .icon { width: 16px; height: 16px; }
.cat-tile__text { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.cat-tile__text strong { font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.3; text-wrap: balance; }
.cat-tile__go { display: none; }
.cat-tile:hover { border-color: var(--brand); box-shadow: 0 16px 30px -24px rgba(14, 58, 46, .6); }
.cat-tile:hover .cat-tile__icon { background: var(--brand); color: var(--white); }
@media (min-width: 640px) {
  .cat-tile { gap: 14px; padding: 14px 16px; }
  .cat-tile__icon { width: var(--icon-s); height: var(--icon-s); }
  .cat-tile__icon .icon { width: 20px; height: 20px; }
}
/* Trang chủ: CHỈ CHỮ của 2 tiêu đề "Mua theo nhu cầu" và "Sản phẩm nổi bật" màu xanh thương hiệu — không nền, không khung
   (anh Tùng 29/10, 11h40: xanh thương hiệu rất đậm, chỉ dùng ở diện tích nhỏ). Nhãn nhỏ phía trên và các mục khác giữ nguyên. */
/* 29/10, 15h19 (anh Tùng chọn A — ảnh 40), CHỈ 2 khối này: dòng nhỏ ("DANH MỤC", "GỢI Ý CỦA SHOP") SÁT tiêu đề cho liền một cụm.
   04/11 anh Tùng, ảnh 138: bỏ phần lùi 32px / 24px trên máy tính, tiêu đề về thẳng mép lưới như khu Thương hiệu. */
@media (min-width: 900px) {
  .cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cat-tile { gap: 16px; min-height: 80px; padding: 16px 52px 16px 16px; }
  .cat-tile__icon { width: var(--icon-l); height: var(--icon-l); }
  .cat-tile__icon .icon { width: 24px; height: 24px; }
  .cat-tile__text strong { font-size: var(--fs-16); }
  .cat-tile__go { position: absolute; top: 50%; right: 20px; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -10px; color: var(--muted); transition: color .2s, transform .25s var(--ease); } /* chỉ mũi tên, không thêm ô */
  .cat-tile:hover .cat-tile__go { color: var(--brand); transform: translateX(3px); }
}

/* Thương hiệu: dải nền nhạt, đầu khối như mọi khối (nhãn nhỏ · tiêu đề trái · "Xem theo thương hiệu").
   Logo xếp LƯỚI đều (3 / 4 / 6 cột) và cùng một cỡ nhìn: cao theo hệ số riêng từng logo (--h) nhưng KHÔNG rộng quá ô
   (logo chữ dài như CODEAGE trước đây to gấp đôi logo khác); tên chữ không xuống dòng. */
.brands26 { padding-block: var(--band); background: var(--surface); overflow-x: clip; } /* 06/11 (kiểm tổng): tên hãng dài khi chữ phóng to ở máy rất hẹp không làm tràn trang */
.brands26__row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; list-style: none; }
.brands26__item { display: flex; align-items: center; justify-content: center; min-width: 0; height: 56px; padding: 0 6px; transition: background-color .2s; }
.brands26__item:hover, .brands26__item:focus-visible { background: var(--white); }
.brands26__item .brand-logo { display: block; width: auto; max-width: min(100%, 96px); object-fit: contain; filter: grayscale(1); opacity: .72; mix-blend-mode: multiply; transition: filter .25s, opacity .25s; }
.brands26__item:hover .brand-logo, .brands26__item:focus-visible .brand-logo { filter: none; opacity: 1; }
.brands26__name { font-size: var(--fs-13); font-weight: var(--fw-regular); letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; color: var(--muted); }
@media (min-width: 640px) {
  .brands26__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .brands26__item { height: 68px; padding: 0 12px; }
  .brands26__item .brand-logo { max-width: min(100%, 120px); }
}
@media (min-width: 900px) {
  .brands26__row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 16px; }
  .brands26__item { height: 80px; padding: 0 12px; }
  .brands26__item .brand-logo { max-width: min(100%, 132px); }
  .brands26__name { font-size: var(--fs-14); letter-spacing: .1em; }
}

/* Mua sắm an tâm: dải XANH ĐẬM (như dải đen "tìm điểm bán" của codeage), chữ trắng */
/* Mua sắm an tâm: cùng nền phụ với dải thương hiệu ngay trên (một vùng "tin cậy"), ngăn bằng một vạch — không thêm khối xanh đậm lớn */
.assure26 { padding-block: var(--band); background: var(--surface); color: var(--ink); }
.brands26 + .assure26 { padding-top: 0; }
.brands26 + .assure26 .assure26__panel { padding-top: var(--band); border-top: 1px solid var(--line-2); }
.assure26__panel { display: grid; gap: 28px; }
.assure26__lead { margin: 12px 0 0; line-height: 1.6; color: var(--ink-2); }
.assure26__list { display: grid; gap: 20px; list-style: none; }
.assure26__list > li { display: grid; grid-template-columns: var(--icon-s) minmax(0, 1fr); column-gap: 16px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.assure26__list > li > * { grid-column: 2; }
.assure26__list > li > .assure26__icon { grid-column: 1; grid-row: 1 / span 4; }
.assure26__icon { display: grid; place-items: center; width: var(--icon-s); height: var(--icon-s); background: var(--white); color: var(--brand); }
.assure26 h3 { margin: 6px 0 6px; font-size: var(--fs-16); color: var(--ink); }
.assure26__list p { margin: 0; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2); }
.assure26 .checks li { font-size: var(--fs-15); color: var(--ink-2); }
.assure26 .checks .icon { color: var(--brand); }
.assure26 .checks a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.assure26__link { margin-top: 10px !important; }
.assure26__link a { font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (min-width: 640px) {
  .assure26__list > li { display: block; }
  .assure26 h3 { margin: 16px 0 6px; }
}
@media (min-width: 1024px) {
  /* 04/11 anh Tùng, ảnh 145: tiêu đề và đoạn dẫn một hàng phía trên; 3 cột rộng hết khu, biểu tượng bên trái, liên kết của các cột cùng một đường ngang (hàng 1fr đẩy liên kết xuống đáy) */
  .assure26__panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .assure26__intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr); column-gap: 64px; align-items: end; }
  .assure26__intro > * { grid-column: 1; }
  .assure26__intro > .assure26__lead { grid-column: 2; grid-row: 1; margin: 0; }
  .assure26__lead { font-size: var(--fs-18); } /* 31/10 (ảnh 123): 17 → 18px */
  .assure26__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 48px; }
  .assure26__list > li { display: grid; grid-template-columns: var(--icon-s) minmax(0, 1fr); grid-template-rows: auto 1fr auto; align-items: start; padding-top: 0; border-top: 0; }
  .assure26__list > li > * { margin-top: 0; }
  .assure26__list > li > .assure26__icon { grid-row: 1 / span 3; }
}

/* ---------- 13. Danh mục, tìm kiếm, thương hiệu ----------
   04/11 anh Tùng, ảnh 144: đầu trang thẳng mép lưới như mọi trang khác. .catalog-top là khung 3 vùng: điện thoại tiêu đề / nhóm / số sản phẩm + sắp xếp;
   từ 640px tiêu đề và số sản phẩm + sắp xếp cùng một hàng, các nhóm ở hàng dưới. Nút lọc và ô sắp xếp cao 40px, bằng nút trên thẻ sản phẩm. */
.catalog-top { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "chips" "bar"; margin-bottom: 16px; }
.catalog-top > .catalog-head { grid-area: head; }
.catalog-top > .chips { grid-area: chips; }
.catalog-top > .catalog-bar { grid-area: bar; }
.catalog-head { padding-bottom: 12px; text-align: left; }
.catalog-head .breadcrumb { margin-bottom: 12px; }
.catalog-head .catalog-head__logo { display: block; width: auto; max-width: 70%; margin: 0 0 16px; }
.catalog-desc { max-width: 64ch; margin: 8px 0 0; color: var(--ink-2); }
.catalog-desc p { margin: 0; }
.chips { display: flex; gap: 8px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 640px) { .chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; } }
.catalog-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0 0; }
.catalog-count { margin: 0; font-size: var(--fs-14); color: var(--muted); }
.catalog-tools { display: flex; flex: none; gap: 8px; }
.select-pill, .select-pill .woocommerce-ordering { float: none; margin: 0; }
.select-pill select, select.orderby { width: auto; max-width: 46vw; height: 40px; padding: 0 36px 0 14px; border-color: var(--control); font-size: var(--fs-14); font-weight: 500; }
.active-filters { margin: 0 0 var(--head-gap); }
@media (max-width: 639px) { .catalog-count { font-size: var(--fs-13); } }
@media (min-width: 640px) {
  .catalog-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "head bar" "chips chips"; align-items: end; margin-bottom: 24px; }
  .catalog-bar { gap: 16px; margin: 0 0 12px; }
}
.woocommerce-pagination ul, .nav-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: var(--band); list-style: none; border: 0 !important; }
.woocommerce-pagination ul li { border: 0 !important; }
.woocommerce-pagination a, .woocommerce-pagination span, .page-numbers { display: inline-grid; place-items: center; min-width: var(--h-sm); height: var(--h-sm); padding: 0 12px; border: 1px solid var(--control); font-size: var(--fs-14); font-weight: 500; }
.woocommerce-pagination a:hover, a.page-numbers:hover { border-color: var(--brand); }
.woocommerce-pagination .current, .page-numbers.current { border-color: var(--brand); background: var(--brand); color: var(--white); }
.empty-state { max-width: 480px; margin: 48px auto; text-align: center; color: var(--muted); }
.empty-state > .icon { margin: 0 auto 12px; color: var(--brand); }
.empty-state h1, .empty-state h2 { margin-bottom: 8px; font-size: var(--fs-h3); }
.empty-state .btn { margin-top: 16px; }
.empty-suggest { margin-top: var(--band); }
.empty-suggest h2 { margin-bottom: var(--head-gap); }
.empty-suggest + .return-to-shop { margin: var(--band) 0 0; } /* 05/11: nút Xem sản phẩm dính nút của hàng thẻ cuối (0px); cùng nhịp với phân trang dưới lưới */

main.home26 + .site-footer { margin-top: 0; }

/* ---------- 14. Trang sản phẩm ----------
   Cột mua: đường dẫn → hãng → tên → GIÁ + còn hàng → VAT → PHIÊN BẢN (bấm là giá đổi) → MÃ GIẢM (luôn mở, một dòng)
   → số lượng + THÊM VÀO GIỎ / MUA NGAY → mô tả ngắn → cam kết → chứng từ.
   Máy tính: ảnh (ảnh nhỏ xếp dọc) dính khi cuộn, hai cột cân. Điện thoại: thanh mua dính đáy. */
.pdp-main { padding-top: var(--top-gap); }
.pdp-top { display: grid; align-items: start; gap: 20px; }
.pdp-gallery { position: relative; min-width: 0; }
.woocommerce div.product div.images, .woocommerce-product-gallery { position: relative; float: none; width: 100%; margin: 0; }
.woocommerce-product-gallery .flex-viewport, .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { overflow: hidden; background: var(--white); touch-action: pan-y pinch-zoom; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image a { display: block; cursor: zoom-in; }
/* Nền nhạt đặt ngay trên từng ảnh: khung trượt của thư viện tạo lớp riêng, ảnh nền trắng chỉ "hoà" được với nền nằm cùng lớp */
.woocommerce-product-gallery__image { position: relative; background: var(--white); }
/* Ảnh sản phẩm đặt thẳng trên nền trắng: không cần hoà nền (mix-blend) */
.woocommerce-product-gallery__image img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.woocommerce-product-gallery > .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:nth-child(n+2) { display: none; }
/* 05/11 (S1.1, nhảy bố cục): FlexSlider cho khung trong rộng 200% x số ảnh, 100ms sau mới đặt bề rộng từng ảnh. Trong 100ms đó ảnh to theo khung trong, thư viện cao hàng chục nghìn px, đẩy cả trang rồi co lại. Đặt sẵn đúng bề rộng khung ảnh; FlexSlider ghi đè bằng đúng số này. */
.woocommerce-product-gallery .flex-viewport { container-type: inline-size; }
.woocommerce-product-gallery .flex-viewport .woocommerce-product-gallery__image { float: left; width: 100cqi; }
/* Điện thoại, máy tính bảng: hàng ảnh nhỏ do JavaScript dựng sau khi trang đã hiện (mạng chậm), giữ sẵn chỗ để phần dưới ảnh không bị đẩy xuống. */
@media (max-width: 899px) { .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)):not(:has(.flex-control-thumbs))::after { content: ""; grid-column: 1; grid-row: 2; height: var(--thumb); } }
/* Điện thoại / máy tính bảng (như codeage.vn): ảnh chính TRÀN bề ngang, ảnh nhỏ thành MỘT HÀNG NGANG bên dưới (vuốt ngang).
   Máy tính (≥900): ảnh nhỏ xếp DỌC cạnh ảnh chính (YEU-CAU mục C). */
.woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; }
.woocommerce-product-gallery > .flex-viewport, .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { grid-column: 1; grid-row: 1; }
.woocommerce-product-gallery .flex-control-thumbs { grid-column: 1; grid-row: 2; display: flex; flex-direction: row; gap: 8px; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior: contain; list-style: none; scrollbar-width: none; }
.woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar { display: none; }
.woocommerce-product-gallery .flex-control-thumbs li { flex: none; width: var(--thumb); margin: 0; overflow: hidden; background: var(--white); outline: 1px solid var(--line); outline-offset: -1px; } /* outline vẽ TRÊN ảnh → khung luôn thấy */
.woocommerce-product-gallery .flex-control-thumbs img { width: 100%; aspect-ratio: 1; object-fit: contain; opacity: .6; cursor: pointer; transition: opacity .2s; }
.woocommerce-product-gallery .flex-control-thumbs img:hover, .woocommerce-product-gallery .flex-control-thumbs img.flex-active { opacity: 1; }
.woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) { outline: 2px solid var(--brand); outline-offset: -2px; }
.woocommerce-product-gallery__trigger {
  position: absolute; top: 10px; right: 10px; z-index: 9; display: block; width: 40px; height: 40px; overflow: hidden; border: 1px solid var(--line); font-size: 0; color: transparent;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%231C1917' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.woocommerce-product-gallery__trigger > * { display: none; }

.pdp-summary { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; min-width: 0; }
.pdp-summary > * { flex: 1 1 100%; min-width: 0; }
.woocommerce div.product div.summary { float: none; width: auto; margin: 0; }
.pdp-brand { margin: 0 0 6px; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pdp-brand a:hover { color: var(--ink); }
.pdp-title { font-size: var(--fs-title); line-height: 1.25; text-wrap: balance; }
.pdp-summary > p.price { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin: 12px 0 0; font-size: var(--fs-price); font-weight: var(--fw-strong); line-height: 1.2; }
.pdp-stock { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: var(--label-h); margin-top: 12px; padding: 0 10px; background: var(--surface); color: var(--ink-2); font-size: var(--fs-13); font-weight: 500; }
.pdp-stock__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.pdp-stock.is-out { background: var(--surface); color: var(--muted); }
.pdp-stock.is-out .pdp-stock__dot { background: var(--control); }
.vc-vat-note { margin: 6px 0 0; font-size: var(--fs-13); color: var(--muted); }
.pdp-lede { order: 1; margin: 20px 0 0; font-size: var(--fs-15); line-height: 1.65; color: var(--ink-2); }
/* 07/11 (anh duyệt mẫu 183, đề xuất 6): ô đặc điểm thay đoạn tóm tắt; chữ chung và chữ theo quy cách nằm trong ô nên ẩn đoạn mô tả theo quy cách để không lặp */
.pdp-o { order: 1; margin: 16px 0 0; }
.pdp-o__luoi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pdp-o__luoi > div { padding: 10px 12px; background: var(--surface); }
.pdp-o__luoi > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pdp-o__luoi dt { margin: 0 0 2px; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--muted); }
.pdp-o__luoi dd { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.4; color: var(--ink); }
.pdp-o__giay { padding: 0; border: 0; background: none; font: inherit; color: var(--brand); text-align: left; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pdp-o .pdp-lede { margin-top: 12px; }
@media (max-width: 639px) { .pdp-o__luoi > div:nth-child(n+3) { grid-column: 1 / -1; } }
.pdp-summary:has(.pdp-o) .woocommerce-variation-description { display: none; }
.price.has-code { flex-wrap: wrap; column-gap: 10px; }
.price.has-code ins, .price.has-code ins .amount { color: var(--sale) !important; }
.price.has-code del { order: 2; margin: 0; font-size: max(var(--fs-13), .58em); font-weight: 500; } /* chữ ≥ 13px: điện thoại .58em = 12,76px */
.pdp-summary > p.price.is-pop ins { animation: price-pop .9s var(--ease); }
@keyframes price-pop { 0% { background: rgba(217, 45, 32, 0); } 25% { background: rgba(217, 45, 32, .1); transform: scale(1.06); } 100% { background: rgba(217, 45, 32, 0); transform: none; } }

/* Form mua: một vạch mảnh ngăn với phần tên/giá (điện thoại 16 / máy tính 20 — khối mua gọn, nút mua lên cao) */
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .woocommerce div.product form.cart { margin-top: 20px; padding-top: 20px; } }
.woocommerce div.product form.cart .variations { width: 100%; margin: 0; border: 0; border-collapse: collapse; }
.woocommerce div.product form.cart .variations tr { display: block; margin: 0 0 12px; }
.woocommerce div.product form.cart .variations th, .woocommerce div.product form.cart .variations td { display: block; padding: 0; border: 0; text-align: left; }
.woocommerce div.product form.cart .variations label { display: block; margin-bottom: 10px; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.woocommerce div.product form.cart .variations td.value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
select.is-enhanced { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { height: var(--h-md); padding: 0 16px; border: 1px solid var(--control); border-radius: 0; background: var(--white); font-size: var(--fs-15); font-weight: 400; transition: border-color .15s, box-shadow .15s; }
.pill:hover { border-color: var(--brand); }
.pill[aria-pressed="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); font-weight: var(--fw-medium); }
.pill:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.reset_variations { margin: 0; font-size: var(--fs-14); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
/* KHỐI MUA — 2 hàng, giống nhau ở máy tính và điện thoại (sản phẩm một loại và nhiều quy cách):
   hàng 1 = ô nhập  [số lượng 48][ô mã giảm giá 48]
   hàng 2 = hành động [Thêm vào giỏ | Mua ngay] chia đôi, 48 — "Mua ngay" nền xanh là nút chính (Baymard: nút chính phải khác hẳn nút phụ)
   rồi mới tới mô tả quy cách đang chọn. Cột thứ 3 = nửa bề rộng nên hai nút luôn bằng nhau dù ô số lượng rộng bao nhiêu. */
.woocommerce div.product form.cart:not(.variations_form), .single_variation_wrap {
  display: grid; grid-template-columns: auto minmax(0, 1fr) calc((100% - 10px) / 2);
  grid-template-areas: "qty coupon coupon" "msg msg msg" "err err err" "list list list" "add add buy" "desc desc desc";
  gap: 0 10px; align-items: start; width: 100%;
}
/* Ô mã và các dòng báo của nó vào thẳng lưới: dòng "Tiết kiệm …" / lỗi / mã đang có trải hết bề ngang (không để trống dưới ô số lượng) */
.single_variation_wrap .woocommerce-variation-add-to-cart, .woocommerce div.product form.cart .pdp-coupon { display: contents; }
.woocommerce div.product form.cart .quantity { grid-area: qty; }
.woocommerce div.product form.cart .pdp-coupon__form { grid-area: coupon; min-width: 0; }
.woocommerce div.product form.cart .pdp-coupon__result { grid-area: msg; margin-top: 10px; }
.woocommerce div.product form.cart .pdp-coupon__error { grid-area: err; margin-top: 8px; }
.woocommerce div.product form.cart .pdp-coupon__list { grid-area: list; margin-top: 10px; }
.woocommerce div.product form.cart .single_add_to_cart_button { grid-area: add; margin-top: 10px; }
.woocommerce div.product form.cart .buy-now { grid-area: buy; margin-top: 10px; }
.single_variation_wrap > .woocommerce-variation { grid-area: desc; margin: 16px 0 0; }
.single_variation_wrap .woocommerce-variation-description p { margin: 0; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2); }
.woocommerce-variation-price .price { font-size: var(--fs-20); font-weight: var(--fw-strong); }
.has-price-swap .woocommerce-variation-price { display: none; }
.woocommerce-variation-availability .stock { margin: 4px 0 0; font-size: var(--fs-13); }
.quantity { margin: 0; }
.qty-stepper { display: inline-flex; align-items: center; height: var(--h-md); border: 1px solid var(--control); }
.qty-stepper input.qty { width: 40px; height: 100%; padding: 0; border: 0; box-shadow: none !important; font-weight: var(--fw-medium); text-align: center; -moz-appearance: textfield; }
.qty-stepper input.qty::-webkit-inner-spin-button, .qty-stepper input.qty::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }
.qty-btn { position: relative; z-index: 1; width: 44px; height: 100%; min-height: 44px; margin: 0 -4px; padding: 0; border: 0; background: transparent; font-size: 18px; color: var(--ink); } /* 05/11: vùng bấm 44 x 44, khung số lượng giữ nguyên nhờ lề âm */
.qty-btn:hover { background: linear-gradient(var(--surface), var(--surface)) center / 36px calc(var(--h-md) - 2px) no-repeat; }
.woocommerce div.product form.cart .button.single_add_to_cart_button, .single_add_to_cart_button { width: 100%; min-width: 0; height: auto; min-height: var(--h-lg); padding: 4px 16px; border-color: var(--brand); background: var(--white); color: var(--brand); line-height: 1.2; white-space: normal; text-wrap: balance; }
.woocommerce div.product form.cart .button.single_add_to_cart_button:hover { border-color: var(--brand); background: var(--brand); color: var(--white); }
.buy-now { width: 100%; min-width: 0; height: var(--h-lg); padding: 0 16px; }
/* 29/10 anh Tùng: nút ghi đủ "THÊM VÀO GIỎ HÀNG" như thẻ sản phẩm. Máy hẹp (360–399px) thiếu ~6px → bỏ giãn chữ, bớt đệm 2 bên
   (chữ vẫn 14px, in hoa) để không bị cắt. */
@media (max-width: 429px) { .woocommerce div.product form.cart .button.single_add_to_cart_button, .single_add_to_cart_button, .buy-now, .pdp-bar__actions .btn { padding-left: 8px; padding-right: 8px; letter-spacing: 0; } }
@media (max-width: 379px) { .woocommerce div.product form.cart .button.single_add_to_cart_button, .single_add_to_cart_button, .buy-now, .pdp-bar__actions .btn { text-transform: none; } } /* 360–375px: chữ thường như nút trên thẻ, đỡ sát viền; 04/11: nút ở thanh dính đáy viết cùng kiểu với nút thật */
/* Trang sản phẩm 360px trở xuống: ô mã giảm giá xuống hàng riêng (chữ gợi ý đọc đủ), 2 nút xếp dọc rộng hết hàng, chữ nút có đệm 16px hai bên (anh Tùng duyệt 04/11, HUONG-DAN 6.81) */
@media (max-width: 359px) {
  .woocommerce div.product form.cart:not(.variations_form), .single_variation_wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "qty" "coupon" "msg" "err" "list" "add" "buy" "desc";
  }
  .woocommerce div.product form.cart .pdp-coupon__form { margin-top: 10px; }
  .woocommerce div.product form.cart .button.single_add_to_cart_button, .single_add_to_cart_button, .buy-now { padding-left: 16px; padding-right: 16px; }
}
.stock { margin: 0 0 8px; font-size: var(--fs-13); font-weight: var(--fw-medium); }
.stock.in-stock { color: var(--leaf); }
.stock.out-of-stock { color: var(--err-ink); }

/* Ô mã giảm giá: ô nhập 48 như ô số lượng bên cạnh, viền mảnh liền (không viền đứt) — luôn mở, không tranh với nút mua */
.pdp-coupon { display: grid; gap: 8px; margin: 0; }
.pdp-coupon__form { position: relative; display: flex; align-items: center; height: var(--h-md); padding: 2px 4px 2px 40px; border: 1px solid var(--control); background: var(--white); transition: border-color .2s; }
.pdp-coupon__form:focus-within { border-style: solid; border-color: var(--brand); }
.pdp-coupon__icon { position: absolute; left: 12px; top: 50%; display: grid; place-items: center; width: 18px; height: 18px; margin-top: -9px; color: var(--muted); }
.pdp-coupon .pdp-coupon__form input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 6px; border: 0; background: transparent; box-shadow: none; font-size: var(--fs-15); font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pdp-coupon .pdp-coupon__form input::placeholder { font-size: var(--fs-14); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.pdp-coupon .pdp-coupon__form input:focus { box-shadow: none; }
.pdp-coupon__apply { position: relative; flex: none; height: var(--h-md); padding: 0 10px; border: 0; background: transparent; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--brand); white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.pdp-coupon__apply:hover { background: linear-gradient(var(--surface-2), var(--surface-2)) center / 100% var(--h-sm) no-repeat; } /* 05/11: vùng bấm phủ hết chiều cao khung mã, nhìn không đổi */
/* Điện thoại: ô mã chỉ còn ~200px cạnh ô số lượng — bỏ biểu tượng trang trí để chữ "Mã giảm giá" không bị cắt. */
@media (max-width: 479px) { .pdp-coupon__icon { display: none; } .pdp-coupon__form { padding-left: 8px; } }
.pdp-coupon__apply.is-loading::after { width: 14px; height: 14px; border-color: rgba(14, 58, 46, .2); border-top-color: var(--brand); }
.pdp-coupon.is-applied .pdp-coupon__form { border-style: solid; border-color: var(--brand); } /* 06/11 (mẫu 176, anh duyệt theo khuyên dùng): thành công dùng xanh thương hiệu nhạt, đỏ để dành cho báo lỗi. Giá sau mã vẫn đỏ. */
.pdp-coupon__result { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 10px 14px; background: var(--ok-bg); color: var(--brand); animation: fade-up .4s var(--ease); }
.pdp-coupon__msg { margin: 0; font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1.45; }
.pdp-coupon__msg::before { content: "✓ "; color: var(--brand); }
.pdp-coupon.is-waiting .pdp-coupon__result { background: var(--warn-bg); color: var(--warn-ink); }
.pdp-coupon.is-waiting .pdp-coupon__msg::before { content: ""; }
.pdp-coupon__remove { flex: none; min-height: 40px; padding: 2px 4px; border: 0; background: none; font-size: var(--fs-13); color: inherit; text-decoration: underline; opacity: .85; cursor: pointer; }
.pdp-coupon__error, .pdp-coupon__list { margin: 0; }
.pdp-coupon__error { font-size: var(--fs-14); font-weight: 500; color: var(--err-ink); }
.pdp-coupon__label { margin: 4px 0 6px; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-2); }

/* Bảng giá theo phiên bản, sản phẩm chờ hàng, đặt qua Zalo */
.vc-variant-prices { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: var(--fs-14); }
.vc-variant-prices caption { padding-bottom: 8px; font-size: var(--fs-13); font-weight: var(--fw-medium); text-align: left; }
.vc-variant-prices th, .vc-variant-prices td { padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 500; text-align: left; }
.vc-variant-prices thead th { font-size: var(--fs-13); color: var(--muted); }
.vc-variant-prices td { font-weight: var(--fw-medium); text-align: right; }
.vc-inventory-note { margin: 20px 0 0; padding: var(--pad); background: var(--surface); }
.vc-inventory-note .vc-inventory-title { margin: 0 0 4px; font-size: var(--fs-15); font-weight: var(--fw-medium); }
.vc-inventory-note p { font-size: var(--fs-14); color: var(--ink-2); }
.vc-inventory-actions { display: grid; gap: 8px; margin-top: 12px; }
@media (min-width: 640px) { .vc-inventory-actions { grid-template-columns: 1fr 1fr; } }
.order-ask { margin: 20px 0 0; padding: var(--pad); border: 1px solid rgba(217, 45, 32, .3); background: #FFF7F5; }
.order-ask__title { margin: 0 0 4px; font-size: var(--fs-16); font-weight: var(--fw-medium); }
.order-ask__text { margin: 0 0 12px; font-size: var(--fs-14); line-height: 1.55; color: var(--ink-2); }
.order-ask__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.order-ask__actions .btn { flex: 1 1 160px; }

/* Cam kết giao hàng / thanh toán / tư vấn: DẢI NGANG dưới cả hai cột (functions.php đưa ra ngoài cột mua, 28/10).
   Máy tính: 3 cột rộng ~380px — câu phí giao hàng 2 dòng (trước đây 5 dòng trong cột 110px); cột mua gọn bằng cột ảnh.
   Điện thoại: 3 hàng ngay sau nút mua và mô tả ngắn như trước. */
.pdp-services { display: grid; gap: 12px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); list-style: none; }
.pdp-services li > a, .pdp-services__item { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); }
.pdp-services strong { display: block; font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.35; }
.pdp-services small { display: block; margin-top: 2px; font-size: var(--fs-14); line-height: 1.45; color: var(--muted); }
.pdp-services__icon { display: grid; place-items: center; flex: none; width: var(--icon-s); height: var(--icon-s); background: var(--surface); color: var(--brand); }
.pdp-services a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
/* 31/10: dải cam kết dưới nút mua (vcr_pdp_promises) — mỗi ý 1 dòng (cả máy tính: 2 cột bị gãy chữ 3 dòng), biểu tượng xanh nhỏ, chữ 14 */
.pdp-promises { display: grid; gap: 10px; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.pdp-promises li, .pdp-promises a { display: flex; align-items: center; gap: 10px; min-height: 24px; font-size: var(--fs-14); line-height: 1.4; color: var(--ink-2); }
.pdp-promises .icon { flex: none; width: 18px; height: 18px; color: var(--brand); }
.pdp-promises a { color: var(--ink-2); text-decoration: none; }
.pdp-promises a:hover span { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.proof-box { order: 2; margin-top: 16px; padding: var(--pad); background: var(--surface); font-size: var(--fs-14); }
.proof-box__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-weight: var(--fw-medium); }
.proof-box__title .icon { color: var(--brand); }
.proof-box ul { display: grid; gap: 6px; list-style: none; color: var(--ink-2); }
.proof-box a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .pdp-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
}
@media (min-width: 900px) {
    .woocommerce-product-gallery:has(.woocommerce-product-gallery__image:nth-child(2)) { grid-template-columns: var(--thumb) minmax(0, 1fr); gap: 16px; }
  .woocommerce-product-gallery > .flex-viewport, .woocommerce-product-gallery > .woocommerce-product-gallery__wrapper { grid-column: 2; }
  .woocommerce-product-gallery .flex-control-thumbs { grid-column: 1; grid-row: 1; align-self: stretch; contain: size; flex-direction: column; overflow-x: visible; overflow-y: auto; }
  .woocommerce-product-gallery .flex-control-thumbs li { width: 100%; }
  .pdp-gallery { position: sticky; top: calc(var(--admin-h) + var(--strip-h) + var(--header-h) + 24px); }
  .pdp-summary { display: block; }
  .pdp-summary > p.price { display: inline-flex; margin-right: 12px; vertical-align: middle; }
  .pdp-stock { vertical-align: middle; }
}
/* Ảnh chính VUÔNG, tràn bề ngang trên điện thoại (như codeage.vn). Nút mua nằm trong trang ngay dưới tên/giá; thanh mua
   dính đáy chỉ hiện khi đã cuộn QUA 2 nút đó — không bao giờ hai hàng nút cùng lúc. */
@media (min-width: 900px) { .pdp > .pdp-services { margin-top: 40px; padding-top: 28px; } }
/* 29/10, 22h20 anh Tùng (ảnh 75 + "ảnh trong khung to hơn") — CHỈ MÁY TÍNH:
   · cột ảnh 1,6 : cột mua 1 (trước 1,1 : 1) → ảnh 511 → ~621px ở màn 1489px; cột mua gọn lại;
   · (30/10: khối 3 cam kết ở trang sản phẩm đã bỏ hẳn — lặp dải cam kết đầu trang.)
   · ảnh sản phẩm CHUẨN (lọ/hộp trên nền trắng, có lề trắng ~11%) phóng 1,15 trong khung — chỉ cắt vào lề trắng.
     Ảnh nhãn / bảng thành phần (không phải ảnh chuẩn) giữ nguyên để không cắt chữ.
   Điện thoại / máy tính bảng: không đổi. */
@media (min-width: 900px) {
  .pdp-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; } /* 900–1199: cột mua cần đủ chỗ cho 2 nút */
  .woocommerce-product-gallery__image img.packshot:not(.packshot--photo):not(.packshot--solid) { transform: scale(1.15); }
}
@media (min-width: 1200px) { .pdp-top { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }

/* Thông tin sản phẩm: mở sẵn; 04/11 anh Tùng, ảnh 143: máy tính mỗi mục một hàng, nhãn bên trái, nội dung bên phải */
.pdp-info { margin-top: var(--band); padding-top: var(--band); border-top: 1px solid var(--line); }
.pdp-info__intro { max-width: 64ch; margin: 12px 0 0; line-height: 1.65; color: var(--ink-2); }
.pdp-sec { padding: 24px 0; border-bottom: 1px solid var(--line); }
.pdp-sec__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; font-size: var(--fs-h3); line-height: 1.3; } /* chữ thường: tiêu đề mục không nặng hơn tiêu đề khối */
.pdp-sec__icon { display: grid; place-items: center; flex: none; width: var(--icon-s); height: var(--icon-s); background: var(--surface); color: var(--brand); }
.pdp-sec__body { font-size: var(--fs-16); line-height: 1.7; color: var(--ink-2); }
.pdp-sec__body .entry-content > * + * { margin-top: 10px; }
.pdp-sec__body .entry-content ul { padding-left: 0; list-style: none; }
.pdp-sec__body .entry-content ul > li { position: relative; padding-left: 20px; }
.pdp-sec__body .entry-content ul > li::before { content: ""; position: absolute; left: 3px; top: .68em; width: 7px; height: 7px; background: var(--leaf); }
.pdp-sec__body .entry-content li + li { margin-top: 8px; }
.pdp-sec__variant + .pdp-sec__variant { margin-top: 18px; }
.pdp-sec__option { display: inline-block; margin: 0 0 4px; padding: 3px 10px; background: var(--surface); font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: 1.5; color: var(--ink); }
.woocommerce-product-attributes { width: 100%; border-collapse: collapse; }
.woocommerce-product-attributes th, .woocommerce-product-attributes td { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); text-align: left; vertical-align: top; }
.woocommerce-product-attributes th { width: 40%; padding-right: 16px; font-weight: 500; color: var(--muted); }
.woocommerce-product-attributes td { font-weight: 500; color: var(--ink); }
.woocommerce-product-attributes td p { margin: 0; }
.pdp-sec__body .woocommerce-product-attributes { max-width: 560px; }
/* 07/11 (anh duyệt mẫu 183, đề xuất 4): câu cảnh báo rõ hơn, 13 px thường lên 15 px nét 500, chữ đậm màu, vạch vàng */
.health-note { display: flex; align-items: flex-start; gap: 8px; margin: 24px 0 0; padding: 14px 16px; border-left: 3px solid var(--vang-nhan); background: var(--surface); font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.5; color: var(--ink); }
.health-note .icon { flex: none; margin-top: 3px; color: var(--brand-2); }
@media (min-width: 640px) { .pdp-sec__body { padding-left: 52px; } }
@media (min-width: 1024px) {
  .pdp-info__head { padding-bottom: 8px; }
  .pdp-sec { display: grid; grid-template-columns: 248px minmax(0, 1fr); column-gap: 64px; align-items: start; padding: 24px 0; }
  .pdp-sec__title { margin: 0; }
  .pdp-sec__body { max-width: 720px; padding-left: 0; }
  .pdp-sec__body .entry-content > :first-child { margin-top: 0; }
}
.related, .upsells { margin-top: var(--band); padding-top: var(--band); border-top: 1px solid var(--line); }
.related > h2, .upsells > h2 { margin-bottom: var(--head-gap); } /* căn trái như mọi tiêu đề khối */

/* Thanh mua dính đáy (điện thoại, khi nút mua đã cuộn khỏi màn hình) */
/* Mọi thanh dính đáy điện thoại cùng một cao: 4 + nút 48 + 4 (= thanh liên hệ) — không thanh nào cao hơn thanh nào */
.pdp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px var(--gutter) calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .98); box-shadow: var(--shadow-up); }
.pdp-bar__price { display: grid; min-width: 0; line-height: 1.3; }
.pdp-bar__name { overflow: hidden; font-size: var(--fs-13); color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.pdp-bar .price { font-size: var(--fs-16); font-weight: var(--fw-strong); white-space: nowrap; }
.pdp-bar .price del, .pdp-bar .price .tv-hh, .pdp-bar .hv__ny, .pdp-bar .hv__hh { display: none; } /* thanh dính đáy: chỉ giá đang bán */
.pdp-bar .hv, .pdp-bar .hv__hang { display: contents; }
.pdp-bar .hv__gia { display: inline; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.pdp-bar__actions { display: flex; flex: none; gap: 8px; }
.pdp-bar .btn { flex: none; height: var(--h-lg); padding: 0 16px; font-size: var(--fs-14); }
/* Điện thoại thường (≤429px: 360–428): thanh chỉ còn 2 nút chia đôi như khối mua trong trang — giá + tên bị ép cụt ("965.000" mất "đ") */
@media (max-width: 429px) { .pdp-bar:has(.pdp-bar__actions) .pdp-bar__price { display: none; } .pdp-bar__actions { flex: 1 1 auto; } .pdp-bar__actions .btn { flex: 1 1 0; } }
/* 07/11 (anh duyệt mẫu 183, đề xuất 3): máy tính cũng có thanh mua dính đáy. Nút gọi nổi vẫn giữ, nằm trên thanh. Chừa chỗ trong dải đáy để thanh không che câu cảnh báo. */
.pdp-bar__img { display: none; }
@media (min-width: 768px) { .single-product .footer-bottom { padding-bottom: calc(18px + 73px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) {
  .pdp-bar { justify-content: flex-start; gap: 24px; padding: 10px max(var(--gutter), calc((100vw - var(--content)) / 2)); }
  .pdp-bar__img { display: block; flex: none; width: 52px; height: 52px; }
  .pdp-bar__img img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .pdp-bar__price { display: block; flex: 1 1 auto; }
  .pdp-bar__name { display: block; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--ink); }
  .pdp-bar .price { display: block; font-size: var(--fs-18); font-weight: var(--fw-bold); color: var(--ink); }
  .pdp-bar__actions .btn { width: 200px; }
}

/* Xem ảnh lớn */
/* 05/11 (HUONG-DAN 6.90): cột lưới minmax(0, 1fr) ở cả 2 lớp. Cột tự do thì hàng ảnh nhỏ đẩy khung rộng theo nội dung, điện thoại 375 khung rộng 549, nút đóng và mũi tên sau ra ngoài màn hình. */
.viewer { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 16px; }
.viewer__backdrop { position: absolute; inset: 0; background: rgba(10, 24, 19, .62); animation: fade .25s ease; }
.viewer__panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; width: min(880px, 100%); height: min(760px, calc(100vh - 32px)); padding: 20px 20px 14px; background: var(--white); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); animation: viewer-in .3s var(--ease); }
.viewer__stage { position: relative; min-height: 0; overflow: hidden; }
.viewer__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s ease; }
.viewer__img.is-in { opacity: 1; }
.viewer__close { position: absolute; top: 8px; right: 8px; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; }
.viewer__nav { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: var(--h-md); height: var(--h-md); margin-top: -40px; border: 1px solid var(--control); background: var(--white); color: var(--ink); cursor: pointer; }
.viewer__nav--prev { left: 14px; }
.viewer__nav--next { right: 14px; }
.viewer__close:hover, .viewer__nav:hover { border-color: var(--brand); background: var(--brand); color: var(--white); }
.viewer__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; }
.viewer__thumbs { display: flex; gap: 8px; overflow-x: auto; }
.viewer__thumb { flex: none; width: 56px; height: 56px; padding: 4px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.viewer__thumb img { width: 100%; height: 100%; object-fit: contain; }
.viewer__thumb[aria-current="true"] { border: var(--bw) solid var(--brand); }
.viewer__count { flex: none; font-size: var(--fs-14); color: var(--muted); }
@keyframes viewer-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (max-width: 639px) { .viewer__panel { height: min(620px, calc(100vh - 32px)); padding: 14px 12px 10px; } .viewer__nav { width: 40px; height: 40px; } .viewer__nav--prev { left: 6px; } .viewer__nav--next { right: 6px; } }

/* ---------- 15. Ưu đãi: phiếu mã giảm, ô mã (giỏ, thanh toán), tiến độ miễn phí giao hàng ---------- */
.ticket { position: relative; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; min-height: 68px; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.ticket__value { position: relative; align-self: stretch; display: grid; place-items: center; padding: 0 6px; background: var(--brand); color: var(--white); font-size: var(--fs-18); font-weight: var(--fw-strong); text-align: center; }
.ticket__value::after { content: ""; position: absolute; right: -5px; top: 6px; bottom: 6px; width: 10px; background: radial-gradient(circle at 5px 5px, var(--white) 3px, transparent 3.5px) 0 0 / 10px 10px repeat-y; }
.ticket__body { display: grid; gap: 1px; min-width: 0; padding: 10px 12px 10px 16px; line-height: 1.3; }
.ticket__body strong { font-size: var(--fs-15); font-weight: var(--fw-medium); }
.ticket__body small { font-size: var(--fs-13); color: var(--muted); }
.ticket__body .ticket__code { margin-top: 2px; color: var(--ink-2); }
.ticket__code b { padding: 0 5px; border: 1px solid var(--line-2); font-weight: var(--fw-medium); letter-spacing: .04em; }
.ticket__action { padding-right: 12px; }
.ticket__btn { height: var(--h-sm); padding: 0 16px; border: 1px solid var(--brand); background: var(--brand); color: var(--white); font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.ticket__btn:hover { background: var(--brand-hover); }
.ticket__btn.is-loading { color: transparent; }
.ticket__state { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--ok-ink); white-space: nowrap; }
.ticket__need { display: block; max-width: 92px; font-size: var(--fs-13); line-height: 1.3; text-align: right; color: var(--muted); }
.ticket.is-applied { border-color: var(--leaf); background: var(--surface); }
.ticket-list { display: grid; gap: 8px; }
/* Ô mã ưu đãi: viền LIỀN mảnh như mọi khung của web (trước đây viền đứt — một kiểu viền riêng); tiêu đề chữ thường */
.coupon-box { display: grid; gap: 10px; margin: 0 0 16px; padding: var(--pad); border: 1px solid var(--line-2); background: var(--white); }
.coupon-box__title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-15); font-weight: var(--fw-medium); }
.coupon-box__title .icon { color: var(--brand); }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; background: var(--ok-bg); font-size: var(--fs-14); color: var(--ok-ink); }
.coupon-applied span { display: inline-flex; align-items: center; gap: 6px; }
.coupon-applied button { min-height: 40px; padding: 4px; border: 0; background: none; font-size: var(--fs-13); color: var(--muted); text-decoration: underline; cursor: pointer; }
.coupon-form { display: flex; gap: 8px; }
.coupon-form input { flex: 1; min-width: 0; height: var(--h-md); font-size: var(--fs-15); text-transform: uppercase; }
.coupon-form input::placeholder { text-transform: none; }
.coupon-form .btn { flex: none; }
@media (max-width: 359px) { .coupon-form input { padding-inline: 10px; } .coupon-form .btn { padding-inline: 12px; } .coupon-box--checkout { padding: 12px; } } /* 05/11: máy 320: đủ chỗ cho chữ "Mã giảm giá" trong ô, không còn cắt (ở Thanh toán khối này còn nằm trong khung có đệm nên bớt đệm) */
.coupon-box--mini { margin: 4px 0 12px; padding: 12px; }
.coupon-box--mini .ticket { grid-template-columns: 62px minmax(0, 1fr) auto; min-height: 64px; }
.coupon-box--mini .ticket__value { font-size: var(--fs-16); }
.coupon-box--mini .ticket__code { display: none; }
.ship-progress { margin: 12px 0; padding: 12px 14px; background: var(--surface); font-size: var(--fs-14); }
.ship-progress p { display: flex; align-items: flex-start; gap: 6px; margin: 0 0 8px; }
.ship-progress p .icon { margin-top: 2px; color: var(--leaf); }
.ship-progress__bar { display: block; height: 4px; overflow: hidden; background: #D3DED6; } /* 04/11 anh Tùng, ảnh 141: thanh mảnh 4px */
.ship-progress__bar span { display: block; height: 100%; background: var(--brand); transition: width .4s var(--ease); }
.ship-progress.is-free { background: var(--ok-bg); color: var(--ok-ink); }
.ship-progress.is-free .ship-progress__bar { display: none; } /* 04/11 anh Tùng, ảnh 141: đã đủ miễn phí giao hàng thì chỉ giữ dòng báo, bỏ thanh đậm */
.ship-progress-row td { padding: 0 0 12px !important; border: 0 !important; }
.ship-progress-row .ship-progress { margin: 0; }
.ship-was { margin: 0 6px 0 0; font-weight: 400; color: var(--muted); }
.ship-now { font-weight: var(--fw-medium); color: var(--brand); text-decoration: none; }
.ship-name { font-weight: var(--fw-medium); }
.ship-method { display: block; margin-top: 2px; font-size: var(--fs-13); font-weight: 400; color: var(--muted); }
.ship-cost { font-weight: 400; }
.woocommerce-shipping-totals .ship-was, .woocommerce-shipping-totals .ship-now, .woocommerce-shipping-totals .ship-cost { white-space: nowrap; }
.savings-row th, .savings-row td { border-bottom: 0 !important; font-weight: var(--fw-medium); color: var(--ok-ink) !important; }
.savings-row th { white-space: nowrap; }
.savings-row th .icon { display: inline-block; margin-right: 6px; vertical-align: -3px; }
.mini-summary { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: var(--fs-14); }
.mini-summary div { display: flex; justify-content: space-between; gap: 12px; }
.mini-summary dt { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
.mini-summary dd { margin: 0; font-weight: 400; }
.mini-summary del { margin-right: 4px; font-weight: 400; color: var(--muted); }
.mini-summary .is-saving, .mini-summary__saved, .mini-summary__saved dt { color: var(--ok-ink); }
.mini-summary .mini-summary__ma { flex-wrap: wrap; row-gap: 2px; } /* 05/11 (L12): câu trần 50% nằm ngay dưới dòng mã */
.mini-summary dd.mini-summary__tran { flex: 1 1 100%; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); text-align: left; }
.mini-summary__total { padding-top: 6px; border-top: 1px solid var(--line); font-size: var(--fs-16); }
.mini-summary__total dd { font-weight: var(--fw-strong); }

/* ---------- 16. Giỏ hàng (ngăn kéo) ---------- */
.woocommerce-mini-cart { list-style: none; }
.woocommerce-mini-cart-item { position: relative; min-height: 104px; padding: 16px 32px 16px 88px; border-bottom: 1px solid var(--line); list-style: none; }
.woocommerce-mini-cart-item > a:not(.remove) { display: block; font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1.4; }
/* Ảnh nhỏ cùng kiểu ô ảnh của thẻ sản phẩm: ô vuông nền nhạt, không viền, nền trắng của ảnh hoà vào ô */
.woocommerce-mini-cart-item::before { content: ""; position: absolute; left: 0; top: 16px; width: 72px; height: 72px; background: var(--white); } /* 04/11: bỏ khung cho đồng bộ với Giỏ, ảnh 141 */
.woocommerce-mini-cart-item img { position: absolute; left: 0; top: 16px; width: 72px; height: 72px; object-fit: contain; transform: var(--pk, none); } /* 04/11: cùng cỡ với Giỏ, ảnh 141 (sản phẩm 92% ô, --pk từ PHP) */
.woocommerce-mini-cart-item .quantity { display: block; margin-top: 4px; font-size: var(--fs-13); color: var(--muted); }
.woocommerce-mini-cart-item .quantity .amount { font-weight: var(--fw-medium); color: var(--ink); }
.woocommerce-mini-cart-item .variation { margin: 2px 0 0; font-size: var(--fs-13); color: var(--muted); }
.woocommerce-mini-cart-item .variation dt, .woocommerce-mini-cart-item .variation dd, .woocommerce-mini-cart-item .variation dd p { display: inline; margin: 0; }
.woocommerce-mini-cart-item a.remove { position: absolute; right: -8px; top: 6px; display: grid; place-items: center; width: 44px; height: 44px; font-size: 32px; line-height: 1; color: var(--ink-2); } /* 05/11: vùng bấm 44 x 44, dấu x rõ hơn */
.woocommerce-mini-cart-item a.remove:hover { background: var(--surface); color: var(--err-ink); }
.mini-qty { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px !important; } /* 05/11: thành tiền 7, 8 chữ số thiếu chỗ thì xuống dòng, không bị cắt ở mép ngăn giỏ */
.mini-qty__stepper { display: inline-flex; align-items: center; height: var(--h-sm); border: 1px solid var(--control); }
.mini-qty__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -4px; padding: 0; border: 0; background: transparent; font-size: 16px; line-height: 1; color: var(--ink); } /* 05/11: vùng bấm 44 x 44, khung số lượng giữ nguyên nhờ lề âm */
.mini-qty__btn:hover:not(:disabled) { background: linear-gradient(var(--surface), var(--surface)) center / 36px calc(var(--h-sm) - 2px) no-repeat; }
.mini-qty__btn:disabled { color: var(--line-2); cursor: default; }
.mini-qty__val { min-width: 22px; font-size: var(--fs-14); font-weight: var(--fw-medium); text-align: center; font-variant-numeric: tabular-nums; }
.mini-qty__price { margin-left: auto; font-size: var(--fs-14); font-weight: var(--fw-medium); }
.mini-qty.is-busy { opacity: .5; pointer-events: none; }
.woocommerce-mini-cart__total { display: flex; align-items: baseline; justify-content: space-between; margin: 0; padding: 16px 0 12px; font-size: var(--fs-15); }
.woocommerce-mini-cart__total > span { flex: none; margin-right: 12px; } /* 05/11: chữ "Tạm tính" không bị ép xuống 2 dòng khi có giá gạch */
.woocommerce-mini-cart__total strong { font-size: var(--fs-18); font-weight: var(--fw-strong); text-align: right; }
.woocommerce-mini-cart__buttons { display: grid; gap: 8px; margin: 0; }
.woocommerce-mini-cart__buttons .button { width: 100%; }
.woocommerce-mini-cart__empty-message { margin: 40px 0 16px; text-align: center; color: var(--muted); }
.mini-cart-shop { margin-top: 8px; }

/* ---------- 17. Thông báo, bảng của WooCommerce ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 20px; padding: 14px 18px; border-left: 3px solid var(--brand); background: var(--surface); font-size: var(--fs-15); color: var(--ink-2); list-style: none; }
.woocommerce-error { border-left-color: var(--err-ink); background: var(--err-bg); color: var(--err-ink); }
.woocommerce-error li { width: 100%; }
.woocommerce-message .button, .woocommerce-info .button, .woocommerce .woocommerce-message a.button, .woocommerce .woocommerce-info a.button { order: 2; height: var(--h-md); margin-left: auto; padding: 0 24px; font-size: var(--fs-14); } /* 31/10 (ảnh 123): 40 → 48px như mọi nút chữ */
.woocommerce-cart .woocommerce-message a.wc-forward { display: none; } /* đang ở Giỏ hàng: nút "Xem giỏ hàng" chỉ mở lại chính trang này */
.woocommerce-info a:not(.button), .woocommerce-message a:not(.button) { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce table.shop_table { width: 100%; margin: 0 0 24px; border: 0; border-collapse: collapse; font-size: var(--fs-15); }
.woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: 14px 8px; border: 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.woocommerce table.shop_table thead th { font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.woocommerce table.shop_table .product-thumbnail a { display: block; width: 72px; height: 72px; overflow: hidden; background: var(--white); } /* 04/11 anh Tùng, ảnh 141: bỏ khung */
.woocommerce table.shop_table .product-thumbnail img { width: 72px; height: 72px; object-fit: contain; transform: var(--pk, none); } /* 04/11 anh Tùng, ảnh 141: sản phẩm chiếm 92% ô, --pk từ PHP. Ảnh chưa có số đo giữ nguyên */
.woocommerce table.shop_table .product-name a { font-weight: var(--fw-medium); text-decoration: none; } /* tên sản phẩm như ở thẻ: không gạch chân, rê chuột mới gạch */
.woocommerce table.shop_table .product-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce a.remove { display: inline-grid; place-items: center; width: 44px; height: 44px; font-size: 32px; line-height: 1; color: var(--ink-2); text-decoration: none; } /* nút xoá "×": không gạch chân như chữ liên kết */
.woocommerce a.remove:hover { background: var(--surface); color: var(--err-ink); }
.woocommerce .blockUI.blockOverlay { background: rgba(255, 255, 255, .6) !important; }
.woocommerce-shipping-methods, #shipping_method { margin: 0; padding: 0; list-style: none; }
.woocommerce-shipping-methods li { display: flex; align-items: flex-start; gap: 6px; }

/* ---------- 18. Trang giỏ hàng: điện thoại thẻ sản phẩm; máy tính sản phẩm | khung tóm tắt dính ---------- */
.woocommerce-cart-form .shop_table { margin-bottom: 0; }
.woocommerce-cart-form td.actions { padding: 16px 0 !important; border-bottom: 0 !important; }
.woocommerce-cart-form td.actions::after { content: ""; display: table; clear: both; }
.woocommerce-cart-form td.actions .coupon { float: left; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-cart-form td.actions .coupon .input-text { width: 200px !important; height: var(--h-md) !important; }
.woocommerce-cart-form td.actions > .button { float: right; }
.woocommerce-cart-form .product-subtotal { font-weight: var(--fw-medium); text-align: right !important; }
.cart-auto .woocommerce-cart-form button[name="update_cart"], .cart-auto .woocommerce-cart-form td.actions { display: none; } /* 06/11 (kiểm tổng): bỏ :has để trình duyệt cũ cũng ẩn được, hàng mã giảm giá thừa không còn hiện */
.woocommerce .cart-collaterals { width: 100%; }
.woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; padding: var(--pad); background: var(--surface); }
.woocommerce .cart-collaterals .cart_totals h2 { margin: 0 0 12px; font-size: var(--fs-h3); }
.cart-collaterals .cart_totals table.shop_table { margin-bottom: 16px; }
.cart-collaterals .cart_totals table.shop_table th, .cart-collaterals .cart_totals table.shop_table td { padding-inline: 0; } /* thẳng mép với tiêu đề khung */
.cart-collaterals .cart_totals table.shop_table th { font-weight: 500; color: var(--muted); width: auto; }
.cart-collaterals .cart_totals table.shop_table td { text-align: right; white-space: nowrap; }
.cart-collaterals .cart_totals .woocommerce-shipping-totals td { white-space: normal; }
.cart-collaterals .cart_totals table.shop_table .order-total th, .cart-collaterals .cart_totals table.shop_table .order-total td { border-bottom: 0; font-size: var(--fs-18); font-weight: var(--fw-strong); color: var(--ink); }
.cart-collaterals .woocommerce-shipping-destination { display: none; }
.cart_totals #shipping_method { text-align: right; }
.cart_totals #shipping_method li { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
.wc-proceed-to-checkout { padding: 0; }
.woocommerce .wc-proceed-to-checkout a.checkout-button { display: flex; width: 100%; height: var(--h-lg); }
/* Cam kết trong giỏ: danh sách GỌN không khung, sau khung tổng tiền (điện thoại) / dưới danh sách sản phẩm (máy tính).
   Trước đây 4 ô có viền cuộn ngang nằm chen giữa sản phẩm và tổng tiền → đẩy tổng tiền khỏi màn hình. */
.woocommerce .cart-assure { display: grid; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.woocommerce .cart-assure li { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-15); line-height: 1.5; color: var(--muted); } /* 04/11 anh Tùng, ảnh 141: 3 ý xếp 1 cột ở mọi cỡ, hết ô trống */
.cart-assure li > .icon { margin-top: 2px; color: var(--brand); }
.cart-assure strong { display: block; margin-bottom: 2px; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--ink); }
.cart-more { display: block; margin-top: 8px; padding: 10px 0; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.dat-hang-yen-tam { margin: 12px 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); }
.dat-hang-yen-tam a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { .woocommerce .cart-collaterals { margin-top: 20px; } }
/* 05/11: dạng thẻ dùng cả cho 900 đến 1149: ở đó cột danh sách chỉ 404 đến 636px cạnh khung tóm tắt 400 nên dạng bảng tràn xuống dưới khung tóm tắt, che mất thành tiền (đo được với 1 sản phẩm giá 7 chữ số, kể cả khách). */
@media (max-width: 767px), (min-width: 900px) and (max-width: 1149px) {
  .woocommerce-cart-form .shop_table thead { display: none; }
  .woocommerce-cart-form .shop_table, .woocommerce-cart-form .shop_table tbody { display: block; width: 100%; }
  /* 05/11: bỏ lưới cứng (số tiền 7, 8 chữ số đè lên ô số lượng), dùng flex tự xuống hàng: thiếu chỗ thì thành tiền xuống dòng riêng, vẫn căn phải. Ảnh neo bên trái, đệm 86 = ảnh 72 + cách 14. */
  .woocommerce-cart-form .shop_table tr.cart_item { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; column-gap: 14px; row-gap: 6px; min-height: 105px; padding: 16px 40px 16px 86px; border-bottom: 1px solid var(--line); }
  .woocommerce-cart-form .shop_table tr.cart_item td { display: block; padding: 0; border: 0; background: none; text-align: left; }
  .woocommerce-cart-form .shop_table tr.cart_item td::before { display: none; content: none; }
  .woocommerce-cart-form td.product-thumbnail { position: absolute; top: 16px; left: 0; display: block; }
  .woocommerce-cart-form td.product-name { flex: 0 0 100%; min-width: 0; font-size: var(--fs-15); line-height: 1.35; }
  .woocommerce-cart-form td.product-price { flex: 0 0 100%; min-width: 0; font-size: var(--fs-13); color: var(--muted); }
  .woocommerce-cart-form td.product-quantity { flex: 0 0 auto; }
  .woocommerce-cart-form td.product-subtotal { flex: 0 0 auto; align-self: center; margin-left: auto; font-size: var(--fs-15); }
  .woocommerce-cart-form td.product-remove { position: absolute; top: 12px; right: 0; }
  .woocommerce-cart-form tr:not(.cart_item), .woocommerce-cart-form td.actions { display: block; }
  .woocommerce-cart-form td.actions .coupon { float: none; display: flex; width: 100%; margin-bottom: 10px; }
  .woocommerce-cart-form td.actions .coupon .input-text { flex: 1; width: auto !important; min-width: 0; }
  .woocommerce-cart-form td.actions > .button { float: none; width: 100%; }
}
@media (min-width: 900px) {
  /* 04/11 anh Tùng, ảnh 141, sửa lỗi: khung tóm tắt giữ cứng hàng 1 đến 3 nên thông báo trải 2 cột bị đẩy xuống hàng 4, danh sách tụt theo. Nay mỗi phần có hàng riêng:
     hàng 1 thông báo (trống thì cao 0), hàng 2 danh sách, hàng 3 cam kết, hàng 4 chỉ để nhận phần khung tóm tắt dài hơn, không giãn khoảng cách giữa danh sách và cam kết. */
  .woocommerce:has(> .woocommerce-cart-form) { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-rows: auto auto auto 1fr; align-items: start; column-gap: 48px; }
  .woocommerce:has(> .woocommerce-cart-form) > * { grid-column: 1; }
  .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
  .woocommerce:has(> .woocommerce-cart-form) > .woocommerce-cart-form { grid-row: 2; }
  .woocommerce:has(> .woocommerce-cart-form) > .cart-collaterals { position: sticky; top: calc(var(--admin-h) + var(--strip-h) + var(--header-h) + 24px); grid-column: 2; grid-row: 2 / span 3; width: auto; }
  .woocommerce:has(> .woocommerce-cart-form) > .cart-assure { grid-row: 3; }
}

/* ---------- 19. Thanh toán: điện thoại một cột; máy tính thông tin | khung đơn hàng dính ---------- */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 16px; padding: 0; border: 0; background: transparent; }
form.checkout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } /* 05/11: cột lưới không bao giờ rộng hơn form (trước đây không ghi cột: một dòng tiền dài đẩy cả form rộng hơn màn hình, ô nhập mất cạnh phải) */
.woocommerce .col2-set, .woocommerce-page .col2-set { width: 100%; }
.woocommerce .col2-set .col-1, .woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-1, .woocommerce-page .col2-set .col-2 { float: none; width: 100%; }
.woocommerce-billing-fields h3, .woocommerce-additional-fields h3, #order_review_heading, .woocommerce-column__title, .woocommerce-order-details__title, .woocommerce-customer-details h2 { margin: 0 0 16px; font-size: var(--fs-h3); }
.woocommerce-additional-fields { margin-top: 8px; }
#order_review { padding: var(--pad); background: var(--surface); }
#order_review table.shop_table { margin-bottom: 16px; background: transparent; }
#order_review table.shop_table thead { display: none; }
#order_review table.shop_table th, #order_review table.shop_table td { padding: 12px 0; }
#order_review .ship-progress-row:has(.ship-progress.is-free) { display: none; }
#order_review .shop_table th:last-child, #order_review .shop_table td:last-child { text-align: right; }
#order_review .shop_table td[colspan], #order_review .shop_table th[colspan] { text-align: left; }
#order_review .shop_table td.product-name { width: 62%; font-weight: var(--fw-medium); }
#order_review .shop_table td.product-total { white-space: nowrap; }
#order_review .woocommerce-shipping-totals td { white-space: normal; }
#order_review #shipping_method { text-align: right; }
#order_review #shipping_method li { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
#order_review .order-total th, #order_review .order-total td { border-bottom: 0; font-size: var(--fs-18); font-weight: var(--fw-strong); }
#payment { margin-top: 8px; background: transparent; }
#payment ul.payment_methods { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; list-style: none; }
#payment ul.payment_methods li { padding: 14px 16px; border: 1px solid var(--line); background: var(--white); }
#payment ul.payment_methods li:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
#payment ul.payment_methods li input { vertical-align: -3px; }
#payment ul.payment_methods li label { display: inline; font-size: var(--fs-15); font-weight: var(--fw-medium); cursor: pointer; }
#payment ul.payment_methods li img { display: inline-block; max-height: 22px; margin-left: 6px; vertical-align: middle; }
#payment .payment_box { margin-top: 10px; padding: 0; background: transparent; font-size: var(--fs-14); color: var(--ink-2); }
#payment .payment_box p { margin: 0; }
#payment .payment_box::before { display: none; }
#payment .place-order { margin: 0; padding: 0; }
#place_order { float: none; width: 100%; height: var(--h-lg); }
.woocommerce-terms-and-conditions-wrapper { margin-bottom: 14px; font-size: var(--fs-14); color: var(--muted); }
.woocommerce-privacy-policy-text p { font-size: var(--fs-13); }
/* 29/10, 22h09 anh Tùng chọn A (ảnh 76): ô "Tôi đã đọc và đồng ý..." KHÔNG tích sẵn, bắt buộc trước Đặt hàng / Đăng ký
   (mu-plugins/vichat-consent.php). Ô 22px, bấm cả khung chữ được; quên tích → viền đỏ + câu nhắc ngay dưới. */
.vc-consent-wrap { margin: 0; }
.vc-consent, .woocommerce form .vc-consent-wrap label.vc-consent { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line); background: var(--white); font-size: var(--fs-15); font-weight: var(--fw-regular); line-height: 1.5; color: var(--ink); cursor: pointer; }
.vc-consent > span { flex: 1 1 auto; min-width: 0; }
.vc-consent input[type="checkbox"] { flex: none; margin: 1px 0 0; cursor: pointer; }
.vc-consent a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.vc-consent.has-error, .woocommerce form .vc-consent-wrap label.vc-consent.has-error { padding: 13px; border: 2px solid #B91C1C; } /* 01/11: "has-error" (WooCommerce xoá phần tử ".is-error") */
.vc-consent__err { margin: 8px 0 0; font-size: var(--fs-14); font-weight: var(--fw-medium); color: #B91C1C; }
/* 05/11 (HUONG-DAN 6.96): lớp khoá lúc tính lại nuốt cú bấm vào ô đồng ý. Lớp khoá vẫn phủ trắng mờ như cũ và cả khối vẫn khoá, nhất là nút Đặt hàng; riêng ô đồng ý nhận cú bấm (giữ dấu tích khi khối vẽ lại: vichat-consent.php). */
.woocommerce-checkout-payment:has(> .blockOverlay) { pointer-events: none; }
.woocommerce-checkout-payment:has(> .blockOverlay) .vc-consent { pointer-events: auto; }
.woocommerce-form-register .vc-consent-wrap { grid-column: 1 / -1; }
.checkout-summary, .checkout-summary span { text-decoration: none !important; }
.checkout-summary { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; padding: 14px 16px; background: var(--surface); font-size: var(--fs-14); color: var(--ink); }
.checkout-summary__count { display: inline-flex; align-items: center; gap: 8px; }
.checkout-summary__total { margin-left: auto; font-weight: var(--fw-strong); }
.checkout-summary__link { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--fw-medium); color: var(--brand); text-decoration: underline !important; text-underline-offset: 3px; }
.checkout-summary__count, .checkout-summary__total, .checkout-summary__link { white-space: nowrap; } /* 05/11 (L10, L11): cả 3 mục không rớt chữ từng từ ("50 / sản / phẩm") */
@media (max-width: 479px) { .checkout-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; } .checkout-summary__link { grid-column: 1 / -1; justify-self: end; } } /* máy hẹp: hàng trên số sản phẩm và tổng tiền, hàng dưới Xem chi tiết đơn */
#customer_details .cart-assure { display: none; } /* 04/11 anh Tùng, ảnh 142: chỉ máy tính; điện thoại giữ thứ tự cũ */
@media (min-width: 900px) {
  .checkout-summary { display: none; }
  form.checkout { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; column-gap: 48px; row-gap: 0; } /* 04/11 anh Tùng, ảnh 142: row-gap 0 để khung phải thẳng ô đầu tiên bên trái */
  form.checkout > *:not(#customer_details):not(#order_review_heading):not(#order_review) { grid-column: 1 / -1; }
  #customer_details { grid-column: 1; grid-row: 1 / span 3; }
  #customer_details .cart-assure { display: grid; margin-top: 24px; }
  .dat-hang-yen-tam { display: none; }
  #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
  #order_review { position: sticky; top: calc(var(--admin-h) + var(--strip-h) + var(--header-h) + 24px); grid-column: 2; grid-row: 2; padding: 24px; }
  /* 04/11 anh Tùng, ảnh 142: khung phải một mặt phẳng, không còn thẻ trắng lồng. Thanh toán khi nhận hàng là ô thông tin, chỉ có 1 cách nên không viền đậm như đang chọn */
  .coupon-box--checkout { margin: 0 0 4px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; }
  #payment ul.payment_methods li.payment_method_cod:has(input:checked) { border-color: var(--line); box-shadow: none; }
}
/* Yêu cầu hóa đơn VAT */
.vat-box { margin: 20px 0 0; padding: 0; overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.vat-toggle { display: flex; align-items: center; gap: 12px; padding: 16px; cursor: pointer; }
.vat-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.vat-toggle__box { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: var(--bw) solid var(--control); color: transparent; transition: background-color .2s, border-color .2s, color .2s; }
.vat-toggle input:checked + .vat-toggle__box { border-color: var(--brand); background: var(--brand); color: var(--white); }
.vat-toggle input:focus-visible + .vat-toggle__box { outline: 2px solid var(--brand); outline-offset: 2px; }
.vat-toggle strong { display: block; font-size: var(--fs-16); }
.vat-toggle small { display: block; font-size: var(--fs-13); color: var(--muted); }
.vat-box.is-on { border-color: var(--brand); }
.vat-box.is-on .vat-toggle { background: var(--surface); }
.vat-body { display: grid; gap: 12px; padding: 16px; border-top: 1px solid var(--line); }
.vat-type { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vat-type__opt { position: relative; }
.vat-type__opt input { position: absolute; opacity: 0; }
.vat-type__opt span { display: flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-md); border: 1px solid var(--control); font-weight: var(--fw-medium); cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.vat-type__opt input:checked + span { border-color: var(--brand); background: var(--surface); box-shadow: inset 0 0 0 1px var(--brand); color: var(--brand); }
.vat-type__opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.vat-copy { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); color: var(--ink-2); cursor: pointer; }
.vat-box .form-row { margin: 0 !important; }
.vat-warning { display: flex; gap: 10px; margin: 4px 0 0; padding: 12px 14px; background: #FFF7E8; font-size: var(--fs-14); line-height: 1.5; color: #7A4B00; }
.vat-warning .icon { margin-top: 2px; }
.vat-warning a { font-weight: var(--fw-medium); color: inherit; text-decoration: underline; }
.vat-summary { margin: 24px 0 0; padding: var(--pad); background: var(--surface); }
.vat-summary h2 { margin: 0 0 12px; font-size: var(--fs-h3); }
.vat-summary table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.vat-summary th, .vat-summary td { padding: 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.vat-summary th { width: 40%; font-weight: 500; color: var(--muted); }
.vat-summary__note { margin: 10px 0 0; font-size: var(--fs-13); color: var(--muted); }
/* Đăng nhập */
.woocommerce form.woocommerce-form-login, .woocommerce form.woocommerce-form-register, .woocommerce form.lost_reset_password { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px 20px; max-width: 760px; margin: 0 0 28px; padding: var(--pad-lg); border: 1px solid var(--line); background: var(--white); }
.woocommerce form.woocommerce-form-login > *, .woocommerce form.woocommerce-form-register > *, .woocommerce form.lost_reset_password > * { grid-column: 1 / -1; margin: 0; }
.woocommerce form.woocommerce-form-login > .form-row-first, .woocommerce form.woocommerce-form-login > .form-row-last { grid-column: auto; }
.woocommerce form.woocommerce-form-login > .clear { display: none; }
.woocommerce form.woocommerce-form-login > p:first-child:not(.form-row) { font-size: var(--fs-15); color: var(--ink-2); }
.woocommerce form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.woocommerce form.woocommerce-form-login .woocommerce-form-login__submit { order: -1; min-width: 160px; }
.woocommerce form .form-row label.woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: var(--fs-15); font-weight: 500; color: var(--ink-2); cursor: pointer; }
.woocommerce form .form-row label.woocommerce-form-login__rememberme input[type="checkbox"] { position: static; margin: 0; }
.woocommerce form.woocommerce-form-login .lost_password a { font-size: var(--fs-14); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* Đặt hàng thành công, chi tiết đơn */
.woocommerce-thankyou-order-received { margin: 0 0 20px; padding: var(--pad); border-left: 3px solid var(--leaf); background: var(--ok-bg); font-size: var(--fs-18); font-weight: var(--fw-medium); color: var(--ok-ink); }
.thankyou-next { display: block; margin-top: 8px; font-size: var(--fs-15); font-weight: 400; line-height: 1.5; color: var(--ink-2); }
.thankyou-next a { text-decoration: underline; text-underline-offset: 3px; }
.woocommerce ul.order_details, .woocommerce-order-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 24px; margin: 0 0 24px; padding: var(--pad); background: var(--surface); list-style: none; }
.woocommerce ul.order_details li { float: none; margin: 0; padding: 0; border: 0; font-size: var(--fs-13); text-transform: none; color: var(--muted); }
.woocommerce ul.order_details li strong { display: block; margin-top: 2px; font-size: var(--fs-15); color: var(--ink); }
.woocommerce-order-details, .woocommerce-customer-details { margin-top: var(--band); }
.woocommerce-customer-details address { padding: 16px 18px; border: 1px solid var(--line); font-style: normal; line-height: 1.6; }
/* 05/11 (HUONG-DAN 6.95): chữ khách tự gõ (tên, địa chỉ, ghi chú đơn) là một chuỗi dài không dấu cách thì xuống dòng trong khung, không đẩy cả trang rộng ra. "anywhere" chỉ ngắt khi một từ dài hơn khung, chữ thường không đổi. Bảng đơn chỉ đặt ở tfoot: cột tiền vẫn giữ độ rộng theo số tiền ở tbody. */
.woocommerce-customer-details address, .woocommerce-table--order-details tfoot td, .acc-addr address, .acc-hello h2 { overflow-wrap: anywhere; }
@media (min-width: 900px) { .woocommerce-order { max-width: 880px; } }
/* Tài khoản, tra cứu đơn */
.woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content { float: none; width: 100%; }
.woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; list-style: none; }
.woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; height: var(--h-sm); padding: 0 16px; border: 1px solid var(--control); font-size: var(--fs-14); font-weight: 500; }
.woocommerce-MyAccount-navigation .is-active a { border-color: var(--brand); background: var(--brand); color: var(--white); }
.lookup { display: grid; gap: 4px; margin: 8px 0 24px; padding: var(--pad-lg); background: var(--surface); }
.lookup .form-row { margin: 0 0 12px; }
.lookup label { display: block; margin-bottom: 6px; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink-2); }
.lookup .btn { justify-self: start; }
.lookup-result { padding: 20px 24px; border: 1px solid var(--line); }
.lookup-result__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: var(--fs-14); color: var(--muted); }
.lookup-status { padding: 4px 12px; background: var(--surface-2); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--brand); }
.lookup-status--cancelled, .lookup-status--failed { background: var(--err-bg); color: var(--err-ink); }
.lookup-result ul { margin: 0; padding: 0; list-style: none; }
.lookup-result li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); }
.lookup-result__line { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); color: var(--muted); }
.lookup-result__total { display: flex; justify-content: space-between; margin: 12px 0 4px; font-size: var(--fs-16); }
.lookup-result__pay { margin: 0; font-size: var(--fs-13); color: var(--muted); }
/* Thanh "Tổng cộng + Thanh toán / Đặt hàng" dính đáy (mọi màn hình, chỉ khi nút thật đã khuất) */
.pay-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 75; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px var(--gutter) calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .98); box-shadow: var(--shadow-up); }
.pay-bar__sum { display: grid; flex: none; line-height: 1.3; } /* 05/11: tổng tiền không co, nút co thay: trước đây số 7, 8 chữ số ở máy 320 chui dưới nút Thanh toán */
.pay-bar__label { font-size: var(--fs-13); color: var(--muted); }
.pay-bar__total { font-size: var(--fs-18); font-weight: var(--fw-strong); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-bar .btn { flex: 0 1 220px; height: 48px; }
html.has-pay-bar body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) {
  .pay-bar { justify-content: flex-end; gap: 24px; padding-inline: max(var(--gutter), calc((100vw - var(--content)) / 2)); }
  .pay-bar__sum { text-align: right; }
  .pay-bar .btn { flex: 0 0 240px; height: var(--h-lg); }
  html.has-pay-bar body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- 20. Trang nội dung: bài viết, chính sách, liên hệ, thương hiệu ----------
   Cột đọc 720px ĐẶT GIỮA; trang có lưới (liên hệ, thương hiệu) rộng 960px; giỏ / thanh toán / tài khoản rộng hết khung. */
.site-main.page { padding-top: 8px; } /* chỉ thẻ <main>: thân trang WordPress cũng có lớp "page" → trước đây đẩy cả trang xuống 8px,
                                         hở một vạch trắng TRÊN dải xanh ở trang chủ, liên hệ, giỏ hàng… (29/10) */
.article, .article-head, .article-next { width: 100%; max-width: var(--read); margin-inline: auto; }
/* Trang mà lưới là nội dung chính (Liên hệ, Thương hiệu): RỘNG HẾT KHUNG, thẳng mép trái với logo đầu trang như cửa hàng, giỏ hàng
   (30/10 anh Tùng duyệt ảnh 88a — trước đây khung 960 đặt giữa nên lệch vào trong 120px). Trang chính sách có khối liên hệ ở cuối
   vẫn là cột ĐỌC 720 (trước đây cả trang chính sách rộng 960 → dòng ~130 ký tự, khó đọc). */
.article:has(.entry-content > .contact-grid:nth-child(-n+2)), .article:has(.brand-list) { max-width: none; }
.article .article-head { max-width: none; }
.article-head { padding: 24px 0 var(--head-gap); }
.article > .breadcrumb + .article-head, .article .breadcrumb { padding-top: 0; }
.article-meta { margin: 8px 0 0; font-size: var(--fs-14); color: var(--muted); }
.article-media img { margin-bottom: 24px; }
.page--wide .article, .page--wide .article-head { max-width: none; }
.entry-content { line-height: 1.75; color: var(--ink-2); }
.entry-content > * + * { margin-top: 16px; }
.entry-content p { margin-bottom: 0; }
.entry-content h2 { margin-top: 40px; font-size: var(--fs-article-h2); color: var(--ink); }
.entry-content .empty-suggest h2 { font-size: var(--fs-h2); color: var(--brand); } /* 07/11 (đề xuất 2): Giỏ trống nằm trong entry-content, tiêu đề Gợi ý cho bạn cùng kiểu tiêu đề khu */
.entry-content h3:where(:not(.card__name)) { margin-top: 28px; font-size: var(--fs-h3); color: var(--ink); }
.entry-content > h2:first-child, .entry-content > h3:first-child { margin-top: 0; }
.entry-content ul:where(:not(.products)), .entry-content ol { padding-left: 1.3em; }
.entry-content li + li:where(:not(.product)) { margin-top: 6px; }
/* 30/10: :where(…) — kiểu chữ bài viết KHÔNG áp vào thẻ sản phẩm nằm trong nội dung trang (giỏ hàng trống "Gợi ý cho bạn"):
   trước đây tên / hãng / nút bị gạch chân, tên to 18px, nút chữ đen. Độ ưu tiên của các quy tắc giữ nguyên. */
.entry-content a:where(:not(ul.products a)) { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.entry-content a.btn { color: var(--white); text-decoration: none; }
.entry-content a.btn--ghost { color: var(--brand); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-15); }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.entry-content thead th { border-bottom: var(--bw) solid var(--ink); font-size: var(--fs-13); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.entry-content blockquote { margin-inline: 0; padding: 16px 20px; border-left: 3px solid var(--brand); background: var(--surface); }
.page--wide .entry-content { line-height: 1.6; color: var(--ink); }
.page--wide .entry-content > * + * { margin-top: 0; }
.page--wide .entry-content h2, .page--wide .entry-content h3:where(:not(.card__name)) { margin-top: 0; font-size: var(--fs-h3); }
.article-next { margin-top: var(--band); text-align: center; } /* 06/11 (H19): khối chỉ còn nút Xem tất cả sản phẩm, khối cuối trang đã mời nhắn shop */
/* Liên hệ */
.contact-grid { display: grid; gap: 16px; }
.contact-methods { display: grid; align-content: start; gap: 10px; }
.entry-content .contact-row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .25s; }
.entry-content .contact-row:hover { border-color: var(--brand); box-shadow: 0 14px 30px -22px rgba(14, 58, 46, .55); }
.contact-row--phone { --c: #16A34A; } .contact-row--zalo { --c: #0068FF; } .contact-row--mail { --c: var(--brand); }
.contact-row__icon { display: grid; place-items: center; flex: none; width: var(--icon-s); height: var(--icon-s); border-radius: 50%; background: var(--c); color: var(--white); }
.contact-row--messenger .contact-row__icon { background: linear-gradient(135deg, #0A7CFF, #A033FF 60%, #FF5280); }
.contact-row__icon b { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: -.03em; } /* 31/10 (ảnh 123): 12 → 13px */
.contact-row__text { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.contact-row__text strong { font-size: var(--fs-16); font-weight: var(--fw-medium); }
.contact-row__text small { font-size: var(--fs-14); color: var(--muted); }
.contact-row__go { color: var(--muted); }
.entry-content .contact-note { margin: 4px 0 0; font-size: var(--fs-14); color: var(--muted); }
.contact-store { padding: var(--pad-lg); background: var(--surface); }
.entry-content .contact-store h2 { margin: 0 0 14px; font-size: var(--fs-h3); }
.entry-content .contact-store ul { display: grid; gap: 12px; padding: 0; list-style: none; }
.entry-content .contact-store li { display: flex; gap: 10px; margin: 0; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.contact-store li .icon { margin-top: 3px; color: var(--brand); }
.contact-store small { display: block; font-size: var(--fs-14); color: var(--muted); } /* 31/10 (ảnh 123): 13,33 → 14px */
@media (min-width: 760px) { .contact-grid { grid-template-columns: 1.15fr 1fr; gap: 20px; } }
/* Thương hiệu */
.brand-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 !important; list-style: none; }
.brand-list li + li { margin: 0 !important; }
.brand-list a { display: grid; justify-items: center; gap: 10px; border: 1px solid var(--line); background: var(--white); text-align: center; text-decoration: none !important; transition: border-color .2s; }
.brand-list a:hover { border-color: var(--brand); }
.brand-list__logo { display: flex; align-items: center; justify-content: center; width: 100%; }
.brand-list__logo .brand-logo { display: block; width: auto; max-width: 100%; object-fit: contain; }
.brand-list .brand-list__name { font-size: var(--fs-15); font-weight: var(--fw-medium); letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; color: var(--ink); }
@media (min-width: 640px) { .brand-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .brand-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }

/* ---------- 21. Tin tức & Cẩm nang ---------- */
.post-grid { display: grid; gap: 12px; list-style: none; }
.post-card { display: flex; flex-direction: column; gap: 10px; height: 100%; padding: var(--pad); border: 1px solid var(--line); background: var(--white); transition: border-color .2s, box-shadow .25s var(--ease); }
.post-card:hover { border-color: var(--brand); box-shadow: 0 18px 34px -26px rgba(14, 58, 46, .6); }
.post-card__media { display: block; overflow: hidden; }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-card__icon { display: grid; place-items: center; width: var(--icon-l); height: var(--icon-l); background: var(--surface); color: var(--brand); }
.post-card__title { font-size: var(--fs-18); font-weight: var(--fw-medium); line-height: 1.4; color: var(--ink); }
.post-card__excerpt { display: -webkit-box; flex: 1; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2); }
.post-card__meta { font-size: var(--fs-13); color: var(--muted); }
.post-card .link-arrow { align-self: flex-start; font-weight: var(--fw-regular); } /* "Đọc bài" lặp ở mỗi thẻ: chữ thường, tiêu đề bài mới là chỗ đậm */
/* Điện thoại: biểu tượng S cạnh TIÊU ĐỀ, tóm tắt trải hết bề ngang thẻ, 2 dòng
   (trước đây biểu tượng chiếm cả cột trái suốt chiều cao thẻ → chữ bị ép còn 260px, tóm tắt 4 dòng). */
@media (max-width: 639px) {
  .post-card:not(:has(.post-card__media)) { display: grid; grid-template-columns: var(--icon-s) minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; }
  .post-card:not(:has(.post-card__media)) > * { grid-column: 1 / -1; }
  .post-card:not(:has(.post-card__media)) > .post-card__icon { grid-column: 1; grid-row: 1; width: var(--icon-s); height: var(--icon-s); }
  .post-card:not(:has(.post-card__media)) > .post-card__title { grid-column: 2; grid-row: 1; }
  .post-card__icon .icon { width: 20px !important; height: 20px !important; }
  .post-card__excerpt { -webkit-line-clamp: 2; }
  .post-card .link-arrow { display: none; }
}
@media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
/* "Bài viết khác": dải đủ khung 1200 như mọi dải (trước đây 960 — lệch cả cột đọc 720 lẫn khung 1200), tiêu đề khối chuẩn */
.article-more { width: 100%; margin: var(--band) 0 0; }
.article-more .post-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .article-more .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-more .post-card__excerpt { display: none; } }

/* ---------- 22. Về chúng tôi ---------- */
.about-hero { padding-top: var(--top-gap); }
.about-hero__grid { display: grid; gap: 16px; }
.about-hero__copy { padding: var(--pad-lg); background: var(--surface); }
.about-hero__copy h1 { font-size: var(--fs-h1); line-height: 1.25; text-wrap: balance; }
.about-hero__lead { max-width: 62ch; margin-top: 14px; line-height: 1.7; color: var(--ink-2); }
.about-hero__lead > * + * { margin-top: 10px; }
.about-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; list-style: none; }
.about-hero__facts li { display: inline-flex; align-items: center; gap: 8px; min-height: var(--h-sm); padding: 4px 16px 4px 12px; border: 1px solid var(--line); background: var(--white); font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1.3; }
.about-hero__facts .icon { color: var(--brand-2); }
.about-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
/* Điện thoại: 4 nhãn 2×2 (trước đây 4 hàng dọc), nút tràn ngang như mọi trang → khối đầu ngắn đi gần nửa */
@media (max-width: 639px) {
  .about-hero__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-hero__facts li { padding: 6px 10px; font-size: var(--fs-13); }
  .about-hero__actions .btn { flex: 1 1 100%; }
}
.about-card { padding: var(--pad-lg); border: 1px solid var(--line); background: var(--white); }
.about-card h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: var(--fs-14); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; }
.about-card h2 .icon { color: var(--brand-2); }
.about-card dl { margin: 0; }
.about-card dl > div { display: grid; gap: 2px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.about-card dl > div:last-child { border-bottom: 0; }
.about-card dt { font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--muted); }
.about-card dd { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-15); font-weight: 400; line-height: 1.5; }
.about-card dd a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.about-body { display: grid; }
.about-sec { display: grid; gap: 12px; padding-top: var(--band); }
.about-sec + .about-sec { margin-top: var(--band); border-top: 1px solid var(--line); }
.about-sec h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-h3); line-height: 1.3; }
.about-sec__icon { display: grid; place-items: center; flex: none; width: var(--icon-s); height: var(--icon-s); background: var(--surface); color: var(--brand); }
.about-sec__body { font-size: var(--fs-16); line-height: 1.75; color: var(--ink-2); }
.about-sec__body > p { max-width: 68ch; }
.about-sec__body ul { padding-left: 0; list-style: none; }
.about-sec__body ul > li { position: relative; padding-left: 22px; }
.about-sec__body ul > li::before { content: ""; position: absolute; left: 3px; top: .7em; width: 8px; height: 8px; background: var(--leaf); }
.about-sec__body li + li { margin-top: 8px; }
.about-todo { padding: 1px 6px; background: #FFF4CC; font-weight: var(--fw-medium); color: #6B4E00; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.about-sec__body ul.about-points { display: grid; gap: 10px; margin: 18px 0 0; }
.about-sec__body ul.about-points > li { margin: 0; padding: 15px 18px 15px 54px; border: 1px solid var(--line); background: var(--white); font-size: var(--fs-15); line-height: 1.6; color: var(--ink); }
.about-sec__body ul.about-points > li::before { left: 16px; top: 15px; width: 26px; height: 26px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23155540' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.about-sec__body ol.about-steps { counter-reset: step; display: grid; max-width: 760px; margin: 20px 0 0; padding: 0; list-style: none; }
.about-sec__body ol.about-steps > li { position: relative; margin: 0; padding: 0 0 26px 58px; font-size: var(--fs-15); line-height: 1.65; counter-increment: step; }
.about-sec__body ol.about-steps > li:last-child { padding-bottom: 0; }
.about-sec__body ol.about-steps > li::before { content: counter(step); position: absolute; left: 0; top: -4px; display: grid; place-items: center; width: var(--icon-s); height: var(--icon-s); background: var(--brand); font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1; color: var(--white); }
.about-sec__body ol.about-steps > li:not(:last-child)::after { content: ""; position: absolute; left: 18.5px; top: 40px; bottom: 2px; width: 1px; background: var(--line); }
.about-sec__body ol.about-steps > li > strong:first-child { display: block; margin-bottom: 2px; font-size: var(--fs-16); color: var(--ink); }
.about-sec__body ul.about-links { display: grid; gap: 10px; margin: 18px 0 0; }
.about-sec__body ul.about-links > li { margin: 0; padding: 0; }
.about-sec__body ul.about-links > li::before { content: none; }
.about-sec__body ul.about-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 18px; border: 1px solid var(--line); background: var(--white); font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.4; color: var(--ink); text-decoration: none; transition: border-color .2s; }
.about-sec__body ul.about-links a::after { content: "→"; flex: none; color: var(--brand-2); transition: transform .2s; }
.about-sec__body ul.about-links a:hover { border-color: var(--brand); }
.about-sec__body ul.about-links a:hover::after { transform: translateX(3px); }
.about-proofs { display: grid; gap: 10px; list-style: none; }
.about-proofs li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--line); }
.about-proofs span { font-size: var(--fs-14); color: var(--muted); }
.about-proofs a { justify-self: start; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) { .about-sec { grid-template-columns: 280px minmax(0, 1fr); gap: 32px; } .about-sec h2 { align-self: start; } }
@media (min-width: 900px) { .about-sec__body ul.about-points, .about-sec__body ul.about-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .about-hero__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
  .about-hero__copy { display: flex; flex-direction: column; justify-content: center; padding: 40px 48px; }
  .about-hero__copy h1 { font-size: var(--fs-display); font-weight: 400; }
  .about-sec h2 { position: sticky; top: calc(var(--admin-h) + var(--strip-h) + var(--header-h) + 24px); }
}

/* ---------- 23. Chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-news__viewport, .hero-news .hero-news__viewport { overflow-y: auto; -webkit-mask-image: none; mask-image: none; }
  .hero-news__list[aria-hidden="true"], .hero-guide__list[aria-hidden="true"] { display: none; }
}

/* Số lượng trong dòng giỏ hàng: điều khiển S (40) ở mọi cỡ màn hình */
.woocommerce-cart-form .qty-stepper { height: var(--h-sm); }
.woocommerce-cart-form .qty-btn:hover { background-size: 36px calc(var(--h-sm) - 2px); }
.woocommerce-cart-form a.remove { margin: -2px; } /* 05/11: vùng bấm 44 x 44, dòng sản phẩm giữ nguyên */

/* Ký hiệu trong ô biểu tượng: một cỡ cho mỗi loại ô — S 40 → ký hiệu 20 · L 48 → ký hiệu 24 (luôn 1/2 ô) */
.assure26__icon .icon, .pdp-services__icon .icon, .pdp-sec__icon .icon, .about-sec__icon .icon, .contact-row__icon .icon, .dock__ico .icon { width: 20px; height: 20px; }
.hero-news__thumb .icon, .post-card__icon .icon, .cta-card__icon .icon { width: 24px; height: 24px; }

/* ===== 29/10 rà soát UI/UX — anh Tùng duyệt mẫu 83 + 84 ===== */
/* Trang Tài khoản: WooCommerce không tải CSS riêng → nút "Hiển thị mật khẩu" bị thành vạch 16×6px. Nay là biểu tượng con mắt
   trong ô (vùng bấm 48×48), bấm đổi mắt gạch. Hộp "Mua không cần tài khoản?" cách tiêu đề Đăng nhập 32px.
   Máy tính (≥900px): Đăng nhập | Đăng ký thành 2 cột. */
.password-input { position: relative; display: block; }
.password-input input { padding-right: 52px; }
.show-password-input { position: absolute; top: 0; right: 0; bottom: 0; width: 48px; height: auto; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent center / 22px 22px no-repeat url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2344403C%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%223%22/%3E%3C/svg%3E"); cursor: pointer; }
.show-password-input.display-password { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2344403C%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3l18 18%22/%3E%3Cpath d=%22M10.6 5.1A10.9 10.9 0 0 1 12 5c6.4 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2C3.6 8 2 12 2 12s3.6 7 10 7a10.4 10.4 0 0 0 5.8-1.8%22/%3E%3Cpath d=%22M9.9 9.9a3 3 0 0 0 4.2 4.2%22/%3E%3C/svg%3E"); }
.show-password-input:focus-visible { outline: 2px solid var(--brand); outline-offset: -6px; }
@media (min-width: 900px) { #customer_login { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; } #customer_login > .u-column1, #customer_login > .u-column2 { float: none; width: auto; max-width: none; margin: 0; display: flex; flex-direction: column; } }
/* Ô tìm kiếm trên điện thoại: tấm nền trắng phủ ngang màn che tiêu đề trang phía dưới; bỏ viền thứ 2 của ô chữ khi đang gõ. */
form.search .search-input:focus, form.search .search-input:focus-visible { box-shadow: none; outline: none; }
@media (max-width: 1023px) {
  .site-header.is-searching::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--h-md) + 24px); background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 14px 24px -18px rgba(28, 25, 23, .45); z-index: 1; pointer-events: none; }
  .site-header.is-searching form.search { top: calc(100% + 12px); z-index: 2; box-shadow: none; }
}
/* Số trên biểu tượng giỏ hàng: 11px → 13px (mức nhỏ nhất của web). */
/* Cuối bài Cẩm nang: "Sản phẩm · Liên quan đến bài viết" (ảnh 86) — thẻ như cửa hàng, rộng bằng khung trang. */
.article-products { width: 100%; margin: var(--band) 0 0; }
.article-products .section-head { margin-bottom: 24px; }
.article-products__note { margin: 24px 0 0; font-size: var(--fs-14); color: var(--muted); }

/* ===== 30/10 rà soát cân đối + khoảng trống — anh Tùng duyệt ảnh 87a–d, 88a–d ===== */
/* A. Trang chủ điện thoại, "Sản phẩm nổi bật" trượt tràn mép: nút "Thêm vào giỏ hàng" chừa 10px mỗi bên (thẳng chữ trong thẻ),
   trước đây 2 nút dính nhau và dính sát mép màn hình. */
@media (max-width: 639px) { .pslider .card__add { width: calc(100% - 20px); margin-inline: 10px; } }
/* G. Giỏ hàng: cột chữ của "Tóm tắt đơn hàng" theo nội dung → "Giao hàng tiêu chuẩn" 1 dòng (trước đây cột 40% → gãy 2 dòng). */
.cart_totals .ship-method { white-space: nowrap; }
/* R. Cuối bài Cẩm nang trên điện thoại: "Xem tất cả" xuống cuối khối như trang chủ (trước đây kẹt giữa tiêu đề và danh sách). */
@media (max-width: 639px) {
  .article-products, .article-more { display: flex; flex-direction: column; }
  .article-products__note { order: 3; }
}
/* F. Thanh toán: ô ghi chú cách hộp VAT 24px (30/10: không còn "Tạo tài khoản", bỏ tiêu đề "Thông tin bổ sung" — 1 tiêu đề cho 1 ô);
   điện thoại: tiêu đề "Đơn hàng của bạn" sát hộp đơn hàng 16px (trước đây lơ lửng 40px). */
.woocommerce-checkout .woocommerce-additional-fields { margin-top: 24px; }
.woocommerce-checkout .woocommerce-additional-fields > h3 { display: none; }
@media (max-width: 899px) { #order_review_heading { margin: 0 0 -8px; } }
/* K. Trang sản phẩm: bỏ vạch cuối bảng Thông số (trùng vạch chia mục ngay bên dưới). */
.entry-content .shop_attributes tr:last-child > * { border-bottom: 0; }
/* D. Trang Thương hiệu: rộng hết khung; máy tính 6 cột; ô thứ 12 "Tất cả sản phẩm"; logo theo cỡ đã cân (brand-logo.php). */
.brand-list a { padding: 20px 14px; } /* 06/11 (V12): bỏ dòng đếm, đệm trên dưới bằng nhau để logo nằm giữa thẻ */
.brand-list__logo { height: 56px; }
.brand-list__logo .brand-logo { height: calc(var(--h) * 1px); }
@media (min-width: 1200px) { .brand-list { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.brand-list__all a { border-color: var(--surface); background: var(--surface); }
.brand-list__all a:hover { border-color: var(--brand); }
.brand-list .brand-list__all .brand-list__name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-16); letter-spacing: 0; text-transform: none; color: var(--brand); }
/* H. Trang chủ, dải Thương hiệu: hàng cuối thiếu ô thì CĂN GIỮA (trước đây lệch trái); logo theo cỡ đã cân. */
.brands26__row { display: flex; flex-wrap: wrap; justify-content: center; }
.brands26__row > li { flex: 0 0 calc((100% - 8px) / 3); min-width: 0; } /* min-width 0: tên dài (MEDIPHAR USA) không đẩy ô to ra làm hàng còn 2 */
.brands26__item .brand-logo { height: calc(var(--h) * .7px); }
@media (min-width: 640px) {
  .brands26__row > li { flex-basis: calc((100% - 24px) / 4); }
  .brands26__item .brand-logo { height: calc(var(--h) * .82px); }
}
@media (min-width: 1024px) {
  .brands26__row > li { flex-basis: calc((100% - 80px) / 6); }
  }
.catalog-head .catalog-head__logo { height: calc(var(--h) * 1.25px); }
/* E. Trang Liên hệ: rộng hết khung, máy tính 2 cột bằng nhau; địa chỉ không để 1 chữ rơi xuống dòng cuối;
   M. email xuống dòng ở trước "@" (catalog.php) chứ không gãy "gmail. / com". */
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } }
.contact-row__text small { overflow-wrap: break-word; }
/* I. Về chúng tôi (máy tính): 4 nhãn 2×2 (trước đây 3+1); ô cam kết lẻ cuối cùng trải hết 2 cột. */
@media (min-width: 640px) { .about-hero__facts { display: grid; grid-template-columns: repeat(2, max-content); } }
@media (min-width: 900px) { .about-sec__body ul.about-points > li:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* J. Chân trang: "Thanh toán: khi nhận hàng (COD)" nằm bên phải dòng ©. */
@media (min-width: 640px) { .footer-bottom__row { justify-content: space-between; } }
/* L. Chân trang luôn nằm sát đáy màn hình ở trang ngắn (404, tìm không thấy…) — không còn dải trắng dưới chân trang. */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > .site-main { flex: 1 0 auto; }
.empty-suggest .cat-grid { margin: 0; }

/* ===== 30/10 (07h30) theo mẫu 93a–c, 94a–b anh Tùng duyệt ("Sửa đi") ===== */
/* Trang sản phẩm: đường dẫn ở đầu trang (trên ảnh + cột mua), như mọi trang khác. */
.pdp-crumbs { padding: 8px 0 16px; }
@media (min-width: 900px) { .pdp-crumbs { padding: 12px 0 20px; } }
/* Banner máy tính (ảnh 94a): nút MUA NGAY cỡ L 48px — trước đây 30–36px, bé hơn cả giá 32px cạnh nó. Điện thoại giữ 36px. */
@media (min-width: 640px) { .hero-slide__cta .btn { height: var(--h-lg); padding: 0 32px; font-size: var(--fs-14); letter-spacing: .08em; } }
/* Quy cách: liên kết "Xóa" của WooCommerce luôn hiện dù đã chọn sẵn → ẩn (bấm quy cách khác là đổi). */
.reset_variations { display: none !important; }
/* Thẻ sản phẩm máy tính: tên 16px, giá 18px. 04/11 anh Tùng, ảnh 138 (phương án B): ảnh rộng hết cột (trước 240px), nút gọn 208px thay nút rộng hết thẻ của ảnh 94a. */
@media (min-width: 1024px) {
  .card__name { font-size: var(--fs-16); line-height: 1.4; }
  .card__price { font-size: var(--fs-18); }
}
/* Trang chủ điện thoại: 1 nút "Tất cả sản phẩm" (sau danh mục) — không lặp sau Sản phẩm nổi bật. */
@media (max-width: 639px) { .rail-section .section-head > .link-arrow { display: none; } }
/* Dải thương hiệu máy tính: logo to hơn 25%, rõ hơn (trước đây 15–25px, mờ 72%). */
@media (min-width: 1024px) {
  .brands26__item .brand-logo { height: calc(var(--h) * 1.15px); opacity: .9; }
  .brands26__name { font-size: var(--fs-15); letter-spacing: .14em; color: var(--ink-2); }
}
/* Chân trang điện thoại: chữ liên kết 16px như chữ đọc (trước 18–20px, to hơn nội dung trang). */
@media (max-width: 639px) {
  .site-footer ul a, .site-footer .footer-info li, .site-footer p { font-size: var(--fs-16); }
}

/* ===== 30/10 (09h) MÃ GIẢM GIÁ — anh Tùng: giữ ô mã ở trang sản phẩm (shop phát nhiều mã riêng);
   đã nhập mã ở 1 chỗ thì các chỗ khác không hiện ô nhập nữa (offers.php: vcr_codes_in_use) ===== */
/* Trang sản phẩm: mã nhập ở chỗ khác → ẩn ô nhập + danh sách; dòng "Mã …: giảm …  Bỏ mã" vào đúng chỗ ô nhập, cạnh ô số lượng */
.pdp-coupon.is-locked .pdp-coupon__form, .pdp-coupon.is-locked .pdp-coupon__list, .pdp-coupon.is-locked .pdp-coupon__error { display: none; }
.woocommerce div.product form.cart .pdp-coupon.is-locked .pdp-coupon__result { grid-area: coupon; align-items: center; min-height: var(--h-md); margin-top: 0; padding-block: 6px; }
/* 11h: điện thoại — dòng mã xuống 2 dòng vẫn cao đúng 48px như ô số lượng (trước 53px, lệch đáy 5px) */
.woocommerce div.product form.cart .pdp-coupon.is-locked .pdp-coupon__msg { line-height: 1.25; }
/* Ngăn giỏ / giỏ / thanh toán: mã đã nhập mà đơn chưa đủ điều kiện → chỉ 1 dòng vàng (không khung, không ô nhập) */
.coupon-box[data-pending] { padding: 0; border: 0; background: none; }
.coupon-applied.is-pending { align-items: flex-start; background: var(--warn-bg); color: var(--warn-ink); }
.coupon-applied.is-pending > span { flex: 1 1 auto; min-width: 0; align-items: flex-start; }
.coupon-applied.is-pending > span > svg { flex: none; margin-top: 2px; }
.coupon-applied .coupon-applied__text { display: block; line-height: 1.45; }
.coupon-applied.is-pending button { flex: none; color: inherit; }

/* ===== 30/10 (12h30) NÚT TÀI KHOẢN — anh Tùng duyệt ảnh 97a–b (header.php) =====
   Điện thoại: nút Tài khoản ở CẢ 2 chỗ (cạnh nút menu + cạnh giỏ hàng — anh chọn). Máy tính: biểu tượng + chữ
   "Tài khoản", "Giỏ hàng" dưới biểu tượng. Menu điện thoại: mục "TÀI KHOẢN" cùng kiểu mục "SẢN PHẨM". */
.header-start { justify-self: start; display: flex; align-items: center; gap: 4px; margin-left: -8px; }
.header-start .header-menu { margin-left: 0; }
/* chữ dưới biểu tượng: điện thoại ẩn (vẫn đọc được bằng trình đọc màn hình), máy tính hiện */
.header-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* máy nhỏ 360px: 3 nút bên phải thu lại để logo vẫn đúng giữa */
@media (max-width: 380px) {
  .header-actions { gap: 0; }
  .header-actions .icon-btn, .header-start .icon-btn { width: 34px; }
}
@media (min-width: 1100px) {
  .header-start { display: none; }
  .header-actions .header-account { margin-left: 8px; }
}
/* chữ dưới biểu tượng chỉ từ 1280px: máy tính nhỏ 1100–1279px không đủ chỗ (logo bị bóp) → chỉ biểu tượng, cách đều */
@media (min-width: 1280px) {
  .header-actions .header-account, .header-actions .header-cart { width: auto; min-width: 64px; height: var(--h-md); padding: 0 6px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
  .header-actions .header-account { margin-left: 12px; }
  .header-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; font-size: var(--fs-13); line-height: 1; color: var(--ink-2); }
  .header-cart .cart-count { top: -2px; right: 8px; }
}
.sheet__list--account a { justify-content: flex-start; gap: 12px; }
.sheet__list--account a .icon:first-child { flex: none; color: var(--brand); }
.sheet__list--account a .icon:last-child { margin-left: auto; color: var(--muted); }

/* ===== 30/10 (13h) TRANG TÀI KHOẢN — cân đối 2 thẻ Đăng nhập | Đăng ký (anh Tùng: "nhìn mất cân đối quá"; duyệt ảnh 99, bản B)
   2 thẻ cao bằng nhau, cùng 1 khung: 2 ô nhập → 1 hàng ô tích cao 48px → nút đầy bề rộng, 2 nút trên cùng 1 đường ngang. */
#customer_login form.woocommerce-form-login, #customer_login form.woocommerce-form-register { grid-template-columns: minmax(0, 1fr) auto; align-content: start; max-width: none; margin: 0; }
#customer_login form > wc-order-attribution-inputs { display: none; }
/* điện thoại: 2 thẻ xếp chồng — giữ khoảng cách giữa thẻ Đăng nhập và tiêu đề Đăng ký */
@media (max-width: 899px) { #customer_login > .u-column1 { margin-bottom: 32px; } }
@media (min-width: 900px) {
      #customer_login > div > form { flex: 1 1 auto; }
}
/* Đăng nhập: "☐ Ghi nhớ mật khẩu ……… Quên mật khẩu?" chung 1 hàng; nút Đăng nhập xuống dưới, đầy bề rộng */
#customer_login form.woocommerce-form-login .form-row:has(.woocommerce-form-login__rememberme),
#customer_login form.woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) { display: contents; } /* 04/11: nút Đăng nhập ở dòng riêng trong mã (thứ tự Tab), hình ảnh như cũ */
#customer_login .woocommerce-form-login__rememberme { grid-column: 1; min-height: 48px; align-items: flex-start; }
#customer_login .woocommerce-form-login__rememberme input[type="checkbox"] { margin-top: 1px; }
#customer_login form.woocommerce-form-login .lost_password { grid-column: 2; align-self: start; line-height: 1.5; }
#customer_login .woocommerce-form-login__submit, #customer_login form.woocommerce-form-register > .form-row:last-child { order: 1; grid-column: 1 / -1; }
#customer_login .woocommerce-form-login__submit, #customer_login .woocommerce-form-register__submit { width: 100%; min-width: 0; }
/* Đăng ký: ô đồng ý bỏ khung (giống "Ghi nhớ mật khẩu"), cao 48px — chữ đồng ý giữ nguyên */
#customer_login .woocommerce-form-register .vc-consent { min-height: 48px; align-items: flex-start; padding: 0; border: 0; background: none; }
#customer_login .woocommerce-form-register .vc-consent input[type="checkbox"] { margin: 1px 0 0; }
#customer_login .woocommerce-form-register .vc-consent.has-error { padding: 10px 12px; border: 2px solid #B91C1C; }

/* ===== 31/10 ĐÁNH GIÁ THẬT (inc/reviews.php) — chỉ khách đã nhận hàng viết được, shop duyệt trước khi hiện.
   Sao màu hổ phách --star (3,5:1 trên nền trắng — đủ thấy cho hình, không phải chữ); sao rỗng màu viền xám.
   Không có đánh giá nào: không hiện sao ở cột mua, khối dưới chỉ có lời giải thích + cách viết. */
.stars { --size: 16px; display: inline-block; flex: none; width: calc(var(--size) * 5); height: var(--size); vertical-align: -2px;
  background: linear-gradient(90deg, var(--star) var(--rate, 0%), var(--line-2) var(--rate, 0%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.9 6.4.8-4.7 4.4 1.2 6.4L12 17.2l-5.7 3.1 1.2-6.4-4.7-4.4 6.4-.8z'/%3E%3C/svg%3E") 0 0 / var(--size) var(--size) repeat-x; }
.stars--lg { --size: 22px; }
/* dưới tên sản phẩm (chỉ khi có ít nhất 1 đánh giá đã duyệt) */
.pdp-rating-row { margin-top: 6px; }
.pdp-rating { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; font-size: var(--fs-14); color: var(--ink-2); }
.pdp-rating__avg { font-weight: var(--fw-medium); color: var(--ink); }
.pdp-rating:hover .pdp-rating__count { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
/* khối Đánh giá — sau Thông tin sản phẩm, trước "Có thể bạn quan tâm" */
.pdp-reviews { margin-top: var(--band); padding-top: var(--band); border-top: 1px solid var(--line); }
.pdp-reviews > h2 { margin: 0 0 var(--head-gap); }
.rv-summary, .rv-empty { display: grid; gap: 6px; justify-items: start; padding: 20px; background: var(--surface); }
.rv-summary__score { margin: 0; line-height: 1; }
.rv-summary__avg { font-size: 2.5rem; font-weight: var(--fw-medium); letter-spacing: -.02em; color: var(--ink); }
.rv-summary__of { margin-left: 4px; font-size: var(--fs-16); color: var(--muted); }
.rv-summary__count { margin: 0; font-size: var(--fs-14); color: var(--muted); }
.rv-bars { display: grid; gap: 6px; width: 100%; margin: 10px 0 0; padding: 0; list-style: none; }
.rv-bars li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: var(--fs-13); color: var(--ink-2); }
.rv-bars__track { height: 8px; background: var(--white); }
.rv-bars__track > span { display: block; height: 100%; background: var(--star); }
.rv-bars__num { text-align: right; color: var(--muted); }
.rv-empty__title { margin: 6px 0 0; font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--ink); }
.rv-trust { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: var(--fs-14); line-height: 1.55; color: var(--ink-2); }
.rv-trust .icon { flex: none; margin-top: 1px; color: var(--brand); }
.rv-box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; padding: 16px; border: 1px solid var(--line); font-size: var(--fs-15); line-height: 1.5; color: var(--ink-2); }
.rv-box p { flex: 1 1 220px; margin: 0; }
.rv-box .btn { flex: 0 1 auto; max-width: 100%; height: auto; min-height: var(--h-md); padding-block: 6px; line-height: 1.25; text-align: center; white-space: normal; } /* 06/11 (kiểm tổng): chữ phóng to thì nút xuống dòng, không đẩy tràn trang */
.rv-box--ok { flex-wrap: nowrap; align-items: flex-start; gap: 10px; border-width: 0 0 0 3px; border-color: var(--brand); background: var(--surface); }
.rv-box--ok .icon { flex: none; margin-top: 2px; color: var(--brand); }
.rv-box--admin { border-color: transparent; background: var(--warn-bg); color: var(--warn-ink); }
.rv-form { display: grid; gap: 16px; margin-top: 16px; padding: 20px; border: 1px solid var(--line); }
.rv-form__title { margin: 0; font-size: var(--fs-18); font-weight: var(--fw-medium); line-height: 1.3; }
.rv-rate { min-width: 0; margin: 0; padding: 0; border: 0; }
.rv-rate legend { margin-bottom: 4px; padding: 0; font-size: var(--fs-14); color: var(--ink-2); }
.rv-rate__stars { display: flex; margin-left: -6px; }
.rv-rate__stars label { display: grid; place-items: center; width: 44px; height: 44px; color: var(--line-2); cursor: pointer; transition: color .15s; }
.rv-rate__stars svg { fill: currentColor; transition: transform .15s var(--ease); }
.rv-rate__stars label:hover svg { transform: scale(1.1); }
.rv-rate__stars input:checked + label { color: var(--star); }
.rv-rate__stars:has(input[value="2"]:checked) label:nth-of-type(-n+2),
.rv-rate__stars:has(input[value="3"]:checked) label:nth-of-type(-n+3),
.rv-rate__stars:has(input[value="4"]:checked) label:nth-of-type(-n+4),
.rv-rate__stars:has(input[value="5"]:checked) label:nth-of-type(-n+5) { color: var(--star); }
.rv-rate__stars input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: -2px; }
.rv-rate__word { margin: 2px 0 0; font-size: var(--fs-14); color: var(--muted); }
.rv-rate__word.is-set { font-weight: var(--fw-medium); color: var(--ink); }
.rv-form__row { display: grid; gap: 6px; margin: 0; }
.rv-form__row label { font-size: var(--fs-14); color: var(--ink-2); }
.rv-form__note { margin: 0; font-size: var(--fs-13); line-height: 1.55; color: var(--muted); }
.rv-form .btn { width: 100%; }
.pdp-reviews__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } /* điện thoại: điểm tổng → đánh giá → cách viết */
.rv { padding: 20px 0; border-bottom: 1px solid var(--line); }
.pdp-reviews__list > .rv:first-child { padding-top: 0; }
.rv__head { display: flex; align-items: center; gap: 12px; }
.rv__avatar { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--surface); font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--brand); }
.rv__name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin: 0; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--ink); }
.rv__verified { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--brand); }
.rv__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0 0; font-size: var(--fs-13); color: var(--muted); }
.rv__stars { display: inline-flex; }
.rv__text { margin-top: 12px; font-size: var(--fs-15); line-height: 1.65; color: var(--ink-2); overflow-wrap: anywhere; }
.rv__text p, .rv-reply p { margin: 0; }
.rv__text p + p, .rv-reply p + p { margin-top: 8px; }
.rv-reply { margin-top: 14px; padding: 12px 14px; border-left: 3px solid var(--brand); background: var(--surface); font-size: var(--fs-14); line-height: 1.6; color: var(--ink-2); }
.rv-reply__name { display: flex; align-items: center; gap: 6px; margin-bottom: 4px !important; font-weight: var(--fw-medium); color: var(--ink); }
.rv-more > summary { margin-top: 20px; list-style: none; cursor: pointer; }
.rv-more > summary::-webkit-details-marker { display: none; }
.rv-more[open] > summary { display: none; }
.rv-ask { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-14); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 640px) {
  .rv__text, .rv-reply { margin-left: 52px; }
  .rv-form .btn { justify-self: start; width: auto; min-width: 220px; }
}
@media (min-width: 900px) {
  .pdp-reviews__grid { grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "sum list" "aside list"; align-items: start; gap: 16px 56px; }
  .pdp-reviews__sum { grid-area: sum; }
  .pdp-reviews__list { grid-area: list; }
  .pdp-reviews__aside { grid-area: aside; }
  .pdp-reviews--empty .pdp-reviews__grid { grid-template-columns: minmax(0, 640px); grid-template-rows: auto; grid-template-areas: "sum" "aside"; }
}
@media (min-width: 1024px) {
  /* 04/11 anh Tùng, ảnh 143: chưa có đánh giá thì 2 cột bằng nhau, hết trống nửa phải */
  .pdp-reviews--empty .pdp-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sum aside"; column-gap: 48px; align-items: stretch; }
  .pdp-reviews--empty .rv-empty { height: 100%; align-content: center; }
}
@media (prefers-reduced-motion: reduce) { .rv-rate__stars label, .rv-rate__stars svg { transition: none; } }

/* ---------- 24. Popup chọn quy cách (31/10, anh Tùng duyệt ảnh 124; inc/quick-view.php, v3.js) ----------
   Điện thoại: tấm trượt lên từ đáy (ảnh 96 cạnh tên, giá; dưới là quy cách, số lượng + nút). Từ 768px: hộp giữa màn hình
   rộng 760, ảnh 300 bên trái. Nút quy cách dùng chung kiểu .pill của trang sản phẩm; số lượng và nút cao 48 (cỡ L). */
html.has-qv { overflow: hidden; }
dialog.qv { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 88vh; max-height: 88dvh; margin: 0; padding: 0; overflow: auto; border: 0; background: var(--white); color: var(--ink); box-shadow: 0 -12px 32px rgba(28, 25, 23, .18); }
dialog.qv:not([open]) { display: none; }
dialog.qv::backdrop { background: rgba(28, 25, 23, .45); }
.qv__in { position: relative; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); }
.qv__close { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; font-size: 32px; line-height: 1; color: var(--ink-2); cursor: pointer; } /* 05/11: vùng bấm 44 x 44, dấu x rõ hơn */
.qv__close:hover { background: var(--surface); color: var(--ink); }
.qv__layout { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "media head" "rest rest"; column-gap: 16px; align-items: center; }
.qv__media { grid-area: media; display: grid; place-items: center; width: 96px; height: 96px; }
.qv__media img { width: 100%; height: 100%; object-fit: contain; }
.qv__head { grid-area: head; min-width: 0; padding-right: 32px; }
.qv__rest { grid-area: rest; min-width: 0; }
.qv__brand { margin: 0 0 2px; font-size: var(--fs-13); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.qv__name { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 1.4; text-wrap: balance; }
.qv__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 6px 0 0; font-size: var(--fs-20); font-weight: var(--fw-strong); }
.qv__price del { font-size: var(--fs-14); font-weight: 400; color: var(--muted); }
.qv__price ins { text-decoration: none; }
.qv__label { margin: 20px 0 8px; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.qv__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 8px; margin-top: 20px; }
.qv__qty { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; height: var(--h-md); border: 1px solid var(--control); }
.qv__qty button { position: relative; z-index: 1; width: 44px; margin: 0 -2px; padding: 0; border: 0; background: none; font-size: 20px; line-height: 1; color: var(--ink); cursor: pointer; } /* 05/11: vùng bấm 44 x 44, khung giữ nguyên nhờ lề âm */
.qv__qty button:hover { background: linear-gradient(var(--surface), var(--surface)) center / 40px 100% no-repeat; }
.qv__qty input { width: 100%; min-width: 0; height: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: var(--fs-16); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.qv__qty input::-webkit-outer-spin-button, .qv__qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
/* 06/11 (ảnh 179): chữ nút rộng 170 cần nút từ 194 để đệm mỗi bên đủ 12. Dưới 360 xếp 2 hàng, nút rộng hết (thay kiểu thu ô số lượng còn 108 của mẫu 175, ở 320 chữ vẫn sát mép). 360 đến 365 giữ 1 hàng, ô số lượng 120. */
@media (max-width: 359px) {
  .qv__row { grid-template-columns: minmax(0, 1fr); }
  .qv__qty { width: 132px; }
}
@media (min-width: 360px) and (max-width: 365px) {
  .qv__row { grid-template-columns: 120px minmax(0, 1fr); }
}
.qv__add { width: 100%; height: var(--h-md); }
.qv__add:disabled { opacity: .45; cursor: not-allowed; }
.qv__msg { margin: 12px 0 0; font-size: var(--fs-14); color: var(--err-ink); }
.qv__more { display: block; width: max-content; margin: 14px auto 0; padding: 10px 0; font-size: var(--fs-15); text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); }
.qv__more:hover { color: var(--brand); }
@media (min-width: 768px) {
  dialog.qv { inset: 0; width: min(760px, calc(100% - 48px)); max-height: 90vh; margin: auto; box-shadow: 0 24px 64px rgba(28, 25, 23, .28); }
  .qv__in { padding: 32px; }
  .qv__layout { grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "media head" "media rest"; column-gap: 32px; align-items: start; }
  .qv__media { width: 300px; height: 300px; }
  .qv__name { font-size: var(--fs-20); }
  .qv__price { font-size: 1.5rem; }
  .qv__more { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.qv[open] { animation: qv-up .28s var(--ease); }
  @media (min-width: 768px) { dialog.qv[open] { animation-name: qv-in; } }
}
@keyframes qv-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qv-in { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
/* ===== 01/11 UX ĐỢT 1 (anh Tùng duyệt danh sách, lỗi logic; bố cục gần như không đổi) =====
   C1 + G1 + K3: lỗi mã giảm giá ngay dưới ô (ngăn giỏ, trang giỏ, thanh toán) như trang sản phẩm.
   K1: lỗi không gắn với ô nào hiện ngay trên nút "Đặt hàng".
   A13: câu giải thích vì sao ưu đãi thành viên là 5%.
   A8: dòng giải thích đơn đặt khi chưa đăng nhập ở thẻ Đơn hàng.
   A9: thẻ Đơn hàng trên điện thoại: mỗi đơn một khối dọc, không tràn ngang. */
.coupon-box__error { margin: -2px 0 0; font-size: var(--fs-14); font-weight: 500; line-height: 1.45; color: var(--err-ink); }
.coupon-form input[aria-invalid="true"] { border-color: var(--err-ink); box-shadow: inset 0 0 0 1px var(--err-ink); }
.vc-place-error { margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid var(--err-ink); background: var(--err-bg); font-size: var(--fs-14); font-weight: 500; line-height: 1.5; color: var(--err-ink); }
.vc-place-error ul { margin: 0; padding: 0; list-style: none; }
.vc-place-error li + li { margin-top: 6px; }
.vc-place-error a { color: inherit; text-decoration: underline; }
.account-orders-note, .entry-content p.account-orders-note { margin: 0 0 20px; font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); } /* 05/11: ".entry-content p" làm mất lề dưới, câu dính sát bảng đơn hàng */
.account-orders-note a { font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { /* 05/11 (L15): nới từ 639 lên 767, đúng mốc ẩn menu Tài khoản: từ 640 đến khoảng 670 bảng 5 cột rộng hơn màn hình (rộng 668 ở màn 640) */
  .woocommerce table.woocommerce-orders-table, .woocommerce table.woocommerce-orders-table tbody { display: block; width: 100%; }
  .woocommerce table.woocommerce-orders-table thead { display: none; }
  .woocommerce table.woocommerce-orders-table tr { display: block; margin: 0 0 12px; padding: 4px 14px 14px; border: 1px solid var(--line); background: var(--white); }
  .woocommerce table.woocommerce-orders-table th, .woocommerce table.woocommerce-orders-table td { display: block; padding: 10px 0; text-align: right; overflow-wrap: anywhere; }
  .woocommerce table.woocommerce-orders-table th::after, .woocommerce table.woocommerce-orders-table td::after { content: ""; display: table; clear: both; }
  .woocommerce table.woocommerce-orders-table th::before, .woocommerce table.woocommerce-orders-table td::before { content: attr(data-title); float: left; margin-right: 12px; font-size: var(--fs-14); font-weight: 500; color: var(--muted); text-align: left; }
  .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { display: block; padding: 12px 0 0; border-bottom: 0; }
  .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before { content: none; }
  .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button { display: flex; width: 100%; justify-content: center; }
  .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button + .button { margin-top: 8px; }
}

/* ---------- 26. Đợt 3 giao diện nhỏ (01/11, ảnh 132–133) ----------
   Anh Tùng duyệt mẫu ảnh 132 (điện thoại) và 133 (nút gọi, 404, Cẩm nang). Mã lỗi theo outputs\ra-soat-ux-31-10\bao-cao-ux.txt.
   Kết quả thử: outputs\ra-soat-ux-31-10\dot-3\ket-qua-dot-3.txt. Bản cũ: ban-truoc\ux-dot-3-01-11\ (mục này là phần thêm mới). */

/* H1 + H2 (chọn A): đầu trang điện thoại / máy tính bảng còn 4 nút (header.php bỏ nút Tài khoản cạnh menu), mỗi nút 40 × 40
   (ô biểu tượng S của bảng tỷ lệ, ký hiệu 22). Trước: 5 nút 34 × 36 sát nhau. */
@media (max-width: 1099px) {
  .site-header .header-bar .icon-btn { width: var(--icon-s); height: var(--icon-s); }
}
@media (max-width: 380px) {
  .site-header .header-actions { margin-right: -10px; }
}

/* S3: mọi ô nhập / ô chọn trên điện thoại và máy tính bảng chữ 16px (iPhone, iPad tự phóng to trang khi chạm vào ô nhỏ hơn 16px).
   Trước: ô tìm kiếm 15px, ô mã giảm giá 15px, ô sắp xếp 14px. Chữ mẫu trong ô (placeholder) giữ cỡ riêng. */
@media (max-width: 1023px) {
  :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="hidden"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="image"]) { font-size: 16px !important; }
}

/* P1: trang sản phẩm, viên Gọi điện | Zalo (điện thoại) / nút gọi (máy tính) mờ đi 0,2 giây rồi ẩn khi đang đè khối mua
   (site.js gắn lớp is-tucked), khối mua đi qua thì hiện lại. */
.dock { transition: opacity .2s var(--ease), visibility 0s; }
.dock.is-tucked { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s var(--ease), visibility 0s linear .2s; }

/* T1 + F1: đang mở popup thành viên, menu, ngăn giỏ, popup chọn quy cách hoặc xem ảnh lớn → viên / nút gọi tạm ẩn (không chồng 2 lớp nổi). 06/11: đã gỡ hộp cookie, viên / nút gọi hiện ngay khi vào trang. */
html.has-sheet .dock, html.has-qv .dock, html.viewer-open .dock, html:has(dialog[open]) .dock { visibility: hidden; }

/* F1: máy tính, chân trang chừa lề phải 96px đúng chỗ nút gọi (nút 48px cách mép 24px) → nút không còn đè chữ cột "Cửa hàng". */
@media (min-width: 768px) {
  .site-footer .footer-main > .container, .site-footer .footer-bottom > .container { padding-right: 96px; }
}

/* T3 (chọn A): dải "Tin tức & Cẩm nang" điện thoại / máy tính bảng: khung cao đúng 3 bài, đứng yên rồi trượt đúng 1 bài (v3.js gắn
   lớp is-step). Bỏ lớp mờ mép trên / dưới (khung không còn lộ bài bị cắt); tiêu đề luôn giữ chỗ 2 dòng để mọi bài cao bằng nhau. */
.news-band .hero-news__viewport.is-step { -webkit-mask-image: none; mask-image: none; }
.news-band .hero-news__viewport.is-step .hero-news__track { animation: none; }
@media (min-width: 640px) { .news-band .hero-news__viewport.is-step .hero-news__text strong { min-height: calc(1.42em * 2); } } /* dưới 640: giữ chỗ ở ô bài (mục Tin tức bên trên), ngày đăng đứng sát tên */

/* X2: mọi ô tích 24px màu thương hiệu (trước 18–22px): Giữ đăng nhập, Tôi đã đọc và đồng ý (Đăng ký, Thanh toán), Dùng thông tin
   nhận hàng (hoá đơn VAT). Ô "Yêu cầu xuất hoá đơn VAT" vốn là ô vẽ 24px. Cả dòng chữ vẫn là vùng bấm như cũ. */
input[type="checkbox"],
.woocommerce form .woocommerce-form__label-for-checkbox input[type="checkbox"],
.woocommerce form .form-row label.woocommerce-form-login__rememberme input[type="checkbox"],
.vc-consent input[type="checkbox"],
#customer_login .woocommerce-form-register .vc-consent input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--brand); }
input[type="checkbox"], .vc-consent input[type="checkbox"], #customer_login .woocommerce-form-register .vc-consent input[type="checkbox"] { margin-top: 0; }
.woocommerce form .woocommerce-form__label-for-checkbox { padding-left: 36px; }
.vat-copy input[type="checkbox"] { margin: 0; }

/* N1: trang 404 (404.php). Tiêu đề theo thang tiêu đề trang 26 → 32px (trước 18 / 20px), ô tìm kiếm ngay trong trang, "Xem tất cả
   sản phẩm" là nút phụ, dòng "Cần hỗ trợ?". */
.empty-state.nf { max-width: 560px; }
.empty-state.nf h1 { font-size: var(--fs-h1); font-weight: var(--fw-medium); line-height: 1.3; }
.empty-state.nf > p { color: var(--ink-2); }
.nf-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 20px 0 0; text-align: left; }
.empty-state .nf-search .btn { margin-top: 0; }
.empty-state .nf-all { margin-top: 12px; }
.nf-help { margin: 16px 0 0; font-size: var(--fs-15); line-height: 1.6; color: var(--ink-2); }
.nf-help a { font-weight: var(--fw-medium); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* M1 (chọn A): thẻ bài Tin tức & Cẩm nang (vc3_guide_card, inc/article-products.php): nhãn chuyên mục chữ xanh, tóm tắt hiện đủ
   (bỏ cắt 2 / 3 dòng), dòng "Cập nhật …" nằm sát đáy thẻ. Bài chưa có ảnh: thẻ chữ, không còn ô biểu tượng nhỏ. */
.post-card__eyebrow { font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.post-card--guide .post-card__excerpt { display: block; overflow: visible; -webkit-line-clamp: unset; }
.post-card--guide .post-card__meta { margin-top: auto; padding-top: 4px; }
@media (max-width: 639px) { .post-card.post-card--text { display: flex; align-items: stretch; } } /* bỏ lưới "biểu tượng | tiêu đề" cũ */

/* D1: danh mục / thương hiệu chưa có sản phẩm (woocommerce.php): khung "… đang cập nhật sản phẩm" + Nhắn Zalo + Xem tất cả, rồi
   "Có thể bạn quan tâm" 4 sản phẩm (cách khung 32px, không vạch ngăn). */
.cat-empty { display: grid; gap: 10px; justify-items: start; margin: 8px 0 0; padding: 20px; border: 1px solid var(--line); }
.cat-empty h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-medium); text-wrap: balance; }
.cat-empty p { margin: 0; font-size: var(--fs-16); line-height: 1.6; color: var(--ink-2); }
.cat-empty__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
@media (max-width: 639px) { .cat-empty__actions .btn { flex: 1 1 100%; } }
.cat-empty + .more-products { margin-top: 32px; padding-top: 0; border-top: 0; }
/* ---------- 25. Khu Tài khoản, xem đơn, trang cảm ơn, Thanh toán khi Mua ngay (01/11, ảnh 128–131, 134) ----------
   Anh Tùng duyệt mẫu ảnh 128–131, 134. Mã lỗi theo outputs\ra-soat-ux-31-10\bao-cao-ux.txt. Kết quả thử:
   outputs\ra-soat-ux-31-10\dot-2\ket-qua-dot-2.txt. Bản cũ: ban-truoc\ux-dot-2-01-11\ (mục này là phần thêm mới). */

/* Lỗi dưới ô (mọi form): chữ đỏ, không viền, không nền; không bao giờ nhận con trỏ (ô nhập sai mới nhận). Anh Tùng: "bỏ cái viền to này đi". */
.vc-field-err { display: block; margin: 6px 0 0; font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1.45; color: var(--err-ink); }
.vc-field-err a, .entry-content .vc-field-err a { color: inherit; font-weight: var(--fw-strong); text-decoration: underline; text-underline-offset: 3px; }
.vc-field-err:focus, .vc-consent__err:focus, .coupon-box__error:focus, .pdp-coupon__error:focus, .checkout-inline-error-message:focus, .vc-place-error:focus, .woocommerce-message:focus, .woocommerce-error:focus, .woocommerce-info:focus { outline: 0; }
.woocommerce form .form-row input.input-text[aria-invalid="true"], .woocommerce form .form-row select[aria-invalid="true"], .lookup input[aria-invalid="true"] { border-color: var(--err-ink); box-shadow: inset 0 0 0 1px var(--err-ink); }

/* R1: tiêu đề Đăng nhập / Đăng ký trong khung, thẳng mép nhãn ô */
.woocommerce form .acc-title, .page--wide .entry-content #customer_login .acc-title { grid-column: 1 / -1; margin: 0 0 4px; font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.3; color: var(--ink); }
#customer_login > .u-column2, #customer_login > .u-column1 { scroll-margin-top: calc(var(--admin-h) + var(--strip-h) + var(--header-h) + 16px); }
@media (min-width: 900px) {
  .page--wide .entry-content #customer_login .acc-title { font-size: var(--fs-20); }
  .woocommerce #customer_login form.woocommerce-form-login, .woocommerce #customer_login form.woocommerce-form-register { padding: 32px; }
  /* Khung Đăng nhập: hàng cuối (tra cứu đơn) dồn xuống đáy, hai khung cân nhau */
  .woocommerce #customer_login form.woocommerce-form-login { grid-template-rows: auto auto auto auto auto 1fr; }
}
#customer_login form.woocommerce-form-login > .vc-field-err { order: 1; grid-column: 1 / -1; margin-top: -8px; }
/* Dòng cuối khung Đăng nhập */
.woocommerce #customer_login form.woocommerce-form-login > .acc-alt { order: 2; grid-column: 1 / -1; align-self: end; display: grid; gap: 8px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line); }
.acc-alt p { margin: 0; font-size: var(--fs-15); line-height: 1.5; color: var(--ink-2); }
.acc-alt a, .entry-content .acc-alt a { color: var(--brand); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .acc-alt .acc-alt__reg { display: none; } }
@media (max-width: 899px) { .acc-alt .acc-alt__phone { display: none; } }
/* R6: lời mời ưu đãi ngay dưới tiêu đề Đăng ký */
.acc-perk { grid-column: 1 / -1; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--surface); }
.acc-perk p, .entry-content .acc-perk p { margin: 0; }
.acc-perk .acc-perk__main { font-size: var(--fs-15); line-height: 1.5; color: var(--ink); }
.acc-perk__main strong { font-weight: var(--fw-strong); color: var(--brand); }
.acc-perk .acc-perk__sub { margin-top: 4px; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); }
/* Dòng xám "Để đăng ký, còn cần: …" dưới nút Đăng ký. Nút Đăng ký LUÔN đậm như nút Đăng nhập (01/11, anh Tùng: "đừng có để mờ nữa"). */
.vc-reg-hint { display: block; margin: 10px 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); }

/* Ô mật khẩu mới: hiện chữ khi gõ, nút chữ "Ẩn" / "Hiện" (vùng bấm cao hết ô 48px, rộng 56px), dòng "✓ Đủ 6 ký tự" (01/11, anh Tùng chọn) */
.vc-pw { position: relative; display: block; }
.woocommerce form .form-row input.vc-pw__input { padding-right: 68px; }
.vc-pw__toggle { position: absolute; top: 0; right: 0; bottom: 0; min-width: 56px; min-height: 40px; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vc-pw__toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; }
.vc-pw-rule { display: flex; align-items: center; gap: 6px; min-height: 1.45em; margin: 6px 0 0; font-size: var(--fs-14); line-height: 1.45; color: var(--muted); } /* 05/11: dòng trống khi chưa đủ nhưng giữ sẵn chỗ: gõ đủ thì chữ hiện ra, phần dưới không nhảy */
.vc-pw-rule__tick { font-weight: var(--fw-strong); }
.vc-pw-rule.is-ok { font-weight: var(--fw-medium); color: var(--brand); }
.form-row:has(> .vc-field-err:not([hidden])) > .vc-pw-rule { display: none; } /* đang có câu đỏ cho ô này: không lặp 2 dòng */

/* R9: Quên mật khẩu */
.woocommerce form.lost_reset_password { max-width: 560px; }
.acc-sent { display: grid; gap: 16px; max-width: 560px; }
.acc-back { margin: 12px 0 0; }
.acc-back a, .entry-content .acc-back a { display: inline-flex; align-items: center; gap: 2px; min-height: 48px; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--brand); text-decoration: none; }
.acc-sent .woocommerce-message { margin: 0; font-size: var(--fs-16); color: var(--ink); }
.acc-sent p, .entry-content .acc-sent p { margin: 0; line-height: 1.6; color: var(--ink-2); }
.acc-sent .btn { justify-self: start; }
@media (max-width: 639px) { .acc-sent .btn { justify-self: stretch; } }

/* A6: thanh thẻ Tài khoản: thẳng mép nội dung, một hàng 40px (ảnh 129), không gạch chân, "Đăng xuất" tách sang phải */
.woocommerce-account .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; }
.woocommerce-account .woocommerce-MyAccount-navigation a, .entry-content .woocommerce-MyAccount-navigation a { display: inline-flex; align-items: center; gap: 8px; height: 40px; margin: 0; padding: 0 16px; border: 1px solid var(--control); font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--ink); text-decoration: none; }
.woocommerce-account .woocommerce-MyAccount-navigation .is-active a, .entry-content .woocommerce-MyAccount-navigation .is-active a { border-color: var(--brand); background: var(--brand); color: var(--white); }
.woocommerce-account .woocommerce-MyAccount-navigation li:not(.is-active) a:hover { border-color: var(--brand); color: var(--brand); }
.woocommerce-account .woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--customer-logout { margin-left: auto; }
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a, .entry-content .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a { padding: 0 4px; border-color: transparent; color: var(--muted); }
.woocommerce-MyAccount-navigation-link--customer-logout a::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h5v16h-5%22/%3E%3Cpath d=%22M10 8l-4 4 4 4M6 12h10%22/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h5v16h-5%22/%3E%3Cpath d=%22M10 8l-4 4 4 4M6 12h10%22/%3E%3C/svg%3E") center / contain no-repeat; }
/* Lối quay lại phía trên tiêu đề: "‹ Tất cả đơn hàng" mọi cỡ; "‹ Tài khoản của tôi" chỉ điện thoại (cách A) */
.acc-back-top { display: none; align-items: center; gap: 2px; min-height: 40px; margin: 0 0 2px -4px; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--brand); text-decoration: none; }
.acc-back-top--all { display: inline-flex; }
@media (max-width: 767px) {
  .woocommerce-account .woocommerce-MyAccount-navigation { display: none; }
  .acc-back-top { display: inline-flex; }
}

/* Nút cỡ S trong thẻ, liên kết chữ */
.btn--s { height: var(--h-sm); padding: 0 14px; font-size: var(--fs-13); }
.acc-link, .entry-content a.acc-link { font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* L2: nhãn trạng thái đơn + câu giải thích */
.acc-status { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; background: var(--surface-2); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--brand); white-space: nowrap; }
.acc-status--cancelled, .acc-status--failed { background: var(--err-bg); color: var(--err-ink); }
.acc-status-note, .entry-content p.acc-status-note { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); }
.woocommerce-orders-table .acc-status-note { display: block; margin-top: 6px; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); text-align: left; white-space: normal; }
.woocommerce-orders-table__cell-order-status { min-width: 240px; }
.woocommerce-orders-table__cell-order-actions:has(.button + .button) .button { margin-block: 4px; } /* 05/11 (L15): đơn có 2 nút ở dạng bảng: 2 nút xếp chồng không dính vào nhau */
.lookup-result .lookup-result__note { margin: 0 0 12px; }
@media (max-width: 767px) {
  .woocommerce table.woocommerce-orders-table td.woocommerce-orders-table__cell-order-status { min-width: 0; }
  .woocommerce-orders-table .acc-status-note { clear: both; padding-top: 2px; }
}

/* A7 + R5: trang Tổng quan */
.acc-dash { display: grid; gap: 24px; }
.acc-hello h2, .page--wide .entry-content .acc-hello h2 { margin: 0; font-size: var(--fs-20); font-weight: var(--fw-medium); line-height: 1.35; }
.acc-hello p, .entry-content .acc-hello p { margin: 4px 0 0; font-size: var(--fs-15); color: var(--muted); }
.acc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acc-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); background: var(--white); }
.acc-card p, .entry-content .acc-card p { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); overflow-wrap: anywhere; }
.acc-card .acc-card__label, .entry-content .acc-card .acc-card__label { margin: 0 0 2px; font-size: var(--fs-13); font-weight: var(--fw-medium); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.acc-card .acc-card__big, .entry-content .acc-card .acc-card__big { font-size: var(--fs-20); font-weight: var(--fw-strong); line-height: 1.35; color: var(--brand); }
.acc-card .acc-card__small, .entry-content .acc-card .acc-card__small { font-size: var(--fs-14); color: var(--muted); }
.acc-card__name { font-weight: var(--fw-medium); color: var(--ink); }
.acc-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.acc-card__row b { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--ink); }
.acc-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: auto; padding-top: 8px; }
.acc-tag { display: inline-flex; align-items: center; align-self: flex-start; height: 28px; padding: 0 10px; background: var(--surface-2); font-size: var(--fs-13); font-weight: var(--fw-medium); color: var(--brand); }
.acc-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.acc-help > div { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--surface); }
.acc-help p, .entry-content .acc-help p { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); }
.acc-help b { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--ink); }
.acc-actions-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.acc-dash > .acc-shop { justify-self: start; }
.acc-dash .woocommerce-message { margin: 0; }
.acc-dash .woocommerce-message strong { font-weight: var(--fw-strong); color: var(--brand); }
.acc-dash .woocommerce-message > span { flex: 1 1 280px; min-width: 0; }
/* Danh sách mục (điện thoại, cách A) */
.acc-menu, .entry-content ul.acc-menu { display: none; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.acc-menu li, .entry-content .acc-menu li + li { margin: 0; }
.acc-menu a, .entry-content .acc-menu a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.acc-menu a > svg:first-child { flex: none; color: var(--brand); }
.acc-menu span { display: grid; gap: 2px; min-width: 0; }
.acc-menu b { font-size: var(--fs-16); font-weight: var(--fw-medium); }
.acc-menu small { font-size: var(--fs-14); line-height: 1.4; color: var(--muted); }
.acc-menu .acc-menu__chev { flex: none; margin-left: auto; color: var(--muted); }
.acc-menu .acc-menu__out b { font-weight: var(--fw-regular); color: var(--ink-2); }
@media (max-width: 899px) { .acc-cards, .acc-help { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .acc-menu, .entry-content ul.acc-menu { display: block; }
  .acc-dash > .acc-shop { justify-self: stretch; }
  .acc-dash .woocommerce-message .button, .woocommerce .acc-dash .woocommerce-message a.button { width: 100%; margin-left: 0; }
}

/* A2, A4, A5, A11: khung form rộng 720px (Thông tin & mật khẩu, Địa chỉ) */
.acc-forms { display: grid; gap: 24px; max-width: 720px; }
.acc-box, .acc-forms--address > form { display: grid; gap: 16px; margin: 0; padding: 20px; border: 1px solid var(--line); background: var(--white); }
.acc-box > *, .acc-forms--address > form > * { margin-block: 0; }
.acc-box__title, .page--wide .entry-content .acc-box__title, .page--wide .entry-content .acc-forms--address > form > h2 { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: 1.3; color: var(--ink); }
.woocommerce form.acc-box .form-row, .acc-forms--address .woocommerce-address-fields .form-row { float: none; width: 100%; margin: 0; padding: 0; }
.acc-box .acc-hint { display: block; margin-top: 6px; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); }
.woocommerce form.acc-box .form-row input.input-text[readonly]:not([data-vc-unlock]) { background: var(--surface); color: var(--ink-2); }
.acc-box .acc-box__actions, .entry-content .acc-box .acc-box__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.acc-lead, .entry-content .acc-lead { margin: 0 0 20px; font-size: var(--fs-16); line-height: 1.6; color: var(--ink-2); }
.acc-addr address { font-style: normal; }
.acc-addr p, .entry-content .acc-addr p { margin: 0; font-size: var(--fs-16); line-height: 1.6; color: var(--ink-2); }
.acc-addr .acc-addr__name, .entry-content .acc-addr .acc-addr__name { font-weight: var(--fw-medium); color: var(--ink); }
.acc-forms--address .woocommerce-address-fields, .acc-forms--address .woocommerce-address-fields__field-wrapper { display: grid; gap: 16px; }
.acc-forms--address .woocommerce-address-fields > p { margin: 0; }
.acc-forms--address .woocommerce-address-fields .form-row#billing_phone_field { grid-column: 1 / -1; width: 100%; }
.acc-forms--address label.screen-reader-text[for="billing_address_2"] { position: static !important; width: auto !important; height: auto !important; margin: 0 0 6px !important; overflow: visible !important; clip: auto !important; white-space: normal !important; }
@media (min-width: 768px) {
  .acc-box, .acc-forms--address > form { padding: 32px; }
  .acc-box__title, .page--wide .entry-content .acc-box__title, .page--wide .entry-content .acc-forms--address > form > h2 { font-size: var(--fs-20); }
}
@media (max-width: 639px) { .acc-box .acc-box__actions .button, .acc-box .acc-box__actions .btn, .acc-forms--address .button { width: 100%; } }

/* A10 + L2: xem một đơn */
.woocommerce mark, .woocommerce-MyAccount-content mark { background: none; color: inherit; font-weight: var(--fw-medium); }
.ord-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 720px; margin: 0 0 32px; padding: 20px; border: 1px solid var(--line); background: var(--white); }
.ord-sum__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.ord-sum__row p, .entry-content .ord-sum__row p { margin: 0; font-size: var(--fs-16); color: var(--ink-2); }
.ord-sum .acc-status-note { padding-top: 12px; border-top: 1px solid var(--line); }
.ord-sum__actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 768px) { .ord-sum { padding: 24px 32px; } }
@media (max-width: 639px) { .ord-sum__actions .btn { flex: 1 1 100%; white-space: normal; text-align: center; } }
.woocommerce-MyAccount-content .woocommerce-order-details, .woocommerce-MyAccount-content .woocommerce-customer-details, .woocommerce-order .woocommerce-order-details, .woocommerce-order .woocommerce-customer-details { max-width: 720px; }

/* O1: trang cảm ơn */
.ty-head { display: grid; gap: 6px; max-width: 720px; margin: 0 0 24px; padding: 20px; border-left: 3px solid var(--brand); background: var(--surface); }
.ty-head p, .entry-content .ty-head p { margin: 0; }
.ty-head .ty-head__title, .entry-content .ty-head .ty-head__title { font-size: var(--fs-h3); font-weight: var(--fw-medium); color: var(--ink); }
.ty-head .ty-head__sub, .entry-content .ty-head .ty-head__sub { font-size: var(--fs-15); color: var(--ink-2); }
.ty-facts, .entry-content ul.ty-facts { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 8px 40px; margin: 0 0 28px; padding: 0; list-style: none; }
.ty-facts li, .entry-content .ty-facts li + li { display: grid; gap: 2px; margin: 0; font-size: var(--fs-14); color: var(--muted); }
.ty-facts strong { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--ink); }
.ty-facts .ty-facts__total strong { font-weight: var(--fw-strong); }
.ty-steps { max-width: 720px; margin: 0 0 32px; }
.ty-steps h2, .page--wide .entry-content .ty-steps h2 { margin: 0 0 16px; font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.ty-steps ol, .entry-content .ty-steps ol { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: ty; }
.ty-steps li, .entry-content .ty-steps li + li { position: relative; display: grid; gap: 2px; margin: 0; padding: 0 0 18px 48px; counter-increment: ty; }
.ty-steps li::before { content: counter(ty); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--brand); border-radius: 50%; font-size: var(--fs-15); font-weight: var(--fw-medium); color: var(--brand); }
.ty-steps li:not(:last-child)::after { content: ""; position: absolute; left: 16px; top: 36px; bottom: 4px; width: 1px; background: var(--line-2); }
.ty-steps b { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 1.5; color: var(--ink); }
.ty-steps span { font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); }
.ty-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 40px; }
@media (max-width: 639px) {
  .ty-facts, .entry-content ul.ty-facts { grid-template-columns: 1fr 1fr; gap: 12px 16px; }
  .ty-actions .btn { flex: 1 1 100%; }
}

/* P4 (ảnh 134): danh sách hàng ở Thanh toán khi đơn có từ 2 món. Điện thoại: đầu trang, thay dòng tóm tắt gập. Máy tính: đầu khung "Đơn hàng của bạn". */
.k-don { display: grid; gap: 12px; margin: 0 0 24px; }
.k-don.is-busy { opacity: .55; pointer-events: none; }
.k-don--box { display: none; }
.checkout-summary:has(+ .k-don--top:not([hidden])) { display: none; }
#order_review:has(.k-don--box:not([hidden])) .woocommerce-checkout-review-order-table tr.cart_item { display: none; } /* danh sách đã ở trên: không lặp */
@media (min-width: 900px) {
  .k-don--top { display: none; }
  .k-don--box { display: grid; margin: 0 0 16px; } /* 04/11 anh Tùng, ảnh 142: bỏ thẻ trắng lồng, cùng mặt phẳng với khung nền ấm */
  #order_review:has(.k-don--box:not([hidden])) { position: static; } /* khung dài hơn màn hình: bỏ dính để cuộn tới nút Đặt hàng */
}
.k-nhac { display: grid; gap: 4px; padding: 14px 16px; border-left: 3px solid var(--brand); background: var(--surface); }
.k-nhac p, .entry-content .k-nhac p { margin: 0; font-size: var(--fs-15); line-height: 1.55; color: var(--ink-2); }
.k-nhac .k-nhac__title, .entry-content .k-nhac .k-nhac__title { font-size: var(--fs-16); font-weight: var(--fw-strong); line-height: 1.45; color: var(--ink); }
.k-list, .entry-content ul.k-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.k-item, .entry-content .k-list li + li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.k-item__img { display: block; width: 64px; height: 64px; overflow: hidden; }
.k-item__img img { display: block; width: 64px; height: 64px; object-fit: contain; background: var(--white); transform: var(--pk, none); } /* 04/11 anh Tùng, ảnh 142: sản phẩm chiếm 92% ô, --pk từ PHP như ảnh nhỏ ở Giỏ */
.k-item__body { display: grid; gap: 6px; min-width: 0; }
.k-item__name, .entry-content .k-item__name { margin: 0; font-size: var(--fs-15); font-weight: var(--fw-medium); line-height: 1.4; color: var(--ink); }
.k-tag { justify-self: start; display: inline-flex; align-items: center; min-height: 26px; padding: 2px 8px; background: var(--surface-2); font-size: var(--fs-13); line-height: 1.3; color: var(--muted); }
.k-tag--moi { font-weight: var(--fw-medium); color: var(--brand); }
.k-item__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.k-qty { display: inline-grid; grid-template-columns: 40px 36px 40px; height: 40px; border: 1px solid var(--control); background: var(--white); }
.k-qty__btn { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin: -3px -2px; padding: 0; border: 0; background: none; font-size: 18px; line-height: 1; color: var(--ink); cursor: pointer; } /* 05/11: vùng bấm đủ 44 x 44, khung giữ nguyên nhờ lề âm */
.k-qty__btn:disabled { color: var(--control); cursor: not-allowed; }
.k-qty__btn:not(:disabled):hover { background: linear-gradient(var(--surface), var(--surface)) center / 40px 38px no-repeat; }
.k-qty__val { display: grid; place-items: center; font-size: var(--fs-16); }
.k-item__price { font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--ink); white-space: nowrap; }
.k-bo { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-block: -2px; padding: 0 2px; border: 0; background: none; font: inherit; font-size: var(--fs-14); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.k-bo:hover { color: var(--err-ink); }
.k-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--fs-16); color: var(--ink-2); }
.k-total b { font-size: var(--fs-18); font-weight: var(--fw-strong); color: var(--ink); white-space: nowrap; }
@media (min-width: 900px) {
  /* 04/11 anh Tùng, ảnh 142: bỏ vạch đầu danh sách; bỏ dòng Tổng cộng ở đây vì trùng dòng Tổng cộng ngay bên dưới (.k-don--top ở điện thoại giữ). Đặt sau các dòng .k-* gốc để thắng .entry-content ul.k-list */
  .k-don--box ul.k-list { border-top: 0; }
  .k-don--box .k-item:first-child { padding-top: 0; }
  .k-don--box .k-total { display: none; }
}
/* 04/11 anh Tùng, ảnh 142: mỗi món 2 hàng (tên / số lượng, Bỏ khỏi đơn, thành tiền). Dưới 1140px khung phải không đủ chỗ cho 3 phần trên một hàng nên giữ 3 tầng như cũ. */
@media (min-width: 1140px) {
  .k-don--box .k-item__body { grid-template-columns: auto minmax(0, 1fr) auto; grid-auto-flow: row dense; column-gap: 12px; align-items: center; }
  .k-don--box .k-item__body > :not(.k-item__row):not(.k-bo) { grid-column: 1 / -1; }
  .k-don--box .k-item__row { display: contents; }
  .k-don--box .k-qty { grid-column: 1; }
  .k-don--box .k-item__price { grid-column: 3; }
  .k-don--box .k-bo { grid-column: 2; }
}

/* 04/11 (kiểm thử L5): liên kết rời trong khu Tài khoản có vùng bấm ít nhất 40px trên màn hình cảm ứng. Chỉ thêm padding (liên kết trong câu) hoặc padding + margin âm
   (liên kết đứng riêng) nên chữ và bố cục giữ nguyên; position: relative để phần padding nằm trên dòng chữ kế bên khi bấm. Không đụng .card__*, .pslider. */
@media (max-width: 1023px) {
  .acc-link, .entry-content a.acc-link { display: inline-block; position: relative; padding-block: 8px; margin-block: -8px; }
  .account-orders-note a, .entry-content .account-orders-note a,
  .woocommerce-orders-table__cell-order-number a,
  .woocommerce-table__product-name a,
  .woocommerce form.woocommerce-form-login .lost_password a,
  .acc-alt a, .entry-content .acc-alt a, /* 06/11 (anh Tùng chốt): bỏ .vc-consent a khỏi đây, vùng đệm 11px phủ cả dòng trên và dưới nên chạm vào chữ thường lại mở liên kết thay vì tích ô */
  .vc-field-err a, .entry-content .vc-field-err a { position: relative; padding-block: 11px; }
  .woocommerce-orders-table__cell-order-number a { padding-inline: 4px; margin-inline: -4px; }
}
@media (max-width: 767px) { .btn--s { height: 40px; } }

/* ==== Giá thành viên (04/11, anh Tùng duyệt ảnh 147 đến 150, huy hiệu kiểu A; HUONG-DAN 6.76). Mọi màu, cỡ chữ, độ đậm lấy từ biến có sẵn. ==== */
/* 0. Huy hiệu kiểu A (biểu tượng tự vẽ: dấu tròn có ngôi sao): chữ đậm, biểu tượng to hơn. */
.tv-hh { display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-strong); line-height: 1.2; white-space: nowrap; color: var(--brand); vertical-align: -2px; }
.tv-hh__icon { display: block; flex: none; width: 1.3em; height: 1.3em; color: var(--brand); }
.tv-hh__sao { fill: var(--white); }

/* 1. KHỐI GIÁ HỘI VIÊN (05/11 tối, anh Tùng duyệt mẫu 172; KE-HOACH-KHOI-GIA-HOI-VIEN.txt). MỘT khối cho thẻ, banner, trang sản phẩm, popup, in từ vcr_member_price_block() ở inc/member-ui.php. Thứ tự: số tiền niêm yết gạch ngang, giá, huy hiệu.
   Thang cỡ chỉ đặt ở đây: thẻ 15, từ 640 là 16, đậm 700. Banner 18, từ 640 là 24, đậm 560. Trang sản phẩm, popup 20, từ 640 là 24, đậm 560. Số gạch 13; banner, trang sản phẩm, popup từ 640 là 14. */
.hv { --hv-gia: var(--fs-15); --hv-dam: var(--fw-bold); --hv-goc: var(--fs-13); --hv-vang: #D9A441; --hv-gach: #C4320A; --hv-nen: #FBF4E2; --hv-vien: #EBDCB4; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; font-variant-numeric: tabular-nums; }
.hv--bn { --hv-gia: var(--fs-18); --hv-dam: var(--fw-strong); }
.hv--sp { --hv-gia: var(--fs-20); --hv-dam: var(--fw-strong); }
@media (min-width: 640px) {
  .hv--the { --hv-gia: var(--fs-16); }
  .hv--bn, .hv--sp { --hv-gia: 1.5rem; --hv-goc: var(--fs-14); }
}
.hv__ny { display: block; font-size: var(--hv-goc); font-weight: var(--fw-regular); line-height: 1.35; color: var(--muted); white-space: nowrap; }
.hv__ny del { position: relative; display: inline-block; margin: 0; font-size: inherit; font-weight: inherit; color: inherit; text-decoration: none; }
.hv__ny del::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 1.5px; background: var(--hv-gach); transform-origin: left center; }
.hv__hang { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hv__gia { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 4px; font-size: var(--hv-gia); font-weight: var(--hv-dam); line-height: 1.25; color: var(--brand); }
.hv--bn .price__from { font-size: var(--fs-13); }
@media (min-width: 640px) { .hv--bn .price__from { font-size: var(--fs-16); } }
/* Huy hiệu: viền vàng, nền vàng nhạt, dấu tròn ngôi sao, chữ xanh 13, một dòng */
.hv__hh { position: relative; display: inline-flex; }
.hv__nen { position: relative; display: inline-flex; align-items: center; gap: 4px; overflow: hidden; padding: 1px 7px 1px 4px; border: 1px solid var(--hv-vien); border-radius: 3px; background: var(--hv-nen); color: var(--brand); font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: 1.3; white-space: nowrap; }
.hv__sao { display: block; flex: none; width: 14px; height: 14px; }
.hv__sao svg { display: block; width: 100%; height: 100%; }
.hv__sao .tv-hh__sao { fill: #F0C65A; }
.hv__nen::after { content: ""; position: absolute; inset: -2px 0; background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .6) 50%, transparent 68%); transform: translateX(-130%); pointer-events: none; }
.hv__hh::before { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--hv-vang); border-radius: 4px; opacity: 0; pointer-events: none; }
/* Thẻ: xếp dọc, căn giữa, ghim đáy phần chữ như giá của khách nên giá và nút cùng hàng luôn thẳng */
.hv--the { align-items: center; width: 100%; margin-top: auto; padding-top: 8px; }
.hv--the .hv__hang { flex-direction: column; flex-wrap: nowrap; row-gap: 6px; }
/* Banner: khối và nút Mua ngay chung một lưới. Từ 640: nút dưới khối giá, thẳng trục trái. Dưới 640: nút sát phải, đáy nút ngang đáy huy hiệu (ảnh 04b). Nút giữ đúng cỡ bản khách. */
.hv-hang { margin-top: 14px; }
.hv-hang .hero-slide__cta { margin: 14px 0 0; }
@media (max-width: 639px) {
  .hv-hang { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; margin-top: 10px; }
  .hv--bn, .hv--bn .hv__hang { display: contents; }
  .hv--bn .hv__ny { grid-column: 1; grid-row: 1; }
  .hv--bn .hv__gia { grid-column: 1; grid-row: 2; }
  .hv--bn .hv__hh { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 4px; }
  .hv-hang .hero-slide__cta { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; }
}
/* Trang sản phẩm: dòng giá chiếm hết hàng, nhãn Còn hàng xuống dưới. Đang dùng mã: về dòng thường, số gạch trước. Popup: khối rộng hết cột chữ. */
.pdp-summary > p.price.tv-gia-chinh { display: block; flex: 0 0 100%; }
.pdp-summary > p.price.tv-gia-chinh.has-code { display: flex; flex-wrap: wrap; align-items: baseline; }
.pdp-summary > p.price.tv-gia-chinh.has-code del { order: -1; }
.qv__price .hv { flex: 1 1 100%; }
/* Hiệu ứng (kế hoạch điều 6), chỉ transform, opacity, không đổi bố cục. Giảm chuyển động, in giấy: đứng yên, đủ chữ.
   Hiện ra: gạch giá .7s, giá .7s, huy hiệu .6s không nảy, chạy ngay từ lần vẽ đầu nên không có cảnh hiện đủ rồi mới ẩn đi; JavaScript hỏng thì vẫn chạy xong và hiện đủ. Khối đang khuất: v3.js gắn hv--cho, vào màn hình mới gỡ. Đổi quy cách: hv--yen, không chạy lại. Thanh dính đáy không chạy.
   Banner: theo lớp is-active có sẵn nên tự chạy lại khi đổi slide. Lặp 8 giây: vệt sáng lướt 2 giây, viền vàng lan nhẹ, sao đứng yên, các thẻ lệch nhịp, chỉ khi khối trong màn hình (is-lap). */
@media screen and (prefers-reduced-motion: no-preference) {
  :is(.hv--the, .hv--sp):not(.hv--yen, .hv--cho, .pdp-bar *) .hv__ny del::after, .hero-slide.is-active .hv--bn .hv__ny del::after { animation: hv-gach .7s cubic-bezier(.65, 0, .35, 1) .2s both; }
  :is(.hv--the, .hv--sp):not(.hv--yen, .hv--cho, .pdp-bar *) .hv__ny, .hero-slide.is-active .hv--bn .hv__ny { animation: hv-ny .7s ease-out .2s both; }
  :is(.hv--the, .hv--sp):not(.hv--yen, .hv--cho, .pdp-bar *) .hv__gia, .hero-slide.is-active .hv--bn .hv__gia { animation: hv-len .7s cubic-bezier(.22, 1, .36, 1) .7s both; }
  :is(.hv--the, .hv--sp):not(.hv--yen, .hv--cho, .pdp-bar *) .hv__hh, .hero-slide.is-active .hv--bn .hv__hh { animation: hv-bat .6s cubic-bezier(.22, 1, .36, 1) 1.1s both; }
  .hv--yen .hv__ny { opacity: .82; }
  .hv--cho .hv__ny del::after { transform: scaleX(0); }
  .hv--cho .hv__gia, .hv--cho .hv__hh { opacity: 0; }
  .hv.is-lap:not(.hv--cho) .hv__nen::after, .hero-stage.is-lap .hero-slide.is-active .hv--bn .hv__nen::after { animation: hv-sang 8s ease-in-out calc(2s + var(--i, 0) * 1s) infinite; }
  .hv.is-lap:not(.hv--cho) .hv__hh::before, .hero-stage.is-lap .hero-slide.is-active .hv--bn .hv__hh::before { animation: hv-vong 8s ease-out calc(2s + var(--i, 0) * 1s) infinite; }
}
@keyframes hv-gach { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes hv-ny { from { opacity: 1; } to { opacity: .82; } }
@keyframes hv-len { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hv-bat { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hv-sang { 0% { transform: translateX(-130%); } 25%, 100% { transform: translateX(130%); } }
@keyframes hv-vong { 0% { opacity: .6; transform: none; } 25%, 100% { opacity: 0; transform: scale(1.05, 1.35); } }
/* 2. Dòng giá đơn đầu (08/11, anh Tùng duyệt mẫu 193; inc/member-ui.php vcr_member_first_line): thẻ và banner, chỉ tài khoản còn đơn đầu. Máy chủ in sẵn nên đã giữ chỗ, không nhảy bố cục.
   Hiện sau huy hiệu, cùng điều kiện với khối giá: thẻ khuất thì chờ (hv--cho), banner chạy lại khi đổi slide. Lượt tải chúc mừng (inc/chuc-mung.php) giữ dòng này tới khi tắt popup 2 rồi hiện sau .15s. Giảm chuyển động: đứng yên, đủ chữ. */
.hv__don { display: inline-flex; flex-wrap: wrap; justify-content: center; column-gap: 4px; max-width: 100%; margin-top: 6px; padding: 2px 8px; border-left: 2px solid var(--hv-vang); background: var(--surface); font-size: var(--fs-13); line-height: 1.35; color: var(--ink-2); text-align: center; }
.hv__don b { font-weight: var(--fw-strong); color: var(--brand); white-space: nowrap; }
.hv--the .hv__don { align-self: center; }
.hv--bn .hv__don { align-self: flex-start; margin-top: 8px; text-align: left; }
@media (min-width: 640px) { .hv--bn .hv__don { font-size: var(--fs-14); } }
@media (max-width: 639px) { .hv--bn .hv__don { grid-column: 1 / -1; grid-row: 4; justify-self: start; } }
@media (max-width: 767px) { /* thẻ hẹp luôn 2 dòng như mẫu: số ngắn (91.875 ₫) mà 1 dòng thì giá, huy hiệu lệch 18px so với thẻ cùng hàng */
  .hv--the .hv__don { width: 100%; }
  .hv--the .hv__don b { flex: 0 0 100%; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .hv--the:not(.hv--yen, .hv--cho) .hv__don, .hero-slide.is-active .hv--bn .hv__don { animation: cm-len .7s cubic-bezier(.22, 1, .36, 1) var(--hv-don-tre, 1.5s) both; }
  .hv--cho .hv__don { opacity: 0; }
}
@keyframes cm-len { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Câu chúc mừng ở Thanh toán (mẫu 193): trong luồng trang, ngay trên form, không che nút Đặt hàng. */
.cm-chuc { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--brand); background: var(--surface); font-size: var(--fs-15); line-height: 1.5; color: var(--ink-2); }
.cm-chuc svg { flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--brand); }
.cm-chuc .tv-hh__sao { fill: #F0C65A; }
.cm-chuc p { margin: 0; }
.cm-chuc b { font-weight: var(--fw-strong); color: var(--brand); }
@media screen and (prefers-reduced-motion: no-preference) { .cm-chuc { animation: cm-len .7s cubic-bezier(.22, 1, .36, 1) both; } }

/* 3. Một câu giải thích ở đầu lưới Cửa hàng, Danh mục, Thương hiệu, Tìm kiếm */
.tv-note { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--brand); background: var(--surface); font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); }
.tv-note .tv-hh__icon { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; }
.tv-note a { color: var(--brand); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) { .tv-note__them { display: none; } } /* điện thoại: câu ngắn để sản phẩm hiện sớm */

/* 5. Khối thành viên dùng chung: trang sản phẩm, popup, ngăn giỏ, Giỏ (cùng kiểu .acc-perk đang có ở form Đăng ký) */
.tv-khoi { padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--surface); font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); text-align: left; }
.tv-khoi p, .entry-content .tv-khoi p { margin: 0; }
.tv-khoi p + p { margin-top: 4px; }
.tv-khoi__chinh { font-size: var(--fs-15); font-weight: var(--fw-regular); color: var(--ink); }
.tv-khoi b { font-weight: var(--fw-strong); color: var(--brand); }
.tv-khoi a { color: var(--brand); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
.tv-khoi__loi { margin-top: 8px !important; }
.pdp-summary > .tv-khoi { margin: 14px 0 0; }
.qv__rest > .tv-khoi { margin: 8px 0 12px; padding: 8px 12px; } /* cách ảnh và dòng giá 8px; ảnh mẫu 147 chụp trước khi thêm 8px này */
/* 06/11 (mẫu 175, ảnh 05): popup căn giữa màn hình, câu đơn đầu đổi 1 và 2 dòng theo quy cách làm giá dịch 11. Câu có số luôn giữ đủ chỗ 2 dòng, chữ căn giữa khối. */
@media (min-width: 768px) { .qv__rest > .tv-khoi:has(b) { display: grid; align-content: center; min-height: calc(3 * var(--fs-15) + 16px); } }
.widget_shopping_cart_content .tv-khoi { margin: 12px 0; }
.cart_totals .tv-khoi { margin: 12px 0 16px; }

/* 6. Giá 2 tầng trong danh sách món (ngăn giỏ, Giỏ, Thanh toán): giá thành viên đậm, xanh; giá gốc 13px xám, gạch ngang */
.tv-gia { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.tv-gia__chinh { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tv-gia__chinh .amount { font-size: var(--fs-16); font-weight: var(--fw-strong); color: var(--brand); }
.tv-gia__chinh .tv-hh__icon { width: 15px; height: 15px; }
.tv-gia del { margin: 0; font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--muted); }
@media (max-width: 767px), (min-width: 900px) and (max-width: 1149px) { .product-price .tv-gia del { display: none; } .product-price .tv-gia__chinh .amount { font-size: inherit; font-weight: var(--fw-regular); color: inherit; } } /* Giỏ dạng thẻ: giá gốc gạch chỉ ở dòng thành tiền */

/* 7. Dòng tiền trong Giỏ, Thanh toán, ngăn giỏ */
.tv-voucher th { white-space: nowrap; }
tr.tv-voucher ~ tr.fee { display: none; } /* dòng phí âm của WooCommerce nằm sau phí giao hàng nên ẩn khi đã có dòng voucher ngay sau Tạm tính */
/* 05/11: giá gạch ở dòng Tạm tính là một khối: đủ chỗ thì cạnh số thành viên, hẹp thì tự lên dòng trên, cả hai vẫn thẳng mép phải. Không cho ô này giữ nguyên một dòng ở Giỏ, kẻo bảng rộng hơn màn hình. */
.tv-goc { display: inline-block; font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--muted); }
.tv-goc + .amount { margin-left: 6px; }
.cart-collaterals .cart_totals table.shop_table td:has(> .tv-goc) { white-space: normal; }
@media (max-width: 479px) { .tv-goc { display: block; } .tv-goc + .amount { margin-left: 0; } }
@media (max-width: 479px) { .tv-voucher th, .savings-row th, .tv-giu-lai .tv-hh, .mini-summary__saved .tv-hh, .cart-collaterals .cart_totals table.shop_table td { white-space: normal; } } /* chữ dài cạnh số 8 chữ số ở máy hẹp: được xuống dòng, như bảng tiền ở Thanh toán */
.mini-summary dd { text-align: right; } /* số tiền dài xuống dòng vẫn thẳng mép phải */
.mini-summary del { display: inline-block; }
.tv-tru { color: var(--ok-ink); }
.tv-giu-lai th, .tv-giu-lai td { color: var(--brand) !important; font-weight: var(--fw-strong); border-top: 0 !important; padding-top: 0 !important; }
.tv-giu-lai .tv-hh { font-weight: var(--fw-strong); }
.tv-cau th, .tv-cau td { contain: inline-size; white-space: normal !important; padding-top: 0 !important; border-top: 0 !important; font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: 1.5; color: var(--muted); text-align: left !important; } /* contain: câu dài trải 2 cột không làm bảng tính sai bề rộng cột (05/11: giá gạch đang đủ chỗ vẫn bị ép xuống dòng) */
.woocommerce table.shop_table tr.cart-discount:has(+ .tv-cau--ma) th, .woocommerce table.shop_table tr.cart-discount:has(+ .tv-cau--ma) td, #order_review table.shop_table tr.cart-discount:has(+ .tv-cau--ma) th, #order_review table.shop_table tr.cart-discount:has(+ .tv-cau--ma) td { padding-bottom: 4px; border-bottom: 0; } /* 05/11 (L12): câu trần 50% liền ngay dưới dòng mã, không có đường kẻ ở giữa */
.mini-summary__saved dt .tv-hh { font-weight: var(--fw-strong); }
.mini-summary__saved dd { font-weight: var(--fw-strong); color: var(--brand); }
.mini-summary__cau { margin: -8px 0 14px; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); } /* 05/11: câu này sát nút Thanh toán: cách nút 14, cách dòng trên 6 (dòng trên có sẵn lề dưới 14) */

/* 8. Đăng ký nhanh: Thanh toán (cột trái, sau địa chỉ, trước VAT) và trang cảm ơn */
.tv-dk { margin: 20px 0 0; padding: 16px 20px 20px; border-left: 3px solid var(--brand); background: var(--surface); }
.tv-dk__tieu { margin: 0; font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: 1.4; color: var(--ink); }
.tv-dk__phu { margin: 6px 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); }
.tv-dk__yen { margin: 6px 0 0; font-size: var(--fs-15); line-height: 1.5; color: var(--ink); } /* câu trấn an ngay dưới tiêu đề khối */
.tv-dk .form-row { margin: 14px 0 0 !important; padding: 0; width: 100%; float: none; }
.tv-dk .form-row label { display: block; }
.tv-dk .vc-pw__input { background: var(--white); }
.tv-dk__dongy { margin: 12px 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--ink-2); }
.tv-dk__dongy a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.tv-dk .btn { width: 100%; margin-top: 10px; }
.tv-dk .btn.tv-dang-gui { cursor: progress; pointer-events: none; }
.tv-dk__duoi { margin: 10px 0 0; font-size: var(--fs-14); line-height: 1.5; color: var(--muted); }
.tv-dk__duoi a { color: var(--brand); font-weight: var(--fw-medium); text-decoration: underline; text-underline-offset: 3px; }
/* Vùng bấm liên kết đăng ký / đăng nhập của khách cao ít nhất 40px: đệm trong, trừ lại bằng lề âm nên dòng chữ không xê dịch */
.tv-khoi a, .tv-dk__duoi a { display: inline-block; padding: 11px 6px; margin: -11px -6px; }
@media (min-width: 640px) { .tv-dk .btn { width: auto; min-width: 280px; } }
.tv-xong { margin: 20px 0 0; padding: 12px 16px; border-left: 3px solid var(--brand); background: var(--surface); font-size: var(--fs-15); line-height: 1.5; color: var(--ink); }
.tv-xong .tv-hh { font-weight: var(--fw-strong); }
.tv-xong:focus { outline: none; } /* con trỏ chuyển vào câu kết quả sau khi nút biến mất, không vẽ viền */
.tv-dk .show-password-input { display: none; } /* WooCommerce tự thêm nút con mắt cho ô mật khẩu; khối này đã có nút chữ Hiện / Ẩn */
.ty-actions + .tv-dk, .ty-actions + .tv-xong { max-width: 720px; margin: 24px 0 40px; } /* cùng bề ngang với khung cảm ơn và bảng chi tiết đơn */

/* 9. Gợi ý tìm kiếm */
.search-result__price { text-align: right; }
.tv-tim { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-size: var(--fs-13); font-weight: var(--fw-regular); line-height: 1.3; white-space: nowrap; color: var(--muted); }
.tv-tim b { font-weight: var(--fw-medium); color: var(--brand); }
.tv-tim-chinh { display: flex; justify-content: flex-end; align-items: center; gap: 3px; font-weight: var(--fw-strong); white-space: nowrap; color: var(--brand); }