/* ==========================================================================
   giacngungon.vn — hệ thống thiết kế

   Bảng màu lấy từ chủ đề: nền tối như phòng ngủ ban đêm, điểm nhấn hổ phách
   như ánh đèn ngủ ít ánh sáng xanh. Số liệu dùng phông đơn cách vì site này
   nói bằng số đo.

   LƯU Ý KHI SỬA: mọi class trong file này đều đang được component gọi tới.
   Đừng đổi tên class mà không sửa component tương ứng — bố cục sẽ âm thầm
   biến mất mà không báo lỗi nào.
   ========================================================================== */

:root {
  --bg: #12161c;
  --bg-raised: #171c24;
  --line: #242a33;
  --line-strong: #333b47;
  --ink: #edeae3;
  --ink-dim: #9a968c;
  --lamp: #c9964a;
  --lamp-dim: #8a672f;
  --ok: #6fae7d;
  --warn: #d8a13f;
  --bad: #d1685f;

  --measure: 68ch;
  --radius: 6px;

  --font-sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- Bộ màu Brooklyn cho khu nội dung ----------------------------------
   Bật bằng ô chọn ở mục Giao diện. CÙNG MỘT bộ giá trị với cửa hàng, chỉ đổi
   tên biến cho khớp khu này — hai khu không được lệch màu nhau.

   Chữ #333 trên nền trắng đạt 12,63; chữ mờ đậm lại thành #6f6870 vì #777 của
   Brooklyn gốc chỉ đạt 4,48, dưới ngưỡng đọc. */
body.brooklyn {
  --bg:          #ffffff;
  --bg-raised:   #faf7f8;
  --line:        #ece5e7;
  --line-strong: #d8cdd1;
  --ink:         #333333;
  --ink-dim:     #6f6870;
  --lamp:        #ac6070;
  --lamp-dim:    #8f4d5c;
  --ok:          #2f7350;
  --warn:        #9a6a24;
  --bad:         #b03a52;
}
/* Vài chỗ nền tối giả định chữ sáng — đảo lại khi nền sáng */
body.brooklyn .site-header { background: var(--bg); }
/* Nền sáng cần khoảng thở rộng hơn nền tối: chữ đen trên trắng đặc hơn về thị
   giác, nên cùng khoảng cách sẽ thấy chật. */
body.brooklyn .prose h2 { margin-top: 2.6em; }
body.brooklyn .prose h3 { margin-top: 2em; }
body.brooklyn .prose p  { margin-bottom: 1.35em; }
body.brooklyn .tldr { background: #fbf2f4; border-color: #f0dfe4; }
body.brooklyn code, body.brooklyn pre { background: var(--bg-raised); }
/* Liên kết trong đoạn văn dùng màu nhấn khi nền sáng.
   Trên nền tối, liên kết cùng màu chữ vẫn nổi nhờ gạch chân. Trên nền trắng thì
   không — cả trang thành một khối chữ đen, người đọc phải rà mới thấy đường đi. */
body.brooklyn .prose p a,
body.brooklyn .prose li a,
body.brooklyn .prose td a { color: var(--lamp); text-decoration-color: color-mix(in srgb, var(--lamp) 45%, transparent); }
body.brooklyn .prose p a:hover,
body.brooklyn .prose li a:hover,
body.brooklyn .prose td a:hover { color: var(--lamp-dim); text-decoration-color: currentColor; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--lamp); }

:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3 { font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
h1 { font-size: 32px; margin: 0 0 20px; }
h2 { font-size: 22px; margin: 44px 0 12px; }
h3 { font-size: 18px; margin: 32px 0 10px; }

p { margin: 0 0 18px; }
ul, ol { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

.shell { max-width: 900px; margin: 0 auto; padding: 0 24px; }

/* Cột chữ giữ trong khổ đọc (khoảng 70 ký tự mỗi dòng), nhưng bảng, công cụ và
   khối kết quả được dùng hết bề rộng khung. Trước đây mọi thứ đều bị bó trong
   một cột hẹp, để trống hơn 200px bên phải trên màn hình lớn. */
.prose { max-width: none; }
.prose :is(p, ul, ol, h1, h2, h3, .tldr, .answer, .note, .disclosure, blockquote, .crumbs, .pubdate) {
  max-width: var(--measure);
}
.prose :is(table, .table-wrap, .scale-track, .scale-legend) { max-width: none; }

/* Ô nhập của công cụ không nên kéo dài hết khung — dài quá thì khó ngắm chính xác */
.prose :is(.field, .choices) { max-width: 720px; }
.dim { color: var(--ink-dim); }
.mono { font-family: var(--font-mono); }
.small { font-size: 14px; }

.pubdate { margin: -8px 0 22px; }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lamp);
  margin: 0 0 20px;
}

/* Đường dẫn phân cấp và bài liên quan ------------------------------------ */
.crumbs {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dim);
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.crumbs a { color: var(--ink-dim); text-decoration: none; }
.crumbs a:hover { color: var(--lamp); }
.crumbs .sep { margin-left: 6px; color: var(--line-strong); }

.related {
  border-top: 1px solid var(--line);
  margin-top: 44px;
  padding-top: 8px;
}

/* Header / footer ------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
  margin-bottom: 48px;
}
.site-header .row { display: flex; gap: 24px; align-items: baseline; flex-wrap: wrap; }
.site-header .brand { font-weight: 500; text-decoration: none; letter-spacing: -0.01em; }
.site-header .brand-logo { display: block; height: 30px; width: auto; }
.site-header nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.site-header nav a { color: var(--ink-dim); text-decoration: none; }
.site-header nav a:hover { color: var(--lamp); }

.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 72px;
  padding: 28px 0 56px;
  font-size: 14px;
  color: var(--ink-dim);
}
.site-footer nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.site-footer a { color: var(--ink-dim); }

/* Khối bên phải đầu trang: mục Shop và nút mở menu.
   Shop đứng ngoài thanh điều hướng nên nó không bị gấp vào sau nút Menu. */
.hdr-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.site-header .row { flex-wrap: wrap; }

/* Menu trên màn hình hẹp ------------------------------------------------- */
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .site-header .row { gap: 0; justify-content: space-between; align-items: center; }
  /* Shop giữ nguyên vị trí, chỉ nút Menu mới gấp thanh điều hướng lại */
  .hdr-right { gap: 8px; }
  /* Cân đúng chiều cao với nút Menu (40px) — hai nút cạnh nhau lệch 4px thì
     hàng đầu trang trông như đặt nhầm. */
  a.nav-shop { font-size: 14px; padding: 6px 16px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center; }
  .nav-toggle {
    display: block;
    background: none; color: var(--ink-dim);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    font: inherit; font-size: 14px; padding: 7px 13px; cursor: pointer;
    min-height: 40px;
  }
  .nav-toggle:hover { color: var(--lamp); border-color: var(--lamp-dim); }
  .site-header nav { display: none; }
  .site-header.nav-open nav {
    display: flex; flex-direction: column; gap: 0;
    flex-basis: 100%; margin-top: 14px; order: 3;
    border-top: 1px solid var(--line);
  }
  .site-header.nav-open nav a {
    padding: 13px 0;                 /* vùng chạm đủ cao cho ngón tay */
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .site-footer nav { flex-direction: column; gap: 0; }
  .site-footer nav a { padding: 11px 0; border-bottom: 1px solid var(--line); }
}

.chua { color: var(--bad); font-style: italic; }
.pill-dim {
  display: inline-block; font-size: 0.78rem; padding: 1px 8px; border-radius: 4px;
  border: 1px solid var(--line-strong); color: var(--ink-dim); vertical-align: middle;
}

/* Bề mặt riêng cho khu thương mại.
   Khu nội dung là nền tối gần đen để đọc lâu không mỏi. Khu thương mại nâng nền
   lên một bậc và tăng tương phản bề mặt — mắt nhận ra ngay đã sang chỗ khác,
   trước khi đọc bất kỳ chữ nào. */
body.in-shop {
  --bg: #171b22;
  --bg-raised: #1e232c;
  --line: #2b313b;
  --line-strong: #3d4550;
  background: var(--bg);
}
body.in-shop .site-header { background: #12161c; border-bottom-color: #2b313b; }
body.in-shop main.shell { padding-top: 30px; }
/* Nút trong khu thương mại: cao hơn, bo mềm hơn, chữ đậm hơn */
body.in-shop /* Một đặc tả nút duy nhất cho cả hai khu. Trước đây khu nội dung và cửa hàng
   có hai kiểu nút khác nhau về chiều cao, bo góc và độ đậm chữ. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  border: 1px solid var(--lamp); border-radius: var(--radius);
  background: var(--lamp); color: var(--bg);
  font: inherit; font-size: 0.92rem; font-weight: 600;
  text-decoration: none; cursor: pointer; line-height: 1.3;
}
/* Số tiền dùng chữ số đều bề rộng để cột giá thẳng hàng */
body.in-shop .pdp-price, body.in-shop .card-price, body.in-shop .crow b,
body.in-shop .cl-t, body.in-shop .pdp-bar-p { font-variant-numeric: tabular-nums; }

/* ===== KHU THƯƠNG MẠI =====================================================
   Ngôn ngữ hình ảnh cố ý khác khu nội dung: dày hơn, tương phản cao hơn, nút
   to hơn. Người đọc nên nhận ra mình đã sang chỗ khác mà không cần đọc chữ. */

/* Dải thương mại ngay dưới thanh đầu trang */
.shop-strip {
  background: color-mix(in srgb, var(--lamp) 9%, var(--bg-raised));
  border-bottom: 1px solid color-mix(in srgb, var(--lamp) 26%, var(--line));
  font-size: 0.84rem;
}
.shop-strip .shell { display: flex; gap: 26px; flex-wrap: wrap; padding: 9px 0; }
.shop-strip span { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-dim); }
.shop-strip .ic { color: var(--lamp); }

/* Các bước tiếp theo trên trang xác nhận đơn */
.nextsteps { counter-reset: ns; list-style: none; padding: 0; margin: 14px 0 26px; }
.nextsteps li {
  counter-increment: ns; position: relative; padding: 12px 0 12px 40px;
  border-bottom: 1px solid var(--line);
}
.nextsteps li:last-child { border-bottom: 0; }
.nextsteps li::before {
  content: counter(ns); position: absolute; left: 0; top: 12px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-raised); border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 0.8rem; color: var(--lamp);
}
.steps-in { margin: 30px 0 4px; padding-top: 24px; border-top: 1px solid var(--line); }

/* Thanh tiến trình mua */
.steps { display: flex; list-style: none; padding: 0; margin: 0 0 26px; gap: 0; flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 8px; color: var(--ink-dim); font-size: 0.86rem; }
.steps li + li::before {
  content: ""; width: 26px; height: 1px; background: var(--line-strong); margin: 0 12px;
}
.steps b {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-strong); font-size: 0.78rem; font-weight: 600; flex: 0 0 auto;
}
.steps .now { color: var(--ink); font-weight: 500; }
.steps .now b { background: var(--lamp); border-color: var(--lamp); color: var(--bg); }
.steps .done b { border-color: var(--ok); color: var(--ok); }

/* ===== Trang sản phẩm: khối quyết định mua ===== */
.pdp { max-width: none; }
.pdp .crumbs { max-width: none; margin-bottom: 20px; }
.pdp-top {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.9fr);
  gap: 36px; align-items: start; margin-bottom: 46px;
}
.pdp-img { aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; background: var(--bg-raised); }
.pdp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumbs { display: flex; gap: 9px; margin-top: 10px; flex-wrap: wrap; }
.pdp-thumbs a { width: 74px; height: 56px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: block; }
.pdp-thumbs a:hover { border-color: var(--lamp); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp-buy { position: sticky; top: 22px; }
.pdp-buy-in { padding: 0; }
.pdp-buy h1 { font-size: 1.86rem; line-height: 1.22; margin: 0 0 10px; max-width: none; }
.pdp-sub { color: var(--ink-dim); font-size: 1rem; margin: 0 0 22px; max-width: none; }
.pdp-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.pdp-price { font-family: var(--font-mono); font-size: 2.3rem; color: var(--ink); line-height: 1; }
.pdp-old { text-decoration: line-through; color: var(--ink-dim); font-family: var(--font-mono); }
.pdp-off {
  font-size: 0.82rem; font-weight: 700; padding: 3px 9px; border-radius: 5px;
  background: var(--ok); color: var(--bg);
}

/* Hành động chính: một hàng, một nút */
.pdp-act { display: flex; gap: 12px; align-items: stretch; margin-bottom: 12px; }
.qtybox {
  display: flex; align-items: center; border: 1px solid var(--line-strong);
  border-radius: 9px; overflow: hidden; flex: 0 0 auto; background: var(--bg-raised);
}
.qtybox button {
  width: 42px; height: 100%; min-height: 50px; border: 0; background: none;
  color: var(--ink); font-size: 20px; cursor: pointer; line-height: 1;
}
.qtybox button:hover { background: color-mix(in srgb, var(--lamp) 14%, transparent); color: var(--lamp); }
.qtybox input {
  width: 46px; border: 0; background: none; color: var(--ink); text-align: center;
  font-family: var(--font-mono); font-size: 1rem; padding: 0;
}
.btn-buy { flex: 1; min-height: 50px; font-size: 1.02rem; justify-content: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; }
.added-note {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid var(--ok); border-radius: 8px; padding: 11px 14px;
  font-size: 0.9rem; margin-bottom: 14px;
}
.added-note a { font-weight: 500; }

.pdp-facts { list-style: none; padding: 0; margin: 18px 0 0; }
.pdp-facts li {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-dim);
}
.pdp-facts .ic { color: var(--lamp); flex: 0 0 auto; }
.pdp-facts strong { color: var(--ink); }
.pdp-soon {
  border: 1px solid var(--line-strong); border-radius: 11px; padding: 18px 20px; background: var(--bg-raised);
}
.pdp-soon p { margin: 0 0 12px; font-size: 0.94rem; color: var(--ink-dim); }
.pdp-soon p:last-child { margin-bottom: 0; }
.soon-tag {
  display: inline-flex !important; align-items: center; gap: 7px;
  font-size: 0.78rem !important; text-transform: uppercase; letter-spacing: .09em;
  font-weight: 700; color: var(--lamp) !important;
  border: 1px solid color-mix(in srgb, var(--lamp) 40%, transparent);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 14px !important;
}
.soon-do { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.soon-do strong { color: var(--ink); }

/* ===== Phần cho người muốn kiểm ===== */
.pdp-detail { max-width: 820px; }
.pdp-lead { font-size: 1.04rem; color: var(--ink-dim); max-width: 68ch; }
.pdp-h { font-size: 1.24rem; margin: 40px 0 6px; }
.pdp-hint { font-size: 0.92rem; color: var(--ink-dim); max-width: 68ch; }
.pdp-links { font-size: 0.88rem; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }

.folds { margin: 18px 0 0; border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); }
.fold > summary {
  list-style: none; cursor: pointer; padding: 16px 2px;
  display: flex; align-items: center; gap: 11px; font-size: 0.98rem;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary > span { flex: 1; font-weight: 500; }
.fold > summary em {
  font-style: normal; font-size: 0.84rem; color: var(--ink-dim); font-weight: 400;
}
.fold > summary::after {
  content: ""; width: 8px; height: 8px; margin-left: 6px; flex: 0 0 auto;
  border-right: 1.6px solid var(--ink-dim); border-bottom: 1.6px solid var(--ink-dim);
  transform: rotate(45deg); transition: transform .16s ease;
}
.fold[open] > summary::after { transform: rotate(-135deg); }
.fold > summary:hover { color: var(--lamp); }
.fold > summary .ic { color: var(--ink-dim); flex: 0 0 auto; }
.fold-warn > summary .ic { color: var(--warn); }
.fold-ok > summary .ic { color: var(--ok); }
.fold-b { padding: 0 2px 22px; }
.fold-b > *:first-child { margin-top: 0; }
.fold-b > *:last-child { margin-bottom: 0; }

.specs { margin: 0; }
.spec { display: grid; grid-template-columns: minmax(150px, 36%) 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.spec:last-child { border-bottom: 0; }
.spec dt { color: var(--ink-dim); font-size: 0.92rem; }
.spec dd { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.spec-v { font-family: var(--font-mono); }
.spec-n { font-size: 0.86rem; color: var(--ink-dim); }
.spec-src { font-size: 0.78rem; color: var(--ink-dim); opacity: .8; }
.chua { color: var(--bad); font-style: italic; }
ul.plain { list-style: none; padding: 0; }
ul.plain li { padding: 9px 0; border-bottom: 1px solid var(--line); }
ul.plain li:last-child { border-bottom: 0; }
.qa h3 { margin: 18px 0 5px; font-size: 0.98rem; }
.qa h3:first-child { margin-top: 0; }
.qa p { margin: 0; }

.pdp-bar { display: none; }

@media (max-width: 900px) {
  .pdp-top { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .pdp-buy { position: static; }
  .pdp-price { font-size: 2rem; }
  .pdp-detail { max-width: none; }
  .spec { grid-template-columns: 1fr; gap: 3px; }
  .shop-strip .shell { gap: 14px; }
  .shop-strip span { font-size: 0.8rem; }
  .pdp-bar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(8px);
    border-top: 1px solid var(--line-strong);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  }
  .pdp-bar-in { display: flex; align-items: center; gap: 12px; max-width: 620px; margin: 0 auto; }
  .pdp-bar-p { font-family: var(--font-mono); font-size: 1.2rem; color: var(--ink); flex: 1; }
  .pdp-bar .btn { min-height: 46px; padding: 0 22px; }
  .pdp { padding-bottom: 78px; }
}

/* Dải ảnh nhỏ dưới ảnh chính */
.p-thumbs { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.p-thumbs a { display: block; width: 66px; height: 50px; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.p-thumbs a:hover { border-color: var(--lamp); }
.p-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Nút hành động. Chỉ dùng trong khối đặt hàng — không dùng ở phần nội dung,
   để một cái nút trên site này luôn nghĩa là "có giao dịch ở đây". */
.btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.btn {
  display: inline-block; padding: 10px 18px; border-radius: 7px;
  background: var(--lamp); color: #1a1206; font-weight: 500;
  text-decoration: none; border: 1px solid var(--lamp);
}
.btn:hover { background: #d9a659; color: #1a1206; }
.btn-2 { background: transparent; color: var(--lamp); }
.btn-2:hover { background: var(--lamp); color: #1a1206; }

/* Nút giỏ hàng ở đầu trang */
a.nav-cart {
  position: relative; display: inline-flex; align-items: center;
  color: var(--ink-dim); padding: 5px 7px; border-radius: 7px; text-decoration: none;
}
a.nav-cart:hover { color: var(--lamp); background: color-mix(in srgb, var(--lamp) 10%, transparent); }
a.nav-cart span[data-cart-count] {
  position: absolute; top: -2px; right: -4px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--lamp); color: var(--bg);
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
  font-family: var(--font-mono);
}

/* Giỏ hàng ------------------------------------------------------------- */
.cline {
  display: grid; grid-template-columns: 1fr auto auto 30px;
  gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line);
}
.cl-n { display: flex; flex-direction: column; gap: 3px; }
.cl-n em { font-style: normal; font-size: 0.85rem; color: var(--ink-dim); }
.cl-q { display: flex; align-items: center; gap: 4px; }
.cl-q button {
  width: 34px; height: 34px; border: 1px solid var(--line-strong); background: var(--bg-raised);
  color: var(--ink); border-radius: 7px; font-size: 17px; cursor: pointer; line-height: 1;
}
.cl-q button:hover { border-color: var(--lamp); color: var(--lamp); }
.cl-q b { min-width: 30px; text-align: center; font-family: var(--font-mono); }
.cl-t { font-family: var(--font-mono); min-width: 96px; text-align: right; }
.cl-x {
  width: 30px; height: 30px; border: 0; background: none; color: var(--ink-dim);
  font-size: 20px; cursor: pointer; line-height: 1; border-radius: 6px;
}
.cl-x:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }

#cartsum { margin: 18px 0 8px; max-width: 420px; margin-left: auto; }
.crow { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-size: 0.94rem; }
.crow b { font-family: var(--font-mono); }
.crow em { font-style: normal; color: var(--ink-dim); font-size: 0.86rem; }
.crow-t {
  border-top: 1px solid var(--line-strong); margin-top: 4px; padding-top: 12px; font-size: 1.05rem;
}
.crow-t b { color: var(--lamp); font-size: 1.24rem; }

/* Biểu mẫu đặt hàng */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.fld { display: block; margin-bottom: 14px; }
.fld > span { display: block; font-size: 0.86rem; color: var(--ink-dim); margin-bottom: 5px; }
.fld > span i { color: var(--bad); font-style: normal; margin-left: 2px; }
.fld > span em { font-style: normal; opacity: .7; }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 0.96rem;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: 2px solid var(--lamp); outline-offset: -1px; border-color: var(--lamp);
}
.pays { display: grid; gap: 10px; margin: 12px 0; }
.pay {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg-raised); cursor: pointer;
}
.pay:has(input:checked) { border-color: var(--lamp); background: color-mix(in srgb, var(--lamp) 7%, var(--bg-raised)); }
.pay input { margin-top: 3px; }
.pay span { display: flex; flex-direction: column; gap: 3px; }
.pay em { font-style: normal; font-size: 0.86rem; color: var(--ink-dim); }
.btn.added { background: var(--ok); border-color: var(--ok); }

@media (max-width: 560px) {
  .cline { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .cl-t { grid-column: 1; text-align: left; }
  .cl-x { grid-column: 2; justify-self: end; }
  #cartsum { max-width: none; }
}

/* Lưới thẻ sản phẩm ------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
  margin: 16px 0 34px;
}
.card-p {
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .14s ease, transform .14s ease;
}
.card-p:hover { border-color: var(--lamp); transform: translateY(-2px); }
.card-img { display: block; aspect-ratio: 4 / 3; background: var(--bg); overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ô chờ ảnh: vạch chéo nhạt, không dùng chữ "no image" */
.ph {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(135deg,
    var(--bg) 0 9px, var(--bg-raised) 9px 18px);
}
.card-b { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 15px; flex: 1; }
.card-t { font-weight: 500; line-height: 1.35; }
.card-s { font-size: 0.87rem; color: var(--ink-dim); line-height: 1.45; }
.card-f {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 10px;
}
.card-price { font-family: var(--font-mono); font-size: 1.02rem; color: var(--lamp); }

/* Nhãn tình trạng. Ba màu cho ba nghĩa khác nhau, không dùng cùng một màu xám. */
.st {
  display: inline-block; font-size: 0.76rem; padding: 2px 9px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.st-ok   { color: var(--ok); }
.st-soon { color: var(--lamp); }
.st-out  { color: var(--ink-dim); }

/* Khối đầu trang sản phẩm ------------------------------------------------- */
.p-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin: 6px 0 4px;
}
.p-img {
  aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-raised);
}
.p-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-buy h1 { margin: 0 0 6px; }
.p-buy .lede { margin: 0 0 14px; }
.p-buy .price { font-size: 1.75rem; margin: 0 0 8px; }
.p-sum { font-size: 0.96rem; color: var(--ink-dim); }
.p-cta {
  margin-top: 16px; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-raised);
}
.p-cta p { margin: 0 0 8px; }
.p-cta p:last-child { margin-bottom: 0; }
.p-cta a { font-weight: 500; }

@media (max-width: 720px) {
  .p-hero { grid-template-columns: 1fr; gap: 18px; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
}

/* Mục Shop trên thanh điều hướng.
   Viền và màu nhấn để phân biệt kênh có giao dịch với các chuyên mục nội dung —
   người đọc nên biết mình đang bấm vào đâu trước khi bấm. */
/* Nút Shop. Selector không gắn với #mainnav vì nút đã tách ra khối bên phải —
   gắn vào đó thì mọi ô tinh chỉnh ở mục Giao diện mất tác dụng. */
a.nav-shop {
  color: var(--lamp);
  border: 1px solid color-mix(in srgb, var(--lamp) 45%, transparent);
  border-radius: 999px;
  padding: 4px 15px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
}
a.nav-shop-img { padding: 2px 8px; display: inline-flex; align-items: center; }
a.nav-shop-img img { height: 24px; width: auto; display: block; }
a.nav-shop-img:hover { background: transparent; }
a.nav-shop-img:hover img { opacity: .82; }

a.nav-shop:hover {
  color: var(--bg);
  background: var(--lamp);
  border-color: var(--lamp);
}

/* Kênh Shop --------------------------------------------------------------- */
/* Khối công khai xung đột lợi ích. Cố ý dùng viền màu nhấn và đặt cao trên
   trang: người đọc phải thấy nó trước khi đọc lời quảng cáo, không phải sau. */
.disclose {
  border: 1px solid var(--lamp);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 13px 16px;
  margin: 18px 0 22px;
  background: color-mix(in srgb, var(--lamp) 7%, var(--bg-raised));
}
.disclose p { margin: 0; font-size: 0.94rem; }

.lede { font-size: 1.08rem; color: var(--ink-dim); margin: -4px 0 4px; }

.price {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--lamp);
  margin: 22px 0 4px;
}

/* Cảnh báo hiện thẳng trên trang khi thiếu khối bắt buộc — cố ý để lộ,
   vì một trang bán hàng thiếu thông số thì người đọc nên biết. */
.msg-bad {
  border: 1px solid var(--bad);
  border-radius: var(--radius);
  padding: 12px 15px;
  background: color-mix(in srgb, var(--bad) 8%, var(--bg-raised));
}
.msg-bad p { margin: 0; color: var(--bad); font-size: 0.94rem; }

/* Ảnh đầu trang chủ ------------------------------------------------------ */
.banner {
  margin: 0 0 26px;
  max-width: none;                 /* tràn hết bề rộng khung, không bó theo khổ đọc */
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
}
.banner img { display: block; width: 100%; height: auto; }

@media (max-width: 560px) {
  .banner { margin: 0 0 20px; border-radius: 0; margin-left: -24px; margin-right: -24px; }
}

/* Khối nội dung --------------------------------------------------------- */
.tldr {
  border-left: 2px solid var(--lamp);
  background: var(--bg-raised);
  padding: 16px 20px;
  margin: 0 0 28px;
}
.tldr p { margin: 0; }

.answer {
  border-left: 2px solid var(--line-strong);
  padding: 2px 0 2px 16px;
  margin: 0 0 18px;
}
.answer p { margin: 0; }

.note {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 24px 0;
  font-size: 15px;
  color: var(--ink-dim);
}

table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--ink-dim); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }

/* Điều khiển ------------------------------------------------------------ */
.field { margin-bottom: 22px; }
.field > label, .field > .label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 15px; font-weight: 500; margin-bottom: 8px;
}
.field .val { font-family: var(--font-mono); font-size: 16px; color: var(--lamp); }

input[type="range"] { width: 100%; accent-color: var(--lamp); }
input[type="number"], select {
  width: 100%; padding: 9px 11px; font-size: 15px;
  background: var(--bg-raised); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-mono);
}

.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice {
  text-align: left; padding: 10px 12px; font-size: 15px; cursor: pointer;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: inherit;
}
.choice:hover { border-color: var(--lamp-dim); }
.choice[aria-pressed="true"] { background: var(--lamp); border-color: var(--lamp); color: #1a1206; font-weight: 500; }
.choice.multi[aria-pressed="true"] { background: var(--bg-raised); border-color: var(--lamp); color: var(--ink); }

.result { border-top: 1px solid var(--line); margin-top: 36px; padding-top: 28px; }
.result .big { font-family: var(--font-mono); font-size: 34px; font-weight: 500; color: var(--lamp); }

.scale-track { position: relative; height: 34px; margin: 20px 0 4px; }
.scale-track .base { position: absolute; inset-inline: 0; top: 12px; height: 8px; border-radius: 4px; background: var(--line-strong); }
.scale-track .band { position: absolute; top: 12px; height: 8px; border-radius: 4px; background: var(--lamp); }
.scale-track .band.alt { top: 24px; height: 5px; background: var(--line-strong); }
.scale-legend { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-dim); }

textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  font: inherit; resize: vertical;
}

.link-btn { background: none; border: none; padding: 0; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--lamp); }

.affiliate-tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--lamp); border: 1px solid var(--lamp-dim);
  border-radius: 3px; padding: 1px 5px; margin-left: 6px; white-space: nowrap;
}

.disclosure {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 14px 16px; margin: 24px 0; font-size: 15px;
}

blockquote { margin: 20px 0; }

@media (max-width: 560px) {
  body { font-size: 16px; }
  h1 { font-size: 26px; }
  h2 { font-size: 20px; }
  .choices { grid-template-columns: minmax(0, 1fr); }

  /* Bảng nhiều cột không thu nhỏ vừa màn hình hẹp. Cho cuộn ngang trong khung
     riêng thay vì để nó đẩy cả trang tràn ra ngoài. */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 20px 0; }
  .table-wrap table { margin: 0; min-width: 480px; }
  .table-wrap + .table-hint { font-size: 13px; color: var(--ink-dim); margin: -12px 0 18px; }

  th, td { padding: 8px 9px; }
  .scale-legend { font-size: 12px; }
  .result .big { font-size: 28px; }
}

/* === Giao diện do người dùng đặt === */
:root {
  --measure: 86ch;
}
body { font-size: 16px; }
h1 { font-size: 30px; }
h2 { font-size: 20px; }
.shell { max-width: 960px; }
a.nav-shop { color: #4ac9c1; }
a.nav-shop { font-weight: 600; }
a.nav-shop { border-radius: 6px; }
.site-header .brand { color: #d1685f; }
.site-header .brand:hover { color: #9a968c; }