/* ============================================================================
   Trang giới thiệu — quanlydisan.org

   HƯỚNG THIẾT KẾ: nền mực sâu, bề mặt phân lớp, và một HỆ MÀU ĐỊNH DANH —
   mỗi nhóm đối tượng di sản mang một màu riêng, dùng lại được trong CMS.
   Màu ở đây là token nhận dạng chứ không phải trang trí: nhìn màu biết đang
   ở nhóm nào. Thang chữ và cách xếp lớp bề mặt tham chiếu hệ thiết kế hạ
   tầng doanh nghiệp (kho design-md, bộ `hashicorp`) — nhưng màu thì thay
   hoàn toàn bằng bảng rút từ chất liệu di sản Việt, đẩy sáng để nổi trên nền.

   THANG KHOẢNG CÁCH: 4 8 12 16 24 32 48 64 96 128 — không gõ số ngoài thang.
   ========================================================================= */

:root {
  /* ── Nền giấy: bốn lớp, phân biệt bằng sắc độ giấy chứ không bằng đường kẻ.
        Lấy từ giấy hồ sơ kiểm kê — ngà, không phải trắng tinh. */
  --nen:        #FBFAF7;
  --be-mat-1:   #FFFFFF;
  --be-mat-2:   #F5F2EC;
  --be-mat-3:   #EDE8DF;
  --ke:         #E6E0D6;
  --ke-dam:     #D6CDBE;

  /* ── Chữ: mực nâu đen, không phải đen tuyệt đối */
  --chu:        #1A1614;
  --chu-mo:     #5C534C;
  --chu-nhat:   #8C8177;

  /* ── Màu chính: sơn son. Đúng màu brand của CMS, để trang giới thiệu và
        phần mềm nhìn ra là cùng một hệ thống. */
  --chinh:      #8B1E1E;
  --chinh-dam:  #6E1414;

  /* ── Bảy màu định danh, rút từ chất liệu di sản. Bản TRẦM để đọc được trên
        nền giấy — cũng chính là bảng màu đang dùng trong CMS. */
  --lam:        #2B4C7E;   /* men lam gốm  — di tích           */
  --son:        #A8342A;   /* sơn son      — lễ hội            */
  --dat:        #B4643A;   /* đất nung     — làng nghề         */
  --the:        #A8801F;   /* thếp vàng    — nghệ nhân         */
  --dong:       #3F7355;   /* đồng gỉ      — hiện vật          */
  --cham:       #5B4B8A;   /* tím chàm     — tài liệu          */
  --ngoc:       #2E7D8F;   /* lam ngọc     — điểm thuyết minh  */

  --radius:     14px;
  --radius-nho: 9px;
  --radius-lon: 20px;

  --k1: 4px;  --k2: 8px;  --k3: 12px; --k4: 16px; --k5: 24px;
  --k6: 32px; --k7: 48px; --k8: 64px; --k9: 96px; --k10: 128px;
}


* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu-mo);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px; font-weight: 400; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: 'Be Vietnam Pro', system-ui, sans-serif;
  color: var(--chu); margin: 0; font-weight: 700;
}
h1 { font-size: clamp(38px, 5.4vw, 74px); line-height: 1.08; letter-spacing: -.032em; }
h2 { font-size: clamp(27px, 3.3vw, 46px); line-height: 1.14; letter-spacing: -.026em; }
h3 { font-size: 20px; line-height: 1.24; letter-spacing: -.012em; font-weight: 600; }
p  { margin: 0; }
a  { color: var(--chinh); text-decoration: none; }

img { max-width: 100%; }
svg.lucide, [data-lucide] { width: 20px; height: 20px; stroke-width: 1.7; flex: none; }

.bao { width: min(1240px, 100% - 48px); margin-inline: auto; }

.bo-qua {
  position: absolute; left: -9999px; top: var(--k2); z-index: 100;
  background: var(--chu); color: var(--nen); padding: var(--k3) var(--k4);
  border-radius: var(--radius-nho); font-weight: 600;
}
.bo-qua:focus { left: var(--k5); }
:focus-visible { outline: 2px solid var(--chinh); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(139,30,30,.16); color: var(--chu); }

/* ───────────────────────────── nhãn mã: ngành này sống bằng mã hồ sơ */
.nhan-ma {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
  color: var(--chu-nhat); margin: 0 0 var(--k4);
  display: flex; align-items: center; gap: var(--k3); text-transform: uppercase;
}
.nhan-ma::after { content: ''; flex: 1; height: 1px; background: var(--ke); max-width: 140px; }

/* ───────────────────────────── nút */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k2);
  padding: 10px var(--k4); border-radius: var(--radius-nho);
  font: 600 14px 'IBM Plex Sans', sans-serif; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s, background .18s, border-color .18s;
}
.nut.chinh { background: var(--chinh); color: #fff; }
.nut.chinh:hover { background: var(--chinh-dam); box-shadow: 0 6px 18px rgba(139,30,30,.22); }
.nut.phu { background: var(--be-mat-1); color: var(--chu); border-color: var(--ke-dam); }
.nut.phu:hover { background: var(--be-mat-2); border-color: var(--chu-nhat); }
.nut.lon { padding: var(--k3) var(--k5); font-size: 15px; }

/* ───────────────────────────── thanh trên */
.thanh-tren {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,250,247,.86); backdrop-filter: blur(14px) saturate(130%);
  border-bottom: 1px solid var(--ke);
}
.thanh-tren .bao { display: flex; align-items: center; gap: var(--k5); height: 72px; }

.hieu { display: flex; align-items: center; gap: var(--k3); color: var(--chu); }
.dau-hieu {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: var(--chinh);
  box-shadow: none;
}
.hieu > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.hieu strong { font-family: 'Be Vietnam Pro', sans-serif; font-size: 16px; font-weight: 700; }
.hieu small { font-size: 11.5px; color: var(--chu-nhat); white-space: nowrap; }

.dieu-huong { display: flex; gap: var(--k1); margin-left: auto; }
.dieu-huong a {
  padding: var(--k2) var(--k3); border-radius: 8px; font-size: 14.5px;
  font-weight: 500; color: var(--chu-mo); transition: color .16s, background .16s;
  /* 🪤 Không cho xuống dòng: ở dải 900–1200px vẫn thừa chỗ ngang, nhưng nếu
     cho phép ngắt chữ thì "Phạm vi quản lý" tách hai dòng và cả thanh cao gấp
     đôi — trông như vỡ. Đã đo ở 1024px. */
  white-space: nowrap;
}
.dieu-huong a:hover { color: var(--chu); background: var(--be-mat-2); }

/* ───────────────────────────── mở đầu
   Nền khí quyển ghép từ chính các màu định danh — nhiều nguồn sáng mờ chồng
   nhau, không phải một vệt gradient trang trí. */
.mo-dau { position: relative; padding: var(--k10) 0 var(--k9); overflow: hidden; }
.mo-dau::before {
  content: ''; position: absolute; inset: -20% -10% auto -10%; height: 820px; pointer-events: none;
  background:
    radial-gradient(900px 520px at 78% 8%, rgba(139,30,30,.05), transparent 64%),
    linear-gradient(180deg, var(--be-mat-2), transparent 62%);
}
/* Lưới mờ: gợi bảng kiểm kê, rất nhạt để không thành hoa văn */
.mo-dau::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .8;
  background-image: linear-gradient(var(--ke) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ke) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(900px 520px at 30% 30%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(900px 520px at 30% 30%, #000 10%, transparent 76%);
}
.mo-dau .bao { position: relative; z-index: 1; }

.hai-cot { display: grid; grid-template-columns: 1.02fr .98fr; gap: var(--k8); align-items: center; }
.hai-cot.can-tren { align-items: start; }

.loi-mo .dan { font-size: 19px; color: var(--chu-mo); margin-top: var(--k5); max-width: 33em; line-height: 1.68; }
.hang-nut { display: flex; flex-wrap: wrap; gap: var(--k3); margin-top: var(--k7); }

/* Phiếu hồ sơ — điểm nhớ của trang */
.phieu {
  margin: 0; border-radius: var(--radius-lon); overflow: hidden;
  background: var(--be-mat-1);
  border: 1px solid var(--ke-dam);
  box-shadow: 0 18px 40px -20px rgba(26,22,20,.3);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s;
}
.phieu:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -18px rgba(26,22,20,.28); }

.phieu-dau {
  display: flex; align-items: center; justify-content: space-between; gap: var(--k3);
  padding: var(--k4) var(--k5); background: var(--be-mat-2);
  border-bottom: 1px solid var(--ke);
}
.phieu-dau .ma { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .06em; color: var(--lam); }
.the-tt {
  display: inline-flex; align-items: center; gap: var(--k1);
  background: rgba(53,211,153,.14); color: var(--dong);
  border: 1px solid rgba(53,211,153,.3);
  padding: var(--k1) var(--k3); border-radius: 999px; font-size: 12.5px; font-weight: 600;
}
.the-tt [data-lucide], .the-tt svg { width: 14px; height: 14px; }

.phieu-than { padding: var(--k6) var(--k5); }
.phieu-than h2 { font-size: 26px; letter-spacing: -.02em; }
.dia-ban { display: flex; align-items: center; gap: var(--k2); color: var(--chu-nhat); font-size: 14px; margin-top: var(--k3); }
.dia-ban [data-lucide], .dia-ban svg { width: 15px; height: 15px; }

.phieu-truong { margin: var(--k6) 0 0; display: grid; gap: var(--k4); }
.phieu-truong div {
  display: grid; grid-template-columns: 150px 1fr; gap: var(--k3);
  padding-bottom: var(--k4); border-bottom: 1px solid var(--ke); align-items: center;
}
.phieu-truong div:last-child { border-bottom: 0; padding-bottom: 0; }
.phieu-truong dt { color: var(--chu-nhat); font-size: 13.5px; }
.phieu-truong dd { margin: 0; font-weight: 600; font-size: 15px; color: var(--chu); display: flex; align-items: center; gap: var(--k3); }
.thanh-diem { flex: 1; height: 8px; background: var(--be-mat-3); border-radius: 999px; overflow: hidden; max-width: 130px; }
.thanh-diem span { display: block; height: 100%; border-radius: 999px; background: var(--lam); }

.phieu-chan {
  display: flex; gap: var(--k3); align-items: flex-start;
  padding: var(--k4) var(--k5); background: var(--be-mat-2);
  border-top: 1px solid var(--ke); font-size: 13.5px; color: var(--chu-nhat);
}
.phieu-chan [data-lucide], .phieu-chan svg { width: 17px; height: 17px; color: var(--dong); margin-top: 2px; }

/* ───────────────────────────── mảng chung */
.mang { padding: var(--k9) 0; position: relative; }
.mang.nen-nhat { background: var(--be-mat-1); border-block: 1px solid var(--ke); }
.mang.nen-muc { background: var(--be-mat-2); }

.tieu-de-mang { max-width: 20ch; }
.mang .dan-mang { margin-top: var(--k5); max-width: 62ch; color: var(--chu-mo); font-size: 17.5px; line-height: 1.68; }

/* ───────────────────────────── bảy nhóm đối tượng */
.luoi-the {
  list-style: none; padding: 0; margin: var(--k8) 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: var(--k4);
}
.luoi-the li {
  position: relative; overflow: hidden;
  background: var(--be-mat-1); border: 1px solid var(--ke);
  border-radius: var(--radius); padding: var(--k6) var(--k5);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s, background .22s;
}
.luoi-the li::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px 180px at 50% -20%, var(--mau), transparent 66%);
  opacity: 0; transition: opacity .28s;
}
.luoi-the li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--mau) 46%, transparent); background: var(--be-mat-2); }
.luoi-the li:hover::after { opacity: .14; }
.luoi-the li > * { position: relative; z-index: 1; }
.luoi-the li [data-lucide], .luoi-the li svg {
  width: 26px; height: 26px; color: var(--mau);
}
.luoi-the li h3 { margin: var(--k4) 0 var(--k2); }
.luoi-the li p { font-size: 14.5px; color: var(--chu-nhat); }

.m-lam { --mau: var(--lam); }   .m-son { --mau: var(--son); }
.m-dat { --mau: var(--dat); }   .m-the { --mau: var(--the); }
.m-dong { --mau: var(--dong); } .m-muc { --mau: var(--cham); }
.m-lam-nhat { --mau: var(--ngoc); }

/* ───────────────────────────── ba cấp */
.thap {
  list-style: none; padding: 0; margin: var(--k8) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k5);
}
.thap li {
  position: relative; border-radius: var(--radius); padding: var(--k6);
  background: linear-gradient(180deg, var(--be-mat-2), var(--be-mat-1));
  border: 1px solid var(--ke);
}
.thap li::before {
  content: ''; position: absolute; left: var(--k6); right: var(--k6); top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--cap-mau, var(--lam)), transparent);
}
.thap li:nth-child(1) { --cap-mau: var(--dong); }
.thap li:nth-child(2) { --cap-mau: var(--lam); }
.thap li:nth-child(3) { --cap-mau: var(--the); }
.thap li .cap {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .14em;
  color: var(--cap-mau); text-transform: uppercase;
}
.thap li h3 { margin: var(--k3) 0; font-size: 21px; }
.thap li p { font-size: 14.5px; color: var(--chu-nhat); }
.thap li:not(:last-child)::after {
  content: ''; position: absolute; right: calc(var(--k5) / -2 - 6px); top: 50%;
  width: 11px; height: 11px; border-top: 2px solid var(--ke-dam); border-right: 2px solid var(--ke-dam);
  transform: translateY(-50%) rotate(45deg);
}

/* ───────────────────────────── năm bước */
.buoc {
  list-style: none; padding: 0; margin: var(--k8) 0 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--k5);
}
.buoc li { position: relative; padding-top: var(--k6); }
.buoc li::before {
  content: ''; position: absolute; top: 17px; left: 18px; right: 0; height: 1px;
  background: repeating-linear-gradient(90deg, var(--ke-dam) 0 6px, transparent 6px 14px);
}
.buoc li:last-child::before { display: none; }
.buoc .so {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; margin-top: calc(var(--k6) * -1);
  background: var(--be-mat-2); border: 1px solid var(--ke-dam); color: var(--chu);
  font: 600 14px 'IBM Plex Mono', monospace;
  transition: border-color .2s, color .2s, box-shadow .2s;
}
.buoc li:hover .so { border-color: var(--lam); color: var(--lam); }
.buoc li h3 { margin: var(--k5) 0 var(--k2); font-size: 17px; }
.buoc li p { font-size: 14px; color: var(--chu-nhat); }

/* ───────────────────────────── đặc điểm nền tảng */
.luoi-diem { margin-top: var(--k8); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--k5); }
.luoi-diem > div {
  background: var(--be-mat-1); border: 1px solid var(--ke);
  border-radius: var(--radius); padding: var(--k6);
  transition: transform .22s cubic-bezier(.22,.61,.36,1), border-color .22s, background .22s;
}
.luoi-diem > div:hover { transform: translateY(-4px); border-color: var(--ke-dam); background: var(--be-mat-2); }
.luoi-diem [data-lucide], .luoi-diem svg { width: 24px; height: 24px; color: var(--lam); }
.luoi-diem > div:nth-child(2) [data-lucide] { color: var(--cham); }
.luoi-diem > div:nth-child(3) [data-lucide] { color: var(--dong); }
.luoi-diem > div:nth-child(4) [data-lucide] { color: var(--the); }
.luoi-diem > div:nth-child(5) [data-lucide] { color: var(--ngoc); }
.luoi-diem > div:nth-child(6) [data-lucide] { color: var(--son); }
.luoi-diem h3 { margin: var(--k4) 0 var(--k2); }
.luoi-diem p { font-size: 14.5px; color: var(--chu-nhat); }

/* ───────────────────────────── căn cứ pháp lý */
.luoi-can-cu { margin-top: var(--k8); display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--k4); }
.can-cu {
  position: relative; overflow: hidden;
  background: var(--be-mat-1); border: 1px solid var(--ke);
  border-radius: var(--radius); padding: var(--k6) var(--k5);
  transition: transform .22s, border-color .22s, background .22s;
}
.can-cu::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--mau), transparent 88%);
}
.can-cu:hover { transform: translateY(-4px); background: var(--be-mat-2); border-color: color-mix(in srgb, var(--mau) 40%, transparent); }
.can-cu .so-hieu {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; font-weight: 500;
  color: var(--mau); letter-spacing: .04em;
}
.can-cu h3 { margin: var(--k3) 0; font-size: 17px; }
.can-cu .ngay { font-size: 13px; color: var(--chu-nhat); padding-bottom: var(--k4); border-bottom: 1px solid var(--ke); }
.can-cu .y-nghia { font-size: 14px; color: var(--chu-mo); margin-top: var(--k4); }
.can-cu strong { color: var(--chu); }

/* Đối chiếu trước / sau */
.doi-chieu { margin-top: var(--k7); display: grid; grid-template-columns: 1fr 1fr; gap: var(--k5); }
.doi-chieu > div { border-radius: var(--radius); padding: var(--k6); border: 1px solid var(--ke); }
.cot-truoc { background: linear-gradient(180deg, rgba(168,52,42,.06), transparent 70%); }
.cot-sau   { background: linear-gradient(180deg, rgba(63,115,85,.08), transparent 70%); }
.doi-chieu h3 { display: flex; align-items: center; gap: var(--k2); font-size: 16px; margin-bottom: var(--k5); }
.cot-truoc h3 { color: var(--son); }
.cot-sau h3   { color: var(--dong); }
.doi-chieu ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--k4); }
.doi-chieu li { position: relative; padding-left: var(--k5); font-size: 14.5px; color: var(--chu-mo); }
.doi-chieu li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; }
.cot-truoc li::before { background: var(--son); }
.cot-sau li::before   { background: var(--dong); }

/* ───────────────────────────── biểu đồ trọng số */
.bieu-do {
  margin: 0; border-radius: var(--radius-lon); padding: var(--k6);
  background: linear-gradient(180deg, var(--be-mat-2), var(--be-mat-1));
  border: 1px solid var(--ke-dam); box-shadow: 0 12px 28px -14px rgba(26,22,20,.22);
}
.bieu-do figcaption { margin-bottom: var(--k6); }
.bieu-do figcaption strong { display: block; font-family: 'Be Vietnam Pro', sans-serif; font-size: 19px; color: var(--chu); }
.cot-nhom { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--k4); }
.cot-nhom li { display: grid; grid-template-columns: 1fr 104px 26px; gap: var(--k4); align-items: center; }
.cot-nhom .ten-nhom { font-size: 13.5px; color: var(--chu-mo); }
.cot-nhom .cot-do { height: 10px; background: var(--be-mat-3); border-radius: 999px; overflow: hidden; }
.cot-nhom .muc {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mau) 62%, transparent), var(--mau));
  box-shadow: 0 0 14px color-mix(in srgb, var(--mau) 55%, transparent);
  transition: width 1s cubic-bezier(.22,.61,.36,1);
}
.da-hien .cot-nhom .muc { width: calc(var(--phan-tram) * 100 / 15); }
.cot-nhom .diem { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--mau); text-align: right; }
@media (prefers-reduced-motion: reduce) { .cot-nhom .muc { transition: none; } }

.muc-do { list-style: none; margin: var(--k7) 0 0; padding: 0; display: grid; gap: var(--k3); }
.muc-do li { display: flex; align-items: center; gap: var(--k4); font-size: 14px; color: var(--chu-nhat); }
.muc-do .bac {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; font-weight: 500;
  padding: var(--k1) var(--k3); border-radius: 999px; flex: none; min-width: 64px; text-align: center;
  border: 1px solid currentColor;
}
.bac.b1 { color: var(--chu-nhat); } .bac.b2 { color: var(--dat); }
.bac.b3 { color: var(--the); }      .bac.b4 { color: var(--lam); }
.bac.b5 { color: var(--dong); }

/* ───────────────────────────── dải số liệu */
.dai-so {
  position: relative; padding: var(--k8) 0;
  background: var(--be-mat-2); border-block: 1px solid var(--ke);
}

/* Bốn con số khổng lồ dàn đều là khuôn ai cũng dùng và không nói thêm được gì.
   Đây đọc như một dòng trong biểu thống kê hành chính: nhãn trước, số sau,
   ngăn bằng đường kẻ — đúng cách ngành này trình bày số liệu. */
.so-lieu {
  margin: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ke); border-radius: var(--radius);
  background: var(--be-mat-1); overflow: hidden;
}
.so-lieu div {
  display: flex; flex-direction: column; gap: var(--k1);
  padding: var(--k5) var(--k5);
  border-left: 1px solid var(--ke);
}
.so-lieu div:first-child { border-left: 0; }
.so-lieu dt {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--chu-nhat); order: 1;
}
.so-lieu dd {
  margin: 0; order: 2; line-height: 1.05;
  font-family: 'Be Vietnam Pro', sans-serif; font-size: 34px; font-weight: 700;
  color: var(--chu); font-variant-numeric: tabular-nums;
}
.dai-so .ghi-chu {
  margin-top: var(--k4); font-size: 13px; color: var(--chu-nhat);
  display: flex; gap: var(--k2); align-items: flex-start;
}

/* ───────────────────────────── đơn vị vận hành */
.the-lien-he {
  background: linear-gradient(180deg, var(--be-mat-2), var(--be-mat-1));
  border: 1px solid var(--ke-dam); border-radius: var(--radius-lon); padding: var(--k7);
}
.the-lien-he img { margin-bottom: var(--k6); }
.the-lien-he dl { margin: 0; display: grid; gap: var(--k5); }
.the-lien-he dt { display: flex; align-items: center; gap: var(--k2); font-size: 12.5px; color: var(--chu-nhat); margin-bottom: var(--k1); }
.the-lien-he dt [data-lucide], .the-lien-he dt svg { width: 15px; height: 15px; }
.the-lien-he dd { margin: 0; font-weight: 600; font-size: 15px; color: var(--chu); }

/* ───────────────────────────── liên hệ, góp ý, hợp tác */
.lien-he { background: var(--be-mat-1); border-block: 1px solid var(--ke); }
.khung-gui { margin-top: var(--k8); display: grid; grid-template-columns: .88fr 1.12fr; gap: var(--k8); align-items: start; }
.loai-viec { display: grid; gap: var(--k3); }
.loai-viec > div {
  display: flex; gap: var(--k4); align-items: flex-start;
  background: var(--be-mat-2); border: 1px solid var(--ke);
  border-radius: var(--radius); padding: var(--k5);
  transition: transform .2s, border-color .2s;
}
.loai-viec > div:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--mau) 45%, transparent); }
.loai-viec [data-lucide], .loai-viec svg {
  width: 22px; height: 22px; color: var(--mau);
}
.loai-viec h3 { font-size: 16px; margin-bottom: var(--k1); }
.loai-viec p { font-size: 13.5px; color: var(--chu-nhat); }

.bieu-mau {
  background: linear-gradient(180deg, var(--be-mat-2), var(--be-mat-1));
  border: 1px solid var(--ke-dam); border-radius: var(--radius-lon);
  padding: var(--k7); box-shadow: 0 12px 28px -14px rgba(26,22,20,.2);
}
.hang-o { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k4); }
.o-nhap { display: flex; flex-direction: column; gap: var(--k2); margin-bottom: var(--k5); }
.o-nhap label { font-size: 13.5px; font-weight: 600; color: var(--chu-mo); }
.o-nhap label .sao { color: var(--son); }
.o-nhap input, .o-nhap select, .o-nhap textarea {
  font: inherit; font-size: 15px; color: var(--chu);
  padding: var(--k3) var(--k4); border: 1px solid var(--ke-dam);
  border-radius: var(--radius-nho); background: var(--be-mat-1); outline: 0;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.o-nhap select option { background: var(--be-mat-2); color: var(--chu); }
.o-nhap textarea { resize: vertical; min-height: 124px; }
.o-nhap input::placeholder, .o-nhap textarea::placeholder { color: var(--chu-nhat); }
.o-nhap input:focus, .o-nhap select:focus, .o-nhap textarea:focus {
  border-color: var(--chinh); box-shadow: 0 0 0 3px rgba(139,30,30,.14);
}
.bieu-mau .nut { width: 100%; }
.loi-gui { display: none; margin-top: var(--k4); padding: var(--k3) var(--k4); border-radius: var(--radius-nho); font-size: 14px; }
.loi-gui.hien { display: block; }
.loi-gui.xong { background: rgba(63,115,85,.09); color: var(--dong); border: 1px solid rgba(63,115,85,.28); }
.loi-gui.hong { background: rgba(168,52,42,.09); color: var(--son); border: 1px solid rgba(168,52,42,.28); }

/* ───────────────────────────── chân trang */
.chan-trang { background: var(--be-mat-2); border-top: 1px solid var(--ke); padding: var(--k8) 0; font-size: 14px; color: var(--chu-nhat); }
.chan-trang .nho { font-size: 13px; color: var(--chu-nhat); margin-top: var(--k2); }

/* ───────────────────────────── hiện dần */
.hien-dan { opacity: 0; transform: translateY(22px); }
.hien-dan.da-hien {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .hien-dan, .hien-dan.da-hien { opacity: 1; transform: none; transition: none; }
  .nut, .luoi-the li, .luoi-diem > div, .can-cu, .phieu { transition: none !important; }
}

/* ───────────────────────────── khổ hẹp */
/* Dải laptop nhỏ: thu gọn thanh trên cho vừa một hàng */
@media (max-width: 1200px) {
  .thanh-tren .bao { gap: var(--k4); }
  .dieu-huong a { font-size: 13.5px; padding: var(--k2); }
  .thanh-tren .nut.chinh { padding: var(--k3) var(--k4); font-size: 14px; }
  .hieu small { display: none; }
}

@media (max-width: 1080px) {
  .buoc { grid-template-columns: repeat(2, 1fr); }
  .buoc li::before { display: none; }
  .thap { grid-template-columns: 1fr; }
  .thap li:not(:last-child)::after { display: none; }
}
@media (max-width: 900px) {
  .bao { width: calc(100% - 32px); }
  .hai-cot, .khung-gui, .doi-chieu { grid-template-columns: 1fr; gap: var(--k7); }
  .mang { padding: var(--k8) 0; }
  .mo-dau { padding: var(--k8) 0 var(--k7); }
  .dieu-huong { display: none; }
  /* Khổ hẹp: hai cột, đường kẻ chuyển sang kẻ ngang cho khỏi vỡ ô */
  .so-lieu { grid-template-columns: repeat(2, 1fr); }
  .so-lieu div { padding: var(--k4); }
  .so-lieu div:nth-child(odd) { border-left: 0; }
  .so-lieu div:nth-child(n+3) { border-top: 1px solid var(--ke); }
  .so-lieu dd { font-size: 28px; }
  .hieu small { display: none; }
}
@media (max-width: 620px) {
  /* Trang dài 14.000px trên điện thoại thì không ai cuộn hết. Bớt lề dọc và
     hạ thang tiêu đề — nội dung giữ nguyên, quãng đường cuộn ngắn lại. */
  .mang { padding: var(--k7) 0; }
  .mo-dau { padding: var(--k7) 0 var(--k6); }
  h1 { font-size: 34px; }
  h2 { font-size: 25px; }
  .loi-mo .dan { font-size: 17px; margin-top: var(--k4); }
  .mang .dan-mang { font-size: 15.5px; margin-top: var(--k4); }
  .luoi-the, .luoi-diem { gap: var(--k3); }
  .luoi-the li, .luoi-diem > div { padding: var(--k4); }
  .tieu-de-mang + .dan-mang { margin-top: var(--k3); }
  .thanh-tren .bao { height: 64px; gap: var(--k2); }
  .thanh-tren .nut.chinh { padding: var(--k2) var(--k4); font-size: 14px; }
  .hieu strong { white-space: nowrap; font-size: 15px; }
  .dau-hieu { width: 36px; height: 36px; }
  .buoc, .hang-o { grid-template-columns: 1fr; }
  .phieu-truong div { grid-template-columns: 1fr; gap: var(--k1); }
  .bieu-mau, .the-lien-he { padding: var(--k5); }
  .hang-nut .nut { width: 100%; }
  .cot-nhom li { grid-template-columns: 1fr 72px 24px; gap: var(--k3); }
}