/* =============================================================================
 * CHANDE — Trang form (register.html: đăng ký mùa sau · partner.html: đối tác / tài trợ)
 * -----------------------------------------------------------------------------
 * Hai cột ở màn rộng: trái = số trang + tiêu đề lớn + giới thiệu (dính khi cuộn),
 * phải = các ô hỏi đánh số 01, 02… Ô nhập không viền khung, chỉ gạch chân mảnh; ô
 * chọn nhiều / một dạng viên thuốc (chọn = nền lime). Nút gửi dùng lại .cta của
 * footer. Gửi xong: form ẩn, hiện khối cảm ơn. Màn hẹp: một cột.
 * ========================================================================== */
.fm{--u:calc(100vw / 1920); --ink:#0f1513; --line:rgba(15,21,19,.18);
  min-height:100vh; padding:calc(var(--bar) + 96 * var(--u)) calc(24 * var(--u)) calc(160 * var(--u));
  background:#f4f3eb; color:var(--ink);
  display:grid; grid-template-columns:repeat(12, 1fr); column-gap:calc(24 * var(--u))}

/* ---- cột trái ---- */
.fm__aside{grid-column:1 / span 5; align-self:start; position:sticky; top:calc(var(--bar) + 48 * var(--u))}
.fm__num{margin:0 0 calc(40 * var(--u)); font:500 .875rem/1 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; text-transform:uppercase}
.fm__title{margin:0; font-weight:700; font-size:max(2.6rem, calc(106 * var(--u))); line-height:.78; letter-spacing:-.04em;
  text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
.fm__title em{font-style:normal; color:#236c3c}
.fm__lead{max-width:30em; margin:calc(48 * var(--u)) 0 0; font:500 .875rem/1.45 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; text-transform:uppercase; color:rgba(15,21,19,.72)}
.fm__lead + .fm__lead{margin-top:1em}

/* ---- cột phải: các ô hỏi ---- */
.fm__form{grid-column:7 / span 6; display:flex; flex-direction:column; border-top:1px solid var(--line)}
.fm__group{margin:0; padding:calc(40 * var(--u)) 0; border:0; border-bottom:1px solid var(--line); min-width:0}
.fm__group[hidden]{display:none}
.fm__head{display:flex; gap:calc(16 * var(--u)); align-items:baseline; margin:0 0 calc(22 * var(--u)); padding:0}
.fm__head b{font:500 .8125rem/1 'Geist Mono',ui-monospace,monospace; color:rgba(15,21,19,.5)}
.fm__head span{font-weight:600; font-size:max(1rem, calc(20 * var(--u))); line-height:1; text-transform:uppercase; letter-spacing:-.01em}
.fm__head small{margin-left:auto; font:500 .75rem/1 'Geist Mono',ui-monospace,monospace; color:rgba(15,21,19,.45); text-transform:uppercase}

.fm input[type=text], .fm input[type=email], .fm input[type=tel], .fm input[type=url], .fm input[type=number], .fm select, .fm textarea{
  display:block; width:100%; margin:0; padding:.35em 0; border:0; border-bottom:1px solid rgba(15,21,19,.35); border-radius:0;
  background:transparent; color:var(--ink); font:600 max(1.25rem, calc(32 * var(--u)))/1.2 'Phudu',ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.02em; outline:none; caret-color:#236c3c; transition:border-color .2s; -webkit-appearance:none; appearance:none}
.fm textarea{min-height:5.2em; resize:vertical; font-size:max(1.05rem, calc(24 * var(--u))); line-height:1.35}
.fm select{cursor:pointer; padding-right:1.4em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230f1513' stroke-width='1.6'/%3E%3C/svg%3E") right .2em center / .55em no-repeat}
.fm input::placeholder, .fm textarea::placeholder{color:rgba(15,21,19,.28)}
.fm input:focus, .fm select:focus, .fm textarea:focus{border-bottom-color:var(--ink)}
.fm .is-bad input, .fm .is-bad select, .fm .is-bad textarea{border-bottom-color:#c4372b}
.fm__err{display:none; margin:.7em 0 0; font:500 .75rem/1 'Geist Mono',ui-monospace,monospace; color:#c4372b; text-transform:uppercase}
.fm .is-bad .fm__err{display:block}
.fm__row{display:grid; grid-template-columns:1fr 1fr; gap:calc(32 * var(--u))}
.fm__more{margin-top:calc(20 * var(--u))}
.fm__more[hidden]{display:none}

/* lựa chọn dạng viên thuốc */
.fm__opts{display:flex; flex-wrap:wrap; gap:10px}
.fm__opt{position:relative; cursor:pointer}
.fm__opt input{position:absolute; opacity:0; pointer-events:none}
.fm__opt span{display:block; padding:.85em 1.25em; border:1px solid rgba(15,21,19,.3); border-radius:999px;
  font-weight:600; font-size:max(.9rem, calc(18 * var(--u))); line-height:1; text-transform:uppercase; letter-spacing:-.01em;
  transition:background-color .2s, border-color .2s, color .2s}
.fm__opt:hover span{border-color:var(--ink)}
.fm__opt input:checked + span{background:#68f12b; border-color:#68f12b}
.fm__opt input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}

/* bẫy máy spam: ô người thật không thấy */
.fm__trap{position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden}

/* nút gửi + trạng thái */
.fm__foot{display:flex; flex-wrap:wrap; align-items:center; gap:calc(32 * var(--u)); padding-top:calc(48 * var(--u))}
.fm__send{position:relative; width:calc(520 * var(--u)); min-width:16rem; max-width:100%; border:0; padding:0; cursor:pointer;
  background:#236c3c; font-family:inherit; text-align:left}
.fm__send:disabled{cursor:progress; opacity:.7}
.fm__note{margin:0; font:500 .75rem/1.45 'Geist Mono',ui-monospace,monospace; text-transform:uppercase; color:rgba(15,21,19,.55); max-width:26em}
.fm__status{width:100%; margin:0; font:500 .8125rem/1.4 'Geist Mono',ui-monospace,monospace; text-transform:uppercase}
.fm__status.is-error{color:#c4372b}

/* gửi xong */
.fm__done{grid-column:7 / span 6; align-self:start; padding-top:calc(40 * var(--u)); border-top:1px solid var(--line)}
.fm__done[hidden]{display:none}
.fm__done h2{margin:0; font-weight:700; font-size:max(2.2rem, calc(80 * var(--u))); line-height:.8; letter-spacing:-.04em; text-transform:uppercase; text-box:trim-both cap alphabetic; --tb:1}
.fm__done p{margin:calc(32 * var(--u)) 0 0; max-width:30em; font:500 .875rem/1.45 'Geist Mono',ui-monospace,monospace; text-transform:uppercase}
.fm__done a{color:inherit}

@media (max-width:899px){
  .fm{grid-template-columns:1fr; padding:calc(var(--bar) + 2.5rem) 1.25rem 4rem}
  .fm__aside{grid-column:1; position:static; margin-bottom:2.5rem}
  .fm__form, .fm__done{grid-column:1}
  .fm__group{padding:1.75rem 0}
  .fm__row{grid-template-columns:1fr; gap:1.75rem}
  .fm__send{width:100%}
}

/* =============================================================================
 * partner.html (Figma 636:46989) + register.html (657:41907) — một màn 1920 × 1080, hai nửa:
 * nửa ảnh (tiêu đề trắng đè lên) + nửa nội dung nền #121212: giới thiệu, form (gạch chân
 * mờ, chữ mono), đáy: ô ghi chú + nút gửi (ô chấm neon). Partner: ảnh trái; register
 * (.pt--rev): ảnh phải. Luôn vừa MỘT màn: đơn vị --fu bám cả rộng lẫn cao; lưới 3 hàng — giới
 * thiệu (tới mốc form 344 nếu đủ chỗ), form (ô Message giãn / co theo chỗ còn lại), đáy.
 * Chữ có sàn px nên màn 1024–1440 vẫn đọc được.
 * ≤ 1023: một cột — ảnh + tiêu đề, giới thiệu, form, đáy.
 * ========================================================================== */
.fm.pt{--fu:min(var(--u), calc((100svh - var(--bar)) / 1000)); --cream:#f4f3eb; --mono:max(11px, calc(14 * var(--fu))); --lab:max(12px, calc(16 * var(--fu)));
  position:relative; padding:0; height:calc(100svh - var(--bar)); min-height:fit-content; /* luôn vừa một màn (.page đã chừa header); chỉ khi màn quá thấp mới cho dài ra */
  display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(auto, calc(344 * var(--fu))) 1fr auto; column-gap:0;
  background:#121212; color:var(--cream); overflow:hidden}
.fm.pt > *, .fm.pt .pt__form > *{grid-column:2; min-width:0}
.fm.pt--rev > *, .fm.pt--rev .pt__form > *{grid-column:1}
.pt__media{grid-row:1 / -1; position:relative; margin:0; overflow:hidden}
.fm.pt .pt__media{grid-column:1}
.fm.pt--rev .pt__media{grid-column:2}
.pt__media img{position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover}
.pt--rev .pt__media img{object-position:50% 64%}
.pt--rev .pt__media::after{content:''; position:absolute; inset:0 0 auto; height:calc(344 * var(--fu)); background:linear-gradient(#fff, rgba(255,255,255,0)); opacity:.3; pointer-events:none}
.pt__title{position:absolute; z-index:1; left:calc(24 * var(--fu)); top:calc(32 * var(--fu)); width:calc(912 * var(--fu)); margin:0;
  color:#fff; font-weight:700; font-size:calc(106 * var(--fu)); line-height:.72; letter-spacing:-.04em; text-transform:uppercase;
  text-box:trim-both cap alphabetic; pointer-events:none}
/* tiêu đề nằm trong ô lưới của ảnh (absolute trong lưới = định vị theo ô đó) */
.fm.pt .pt__title{grid-column:1; grid-row:1 / -1}
.fm.pt--rev .pt__title{grid-column:2}
.pt__year{position:absolute; right:0; bottom:0}
.pt__intro, .pt__fields, .fm.pt .pt__done{padding:0 calc(24 * var(--fu)) 0 calc(32 * var(--fu))}
.pt__intro{grid-row:1; align-self:start; display:flex; flex-direction:column; gap:calc(24 * var(--fu)); padding-top:calc(32 * var(--fu)); padding-bottom:max(24px, calc(48 * var(--fu)))}
.pt__intro p{margin:0; max-width:max(316px, calc(316 * var(--fu))); font-weight:500; font-size:var(--lab); line-height:.98; letter-spacing:-.02em; text-transform:uppercase}
.pt__intro p:first-child{max-width:max(290px, calc(290 * var(--fu)))}

/* form */
.fm.pt .pt__form{display:contents} /* các phần của form xếp thẳng vào lưới section */
.fm.pt .pt__form[hidden]{display:none}
.pt__fields{grid-row:2; min-height:0; display:flex; flex-direction:column; gap:max(20px, calc(48 * var(--fu))); padding-bottom:max(24px, calc(56 * var(--fu)))}
/* ô Message giãn / co theo chỗ còn lại để cả form luôn vừa màn */
.pt__msg{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.fm.pt .pt__msg textarea{flex:1 1 auto}
.pt__row{display:grid; grid-template-columns:1fr 1fr; column-gap:calc(64 * var(--fu))}
.fm.pt .fm__group{position:relative; padding:0; border:0}
.fm.pt .fm__head{display:block; margin:0; padding:0}
.fm.pt .fm__head span{font-weight:500; font-size:var(--lab); line-height:.98; letter-spacing:-.02em; text-transform:uppercase}
.fm.pt input[type=text], .fm.pt input[type=email], .fm.pt textarea{
  height:max(26px, calc(40 * var(--fu))); padding:max(8px, calc(13 * var(--fu))) 0 0; border-bottom:1px solid rgba(255,255,255,.12); color:var(--cream); caret-color:#68f12b;
  font:500 var(--mono)/1 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; text-transform:uppercase; vertical-align:top}
/* nhãn -> ô nhập: gấp đôi khoảng trống cũ (đáy chữ nhãn -> đỉnh chữ trong ô ~13 -> ~26 ở mobile) */
.fm.pt input[type=text], .fm.pt input[type=email], .fm.pt textarea{margin-top:max(13px, calc(18 * var(--fu)))}
.fm.pt textarea{height:auto; min-height:48px; max-height:calc(240 * var(--fu)); resize:none; line-height:1.3;
  color-scheme:dark} /* cao theo chỗ trống (vừa một màn) nên không kéo dãn tay */
.fm.pt input::placeholder, .fm.pt textarea::placeholder{color:rgba(244,243,235,.3)}
.fm.pt input:focus, .fm.pt textarea:focus{border-bottom-color:rgba(244,243,235,.6)}
.fm.pt .is-bad input, .fm.pt .is-bad textarea{border-bottom-color:#ff6b5a}
.fm.pt .fm__err{position:absolute; left:0; top:calc(100% + 8px); margin:0; font-size:max(10px, calc(12 * var(--fu))); color:#ff6b5a}

/* lựa chọn: viên thuốc mono, chọn = nền lime; .pt__br = xuống hàng như Figma */
.fm.pt .fm__opts{margin-top:max(24px, calc(32 * var(--fu))); gap:max(4px, calc(4 * var(--fu))) calc(2 * var(--fu))}
.pt__br{flex-basis:100%; height:0}
.fm.pt .fm__opt span{display:flex; align-items:center; height:max(28px, calc(44 * var(--fu))); padding:0 max(14px, calc(28 * var(--fu))); border:1px solid rgba(255,255,255,.16);
  font:500 var(--mono)/1 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; color:var(--cream); white-space:nowrap}
.fm.pt .fm__opt:hover span{border-color:rgba(255,255,255,.5)}
.fm.pt .fm__opt input:checked + span{background:#68f12b; border-color:#68f12b; color:#121212}
.fm.pt .fm__opt input:focus-visible + span{outline-color:#68f12b}

/* đáy: ghi chú (492/960) + nút gửi */
.fm.pt .pt__foot{grid-row:3; position:relative; display:flex}
.pt__note{flex:0 0 51.25%; height:max(64px, calc(92 * var(--fu))); margin:0; box-sizing:border-box;
  display:flex; align-items:center; gap:max(12px, calc(16 * var(--fu))); padding:0 max(16px, calc(101 * var(--fu))) 0 max(16px, calc(32 * var(--fu))); background:#2c3a38;
  font:500 var(--mono)/.96 'Geist Mono',ui-monospace,monospace; letter-spacing:-.02em; text-transform:uppercase; color:rgba(255,255,255,.3)}
.pt__note::before{content:''; flex:none; width:2px; height:max(18px, calc(24 * var(--fu))); border-radius:999px; background:#68f12b}
.fm.pt .pt__send{flex:1 1 auto; width:auto; min-width:0; height:max(64px, calc(92 * var(--fu))); justify-content:space-between; background:#236c3c; color:#fff}
.fm.pt .pt__send i{width:max(64px, calc(92 * var(--fu)))}
.fm.pt .pt__send span{padding-left:max(20px, calc(48 * var(--fu)))}
/* nút gửi: mũi tên ghép từ chấm (cùng kiểu ô 4 chấm), hover nhích sang phải */
.fm.pt .pt__send i svg.pt__arrow{width:30px; height:30px; transition:translate .35s cubic-bezier(.65,0,.35,1)}
.fm.pt .pt__send:hover i svg.pt__arrow, .fm.pt .pt__send:focus-visible i svg.pt__arrow{translate:6px 0}
.fm.pt .pt__status{position:absolute; left:max(16px, calc(32 * var(--fu))); bottom:calc(100% + 20px); width:auto; margin:0; font-size:max(11px, calc(12 * var(--fu))); color:var(--cream)}
.fm.pt .pt__status.is-error{color:#ff6b5a}

.fm.pt .pt__done{grid-row:2 / -1; align-self:end; padding-bottom:calc(32 * var(--fu)); border:0} /* gửi xong: khối cảm ơn bám đáy */
.fm.pt .pt__done h2{color:#fff}
.fm.pt .pt__done p{color:rgba(244,243,235,.7)}

/* ≤ 1023: một cột — ảnh (tiêu đề đè lên) · giới thiệu · form · đáy */
@media (max-width:1023px){
  .fm.pt{--mono:12px; --lab:14px; grid-template-columns:1fr; grid-template-rows:auto; height:auto; min-height:0}
  .fm.pt .pt__msg textarea{flex:none; height:120px; resize:vertical}
  .fm.pt > *, .fm.pt .pt__form > *, .fm.pt--rev > *, .fm.pt--rev .pt__form > *, .fm.pt .pt__media, .fm.pt--rev .pt__media{grid-column:1; grid-row:auto}
  /* màn đầu thấy đủ đoạn giới thiệu: ảnh = chỗ từ header tới nút gửi cố định (--pt-room) − đoạn giới thiệu
     (--pt-intro) — chande-form.js đo lúc mở trang; không cao hơn cỡ cũ, không thấp hơn 200 */
  .pt__media{height:clamp(200px, calc(var(--pt-room, calc(var(--vp, 100svh) - var(--bar) - 64px - env(safe-area-inset-bottom))) - var(--pt-intro, 260px)), min(125vw, 560px))}
  .pt--rev .pt__media::after{height:45%}
  .fm.pt .pt__title, .fm.pt--rev .pt__title{grid-row:1; grid-column:1} /* --rev desktop đặt cột 2 -> mobile mất tiêu đề */
  .pt__title, .pt--rev .pt__title{left:16px; top:24px; width:calc(100% - 32px); font-size:clamp(44px, 14.5vw, 96px)}
  .pt--rev .pt__title{font-size:clamp(40px, 12.5vw, 88px)}
  .pt__year{position:absolute; right:0; bottom:0} /* (2027) căn phải, cùng đáy với dòng "Chande" như desktop */
  .pt__intro, .pt__fields, .fm.pt .pt__done{padding-inline:16px}
  .pt__intro{gap:14px; padding-top:32px; padding-bottom:48px}
  .pt__fields{gap:36px; padding-bottom:56px}
  .pt__row{grid-template-columns:1fr; row-gap:36px}
  .pt__br{display:none}
  .fm.pt .fm__opts{gap:6px 4px}
  .fm.pt .fm__done{grid-row:auto; align-self:start; padding-top:32px; padding-bottom:64px}
  .pt__note{flex-basis:auto}
  .fm.pt .pt__foot{flex-direction:column}
  /* nút gửi cố định đáy màn (chừa vùng an toàn iPhone); section chừa chỗ để không che ô ghi chú */
  .fm.pt{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .fm.pt .pt__send{flex:none; position:fixed; z-index:50; left:0; right:0; bottom:0; height:calc(64px + env(safe-area-inset-bottom)); align-items:flex-start}
  .fm.pt .pt__send span{height:64px; justify-content:center}
  .fm.pt .pt__send{font-size:14px} /* chữ nút trên mobile 14 (trước rơi về 10px) */
  .fm.pt .pt__send i{height:64px}
  .fm.pt .pt__send i svg.pt__arrow{width:15px; height:15px}
  .pt__note{height:auto; min-height:64px; padding:16px}
  .fm.pt .pt__status{position:static; order:-1; padding:0 16px 16px}
}