/* ==========================================================================
   IN TÚI GIẤY — giao diện riêng cho /in-tui-giay-gia-re/
   Nạp SAU sections.css qua $page['extra_css']. Mọi lớp mang tiền tố tui-
   (tg- đã thuộc máy tính giá tem nhãn), dùng chung token (tokens.css) và
   thành phần sẵn có (.card, .btn, .chip, .link-arrow, .section-head,
   .eyebrow, .khung-tam…).

   Trang dựng theo hướng "showroom" — cố ý khác sáu landing còn lại:
     hero      lưới ảnh bento 5 ô (1 ô 2×2 + 4 ô 1×1)
     thu-vien  thanh chip lọc DÍNH trong phạm vi mục + hộp chi tiết mẫu
     cau-tao   hình túi GHIM khi cuộn, chấm đánh số sáng theo mục đang xem
     chat-lieu thẻ giấy nền tràn thẻ

   Bậc màn hình theo sections.css: 1180 → 1040 → 900 → 760 → 640 → 520 → 420.
   Mọi hover đổi màu bọc trong @media (hover: hover) — máy cảm ứng bị hover
   dính cứng. Chuyển động kiệm (nhấc 3px, đổi màu .2s), tắt khi reduce.
   ========================================================================== */

/* ---------------------------------------------------------------- Chung */
/* body khi hộp chi tiết mở — không cuộn trang phía sau */
.tui-lock { overflow: hidden; }

/* Neo #mau-TG-001 (mở từ link ngoài) không chui dưới thanh chip dính. */
.page-tui .tui-mau[id] { scroll-margin-top: calc(var(--nav-h) + 80px); }

/* Tên file ảnh gợi ý trong khung tạm — chỉ in khi NP_STAGING */
.tui-anh-ten {
  position: absolute;
  left: var(--s3); right: var(--s3); bottom: var(--s3);
  z-index: 2;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  color: var(--g500);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Hero: chữ + bento */
/* Hàng 1: cụm chữ trái, hai nút phải canh đáy. Hàng 2: bento. */
.tui-hero .wrap { display: grid; gap: var(--s7); }
.tui-hero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--s6) var(--s8);
}
.tui-hero-copy { min-width: 0; }
/* Nút nằm ngoài cột chữ nên không ăn margin-top của .hero-copy--rail .hero-actions;
   đáy nút thẳng đáy câu dẫn, chừa 4px cho bóng chữ. */
.tui-hero-actions { margin-top: 0; padding-bottom: 4px; }

.tui-bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas:
    "lon lon a b"
    "lon lon c xem";
  gap: var(--s4);          /* 16px — đủ chỗ cho bóng lệch 6px khi thẻ nhấc lên */
}
.tui-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.tui-cell--lon { grid-area: lon; }
.tui-cell--a   { grid-area: a; }
.tui-cell--b   { grid-area: b; }
.tui-cell--c   { grid-area: c; }
.tui-cell--xem { grid-area: xem; }

/* Ô ảnh: 4:3 là SÀN — ô lớn 2×2 cao hơn một chút thì flex kéo ảnh cho đầy. */
.tui-cell-media {
  position: relative;
  display: block;
  flex: 1 1 auto;
  aspect-ratio: 4 / 3;
  background: var(--paper-tint);
  overflow: hidden;
}
.tui-cell-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
/* Tên dòng túi đè lên đáy ảnh trên dải tối mờ dần — luôn hiện. Chip mô tả
   hiện thêm khi rê chuột (máy có chuột); máy cảm ứng thì hiện luôn. */
.tui-cell-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: grid;
  gap: 2px;
  padding: var(--s6) var(--s5) var(--s5);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, .78) 100%);
  color: #fff;
}
.tui-cell-cap b { font-size: var(--t-h4); font-weight: var(--w-bold); line-height: 1.2; }
.tui-cell--lon .tui-cell-cap b { font-size: var(--t-h3); }
.tui-cell-tag { font-size: var(--t-label); color: rgba(255, 255, 255, .85); }
@media (hover: hover) {
  .tui-cell-tag { opacity: 0; transform: translateY(4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
  .tui-cell:hover .tui-cell-tag,
  .tui-cell:focus-visible .tui-cell-tag { opacity: 1; transform: none; }
  .tui-cell:hover .tui-cell-media img { transform: scale(1.04); }
}

/* Ô "+N mẫu theo ngành": nền mực, số to màu hồng (đỏ trên nền tối), mũi tên
   góc trên. Không phải .card nên khai hover riêng — cùng kiểu nhấc chéo + bóng
   lệch cứng, bóng màu đỏ vì bóng mực trên ô mực không nhìn thấy. */
.tui-cell--xem {
  display: grid;
  align-content: end;
  gap: var(--s1);
  padding: var(--s5);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  color: #fff;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tui-cell--xem b { font-size: var(--t-stat); line-height: 1; color: #FF8A93; }
.tui-cell--xem > span { font-size: var(--t-sm); color: rgba(255, 255, 255, .8); }
.tui-cell-arrow {
  position: absolute;
  top: var(--s5); right: var(--s5);
  width: 22px; height: 22px;
  color: #fff;
  transition: transform .2s var(--ease);
}
@media (hover: hover) {
  .tui-cell--xem:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--red); }
  .tui-cell--xem:hover .tui-cell-arrow { transform: translateX(4px); }
}

/* Tablet: chữ một cột, nút xuống dưới câu dẫn; bento 2 cột, ô lớn về 16:9. */
@media (max-width: 1039px) {
  .tui-hero-top { grid-template-columns: minmax(0, 1fr); }
  .tui-hero-actions { margin-top: var(--s6); padding-bottom: 0; }
  .tui-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "lon lon"
      "a   b"
      "c   xem";
  }
  .tui-cell--lon .tui-cell-media { aspect-ratio: 16 / 9; }
}
/* Điện thoại: giữ 2 cột (không dải trượt — không cần JS, ảnh ô lớn vẫn là LCP). */
@media (max-width: 640px) {
  .tui-bento { gap: var(--s3); }
  .tui-cell-cap { padding: var(--s5) var(--s4) var(--s4); }
  .tui-cell-cap b { font-size: var(--t-body); }
  .tui-cell--lon .tui-cell-cap b { font-size: var(--t-h4); }
  .tui-cell-tag { display: none; }
  .tui-cell--xem { padding: var(--s4); }
  .tui-cell--xem b { font-size: var(--t-h3); }
  .tui-cell-arrow { top: var(--s4); right: var(--s4); }
}

/* ---------------------------------------------------------------- 01 · Bảng bốn dòng túi */
.tui-bang-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.tui-bang { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tui-bang th,
.tui-bang td {
  padding: var(--s4) var(--s5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.tui-bang thead th {
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--g500);
  background: var(--paper-sub);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tui-bang tbody tr:last-child th,
.tui-bang tbody tr:last-child td { border-bottom: 0; }
.tui-bang td { color: var(--g700); line-height: 1.5; }
/* Cột đầu: khai triển mini + tên + một câu */
.tui-bang-dong { display: flex; gap: var(--s4); align-items: flex-start; min-width: 300px; }
.tui-bang-hinh { flex: none; width: 104px; color: var(--g500); transition: color .2s var(--ease); }
.tui-bang-svg { display: block; width: 104px; height: 64px; }
.tui-bang-ten { display: grid; gap: 4px; }
.tui-bang-ten b { font-size: var(--t-body); color: var(--ink); }
.tui-bang-ten small { font-size: var(--t-label); color: var(--muted); line-height: 1.5; }
.tui-bang-cta { white-space: nowrap; }
.tui-bang-cta .link-arrow { min-height: 0; }
@media (hover: hover) {
  .tui-bang tbody tr:hover th,
  .tui-bang tbody tr:hover td { background: var(--paper-sub); }
  .tui-bang tbody tr:hover .tui-bang-hinh { color: var(--red); }
}
/* ≤760: bảng thành từng khối, nhãn cột in bằng data-nhan */
@media (max-width: 760px) {
  .tui-bang,
  .tui-bang tbody,
  .tui-bang tr { display: block; }
  .tui-bang thead { display: none; }
  .tui-bang tr { padding: var(--s3) 0 var(--s4); border-bottom: 1px solid var(--line); }
  .tui-bang tr:last-child { border-bottom: 0; }
  .tui-bang th,
  .tui-bang td { display: block; padding: var(--s1) var(--s5); border: 0; }
  .tui-bang th.tui-bang-dong { display: flex; min-width: 0; padding-top: var(--s3); padding-bottom: var(--s2); }
  .tui-bang td[data-nhan] {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: var(--s3);
    font-size: var(--t-label);
  }
  .tui-bang td[data-nhan]::before {
    content: attr(data-nhan);
    padding-top: 2px;
    font-size: var(--t-tag);
    font-weight: var(--w-bold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g500);
  }
  .tui-bang-cta { padding-top: var(--s2); }
}
@media (max-width: 420px) {
  .tui-bang-hinh, .tui-bang-svg { width: 84px; }
  .tui-bang-svg { height: 52px; }
}

/* ---------------------------------------------------------------- 02 · Thư viện mẫu */
.tui-demo-note {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin: 0 0 var(--s5);
  padding: var(--s3) var(--s4);
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--t-label);
  line-height: 1.5;
  color: var(--g700);
}
.tui-demo-note .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--g500); }

/* Thanh chip DÍNH trong phạm vi mục: là con của .wrap, đứng sau .section-head
   → chỉ bắt đầu dính khi tiêu đề mục đã cuộn qua, tự nhả khi hết mục nên
   không bao giờ đè lên tiêu đề mục kế. z 40 dưới nav (60). Nền đục theo nền
   mục để thẻ chạy phía sau không lộ qua. */
.tui-loc {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  margin-bottom: var(--s5);
  padding: var(--s3) 0;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.section--tint .tui-loc { background: rgba(248, 250, 252, .94); }
.tui-loc-chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Chip lọc — cùng dáng .tab của gallery nhưng class KHÁC để main.js không bắt */
.tui-loc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--s4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--g600);
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
.tui-loc-chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tui-loc-dem { font-size: var(--t-tag); color: var(--g500); }
.tui-loc-chip.is-active .tui-loc-dem { color: rgba(255, 255, 255, .7); }
@media (hover: hover) {
  .tui-loc-chip:hover { border-color: var(--g400); color: var(--ink); }
  .tui-loc-chip.is-active:hover { color: #fff; }
}
/* Pill "đang lọc theo dòng" có nút bỏ */
.tui-loc-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  font-size: var(--t-label);
  color: var(--g600);
}
.tui-loc-active[hidden] { display: none; }
.tui-loc-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 10px;
  background: var(--red-subtle);
  border: 1px solid rgba(225, 29, 46, .25);
  border-radius: var(--r-pill);
  font-weight: var(--w-semibold);
  color: var(--red);
}
.tui-loc-pill button {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
@media (max-width: 640px) {
  .tui-loc-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tui-loc-chips::-webkit-scrollbar { display: none; }
  .tui-loc-chip { flex: none; min-height: 36px; }
}

/* Lưới thẻ mẫu — ảnh 1:1 (anh Phúc chốt 31/08), 4 → 3 → 2 cột */
.tui-mau-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.tui-mau { display: flex; flex-direction: column; margin: 0; }
.tui-mau[hidden] { display: none; }
.tui-mau-media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--paper-tint);
  overflow: hidden;
  cursor: zoom-in;
}
.tui-mau-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .4s var(--ease);
}
@media (hover: hover) { .tui-mau:hover .tui-mau-media img { transform: scale(1.04); } }
.tui-mau-id {
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 2;
  padding: 3px 8px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  color: var(--ink);
}
.tui-mau-demo {
  position: absolute;
  top: var(--s3); right: var(--s3);
  z-index: 2;
  padding: 3px 8px;
  background: var(--ink);
  border-radius: var(--r-sm);
  font-size: var(--t-tag);
  font-weight: var(--w-semibold);
  color: #fff;
}
.tui-mau-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--s2);
  padding: var(--s5);
}
.tui-mau-nganh {
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.tui-mau-title { font-size: var(--t-h4); line-height: 1.3; }
.tui-mau-title a { color: var(--ink); text-decoration: none; }
.tui-mau-line { font-size: var(--t-label); color: var(--ink); }
.tui-mau-sub { font-size: var(--t-label); line-height: 1.5; color: var(--muted); }
.tui-mau-body .btn { margin-top: auto; padding-top: 0; }
.tui-mau-body .btn { margin-top: auto; }
.tui-mau-body > .btn { margin-top: var(--s3); }
.tui-mau-body > .btn:last-child { margin-top: auto; padding-block: 0; }
.tui-mau-body .tui-mau-sub + .btn { margin-top: var(--s3); }
@media (max-width: 1180px) { .tui-mau-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .tui-mau-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .tui-mau-grid { gap: var(--s3); }
  .tui-mau-body { padding: var(--s4); }
  .tui-mau-sub { display: none; }
  .tui-mau-title { font-size: var(--t-body); }
}

/* Ô trống khi bộ lọc không còn mẫu */
.tui-empty {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  padding: var(--s9) var(--s5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--g700);
}
.tui-empty[hidden] { display: none; }
.tui-empty > .ico { width: 40px; height: 40px; color: var(--g300); }
.tui-empty p { font-size: var(--t-sm); line-height: 1.6; }

/* ---------------------------------------------------------------- Hộp chi tiết mẫu
   Chép khung .mhg-modal của trang cẩm nang hộp (đổi tiền tố): z 90 nằm giữa
   nav-panel (80) và lightbox (100), trên mobilebar (70). ≤760 thành bottom sheet. */
.tui-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s4); }
.tui-modal[hidden] { display: none; }
.tui-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .62); backdrop-filter: blur(4px); }
.tui-modal-dialog {
  position: relative;
  width: min(100%, 960px);
  max-height: calc(100vh - var(--s8));
  overflow: auto;
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  outline: 0;
}
.tui-modal-close {
  position: sticky;
  top: var(--s3);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin: var(--s3) var(--s3) -44px auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .96);
  color: var(--ink);
  box-shadow: var(--sh-sm);
  cursor: pointer;
}
.tui-md { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); padding: var(--s6); }
.tui-md-gallery { position: sticky; top: var(--s6); display: grid; gap: var(--s3); align-content: start; }
.tui-md-main {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.tui-md-main img { width: 100%; height: 100%; object-fit: cover; }
.tui-md-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.tui-md-thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 4px;
  overflow: hidden;
  background: var(--paper-tint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  color: var(--g500);
  cursor: pointer;
}
.tui-md-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tui-md-thumb.is-active { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-subtle); }
.tui-md-caption { font-size: var(--t-label); color: var(--g600); }
.tui-md-info { display: grid; gap: var(--s4); align-content: start; }
.tui-md-head { display: grid; gap: var(--s2); padding-right: 48px; }
.tui-md-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.tui-md-head .tui-mau-id,
.tui-md-head .tui-mau-demo { position: static; }
.tui-md-nganh {
  font-size: var(--t-tag);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
}
.tui-md-head h2 { font-size: var(--t-h3); }
.tui-md-head p { font-size: var(--t-sm); line-height: 1.55; color: var(--g600); }
.tui-md-specs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s3) var(--s4);
  margin: 0;
  padding: var(--s4);
  background: var(--paper-tint);
  border-radius: var(--r-md);
}
.tui-md-specs > div { display: grid; gap: 2px; min-width: 0; }
.tui-md-specs dt { font-size: var(--t-tag); font-weight: var(--w-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--g500); }
.tui-md-specs dd { margin: 0; font-size: var(--t-sm); font-weight: var(--w-medium); color: var(--ink); overflow-wrap: anywhere; }
.tui-md-specs dd small { display: block; font-size: var(--t-tag); font-weight: var(--w-regular); color: var(--g500); }
.tui-md-block h3 { margin-bottom: var(--s2); font-size: var(--t-body); }
.tui-md-block ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); line-height: 1.5; color: var(--g700); }
.tui-md-block li { position: relative; padding-left: 16px; }
.tui-md-block li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.tui-md-ctas { display: grid; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--line); }
.tui-md-ctas .btn { width: 100%; }
.tui-md-ctas-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.tui-md-ctas-row .btn { padding-inline: var(--s3); font-size: var(--t-label); white-space: normal; text-align: center; }
@media (max-width: 760px) {
  .tui-modal { padding: 0; align-items: end; }
  .tui-modal-dialog { max-height: 100vh; max-height: 100dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .tui-md { grid-template-columns: 1fr; padding: var(--s5); padding-bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); }
  .tui-md-gallery { position: static; }
  .tui-md-specs { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- 03 · Cấu tạo (hình ghim + cuộn) */
/* ⚠️ align-items: start BẮT BUỘC — stretch làm cột trái cao bằng cột phải,
   sticky hết chỗ trượt. Không bọc hình trong .card (overflow hidden cắt chấm). */
.tui-ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s9);
  align-items: start;
}
.tui-ct-hinh {
  position: sticky;
  top: calc(var(--nav-h) + var(--s6));
  display: grid;
  gap: var(--s3);
  justify-items: center;
}
/* Khung 4:5. Bề ngang tính ngược từ chiều cao còn lại của màn hình (trừ nav
   và khe) để khung LUÔN giữ đúng tỉ lệ — chấm đánh số đặt theo % nên tỉ lệ
   lệch là chấm trôi khỏi bộ phận. */
.tui-ct-khung {
  position: relative;
  width: min(100%, calc((100vh - var(--nav-h) - 120px) * .8));
  aspect-ratio: 4 / 5;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-sub) 100%);
}
.tui-ct-svg,
.tui-ct-khung > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  color: var(--g500);
}
/* Bộ phận trên hình vẽ: xám nhạt, bộ phận đang xem chuyển đỏ */
.tui-ct-svg [data-part] { color: var(--g500); transition: color .2s var(--ease); }
.tui-ct-hinh[data-active="quai"]  .tui-ct-svg [data-part="quai"],
.tui-ct-hinh[data-active="mieng"] .tui-ct-svg [data-part="mieng"],
.tui-ct-hinh[data-active="than"]  .tui-ct-svg [data-part="than"],
.tui-ct-hinh[data-active="hong"]  .tui-ct-svg [data-part="hong"],
.tui-ct-hinh[data-active="day"]   .tui-ct-svg [data-part="day"] { color: var(--red); }

/* Chấm đánh số — đặt theo --x / --y (%) trên khung */
.tui-cham {
  position: absolute;
  left: var(--x); top: var(--y);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--t-sm);
  font-weight: var(--w-bold);
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--sh-sm);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.tui-cham.is-on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.15);
}
@media (hover: hover) {
  .tui-cham:hover { border-color: var(--red); color: var(--red); }
  .tui-cham.is-on:hover { color: #fff; }
}
.tui-ct-nhan {
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  text-align: center;
}

/* Năm khối bên phải: mỗi khối ≥60vh để cuộn có nhịp; viền trái đỏ + số đỏ
   khi đang xem. Chỉ làm MỜ khối khác khi JS đã chạy (.js-on) — tắt JS mọi
   khối đều rõ. */
/* Đáy cột phải chừa thêm 16vh: khi khối cuối vào giữa màn hình, hộp chứa còn
   đủ cao để hình ghim (≈690px ở màn 900px) đứng nguyên, không bị kéo tuột lên
   theo đáy lưới. */
.tui-ct-list { display: grid; padding-bottom: 16vh; }
.tui-ct-buoc {
  position: relative;
  display: grid;
  gap: var(--s3);
  align-content: center;
  min-height: 60vh;
  padding: var(--s7) 0 var(--s7) var(--s6);
  border-left: 2px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + var(--s6));
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.tui-ct-so { font-size: var(--t-label); font-weight: var(--w-bold); letter-spacing: .06em; color: var(--g500); transition: color .2s var(--ease); }
.tui-ct-buoc h3 { font-size: var(--t-h3); }
.tui-ct-buoc p { max-width: 52ch; font-size: var(--t-body); line-height: var(--lh-body); color: var(--g700); }
.tui-ct-buoc .chip-row { margin-top: var(--s1); }
.tui-ct-buoc.is-on { border-left-color: var(--red); }
.tui-ct-buoc.is-on .tui-ct-so { color: var(--red); }
.tui-ct.js-on .tui-ct-buoc { opacity: .4; }
.tui-ct.js-on .tui-ct-buoc.is-on { opacity: 1; }

@media (max-width: 900px) {
  .tui-ct-grid { grid-template-columns: 1fr; gap: var(--s6); }
  /* Một cột: hình đứng yên trên đầu, không dính (dính chiếm nửa màn điện thoại) */
  .tui-ct-hinh { position: static; width: min(100%, 420px); margin: 0 auto; }
  .tui-ct-khung { width: 100%; }
  .tui-cham { width: 28px; height: 28px; font-size: var(--t-label); }
  .tui-ct-list { padding-bottom: 0; }
  .tui-ct-buoc { min-height: 0; padding: var(--s5) 0 var(--s5) var(--s5); }
  /* Không có hình cạnh bên để đối chiếu thì đừng làm mờ chữ */
  .tui-ct.js-on .tui-ct-buoc { opacity: 1; }
}

/* ---------------------------------------------------------------- 04 · Thẻ giấy nền tràn thẻ */
.tui-giay-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
}
.tui-giay {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 340px;
  padding: 0;
}
/* Mặt giấy làm nền cả thẻ — ảnh thật hoặc CSS mô phỏng (công thức mượn
   .mhg-swatch của trang cẩm nang hộp) */
.tui-sw {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.tui-sw--kraft {
  background-color: #C9A87C;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 7px),
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .2), transparent 45%);
}
.tui-sw--couche {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(135deg, #FFFFFF 0%, #F4F7FA 50%, #E9EEF3 100%);
}
.tui-sw--my-thuat {
  background-color: #C9D4DE;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(15, 23, 42, .06) 0 2px, transparent 2px 6px);
}
/* Chống dầu: kraft trắng ngà, hạt nhiễu nhẹ + dải sáng chéo gợi lớp phủ */
.tui-sw--chong-dau {
  background:
    radial-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px) 0 0 / 4px 4px,
    linear-gradient(115deg, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, 0) 40%),
    linear-gradient(135deg, #FBFAF6 0%, #F3F1EA 55%, #EAE6DA 100%);
}
.tui-giay-body {
  display: grid;
  gap: var(--s3);
  padding: var(--s5);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
}
.tui-giay-body h3 { font-size: var(--t-h3); }
.tui-giay-body p { font-size: var(--t-sm); line-height: 1.5; color: var(--g700); }
.tui-giay-body .link-arrow { min-height: 0; margin-top: var(--s1); }
@media (max-width: 1040px) { .tui-giay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .tui-giay-grid { grid-template-columns: 1fr; }
  .tui-giay { min-height: 280px; }
}

/* ---------------------------------------------------------------- 05 · Cách đo */
.tui-do {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--s7);
  align-items: center;
  padding: var(--s7);
}
.tui-do-hinh { color: var(--g600); }
.tui-do-svg { display: block; width: 100%; height: auto; }
.tui-do-body { display: grid; gap: var(--s5); }
.tui-do-list { display: grid; gap: var(--s4); margin: 0; }
.tui-do-list > div { display: grid; grid-template-columns: 72px 1fr; gap: var(--s4); align-items: start; }
.tui-do-list dt {
  padding-top: 3px;
  font-size: var(--t-label);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}
.tui-do-list dd { margin: 0; font-size: var(--t-sm); line-height: 1.55; color: var(--g700); }
.tui-do-ghi { display: flex; gap: var(--s2); align-items: flex-start; font-size: var(--t-label); color: var(--g600); }
.tui-do-ghi .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--g500); }
.tui-do-body .btn { justify-self: start; }
@media (max-width: 760px) {
  .tui-do { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s5); }
  .tui-do-hinh { max-width: 360px; margin: 0 auto; }
  .tui-do-body .btn { justify-self: stretch; }
}

/* ---------------------------------------------------------------- Giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .tui-cell:hover,
  .tui-cell--xem:hover { transform: none; }
  .tui-cell-media img,
  .tui-mau-media img,
  .tui-cell-tag,
  .tui-cell-arrow,
  .tui-cham,
  .tui-ct-buoc,
  .tui-ct-so,
  .tui-ct-svg [data-part],
  .tui-bang-hinh { transition: none; }
  .tui-cham.is-on { transform: translate(-50%, -50%); }
  .tui-cell:hover .tui-cell-media img,
  .tui-mau:hover .tui-mau-media img { transform: none; }
}