/* ==========================================================================
   Ken Inox - Dịch vụ quản lý nhà trọ trọn gói
   --------------------------------------------------------------------------
   Hệ thống thiết kế:
   - Bảng màu khoá cứng: navy thương hiệu + MỘT màu nhấn duy nhất là gold.
     Gold không bao giờ dùng làm màu chữ trên nền sáng (không đủ tương phản),
     chỉ dùng làm nền nút, gạch nhấn và ký hiệu nhỏ.
   - Quy tắc bo góc (áp dụng toàn trang, không ngoại lệ):
       bề mặt / thẻ / ảnh  = 16px
       phần tử tương tác   = pill (999px)
       ảnh chân dung tròn  = 50% (kế thừa từ tờ rơi gốc)
   - Chuyển động: chỉ transform + opacity, luôn có nhánh prefers-reduced-motion.
   ========================================================================== */

/* ---------- Fonts (self-host, không gọi Google Fonts lúc runtime) ---------- */
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/be-vietnam-pro-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/be-vietnam-pro-800-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/be-vietnam-pro-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-mono-600-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Design tokens ---------- */
:root {
  /* Thương hiệu, lấy từ tờ rơi gốc */
  --navy-950: #041428;
  --navy-900: #062B57;
  --navy-800: #0C3F79;
  --gold:     #FCAF11;
  --gold-700: #E09A00;

  /* Bề mặt và chữ, chế độ sáng */
  --paper:      #F1F4F8;
  --surface:    #FFFFFF;
  --surface-2:  #E7ECF3;
  --band:       var(--navy-900);
  --band-deep:  var(--navy-950);
  --ink:        #0A1B33;
  --ink-soft:   #3E5069;
  --ink-onband: #FFFFFF;
  --ink-onband-soft: #B7C7DE;
  --line:       #D9E1EB;
  --line-band:  rgb(255 255 255 / .16);
  --shadow-sm:  0 1px 2px rgb(6 43 87 / .06), 0 6px 16px rgb(6 43 87 / .06);
  --shadow-md:  0 2px 4px rgb(6 43 87 / .07), 0 18px 40px rgb(6 43 87 / .12);

  /* Hình học */
  --r-surface: 16px;
  --r-pill: 999px;
  --nav-h: 68px;
  --wrap: 1200px;
  --gutter: clamp(1rem, .4rem + 2vw, 2rem);
  --gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  --section-y: clamp(4rem, 2.6rem + 5vw, 7.5rem);

  /* Chữ */
  --font-sans: 'Be Vietnam Pro', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-display: clamp(2.125rem, 1.1rem + 3.4vw, 3.25rem);
  --fs-h2:      clamp(1.625rem, 1.1rem + 1.9vw, 2.5rem);
  --fs-h3:      clamp(1.0625rem, 1rem + .28vw, 1.25rem);
  /* Người xem chính là chủ trọ 40-60 tuổi, phần lớn đọc trên điện thoại.
     Không dùng cỡ chữ nào dưới 15px, chữ phụ để 16px cho dễ đọc. */
  --fs-body:    clamp(1.0625rem, 1.02rem + .18vw, 1.125rem);
  --fs-sm:      1rem;
  --fs-eyebrow: clamp(.875rem, .85rem + .12vw, .9375rem);

  /* Chuyển động */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: 260ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:     #050F1F;
    --surface:   #0A1B33;
    --surface-2: #0E2544;
    --band:      #04162C;
    --band-deep: #030F20;
    --ink:       #E9EFF7;
    --ink-soft:  #9CB0C9;
    --line:      #17304F;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px rgb(0 0 0 / .3);
    --shadow-md: 0 2px 4px rgb(0 0 0 / .45), 0 18px 40px rgb(0 0 0 / .45);
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: .75rem; top: -4rem; z-index: 100;
  background: var(--gold); color: var(--navy-950);
  padding: .65rem 1.1rem; border-radius: var(--r-pill); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: .75rem; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; fill: currentColor; }

/* ---------- Nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  white-space: nowrap;
  font: inherit; font-weight: 600; font-size: var(--fs-sm);
  padding: .8rem 1.35rem; border-radius: var(--r-pill);
  border: 1.5px solid transparent; text-decoration: none; cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn .ic { font-size: 1.15em; }
/* Nhấn vàng, chữ navy: tương phản ~7:1, đạt WCAG AA cho mọi cỡ chữ */
.btn--gold { background: var(--gold); color: var(--navy-950); box-shadow: var(--shadow-sm); }
.btn--gold:hover { background: var(--gold-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--gold:active { transform: scale(.98) translateY(0); }
/* Phụ trên nền sáng */
.btn--line { border-color: color-mix(in oklab, var(--ink) 28%, transparent); color: var(--ink); background: transparent; }
.btn--line:hover { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 6%, transparent); transform: translateY(-2px); }
.btn--line:active { transform: scale(.98) translateY(0); }
/* Phụ trên nền navy */
.btn--onband { border-color: var(--line-band); color: #fff; background: rgb(255 255 255 / .06); }
.btn--onband:hover { border-color: rgb(255 255 255 / .5); background: rgb(255 255 255 / .12); transform: translateY(-2px); }
.btn--onband:active { transform: scale(.98) translateY(0); }
.btn--sm { padding: .6rem 1.05rem; font-size: .9375rem; }

/* ---------- Nhãn eyebrow (dùng tối đa 2 lần trên toàn trang) ---------- */
/* Chữ hoa tiếng Việt có dấu chồng lên nhau, giãn chữ rộng quá là rối mắt.
   Giữ tracking vừa phải và line-height thoáng để dấu không dính vào dòng trên. */
.eyebrow {
  font-family: var(--font-mono); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.5;
  color: var(--ink-soft); margin-bottom: .85rem; display: block;
}
.eyebrow--onband { color: var(--gold); }

.h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; padding-bottom: .12em; }
.lead { color: var(--ink-soft); max-width: 58ch; margin-top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav-h);
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 1.5rem; }

.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
/* Logo thật của Ken, đã bo tròn sẵn trong file ảnh */
.brand__mark {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 12%, transparent);
}
.brand__name { font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.brand__sub { display: block; font-size: .875rem; font-weight: 500; color: var(--ink-soft); letter-spacing: .01em; line-height: 1.35; }

.nav { display: flex; align-items: center; gap: clamp(1rem, .2rem + 1.4vw, 1.9rem); }
.nav a {
  text-decoration: none; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft);
  padding: .35rem 0; position: relative;
  transition: color var(--dur) var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
/* Chu to hon nen menu can nhieu cho hon, an som mot chut cho khoi dinh nut goi */
@media (max-width: 959px) { .nav { display: none; } }
@media (max-width: 599px) { .header-cta__text { display: none; } .header-cta { padding: .55rem .8rem; } }

/* ---------- Hero: chia bất đối xứng, chữ trái / ảnh phải ---------- */
.hero { padding-block: clamp(1.75rem, .5rem + 3.5vw, 3.5rem) var(--section-y); }
.hero__grid {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
.hero h1 {
  font-size: var(--fs-display); font-weight: 800;
  line-height: 1.14; letter-spacing: -.03em; padding-bottom: .1em;
  max-width: 22ch;
}
.hero__lead { color: var(--ink-soft); margin-top: 1.15rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
@media (max-width: 479px) { .hero__cta .btn { width: 100%; } }

.hero__media { position: relative; isolation: isolate; }
/* Khối vàng lệch phía sau ảnh, kế thừa mảng vàng của tờ rơi và tạo chiều sâu
   bằng lớp chồng thay vì đổ bóng phẳng. Thuần trang trí nên ẩn với trình đọc. */
.hero__media::before {
  content: ""; position: absolute; z-index: -1;
  inset: auto 0 -1rem 3rem; height: 58%;
  background: var(--gold); border-radius: var(--r-surface);
}
/* Chỉ tràn ra ngoài mép ảnh khi màn hình đủ rộng, tránh sinh cuộn ngang trên di động */
@media (min-width: 900px) { .hero__media::before { inset: auto -1.25rem -1.25rem 3.5rem; } }
.hero__media img {
  width: 100%; border-radius: var(--r-surface);
  aspect-ratio: 16 / 11; object-fit: cover;
  box-shadow: var(--shadow-md);
}
/* Chỉ dựng ảnh theo chiều đứng khi hero đã tách thành hai cột */
@media (min-width: 900px) { .hero__media img { aspect-ratio: 326 / 415; } }

/* ---------- Dải navy "dành cho ai": danh sách media so le ---------- */
.band { background: var(--band); color: var(--ink-onband); }
.band .lead, .band .eyebrow:not(.eyebrow--onband) { color: var(--ink-onband-soft); }
.section { padding-block: var(--section-y); }
/* Hai khối sáng liền nhau chỉ cần một khoảng nghỉ, không cộng dồn hai lần padding */
.section:not(.band):not(.contact) + .section:not(.band):not(.contact) { padding-top: 0; }

.fit { display: grid; gap: clamp(1.5rem, .8rem + 2vw, 2.5rem); }
@media (min-width: 900px) { .fit { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); align-items: start; gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }

.fit__list { display: grid; gap: clamp(1.25rem, .6rem + 1.4vw, 2rem); }
.fit__item { display: flex; align-items: center; gap: clamp(1rem, .5rem + 1.4vw, 1.75rem); }
/* So le theo chiều ngang để phá nhịp lặp, chỉ bật từ tablet trở lên */
@media (min-width: 700px) {
  .fit__item:nth-child(2) { margin-left: clamp(1.5rem, 4vw, 4rem); }
  .fit__item:nth-child(3) { margin-left: clamp(3rem, 8vw, 8rem); }
}
.fit__photo { width: clamp(76px, 14vw, 104px); height: clamp(76px, 14vw, 104px); border-radius: 50%; flex: none; object-fit: cover; }
.fit__item h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.fit__item p { font-size: var(--fs-sm); color: var(--ink-onband-soft); margin-top: .2rem; }

/* ---------- Bento 8 ô, kích thước lệch nhau theo nhịp ---------- */
.bento { display: grid; gap: var(--gap); grid-template-columns: 1fr; margin-top: clamp(2rem, 1rem + 2.5vw, 3rem); }
@media (min-width: 700px)  { .bento { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1000px) { .bento { grid-template-columns: repeat(12, 1fr); } }

.cell {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface);
  padding: clamp(1.35rem, .9rem + 1.2vw, 1.9rem);
  display: flex; flex-direction: column; gap: .6rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cell:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--navy-900) 35%, var(--line)); }
.cell__icon { width: 2.5rem; height: 2.5rem; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--navy-900); font-size: 1.35rem; }
.cell h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.cell p { font-size: var(--fs-sm); color: var(--ink-soft); }
/* Nền tối thì navy chìm vào bề mặt, đổi icon sang vàng cho đủ tương phản */
@media (prefers-color-scheme: dark) { .cell__icon { color: var(--gold); } }

/* Ô navy đặc, ô vàng đặc và ô ảnh: ba nền khác nhau để lưới không phẳng */
/* Ô lớn nhất của lưới: icon neo trên, tiêu đề tụt xuống đáy, chữ to hơn các ô còn lại */
.cell--feature { justify-content: space-between; }
.cell--feature h3 { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.85rem); letter-spacing: -.02em; }

.cell--gold { background: var(--gold); border-color: transparent; color: var(--navy-950); }
.cell--gold .cell__icon { background: rgb(4 20 40 / .12); color: var(--navy-950); }
.cell--gold p { color: color-mix(in oklab, var(--navy-950) 78%, transparent); }

/* Nền navy đặc nằm dưới ảnh: ảnh lỗi thì chữ trắng vẫn đọc được */
.cell--photo { background: var(--navy-950); color: #fff; border-color: transparent; justify-content: flex-end; min-height: 17.5rem; }
.cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.cell--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(4 20 40 / .16) 0%, rgb(4 20 40 / .42) 44%, rgb(4 20 40 / .88) 78%, rgb(4 20 40 / .95) 100%);
}
.cell--photo > * { position: relative; z-index: 2; }
.cell--photo .cell__icon { background: rgb(255 255 255 / .14); color: var(--gold); }
.cell--photo p { color: #DCE6F4; }

/* Hai hàng đầu là ô ảnh, hai hàng sau là ô chữ, hàng cuối là ô vàng.
   Bề rộng so le 5/7 rồi 7/5 để lưới có nhịp thay vì lặp đều. */
@media (min-width: 700px) {
  .b1 { grid-column: span 3; grid-row: span 2; }
  .b2 { grid-column: span 3; }
  .b3 { grid-column: span 3; }
  .b4 { grid-column: span 2; }
  .b5 { grid-column: span 4; }
  .b6 { grid-column: span 4; }
  .b7 { grid-column: span 2; }
  .b8 { grid-column: span 6; }
}
@media (min-width: 1000px) {
  .b1 { grid-column: span 5; grid-row: span 2; }
  .b2 { grid-column: span 7; }
  .b3 { grid-column: span 7; }
  .b4 { grid-column: span 5; }
  .b5 { grid-column: span 7; }
  .b6 { grid-column: span 7; }
  .b7 { grid-column: span 5; }
  .b8 { grid-column: span 12; flex-direction: row; align-items: center; gap: clamp(1rem, 2vw, 2.5rem); }
  .b8 .cell__icon { width: 3rem; height: 3rem; font-size: 1.6rem; }
  .b8 h3 { flex: none; width: 15rem; }
  .b8 p { max-width: 52ch; }
}

/* ---------- Cách bắt đầu: dòng chảy ngang, gạch nối liền mạch ---------- */
.flow { display: grid; gap: clamp(1.5rem, .8rem + 2vw, 2.5rem); margin-top: clamp(2rem, 1rem + 2.5vw, 3rem); }
@media (min-width: 800px) { .flow { grid-template-columns: repeat(3, 1fr); gap: 0; } }
.flow__step { position: relative; padding-top: 2.25rem; }
@media (min-width: 800px) { .flow__step { padding-inline: clamp(1rem, 2vw, 2rem); } .flow__step:first-child { padding-left: 0; } .flow__step:last-child { padding-right: 0; } }
/* Đường ray nối các bước, thay cho nhãn "Bước 1 / Bước 2" */
.flow__step::before {
  content: ""; position: absolute; top: .75rem; left: 0; right: 0; height: 2px;
  background: var(--line);
}
/* Đoạn ray vàng đánh dấu điểm bắt đầu của mỗi bước, thay cho nhãn "Bước 1" */
.flow__step::after {
  content: ""; position: absolute; top: .75rem; left: 0; width: 3rem; height: 2px;
  background: var(--gold);
}
.flow__step h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }
.flow__step p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .35rem; max-width: 34ch; }
/* Dải ảnh khép lại phần quy trình, để khối này không chỉ toàn chữ */
.flow__media {
  width: 100%; margin-top: clamp(2rem, 1.2rem + 2vw, 3rem);
  border-radius: var(--r-surface); box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 9; object-fit: cover;
  /* Nền chờ cùng tông, mạng chậm thì thấy ô xám nhạt chứ không thấy khoảng trắng rỗng */
  background: var(--surface-2);
}
@media (min-width: 800px) { .flow__media { aspect-ratio: 1600 / 520; } }

/* ---------- Cam kết: bốn cột chia bằng gạch tóc, không dùng thẻ card ---------- */
.pledge { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: clamp(2rem, 1rem + 2.5vw, 3rem); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .pledge { grid-template-columns: repeat(4, 1fr); } }
.pledge__item { padding: clamp(1.5rem, 1rem + 1.2vw, 2.25rem) clamp(1rem, .6rem + 1vw, 1.75rem); border-bottom: 1px solid var(--line); }
.pledge__item + .pledge__item { border-left: 1px solid var(--line); }
@media (max-width: 899px) { .pledge__item:nth-child(odd) { border-left: 0; padding-left: 0; } }
@media (min-width: 900px) { .pledge__item:first-child { padding-left: 0; } }
.pledge__item .ic { font-size: 1.75rem; color: var(--navy-900); }
/* Chừa sẵn hai dòng để phần mô tả của bốn cột luôn bắt đầu cùng một đường */
.pledge__item h3 { font-size: var(--fs-h3); font-weight: 700; margin-top: .85rem; line-height: 1.3; min-height: 2.6em; }
.pledge__item p { font-size: var(--fs-sm); color: var(--ink-soft); margin-top: .25rem; }
@media (prefers-color-scheme: dark) { .pledge__item .ic { color: var(--gold); } }

/* ---------- Khách hàng nói: hàng ngang cuộn được, thẻ cuối ló ra để lộ còn nữa ---------- */
.voices__rail {
  display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2 + var(--gutter));
  scroll-padding-inline: max(var(--gutter), (100% - var(--wrap)) / 2 + var(--gutter));
  padding-block: clamp(2rem, 1rem + 2.5vw, 3rem) 1rem;
  scrollbar-width: thin;
}
.voices__rail:focus-visible { outline-offset: -3px; }
/* Máy tính thấy hết thẻ nên không cần nhắc vuốt, chỉ hiện gợi ý trên di động */
.voices__hint { display: none; }
@media (max-width: 959px) { .voices__hint { display: block; } }
.voice {
  flex: 0 0 min(84vw, 24rem); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-surface); padding: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.voice:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--navy-900) 35%, var(--line)); box-shadow: var(--shadow-md); }
.voice blockquote { margin: 0; font-size: var(--fs-body); line-height: 1.6; }
.voice figcaption { margin-top: auto; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.voice b { display: block; font-weight: 700; line-height: 1.4; }
.voice span { font-size: var(--fs-sm); color: var(--ink-soft); }

/* ---------- Kênh khác: logo neo bên trái, danh sách link bên phải ---------- */
.channels__grid { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); align-items: center; }
@media (min-width: 800px) { .channels__grid { grid-template-columns: clamp(9rem, 16vw, 13rem) minmax(0, 1fr); } }
.channels__logo { width: clamp(7.5rem, 16vw, 13rem); height: auto; border-radius: 50%; box-shadow: var(--shadow-md); }
.channels__list { display: grid; gap: .75rem; margin-top: clamp(1.5rem, 1rem + 1.2vw, 2rem); }
@media (min-width: 640px) { .channels__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.channel {
  display: flex; align-items: center; gap: 1rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-surface);
  padding: 1rem 1.25rem;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.channel:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--navy-900) 35%, var(--line)); box-shadow: var(--shadow-md); }
.channel:active { transform: scale(.99) translateY(0); }
.channel__brand { font-size: 1.65rem; color: var(--navy-900); }
@media (prefers-color-scheme: dark) { .channel__brand { color: var(--gold); } }
.channel__text { display: grid; margin-right: auto; }
.channel__text b { font-weight: 700; line-height: 1.35; }
.channel__text em { font-style: normal; font-size: var(--fs-sm); color: var(--ink-soft); }
.channel__go { font-size: 1.15rem; color: var(--ink-soft); transition: transform var(--dur) var(--ease); }
.channel:hover .channel__go { transform: translate(2px, -2px); }

/* ---------- Khối liên hệ + chân trang, dùng chung nền navy đậm ---------- */
.contact { background: var(--band-deep); color: var(--ink-onband); }
.contact__grid { display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem); align-items: end; }
@media (min-width: 900px) { .contact__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.contact h2 { font-size: var(--fs-h2); font-weight: 800; line-height: 1.16; letter-spacing: -.02em; padding-bottom: .1em; max-width: 20ch; }
.contact__note { color: var(--ink-onband-soft); margin-top: 1rem; max-width: 40ch; }
.contact__phone {
  display: inline-flex; align-items: baseline; gap: .75rem; text-decoration: none;
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(1.85rem, 1rem + 3.4vw, 3.1rem); letter-spacing: -.02em;
  color: var(--gold); line-height: 1.2; padding-bottom: .08em;
  transition: opacity var(--dur) var(--ease);
}
.contact__phone:hover { opacity: .82; }
.contact__person { font-weight: 600; margin-top: .5rem; }
.contact__person span { color: var(--ink-onband-soft); font-weight: 400; }
.contact__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
@media (max-width: 479px) { .contact__cta .btn { width: 100%; } }
.contact__ready { border-top: 1px solid var(--line-band); padding-top: 1.5rem; }
.contact__ready h3 { font-size: var(--fs-h3); font-weight: 700; color: #fff; line-height: 1.3; }
.contact__ready li { display: flex; gap: .6rem; align-items: flex-start; color: var(--ink-onband-soft); font-size: var(--fs-sm); margin-top: .7rem; }
.contact__ready .ic { color: var(--gold); font-size: 1.1rem; margin-top: .28rem; }

.site-footer { background: var(--band-deep); color: var(--ink-onband-soft); border-top: 1px solid var(--line-band); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1.75rem; font-size: var(--fs-sm); }
.site-footer strong { color: #fff; font-weight: 600; }
.site-footer a { text-decoration: none; transition: color var(--dur) var(--ease); }
.site-footer a:hover { color: var(--gold); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }

/* ---------- Nút gọi cố định trên di động ---------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: none; gap: .6rem; padding: .7rem clamp(1rem, 4vw, 1.25rem) calc(.7rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--paper) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.callbar .btn { flex: 1; }
@media (max-width: 959px) { .callbar { display: flex; } body { padding-bottom: 5rem; } }

/* ---------- Reveal khi cuộn: chỉ transform + opacity ---------- */
/* Chỉ ẩn ban đầu khi JS chạy được, nếu không trang vẫn hiện đủ nội dung */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(18px); }
  .js .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity .55s var(--ease) var(--d, 0ms), transform .55s var(--ease) var(--d, 0ms);
  }
}

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

@media print {
  .site-header, .callbar, .skip { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
}