/* ==========================================================================
   WEBSITE NGỌN LỬA — hệ giao diện dùng chung
   Căn cứ: website/de-bai/TL1-Noi-dung-website-Ngon-Lua.md
           website/de-bai/TL2-De-bai-thiet-ke-va-ban-giao.md
           shared/nhan-dien-cong-ty/BRAND.md + tokens.json (bộ V1.0, 29/10/2026)

   MÀU — đo lại ngày 02/11/2026 trên màu nhận diện mới #FD5810.
   Số cũ (#B80D07, nền cam chữ đen) tính trên bảng màu Firebooks, đã bỏ.
     #FD5810  cam nhận diện   3,19:1 trên trắng → CHỈ mảng màu/viền. Không đặt chữ nhỏ.
     #B33400  cam chữ         6,16:1 trên trắng → link, nhãn, nút chính (chữ trắng).
     chữ ĐEN trên nền #FD5810 = 6,58:1. Chữ trắng chỉ 3,19:1 → cấm.
     #1A1512  chữ chính       16,74:1
     #767069  chữ phụ          4,89:1
   Chế độ tối: nền #14100D, chữ #F2F0ED (16,64:1), cam #FF8C55 (8,23:1).

   PHÔNG: chỉ Be Vietnam Pro (BRAND.md mục 4 — web giữ phông cũ, Sếp chốt 02/11/2026).
   Phông logo là phông bản quyền, không nhúng. Tên tác phẩm đặt nghiêng.

   LOGO: dùng file PNG xuất từ bộ chuẩn. SVG gốc 1,17 MB nên không nhúng.
   Hiển thị ở 160 px rộng — cỡ nhỏ nhất BRAND.md mục 5 cho phép.
   CHƯA có bố cục ngang và biểu tượng tách rời → thanh dính khi cuộn KHÔNG mang logo.
   ========================================================================== */

:root {
  --giay:      #FFFCF9;   /* nền giấy ấm, trung tính sáng */
  --giay-tron: #FFFFFF;
  --khoi:      #FFF4ED;   /* khối nhấn nhẹ — cam pha rất loãng */
  --khoi-2:    #F6F2EE;

  --muc:       #1A1512;
  --muc-70:    #5B5550;
  --muc-45:    #706A63;   /* 4,80:1 ngay trên nền khối nhạt nhất (#F6F2EE) */
  --vien:      #E4DFD9;
  --vien-mo:   #F0ECE7;

  --lua:       #FD5810;   /* mảng màu / viền — KHÔNG đặt chữ nhỏ lên nền trắng */
  --lua-chu:   #C23A00;   /* chữ, link, nút chính — 5,39:1 trên trắng */
  --lua-dam:   #8F2800;   /* trạng thái di chuột — 8,50:1 */
  --tren-lua:  #FFFFFF;   /* chữ trên nền --lua-chu */
  --tren-cam:  #000000;   /* chữ trên nền --lua  (6,58:1) */

  /* Chân trang luôn là nền tối ở CẢ HAI chế độ — không dùng var(--muc) làm nền,
     vì ở chế độ tối --muc lật thành màu sáng và chữ sẽ biến mất. */
  --chan-nen:  #1A1512;
  --chan-chu:  #F2F0ED;
  --chan-phu:  #B9B2AA;
  --chan-nhan: #9A938B;
  --chan-vien: #332C26;

  --rong:      1200px;
  --doc:       68ch;      /* chiều rộng cột đọc dài */
  --sans: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Những biến dưới đây TRANG QUẢN TRỊ chỉnh được ----
     Giá trị ở đây là MẶC ĐỊNH. Trang quản trị ghi đè bằng assets/giao-dien.css
     (nạp sau file này). Muốn trả về mặc định thì xoá file đó. */
  --co-chu:        17px;    /* BRAND.md: nội dung web 16–18 px */
  --gian-dong:     1.6;     /* BRAND.md: giãn dòng 1,4–1,6 */
  --bo-nho:        4px;     /* nút, ô nhập */
  --bo-vua:        6px;     /* thẻ sách, ô nội dung */
  --bo-to:         8px;     /* khối lớn, băng-rôn ngang */
  --cach-the:      clamp(20px, 2.4vw, 28px);   /* khoảng cách giữa các thẻ */
  --cach-the-nho:  clamp(14px, 1.8vw, 22px);   /* trong băng chuyền */
  --cach-lop:      clamp(56px, 8vw, 96px);     /* khoảng cách giữa các khối */
  --cach-lop-hep:  clamp(40px, 5vw, 64px);

  --o-nho: 0 1px 2px rgba(26,21,18,.05), 0 6px 20px rgba(26,21,18,.05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --giay: #14100D; --giay-tron: #1B1713; --khoi: #221A14; --khoi-2: #1E1A16;
    --muc: #F2F0ED; --muc-70: #B9B2AA; --muc-45: #9A938B;
    --vien: #332C26; --vien-mo: #241F1A;
    --lua-chu: #FF8C55; --lua-dam: #FFA87A; --tren-lua: #14100D;
    --chan-nen: #0C0A08;
    --o-nho: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --giay: #14100D; --giay-tron: #1B1713; --khoi: #221A14; --khoi-2: #1E1A16;
  --muc: #F2F0ED; --muc-70: #B9B2AA; --muc-45: #9A938B;
  --vien: #332C26; --vien-mo: #241F1A;
  --lua-chu: #FF8C55; --lua-dam: #FFA87A; --tren-lua: #14100D;
  --chan-nen: #0C0A08;
  --o-nho: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  overflow-x: clip;                     /* TL2 mục 9 — không tràn ngang */
  background: var(--giay);
  color: var(--muc);
  font-family: var(--sans);
  font-size: var(--co-chu);
  line-height: var(--gian-dong);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.18; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -.015em; }
h2 { font-size: clamp(24px, 3vw, 33px); letter-spacing: -.01em; }
h3 { font-size: clamp(19px, 2vw, 22px); }
h4 { font-size: 17px; }
p  { margin: 0; }
ul, ol { margin: 0; padding-left: 1.25em; }
img { max-width: 100%; height: auto; display: block; }
cite { font-style: italic; }            /* tên tác phẩm — thay cho việc đổi phông */

a { color: var(--lua-chu); text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--lua-dam); }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2.5px solid var(--lua-chu);
  outline-offset: 3px;
  border-radius: var(--bo-nho);
}

.bo-qua {                               /* link nhảy tới nội dung, cho bàn phím */
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--muc); color: var(--giay); padding: 12px 18px; font-weight: 600;
}
.bo-qua:focus { left: 12px; top: 12px; }

.chi-doc-man-hinh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- lưới ---------- */
.kho { width: 100%; max-width: var(--rong); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }
.lop { padding-block: var(--cach-lop); }
.lop.hep { padding-block: var(--cach-lop-hep); }
.lop.nen { background: var(--khoi-2); }
.lop.nen-cam { background: var(--khoi); }
.vien-tren { border-top: 1px solid var(--vien); }

.dan { max-width: var(--doc); color: var(--muc-70); font-size: 18px; }
.dan.to { font-size: clamp(18px, 2vw, 21px); color: var(--muc-70); }

/* nhãn kỹ thuật nhỏ */
.nhan {
  font: 600 12px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muc-45); font-variant-numeric: tabular-nums;
}
.nhan.lua { color: var(--lua-chu); }

/* ---------- nút ---------- */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px;                      /* TL2 mục 9 — nút dễ chạm */
  padding: 12px 24px;
  border: 1.5px solid var(--muc); border-radius: var(--bo-nho);
  background: transparent; color: var(--muc);
  font: 600 15px/1.3 var(--sans); text-decoration: none; cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nut:hover { background: var(--muc); color: var(--giay); }
.nut.chinh {
  background: var(--lua-chu); border-color: var(--lua-chu); color: var(--tren-lua);
}
.nut.chinh:hover { background: var(--lua-dam); border-color: var(--lua-dam); color: var(--tren-lua); }
/* 44 px là mức nhỏ nhất còn bấm trúng bằng ngón tay — TL2 mục 9 */
.nut.nho { min-height: 44px; padding: 10px 16px; font-size: 14px; }
.nut[aria-disabled="true"], .nut:disabled { opacity: .5; cursor: not-allowed; }
.nut svg { width: 15px; height: 15px; flex: none; }

.hang-nut { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- đầu trang ---------- */
/* Khối thương hiệu tĩnh: logo đầy đủ 160 px. Không thu nhỏ, không cắt. */
.dau-trang { background: var(--giay); border-bottom: 1px solid var(--vien); }
.dau-trang .bo-cuc {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 20px;
}
.hieu { display: inline-flex; align-items: center; text-decoration: none; }
.hieu img { width: 160px; height: auto; }   /* cỡ nhỏ nhất BRAND.md mục 5 */
.hieu:focus-visible { outline-offset: 6px; }

.khau-hieu {
  max-width: 24ch; font-size: 14px; line-height: 1.45; color: var(--muc-45);
  border-left: 2px solid var(--lua); padding-left: 14px;
}
@media (max-width: 720px) { .khau-hieu { display: none; } }

/* Thanh điều hướng — dính khi cuộn. KHÔNG mang logo:
   bộ nhận diện chưa có bố cục ngang hay biểu tượng rút gọn (BRAND.md mục 5). */
.thanh {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--giay) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--vien);
}
.thanh .bo-cuc { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: inline-block; padding: 10px 14px; border-radius: var(--bo-nho);
  color: var(--muc); text-decoration: none; font-weight: 500; font-size: 15px;
}
.menu a:hover { background: var(--khoi); color: var(--lua-chu); }
.menu a[aria-current="page"] { color: var(--lua-chu); font-weight: 600; box-shadow: inset 0 -2px 0 var(--lua); }

.mo-menu {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--vien); border-radius: var(--bo-nho); background: transparent;
  color: var(--muc); font: 600 14px/1 var(--sans); cursor: pointer;
}
.mo-menu svg { width: 18px; height: 18px; }

@media (max-width: 940px) {
  .mo-menu { display: inline-flex; }
  .thanh .menu { display: none; }
  .thanh[data-mo="1"] .menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--giay); border-bottom: 1px solid var(--vien);
    padding: 10px clamp(20px, 5vw, 40px) 18px;
    box-shadow: var(--o-nho);
  }
  .thanh[data-mo="1"] .menu a { padding: 13px 10px; font-size: 16px; }
  .thanh .bo-cuc { position: relative; }
  .thanh .nut { padding: 10px 14px; font-size: 14px; }
}
@media (max-width: 420px) {
  .thanh .nut { padding: 10px 12px; font-size: 13px; }
  .mo-menu { padding: 8px 11px; }
}

/* ==========================================================================
   BỐ CỤC KIỂU ALPHA BOOKS — Sếp chốt 02/11/2026
   Học cách SẮP XẾP trang của alphabooks.vn: thanh điều hướng một tầng,
   băng-rôn lớn đầu trang, băng chuyền sách, tiêu đề căn giữa, khối "sách mới".
   Chữ, ảnh, màu và mã nguồn đều của Ngọn Lửa — không lấy của họ.

   LỆCH CHUẨN CÓ CHỦ Ý: logo trong thanh điều hướng cao 56px (rộng ~63px),
   nhỏ hơn mức 160px mà BRAND.md mục 5 quy định. Sếp chốt đổi lấy đầu trang
   gọn giống Alpha. Chân trang vẫn dùng logo đúng cỡ 160px.
   ========================================================================== */

/* ---------- thanh điều hướng một tầng ---------- */
.dinh {
  position: sticky; top: 0; z-index: 40;
  background: var(--giay-tron);
  border-bottom: 1px solid var(--vien);
  box-shadow: 0 1px 0 rgba(26,21,18,.04);
}
.dinh .bo-cuc {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 32px);
  min-height: 76px; position: relative;
}
.dinh .hieu img { width: auto; height: 56px; }

.dinh .menu { flex: 1; gap: 2px; }
.dinh .menu a { padding: 9px 12px; font-size: 15px; white-space: nowrap; }

.cong-cu { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nut-tron-nho {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border: 1.5px solid var(--vien); border-radius: 50%;
  background: transparent; color: var(--muc); cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.nut-tron-nho:hover { border-color: var(--lua); color: var(--lua-chu); }
.nut-tron-nho svg { width: 18px; height: 18px; }

/* ô tìm kiếm bung ra dưới thanh, giống Alpha trên điện thoại */
.khay-tim {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--giay-tron); border-bottom: 1px solid var(--vien);
  padding: 14px clamp(20px, 5vw, 40px) 18px; box-shadow: var(--o-nho);
}
.dinh[data-tim="1"] .khay-tim { display: block; }
.khay-tim .o-tim { max-width: none; }
.khay-tim .o-tim input { border-radius: 999px; }

.dinh .mo-menu { display: none; }
@media (max-width: 1040px) {
  .dinh .menu { display: none; }
  .dinh .mo-menu { display: inline-flex; }
  .dinh[data-mo="1"] .menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--giay-tron); border-bottom: 1px solid var(--vien);
    padding: 10px clamp(20px, 5vw, 40px) 18px; box-shadow: var(--o-nho);
  }
  .dinh[data-mo="1"] .menu a { padding: 13px 10px; font-size: 16px; }
  .dinh .bo-cuc { min-height: 68px; }
  .dinh .hieu { margin-inline: auto; }   /* logo về giữa như bản điện thoại của Alpha */
  .dinh .hieu img { height: 48px; }
  .dinh .nut.chinh { display: none; }
}
@media (max-width: 1040px) and (min-width: 561px) {
  .dinh .nut.chinh { display: inline-flex; }
  .dinh .hieu { margin-inline: 0; }
}

/* ---------- băng-rôn lớn đầu trang ---------- */
.bang-ron {
  background: var(--chan-nen); color: #F7F5F2;
  padding-block: clamp(44px, 6vw, 76px);
  position: relative; overflow: hidden;
}
.bang-ron::after {               /* vệt cam mảnh dưới đáy, thay cho ảnh nền */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, var(--lua), var(--lua-chu));
}
.bang-ron .bo-cuc { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: center; }
/* Ô lưới mặc định có min-width:auto — ba bìa sách cạnh nhau cần 350px nên ở màn 360px
   nó nong cả lưới rộng ra và đẩy chữ lòi khỏi lề. min-width:0 cho phép ô co lại. */
.bang-ron .bo-cuc > * { min-width: 0; }
@media (min-width: 900px) { .bang-ron .bo-cuc { grid-template-columns: 1.05fr .95fr; } }
.bang-ron .nhan { color: #FFA87A; }
.bang-ron h1 { color: #FFFFFF; max-width: 18ch; margin-top: 16px; }
.bang-ron p { color: #CFC8C1; max-width: 46ch; margin-top: 18px; font-size: 17px; }
.bang-ron .hang-nut { margin-top: 30px; }
.bang-ron .nut { border-color: rgba(255,255,255,.4); color: #F7F5F2; }
.bang-ron .nut:hover { background: #FFFFFF; color: var(--muc); border-color: #FFFFFF; }
.bang-ron .nut.chinh { background: var(--lua); border-color: var(--lua); color: var(--tren-cam); }
.bang-ron .nut.chinh:hover { background: #FF7A3D; border-color: #FF7A3D; color: var(--tren-cam); }

/* dãy bìa sách xếp chồng nghiêng trong băng-rôn */
.ke-bia { display: flex; justify-content: center; gap: clamp(10px, 1.6vw, 20px); }
.ke-bia figure { margin: 0; width: clamp(84px, 15vw, 170px); }
.ke-bia img {
  width: 100%; aspect-ratio: 600 / 837; object-fit: cover; border-radius: var(--bo-nho);
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
}
.ke-bia figure:nth-child(1) { transform: rotate(-5deg) translateY(10px); }
.ke-bia figure:nth-child(3) { transform: rotate(5deg) translateY(10px); }
.ke-bia figcaption { font-size: 12px; color: #9A938B; margin-top: 10px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .ke-bia figure { transform: none !important; } }

/* ---------- tiêu đề căn giữa có gạch hai bên ---------- */
.tieu-de-giua { text-align: center; }
.tieu-de-giua h2 { margin-inline: auto; }
.tieu-de-giua .vach {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 14px; color: var(--lua);
}
.tieu-de-giua .vach::before,
.tieu-de-giua .vach::after {
  content: ""; height: 1px; width: clamp(40px, 8vw, 90px);
  background: linear-gradient(90deg, transparent, var(--vien), transparent);
}
.tieu-de-giua .vach svg { width: 24px; height: 24px; flex: none; }
.tieu-de-giua .dan { margin: 18px auto 0; text-align: center; }

/* ---------- nút bo tròn kiểu Alpha ---------- */
.nut.tron { border-radius: 999px; padding-inline: 30px; }

/* ---------- khối giới thiệu hai cột ---------- */
.gioi-thieu { display: grid; gap: clamp(30px, 4.5vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .gioi-thieu { grid-template-columns: .95fr 1.05fr; } }
.khung-anh {
  background: var(--khoi); border: 1px solid var(--vien); border-radius: var(--bo-to);
  padding: clamp(24px, 3.5vw, 44px); display: grid; place-items: center; gap: 16px;
}
.khung-anh .ke-bia figure:nth-child(1) { transform: rotate(-6deg); }
.khung-anh .ke-bia figure:nth-child(2) { transform: rotate(6deg); }
.khung-anh .ke-bia img { box-shadow: 0 10px 28px rgba(26,21,18,.18); }
.khung-anh figcaption { color: var(--muc-45); }

/* ---------- băng chuyền sách ---------- */
.bang-chuyen { position: relative; }
.ray {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr);
  gap: var(--cach-the-nho);
  overflow-x: auto;
  /* proximity, KHÔNG mandatory. Với mandatory, bấm mũi tên để cuộn tới cuối
     đường (250px) thì Chrome không với được điểm neo nào và kéo thẳng về 0 —
     nút trông như hỏng. Đã dựng hình thật để xác nhận, không phải lỗi phép đo. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth; padding-block: 6px;
  scrollbar-width: thin;
}
@media (min-width: 700px)  { .ray { grid-auto-columns: minmax(210px, calc((100% - 44px) / 3)); } }
@media (min-width: 1000px) { .ray { grid-auto-columns: minmax(210px, calc((100% - 88px) / 5)); } }
.ray > * { scroll-snap-align: start; }
.ray::-webkit-scrollbar { height: 6px; }
.ray::-webkit-scrollbar-thumb { background: var(--vien); border-radius: 999px; }

.mui-ten {
  position: absolute; top: 38%; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 1.5px solid var(--vien); border-radius: 50%;
  background: var(--giay-tron); color: var(--lua-chu); cursor: pointer;
  box-shadow: var(--o-nho);
}
.mui-ten:hover { border-color: var(--lua); background: var(--lua); color: var(--tren-cam); }
.mui-ten svg { width: 18px; height: 18px; }
.mui-ten.trai { left: -22px; }
.mui-ten.phai { right: -22px; }
@media (max-width: 1290px) { .mui-ten.trai { left: -14px; } .mui-ten.phai { right: -14px; } }
@media (max-width: 760px)  { .mui-ten { display: none; } }

/* ---------- thẻ sách kiểu Alpha ---------- */
.the-sach { display: flex; flex-direction: column; gap: 11px; text-align: left; }
.the-sach .bia {
  aspect-ratio: 600 / 837; background: var(--khoi-2);
  border: 1px solid var(--vien); border-radius: var(--bo-vua); overflow: hidden;
  display: grid; place-items: center; text-align: center; padding: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.the-sach:hover .bia { border-color: var(--lua); box-shadow: var(--o-nho); }
.the-sach .bia img { width: 100%; height: 100%; object-fit: cover; }
.the-sach h3 { font-size: 16px; line-height: 1.35; }
.the-sach h3 a { color: var(--muc); text-decoration: none; }
.the-sach h3 a:hover { color: var(--lua-chu); }
.the-sach .tac-gia { font-size: 14px; color: var(--muc-45); }
.the-sach .cho-gia { font-size: 14px; }

/* một tác phẩm có thể phát hành nhiều hình thức — nhãn xếp cạnh nhau, xuống dòng được */
.nhan-hang { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }

/* giá: giá bán nổi bật, giá gốc gạch ngang mờ. CHỈ hiện giá gốc khi thật sự khác giá bán. */
.gia-ban { color: var(--lua-chu); font-size: 17px; font-weight: 600; }
.gia-cu { color: var(--muc-45); font-weight: 400; font-size: 14px; margin-left: 7px; }
.sp-gia .gia-cu { font-size: 16px; }
/* Trong thẻ sách chỉ gạch chân TÊN tác phẩm. Tác giả và giá để chữ xám nghiêng —
   ba dòng gạch chân đỏ liền nhau nhìn rối mà không rõ thêm điều gì; khối cảnh báo
   phía trên đã nói rõ cả băng chuyền là khung chờ dữ liệu. */
.the-sach .tac-gia .cho,
.the-sach .cho-gia .cho {
  border-bottom: 0; color: var(--muc-45); font-style: italic; font-weight: 400; cursor: help;
}
.the-sach .hinh-thuc { font-size: 11px; padding: 3px 9px; }

/* ---------- hai băng-rôn ngang ---------- */
.doi-bang-ron { display: grid; gap: var(--cach-the); grid-template-columns: 1fr; }
@media (min-width: 820px) { .doi-bang-ron { grid-template-columns: 1fr 1fr; } }
.o-bang-ron {
  border-radius: var(--bo-to); padding: clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
  text-decoration: none; min-height: 180px; justify-content: center;
  border: 1px solid var(--vien); background: var(--khoi);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.o-bang-ron:hover { border-color: var(--lua); box-shadow: var(--o-nho); }
.o-bang-ron h3 { color: var(--muc); max-width: 22ch; }
.o-bang-ron p { color: var(--muc-70); font-size: 15px; max-width: 40ch; }
.o-bang-ron .di-tiep { color: var(--lua-chu); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.o-bang-ron.dam { background: var(--chan-nen); border-color: var(--chan-nen); }
.o-bang-ron.dam h3 { color: #FFFFFF; }
.o-bang-ron.dam p { color: #CFC8C1; }
.o-bang-ron.dam .di-tiep { color: #FFA87A; }

/* ---------- khối "sách mới phát hành": một cuốn lớn + lưới nhỏ ---------- */
.sach-moi { display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: 1fr; }
@media (min-width: 920px) { .sach-moi { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.noi-bat {
  border: 1.5px solid var(--lua); border-radius: var(--bo-to); background: var(--giay-tron);
  padding: clamp(22px, 2.8vw, 32px);
  display: grid; gap: 22px; grid-template-columns: 1fr;
}
@media (min-width: 560px) { .noi-bat { grid-template-columns: 150px 1fr; } }
.noi-bat .bia { aspect-ratio: 600 / 837; background: var(--khoi-2); border: 1px solid var(--vien); border-radius: var(--bo-vua); overflow: hidden; display: grid; place-items: center; text-align: center; padding: 10px; }
.noi-bat .bia img { width: 100%; height: 100%; object-fit: cover; }
.noi-bat .than { display: flex; flex-direction: column; gap: 10px; }
.noi-bat h3 { font-size: 21px; }
.noi-bat p { font-size: 15px; color: var(--muc-70); }

/* ---------- phần mở đầu ---------- */
.mo-dau { padding-block: clamp(52px, 7vw, 86px); }
.mo-dau .nhan { margin-bottom: 18px; }
.mo-dau h1 { max-width: 20ch; }
.mo-dau .dan { margin-top: 22px; }
.mo-dau .hang-nut { margin-top: 32px; }

.hai-cot { display: grid; gap: clamp(32px, 5vw, 64px); grid-template-columns: 1fr; }
@media (min-width: 900px) { .hai-cot { grid-template-columns: 1.15fr .85fr; align-items: start; } }

/* ---------- lưới thẻ ---------- */
.luoi { display: grid; gap: var(--cach-the); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .luoi.hai  { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 620px)  { .luoi.ba   { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .luoi.ba   { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 620px)  { .luoi.bon  { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .luoi.bon  { grid-template-columns: repeat(4, 1fr); } }

.o {
  background: var(--giay-tron); border: 1px solid var(--vien); border-radius: var(--bo-vua);
  padding: clamp(22px, 2.6vw, 30px);
  display: flex; flex-direction: column; gap: 12px;
}
.o h3 { color: var(--muc); }
.o p { color: var(--muc-70); font-size: 16px; }
.o .nhan { margin-bottom: 2px; }

/* khối việc — có số thứ tự kiểu mục lục */
.o.viec { border-top: 3px solid var(--lua); }

/* ---------- thẻ sản phẩm ---------- */
.the-sp {
  display: flex; flex-direction: column;
  background: var(--giay-tron); border: 1px solid var(--vien); border-radius: var(--bo-vua);
  overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease;
}
.the-sp:hover { border-color: var(--lua); box-shadow: var(--o-nho); }
.the-sp .bia {
  aspect-ratio: 3 / 4; background: var(--khoi-2);
  display: grid; place-items: center; border-bottom: 1px solid var(--vien);
  padding: 16px; text-align: center;
}
.the-sp .bia img { width: 100%; height: 100%; object-fit: contain; }
.the-sp .than { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.the-sp h3 { font-size: 19px; }
.the-sp .tac-gia { font-size: 15px; color: var(--muc-45); }
.the-sp .tom-tat { font-size: 15px; color: var(--muc-70); flex: 1; }
.the-sp .nut { margin-top: 6px; align-self: flex-start; }

/* nhãn hình thức phát hành */
.hinh-thuc {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--vien); background: var(--khoi);
  font: 600 12px/1.5 var(--sans); letter-spacing: .04em; color: var(--lua-chu);
}
.hinh-thuc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lua); }

/* ---------- đầu trang chi tiết sản phẩm ---------- */
.sp-dau { display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .sp-dau { grid-template-columns: minmax(240px, 340px) 1fr; } }
.sp-bia {
  aspect-ratio: 3 / 4; background: var(--khoi-2);
  border: 1px solid var(--vien); border-radius: var(--bo-vua);
  display: grid; place-items: center; text-align: center; padding: 20px;
}
.sp-bia img { width: 100%; height: 100%; object-fit: contain; }
.sp-than { display: flex; flex-direction: column; gap: 16px; }
.sp-than h1 { font-size: clamp(27px, 3.6vw, 38px); }
.sp-gia { font-size: 22px; font-weight: 600; color: var(--muc); }
.sp-tinh-trang { font-size: 15px; color: var(--muc-45); }

/* ---------- bộ lọc ---------- */
.bo-loc { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.nhom-loc { display: flex; flex-wrap: wrap; gap: 8px; }
.nhom-loc button {
  min-height: 44px; padding: 10px 18px;
  border: 1.5px solid var(--vien); border-radius: 999px;
  background: transparent; color: var(--muc-70);
  font: 600 14px/1 var(--sans); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nhom-loc button:hover { border-color: var(--lua); color: var(--lua-chu); }
.nhom-loc button[aria-pressed="true"] {
  background: var(--lua-chu); border-color: var(--lua-chu); color: var(--tren-lua);
}

.o-tim { position: relative; flex: 1 1 280px; max-width: 380px; }
.o-tim input {
  width: 100%; min-height: 48px; padding: 12px 16px 12px 42px;
  border: 1.5px solid var(--vien); border-radius: var(--bo-nho);
  background: var(--giay-tron); color: var(--muc);
  font: 400 15px/1.4 var(--sans);
}
.o-tim input::placeholder { color: var(--muc-45); }
.o-tim svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muc-45); pointer-events: none; }

/* ---------- trạng thái trống ---------- */
.trong {
  border: 1.5px dashed var(--vien); border-radius: var(--bo-vua);
  padding: clamp(32px, 5vw, 56px); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.trong p { color: var(--muc-70); max-width: 52ch; }

/* ---------- chỗ chờ dữ liệu thật ----------
   TL2 mục 12: thông tin còn thiếu phải ghi trong danh sách chờ, không tự điền. */
.cho {
  color: var(--lua-chu); border-bottom: 1.5px dotted currentColor;
  font-style: normal; cursor: help; font-weight: 500;
}
.khung-cho {
  border: 1.5px dashed var(--lua); border-radius: var(--bo-vua); background: var(--khoi);
  padding: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; gap: 10px;
}
.khung-cho .nhan { color: var(--lua-chu); }
.khung-cho p { color: var(--muc-70); font-size: 15px; }

/* ---------- nội dung đọc dài ---------- */
.bai { max-width: var(--doc); }
.bai > * + * { margin-top: 20px; }
.bai h2 { margin-top: 44px; }
.bai h3 { margin-top: 32px; }
.bai p, .bai li { color: var(--muc-70); }
.bai strong { color: var(--muc); font-weight: 600; }
.bai blockquote {
  margin: 32px 0; padding: 20px 24px; border-left: 3px solid var(--lua);
  background: var(--khoi); color: var(--muc); font-size: 19px; font-weight: 500;
}

/* câu thông điệp thương hiệu — trình bày riêng, không chèn vào logo */
.thong-diep {
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.35;
  color: var(--muc); max-width: 22ch;
  padding-left: 18px; border-left: 3px solid var(--lua);
}

/* ---------- danh sách định nghĩa / thông tin ấn phẩm ---------- */
.thong-so { margin: 0; display: grid; gap: 0; }
.thong-so > div {
  display: grid; grid-template-columns: minmax(130px, 32%) 1fr; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--vien-mo);
}
.thong-so dt { color: var(--muc-45); font-size: 15px; }
.thong-so dd { margin: 0; color: var(--muc); font-size: 16px; }

/* ---------- hỏi đáp ---------- */
.hoi-dap { border-top: 1px solid var(--vien); }
.hoi-dap details { border-bottom: 1px solid var(--vien); }
.hoi-dap summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-weight: 600; font-size: 17px; color: var(--muc);
}
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--lua-chu); border-bottom: 2px solid var(--lua-chu);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.hoi-dap details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.hoi-dap .dap { padding: 0 0 22px; color: var(--muc-70); max-width: var(--doc); }

/* ---------- biểu mẫu ---------- */
.mau { display: grid; gap: 20px; max-width: 760px; }
.doi { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .doi { grid-template-columns: 1fr 1fr; } }

.truong { display: flex; flex-direction: column; gap: 7px; }
.truong label { font-weight: 600; font-size: 15px; color: var(--muc); }
.truong .goi-y { font-size: 14px; color: var(--muc-45); }
.truong .buoc { color: var(--lua-chu); }
.truong input, .truong select, .truong textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--vien); border-radius: var(--bo-nho);
  background: var(--giay-tron); color: var(--muc);
  font: 400 16px/1.5 var(--sans);
}
.truong textarea { min-height: 140px; resize: vertical; }
.truong input:focus, .truong select:focus, .truong textarea:focus { border-color: var(--lua-chu); }
.truong[data-loi="1"] input,
.truong[data-loi="1"] select,
.truong[data-loi="1"] textarea { border-color: var(--lua-dam); background: var(--khoi); }
.loi { font-size: 14px; color: var(--lua-dam); font-weight: 600; display: none; }
.truong[data-loi="1"] .loi { display: block; }

.dong-y { display: flex; flex-wrap: wrap; gap: 11px; align-items: flex-start; }
.dong-y input { width: 20px; height: 20px; min-height: 0; margin-top: 3px; flex: none; accent-color: var(--lua-chu); }
.dong-y label { font-weight: 400; font-size: 15px; color: var(--muc-70); flex: 1 1 280px; }
.dong-y .loi { flex: 1 0 100%; }
.dong-y[data-loi="1"] .loi { display: block; }
.dong-y[data-loi="1"] input { outline: 2px solid var(--lua-dam); outline-offset: 2px; }

.bao {
  display: none; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--bo-vua); border: 1.5px solid var(--vien);
  background: var(--khoi); font-size: 15px;
}
.bao[data-hien="1"] { display: flex; }
.bao.xong { border-color: var(--lua-chu); }
.bao.hong { border-color: var(--lua-dam); background: var(--khoi); }
.bao strong { display: block; color: var(--muc); margin-bottom: 3px; }
.bao span { color: var(--muc-70); }

/* ---------- khối liên hệ bằng thư ----------
   Thay cho biểu mẫu: web tĩnh chưa có nơi tiếp nhận, nên dẫn thẳng ra email
   thay vì để khách gửi vào hư không. */
.the-lien-he {
  background: var(--giay-tron); border: 1px solid var(--vien); border-radius: var(--bo-to);
  padding: clamp(24px, 3vw, 36px); max-width: 760px; margin-top: 24px;
}
.email-to { margin-top: 14px; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; }
.email-to a { color: var(--lua-chu); text-decoration: none; word-break: break-all; }
.email-to a:hover { text-decoration: underline; }

/* ---------- chân trang ---------- */
.chan { background: var(--chan-nen); color: var(--chan-chu); padding-block: clamp(48px, 6vw, 72px); }
.chan a { color: var(--chan-chu); text-decoration: none; }
.chan a:hover { color: #FF8C55; text-decoration: underline; }
.chan a:focus-visible { outline-color: #FF8C55; }
.chan .tren { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .chan .tren { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; } }
.chan .hieu img { width: 160px; }
.chan .cau {
  margin-top: 20px; font-size: 19px; font-weight: 600; line-height: 1.4; color: #FFFFFF;
  max-width: 24ch; padding-left: 16px; border-left: 3px solid var(--lua);
}
.chan .phu { margin-top: 14px; font-size: 15px; color: var(--chan-phu); max-width: 36ch; }
.chan h4 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--chan-nhan); margin-bottom: 14px; }
.chan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.chan .duoi {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--chan-vien);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: 14px; color: var(--chan-phu);
}

/* chân trang luôn dùng bản logo trắng trên nền tối đồng nhất (BRAND.md mục 6) */

/* ---------- trang 404 ---------- */
.bon-lo-bon { text-align: center; padding-block: clamp(72px, 12vw, 140px); }
.bon-lo-bon .so { font-size: clamp(64px, 12vw, 120px); font-weight: 800; color: var(--lua); line-height: 1; }
.bon-lo-bon h1 { margin-top: 18px; }
.bon-lo-bon .dan { margin: 20px auto 0; }
.bon-lo-bon .hang-nut { justify-content: center; margin-top: 32px; }

/* ---------- vụn ---------- */
.duong-dan { font-size: 14px; color: var(--muc-45); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.duong-dan a { color: var(--muc-45); text-decoration: none; }
.duong-dan a:hover { color: var(--lua-chu); text-decoration: underline; }
.duong-dan span[aria-hidden] { color: var(--muc-45); }

.tach { height: 1px; background: var(--vien); border: 0; margin: 0; }

.danh-sach-bai { display: flex; flex-direction: column; }
.danh-sach-bai article { padding-block: 28px; border-bottom: 1px solid var(--vien); display: flex; flex-direction: column; gap: 10px; }
.danh-sach-bai h3 a { color: var(--muc); text-decoration: none; }
.danh-sach-bai h3 a:hover { color: var(--lua-chu); }
.danh-sach-bai .meta { font-size: 14px; color: var(--muc-45); display: flex; flex-wrap: wrap; gap: 8px; }