/* MỘC HIÊN — hệ thị giác "QUYỂN MẪU VẬT TƯ CÓ MÃ"
   Bảng danh mục vật tư đóng thành quyển mẫu bấm đinh tán: mỗi dòng của trang
   là một con chip vật liệu trong máng trái, một nhãn, một giá trị căn phải. */

:root {
  /* ---- nền & mực ---- */
  --nen:        #0E2A22;   /* mặt bìa quyển mẫu — lõi ván MDF chống ẩm */
  --nen-2:      #133328;   /* bậc nền sáng hơn */
  --nen-3:      #09201A;   /* bậc nền sâu nhất — footer */
  --the:        #EDEDE8;   /* mặt melamine — thẻ mẫu */
  --the-2:      #E1E1D8;   /* mặt melamine bậc hai */
  --muc:        #1B231E;   /* mực trên nền sáng — 13,9:1 */
  --muc-2:      #4F5A54;   /* mực phụ trên nền sáng — 7,1:1 */
  --muc-toi:    #E6E9E2;   /* mực trên nền tối — 13,3:1 */
  --muc-toi-2:  #A9B5AC;   /* mực phụ trên nền tối — 6,7:1 */
  /* ---- đường kẻ: KHÔNG BAO GIỜ dùng làm màu chữ ---- */
  --ke-sang:    #C4C7BD;
  --ke-sang-2:  #D5D7CE;
  --ke-toi:     rgba(230, 233, 226, .20);
  --ke-toi-2:   rgba(230, 233, 226, .11);
  /* ---- màu nhấn: nét bút chì đỏ của người kiểm ----
     Đúng ba nghĩa: nút hành động chính · con số đã chốt · vạch đánh dấu khi rà dòng. */
  --do:         #B92E33;
  --do-dam:     #9E2429;
  --muc-tren-do:#FFF6F5;   /* mực trên nền đỏ */

  /* ---- chip vật liệu (màu hiện vật, không phải màu giao diện) ---- */
  --m-soi:      #C9A876;
  --m-oc-cho:   #5A3B2A;
  --m-loi-xanh: #2F6B4F;
  --m-melamine: #E4E2D9;
  --m-da:       #D2D3CE;
  --m-veneer:   #A8763F;
  --m-son:      #DBD8CE;
  --m-phu-kien: #8A8D88;

  /* ---- thang chữ ---- */
  --fs-display: clamp(2.35rem, 4.4vw, 3.95rem);
  --fs-h2:      clamp(1.55rem, 2.4vw, 2.2rem);
  --fs-h3:      1.16rem;
  --fs-lede:    1.075rem;
  --fs-body:    1rem;
  --fs-row:     .97rem;
  --fs-cap:     .8125rem;
  --fs-label:   .75rem;   /* 12px — trên sàn nhãn micro-caps 11px */
  --fs-nav:     .9rem;
  --fs-nut:     .8rem;
  --fs-quote:   1.06rem;
  --fs-hotline: 1.25rem;
  --fs-tong:    1.28rem;

  /* ---- nhịp ---- */
  --sp-1: .375rem;  --sp-2: .75rem;  --sp-3: 1.15rem;
  --sp-4: 1.9rem;   --sp-5: 3rem;    --sp-6: 4.5rem;
  --sec:  clamp(4.25rem, 7vw, 7rem);
  --gut:  clamp(1.15rem, 4vw, 3.25rem);
  --max:  1280px;

  --f-hien: 'Bricolage Grotesque', 'Be Vietnam Pro', system-ui, sans-serif;
  --f-van:  'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --f-so:   'Azeret Mono', ui-monospace, 'SFMono-Regular', monospace;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--nen);
  color: var(--muc-toi);
  font-family: var(--f-van);
  font-size: var(--fs-body);
  line-height: 1.62;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ============ nguyên tử chữ ============ */

.num, .ma {
  font-family: var(--f-so);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -.01em;
}
.ma { font-size: var(--fs-label); letter-spacing: .04em; }

.nhan {
  font-family: var(--f-hien);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .155em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
}
.nhan-toi { color: var(--muc-toi-2); }
.nhan-sang { color: var(--muc-2); }

h1, h2, h3 {
  font-family: var(--f-hien);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

.h1 { font-size: var(--fs-display); display: block; }
.h1 span { display: block; }
.h1 .h1-b { color: var(--muc-toi-2); font-weight: 500; }

h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -.012em; }

.lede { font-size: var(--fs-lede); line-height: 1.66; max-width: 46ch; margin: 0; }
p  { margin: 0 0 var(--sp-3); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
.cap { font-size: var(--fs-cap); line-height: 1.5; margin: 0; }
.tren-toi .cap, .tren-toi p.dim { color: var(--muc-toi-2); }
.tren-sang .cap, .tren-sang p.dim { color: var(--muc-2); }

/* cột nhãn của thẻ mẫu */
.deck-cot {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding: .5rem 0 .45rem;
  border-bottom: 1px solid var(--ke-sang);
  font-family: var(--f-hien);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .155em;
  text-transform: uppercase;
  color: var(--muc-2);
}

/* ============ khung trang ============ */

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }

.tren-toi  { background: var(--nen);  color: var(--muc-toi); }
.tren-toi-2{ background: var(--nen-2);color: var(--muc-toi); }
.tren-sang { background: var(--the);  color: var(--muc); }
.tren-sang-2{background: var(--the-2);color: var(--muc); }

section { padding-block: var(--sec); }

.dau-muc { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: baseline;
           margin-bottom: var(--sp-4); padding-bottom: var(--sp-2); }
.dau-muc h2 { flex: 1 1 22rem; }
.tren-toi .dau-muc  { border-bottom: 1px solid var(--ke-toi); }
.tren-sang .dau-muc, .tren-sang-2 .dau-muc { border-bottom: 1px solid var(--ke-sang); }
.dau-muc .dm-phu { flex: 0 1 30ch; }

/* ============ HIỆN VẬT: dòng danh mục có chip vật liệu ============ */

.deck { list-style: none; margin: 0; padding: 0; }

.row {
  position: relative;
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--sp-3);
  padding: .82rem 0 .78rem;
}
.tren-toi .row, .tren-toi-2 .row { border-bottom: 1px solid var(--ke-toi); }
.tren-sang .row, .tren-sang-2 .row { border-bottom: 1px solid var(--ke-sang); }

/* con chip vật liệu trong máng trái */
.chip {
  position: relative;
  align-self: stretch;
  justify-self: start;
  width: 13px;
  margin-left: .72rem;
  background: var(--m, var(--m-melamine));
  border: 1px solid rgba(27, 35, 30, .22);
  transition: transform .38s cubic-bezier(.2, .85, .25, 1);
}
.tren-toi .chip, .tren-toi-2 .chip { border-color: rgba(230, 233, 226, .26); }
.the-mau .chip, .tren-sang .chip, .tren-sang-2 .chip { border-color: rgba(27, 35, 30, .22); }
.chip::before {           /* lỗ đục để xâu đinh tán */
  content: '';
  position: absolute;
  top: 5px; left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;     /* ngoại lệ khai báo: lỗ đục và đinh tán vốn tròn */
  background: var(--nen);
}
.tren-sang .chip::before, .tren-sang-2 .chip::before { background: var(--the); }
.tren-sang-2 .chip::before { background: var(--the-2); }
.tren-toi-2 .chip::before { background: var(--nen-2); }
.the-mau .chip::before { background: var(--the); }

/* thiết bị hover duy nhất của toàn site:
   rút mẫu ra khỏi quyển, người kiểm gạch một nét bút chì đỏ ở máng */
.row::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: -1px;
  width: 3px;
  background: var(--do);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform .38s cubic-bezier(.2, .85, .25, 1);
}
.row:hover::after, .row:focus-within::after { transform: scaleY(1); }
.row:hover .chip, .row:focus-within .chip { transform: translateX(-9px); }

.row .r-nhan { min-width: 0; }
.row .r-ten { font-weight: 500; letter-spacing: -.005em; font-size: var(--fs-row); }
.row .r-phu { font-size: var(--fs-cap); margin: .18rem 0 0; }
.tren-toi .r-phu, .tren-toi-2 .r-phu { color: var(--muc-toi-2); }
.tren-sang .r-phu, .tren-sang-2 .r-phu { color: var(--muc-2); }
.row .r-gt {
  font-family: var(--f-so);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-row);
  text-align: right;
  white-space: nowrap;
}
.row .r-ma { grid-column: 2; font-size: var(--fs-label); letter-spacing: .04em; margin: 0 0 .16rem; }
.tren-toi .r-ma, .tren-toi-2 .r-ma { color: var(--muc-toi-2); }
.tren-sang .r-ma, .tren-sang-2 .r-ma { color: var(--muc-2); }
/* .the-mau là mặt melamine sáng đặt trên bìa tối — mực bên trong luôn là mực nền sáng */
.the-mau .r-ma, .the-mau .r-phu, .the-mau .cap, .the-mau .nhan { color: var(--muc-2); }
.the-mau .r-ten, .the-mau .r-gt, .the-mau .dh-ten { color: var(--muc); }
.the-mau .truong label { color: var(--muc-2); }
.the-mau .truong input, .the-mau .truong select { border-bottom-color: var(--ke-sang); color: var(--muc); }

/* dòng tổng: kẻ đôi */
.row-tong { padding-top: 1.05rem; padding-bottom: 1.05rem; border-bottom: none !important; }
.row-tong::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 4px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
}
.row-tong .r-gt { font-size: var(--fs-tong); font-weight: 500; color: var(--do); }
.row-tong .r-ten { font-weight: 600; }
.tren-toi .row-tong .r-gt { color: #F0A39E; }  /* nét bút chì đỏ trên nền tối — 7,4:1 */

/* ============ thẻ mẫu (thẻ trắng melamine đặt trên bìa) ============ */

.the-mau {
  background: var(--the);
  color: var(--muc);
  padding: clamp(1.4rem, 2.6vw, 2.1rem) clamp(1.25rem, 2.4vw, 1.9rem);
  border: 1px solid var(--ke-sang);
}
.the-mau .row { border-bottom-color: var(--ke-sang); }

.rivet {           /* đinh tán ở đầu quyển */
  width: 11px; height: 11px;
  border-radius: 50%;   /* ngoại lệ khai báo */
  background: var(--m-phu-kien);
  border: 2px solid var(--nen);
  flex: none;
}

/* ============ header ============ */

.site-head {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid var(--ke-toi);
  background: var(--nen);
}
.head-in {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 74px;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--f-hien);
  font-weight: 700;
  font-size: var(--fs-quote);
  letter-spacing: .19em;
  text-decoration: none;
  margin-right: auto;
  display: flex; align-items: center; gap: .6rem;
}
.wordmark .wm-sub {
  font-family: var(--f-so);
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--muc-toi-2);
  border-left: 1px solid var(--ke-toi);
  padding-left: .6rem;
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.site-nav a {
  font-size: var(--fs-nav);
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 1px solid transparent;
  color: var(--muc-toi-2);
  transition: color .2s, border-color .2s;
}
.site-nav a:hover { color: var(--muc-toi); border-bottom-color: var(--do); }
.site-nav a[aria-current="page"] { color: var(--muc-toi); border-bottom-color: var(--ke-toi); }

.lang-toggle { display: flex; border: 1px solid var(--ke-toi); flex: none; }
.lang-toggle button {
  font-family: var(--f-so);
  font-size: .72rem;
  letter-spacing: .12em;
  background: none;
  border: none;
  color: var(--muc-toi-2);
  padding: .42rem .58rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lang-toggle button + button { border-left: 1px solid var(--ke-toi); }
.lang-toggle button[aria-pressed="true"] { background: var(--muc-toi); color: var(--nen); }

/* ============ nút ============ */

.nut {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-hien);
  font-weight: 700;
  font-size: var(--fs-nut);
  letter-spacing: .11em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .82rem 1.35rem;
  background: var(--do);
  color: var(--muc-tren-do);
  border: 1px solid var(--do);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.nut:hover { background: var(--do-dam); border-color: var(--do-dam); }
.nut-nho { padding: .6rem 1rem; font-size: .76rem; }

.nut-vien {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--f-hien);
  font-weight: 700;
  font-size: var(--fs-nut);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .68rem 1.05rem;
  background: none;
  border: 1px solid currentColor;
  transition: background .2s;
}
.tren-toi .nut-vien, .tren-toi-2 .nut-vien { color: var(--muc-toi); }
.tren-sang .nut-vien, .tren-sang-2 .nut-vien { color: var(--muc); }
.nut-vien:hover { background: rgba(255,255,255,.07); }
.tren-sang .nut-vien:hover, .tren-sang-2 .nut-vien:hover { background: rgba(0,0,0,.05); }

.hotline {
  display: inline-flex; flex-direction: column; gap: .1rem; text-decoration: none;
}
.hotline .hl-so {
  font-family: var(--f-so);
  font-variant-numeric: lining-nums tabular-nums;
  font-size: var(--fs-hotline);
  letter-spacing: -.01em;
}
.lien-ket {
  font-size: var(--fs-nav);
  text-decoration: none;
  border-bottom: 1px solid var(--do);
  padding-bottom: .1rem;
  white-space: nowrap;
}
.lien-ket:hover { border-bottom-width: 2px; }

/* ============ HERO — hai dòng chảy gặp nhau ở một đường ghép ============ */

.hero { padding-block: clamp(3rem, 5.5vw, 5.25rem) clamp(3.5rem, 6vw, 6rem); overflow: hidden; }
.hero-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 0;
}
.hero-left  { padding-right: clamp(1.5rem, 3.6vw, 3.4rem); }
.hero-right {
  position: relative;
  padding-left: clamp(1.5rem, 3.6vw, 3.4rem);
  border-left: 1px solid var(--ke-toi);   /* đường ghép */
}
.hero-right::before {                      /* đinh tán trên đường ghép */
  content: '';
  position: absolute; left: -6px; top: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--m-phu-kien);
}
.hero-left > * + * { margin-top: var(--sp-3); }
.hero-left .h1 { margin-top: var(--sp-2); }
.hero-left .lede { margin-top: var(--sp-3); }

.plate { margin: var(--sp-4) 0 0; border: 1px solid var(--ke-toi); }
.plate img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.plate figcaption {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  align-items: baseline;
  padding: .58rem .7rem;
  border-top: 1px solid var(--ke-toi);
  font-size: var(--fs-cap);
  color: var(--muc-toi-2);
}
.plate figcaption .ma { color: inherit; white-space: nowrap; flex: none; }
.tren-sang .plate, .tren-sang-2 .plate { border-color: var(--ke-sang); }
.tren-sang .plate figcaption, .tren-sang-2 .plate figcaption {
  border-top-color: var(--ke-sang); color: var(--muc-2);
}

.deck-head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--muc);
  margin-bottom: .3rem;
}
.deck-head .dh-ten { font-family: var(--f-hien); font-weight: 700; font-size: var(--fs-body); letter-spacing: -.01em; }
.deck-head .dh-ma { margin-left: auto; color: var(--muc-2); }

.hero-cta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4);
  align-items: center;
  margin-top: var(--sp-4);
}
.hero-cta .hotline { color: var(--muc-toi); }
.hero-cta .hl-nhan { color: var(--muc-toi-2); }

.ghi-chu-gia { margin-top: var(--sp-2); }

/* ============ dải năng lực ============ */

.hai-cot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-6) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.hai-cot-lech {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: var(--sp-6) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* ============ lưới thẻ hồ sơ (chỉ nơi có ảnh) ============ */

.luoi-ho-so {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: clamp(1.4rem, 2.6vw, 2.4rem);
}
.ho-so { display: flex; flex-direction: column; border: 1px solid var(--ke-toi); }
.tren-sang .ho-so, .tren-sang-2 .ho-so { border-color: var(--ke-sang); }
.ho-so img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.ho-so-than { display: flex; flex-direction: column; flex: 1; padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.ho-so-than h3 { margin-bottom: .35rem; }
.ho-so-tt { margin-top: auto; padding-top: var(--sp-3); }
.ho-so-tt .row { padding: .55rem 0 .5rem; grid-template-columns: minmax(0,1fr) auto; }
.ho-so-tt .row .chip { display: none; }
.ho-so-tt .row::after { display: none; }
.ho-so-khung-ma {
  display: flex; justify-content: space-between; gap: var(--sp-2);
  padding: .5rem var(--sp-3);
  border-bottom: 1px solid var(--ke-toi);
  font-size: var(--fs-label);
  letter-spacing: .04em;
}
.tren-sang .ho-so-khung-ma, .tren-sang-2 .ho-so-khung-ma { border-bottom-color: var(--ke-sang); color: var(--muc-2); }
.tren-toi .ho-so-khung-ma, .tren-toi-2 .ho-so-khung-ma { color: var(--muc-toi-2); }

/* ============ trích dẫn ============ */

.loi-khach { border-top: 2px solid currentColor; padding-top: var(--sp-3); }
.loi-khach blockquote { margin: 0 0 var(--sp-3); font-size: var(--fs-quote); line-height: 1.58; }
.loi-khach .lk-ten { font-family: var(--f-hien); font-weight: 700; font-size: var(--fs-nav); letter-spacing: -.005em; }
.loi-khach .lk-ma { font-size: var(--fs-label); letter-spacing: .04em; }
.tren-toi .loi-khach .lk-ma, .tren-toi-2 .loi-khach .lk-ma { color: var(--muc-toi-2); }
.tren-sang .loi-khach .lk-ma { color: var(--muc-2); }

/* ============ form ============ */

.bieu-mau { display: grid; gap: var(--sp-3); }
.truong { display: flex; flex-direction: column; gap: .3rem; }
.truong label { font-family: var(--f-hien); font-size: var(--fs-label); font-weight: 700;
                letter-spacing: .155em; text-transform: uppercase; }
.tren-toi .truong label, .tren-toi-2 .truong label { color: var(--muc-toi-2); }
.tren-sang .truong label { color: var(--muc-2); }
.truong input, .truong select {
  font-family: var(--f-so);
  font-size: var(--fs-row);
  font-variant-numeric: lining-nums tabular-nums;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ke-toi);
  color: inherit;
  padding: .55rem .1rem;
  width: 100%;
  transition: border-color .2s;
}
.truong select { font-family: var(--f-van); }
.tren-sang .truong input, .tren-sang .truong select { border-bottom-color: var(--ke-sang); }
.truong input:focus, .truong select:focus { outline: none; border-bottom-color: var(--do); border-bottom-width: 2px; }
.tren-sang .truong option, .tren-sang-2 .truong option, .the-mau .truong option {
  color: var(--muc); background: var(--the);
}
.tren-toi .truong option, .tren-toi-2 .truong option {
  color: var(--muc-toi); background: var(--nen-2);
}
.form-hang { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--sp-3); }

/* ============ footer ============ */

.site-foot { background: var(--nen-3); color: var(--muc-toi); padding-block: var(--sp-6) var(--sp-4); }
.foot-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: var(--sp-5) clamp(1.5rem, 4vw, 3.5rem);
}
.foot-luoi h3 { font-size: var(--fs-label); font-weight: 700; letter-spacing: .155em;
                text-transform: uppercase; color: var(--muc-toi-2); margin-bottom: var(--sp-2); }
.foot-luoi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .38rem; }
.foot-luoi a { text-decoration: none; font-size: var(--fs-nav); border-bottom: 1px solid transparent; }
.foot-luoi a:hover { border-bottom-color: var(--do); }
.foot-luoi p { font-size: var(--fs-nav); color: var(--muc-toi-2); }
.foot-day {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-5); padding-top: var(--sp-3);
  border-top: 1px solid var(--ke-toi-2);
  font-size: var(--fs-cap); color: var(--muc-toi-2);
}

/* ============ vụn ============ */

.hatch {   /* vân gỗ: kẻ ngang mảnh, 10% */
  background-image: repeating-linear-gradient(
    90deg, rgba(230,233,226,.10) 0 1px, transparent 1px 7px);
}
.dai-mong { padding-block: var(--sp-4); border-block: 1px solid var(--ke-toi); }
.danh-sach-gon { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.danh-sach-gon li { padding-left: 1.15rem; position: relative; font-size: var(--fs-row); }
.danh-sach-gon li::before {
  content: ''; position: absolute; left: 0; top: .62em; width: 8px; height: 1px; background: var(--do);
}
.dieu-khoan { counter-reset: dk; list-style: none; margin: 0; padding: 0; }
.dieu-khoan > li { counter-increment: dk; position: relative; }
.dieu-khoan .r-ma::before { content: 'MH-CK-0' counter(dk); }

.bai-viet-than { max-width: 68ch; }
.bai-viet-than h2 { margin-top: var(--sp-5); margin-bottom: var(--sp-3); }
.bai-viet-than h3 { margin-top: var(--sp-4); margin-bottom: var(--sp-2); }
.bai-viet-than p { font-size: var(--fs-lede); line-height: 1.75; }

.loc { display: flex; flex-wrap: wrap; gap: .5rem; }
.loc .nut-vien { font-size: var(--fs-label); padding: .5rem .85rem; }

/* ============ CHUYỂN ĐỘNG — chỉ transform, opacity luôn = 1 ============ */

.reveal { transform: translateY(22px); transition: transform .78s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.reveal.is-visible { transform: none; }

@keyframes mh-seat { from { transform: translateY(24px); } to { transform: none; } }
@keyframes mh-seam { from { transform: translateX(-16px); } to { transform: none; } }
@keyframes mh-rivet { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.hero-left > * { animation: mh-seat .82s cubic-bezier(.16, 1, .3, 1) both; }
.hero-left > *:nth-child(1) { animation-delay: .04s; }
.hero-left > *:nth-child(2) { animation-delay: .10s; }
.hero-left > *:nth-child(3) { animation-delay: .16s; }
.hero-left > *:nth-child(4) { animation-delay: .22s; }
.hero-left > *:nth-child(5) { animation-delay: .28s; }

.hero-right > * { animation: mh-seam .78s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .18s; }
.hero-right .deck > li { animation: mh-seam .62s cubic-bezier(.16, 1, .3, 1) both; }
.hero-right .deck > li:nth-child(1) { animation-delay: .26s; }
.hero-right .deck > li:nth-child(2) { animation-delay: .32s; }
.hero-right .deck > li:nth-child(3) { animation-delay: .38s; }
.hero-right .deck > li:nth-child(4) { animation-delay: .44s; }
.hero-right .deck > li:nth-child(5) { animation-delay: .50s; }
.hero-right .deck > li:nth-child(6) { animation-delay: .56s; }
.hero-right .deck > li:nth-child(7) { animation-delay: .62s; }
.hero-right .deck > li:nth-child(8) { animation-delay: .68s; }
.hero-right .deck > li:nth-child(9) { animation-delay: .76s; }
.hero-right::before { animation: mh-rivet .5s ease-out both; animation-delay: .1s; transform-origin: top center; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { transform: none; transition: none; }
  .hero-left > *, .hero-right > *, .hero-right .deck > li, .hero-right::before { animation: none; }
  .chip, .row::after { transition: none; }
}

/* ============ đáp ứng ============ */

@media (max-width: 1020px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); }
  .hero-left { padding-right: 0; }
  .hero-right {
    padding-left: 0; padding-top: var(--sp-5); margin-top: var(--sp-5);
    border-left: none; border-top: 1px solid var(--ke-toi);
  }
  .hero-right::before { left: 0; top: -6px; }
  .hai-cot, .hai-cot-lech { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
}

@media (max-width: 760px) {
  :root { --fs-display: clamp(2.05rem, 8.4vw, 2.6rem); }
  .head-in { min-height: 0; padding-block: .85rem; gap: var(--sp-2); }
  .wordmark { flex: 1 0 100%; margin-right: 0; }
  .site-nav { flex: 1 1 auto; gap: var(--sp-2) var(--sp-3); }
  .site-nav a { font-size: var(--fs-nut); }
  .head-in .nut { display: none; }
  .row { grid-template-columns: 2rem minmax(0, 1fr); row-gap: .2rem; }
  .row .r-gt { grid-column: 2; text-align: left; }
  .row-tong .r-gt { font-size: 1.2rem; }
  .luoi-ho-so { grid-template-columns: minmax(0, 1fr); }
  .hero-cta { gap: var(--sp-3); }
  .foot-day { gap: .35rem var(--sp-3); }
}