/* ==========================================================================
   YOUR LAUNCH! — WEDUVATE
   Bảng màu lấy từ poster "Bán mình bằng mình": nền trắng, xanh hoàng gia,
   khối xanh đậm có chữ trắng, dải băng chéo chạy chữ.
   ========================================================================== */

:root {
  --xanh:        #4670DC;   /* nửa phải poster — trùng màu nền ảnh */
  --xanh-sang:   #5B7FEA;
  --xanh-dam:    #1D3AA6;   /* khối chữ "TRANG" */
  --xanh-toi:    #13256F;
  --xanh-nhat:   #EEF2FD;
  --xanh-vien:   #D5DEF8;

  --nen:         #FFFFFF;
  --nen-2:       #F6F8FE;
  --chu:         #0F1B45;
  --chu-mo:      #4D5A80;
  --chu-rat-mo:  #8A93B0;

  --xanh-la:     #12A150;
  --do:          #D93A3A;
  --vang:        #F2B705;

  --bo:          18px;
  --rong:        1120px;
  --rong-hep:    760px;

  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: var(--xanh-dam); }
.an { display: none !important; }
.khung { width: 100%; max-width: var(--rong); margin: 0 auto; padding: 0 20px; }
.khung-hep { max-width: var(--rong-hep); }

/* ----------------------------------------------------------- Nhãn & nút */
.nhan {
  display: inline-block;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--xanh-dam);
  margin-bottom: .8rem;
}
.nhan::before {
  content: ""; display: inline-block; width: 24px; height: 3px;
  background: var(--xanh); vertical-align: middle; margin-right: .6em;
}

.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  border: 0; border-radius: 999px;
  background: var(--xanh-dam); color: #fff;
  font: 800 1rem/1 var(--font); letter-spacing: .02em;
  padding: 1.05em 1.8em;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(29, 58, 166, .65);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.nut:hover { background: var(--xanh-toi); transform: translateY(-1px); }
.nut:active { transform: translateY(0); }
.nut:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.nut-rong { width: 100%; }
.nut-vien {
  background: transparent; color: var(--xanh-dam);
  box-shadow: inset 0 0 0 2px var(--xanh-vien);
}
.nut-vien:hover { background: var(--xanh-nhat); }
.nut-nho { padding: .55em 1em; font-size: .85rem; box-shadow: none; }
.mui-ten { width: 1.1em; height: 1.1em; }

.dang-quay {
  width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  animation: quay .8s linear infinite;
}
@keyframes quay { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- HERO */
.hero {
  position: relative;
  background: linear-gradient(90deg, var(--nen) 0 50%, var(--xanh) 50% 100%);
  overflow: hidden;
}
.hero::after {   /* nét vẽ chéo mờ như poster */
  content: ""; position: absolute; right: -60px; top: 18%;
  width: 420px; height: 420px; opacity: .18; pointer-events: none;
  background: repeating-linear-gradient(-35deg, #fff 0 3px, transparent 3px 26px);
  -webkit-mask: radial-gradient(closest-side, #000 40%, transparent);
          mask: radial-gradient(closest-side, #000 40%, transparent);
}
.hero-trong {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr .92fr; align-items: center;
  gap: 24px; min-height: 560px; padding-top: 28px; padding-bottom: 96px;
}
.logo-goc {
  position: absolute; right: 20px; top: 22px; z-index: 3;
  width: 150px; filter: brightness(0) invert(1);
}
.hero-chu { padding: 48px 0 0; }
.hero-nho {
  font-weight: 900; font-size: clamp(.95rem, 2vw, 1.2rem);
  letter-spacing: .02em; color: var(--xanh-dam); text-transform: uppercase; margin: 0 0 .25em;
}
.tieu-de-lon {
  margin: 0 0 .35em;
  font-weight: 900; font-size: clamp(3rem, 8.4vw, 6.6rem);
  line-height: .9; letter-spacing: -.035em; text-transform: uppercase;
}
.tieu-de-lon .khoi {
  display: inline-block; background: var(--xanh-dam); color: #fff;
  padding: .02em .12em .06em; margin-right: .06em;
}
.tieu-de-lon .bong { color: var(--xanh); }
.trich {
  position: relative; max-width: 30ch;
  font-style: italic; font-weight: 700; color: var(--xanh-dam);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); line-height: 1.45;
  padding-right: 54px; margin: 0 0 1.5em;
}
.trich::after {
  content: "\201D"; position: absolute; right: 0; bottom: -.55em;
  font: italic 900 4.4rem/1 var(--font); color: var(--xanh-dam);
}
.hero-the {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.6em; padding: 0; list-style: none;
}
.hero-the li {
  font-size: .85rem; font-weight: 700; color: var(--xanh-dam);
  background: var(--xanh-nhat); border-radius: 999px; padding: .4em .9em;
}
/* Ảnh tách nền có viền trắng — chân ảnh chui xuống dưới dải băng như poster */
.hero-anh { position: relative; align-self: end; margin-bottom: -96px; display: flex; justify-content: center; }
.hero-anh img {
  width: auto; height: auto; max-height: 640px; max-width: 100%;
  filter: drop-shadow(0 24px 40px rgba(19, 37, 111, .35));
}

/* --------------------------------------------------- Dải băng chạy chữ */
.bang-chay {
  position: relative; z-index: 2;
  margin: -64px 0 0; transform: rotate(-3deg);
  background: var(--xanh-dam); color: #fff; overflow: hidden;
  box-shadow: 0 14px 30px -14px rgba(19, 37, 111, .7);
}
.bang-chay.phu { margin-top: 22px; transform: rotate(1.6deg); background: var(--xanh-toi); }
.bang-chay .dong {
  display: flex; width: max-content; padding: .55em 0;
  animation: chay 32s linear infinite;
}
.bang-chay.phu .dong { animation-direction: reverse; animation-duration: 40s; }
.bang-chay span {
  font-weight: 900; font-size: clamp(1.1rem, 2.6vw, 1.7rem); text-transform: uppercase;
  white-space: nowrap; padding: 0 .6em; letter-spacing: .01em;
}
.bang-chay.phu span {
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.6); font-weight: 800;
}
@keyframes chay { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------ Khu vực */
.khu { padding: 72px 0; }
.khu-xam { background: var(--nen-2); }
.tieu-de-khu {
  font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.5rem); letter-spacing: -.02em; text-transform: uppercase;
}
.tieu-de-khu em { font-style: normal; color: var(--xanh); }
.dan { color: var(--chu-mo); max-width: 62ch; }

/* 3 quy tắc cọc */
.luoi-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.o-quy-tac {
  position: relative; background: #fff; border: 1.5px solid var(--xanh-vien); border-radius: var(--bo);
  padding: 22px 22px 20px; overflow: hidden;
}
.o-quy-tac .so {
  font-weight: 900; font-size: 2.6rem; line-height: 1; color: var(--xanh-nhat);
  position: absolute; right: 14px; top: 10px;
}
.o-quy-tac h3 { font-size: 1.08rem; font-weight: 800; margin-bottom: .35em; position: relative; }
.o-quy-tac p { color: var(--chu-mo); margin: 0; font-size: .95rem; position: relative; }
.o-quy-tac.noi { background: var(--xanh-dam); border-color: var(--xanh-dam); color: #fff; }
.o-quy-tac.noi p { color: rgba(255,255,255,.82); }
.o-quy-tac.noi .so { color: rgba(255,255,255,.12); }
.so-tien-lon { font-weight: 900; font-size: 1.9rem; letter-spacing: -.02em; display: block; margin: .1em 0 .15em; }

/* -------------------------------------------------- Thanh các bước */
.cac-buoc {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  list-style: none; padding: 0; margin: 0 0 22px; counter-reset: b;
}
.cac-buoc li {
  counter-increment: b; position: relative;
  font-size: .8rem; font-weight: 700; color: var(--chu-rat-mo);
  padding-top: 14px; border-top: 4px solid var(--xanh-vien);
  transition: color .2s, border-color .2s;
}
.cac-buoc li::before { content: "0" counter(b); display: block; font-weight: 900; font-size: 1.05rem; }
.cac-buoc li.dang { color: var(--xanh-dam); border-color: var(--xanh-dam); }
.cac-buoc li.xong { color: var(--xanh); border-color: var(--xanh); }

/* ------------------------------------------------------------ Thẻ form */
.the {
  background: #fff; border-radius: 24px; padding: 32px;
  box-shadow: 0 30px 60px -30px rgba(19, 37, 111, .35), 0 0 0 1px var(--xanh-vien);
}
.the h2 { font-weight: 900; font-size: 1.55rem; letter-spacing: -.01em; }
.the .dan { margin-bottom: 1.4em; }

.truong { margin-bottom: 18px; }
.truong > label, .nhan-truong {
  display: block; font-weight: 700; font-size: .95rem; margin-bottom: 6px;
}
.bat-buoc { color: var(--do); }
.o-nhap, textarea.o-nhap {
  width: 100%; border: 1.5px solid var(--xanh-vien); border-radius: 12px;
  font: 500 1rem/1.5 var(--font); color: var(--chu);
  padding: .8em 1em; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
textarea.o-nhap { min-height: 112px; resize: vertical; }
.o-nhap::placeholder { color: var(--chu-rat-mo); font-weight: 400; }
.o-nhap:focus { outline: none; border-color: var(--xanh); box-shadow: 0 0 0 4px rgba(63, 102, 219, .15); }
.o-nhap[aria-invalid="true"] { border-color: var(--do); box-shadow: 0 0 0 4px rgba(217, 58, 58, .1); }
.loi { color: var(--do); font-size: .85rem; font-weight: 600; min-height: 0; margin-top: 5px; }
.loi:empty { display: none; }
.goi-y-nho { color: var(--chu-rat-mo); font-size: .84rem; margin-top: 5px; }

/* -------------------------------------------------- QR & chuyển khoản */
.luoi-ck { display: grid; grid-template-columns: 280px 1fr; gap: 28px; align-items: start; }
.o-qr {
  background: linear-gradient(160deg, var(--xanh-dam), var(--xanh));
  border-radius: 20px; padding: 16px; text-align: center; color: #fff;
}
.o-qr img {
  width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border-radius: 12px; padding: 8px;
}
.o-qr small { display: block; margin-top: 10px; font-size: .78rem; opacity: .9; line-height: 1.4; }
.bang-ck { margin: 0; }
.bang-ck > div {
  display: grid; grid-template-columns: 118px 1fr auto; gap: 8px; align-items: center;
  padding: 11px 0; border-bottom: 1px dashed var(--xanh-vien);
}
.bang-ck dt { color: var(--chu-mo); font-size: .88rem; }
.bang-ck dd { margin: 0; font-weight: 800; word-break: break-word; }
.bang-ck dd.noi { color: var(--xanh-dam); font-size: 1.15rem; }
.nut-chep {
  border: 0; background: var(--xanh-nhat); color: var(--xanh-dam);
  font: 700 .78rem/1 var(--font); padding: .6em .85em; border-radius: 999px; cursor: pointer;
}
.nut-chep.da { background: var(--xanh-la); color: #fff; }
.canh-bao {
  background: #FFF8E1; border-left: 4px solid var(--vang); border-radius: 10px;
  padding: 12px 14px; font-size: .9rem; margin: 16px 0 0; color: #5B4A0A;
}
.nhom-nut { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* --------------------------------------------------- Tải biên lai */
.vung-tha {
  display: block; position: relative; cursor: pointer;
  border: 2px dashed var(--xanh-vien); border-radius: 18px; background: var(--nen-2);
  padding: 34px 18px; text-align: center; transition: border-color .15s, background .15s;
}
.vung-tha:hover, .vung-tha.dang-keo { border-color: var(--xanh); background: var(--xanh-nhat); }
.vung-tha input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vung-tha strong { display: block; font-size: 1.05rem; color: var(--xanh-dam); }
.vung-tha span { color: var(--chu-mo); font-size: .88rem; }
.bieu-tuong-tai {
  width: 52px; height: 52px; margin: 0 auto 10px; border-radius: 50%;
  display: grid; place-items: center; background: var(--xanh-dam); color: #fff;
}
.xem-truoc { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.xem-truoc img { width: 92px; height: 92px; object-fit: cover; border-radius: 12px; border: 1px solid var(--xanh-vien); }
.xem-truoc p { margin: 0; font-size: .9rem; color: var(--chu-mo); }
.xem-truoc strong { color: var(--chu); display: block; word-break: break-all; }

/* ------------------------------------------------------- Hoàn tất */
.hoan-tat { text-align: center; padding: 10px 0; }
.dau-tich {
  width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center; background: var(--xanh-dam); color: #fff;
  box-shadow: 0 0 0 10px var(--xanh-nhat);
}
.hoan-tat .dan { margin-left: auto; margin-right: auto; }
.ma-ho-so {
  display: inline-block; font-weight: 900; letter-spacing: .08em;
  background: var(--xanh-nhat); color: var(--xanh-dam); padding: .4em 1em; border-radius: 10px; margin-bottom: 1em;
}

/* -------------------------------------------------------- Footer */
.chan-trang {
  background: var(--xanh-toi); color: rgba(255,255,255,.75);
  padding: 34px 0; font-size: .88rem;
}
.chan-trang .khung { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; }
.chan-trang img { width: 120px; filter: brightness(0) invert(1); opacity: .9; }
.chan-trang a { color: #fff; }

/* ================================================== TRANG THÔNG TIN */
.hero-mong {
  position: relative; overflow: hidden;
  background: var(--xanh); color: #fff; padding: 34px 0 40px;
}
.hero-mong::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 38%;
  background: var(--xanh-dam); transform: skewX(-14deg) translateX(-30%);
}
.hero-mong .khung { position: relative; }
.hero-mong .logo-goc { position: static; margin-bottom: 30px; }
.hero-mong .tieu-de-lon { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
.hero-mong .tieu-de-lon .khoi { background: #fff; color: var(--xanh-dam); }
.hero-mong .tieu-de-lon .bong { color: var(--xanh-toi); }
.hero-mong p { max-width: 60ch; color: rgba(255,255,255,.9); }
.hero-mong .hero-nho { color: #fff; }

.tien-do {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--xanh-vien);
}
.tien-do .khung { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.tien-do-thanh { flex: 1; height: 8px; border-radius: 99px; background: var(--xanh-nhat); overflow: hidden; }
.tien-do-thanh i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--xanh-dam), var(--xanh-sang)); transition: width .3s; }
.tien-do b { font-size: .82rem; color: var(--xanh-dam); white-space: nowrap; min-width: 9ch; text-align: right; }

.the-noi { margin-top: 28px; position: relative; z-index: 2; }
.luoi-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.luoi-2 .rong-het { grid-column: 1 / -1; }

.tieu-de-phan {
  display: flex; align-items: center; gap: 12px;
  margin: 46px 0 18px; padding: 14px 18px; border-radius: 14px;
  background: var(--xanh-dam); color: #fff;
  font-weight: 900; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em;
}
.tieu-de-phan small {
  font-size: .72rem; font-weight: 800; letter-spacing: .12em; opacity: .75; white-space: nowrap;
}

.cau {
  border: 1.5px solid var(--xanh-vien); border-radius: 18px; padding: 22px 22px 8px;
  margin-bottom: 16px; background: #fff; scroll-margin-top: 70px;
}
.cau.co-loi { border-color: var(--do); }
.cau-so {
  display: inline-block; font-weight: 900; font-size: .74rem; letter-spacing: .14em;
  color: var(--xanh); text-transform: uppercase; margin-bottom: 4px;
}
.cau h3 { font-size: 1.08rem; font-weight: 800; line-height: 1.4; margin-bottom: .4em; }
.cau .mo-ta { color: var(--chu-mo); font-size: .93rem; margin-bottom: .6em; }
.cau .mo-ta q { font-style: italic; }
.danh-sach-goi-y {
  margin: 0 0 14px; padding: 10px 14px 10px 30px; background: var(--nen-2); border-radius: 12px;
  color: var(--chu-mo); font-size: .9rem;
}
.danh-sach-goi-y li { margin: 2px 0; }
.danh-sach-goi-y.co-so { list-style: decimal; }

.lua-chon { display: grid; gap: 8px; margin-bottom: 6px; }
.lua-chon label {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  border: 1.5px solid var(--xanh-vien); border-radius: 12px; padding: .75em 1em;
  font-size: .95rem; line-height: 1.45; transition: border-color .15s, background .15s;
}
.lua-chon label:hover { border-color: var(--xanh-sang); }
.lua-chon input { margin: .2em 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--xanh-dam); }
.lua-chon label:has(input:checked) { border-color: var(--xanh-dam); background: var(--xanh-nhat); font-weight: 600; }
.o-khac { margin-top: 8px; }

.bang-diem { display: grid; gap: 10px; margin-bottom: 8px; }
.dong-diem {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed var(--xanh-vien);
}
.dong-diem span { font-size: .95rem; font-weight: 600; }
.nut-diem { display: flex; gap: 6px; }
.nut-diem label { position: relative; }
.nut-diem input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.nut-diem b {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px;
  border: 1.5px solid var(--xanh-vien); font-weight: 800; color: var(--chu-mo); cursor: pointer;
  transition: all .15s;
}
.nut-diem input:checked + b { background: var(--xanh-dam); border-color: var(--xanh-dam); color: #fff; }
.nut-diem input:focus-visible + b { box-shadow: 0 0 0 4px rgba(63, 102, 219, .25); }
.thang-10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-bottom: 4px; }
.thang-10 b { width: 100%; }
.chu-thang { display: flex; justify-content: space-between; font-size: .78rem; color: var(--chu-rat-mo); margin-bottom: 14px; }
.chu-giai-diem { font-size: .85rem; color: var(--chu-mo); margin-bottom: 10px; }
.tong-diem {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin: 8px 0 14px; padding: 12px 16px; border-radius: 12px; background: var(--xanh-nhat);
  font-weight: 800; color: var(--xanh-dam);
}
.tong-diem strong { font-size: 1.4rem; color: var(--xanh-dam); }

.hop-gui {
  margin-top: 30px; padding: 22px; border-radius: 18px; background: var(--nen-2);
}
.thong-bao-loi {
  background: #FDECEC; color: #8A1F1F; border-radius: 12px; padding: 12px 14px; font-size: .92rem; margin-bottom: 14px;
}
.da-luu-nhap { font-size: .8rem; color: var(--chu-rat-mo); text-align: center; margin-top: 10px; }

.loi-ket { text-align: left; max-width: 640px; margin: 0 auto; }
.loi-ket p { color: var(--chu-mo); }
.loi-ket .trich-ket {
  border-left: 4px solid var(--xanh-dam); padding: 10px 16px; background: var(--xanh-nhat);
  border-radius: 0 12px 12px 0; font-weight: 700; color: var(--xanh-dam); font-style: italic;
}
.chuoi-buoc { font-weight: 800; color: var(--xanh-dam); }

/* ------------------------------------------------------- Đáp ứng */
@media (max-width: 900px) {
  .hero { background: var(--nen); }
  .hero-trong { grid-template-columns: 1fr; min-height: 0; padding-bottom: 0; gap: 0; }
  .hero-chu { padding-top: 70px; }
  .logo-goc { width: 120px; left: 20px; right: auto; filter: none; }
  .hero-anh { background: var(--xanh); margin: 0 -20px -0px; padding: 28px 20px 0; }
  .hero-anh img { max-height: 460px; }
  .bang-chay { margin-top: -40px; }
  .luoi-3 { grid-template-columns: 1fr; }
  .luoi-ck { grid-template-columns: 1fr; }
  .o-qr { max-width: 300px; margin: 0 auto; }
  .hero-mong .logo-goc { filter: brightness(0) invert(1); }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .khu { padding: 52px 0; }
  .khung { padding: 0 16px; }
  .hero-anh { margin: 0 -16px; padding: 20px 16px 0; }
  .the { padding: 22px 18px; border-radius: 20px; }
  .luoi-2 { grid-template-columns: 1fr; }
  .bang-ck > div { grid-template-columns: 1fr auto; }
  .bang-ck dt { grid-column: 1 / -1; margin-bottom: -6px; }
  .cac-buoc li { font-size: .7rem; }
  .cau { padding: 18px 16px 6px; }
  .dong-diem { grid-template-columns: 1fr; gap: 8px; }
  .thang-10 { grid-template-columns: repeat(5, 1fr); }
  .tieu-de-phan { flex-direction: column; align-items: flex-start; gap: 2px; }
}