/* HUST Giving — demo prototype stylesheet (bản hiệu chỉnh theo plan 16/09/2026) */

:root {
  /* Lấy từ logo chính thức: đỏ #CE1628, vàng #F3C108 */
  --crimson:      #CE1628;
  --crimson-dark: #AE1121;
  --crimson-tint: #FCEDEF;
  --ink:          #16191F;
  --slate:        #5A6472;
  --slate-soft:   #838E9C;
  --paper:        #F5F7F9;
  --surface:      #FFFFFF;
  --surface-2:    #EDF1F5;
  --line:         #DCE2E9;
  --line-soft:    #E9EDF2;
  /* Vàng chỉ đạt 1.69:1 trên nền trắng — dùng làm viền và nền, không dùng cho chữ */
  --gold:         #F3C108;
  --gold-tint:    #FEF8E4;
  --green:        #1F7A5A;
  --green-tint:   #E7F4EF;

  --f: "Be Vietnam Pro", -apple-system, "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --wrap: 1160px;
  --r: 3px;
  --head-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --crimson:      #E4737E;
    --crimson-dark: #F0949C;
    --crimson-tint: #33191D;
    --ink:          #E8EBF0;
    --slate:        #A4AEBB;
    --slate-soft:   #84909E;
    --paper:        #0E1115;
    --surface:      #161A20;
    --surface-2:    #1D232B;
    --line:         #2A313A;
    --line-soft:    #222831;
    --gold:         #F3C108;
    --gold-tint:    #2A2313;
    --green:        #5FC49E;
    --green-tint:   #12281F;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.22; text-wrap: balance; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; border-radius: 2px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============================================================ ruy-băng demo */

.demo-note { background: var(--ink); color: var(--paper); font-size: 11.5px; letter-spacing: .04em; padding: 7px 0; }
.demo-note .wrap { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.demo-note b { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .demo-note { background: var(--surface-2); color: var(--slate); }
  :root:not([data-theme="light"]) .demo-note b { color: var(--ink); }
}

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

.site-head { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; }
.site-head .wrap { display: flex; align-items: center; gap: 22px; min-height: var(--head-h); }

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex: none; }
.brand .mark { height: 44px; width: auto; flex: none; display: block; }
/* Logo đã chứa chữ "ĐẠI HỌC BÁCH KHOA" nên phần chữ chỉ mang tên chương trình */
.brand .wordmark { padding-left: 13px; border-left: 1px solid var(--line); }
.brand .wordmark .t1 { font-weight: 700; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }

.site-nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.site-nav a {
  text-decoration: none; font-size: 13.5px; font-weight: 500; color: var(--slate);
  padding: 6px 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--crimson); }

.nav-toggle {
  display: none; margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 20px; height: 20px; }

.lang-dd { position: relative; flex: none; }
.lang-dd-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); cursor: pointer; color: var(--slate-soft);
}
.lang-dd-btn:hover { border-color: var(--slate-soft); }
.lang-dd .flag { width: 24px; height: 16px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.lang-dd-btn .cur { display: block; line-height: 0; }
.lang-dd-btn .caret { width: 12px; height: 12px; }
.lang-dd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; margin: 0; padding: 4px; list-style: none; z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.lang-dd-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 2px;
  background: transparent; cursor: pointer; color: var(--ink); font-size: 12.5px;
}
.lang-dd-menu button:hover { background: var(--surface-2); }
.lang-dd-menu li[aria-selected="true"] button { background: var(--crimson-tint); }
.lang-dd-menu .nm { white-space: nowrap; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; padding: 10px 18px; border-radius: var(--r);
  border: 1px solid transparent; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-dark); }
.btn-primary:disabled { background: var(--slate-soft); cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--slate-soft); }
.btn-lg { font-size: 15px; padding: 13px 26px; }
.btn-sm { font-size: 12.5px; padding: 7px 12px; }
.btn-block { width: 100%; }

@media (max-width: 960px) {
  .site-head .wrap { gap: 12px; flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; order: 3; }
  .lang-dd { order: 4; }
  .site-head .btn-primary { order: 5; padding: 9px 12px; font-size: 12.5px; }
  .site-nav {
    order: 10; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0;
    margin: 0 0 8px; border-top: 1px solid var(--line-soft); display: none;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px 2px; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
  .site-nav a[aria-current="page"] { border-bottom-color: var(--line-soft); color: var(--crimson); }
}
@media (max-width: 480px) {
  .brand .wordmark { display: none; }
  .site-head .wrap { gap: 8px; }
  .nav-toggle { width: 38px; height: 38px; }
  .site-head .btn-primary { padding: 8px 10px; font-size: 12px; }
}

/* ============================================================ hero + chỉ số */

.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 56px; }
.hero h1 { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; letter-spacing: -0.035em; }
.hero .lede { font-size: 17px; color: var(--slate); margin-top: 18px; max-width: 46ch; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-art { aspect-ratio: 4 / 3; width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); overflow: hidden; }
@media (max-width: 880px) { .hero .wrap { grid-template-columns: 1fr; gap: 28px; padding-top: 36px; padding-bottom: 36px; } }

.stats { background: var(--surface); border-bottom: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 24px; padding-top: 26px; padding-bottom: 26px; }
.stat .n { font-size: 30px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .n small { font-size: 15px; font-weight: 600; color: var(--slate); }
.stat .l { font-size: 12.5px; color: var(--slate); margin-top: 5px; line-height: 1.4; }
.stats-caption { grid-column: 1 / -1; font-size: 11.5px; color: var(--slate-soft); border-top: 1px solid var(--line-soft); padding-top: 12px; }

/* ============================================================ khối chung */

section.blk { padding: 50px 0; }
section.blk.alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
@media (max-width: 720px) { section.blk { padding: 36px 0; } }

.blk-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.blk-head.row { flex-direction: row; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--crimson); }
.blk-head h2 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 700; }
.blk-head p { color: var(--slate); max-width: 62ch; }
.link-more { font-size: 13.5px; font-weight: 600; color: var(--crimson); text-decoration: none; white-space: nowrap; }
.link-more:hover { text-decoration: underline; }

.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding: 30px 0 28px; }
.crumb { font-size: 12.5px; color: var(--slate-soft); margin-bottom: 12px; }
.crumb a { text-decoration: none; color: var(--slate); }
.crumb a:hover { color: var(--crimson); }
.page-head h1 { font-size: clamp(25px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.03em; }
.page-head .sub { color: var(--slate); margin-top: 12px; max-width: 66ch; font-size: 16px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; }
.card + .card { margin-top: 16px; }
.card > h2 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.card > .hint { font-size: 13px; color: var(--slate); margin-bottom: 18px; }
@media (max-width: 600px) { .card { padding: 18px; } }

.callout { border: 1px solid var(--crimson); background: var(--crimson-tint); padding: 18px 20px; border-radius: var(--r); }
.callout p { font-size: 14.5px; line-height: 1.6; }
.draft-note { max-width: 74ch; margin-top: 12px; padding: 11px 14px; border-left: 3px solid var(--gold); background: var(--gold-tint); font-size: 13px; color: var(--slate); line-height: 1.55; }

/* thẻ đơn giản dùng chung (cam kết, văn bản, kết nối…) */
.cause-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.cause-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px;
  display: flex; flex-direction: column; gap: 9px; text-decoration: none; transition: border-color .15s ease;
}
a.cause-card:hover { border-color: var(--crimson); }
.cause-card .ic { width: 26px; height: 26px; color: var(--crimson); }
.cause-card h3 { font-size: 16px; font-weight: 700; }
.cause-card p { font-size: 14px; color: var(--slate); line-height: 1.5; }
.cause-card .meta { font-family: var(--f-mono); font-size: 11px; color: var(--slate-soft); margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line-soft); }

/* ============================================================ video placeholder */

.video-ph {
  position: relative; aspect-ratio: 16 / 9; width: 100%; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface-2); overflow: hidden; display: grid; place-items: center;
}
.video-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.video-ph .play {
  position: relative; z-index: 1; width: 78px; height: 78px; border-radius: 100px; border: 0; cursor: pointer;
  background: var(--crimson); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 30px rgba(0,0,0,.18);
}
.video-ph .play svg { width: 30px; height: 30px; margin-left: 4px; }
.video-ph .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 12px 16px;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent); color: #fff; font-size: 13px;
}

/* ============================================================ băng chuyền câu chuyện (NUS) */

.slider { position: relative; }
.slider-track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding-bottom: 6px; scrollbar-width: none;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track > * { flex: 0 0 min(340px, 84vw); scroll-snap-align: start; }
.slider-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.slider-ctrl .dots { display: flex; gap: 6px; }
.slider-ctrl .dots button { width: 8px; height: 8px; border-radius: 100px; border: 0; background: var(--line); padding: 0; cursor: pointer; }
.slider-ctrl .dots button[aria-current="true"] { background: var(--crimson); width: 22px; }
.slider-ctrl .arrows { margin-left: auto; display: flex; gap: 8px; }
.slider-ctrl .arrows button {
  width: 38px; height: 38px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
}
.slider-ctrl .arrows button:hover { border-color: var(--crimson); color: var(--crimson); }
.slider-ctrl .arrows svg { width: 16px; height: 16px; }

.story {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; text-decoration: none; height: 100%;
}
.story .thumb { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.story .thumb img { display: block; width: 100%; height: auto; }
.story .body { padding: 16px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.story .tag-line { display: flex; gap: 8px; align-items: center; font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-soft); }
.story h3 { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.story p { font-size: 13.5px; color: var(--slate); line-height: 1.5; }

.fund-tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 2px; background: var(--crimson-tint); color: var(--crimson); white-space: nowrap;
}

/* ============================================================ câu chuyện đầy đủ (ND4) */

.story-full {
  display: grid; grid-template-columns: 300px 1fr; gap: 28px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); padding: 22px;
}
.story-full + .story-full { margin-top: 16px; }
.story-full img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); display: block; }
.story-full .body { display: flex; flex-direction: column; gap: 10px; }
.story-full .meta { font-family: var(--f-mono); font-size: 11px; color: var(--slate-soft); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.story-full h3 { font-size: 20px; font-weight: 700; }
.story-full .sum { font-size: 15px; color: var(--slate); }
.story-full .quote { border-left: 3px solid var(--crimson); padding-left: 14px; font-size: 15px; line-height: 1.55; }
.story-full .byline { font-size: 12.5px; color: var(--slate-soft); }
.story-full .acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
@media (max-width: 760px) { .story-full { grid-template-columns: 1fr; gap: 16px; } }

/* lời nhắn */
.messages { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; gap: 12px; }
.msg .avatar { width: 38px; height: 38px; border-radius: 100px; background: var(--crimson-tint); color: var(--crimson); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.msg .who { font-size: 13px; font-weight: 600; }
.msg .who small { font-weight: 400; color: var(--slate-soft); font-family: var(--f-mono); font-size: 10.5px; margin-left: 6px; }
.msg .txt { font-size: 14px; color: var(--slate); line-height: 1.5; margin-top: 4px; }
.msg .when { font-family: var(--f-mono); font-size: 10.5px; color: var(--slate-soft); margin-top: 6px; }

/* ============================================================ kết nối */

.connect { display: block; text-align: center; }
.connect .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.connect .socials a {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; font-size: 13.5px; font-weight: 500; background: var(--surface);
}
.connect .socials a:hover { border-color: var(--crimson); color: var(--crimson); }
.connect .socials svg { width: 16px; height: 16px; }

/* ============================================================ luồng đóng góp 4 bước (ND1) */

.wiz-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
@media (max-width: 980px) { .wiz-layout { grid-template-columns: 1fr; } }

.steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.steps li { font-size: 12px; font-weight: 600; color: var(--slate-soft); padding-top: 10px; border-top: 3px solid var(--line); display: flex; gap: 8px; align-items: center; }
.steps li .sn { width: 20px; height: 20px; border-radius: 100px; background: var(--line); color: var(--surface); display: grid; place-items: center; font-family: var(--f-mono); font-size: 11px; flex: none; }
.steps li.is-done { color: var(--slate); border-top-color: var(--crimson); }
.steps li.is-done .sn { background: var(--crimson); }
.steps li.is-current { color: var(--crimson); border-top-color: var(--crimson); }
.steps li.is-current .sn { background: var(--crimson); }
@media (max-width: 600px) { .steps li span.lbl { display: none; } .steps li.is-current span.lbl { display: inline; } }

.step-title { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.step-hint { font-size: 13.5px; color: var(--slate); margin-bottom: 20px; }

.step1 { display: flex; flex-direction: column; gap: 24px; }
.step1 .blk-fund { order: 1; }
.step1 .blk-amount { order: 2; }
.step1 .blk-freq { order: 3; }
/* Điện thoại: chọn tiền trước, chọn quỹ sau */
@media (max-width: 720px) {
  .step1 .blk-amount { order: 1; }
  .step1 .blk-freq { order: 2; }
  .step1 .blk-fund { order: 3; }
}
.fld-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--slate); margin-bottom: 9px; letter-spacing: .02em; }

.fund-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fund-select { display: none; }
/* Điện thoại: chọn quỹ bằng dropdown đơn giản thay cho 4 thẻ */
@media (max-width: 720px) {
  .fund-pick { display: none; }
  .fund-select { display: block; font-weight: 600; }
}
.fund-opt {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); cursor: pointer; color: var(--ink);
}
.fund-opt:hover { border-color: var(--slate-soft); }
.fund-opt[aria-pressed="true"] { border-color: var(--crimson); background: var(--crimson-tint); }
.fund-opt .code { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; padding: 3px 6px; border-radius: 2px; background: var(--surface-2); color: var(--slate); flex: none; margin-top: 2px; }
.fund-opt[aria-pressed="true"] .code { background: var(--crimson); color: #fff; }
.fund-opt > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.fund-opt .nm { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; }
.fund-opt .ds { display: block; font-size: 12.5px; color: var(--slate); line-height: 1.45; margin-top: 3px; }

.amt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.amt {
  font-size: 15px; font-weight: 600; padding: 14px 10px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer; font-variant-numeric: tabular-nums;
}
.amt:hover { border-color: var(--slate-soft); }
.amt[aria-pressed="true"] { border-color: var(--crimson); background: var(--crimson-tint); color: var(--crimson); }

.freq { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; max-width: 100%; }
.freq button { font-size: 13.5px; font-weight: 500; padding: 10px 18px; border: 0; background: var(--surface); color: var(--slate); cursor: pointer; }
.freq button + button { border-left: 1px solid var(--line); }
.freq button[aria-pressed="true"] { background: var(--crimson); color: #fff; }

label.fld { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--slate); font-weight: 500; }
label.fld .req { color: var(--crimson); }
.fld-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font-family: var(--f); font-size: 14.5px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); color: var(--ink); width: 100%;
}
textarea { min-height: 84px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--slate-soft); }
input.is-invalid, select.is-invalid { border-color: var(--crimson); }
.fld-err { font-size: 12px; color: var(--crimson); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; line-height: 1.5; }
.check input { margin-top: 4px; accent-color: var(--crimson); flex: none; width: 16px; height: 16px; }
.check .desc { display: block; font-size: 12.5px; color: var(--slate); }
.check-list { display: flex; flex-direction: column; gap: 12px; }

.switch-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); margin-bottom: 20px; font-size: 14px; font-weight: 500; cursor: pointer; }
.switch-row input { accent-color: var(--crimson); width: 18px; height: 18px; }

details.more { border-top: 1px solid var(--line-soft); margin-top: 18px; padding-top: 14px; }
details.more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--crimson); list-style: none; display: flex; align-items: center; gap: 8px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; font-family: var(--f-mono); }
details.more[open] summary::before { content: "−"; }
details.more .fld-grid { margin-top: 14px; }

.pay-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pay-opt {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 600;
}
.pay-opt:hover { border-color: var(--slate-soft); }
.pay-opt[aria-pressed="true"] { border-color: var(--crimson); background: var(--crimson-tint); }
.pay-opt .pm { width: 44px; height: 28px; border-radius: 3px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; font-weight: 700; color: #fff; }
.pm.qr { background: var(--ink); }
.pm.napas { background: #1B4FA6; }
.pm.visa { background: #1A1F71; }
.pm.mc { background: #EB001B; }

.qr-pay { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start; margin-top: 18px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--r); }
.qr-pay .qr-box { width: 180px; aspect-ratio: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; display: grid; place-items: center; }
.qr-pay .qr-box canvas, .qr-pay .qr-box img, .qr-pay .qr-box table { max-width: 100%; }
.qr-pay .kv { font-size: 13.5px; display: flex; flex-direction: column; gap: 6px; }
.qr-pay .kv b { font-family: var(--f-mono); font-weight: 500; }
@media (max-width: 560px) { .qr-pay { grid-template-columns: 1fr; } }

.consent { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.consent .lbl { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate); margin-bottom: 12px; }

.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 22px; }
.wiz-nav .spacer { flex: 1; }

.wiz-summary { position: sticky; top: calc(var(--head-h) + 12px); }
.wiz-summary .line { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.wiz-summary .line span:first-child { color: var(--slate); }
.wiz-summary .line span:last-child { font-weight: 600; text-align: right; }
.wiz-summary .total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 16px 0 4px; font-size: 15px; font-weight: 600; }
.wiz-summary .total .amount { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; color: var(--crimson); font-variant-numeric: tabular-nums; }
@media (max-width: 980px) { .wiz-summary { position: static; } .wiz-summary .total .amount { font-size: 21px; } }

.gateway {
  position: fixed; inset: 0; z-index: 90; background: rgba(22,25,31,.78); display: grid; place-items: center; padding: 20px;
}
.gateway .box { background: #fff; color: #16191F; border-radius: 6px; padding: 28px; max-width: 420px; width: 100%; text-align: center; display: flex; flex-direction: column; gap: 12px; }
.gateway .bank { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; color: #1B4FA6; font-weight: 700; }
.gateway .spin { width: 40px; height: 40px; border-radius: 100px; border: 4px solid #E4E8EE; border-top-color: #CE1628; margin: 6px auto; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.gateway small { color: #5A6472; font-size: 12px; }

.success { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; }
.success .ok { width: 64px; height: 64px; border-radius: 100px; background: var(--green-tint); color: var(--green); display: grid; place-items: center; }
.success .ok svg { width: 30px; height: 30px; }
.success h2 { font-size: 22px; font-weight: 800; }
.success .txid { font-family: var(--f-mono); font-size: 13px; color: var(--slate); }
.success .sent { font-size: 14px; color: var(--slate); max-width: 52ch; }
.success .sent b { color: var(--ink); }
.success .acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* ============================================================ bảng ghi nhận (ND6) */

.filters { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 16px; }
.filters .grp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filters .grp .glbl { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-soft); margin-right: 4px; }
.filters select { width: auto; padding: 7px 10px; font-size: 13px; }
.chip { font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 100px; border: 1px solid var(--line); background: var(--surface); color: var(--slate); cursor: pointer; }
.chip:hover { border-color: var(--slate-soft); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.filters .live-link { margin-left: auto; }

.rec-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rec-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; }
.rec-stat .n { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rec-stat .l { font-size: 12px; color: var(--slate); margin-top: 2px; }

.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table.data { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.data th { text-align: left; font-weight: 600; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--slate); background: var(--surface-2); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; vertical-align: top; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.name { font-weight: 600; }
table.data td.num { text-align: right; white-space: nowrap; font-weight: 600; }
table.data td.dim { color: var(--slate-soft); font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
table.data .type-pill { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 2px; background: var(--surface-2); color: var(--slate); }
table.data .type-pill.org { background: var(--gold-tint); color: #7A5D08; }
table.data .msg-ic { color: var(--slate-soft); }
table.data .msg-ic svg { width: 14px; height: 14px; vertical-align: -2px; }
table.data td .anon { color: var(--slate-soft); font-style: italic; font-weight: 400; }

/* điện thoại: bảng thành thẻ */
@media (max-width: 720px) {
  .table-scroll.cards { border: 0; background: transparent; overflow: visible; }
  .table-scroll.cards table, .table-scroll.cards tbody { display: block; width: 100%; }
  .table-scroll.cards thead { display: none; }
  .table-scroll.cards tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
  .table-scroll.cards td { display: block; padding: 0; border: 0; }
  .table-scroll.cards td.name { grid-column: 1; grid-row: 1; }
  .table-scroll.cards td.num { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 15px; }
  .table-scroll.cards td.c-type, .table-scroll.cards td.c-cohort, .table-scroll.cards td.c-fund { display: inline; font-size: 12px; color: var(--slate); }
  .table-scroll.cards td.c-type::after, .table-scroll.cards td.c-cohort::after { content: " · "; }
  .table-scroll.cards td.dim { grid-column: 1 / -1; margin-top: 4px; }
  .table-scroll.cards td.c-msg { grid-column: 1 / -1; font-size: 13px; color: var(--slate); }
}

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--slate); flex-wrap: wrap; }
.pager .pages { display: flex; gap: 6px; flex-wrap: wrap; }
.pager button { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 13px; padding: 0 8px; }
.pager button[aria-current="page"] { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================ văn bản, quy định (ND5) */

.doc-list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.doc { background: var(--surface); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: center; }
.doc .t { font-size: 15px; font-weight: 600; }
.doc .d { font-size: 13px; color: var(--slate); margin-top: 3px; line-height: 1.5; }
.doc .m { font-family: var(--f-mono); font-size: 11px; color: var(--slate-soft); margin-top: 6px; }
@media (max-width: 560px) { .doc { grid-template-columns: 1fr; } }

.policy { max-width: 74ch; display: flex; flex-direction: column; gap: 14px; }
.policy h3 { font-size: 16px; font-weight: 700; margin-top: 8px; }
.policy p, .policy li { font-size: 15px; color: var(--slate); line-height: 1.65; }
.policy ol, .policy ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.policy b { color: var(--ink); font-weight: 600; }

/* thư ngỏ, pháp nhân, người phụ trách (giữ từ bản trước) */
.letter { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 30px; display: flex; flex-direction: column; gap: 16px; max-width: 74ch; }
.letter p { font-size: 16px; line-height: 1.7; color: var(--slate); }
.letter p.open { font-size: 17px; color: var(--ink); }
.letter .sign { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 2px; }
.letter .sign .who { font-weight: 700; font-size: 15px; }
.letter .sign .role { font-size: 13px; color: var(--slate); }
@media (max-width: 600px) { .letter { padding: 20px; } }

.factsheet { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.factsheet .cell { background: var(--surface); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.factsheet .cell h3 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--crimson); }
.factsheet .cell .val { font-size: 15.5px; font-weight: 600; }
.factsheet .cell p { font-size: 14px; color: var(--slate); line-height: 1.55; }
.factsheet .cell .mono-val { font-family: var(--f-mono); font-size: 15px; font-weight: 500; }

.people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.person { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; gap: 14px; align-items: flex-start; }
.person .avatar { width: 44px; height: 44px; border-radius: 100px; background: var(--crimson-tint); color: var(--crimson); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.person .who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.person .nm { font-weight: 700; font-size: 15px; }
.person .role { font-size: 13px; color: var(--slate); }
.person .contact { font-family: var(--f-mono); font-size: 12px; color: var(--slate-soft); word-break: break-all; }

/* ============================================================ chứng nhận (certificate.html) */

.cert-wrap { max-width: 820px; margin: 30px auto; padding: 0 16px; }
.cert {
  background: #fff; color: #16191F; border: 1px solid #DCE2E9; border-radius: 4px; padding: 44px 48px;
  position: relative; overflow: hidden;
}
.cert::before { content: ""; position: absolute; inset: 12px; border: 2px solid #CE1628; border-radius: 3px; pointer-events: none; }
.cert::after { content: ""; position: absolute; inset: 18px; border: 1px solid #F3C108; border-radius: 2px; pointer-events: none; }
.cert .head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.cert .head img { height: 56px; width: auto; }
.cert .head .u { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #5A6472; }
.cert .head .p { font-size: 17px; font-weight: 700; }
.cert h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: #CE1628; text-align: center; margin: 10px 0 4px; }
.cert .kind { text-align: center; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #5A6472; margin-bottom: 26px; }
.cert .to { text-align: center; font-size: 14px; color: #5A6472; }
.cert .name { text-align: center; font-size: 28px; font-weight: 700; margin: 6px 0 2px; }
.cert .sub { text-align: center; font-size: 13.5px; color: #5A6472; }
.cert .amount { text-align: center; font-size: 34px; font-weight: 800; color: #CE1628; margin: 20px 0 4px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cert .fund { text-align: center; font-size: 15px; }
.cert .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin: 26px 0; padding: 16px 0; border-top: 1px solid #E9EDF2; border-bottom: 1px solid #E9EDF2; }
.cert .grid .k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #838E9C; }
.cert .grid .v { font-size: 14px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }
.cert .foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.cert .sig .who { font-weight: 700; font-size: 14px; }
.cert .sig .role { font-size: 12.5px; color: #5A6472; }
.cert .seal { width: 84px; height: 84px; border-radius: 100px; border: 2px solid #CE1628; color: #CE1628; display: grid; place-items: center; text-align: center; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; line-height: 1.3; padding: 8px; }
.cert-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.cert.bienban h1 { font-size: 22px; }
.cert.bienban .clauses { font-size: 13.5px; line-height: 1.7; color: #16191F; display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
@media (max-width: 600px) { .cert { padding: 30px 22px; } .cert h1 { font-size: 24px; } .cert .name { font-size: 22px; } .cert .amount { font-size: 28px; } }
@media print {
  .demo-note, .site-head, .site-foot, .cert-acts { display: none !important; }
  body { background: #fff; }
  .cert-wrap { margin: 0; max-width: none; }
  .cert { border: 0; }
}

/* ============================================================ footer (theo a2ztech) */

.site-foot { background: var(--surface); border-top: 1px solid var(--line); padding: 36px 0 26px; margin-top: 10px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.foot-brand img { height: 40px; width: auto; }
.foot-brand .t1 { font-weight: 700; font-size: 15px; }
.foot-brand .t2 { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--slate-soft); }
.foot-grid h4 { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-soft); font-weight: 700; margin: 0 0 10px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-grid a { font-size: 13.5px; color: var(--slate); text-decoration: none; }
.foot-grid a:hover { color: var(--crimson); }
.foot-addr { font-size: 13.5px; color: var(--slate); line-height: 1.75; }
.foot-addr a { color: var(--crimson); }
.foot-legal { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); font-size: 12px; color: var(--slate-soft); display: flex; flex-wrap: wrap; gap: 8px 24px; }