/* ============================================================
   LP Aff - tuyển cộng đồng KOC Perdays
   Màu lấy từ banner thiết kế: nền hồng phấn, chữ đen đậm,
   điểm nhấn san hô, nút chốt đỏ thẫm viền vàng.
   Trang này gần như 100% khách vào bằng điện thoại (traffic từ
   quảng cáo Facebook), nên viết mobile-first, desktop chỉ là
   bản mobile được canh giữa và giới hạn bề ngang.
   ============================================================ */

:root{
  --nen:      #FFF7F5;
  --nen-2:    #FDE9E6;
  --nen-3:    #FBDCD8;
  --san:      #FFFFFF;
  --muc:      #191919;
  --muc-2:    #6B5F5E;
  --muc-3:    #9A8C8B;
  --sh:       #F0605A;   /* san hô - màu thương hiệu trên banner */
  --sh-dam:   #D8443E;
  --sh-nhat:  #FFE9E7;
  --do:       #C0173F;   /* nút chốt */
  --do-2:     #94102E;
  --vang:     #F5D588;
  --vang-2:   #E0AE3F;
  --vien:     #F2DAD6;
  --bong:     0 2px 6px rgba(180,90,80,.07), 0 14px 30px -18px rgba(150,60,55,.30);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--nen);
  color:var(--muc);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  /* 16px là ngưỡng tối thiểu để iOS không tự phóng to khi bấm vào ô nhập */
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
h2,h3{margin:0; text-wrap:balance}
p{margin:0}
b,strong{font-weight:800}

.trong{
  width:100%;
  max-width:560px;
  margin:0 auto;
  padding:0 18px;
}

section{padding:38px 0}

.tieu{
  font-size:25px;
  font-weight:800;
  line-height:1.22;
  letter-spacing:-.02em;
  text-align:center;
}
.tieu-phu{
  margin-top:10px;
  text-align:center;
  color:var(--muc-2);
  font-size:14.5px;
  line-height:1.55;
}
.tieu-trang{color:#fff}
.tieu-phu-trang{color:rgba(255,255,255,.85)}

/* ---------- nút ---------- */
.nut{
  font-family:inherit;
  border:0;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.02em;
  border-radius:999px;
  transition:transform .12s ease, box-shadow .12s ease;
}
.nut:active{transform:scale(.975)}
.nut-to{
  display:block;
  width:100%;
  padding:17px 20px;
  font-size:18px;
  color:var(--vang);
  background:linear-gradient(180deg,var(--do) 0%,var(--do-2) 100%);
  border:2px solid var(--vang);
  box-shadow:0 6px 18px -6px rgba(148,16,46,.55);
}
.nut-to:focus-visible{outline:3px solid var(--sh); outline-offset:3px}

/* ---------- nút bằng ảnh ---------- */
.nut-anh{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  line-height:0;          /* bỏ khoảng trống chữ dưới ảnh trong thẻ inline */
  transition:transform .12s ease;
}
.nut-anh:active{transform:scale(.975)}
.nut-anh img{width:100%; height:auto; display:block}
/* Ảnh nút tỉ lệ 5:1 nên trải hết bề ngang là cao 71px, nhìn như một dải băng
   chứ không ra cái nút. Chặn bề ngang lại và canh giữa. */
.hero-duoi .nut-anh{max-width:290px; margin:0 auto}
.nut-anh:focus-visible{outline:3px solid var(--sh); outline-offset:4px; border-radius:999px}

/* ============ 1. MÀN ĐẦU ============ */
.hero{padding:0; background:var(--nen)}
.hero-anh{width:100%; height:auto; display:block}

/* Đáy banner KHÔNG đồng màu - bên trái là nền hồng, bên phải là quần trắng
   người mẫu - nên không có màu nền nào khớp được, tô màu gì cũng lòi vệt ngang.
   Cách chắc ăn: cho chính đáy ảnh tan dần vào màu nền trang. Cách này đúng với
   mọi banner, đổi ảnh sau này không phải đo lại màu. */
.hero-khung{position:relative; max-width:560px; margin:0 auto}
.hero-khung::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:46px;
  background:linear-gradient(180deg,rgba(255,247,245,0) 0%,var(--nen) 100%);
  pointer-events:none;
}
.hero-duoi{
  max-width:560px;
  margin:0 auto;
  padding:0 18px 26px;
  background:var(--nen);
}
.hero-nho{
  margin-top:11px;
  text-align:center;
  font-size:13px;
  color:var(--muc-2);
}

/* ============ 2. BA LÝ DO ============ */
.kv{padding-top:6px}
.ly-do{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.ld{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:13px;
  align-items:center;
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:var(--bong);
}
/* Số 1-2-3 thay cho biểu tượng: cụm này giờ đọc là "3 KHÔNG" nên đánh số
   giúp người xem đếm được ngay, biểu tượng thì không nói được điều đó. */
.ld-so{
  grid-row:1 / span 2;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,var(--sh) 0%,var(--sh-dam) 100%);
  color:#fff;
  font-size:21px;
  font-weight:800;
  box-shadow:0 4px 10px -4px rgba(216,68,62,.65);
}
.ld b{font-size:16.5px; line-height:1.3}
.ld span:not(.ld-so){font-size:13.5px; color:var(--muc-2); line-height:1.45}

.tieu-nhan{
  color:var(--sh-dam);
  /* gạch chân mềm thay vì đổi nền: cụm "3 KHÔNG" cần nổi nhưng không được
     phá nhịp của dòng tiêu đề */
  border-bottom:4px solid var(--sh);
  padding-bottom:1px;
}

/* ============ 3. CON SỐ ============ */
.so{
  background:linear-gradient(180deg,var(--nen-2) 0%,var(--nen-3) 100%);
  text-align:center;
}
.so-lab{font-size:15px; color:var(--muc-2); font-weight:600}
.so-to{
  margin-top:2px;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  color:var(--sh-dam);
  /* Con số là thứ phải đọc được trước tiên - cho nó co giãn theo bề ngang
     màn hình thay vì cố định, để trên máy nhỏ không bị tràn dòng. */
  font-size:clamp(56px,17vw,78px);
}
.so-to i{font-style:normal; font-size:.5em; margin-left:2px; letter-spacing:0}
.so-them{margin-top:6px; font-size:14.5px; color:var(--muc-2)}

.so-tach{
  margin-top:22px;
  display:flex;
  align-items:stretch;
  gap:9px;
}
.tach-o{
  flex:1 1 0;
  min-width:0;
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:15px;
  padding:13px 11px;
  box-shadow:var(--bong);
  display:flex;
  flex-direction:column;
  gap:3px;
}
.tach-k{font-size:12px; color:var(--muc-3); font-weight:600; letter-spacing:.02em}
.tach-v{font-size:19px; color:var(--sh-dam); line-height:1.2}
.tach-d{font-size:11.5px; color:var(--muc-2); line-height:1.4}
.tach-cong{
  align-self:center;
  font-size:22px;
  font-weight:800;
  color:var(--sh-dam);
  flex:none;
}
.so-ct{
  margin-top:16px;
  font-size:14px;
  color:var(--muc-2);
  line-height:1.55;
}
.so-ct b{color:var(--sh-dam)}
.so-deal{
  margin-top:11px;
  display:inline-block;
  background:var(--san);
  border:1.5px dashed var(--sh);
  border-radius:12px;
  padding:9px 14px;
  font-size:13.5px;
  color:var(--muc-2);
  line-height:1.45;
}
.so-deal b{color:var(--sh-dam)}

/* ============ 4. BẢNG MỐC ============ */
.moc-rieng{
  margin:14px auto 0;
  max-width:440px;
  background:var(--san);
  border:1.5px solid var(--sh);
  border-radius:13px;
  padding:11px 15px;
  font-size:13.5px;
  color:var(--muc-2);
  line-height:1.5;
  text-align:center;
}
.moc-rieng b{color:var(--sh-dam)}

.thang{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.bac{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:16px;
  padding:13px 15px;
  box-shadow:var(--bong);
}
.bac-trai{
  flex:none;
  width:60px;
  text-align:center;
  border-right:1px solid var(--vien);
  padding-right:12px;
}
.bac-trai b{
  display:block;
  font-size:27px;
  line-height:1;
  color:var(--muc);
  letter-spacing:-.02em;
}
.bac-trai span{font-size:12px; color:var(--muc-3); font-weight:600}
.bac-phai{display:flex; flex-direction:column; min-width:0}
.bac-nhan{font-size:11.5px; color:var(--muc-3); font-weight:600; letter-spacing:.03em; text-transform:uppercase}
.bac-tien{font-size:21px; line-height:1.2; color:var(--sh-dam); letter-spacing:-.01em}
.bac-lo{font-size:12.5px; color:var(--muc-2)}
.bac-co{
  position:absolute;
  top:-9px; right:13px;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  background:var(--sh);
  color:#fff;
}
.bac-1{border-color:var(--sh); border-width:2px}
.bac-top{
  border:2px solid var(--vang-2);
  background:linear-gradient(180deg,#FFFDF7 0%,#FFF6E4 100%);
}
.bac-top .bac-tien{color:#A8121C}
.bac-co-v{background:linear-gradient(180deg,var(--vang) 0%,var(--vang-2) 100%); color:#5A3B02}

.moc-ghi{
  margin-top:16px;
  font-size:12.5px;
  color:var(--muc-3);
  line-height:1.5;
  text-align:center;
}

/* ============ 5. AI THAM GIA ============ */
.ai{background:linear-gradient(180deg,var(--nen) 0%,var(--nen-2) 100%)}
.dk{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.dk li{
  position:relative;
  padding-left:32px;
  font-size:14.5px;
  line-height:1.5;
  color:var(--muc-2);
}
.dk li::before{
  content:"";
  position:absolute;
  left:0; top:4px;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--sh-nhat) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D8443E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.bc{
  margin-top:22px;
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:18px;
  padding:20px 16px;
  text-align:center;
  box-shadow:var(--bong);
}
.bc-so{
  display:block;
  font-size:46px;
  line-height:1;
  color:var(--sh-dam);
  letter-spacing:-.03em;
}
.bc-chu{display:block; margin-top:6px; font-size:14.5px; font-weight:600}
.bc-them{display:block; margin-top:7px; font-size:13px; color:var(--muc-2)}

/* ============ 5. PERDAYS LÀ AI ============ */
.pd{background:linear-gradient(180deg,var(--nen-2) 0%,var(--nen) 100%)}
.pd-gt{
  margin-top:16px;
  font-size:15px;
  line-height:1.65;
  color:var(--muc-2);
  text-align:center;
}
.pd-gt b{color:var(--sh-dam)}

.pd-luoi{
  margin-top:18px;
  display:grid;
  /* minmax(0,1fr) chứ không phải 1fr: 1fr có ngưỡng nhỏ nhất là min-content,
     tên dài như NutriSeal-Cap sẽ đẩy vỡ cột. */
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:9px;
}
.pd-o{
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:14px;
  padding:13px 12px;
  box-shadow:var(--bong);
  text-align:center;
}
.pd-o b{display:block; font-size:14px; line-height:1.3; color:var(--sh-dam)}
.pd-o span{display:block; margin-top:4px; font-size:12px; color:var(--muc-2); line-height:1.4}

/* Biểu tượng dùng font emoji của hệ máy. Traffic gần như toàn bộ là iOS và
   Android nên hiển thị tốt; riêng cờ 🇦🇺 trên Windows sẽ ra hai chữ "AU" vì
   Windows không có glyph cờ - chấp nhận được vì đó không phải tệp người xem. */
.ico{
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:26px;
  line-height:1;
  display:block;
}

/* ---------- nhãn nhóm trong section ---------- */
.nhan{
  margin-top:30px;
  font-size:19px;
  font-weight:800;
  line-height:1.3;
  text-align:center;
  letter-spacing:-.01em;
}
.nhan + *{margin-top:14px}

/* ---------- nền tảng chuyên môn ---------- */
.cm{display:flex; flex-direction:column; gap:9px}
.cm-o{
  display:flex;
  gap:13px;
  align-items:flex-start;
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:14px;
  padding:14px 16px;
  box-shadow:var(--bong);
}
.cm-o .ico{flex:none; font-size:23px; margin-top:1px}
.cm-o b{display:block; font-size:15.5px; line-height:1.3}
.cm-o span{display:block; margin-top:3px; font-size:13.5px; color:var(--muc-2); line-height:1.5}

/* ---------- dải sản phẩm theo hành trình ---------- */
.hd-d{
  margin-top:8px;
  text-align:center;
  font-size:14px;
  color:var(--muc-2);
  line-height:1.5;
}
.hd-d b{color:var(--sh-dam)}
.hd{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.hd-o{
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:14px;
  padding:13px 16px;
  box-shadow:var(--bong);
}
.hd-gd{
  display:inline-block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,var(--sh) 0%,var(--sh-dam) 100%);
  padding:3px 11px;
  border-radius:999px;
}
.hd-o ul{
  margin:9px 0 0;
  padding-left:18px;
  gap:4px;
}
.hd-o li{font-size:13.5px; color:var(--muc-2); line-height:1.45}
.hd-o li::marker{color:var(--sh)}
.hd-o-combo{
  border-color:var(--vang-2);
  background:linear-gradient(180deg,#FFFDF7 0%,#FFF7E7 100%);
}
.hd-o-combo .hd-gd{background:linear-gradient(180deg,var(--vang) 0%,var(--vang-2) 100%); color:#5A3B02}
/* ---------- key message ---------- */
.km{
  margin-top:22px;
  background:linear-gradient(160deg,#E8564F 0%,#C0173F 100%);
  border-radius:17px;
  padding:19px 18px;
  text-align:center;
  box-shadow:0 8px 24px -12px rgba(148,16,46,.65);
}
.km-nhan{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--do-2);
  background:var(--vang);
  padding:4px 13px;
  border-radius:999px;
}
.km-nhan i{font-style:normal; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.km-t{
  margin-top:13px;
  font-size:15px;
  line-height:1.6;
  color:rgba(255,255,255,.94);
}
.km-t b{color:var(--vang)}
.km-chot{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid rgba(255,255,255,.28);
  font-size:17px;
  font-weight:800;
  line-height:1.4;
  color:#fff;
}

/* ============ 6. HỖ TRỢ ============ */
.ho-luoi{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ho-o{
  background:var(--san);
  border:1px solid var(--vien);
  border-left:4px solid var(--sh);
  border-radius:14px;
  padding:13px 15px;
  box-shadow:var(--bong);
}
/* Thẻ được nhấn: mục deal hoa hồng là thứ đáng chú ý nhất trong nhóm này */
.ho-o-nhan{
  border-left-color:var(--vang-2);
  background:linear-gradient(180deg,#FFFDF7 0%,#FFF7E7 100%);
}
.ho-o b{display:block; font-size:15.5px}
.ho-o span{display:block; margin-top:3px; font-size:13.5px; color:var(--muc-2); line-height:1.45}

/* ============ 7. BA BƯỚC ============ */
.buoc{background:linear-gradient(180deg,var(--nen-2) 0%,var(--nen) 100%)}
.bl{
  margin:20px 0 0;
  padding:0;
  list-style:none;
  counter-reset:b;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.bl li{
  counter-increment:b;
  position:relative;
  padding-left:52px;
  min-height:38px;
}
.bl li::before{
  content:counter(b);
  position:absolute;
  left:0; top:0;
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,var(--sh) 0%,var(--sh-dam) 100%);
  color:#fff;
  font-weight:800;
  font-size:17px;
  box-shadow:0 4px 10px -4px rgba(216,68,62,.7);
}
.bl li b{display:block; font-size:16px; line-height:1.35}
.bl li span{display:block; margin-top:3px; font-size:13.5px; color:var(--muc-2); line-height:1.5}

/* ============ 8. CÂU HỎI ============ */
.ch{
  margin-top:18px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.ch details{
  background:var(--san);
  border:1px solid var(--vien);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--bong);
}
.ch summary{
  list-style:none;
  cursor:pointer;
  padding:14px 44px 14px 16px;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  position:relative;
}
.ch summary::-webkit-details-marker{display:none}
.ch summary::after{
  content:"";
  position:absolute;
  right:16px; top:19px;
  width:11px; height:11px;
  border-right:2.4px solid var(--sh-dam);
  border-bottom:2.4px solid var(--sh-dam);
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.ch details[open] summary::after{transform:rotate(-135deg); top:22px}
.ch details p{
  padding:0 16px 15px;
  font-size:14px;
  color:var(--muc-2);
  line-height:1.6;
}

/* ============ 9. FORM ============ */
.dk-form{
  background:linear-gradient(165deg,#E8564F 0%,#C0173F 55%,#94102E 100%);
  /* chừa chỗ cho thanh dưới, không thì nút gửi bị thanh che */
  padding-bottom:118px;
}
.fm{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  gap:13px;
}
.tr{display:flex; flex-direction:column; gap:6px}
.tr-k{
  font-size:13.5px;
  font-weight:700;
  color:#fff;
  letter-spacing:.01em;
}
.tr-k i{font-style:normal; color:var(--vang)}
.o{
  font-family:inherit;
  font-size:16px;
  width:100%;
  padding:14px 15px;
  border-radius:13px;
  border:2px solid transparent;
  background:#fff;
  color:var(--muc);
  appearance:none;
  -webkit-appearance:none;
}
.o::placeholder{color:#B9AEAD}
.o:focus{outline:none; border-color:var(--vang)}
select.o{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191919' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:17px;
  padding-right:42px;
}
.loi{
  min-height:19px;
  font-size:13.5px;
  font-weight:700;
  color:var(--vang);
}
.fm .nut-to{margin-top:2px}
.fm-nho{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.75);
  text-align:center;
  line-height:1.5;
}

.tr-g{
  font-size:12px;
  color:rgba(255,255,255,.72);
  line-height:1.45;
}

/* ---------- vạch tiến trình 2 bước ---------- */
.tt{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:4px;
}
.tt-o{display:flex; align-items:center; gap:8px; flex:none}
.tt-o b{
  width:28px; height:28px;
  display:grid; place-items:center;
  border-radius:50%;
  font-size:14px;
  background:rgba(255,255,255,.22);
  color:rgba(255,255,255,.8);
}
.tt-o span{font-size:12.5px; font-weight:700; color:rgba(255,255,255,.7)}
.tt-o.dang b{background:#fff; color:var(--do)}
.tt-o.dang span{color:#fff}
.tt-vach{flex:1 1 auto; height:3px; border-radius:2px; background:rgba(255,255,255,.22); overflow:hidden}
.tt-vach i{display:block; height:100%; width:0; background:var(--vang); transition:width .3s ease}

.buoc-o{display:flex; flex-direction:column; gap:13px}
.buoc-o[hidden]{display:none}

/* ---------- khối 2 mã affiliate ---------- */
.nhom-id{
  background:rgba(0,0,0,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:15px;
  padding:15px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.nhom-t{font-size:15px; font-weight:800; color:#fff}
.nhom-d{font-size:12.5px; color:rgba(255,255,255,.8); line-height:1.5; margin-top:-6px}
.nhom-d b{color:var(--vang)}

.gd{
  background:rgba(255,255,255,.1);
  border-radius:11px;
  overflow:hidden;
}
.gd summary{
  list-style:none;
  cursor:pointer;
  padding:10px 13px;
  font-size:13px;
  font-weight:700;
  color:var(--vang);
}
.gd summary::-webkit-details-marker{display:none}
.gd-noi{padding:0 13px 12px; display:flex; flex-direction:column; gap:6px}
.gd-noi p{font-size:12.5px; color:rgba(255,255,255,.88); line-height:1.5}
.gd-noi b{color:#fff}
.gd-luu{color:var(--vang) !important; font-weight:600}

/* ---------- nhóm chọn dạng thẻ ----------
   Dùng thẻ bấm thay cho <select multiple>: trên điện thoại select nhiều lựa
   chọn rất khó bấm, còn thẻ thì thấy hết mọi lựa chọn cùng lúc. */
.nh{border:0; margin:0; padding:0; min-width:0}
.nh legend{padding:0; margin-bottom:8px}
.chip-h{display:flex; flex-wrap:wrap; gap:8px}
.chip{position:relative; cursor:pointer}
.chip input{position:absolute; opacity:0; width:0; height:0}
.chip span{
  display:block;
  padding:9px 15px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  background:rgba(255,255,255,.14);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.3);
  transition:background .13s ease, border-color .13s ease;
}
.chip input:checked + span{
  background:#fff;
  color:var(--do-2);
  border-color:var(--vang);
  box-shadow:0 0 0 2px rgba(245,213,136,.55);
}
.chip input:focus-visible + span{outline:3px solid var(--vang); outline-offset:2px}
.nh .tr-g{margin-top:8px; display:block}

/* ---------- cam kết ---------- */
.ck{
  background:rgba(0,0,0,.16);
  border:1.5px solid var(--vang);
  border-radius:15px;
  padding:15px;
}
.ck-o{display:flex; gap:11px; align-items:flex-start; cursor:pointer}
.ck-o input{position:absolute; opacity:0; width:0; height:0}
.ck-dau{
  flex:none;
  width:24px; height:24px;
  border-radius:7px;
  border:2px solid var(--vang);
  background:transparent;
  margin-top:1px;
  transition:background .13s ease;
}
.ck-o input:checked + .ck-dau{
  background:var(--vang) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394102E' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/15px no-repeat;
}
.ck-o input:focus-visible + .ck-dau{outline:3px solid #fff; outline-offset:2px}
.ck-chu{font-size:14.5px; font-weight:700; color:#fff; line-height:1.4}
.ck-chu i{font-style:normal; color:var(--vang)}
.ck-ds{
  margin:11px 0 0;
  padding-left:20px;
  display:flex; flex-direction:column; gap:5px;
}
.ck-ds li{font-size:12.5px; color:rgba(255,255,255,.85); line-height:1.45}
.ck-ds li::marker{color:var(--vang)}
.ck-link{
  display:inline-block;
  margin-top:11px;
  font-size:12.5px;
  font-weight:700;
  color:var(--vang);
}

/* ---------- hai nút ---------- */
.hai-nut{display:flex; gap:10px; align-items:stretch}
.nut-lui{
  flex:none;
  padding:15px 20px;
  font-size:15px;
  color:#fff;
  background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.35);
}
.nut-gui{flex:1 1 auto; width:auto}

.xong{display:none; text-align:center; padding:12px 0 4px}
.xong.hien{display:block}
.xong-ico{
  width:64px; height:64px;
  margin:6px auto 14px;
  border-radius:50%;
  background:#fff;
  color:#1F9D63;
  display:grid; place-items:center;
}
.xong-ico svg{width:32px; height:32px}
.xong h3{font-size:22px; color:#fff; font-weight:800}
.xong p{
  margin-top:9px;
  font-size:15px;
  color:rgba(255,255,255,.9);
  line-height:1.6;
}
/* Nút vào nhóm là thẻ liên kết chứ không phải nút bấm, nên phải tự dựng lại
   mấy thứ mà <button> vốn có sẵn: bỏ gạch chân, canh giữa chữ, cao đều. */
.nut-zalo{
  margin-top:18px;
  text-decoration:none;
  text-align:center;
}
.xong-nho{
  margin-top:12px !important;
  font-size:13px !important;
  color:rgba(255,255,255,.72) !important;
}

/* ============ CHÂN TRANG ============ */
.ch-duoi{
  background:var(--muc);
  padding:22px 0 96px;
  text-align:center;
}
.kc{
  font-size:12.5px;
  color:#C9C2C1;
  font-style:italic;
  line-height:1.5;
}
.cty{
  margin-top:9px;
  font-size:11.5px;
  color:#8A807F;
  line-height:1.5;
}

/* ============ THANH DƯỚI ============ */
.day{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  display:flex;
  align-items:center;
  gap:12px;
  max-width:560px;
  margin:0 auto;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  /* Nền đục hẳn, không dùng màu trong suốt: thẻ nội dung ngay phía sau vẫn đọc
     lờ mờ xuyên qua, nhìn như lỗi hiển thị chứ không như hiệu ứng. */
  background:#fff;
  border-top:1px solid var(--vien);
  box-shadow:0 -6px 22px -12px rgba(150,60,55,.45);
  transition:transform .22s ease, opacity .22s ease;
}
.day.an{transform:translateY(115%); opacity:0; pointer-events:none}
/* Cụm giá bên trái để hẹp nhất có thể, nhường bề ngang cho nút - ảnh nút tỉ lệ
   5:1 nên hẹp bao nhiêu là thấp bấy nhiêu, hẹp quá thì dòng chữ nhỏ trong nút
   không đọc được. */
.day-chu{display:flex; flex-direction:column; line-height:1.12; flex:none}
.day-chu b{font-size:17px; color:var(--sh-dam); letter-spacing:-.02em; white-space:nowrap}
.day-chu span{font-size:10.5px; color:var(--muc-2); white-space:nowrap}
/* Dùng max-width chứ không đặt bề ngang cố định: trên màn rộng (thanh nới tới
   560px) nút trải ra thành 400px, cao 80px - to quá. Chặn trần thì màn rộng bị
   kéo về đúng cỡ, còn điện thoại hẹp vẫn tự co thêm được. */
.day .nut-anh{flex:1 1 auto; max-width:210px; min-width:0; margin-left:auto}

/* ============ MÀN RỘNG ============ */
@media (min-width:600px){
  section{padding:46px 0}
  .tieu{font-size:28px}
  .ly-do{gap:12px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}