/* ==========================================================================
   Tôi là IRONMAN — WEDUVATE
   Bảng màu lấy từ logo và banner của dự án: đỏ WEDUVATE trên nền graphite.
   ========================================================================== */

:root {
  --do:          #C8202F;
  --do-sang:     #E63946;
  --do-toi:      #8E1622;

  --nen:         #0B0B0D;
  --nen-2:       #121216;
  --nen-3:       #1A1A20;
  --vien:        #2A2A33;

  --chu:         #F2F2F4;
  --chu-mo:      #A9A9B4;
  --chu-rat-mo:  #6E6E7A;
  --bac:         #D6D8DD;

  --rong:        1160px;
  --rong-hep:    760px;
  --bo:          14px;

  --font: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Noto Sans", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h2 {
  font-size: clamp(1.65rem, 4.2vw, 2.65rem);
  font-weight: 800;
  max-width: 20ch;
}
h3 { font-size: 1.15rem; font-weight: 700; }
p  { margin: 0 0 1.1em; }
strong { color: #fff; font-weight: 700; }
em { color: var(--bac); }

/* ---------- Nhãn nhỏ phía trên tiêu đề ---------- */
.nhan {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--do-sang);
  margin: 0 0 .9rem;
}
.nhan::before {
  content: "";
  display: inline-block;
  width: 26px; height: 2px;
  background: var(--do);
  vertical-align: middle;
  margin-right: .7em;
}

/* ---------- Nút ---------- */
.nut {
  --nut-nen: var(--do);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background: var(--nut-nen);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
  padding: .85em 1.7em;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 24px -8px rgba(200, 32, 47, .8);
  font-family: inherit;
}
.nut:hover  { background: var(--do-sang); transform: translateY(-2px); }
.nut:active { transform: translateY(0); }
.nut:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.nut--lon  { font-size: 1.08rem; padding: 1.05em 2.3em; }
.nut--nho  { font-size: .9rem; padding: .6em 1.25em; box-shadow: none; }
.nut--rong { width: 100%; }
.nut[disabled] { opacity: .55; cursor: progress; transform: none; }

/* ==========================================================================
   THANH ĐẦU TRANG
   ========================================================================== */
.thanh-dau {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(11, 11, 13, 0);
  transition: background .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.thanh-dau.dinh {
  background: rgba(11, 11, 13, .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--vien);
}
.thanh-dau__logo img { width: 132px; height: auto; }
.thanh-dau .nut { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.thanh-dau.dinh .nut { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   MỞ ĐẦU
   ========================================================================== */
.mo-dau {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 7rem clamp(1.2rem, 5vw, 4rem) 2rem;
  isolation: isolate;
  overflow: hidden;
}
.mo-dau__anh {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/web/tapthe-1.jpg");
  background-size: cover;
  background-position: center 38%;
  transform: scale(1.03);
}
.mo-dau::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, var(--nen) 1%, rgba(11,11,13,.94) 28%, rgba(11,11,13,.62) 58%, rgba(11,11,13,.7) 100%),
    linear-gradient(to right, rgba(11,11,13,.88) 0%, rgba(11,11,13,.5) 42%, rgba(11,11,13,.12) 78%, transparent 100%);
}
.mo-dau__noi-dung { max-width: 780px; }

.mo-dau__ten {
  font-size: clamp(2.9rem, 12vw, 7rem);
  font-weight: 900;
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin: 0 0 .35em;
  line-height: .93;
  background: linear-gradient(180deg, #ffffff 0%, #C9CCD3 55%, #7E828C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 12px 40px rgba(0,0,0,.55);
}
.mo-dau__ten span {
  background: linear-gradient(180deg, var(--do-sang) 0%, var(--do) 60%, var(--do-toi) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mo-dau__dan {
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  line-height: 1.5;
  color: var(--bac);
  max-width: 44ch;
  margin-bottom: 1.6rem;
}

.khau-hieu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem .5rem;
  padding: 0;
  margin: 0 0 2rem;
}
.khau-hieu li {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .45em 1.05em;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.mo-dau__hanh-dong { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.mo-dau__ghi-chu {
  font-size: .93rem;
  color: var(--chu-mo);
  max-width: 46ch;
  margin: 0;
  padding-left: .9rem;
  border-left: 2px solid var(--do);
}
.mo-dau__chu-du-an {
  margin: 3rem 0 0;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--chu-rat-mo);
}
.mo-dau__chu-du-an strong { color: var(--bac); }

/* ==========================================================================
   KHỐI CHUNG
   ========================================================================== */
.phan {
  max-width: var(--rong);
  margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 2.5rem);
}
.phan--hep { max-width: var(--rong-hep); }
.phan--toi {
  max-width: none;
  background: var(--nen-2);
  border-top: 1px solid var(--vien);
  border-bottom: 1px solid var(--vien);
  padding-left: 0; padding-right: 0;
}
.phan__trong {
  max-width: var(--rong);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 2.5rem);
}

.van { color: var(--chu-mo); font-size: 1.06rem; }
.van--giua { max-width: 62ch; }
.van__nhan-manh { font-size: 1.35rem; color: var(--chu); }

.trich {
  margin: 2.5rem 0 0;
  padding: 1.6rem 0 1.6rem 1.6rem;
  border-left: 3px solid var(--do);
  font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.5;
  color: var(--bac);
  font-style: italic;
}
.trich--nho { font-size: 1.1rem; margin-top: 1.6rem; padding-block: 1rem; }

.ket-luan {
  margin: 2.5rem 0 0;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  line-height: 1.55;
  max-width: 56ch;
}
.ket-luan em { display: inline-block; margin-top: .6em; color: var(--do-sang); font-style: normal; font-weight: 700; }

/* ---------- Ba thẻ ---------- */
.the-ba {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.the {
  background: var(--nen-3);
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  padding: 1.6rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.the::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--do);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.the:hover::before { transform: scaleY(1); }
.the__so {
  display: block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--do);
  margin-bottom: .5rem;
}
.the h3 { margin-bottom: .4em; }
.the p { color: var(--chu-mo); font-size: .97rem; margin: 0; }
.the-ba--thoang .the { padding: 1.8rem 1.6rem; }

/* ==========================================================================
   NGƯỜI DẪN DẮT
   ========================================================================== */
.doi {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
.doi__anh {
  border-radius: var(--bo);
  overflow: hidden;
  border: 1px solid var(--vien);
  position: relative;
}
.doi__anh::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(200,32,47,.16), transparent 55%);
  pointer-events: none;
}
.doi__anh img { width: 100%; }
.chuc-danh {
  color: var(--do-sang);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  margin-top: -.4em;
  margin-bottom: 1.3em;
}

/* ==========================================================================
   HỌC PHẦN
   ========================================================================== */
.hoc-phan {
  list-style: none;
  counter-reset: hp;
  padding: 0;
  margin: 2.5rem 0 0;
  border-top: 1px solid var(--vien);
}
.hoc-phan li {
  counter-increment: hp;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 0 1rem;
  align-items: baseline;
  padding: 1.15rem .4rem;
  border-bottom: 1px solid var(--vien);
  transition: background .2s ease;
}
.hoc-phan li:hover { background: rgba(255,255,255,.025); }
.hoc-phan li::before {
  content: counter(hp, decimal-leading-zero);
  font-size: .82rem;
  font-weight: 800;
  color: var(--do);
  letter-spacing: .06em;
}
.hoc-phan__ten { font-weight: 600; color: var(--chu); }
.hoc-phan__ten span { color: var(--chu-rat-mo); font-weight: 400; }
.hoc-phan__nguoi { color: var(--chu-mo); font-size: .93rem; text-align: right; }
.hoc-phan--them { opacity: .62; }
.hoc-phan--them .hoc-phan__ten { font-weight: 400; font-style: italic; }

/* ==========================================================================
   ĐỘI NGŨ
   ========================================================================== */
.luoi-thay { display: grid; gap: 1rem; margin-top: 2.5rem; }
.luoi-thay--noi-bat { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.luoi-thay--phu     { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-top: 1rem; }

.thay {
  margin: 0;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  overflow: hidden;
  background: var(--nen-2);
}
.thay img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  filter: saturate(.92);
  transition: filter .3s ease, transform .4s ease;
}
.thay:hover img { filter: saturate(1.05); transform: scale(1.02); }
.thay figcaption { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .18rem; }
.thay figcaption strong { font-size: .98rem; }
.thay__mon { font-size: .84rem; color: var(--chu-mo); }
.huy-hieu {
  margin-top: .5rem;
  align-self: flex-start;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: var(--do-toi);
  border: 1px solid var(--do);
  border-radius: 999px;
  padding: .3em .85em;
  line-height: 1.35;
}
.luoi-thay--phu .thay img { aspect-ratio: 1 / 1; }
.luoi-thay--phu figcaption { padding: .8rem .85rem .95rem; }
.luoi-thay--phu figcaption strong { font-size: .9rem; }
.luoi-thay--phu .thay__mon { font-size: .79rem; }

/* ==========================================================================
   LỊCH
   ========================================================================== */
.lich {
  margin-top: 2.5rem;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  background: var(--nen-3);
  padding: 1.8rem clamp(1.2rem, 3vw, 2rem);
}
.lich__ten { color: var(--do-sang); font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.2rem; }
.lich dl { margin: 0; display: grid; gap: .2rem; }
.lich dl > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
  gap: .3rem 1.5rem;
  padding: .85rem 0;
  border-top: 1px solid var(--vien);
}
.lich dt { font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.lich dd { margin: 0; color: var(--chu-mo); }

/* ==========================================================================
   ĐIỀU THỰC SỰ THAY ĐỔI
   ========================================================================== */
.thay-doi {
  position: relative;
  isolation: isolate;
  padding: clamp(4rem, 11vw, 8rem) clamp(1.2rem, 5vw, 2.5rem);
  overflow: hidden;
}
.thay-doi::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../images/web/tapthe-2.jpg");
  background-size: cover;
  background-position: center;
}
.thay-doi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, rgba(11,11,13,.97) 0%, rgba(11,11,13,.9) 48%, rgba(11,11,13,.66) 100%);
}
.thay-doi__trong { max-width: var(--rong); margin: 0 auto; }
.thay-doi h2 { max-width: 22ch; }

/* ==========================================================================
   BĂN KHOĂN
   ========================================================================== */
.hoi-dap { margin-top: 2.5rem; border-top: 1px solid var(--vien); }
.hoi-dap details { border-bottom: 1px solid var(--vien); }
.hoi-dap summary {
  cursor: pointer;
  list-style: none;
  padding: 1.35rem 3rem 1.35rem .3rem;
  font-weight: 600;
  font-size: 1.04rem;
  position: relative;
  transition: color .2s ease;
}
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary:hover { color: var(--do-sang); }
.hoi-dap summary:focus-visible { outline: 2px solid var(--do-sang); outline-offset: 2px; border-radius: 4px; }
.hoi-dap summary::after {
  content: "";
  position: absolute;
  right: .8rem;
  top: 50%;
  width: 11px; height: 11px;
  border-right: 2px solid var(--do);
  border-bottom: 2px solid var(--do);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .25s ease;
}
.hoi-dap details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.hoi-dap details > p {
  color: var(--chu-mo);
  max-width: 68ch;
  padding-right: 1rem;
  margin: 0 0 1em;
}
.hoi-dap details > p:last-child { padding-bottom: 1.4rem; }
.luu-y {
  border-left: 2px solid var(--vien);
  padding-left: 1rem !important;
  font-size: .93rem;
  color: var(--chu-rat-mo) !important;
}

/* ==========================================================================
   ĐĂNG KÝ
   ========================================================================== */
.dang-ky {
  background: var(--nen-2);
  border-top: 1px solid var(--vien);
  padding: clamp(3.5rem, 9vw, 6.5rem) clamp(1.2rem, 5vw, 2.5rem) clamp(4rem, 8vw, 6rem);
}
.dang-ky__trong { max-width: 640px; margin: 0 auto; }
.dang-ky h2 { max-width: none; }

.giai-thich {
  background: var(--nen-3);
  border: 1px solid var(--vien);
  border-left: 3px solid var(--do);
  border-radius: var(--bo);
  padding: 1.4rem 1.5rem;
  margin: 1.8rem 0 2.2rem;
  color: var(--chu-mo);
  font-size: .99rem;
}
.giai-thich p:last-child { margin-bottom: 0; }
.giai-thich__nho { font-size: .92rem; color: var(--chu-rat-mo); }

.mau { display: grid; gap: 1.25rem; }
.mau__hang { display: grid; gap: .45rem; }
.mau label, .mau legend {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--bac);
  padding: 0;
}
.mau label span[aria-hidden] { color: var(--do-sang); }

.mau input[type="text"],
.mau input[type="tel"],
.mau input[type="email"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--chu);
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: .85em 1em;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.mau input::placeholder { color: #55555f; }
.mau input:focus {
  outline: none;
  border-color: var(--do);
  box-shadow: 0 0 0 3px rgba(200,32,47,.22);
}
.mau input[aria-invalid="true"] { border-color: var(--do-sang); }

.mau__chon { border: 0; margin: 0; padding: 0; }
.mau__chon legend { margin-bottom: .65rem; }
.chon { display: block; cursor: pointer; margin-bottom: .7rem; }
.chon input { position: absolute; opacity: 0; width: 0; height: 0; }
.chon__trong {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .15rem 1rem;
  align-items: baseline;
  border: 1px solid var(--vien);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  background: var(--nen);
  transition: border-color .2s ease, background .2s ease;
}
.chon:hover .chon__trong { border-color: #40404d; }
.chon input:checked + .chon__trong {
  border-color: var(--do);
  background: rgba(200,32,47,.09);
  box-shadow: inset 0 0 0 1px var(--do);
}
.chon input:focus-visible + .chon__trong { outline: 3px solid #fff; outline-offset: 2px; }
.chon__ten  { font-weight: 700; color: var(--chu); }
.chon__tien { font-weight: 800; color: var(--do-sang); font-size: 1.06rem; white-space: nowrap; }
.chon__mo-ta { grid-column: 1 / -1; font-size: .88rem; color: var(--chu-rat-mo); }

.mau__tran-an { font-size: .89rem; color: var(--chu-rat-mo); text-align: center; margin: -.4rem 0 0; }

.loi { color: var(--do-sang); font-size: .87rem; margin: 0; min-height: 0; }
.loi:empty { display: none; }
.loi--chung {
  text-align: center;
  border: 1px solid var(--do);
  background: rgba(200,32,47,.1);
  border-radius: 10px;
  padding: .8rem 1rem;
}

/* ==========================================================================
   CUỐI TRANG
   ========================================================================== */
.chan {
  text-align: center;
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.2rem, 5vw, 2.5rem) 7rem;
  border-top: 1px solid var(--vien);
}
.chan__logo { width: 150px; margin: 0 auto 1.4rem; }
.chan__cau {
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--do-sang);
  font-weight: 700;
}
.chan__mo-ta { max-width: 60ch; margin: 0 auto 1.8rem; color: var(--chu-rat-mo); font-size: .95rem; }
.chan__ban-quyen { color: #4a4a55; font-size: .84rem; margin: 0; }

/* ==========================================================================
   THANH ĐÁY (điện thoại)
   ========================================================================== */
.thanh-day {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(11,11,13,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--vien);
  transform: translateY(110%);
  transition: transform .3s ease;
  display: none;
}
.thanh-day.hien { transform: translateY(0); }

/* ==========================================================================
   MÀN HÌNH NHỎ
   ========================================================================== */
@media (max-width: 860px) {
  .doi { grid-template-columns: 1fr; }
  .doi__anh { max-width: 420px; }
  .hoc-phan li { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .hoc-phan__nguoi { grid-column: 2; text-align: left; }
  .lich dl > div { grid-template-columns: 1fr; }
  .lich dt { font-size: 1.02rem; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .thanh-day { display: block; }
  .chan { padding-bottom: 8rem; }
  .thanh-dau .nut--vien { display: none; }   /* chỉ ẩn nút phụ, giữ nút tài trợ */
  .mo-dau { min-height: 92svh; padding-bottom: 2.5rem; }
  .mo-dau__anh { background-position: center 42%; }
  .khau-hieu li { font-size: .74rem; padding: .4em .85em; }
  .trich { padding-left: 1.1rem; }
  .luoi-thay--phu { grid-template-columns: repeat(2, 1fr); }
  .chon__trong { grid-template-columns: 1fr; }
  .chon__tien { grid-column: 1; }
}

/* ==========================================================================
   TRANG CẢM ƠN
   ========================================================================== */
.cam-on {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4.5rem, 10vw, 6rem) 1.2rem 3rem;
}
.cam-on__hop { width: 100%; max-width: 620px; }

.dau-tick {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--do);
  display: grid;
  place-items: center;
  margin: 0 0 1.5rem;
  box-shadow: 0 8px 30px -6px rgba(200,32,47,.75);
}
.dau-tick svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

.cam-on h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 800; }
.cam-on__loi { color: var(--chu-mo); font-size: 1.05rem; max-width: 52ch; }
.cam-on__loi strong { color: #fff; }

.buoc {
  margin-top: 2.5rem;
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  background: var(--nen-2);
  overflow: hidden;
}
.buoc__dau {
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--vien);
  background: var(--nen-3);
  display: flex;
  align-items: center;
  gap: .8rem;
}
.buoc__so {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--do);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.buoc__ten { font-weight: 700; font-size: 1rem; }
.buoc__than { padding: 1.5rem 1.4rem; }

.ma-qr { display: grid; justify-items: center; gap: .9rem; }
.ma-qr canvas {
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  max-width: 100%;
  height: auto;
}
.ma-qr__chu { font-size: .9rem; color: var(--chu-rat-mo); text-align: center; margin: 0; max-width: 40ch; }

.bang-ck { display: grid; gap: .1rem; }
.bang-ck__hang {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto;
  gap: .3rem .9rem;
  align-items: center;
  padding: .8rem 0;
  border-top: 1px solid var(--vien);
}
.bang-ck__hang:first-child { border-top: 0; }
.bang-ck__nhan { color: var(--chu-rat-mo); font-size: .88rem; }
.bang-ck__gia-tri { font-weight: 700; color: #fff; word-break: break-word; }
.bang-ck__gia-tri--tien { color: var(--do-sang); font-size: 1.15rem; }
.bang-ck__gia-tri--ma { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; letter-spacing: .02em; }

.nut-chep {
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  color: var(--bac);
  background: var(--nen-3);
  border: 1px solid var(--vien);
  border-radius: 8px;
  padding: .4em .8em;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.nut-chep:hover { border-color: var(--do); color: #fff; }
.nut-chep.xong { background: var(--do); border-color: var(--do); color: #fff; }

.nhac-nho {
  margin-top: 1.2rem;
  padding: .95rem 1.1rem;
  border-radius: 10px;
  background: rgba(200,32,47,.09);
  border: 1px solid rgba(200,32,47,.35);
  font-size: .93rem;
  color: var(--bac);
}
.nhac-nho strong { color: #fff; }

.cam-on__cuoi { margin-top: 2.5rem; display: grid; gap: .9rem; justify-items: start; }
.lien-ket-phu { color: var(--chu-rat-mo); font-size: .92rem; text-decoration: none; border-bottom: 1px solid var(--vien); }
.lien-ket-phu:hover { color: var(--chu); border-color: var(--do); }

@media (max-width: 560px) {
  .bang-ck__hang { grid-template-columns: 1fr auto; }
  .bang-ck__nhan { grid-column: 1 / -1; }
}

/* ==========================================================================
   XƯNG HÔ · MỨC ĐÓNG GÓP TỰ ĐIỀN
   ========================================================================== */
.mau__danh-xung { border: 0; margin: 0; padding: 0; }
.mau__danh-xung legend { margin-bottom: .55rem; }

.chon-nho { display: flex; gap: .6rem; }
.chon-nho label { cursor: pointer; }
.chon-nho input { position: absolute; opacity: 0; width: 0; height: 0; }
.chon-nho span {
  display: block;
  min-width: 5.5rem;
  text-align: center;
  font-weight: 700;
  font-size: .98rem;
  color: var(--chu-mo);
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: .7em 1.2em;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.chon-nho label:hover span { border-color: #40404d; }
.chon-nho input:checked + span {
  color: #fff;
  border-color: var(--do);
  background: rgba(200,32,47,.12);
  box-shadow: inset 0 0 0 1px var(--do);
}
.chon-nho input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }

.so-khac {
  margin-top: .2rem;
  padding: 1rem 1.15rem 1.1rem;
  border: 1px solid var(--do);
  border-radius: 12px;
  background: rgba(200,32,47,.06);
  display: grid;
  gap: .5rem;
}
.so-khac[hidden] { display: none; }
.so-khac label { font-size: .88rem; }

.o-tien { position: relative; }
.o-tien input {
  width: 100%;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--chu);
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: .6em 2.4rem .6em .8em;
  font-variant-numeric: tabular-nums;
}
.o-tien input:focus {
  outline: none;
  border-color: var(--do);
  box-shadow: 0 0 0 3px rgba(200,32,47,.22);
}
.o-tien__dv {
  position: absolute;
  right: 1rem; top: 50%;
  transform: translateY(-50%);
  color: var(--chu-rat-mo);
  font-weight: 700;
  pointer-events: none;
}

/* ==========================================================================
   TRANG TRA CỨU & ĐÓNG GÓP
   ========================================================================== */
.tom-tat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .8rem;
  margin: 1.8rem 0 1.6rem;
}
.tom-tat__o {
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  background: var(--nen-2);
  padding: 1.1rem 1.2rem;
  display: grid;
  gap: .3rem;
}
.tom-tat__nhan { font-size: .84rem; color: var(--chu-rat-mo); }
.tom-tat__so {
  font-size: 1.5rem; font-weight: 800; color: var(--do-sang);
  font-variant-numeric: tabular-nums; line-height: 1.2;
}
.tom-tat__so--mo { color: var(--bac); }

.luoi-thang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: .5rem;
}
.o-thang {
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: .65rem .5rem;
  text-align: center;
  background: var(--nen-2);
  display: grid;
  gap: .15rem;
}
.o-thang__ten { font-size: .8rem; color: var(--chu-rat-mo); }
.o-thang__tien { font-size: .88rem; font-weight: 700; color: var(--chu-rat-mo); font-variant-numeric: tabular-nums; }
.o-thang--xong { border-color: var(--do); background: rgba(200,32,47,.1); }
.o-thang--xong .o-thang__ten { color: var(--bac); }
.o-thang--xong .o-thang__tien { color: #fff; }

.chu-thich { font-size: .85rem; color: var(--chu-rat-mo); margin: .9rem 0 0; }
.cham {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  border: 1px solid var(--vien); background: var(--nen-2); vertical-align: -1px;
}
.cham--xong { border-color: var(--do); background: rgba(200,32,47,.5); }

.chon-thang {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: -.2rem 0 .3rem; padding-left: .2rem;
}
.tich-thang { cursor: pointer; }
.tich-thang input { position: absolute; opacity: 0; width: 0; height: 0; }
.tich-thang span {
  display: block; font-size: .9rem; font-weight: 600;
  color: var(--chu-mo); background: var(--nen);
  border: 1px solid var(--vien); border-radius: 999px;
  padding: .45em 1em; transition: all .2s ease;
}
.tich-thang:hover span { border-color: #40404d; }
.tich-thang input:checked + span {
  color: #fff; border-color: var(--do);
  background: rgba(200,32,47,.16); box-shadow: inset 0 0 0 1px var(--do);
}
.tich-thang input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }

.o-tai-anh {
  display: block; cursor: pointer;
  border: 2px dashed var(--vien); border-radius: var(--bo);
  background: var(--nen);
  transition: border-color .2s ease, background .2s ease;
  overflow: hidden;
}
.o-tai-anh:hover, .o-tai-anh.keo-vao { border-color: var(--do); background: rgba(200,32,47,.06); }
.o-tai-anh__trong {
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 2.2rem 1.2rem; text-align: center;
  color: var(--chu-mo); font-size: .95rem; line-height: 1.5;
}
.o-tai-anh__bieu-tuong { font-size: 2.2rem; line-height: 1; }
.o-tai-anh img { width: 100%; display: block; }

#nut-tiep[disabled] { opacity: .5; cursor: not-allowed; }

.da-dang-ky {
  margin: 1.8rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--vien);
  text-align: center;
  font-size: .95rem;
  color: var(--chu-rat-mo);
}
.da-dang-ky a { color: var(--do-sang); text-decoration: none; font-weight: 700; }
.da-dang-ky a:hover { text-decoration: underline; }

/* ---- Hai nút trên thanh đầu trang ---- */
.thanh-dau__nut { display: flex; align-items: center; gap: .5rem; }
.thanh-dau__nut .nut { opacity: 1; pointer-events: auto; }

/* Nút "Tài trợ dự án" luôn hiện, kể cả khi chưa cuộn */
.thanh-dau .nut:not(.nut--vien) { opacity: 1; pointer-events: auto; }

/* Nút phụ dạng viền, chỉ hiện khi thanh đã dính */
.nut--vien {
  background: transparent;
  border: 1px solid rgba(255,255,255,.3);
  box-shadow: none;
  color: var(--bac);
}
.nut--vien:hover { background: rgba(255,255,255,.08); border-color: #fff; color: #fff; }
.thanh-dau .nut--vien { opacity: 0; pointer-events: none; }
.thanh-dau.dinh .nut--vien { opacity: 1; pointer-events: auto; }

@media (max-width: 640px) {
  .thanh-dau { padding-left: 1rem; padding-right: 1rem; }
  .thanh-dau__logo img { width: 108px; }
  .thanh-dau__nut .nut { font-size: .82rem; padding: .58em 1em; }
}

/* Màn hình rất hẹp thì rút gọn chữ trên nút cho khỏi tràn */
@media (max-width: 380px) {
  .thanh-dau__logo img { width: 92px; }
  .thanh-dau__nut .nut { font-size: .78rem; padding: .55em .85em; }
}

/* ---- Lối dẫn cho người chưa đăng ký, trên trang tài trợ ---- */
.chua-dang-ky {
  margin-top: 2.4rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--vien);
}
.chua-dang-ky__hoi {
  font-weight: 700;
  color: var(--chu);
  font-size: 1.02rem;
  margin: 0 0 .5rem;
}
.chua-dang-ky__giai {
  color: var(--chu-rat-mo);
  font-size: .95rem;
  max-width: 54ch;
  margin: 0 0 1.2rem;
}
.nut--vien-do {
  background: transparent;
  border: 1px solid var(--do);
  color: var(--do-sang);
  box-shadow: none;
  font-size: .95rem;
  padding: .75em 1.5em;
}
.nut--vien-do:hover { background: rgba(200,32,47,.12); color: #fff; }

/* Khi tra không thấy thì làm khối này nổi lên */
.chua-dang-ky.noi-bat {
  border: 1px solid var(--do);
  border-radius: var(--bo);
  background: rgba(200,32,47,.07);
  padding: 1.4rem 1.5rem;
  margin-top: 1.6rem;
}
.chua-dang-ky.noi-bat .chua-dang-ky__giai { color: var(--chu-mo); }

/* Số tiền nhỏ trong ô tích chọn tháng */
.tich-thang span em {
  display: block;
  font-style: normal;
  font-size: .74rem;
  font-weight: 600;
  color: var(--chu-rat-mo);
  margin-top: .1rem;
}
.tich-thang input:checked + span em { color: rgba(255,255,255,.75); }

/* ---- Hồ sơ tài trợ, ngay dưới tên người tra cứu ---- */
.ho-so {
  margin: 1.4rem 0 0;
  display: grid;
  gap: .1rem;
  border-top: 1px solid var(--vien);
}
.ho-so__hang {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: .2rem 1.2rem;
  align-items: baseline;
  padding: .75rem 0;
  border-bottom: 1px solid var(--vien);
}
.ho-so dt {
  color: var(--chu-rat-mo);
  font-size: .9rem;
}
.ho-so dd {
  margin: 0;
  font-weight: 700;
  color: #fff;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .ho-so__hang { grid-template-columns: 1fr auto; }
  .ho-so dd { text-align: right; }
}

.ho-so__phu {
  font-weight: 400;
  font-size: .88rem;
  color: var(--chu-rat-mo);
  margin-left: .35rem;
}

/* Ô "Số khác": số tiền và tháng đứng cạnh nhau */
.so-khac__doi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 10rem);
  gap: .8rem;
  align-items: end;
}
.o-chon-thang {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--chu);
  background: var(--nen);
  border: 1px solid var(--vien);
  border-radius: 10px;
  padding: .82em .8em;
  cursor: pointer;
}
.o-chon-thang:focus {
  outline: none;
  border-color: var(--do);
  box-shadow: 0 0 0 3px rgba(200,32,47,.22);
}
@media (max-width: 520px) {
  .so-khac__doi { grid-template-columns: 1fr; }
}

/* ==========================================================================
   VINH DANH — giải thưởng cho vận động viên xuất sắc
   ========================================================================== */
.poster {
  margin: 2.2rem 0 0;
  border-radius: var(--bo);
  overflow: hidden;
  border: 1px solid var(--vien);
  background: var(--nen-2);
}
.poster img { width: 100%; display: block; }

.giai-thuong {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1.4rem;
  align-items: stretch;
}
.giai {
  border: 1px solid var(--vien);
  border-radius: var(--bo);
  background: var(--nen-2);
  padding: 1.5rem 1.4rem;
  display: grid;
  gap: .5rem;
  justify-items: center;
  text-align: center;
}
.giai--lon { border-color: var(--do); background: rgba(200,32,47,.08); }

.giai__hang {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--do);
  border-radius: 999px;
  padding: .4em 1.1em;
}
.giai__hang--den { background: #16161a; border: 1px solid var(--vien); }

.giai__tien {
  font-size: clamp(1.5rem, 4vw, 1.95rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--chu);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.giai__tien span { font-size: .62em; font-weight: 700; color: var(--do-sang); margin-left: .1em; }
.giai__cho { font-size: .88rem; color: var(--chu-rat-mo); }

.lien-he-tai-tro {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: .95rem;
  color: var(--chu-rat-mo);
}
.lien-he-tai-tro a { color: var(--do-sang); text-decoration: none; }
.lien-he-tai-tro a:hover { text-decoration: underline; }

/* ==========================================================================
   TỔNG TÀI TRỢ CẢ DỰ ÁN
   ========================================================================== */
.tong-du-an {
  display: grid;
  justify-items: center;
  gap: .25rem;
  text-align: center;
  padding: 1.3rem 1.4rem;
  margin-bottom: 2.2rem;
  border: 1px solid var(--do);
  border-radius: var(--bo);
  background: rgba(200,32,47,.08);
}
.tong-du-an[hidden] { display: none; }
.tong-du-an--cuoi { margin: 1.6rem 0 0; }

.tong-du-an__nhan {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--do-sang);
}
.tong-du-an__so {
  font-size: clamp(1.7rem, 5.5vw, 2.3rem);
  font-weight: 900;
  letter-spacing: -.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.tong-du-an__phu { font-size: .9rem; color: var(--chu-rat-mo); }
.tong-du-an__phu:empty { display: none; }