/* =============================================================================
   DNSG · CHI HỘI 11 — DESIGN SYSTEM  "NAVY GALA / IVORY GOLD"
   Rút trích trực tiếp từ bộ ấn phẩm Đại hội (backdrop, thư mời, thư ngỏ,
   poster Bàn giao thương, poster Đăng ký, bảng quyền lợi tài trợ).

   Hai hệ nền của ấn phẩm được giữ nguyên và luân phiên trên trang:
     · NAVY GALA  — nền xanh hoàng gia + kim nhũ  (backdrop, thư mời)
     · IVORY GOLD — nền ngà ấm + navy + vàng      (poster đăng ký)

   Chữ:  Playfair Display (display) · Be Vietnam Pro (body) · Great Vibes (script)
   Dùng chung cho: index.html · thu-moi.html · admin.html
   ============================================================================= */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  /* Navy — rút từ nền backdrop & thư mời */
  --navy-950:#03081C;
  --navy-900:#050E2C;
  --navy-850:#071540;
  --navy-800:#0A1B4E;
  --navy-700:#0E2A73;
  --navy-600:#14399A;
  --royal:#1A4FC4;
  --blue:#2E9BEE;          /* xanh logo puzzle */
  --blue-soft:#7FC4F6;

  /* Vàng kim — rút từ chữ mạ vàng & khung viền ấn phẩm */
  --gold-050:#FEF9EA;
  --gold-100:#FBF0D2;
  --gold-200:#F2DFA8;
  --gold-300:#E3C063;
  --gold-400:#C9992F;
  --gold-500:#A87C1E;
  --gold-700:#6E5010;

  /* Ngà — NỀN CHỦ ĐẠO của trang, rút từ poster "Đại hội Đại biểu" nền kem.
     Đây là gam dẫn dắt: sáng, ấm, tươi — hợp không khí Đại hội. */
  --ivory:#FDFBF7;
  --ivory-2:#FAF6EC;
  --sand:#F4ECDD;
  --line:#EBE2D0;
  --line-2:#E0E7F3;

  /* Nắng — điểm nhấn ấm rút từ hoa hướng dương trên poster đăng ký */
  --sun:#E5A23C;
  --sun-soft:#FDF2DF;

  /* Mực — nâng tương phản so với nền ngà để đọc dễ trên điện thoại */
  --ink:#16233D;
  --ink-2:#44567A;
  --ink-3:#5A6C8A;

  /* Ngữ nghĩa */
  --ok:#0F7A4E;  --ok-soft:#E7F6EE;  --ok-dark:#5FE0A6;
  --err:#B3261E; --err-soft:#FDECEA; --err-dark:#FF9A8F;
  --warn:#95610F;--warn-soft:#FDF3DF;--warn-dark:#F7CF7A;

  /* Kim loại (dùng cho chữ mạ vàng, khung, huy hiệu) */
  --metal-gold:linear-gradient(180deg,#FEF6DA 0%,#EBD08C 26%,#C9992F 52%,#8E6B1C 66%,
                                      #DFBB5E 82%,#FBF0D2 100%);
  --metal-gold-soft:linear-gradient(180deg,#FBF0D2 0%,#E3C063 55%,#C9992F 100%);
  --metal-silver:linear-gradient(180deg,#FFFFFF 0%,#D9E2F0 40%,#9DAFC8 62%,#EEF3FA 100%);
  --metal-diamond:linear-gradient(180deg,#FFFFFF 0%,#CFEBFF 35%,#7FC4F6 60%,#EAF7FF 100%);
  /* Xanh hoàng gia SÁNG — dùng rất tiết chế (chân trang, dải số liệu).
     Cố ý không dùng navy gần-đen: trên màn hình nó đọc ra nặng nề, không hợp lễ hội. */
  --grad-navy:linear-gradient(165deg,#16295C 0%,#1E3D86 48%,#2A56A8 100%);
  --grad-navy-soft:linear-gradient(180deg,#1B3372 0%,#24468F 100%);
  --grad-royal:linear-gradient(100deg,#1E3D86 0%,#2A56A8 55%,#2F6FC4 100%);
  --grad-ivory:linear-gradient(180deg,#FDFBF7 0%,#FAF6EC 100%);
  --grad-warm:linear-gradient(168deg,#FFFDF9 0%,#FBF4E6 55%,#F6EBD7 100%);

  /* Hình khối */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px; --r-full:999px;
  --sh-1:0 1px 2px rgba(5,14,44,.06), 0 4px 14px rgba(5,14,44,.06);
  --sh-2:0 2px 6px rgba(5,14,44,.07), 0 14px 34px rgba(5,14,44,.10);
  --sh-3:0 8px 20px rgba(5,14,44,.12), 0 28px 64px rgba(5,14,44,.18);
  --sh-gold:0 8px 24px rgba(168,124,30,.28);

  /* Nhịp — thang 4px */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px; --s11:96px;

  /* Chữ */
  --ff-display:'Playfair Display', 'Times New Roman', serif;
  --ff-body:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-script:'Great Vibes', 'Dancing Script', cursive;

  --header-h:58px;
}

/* ------------------------------------------------------------- 2. NỀN TẢNG */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 12px);
}
body{
  font-family:var(--ff-body);
  font-size:16.5px; line-height:1.72; font-weight:400;
  color:var(--ink);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--gold-300);color:var(--navy-900)}

/* Trọng tâm bàn phím — luôn nhìn thấy được, không bao giờ outline:none trần */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2.5px solid var(--royal); outline-offset:2px; border-radius:6px;
}
.on-navy :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--gold-200);
}

/* --------------------------------------------------------- 3. BỐ CỤC CHUNG */
.wrap{width:100%;max-width:1120px;margin-inline:auto;padding-inline:18px}
.wrap-narrow{width:100%;max-width:760px;margin-inline:auto;padding-inline:18px}
.wrap-tight{width:100%;max-width:620px;margin-inline:auto;padding-inline:18px}
@media(min-width:768px){ .wrap,.wrap-narrow,.wrap-tight{padding-inline:28px} }

.section{padding-block:clamp(48px,9vw,88px);position:relative}
.section-sm{padding-block:clamp(34px,6vw,58px)}
.stack>*+*{margin-top:var(--s4)}
.center{text-align:center}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Nền tối — dùng cho các "khoảnh khắc" của trang (hero, chương trình, đăng ký) */
/* .on-navy dùng RẤT TIẾT CHẾ — chỉ cho chân trang và dải số liệu.
   Trang phải sáng: nền ngà là gam dẫn dắt. */
.on-navy{background:var(--grad-navy);color:#EEF3FF;position:relative;isolation:isolate}
.on-navy h1,.on-navy h2,.on-navy h3,.on-navy h4{color:#fff}
.on-navy .lede{color:#D3E0F7}
.on-navy .small{color:#BECEEC}
.on-navy .eyebrow{color:var(--gold-200)}
.on-ivory{background:var(--grad-ivory);color:var(--ink)}
.on-warm{background:var(--grad-warm);color:var(--ink)}
.on-white{background:#fff;color:var(--ink)}
.on-sand{background:var(--sand);color:var(--ink)}

/* Viền vàng mảnh ngăn giữa hai vùng nền */
.hair-gold{height:1px;background:linear-gradient(90deg,transparent,var(--gold-400) 22%,
  var(--gold-200) 50%,var(--gold-400) 78%,transparent);opacity:.75}

/* ------------------------------------------------------------ 4. KIỂU CHỮ */
/* Chữ tiếng Việt có dấu chồng (ế, ộ, ữ) cần dòng thoáng hơn tiếng Anh và KHÔNG
   nên giãn chữ âm — nên line-height 1.22 và letter-spacing 0. Độ đậm tối đa 800:
   Playfair 900 làm dấu dính vào thân chữ ở cỡ lớn. */
h1,h2,h3,h4{font-family:var(--ff-display);line-height:1.22;font-weight:700;
  letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(31px,7.2vw,54px);font-weight:800}
h2{font-size:clamp(25px,5vw,38px);font-weight:800}
h3{font-size:clamp(19px,2.8vw,23px);font-weight:700}
h4{font-size:17.5px;font-weight:700}

.eyebrow{font-family:var(--ff-body);font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-700);margin-bottom:11px;display:block}
.lede{font-size:clamp(16px,2.2vw,18px);color:var(--ink-2);line-height:1.75;text-wrap:pretty}
.small{font-size:14px;color:var(--ink-2)}
.script{font-family:var(--ff-script);font-weight:400;line-height:1.35}

/* Chữ mạ vàng — chữ ký thị giác của bộ ấn phẩm */
.gold{
  background:var(--metal-gold);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-300);
  padding-block:.06em;   /* chống cắt dấu tiếng Việt (ế, ộ, ữ) khi clip nền */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .gold{color:var(--gold-200);-webkit-text-fill-color:currentColor}
}
.gold-line{color:var(--gold-300)}
/* Trên nền SÁNG dùng vàng ĐẶC, không dùng gradient — gradient làm chữ mờ, khó đọc */
.gold-ink{color:var(--gold-700)}
.sun-ink{color:#9A6510}
.ink-2{color:var(--ink-2)}

/* Đường kẻ hoa văn vàng — "rule" của ấn phẩm */
.rule{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:14px auto 22px;max-width:260px}
.rule::before,.rule::after{content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--gold-400))}
.rule::after{background:linear-gradient(270deg,transparent,var(--gold-400))}
.rule i{width:7px;height:7px;background:var(--gold-400);transform:rotate(45deg);flex:0 0 auto}
.on-navy .rule::before{background:linear-gradient(90deg,transparent,var(--gold-300))}
.on-navy .rule::after{background:linear-gradient(270deg,transparent,var(--gold-300))}
.on-navy .rule i{background:var(--gold-300)}

/* --------------------------------------------------------- 5. HUY HIỆU/CHIP */
.badge{display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-full);
  padding:6px 15px;font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;line-height:1.4}
.badge-gold{border:1px solid var(--gold-400);color:var(--gold-700);background:rgba(227,192,99,.13)}
.on-navy .badge-gold{color:var(--gold-100);background:rgba(227,192,99,.12);
  border-color:rgba(227,192,99,.62)}
.badge-solid{background:var(--metal-gold-soft);color:#3B2B05;border:0}
.badge-ok{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(15,122,78,.3)}
.badge-err{background:var(--err-soft);color:var(--err);border:1px solid rgba(179,38,30,.3)}
.badge-warn{background:var(--warn-soft);color:var(--warn);border:1px solid rgba(149,97,15,.3)}
.badge-navy{background:var(--navy-800);color:#DCE6FF;border:0}

/* Huy hiệu dải lụa nhiệm kỳ — mô phỏng bảng "NHIỆM KỲ 2026 – 2031" trên backdrop */
.plaque{display:inline-block;position:relative;background:var(--metal-gold);
  color:#3A2A05;font-weight:800;letter-spacing:.1em;font-size:12.5px;
  padding:8px 26px;border-radius:6px;box-shadow:var(--sh-gold);
  border:1px solid rgba(110,80,16,.4)}
.plaque::before,.plaque::after{content:"";position:absolute;top:50%;width:16px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-300));transform:translateY(-50%)}
.plaque::before{right:100%;margin-right:8px;
  background:linear-gradient(270deg,var(--gold-300),transparent)}
.plaque::after{left:100%;margin-left:8px}

.chip{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r);
  padding:10px 14px;font-size:13.5px;font-weight:600;line-height:1.35;
  background:#fff;border:1px solid var(--line);color:var(--ink)}
.chip b{font-weight:800}
.on-navy .chip{background:rgba(255,255,255,.07);border-color:rgba(227,192,99,.34);color:#E9EFFF}
.on-navy .chip b{color:var(--gold-100)}
.chip-ic{font-size:16px;line-height:1;opacity:.9}

/* ------------------------------------------------------------- 6. KHUNG/THẺ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);box-shadow:var(--sh-1)}
.on-navy .card{background:rgba(255,255,255,.055);border-color:rgba(227,192,99,.28);
  color:#E4ECFF;box-shadow:none;backdrop-filter:blur(3px)}

/* Khung viền kép mạ vàng + góc — chữ ký của thư mời/thư ngỏ */
.frame{position:relative;background:#fff;border:1px solid var(--gold-400);
  border-radius:var(--r-lg);padding:clamp(22px,4.4vw,34px) clamp(18px,4vw,30px);
  box-shadow:var(--sh-2)}
.frame::after{content:"";position:absolute;inset:6px;border:1px solid rgba(168,124,30,.32);
  border-radius:calc(var(--r-lg) - 6px);pointer-events:none}
.on-navy .frame{background:linear-gradient(165deg,rgba(14,42,115,.55),rgba(5,14,44,.62));
  border-color:rgba(227,192,99,.6);color:#E4ECFF;box-shadow:0 18px 48px rgba(0,0,0,.35)}
.on-navy .frame::after{border-color:rgba(227,192,99,.3)}
.frame-corner{position:absolute;width:20px;height:20px;border:1.6px solid var(--gold-400);
  opacity:.8;pointer-events:none}
.fc-tl{top:12px;left:12px;border-right:0;border-bottom:0;border-top-left-radius:5px}
.fc-tr{top:12px;right:12px;border-left:0;border-bottom:0;border-top-right-radius:5px}
.fc-bl{bottom:12px;left:12px;border-right:0;border-top:0;border-bottom-left-radius:5px}
.fc-br{bottom:12px;right:12px;border-left:0;border-top:0;border-bottom-right-radius:5px}
.on-navy .frame-corner{border-color:var(--gold-200)}

/* --------------------------------------------------------------- 7. NÚT */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--ff-body);font-weight:800;font-size:15.5px;line-height:1.2;
  padding:15px 26px;border-radius:var(--r);text-decoration:none;text-align:center;
  min-height:50px;                 /* vùng chạm ≥ 44px [mobile-first] */
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  border:1px solid transparent;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:scale(.982)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none}
.btn-gold{background:var(--metal-gold-soft);color:#3A2A05;box-shadow:var(--sh-gold);
  border-color:rgba(110,80,16,.35)}
.btn-gold:hover{box-shadow:0 10px 30px rgba(168,124,30,.4)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-700)}
.btn-outline{background:transparent;color:var(--navy-700);border-color:var(--navy-700)}
.on-navy .btn-outline{color:var(--gold-100);border-color:rgba(227,192,99,.68)}
.on-navy .btn-outline:hover{background:rgba(227,192,99,.12)}
.btn-quiet{background:var(--ivory-2);color:var(--ink-2);border-color:var(--line)}
.btn-quiet:hover{background:var(--sand)}
.btn-danger{background:var(--err);color:#fff}
.btn-block{width:100%}
.btn-sm{padding:9px 15px;font-size:13.5px;min-height:40px;border-radius:var(--r-sm)}
.btn-lg{padding:17px 32px;font-size:16.5px;min-height:56px}

/* ------------------------------------------------------------- 8. BIỂU MẪU */
.field{margin-top:var(--s4)}
.label{display:block;font-size:13.5px;font-weight:700;letter-spacing:.01em;
  color:var(--navy-700);margin-bottom:7px}
.on-navy .label{color:var(--gold-200)}
.label .req{color:var(--err);margin-left:2px}
.on-navy .label .req{color:var(--err-dark)}
.hint{font-size:13px;color:var(--ink-2);margin-top:6px;line-height:1.5}
.on-navy .hint{color:#B9CBEA}

.input,input[type=text],input[type=tel],input[type=email],input[type=number],
input[type=password],input[type=url],input[type=date],select,textarea{
  width:100%;font-size:16px;        /* 16px = iOS không tự zoom khi focus */
  font-family:inherit;font-weight:500;color:var(--ink);
  background:#fff;border:1.5px solid var(--line-2);border-radius:var(--r);
  padding:13px 14px;transition:border-color .15s, box-shadow .15s;
  min-height:50px;
}
textarea{min-height:88px;resize:vertical;line-height:1.6}
select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%2341506E' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;padding-right:40px}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--royal);box-shadow:0 0 0 3.5px rgba(26,79,196,.14)}
.input[aria-invalid="true"],input[aria-invalid="true"],select[aria-invalid="true"],
textarea[aria-invalid="true"]{border-color:var(--err);box-shadow:0 0 0 3.5px rgba(179,38,30,.12)}
::placeholder{color:#7A88A0;font-weight:400}

.on-navy .input,.on-navy input,.on-navy select,.on-navy textarea{
  background:rgba(255,255,255,.07);border-color:rgba(227,192,99,.3);color:#fff}
.on-navy ::placeholder{color:#9CB0D4}
.on-navy .input:focus,.on-navy input:focus,.on-navy select:focus,.on-navy textarea:focus{
  border-color:var(--gold-300);box-shadow:0 0 0 3.5px rgba(227,192,99,.16)}
.on-navy select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23F2DFA8' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}

/* Ô chọn dạng thẻ — radio/checkbox "sang" thay cho ô tròn hệ thống */
.pick{position:relative;display:block;border:1.6px solid var(--line-2);border-radius:var(--r);
  padding:14px 16px;margin-bottom:10px;cursor:pointer;background:#fff;
  transition:border-color .15s, background .15s, box-shadow .15s}
.pick:hover{border-color:#B9C8E4}
.pick>input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.pick-row{display:flex;align-items:center;gap:11px}
.pick-mark{width:21px;height:21px;flex:0 0 auto;border:2px solid #94A6C4;border-radius:50%;
  position:relative;transition:.15s;background:#fff}
.pick-box .pick-mark{border-radius:6px}
.pick-title{font-weight:700;font-size:15px;line-height:1.35;flex:1;min-width:0}
.pick-note{font-size:13px;color:var(--ink-3);margin-top:5px;padding-left:32px;line-height:1.5}
.pick-side{font-weight:800;font-size:14.5px;white-space:nowrap;color:var(--navy-700)}
.pick.is-on{border-color:var(--royal);background:#F4F7FF;box-shadow:0 0 0 3px rgba(26,79,196,.08)}
.pick.is-on .pick-mark{border-color:var(--royal);background:var(--royal)}
.pick.is-on .pick-mark::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:11px;
  border:solid #fff;border-width:0 2.6px 2.6px 0;transform:rotate(42deg)}
.pick.is-off{opacity:.5;cursor:not-allowed;background:var(--ivory-2)}
.pick:has(>input:focus-visible){outline:2.5px solid var(--royal);outline-offset:2px}

.on-navy .pick{background:rgba(255,255,255,.055);border-color:rgba(227,192,99,.26);color:#E9EFFF}
.on-navy .pick:hover{border-color:rgba(227,192,99,.5)}
.on-navy .pick-mark{border-color:rgba(227,192,99,.6);background:rgba(255,255,255,.06)}
.on-navy .pick-note{color:#C2D3EE}
.on-navy .pick-side{color:var(--gold-100)}
.on-navy .pick.is-on{border-color:var(--gold-300);background:rgba(227,192,99,.14);
  box-shadow:0 0 0 3px rgba(227,192,99,.1)}
.on-navy .pick.is-on .pick-mark{background:var(--gold-300);border-color:var(--gold-300)}
.on-navy .pick.is-on .pick-mark::after{border-color:#2C2003}
.on-navy .pick.is-off{background:rgba(255,255,255,.03);opacity:.42}
.on-navy .pick:has(>input:focus-visible){outline-color:var(--gold-200)}

/* Bộ tăng/giảm số lượng */
.stepper{display:flex;align-items:center;gap:0;margin-top:12px;padding-left:32px;flex-wrap:wrap}
.stepper button{width:42px;height:42px;border:1.5px solid var(--line-2);background:#fff;
  border-radius:var(--r-sm);font-size:20px;font-weight:700;color:var(--navy-700);
  display:grid;place-items:center;line-height:1;flex:0 0 auto}
.stepper button:active{background:var(--ivory-2)}
.stepper input{width:62px;text-align:center;margin-inline:9px;padding:9px 4px;font-weight:800;
  min-height:42px;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.stepper .unit{margin-left:11px;font-size:12.5px;color:var(--ink-3)}
.on-navy .stepper button{background:rgba(255,255,255,.08);border-color:rgba(227,192,99,.3);
  color:var(--gold-100)}
.on-navy .stepper .unit{color:#B9CBEA}

/* Ô đồng ý (bắt buộc theo Luật 91/2025 — không bao giờ tick sẵn) */
.consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;line-height:1.55;
  color:var(--ink-2);margin-top:var(--s5);cursor:pointer}
.consent input{width:21px;height:21px;flex:0 0 auto;margin-top:2px;accent-color:var(--royal)}
.on-navy .consent{color:#C2D3EE}
.on-navy .consent input{accent-color:var(--gold-300)}

/* Bẫy bot — ẩn với người, hiện với script */
.honey{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;
  pointer-events:none}

/* Thông báo lỗi trong form */
.alert{display:none;font-size:13.5px;font-weight:700;border-radius:var(--r-sm);
  padding:11px 14px;margin-top:12px;line-height:1.5}
.alert.is-on{display:block}
.alert-err{background:var(--err-soft);color:var(--err)}
.alert-ok{background:var(--ok-soft);color:var(--ok)}
.alert-warn{background:var(--warn-soft);color:var(--warn)}
.on-navy .alert-err{background:rgba(255,154,143,.14);color:var(--err-dark)}
.on-navy .alert-ok{background:rgba(95,224,166,.13);color:var(--ok-dark)}
.on-navy .alert-warn{background:rgba(247,207,122,.13);color:var(--warn-dark)}

/* ------------------------------------------------------- 9. BƯỚC / TIMELINE */
.step-head{display:flex;align-items:center;gap:12px;margin:var(--s7) 0 var(--s3)}
.step-head:first-child{margin-top:0}
.step-num{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:var(--metal-gold);
  color:#3A2A05;font-weight:800;font-size:14px;display:grid;place-items:center;
  box-shadow:0 3px 10px rgba(168,124,30,.3)}
.step-title{font-family:var(--ff-body);font-size:16.5px;font-weight:800;letter-spacing:0}

.timeline{position:relative;padding-left:36px}
.timeline::before{content:"";position:absolute;left:12px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,var(--gold-300),rgba(227,192,99,.12))}
.tl-item{position:relative;padding-bottom:var(--s6)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-30px;top:5px;width:18px;height:18px;
  border-radius:50%;background:var(--metal-gold);box-shadow:0 0 0 4px rgba(227,192,99,.16)}
.tl-time{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:var(--gold-500)}
.on-navy .tl-time{color:var(--gold-200)}
.tl-head{font-family:var(--ff-display);font-size:18.5px;font-weight:800;margin:3px 0 5px;
  line-height:1.25}
.tl-desc{font-size:14px;color:var(--ink-2);line-height:1.6}
.on-navy .tl-desc{color:#C6D6F0}

/* ------------------------------------------------------------ 10. LƯỚI */
.grid{display:grid;gap:var(--s4)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
@media(min-width:760px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
@media(min-width:860px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

/* ------------------------------------------------- 11. LỚP PHỦ / HỘP THOẠI */
.overlay{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(22,41,92,.74);backdrop-filter:blur(4px);
  overscroll-behavior:contain}
.overlay.is-on{display:flex;animation:fadeIn .18s ease}
.sheet{background:#fff;border-radius:var(--r-xl);width:100%;max-width:440px;
  max-height:min(92dvh,900px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  position:relative;box-shadow:var(--sh-3);animation:riseIn .24s cubic-bezier(.2,.8,.3,1)}
.sheet-pad{padding:clamp(22px,5vw,30px) clamp(18px,4.6vw,26px)}
.sheet-wide{max-width:760px}
.sheet-close{position:absolute;top:10px;right:10px;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;font-size:22px;line-height:1;color:var(--ink-3);
  background:var(--ivory-2);z-index:2}
.sheet-close:hover{background:var(--sand)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(18px) scale(.985)}
                  to{opacity:1;transform:none}}
@media(max-width:520px){
  .overlay{align-items:flex-end;padding:0}
  .sheet{max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:94dvh;
    padding-bottom:env(safe-area-inset-bottom);animation:sheetUp .26s cubic-bezier(.2,.8,.3,1)}
  @keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
}

/* Thanh tiến trình 3 nấc trong hộp thanh toán */
.pips{display:flex;gap:7px;justify-content:center;margin-bottom:16px}
.pips i{width:34px;height:4px;border-radius:9px;background:var(--line);display:block}
.pips i.on{background:var(--metal-gold-soft)}

/* Vòng xoay chờ */
.spin{display:inline-block;width:15px;height:15px;border:2.5px solid rgba(0,0,0,.12);
  border-top-color:var(--royal);border-radius:50%;animation:spin .85s linear infinite;
  vertical-align:-2px}
.on-navy .spin{border-color:rgba(255,255,255,.2);border-top-color:var(--gold-300)}
@keyframes spin{to{transform:rotate(360deg)}}

/* Xương cá tải dữ liệu */
.skel{background:linear-gradient(90deg,var(--ivory-2) 25%,var(--sand) 37%,var(--ivory-2) 63%);
  background-size:400% 100%;animation:shimmer 1.3s ease-in-out infinite;border-radius:var(--r-sm);
  color:transparent!important}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------------------------------------------------------- 12. THÔNG BÁO */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(160px);background:var(--grad-navy-soft);color:#fff;
  font-size:14px;font-weight:600;border-radius:var(--r-full);padding:13px 22px;
  box-shadow:var(--sh-3);z-index:400;max-width:92vw;text-align:center;line-height:1.45;
  transition:transform .26s cubic-bezier(.2,.8,.3,1);border:1px solid rgba(227,192,99,.35)}
.toast.is-on{transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------------------- 13. BẢNG */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);
  border:1px solid var(--line)}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;background:#fff;min-width:560px}
table.tbl th{background:var(--navy-800);color:#fff;font-weight:700;text-align:left;
  padding:12px 14px;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;position:sticky;top:0;z-index:1}
table.tbl td{padding:12px 14px;border-top:1px solid var(--line-2);vertical-align:top}
table.tbl tr:nth-child(even) td{background:var(--ivory)}

/* --------------------------------------------------------------- 14. FAQ */
.faq{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;
  overflow:hidden}
.faq summary{padding:16px 18px;font-weight:700;font-size:15px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px;align-items:center;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:0 0 auto;width:11px;height:11px;
  border-right:2px solid var(--gold-500);border-bottom:2px solid var(--gold-500);
  transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.faq[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq[open] summary{color:var(--navy-700)}
.faq .faq-body{padding:0 18px 17px;font-size:14.5px;color:var(--ink-2);line-height:1.7}

/* ------------------------------------------------------ 15. TIỆN ÍCH KHÁC */
.copy-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--ivory-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;margin-top:8px;text-align:left}
.copy-row .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700}
.copy-row .v{font-size:15px;font-weight:800;color:var(--navy-800);word-break:break-word;
  line-height:1.4}
.copy-btn{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--royal);padding:8px 11px;
  border-radius:8px;background:#fff;border:1px solid var(--line-2);min-height:36px}
.copy-btn:active{background:var(--ivory-2)}

.qr-box{width:236px;max-width:76%;margin:16px auto;padding:10px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.qr-box img{width:100%;height:auto;border-radius:4px}

.ok-mark{width:70px;height:70px;margin:2px auto 12px;border-radius:50%;
  background:var(--ok-soft);display:grid;place-items:center;font-size:34px;
  animation:pop .38s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:none;opacity:1}}

/* Hiện dần khi cuộn tới */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ------------------------------------------------- 16. GIẢM CHUYỂN ĐỘNG */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ------------------------------------------------------------- 17. IN ẤN */
@media print{
  .no-print,header,.sticky-bar,.overlay,.toast{display:none!important}
  body{background:#fff;color:#000}
  .on-navy{background:#fff!important;color:#000!important}
  .on-navy h1,.on-navy h2,.on-navy h3{color:#000!important}
  .gold{-webkit-text-fill-color:initial;color:#8E6B1C!important;background:none}
  .frame{box-shadow:none;border-color:#8E6B1C}
}