/* Giao diện theo phong cách vikkibank.vn: xanh Vikki chủ đạo, dải chuyển màu xanh tím hồng cam,
   nút viên thuốc tô chuyển màu, chữ Be Vietnam đậm, khối bo góc lớn. Chỉ có giao diện sáng.
   Bản này sao từ trang HDBank nên vẫn giữ tên biến --red...: trong bản Vikki chúng là màu xanh Vikki. */
:root {
  color-scheme: light;
  --brand: #0000ff;        /* xanh Vikki */
  --magenta: #d2008c;
  --vk-orange: #ff8a00;
  --vk-amber: #ffb800;
  --grad: linear-gradient(100deg, #0000ff 0%, #3c00dd 24%, #8800b4 48%, #d2008c 70%, #ff8a00 92%, #ffb800 100%);
  --grad-btn: linear-gradient(90deg, #0000ff 0%, #5e00cb 50%, #c3008f 100%);   /* đủ tương phản cho chữ trắng */
  --grad-deep: linear-gradient(150deg, #0000ff 0%, #4a00d6 40%, #8800b4 70%, #c0008f 100%);
  --red: var(--brand);
  --red-hover: #0000c4;
  --red-soft: #f1f0ff;
  --red-line: #c9c3ff;
  --red-dark: #2a00b3;
  --yellow: #ffd643;
  --yellow-2: #fdb813;
  --cream: #fff9e2;
  --orange: #ff8a1f;
  --ink: #333333;
  --ink-strong: #000000;
  --muted: #6f7279;
  --line: #e7e9ed;
  --line-strong: #cfd3d9;
  --grey-bg: #f6f8fa;
  --grey-pill: #e8e9eb;
  --footer-bg: #f4f4f4;
  --surface: #ffffff;
  --ok: #0b7a3b;
  --ok-soft: #e9f6ee;
  --warn-ink: #7a5200;
  --err: #d0021b;
  --focus: #0000ff;
  --shadow: 0 10px 40px -14px rgba(0, 0, 0, 0.16);
  --shadow-sm: 0 4px 14px -6px rgba(0, 0, 0, 0.14);
  --radius-xl: 24px;
  --radius: 16px;
  --topbar-h: 76px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --font: "Be Vietnam Pro", "Be Vietnam", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* tên cũ vẫn dùng trong admin.css */
  --accent: var(--red);
  --accent-soft: var(--red-soft);
  --surface-2: var(--grey-bg);
  --ink-2: var(--ink);
  --shadow-lift: var(--shadow);
}
@media (max-width: 760px) { :root { --topbar-h: 64px; } }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 12px); }
body {
  margin: 0; background: var(--surface); color: var(--ink);
  font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased;
}
body.has-bar { padding-bottom: 80px; }
h1, h2, h3 { color: var(--ink-strong); letter-spacing: -0.01em; }
a { color: var(--red); }
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 760px) { .container { padding: 0 16px; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Thanh điều hướng trên cùng ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, 0.97);
  -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px);
  transition: box-shadow 0.25s;
}
.topbar.scrolled { box-shadow: 0 6px 20px -12px rgba(0, 0, 0, 0.25); }
.topbar-inner { height: var(--topbar-h); display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 14px; flex: none; text-decoration: none; }
.brand img { display: block; height: 48px; width: auto; }
/* Logo Viện Victoria đứng cạnh Vikki, ngăn bằng vạch mảnh */
.brand .brand-co { height: 36px; }
.brand-sep { flex: none; width: 1px; height: 30px; background: var(--line-strong); }
.mainnav { display: flex; gap: 28px; flex: 1; }
.mainnav a { color: var(--ink-strong); text-decoration: none; font-size: 17px; font-weight: 500; position: relative; padding: 6px 0; transition: color 0.2s; white-space: nowrap; }
.mainnav a:hover { color: var(--red); }
.mainnav a.is-active { color: var(--red); font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: 50px;
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; border: 0;
}
.pill-grey { background: rgba(232, 233, 235, 0.85); color: var(--ink-strong); }
.pill-yellow {
  background: var(--grad-btn); color: #fff; font-weight: 700;
  box-shadow: 0 6px 14px -8px rgba(60, 0, 200, 0.85); transition: transform 0.15s var(--ease-out), box-shadow 0.2s;
}
.pill-yellow:hover { transform: translateY(-1px); box-shadow: 0 10px 18px -8px rgba(60, 0, 200, 0.95); }
/* Thêm logo Victoria: viên hạn chót ẩn sớm hơn để menu không bị dồn xuống dòng */
@media (max-width: 1120px) { #deadlinePill { display: none; } }
@media (max-width: 1000px) { .mainnav { display: none; } }
@media (max-width: 760px) {
  .brand img { height: 40px; }
  .brand .brand-co { height: 30px; }
  .pill { height: 38px; padding: 0 16px; font-size: 14px; }
}

/* ---------- Đường dẫn ---------- */
.crumbs { background: var(--grey-bg); }
.crumbs-inner { height: 54px; display: flex; align-items: center; gap: 14px; font-size: 15.5px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.crumb-home svg { width: 22px; height: 22px; fill: #333; display: block; }
.crumb-sep { width: 14px; height: 14px; fill: none; stroke: #333; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.crumb-current { font-weight: 600; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .crumbs-inner { font-size: 14px; gap: 10px; } }

/* ---------- Banner ---------- */
.banner {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 90% at 85% 10%, rgba(255, 255, 255, 0.18), transparent 60%),
    var(--grad);
}
.banner h1 { color: #fff; }
.banner-deco i { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; animation: floaty 9s ease-in-out infinite alternate; }
.banner-deco i:nth-child(1) { width: 380px; height: 380px; right: -90px; top: -150px; background: rgba(255, 255, 255, 0.22); }
.banner-deco i:nth-child(2) { width: 240px; height: 240px; left: -80px; bottom: -120px; background: rgba(255, 255, 255, 0.18); animation-duration: 11s; }
.banner-deco i:nth-child(3) { width: 110px; height: 110px; left: 46%; top: 22px; border: 2px solid rgba(255, 255, 255, 0.55); animation-duration: 7s; }
.banner-deco i:nth-child(4), .banner-deco i:nth-child(5) {
  width: 16px; height: 16px; border-radius: 3px; background: rgba(255, 255, 255, 0.85); transform: rotate(45deg);
}
.banner-deco i:nth-child(4) { left: 40%; bottom: 36px; animation-name: twinkle; animation-duration: 3.2s; }
.banner-deco i:nth-child(5) { right: 34%; top: 40px; width: 10px; height: 10px; animation-name: twinkle; animation-duration: 2.6s; }
@keyframes floaty { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-18px, 14px, 0); } }
@keyframes twinkle { 0%, 100% { opacity: 0.25; transform: rotate(45deg) scale(0.7); } 50% { opacity: 1; transform: rotate(45deg) scale(1.1); } }

.banner-inner { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 48px; align-items: center; padding-top: 52px; padding-bottom: 56px; }
.banner-inner.no-slider { grid-template-columns: minmax(0, 1fr); }
.banner .eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vk-amber); }
.banner h1 { margin: 0 0 14px; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.15; font-weight: 800; text-wrap: balance; }
.banner .lede { margin: 0; max-width: 56ch; font-size: 17.5px; color: rgba(255, 255, 255, 0.94); }
.banner .deadline {
  margin: 22px 0 0; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px 0 16px;
  background: #fff; border-radius: 50px; font-size: 15px; font-weight: 700; color: var(--ink-strong);
  box-shadow: 0 8px 20px -12px rgba(20, 0, 90, 0.7);
}
.banner .deadline::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--magenta);
  animation: beacon 2.2s ease-out infinite;
}
@keyframes beacon {
  0% { box-shadow: 0 0 0 0 rgba(210, 0, 140, 0.5); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(210, 0, 140, 0); }
}
@media (max-width: 900px) {
  .banner-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 32px; padding-bottom: 36px; }
  /* Một cột: chữ nằm trên phần xanh tím, phần cam dồn xuống dưới sau thẻ trắng */
  .banner { background: linear-gradient(170deg, #0000ff 0%, #4a00d6 40%, #a3009f 72%, #ff8a00 100%); }
}
@media (max-width: 560px) {
  .banner-inner.has-slider .lede { display: none; }
  /* Vòng tròn viền trắng đè lên tiêu đề trên nền xanh: ẩn ở màn hình hẹp */
  .banner-deco i:nth-child(3) { display: none; }
}

/* Slide giới thiệu: thẻ trắng trên dải chuyển màu, chấm xanh chạy tiến trình */
.hero-slider {
  position: relative; background: #fff; border-radius: var(--radius-xl); padding: 26px 26px 18px;
  box-shadow: 0 24px 48px -24px rgba(20, 0, 90, 0.6); touch-action: pan-y; user-select: none;
}
.slides { display: grid; }
.slide { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.slide.is-active { visibility: visible; opacity: 1; }
.slide-icon {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px;
  background: var(--red-soft); color: var(--red);
}
.slide-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.slide-kicker { margin: 0 0 4px; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); font-weight: 800; }
.slide-title { margin: 0 0 8px; font-size: 23px; line-height: 1.25; font-weight: 800; color: var(--ink-strong); }
.slide-text { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.slider-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.slider-dots { display: flex; gap: 8px; flex: 1; justify-content: center; }
.slider-dot {
  position: relative; overflow: hidden; width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: #d9d9d9; transition: width 0.35s var(--ease-out), background-color 0.3s;
}
.slider-dot:hover { background: #bdbdbd; }
.slider-dot[aria-current="true"] { width: 32px; background: #d6d2ff; }
.dot-fill { position: absolute; inset: 0; background: var(--red); border-radius: inherit; transform: scaleX(0); transform-origin: left; }
.slider-dot[aria-current="true"] .dot-fill { transform: scaleX(1); }
.slider-arrow {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none;
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
}
.slider-arrow:hover { border-color: var(--red); color: var(--red); }
.slider-arrow:active { transform: scale(0.92); }
.slider-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Xuất hiện lần lượt khi tải trang */
.reveal { animation: fadeUp 0.7s var(--ease-out) both; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.12s; } .d3 { animation-delay: 0.2s; }
.d4 { animation-delay: 0.28s; } .d5 { animation-delay: 0.36s; } .d6 { animation-delay: 0.46s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Khối khảo sát hai cột ---------- */
.page { margin-top: 44px; }
.survey-card {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); align-items: start;
  background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow); border: 1px solid #f0f1f3;
}
.side {
  position: sticky; top: calc(var(--topbar-h) + 16px);
  border-radius: var(--radius-xl); padding: 34px 24px 28px; color: #fff;
  background: linear-gradient(180deg, #0000ff 0%, #3c00dd 30%, #8800b4 58%, #d2008c 84%, #ff8a00 100%);
}
/* Cột trái dính khi cuộn; dài hơn màn hình thì cuộn bên trong, chừa chỗ cho thanh nút dưới cùng */
@media (min-width: 1001px) {
  .side { max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.6) transparent; }
  body.has-bar .side { max-height: calc(100vh - var(--topbar-h) - 32px - 76px); }
}
.side.compact { padding-top: 26px; }
.side.compact .side-title { font-size: 24px; }
.side.compact .side-sub { margin-bottom: 14px; }
.side.compact .steps { gap: 8px; }
.side.compact .step-card { padding: 10px 14px; font-size: 14.5px; }
.side.compact .step-card .dot { width: 28px; height: 28px; font-size: 13px; }
.side.compact .side-cats { margin-top: 18px; }
.side-title { margin: 0; text-align: center; color: #fff; font-size: 30px; font-weight: 800; line-height: 1.2; text-shadow: 0 2px 0 rgba(10, 0, 80, 0.35), 0 0 18px rgba(10, 0, 80, 0.4); }
.side-sub { display: block; width: fit-content; margin: 10px auto 18px; padding: 4px 14px; border-radius: 999px; background: #fff; color: var(--red); font-weight: 700; font-size: 13.5px; box-shadow: 0 4px 10px -6px rgba(20, 0, 90, 0.6); }

/* Thẻ có sọc chéo xanh hồng cam ở góc (màu thương hiệu Vikki) */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.step-card, .cat-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, #ffffff 0%, #f1efff 100%); border-radius: var(--radius);
  color: var(--ink); box-shadow: 0 4px 12px -6px rgba(20, 0, 90, 0.35);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background-color 0.25s, color 0.25s;
}
.step-card::before, .cat-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px; pointer-events: none;
  background: linear-gradient(135deg, var(--brand) 0 7px, var(--magenta) 7px 13px, var(--vk-orange) 13px 19px, transparent 19px);
}
.step-card { padding: 16px 18px; font-size: 16px; font-weight: 700; }
.step-card .dot {
  position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: #f1f1f1; color: #555; font-size: 14px; font-weight: 800; transition: background-color 0.3s, color 0.3s;
}
.step-card .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-card.active { background: #fff; color: var(--ink-strong); transform: translateX(6px); box-shadow: 0 12px 24px -10px rgba(20, 0, 90, 0.55); }
.step-card.active .dot { background: var(--red); color: #fff; animation: pop 0.45s var(--ease-out), ring 1.6s 0.45s ease-out 2; }
.step-card.done .dot { background: var(--ok-soft); color: transparent; }
.step-card.done .dot::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 6px; height: 11px;
  border: solid var(--ok); border-width: 0 2.4px 2.4px 0;
  transform: translate(-50%, -50%) rotate(45deg); animation: tick 0.35s var(--ease-out);
}
@keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(0, 0, 255, 0.45); } 100% { box-shadow: 0 0 0 10px rgba(0, 0, 255, 0); } }
@keyframes tick { from { opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.4); } to { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scale(1); } }

.side-cats { margin-top: 26px; }
.side-cats-title { margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; text-align: center; text-shadow: 0 1px 6px rgba(10, 0, 80, 0.5); }
.cat-list { display: grid; gap: 8px; }
.cat-card {
  width: 100%; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 600; text-align: left;
  padding: 11px 14px 11px 16px; justify-content: space-between;
}
.cat-card:hover { transform: translateX(4px); }
.cat-card .n { flex: none; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); font-size: 12.5px; font-weight: 800; }
.cat-card[aria-pressed="true"] { background: #fff; color: var(--red); font-weight: 800; transform: translateX(6px); box-shadow: 0 10px 22px -10px rgba(20, 0, 90, 0.55); }
.cat-card[aria-pressed="true"] .n { background: var(--red); color: #fff; }

.content { min-width: 0; }
.panel { padding: 34px 40px 36px; }
.panel.flush { padding: 0; }
.panel-head { padding: 34px 40px 6px; }
.panel h2 { margin: 0 0 8px; font-size: 26px; line-height: 1.25; font-weight: 800; text-wrap: balance; }
.panel h3 { margin: 30px 0 10px; font-size: 18px; font-weight: 800; }
.hint { margin: 0 0 18px; color: var(--ink); font-size: 15.5px; }
.req { color: var(--red); }
.opt { color: var(--muted); font-weight: 400; font-size: 13.5px; }

.notice {
  margin: 24px 40px 0; padding: 14px 18px; border-radius: 14px;
  background: var(--cream); color: var(--warn-ink); font-size: 15px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice .btn { min-height: 36px; padding: 0 16px; font-size: 14px; }

/* ---------- Biểu mẫu ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.span2 { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 7px; color: var(--ink-strong); }
input[type="text"], input:not([type]), input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], select, textarea {
  width: 100%; font: inherit; color: var(--ink-strong); background: var(--grey-bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; min-height: 50px;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
input::placeholder, textarea::placeholder { color: #9a9ca3; }
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus { outline: none; background: #fff; border-color: var(--red); box-shadow: 0 0 0 4px rgba(0, 0, 255, 0.12); }
input[aria-invalid="true"] { border-color: var(--err); background: #fff; box-shadow: 0 0 0 4px rgba(208, 2, 27, 0.1); }
.err { min-height: 20px; margin: 5px 0 8px; color: var(--err); font-size: 13.5px; font-weight: 500; }
.err:not(:empty) { animation: fadeIn 0.25s ease; }
.err.block:empty { display: none; }
.err.block { margin: 0 40px 14px; padding: 12px 14px; border-radius: 12px; background: var(--red-soft); font-size: 14.5px; }
#step3 .err.block { margin: 14px 0 0; }
.privacy { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.actions.center { justify-content: center; }

/* ---------- Nút dạng viên thuốc ---------- */
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; font-size: 15.5px; border-radius: 50px; padding: 0 30px; min-height: 48px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.25s, transform 0.15s var(--ease-out), color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn.primary {
  background: var(--grad-btn); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(60, 0, 200, 0.9);
}
.btn.primary:hover { box-shadow: 0 12px 22px -10px rgba(60, 0, 200, 1); }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 0.8s var(--ease-out);
}
.btn.primary:hover::after { transform: translateX(120%); }
.btn.primary:disabled { opacity: 0.8; cursor: progress; transform: none; }
.btn.ghost { background: var(--grey-pill); color: var(--ink-strong); }
.btn.ghost:hover { background: #dcdde0; }
.btn.outline { background: #fff; color: var(--red); border-color: var(--red); }
.btn.link { background: none; border: none; color: var(--red); padding: 4px 0; min-height: 0; font-weight: 700; overflow: visible; }
.btn.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn.link:hover, .btn.link:active { transform: none; }
.btn.loading::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 9px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Bước 2: thanh lọc, danh mục ---------- */
.toolbar {
  position: sticky; top: var(--topbar-h); z-index: 5; background: #fff;
  padding: 14px 40px; border-bottom: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; transition: box-shadow 0.25s;
}
.toolbar.stuck { box-shadow: 0 12px 18px -16px rgba(0, 0, 0, 0.4); }
.search { position: relative; flex: 1 1 280px; }
.search svg { position: absolute; right: 16px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%); fill: none; stroke: var(--ink-strong); stroke-width: 2; stroke-linecap: round; }
.search input { padding-right: 46px; border-radius: 50px; padding-left: 20px; }
.filters { display: flex; gap: 8px; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.filter {
  flex: none; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 16px; border-radius: 999px;
  background: var(--red-soft); color: var(--ink); border: 0; cursor: pointer; min-height: 38px;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.filter:hover { background: #e3dfff; }
.filter:active { transform: scale(0.96); }
.filter[aria-pressed="true"] { background: var(--red); color: #fff; }
.filter .n { font-weight: 500; opacity: 0.75; margin-left: 4px; }
.only-selected { font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; cursor: pointer; }
.only-selected input { accent-color: var(--red); width: 17px; height: 17px; }
/* Máy tính: lọc bằng thẻ nhóm ở cột trái, ẩn hàng thẻ lọc trên thanh công cụ */
@media (min-width: 1001px) { .filters { display: none; } }

.catalog { padding: 6px 40px 34px; }
.section { margin-top: 28px; }
.section-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); position: relative; transition: opacity 0.5s ease, transform 0.5s var(--ease-out); }
.section-head::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 64px; border-radius: 3px; background: var(--red); }
.section-head .code { flex: none; min-width: 34px; height: 28px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; background: var(--red); color: #fff; font-weight: 800; font-size: 13px; }
.section-head h3 { margin: 0; font-size: 22px; font-weight: 800; }
.section-sub { margin: 8px 0 4px; color: var(--muted); font-size: 14px; }
.group-title { margin: 20px 0 8px; font-size: 15.5px; font-weight: 800; color: var(--ink-strong); }
.group-title.l2 { margin-top: 12px; padding-left: 12px; border-left: 3px solid var(--magenta); font-weight: 700; }
.group-note { font-weight: 400; color: var(--muted); }

.course {
  border: 1px solid var(--line); border-radius: var(--radius); margin: 10px 0; background: #fff;
  transition: border-color 0.2s, background-color 0.25s, box-shadow 0.25s, opacity 0.5s ease, transform 0.5s var(--ease-out);
}
.course:hover { border-color: var(--red-line); box-shadow: var(--shadow-sm); }
.course.l3 { margin-left: 14px; }
.course.selected { border-color: var(--red); background: var(--red-soft); box-shadow: inset 4px 0 0 var(--red), 0 8px 20px -14px rgba(0, 0, 255, 0.55); }
.course.invalid { border-color: var(--err); box-shadow: inset 4px 0 0 var(--err); }
.course.pre, .section-head.pre { opacity: 0; transform: translateY(14px); }
.course.pre.in, .section-head.pre.in { opacity: 1; transform: none; }
.course-head { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 15px 18px; cursor: pointer; align-items: start; }
.course-head input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--red); cursor: pointer; transition: transform 0.15s; }
.course-head input:active { transform: scale(0.88); }
.course-title { font-weight: 700; line-height: 1.45; color: var(--ink-strong); }
.course-title .tt { color: var(--red); font-weight: 800; margin-right: 6px; font-variant-numeric: tabular-nums; }
.course-details { margin: 4px 0 0; color: var(--ink); font-size: 14px; }
.meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; font-size: 13.5px; color: var(--ink); }
.meta .k { color: var(--muted); }
.badge { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--cream); color: var(--warn-ink); }
.course-opts { padding: 2px 18px 18px 54px; display: grid; gap: 14px; }
.opt-label { font-size: 14px; font-weight: 700; margin-bottom: 8px; display: block; color: var(--ink-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums; user-select: none; color: var(--ink-strong);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.2s;
}
.chip span:hover { border-color: var(--red); color: var(--red); }
.chip span:active { transform: scale(0.93); }
.chip input:checked + span {
  background: var(--red); color: #fff; border-color: var(--red);
  box-shadow: 0 6px 12px -6px rgba(0, 0, 255, 0.6); animation: chipPop 0.28s var(--ease-out);
}
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes chipPop { 0% { transform: scale(0.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
.months .chip span { min-width: 0; width: 100%; padding: 0; }
.course-opts input.note { min-height: 44px; padding: 9px 14px; font-size: 14.5px; background: #fff; }
.course .err { margin: 0; min-height: 0; }
.empty { text-align: center; color: var(--muted); padding: 28px; }

/* ---------- Thanh dưới cùng ---------- */
.bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line); padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 28px -20px rgba(0, 0, 0, 0.35);
}
.bar-inner { display: flex; align-items: center; gap: 12px; }
.picked { flex: 1; text-align: center; font-size: 15px; color: var(--ink); }
.picked strong { color: var(--red); display: inline-block; min-width: 1ch; font-weight: 800; }

/* ---------- Bước 3 ---------- */
.who { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--grey-bg); border-radius: var(--radius); font-size: 15px; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand), var(--magenta)); color: #fff; font-weight: 800; font-size: 17px; }
.who strong { font-size: 16px; color: var(--ink-strong); }
.who .sub { color: var(--ink); font-size: 14px; }
.count { color: var(--muted); font-weight: 500; }
.review { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.review:empty { display: none; }
.review-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 15px; align-items: baseline; }
.review-row:first-child { border-top: 0; }
.review-row:nth-child(even) { background: #fcfcfd; }
.review-row .tt { color: var(--red); font-weight: 800; font-variant-numeric: tabular-nums; }
.review-row .sub { color: var(--muted); font-size: 13.5px; }
.review-row .m { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-strong); }
.stagger > * { animation: fadeUp 0.45s var(--ease-out) both; }
.review-empty { padding: 14px 16px; color: var(--muted); font-size: 15px; }
.proposal { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; background: var(--grey-bg); display: grid; gap: 10px; }
.proposal input { background: #fff; }
.proposal-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14.5px; color: var(--ink-strong); }

/* ---------- Hoàn tất ---------- */
.panel.done { text-align: center; padding-top: 40px; }
.done-icon {
  position: relative; width: 82px; height: 82px; margin: 4px auto 20px; border-radius: 50%;
  background: var(--ok-soft); display: grid; place-items: center; animation: pop 0.55s var(--ease-out) both;
}
.done-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); animation: ripple 1.2s 0.3s ease-out both; }
.done-icon svg { width: 40px; height: 40px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.done-icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 0.5s 0.35s var(--ease-out) forwards; }
.spark { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ripple { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
.panel.done h2 { font-size: 28px; }
.panel.done .review { text-align: left; margin-top: 20px; }

/* ---------- Thông tin + câu hỏi thường gặp ---------- */
.info-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; margin: 48px 0 56px; }
.info-card { background: var(--grey-bg); border-radius: var(--radius-xl); padding: 40px; }
.info-card h2, .faq-card h2 { margin: 0 0 24px; font-size: 30px; font-weight: 800; text-align: center; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.facts li { display: flex; gap: 16px; align-items: center; }
.fact-ico { flex: none; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--red); box-shadow: var(--shadow-sm); }
.fact-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.facts strong { display: block; color: var(--ink-strong); font-size: 16px; }
.facts span { color: var(--ink); font-size: 15px; }
.faq-card { border-radius: var(--radius-xl); padding: 40px 36px; color: #fff; background: var(--grad-deep); }
.faq-card h2 { color: #fff; text-shadow: 0 2px 0 rgba(10, 0, 80, 0.25); }
.faq-card details { border-bottom: 1px solid rgba(255, 255, 255, 0.22); padding: 12px 0; }
.faq-card details:last-of-type { border-bottom: 0; }
.faq-card summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; font-weight: 600; font-size: 16.5px; line-height: 1.4;
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::before {
  content: "?"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--brand);
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.faq-card summary::after {
  content: ""; flex: none; margin-left: auto; width: 9px; height: 9px; border: solid #fff; border-width: 0 2.2px 2.2px 0;
  transform: rotate(45deg); transition: transform 0.25s;
}
.faq-card details[open] summary::after { transform: rotate(-135deg); }
.faq-card details p { margin: 10px 0 4px 40px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.94); }
.faq-card details[open] p { animation: fadeUp 0.35s var(--ease-out); }
.faq-card summary:focus-visible { outline-color: #fff; }

/* ---------- Chân trang ---------- */
.site-footer { background: linear-gradient(100deg, #0000ff 0%, #3c00dd 30%, #8800b4 62%, #c0008f 100%); color: #fff; padding: 52px 0 28px; }
.site-footer .brand-sep { background: rgba(255, 255, 255, 0.5); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.foot-brand img { height: 50px; width: auto; display: block; }
.foot-logos { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-logos .brand-co { height: 38px; }
.foot-contact { margin: 16px 0 0; color: rgba(255, 255, 255, 0.92); font-size: 15px; max-width: 42ch; }
/* Danh sách liên hệ: người phụ trách, điện thoại, email (bấm được) */
.contact-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.contact-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink); }
.site-footer .contact-list li, .site-footer .contact-list a { color: #fff; }
.site-footer .contact-list svg { stroke: #fff; }
.site-footer .contact-list a:hover { color: #fff; }
.contact-list svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.contact-list a { color: var(--ink-strong); font-weight: 600; text-decoration: none; }
.contact-list a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.foot-grid .contact-list a, .foot-grid .contact-list span { display: inline; margin: 0; }
.facts a, .faq-card a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.facts a:hover { color: var(--red); }
.foot-h { margin: 0 0 14px; font-weight: 800; color: #fff; font-size: 15.5px; }
.foot-grid a, .foot-grid span { display: block; color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 15px; margin-bottom: 10px; }
.foot-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.25); text-align: center; font-size: 14px; color: rgba(255, 255, 255, 0.85); }

/* ---------- Màn hình vừa và nhỏ ---------- */
@media (max-width: 1000px) {
  .survey-card { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 22px 18px 18px; }
  .side-title { font-size: 22px; }
  .side-sub { margin-bottom: 12px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .step-card { flex-direction: column; justify-content: center; gap: 6px; padding: 12px 6px 10px; font-size: 12.5px; text-align: center; }
  .step-card .lbl { white-space: normal; line-height: 1.3; }
  .step-card.active { transform: translateY(-2px); }
  .side-cats { display: none !important; }
  .info-row { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .grid { grid-template-columns: 1fr; }
  .months { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .page { margin-top: 24px; }
  .panel { padding: 24px 18px 26px; }
  .panel-head { padding: 24px 18px 4px; }
  .panel h2 { font-size: 22px; }
  .notice { margin: 18px 18px 0; }
  .toolbar { padding: 12px 18px; }
  .catalog { padding: 4px 18px 24px; }
  .err.block { margin: 0 18px 12px; }
  .course-head { padding: 13px 14px; gap: 12px; }
  .course-opts { padding-left: 14px; padding-right: 14px; }
  .course.l3 { margin-left: 0; }
  .review-row { grid-template-columns: 1fr; gap: 2px; }
  .review-row .m { white-space: normal; }
  .hero-slider { padding: 20px 18px 14px; }
  .slide-title { font-size: 20px; }
  .info-card, .faq-card { padding: 28px 20px; }
  .info-card h2, .faq-card h2 { font-size: 24px; }
  .btn { padding: 0 22px; }
  .bar-inner { gap: 8px; }
  .bar-inner .btn { padding: 0 18px; min-height: 44px; font-size: 15px; }
  .picked { font-size: 13.5px; white-space: nowrap; }
  .slide-icon { width: 42px; height: 42px; margin-bottom: 12px; }
  .slide-icon svg { width: 22px; height: 22px; }
}

/* Người dùng bật "giảm chuyển động": tắt hết hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important; scroll-behavior: auto !important;
  }
  .banner-deco i { animation: none !important; }
  .course.pre, .section-head.pre { opacity: 1; transform: none; }
}

/* ======================================================================
   Phiếu theo đơn vị: nhóm trường, số lượng + đơn giá, đăng ký thêm,
   bảng xem lại, khung in và ký, tải bản ký lên
   ====================================================================== */
.fset { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 6px; margin: 0 0 18px; }
.fset legend { padding: 0 8px; font-weight: 800; font-size: 15px; color: var(--red); }

/* Bước 1: chọn tạo phiếu mới hoặc mở lại phiếu đã lưu */
.mode-switch { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px; border-radius: 999px; background: var(--grey-bg); border: 1px solid var(--line); max-width: 100%; }
.mode-switch button {
  min-height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.mode-switch button:hover { color: var(--red); }
.mode-switch button[aria-selected="true"] { background: var(--grad-btn); color: #fff; box-shadow: 0 6px 16px -8px rgba(60, 0, 200, 0.7); }
.linklike { padding: 0; border: 0; background: none; color: var(--red); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--red-hover); }

/* Ô chọn đơn vị có danh sách gợi ý */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.28);
}
.combo-list li[role="option"] { padding: 10px 12px; border-radius: 10px; font-size: 15px; color: var(--ink-strong); cursor: pointer; }
.combo-list li[role="option"]:hover, .combo-list li.active { background: var(--red-soft); color: var(--red-dark); }
.combo-note { padding: 10px 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 560px) {
  .mode-switch { display: flex; }
  .mode-switch button { flex: 1 1 0; padding: 0 10px; font-size: 14px; line-height: 1.25; }
}

.num-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.2fr); gap: 12px; align-items: end; }
.num-field { min-width: 0; }
.num-field .opt-label { white-space: normal; line-height: 1.3; }
.course-opts input.num-in, .proposal input.num-in { min-height: 44px; padding: 8px 12px; background: #fff; font-variant-numeric: tabular-nums; }
.num-field.cost { padding-bottom: 10px; }
.cost-v { display: block; font-size: 16px; color: var(--red); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .num-row { grid-template-columns: 1fr 1fr; }
  .num-field .opt-label { white-space: normal; line-height: 1.3; }
  .num-field.cost { grid-column: 1 / -1; padding-bottom: 0; }
}

.extra { margin: 8px 40px 34px; padding-top: 22px; border-top: 1px dashed var(--line-strong); }
.extra-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.extra-head .code { min-width: 34px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--magenta); color: #fff; font-weight: 800; }
.extra-head h3 { margin: 0; font-size: 20px; font-weight: 800; }
.proposal.invalid { border-color: var(--err); box-shadow: inset 4px 0 0 var(--err); }
.proposal .err { margin: 0; min-height: 0; }
@media (max-width: 560px) { .extra { margin: 8px 18px 26px; } }

/* Bảng xem lại nội dung (bước 3 và màn hình hoàn tất) */
.review-table { border-radius: var(--radius); }
.rv-row {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) 60px 128px 150px 84px; gap: 10px;
  padding: 11px 14px; border-top: 1px solid var(--line); font-size: 14.5px; align-items: baseline;
}
.rv-row:first-child { border-top: 0; }
.rv-head { background: var(--grey-bg); font-size: 12px; font-weight: 800; color: var(--ink-strong); text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.35; align-items: end; }
.rv-row .n { text-align: right; font-variant-numeric: tabular-nums; }
.rv-row .strong { font-weight: 800; color: var(--ink-strong); }
.rv-row .tt { color: var(--red); font-weight: 800; font-size: 13.5px; }
.rv-row .sub { color: var(--muted); font-size: 13px; }
.rv-row .m { font-weight: 700; font-size: 13.5px; }
.rv-row.rv-extra { background: #faf8ff; }
.rv-total { background: var(--red-soft); font-weight: 800; color: var(--ink-strong); }
.rv-total .strong { color: var(--red); }
@media (max-width: 760px) {
  .rv-head { display: none; }
  .rv-row { grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .rv-row > :nth-child(2) { grid-column: 1 / -1; order: -1; font-weight: 600; }
  .rv-row .tt { grid-column: 1 / -1; order: -2; }
  .rv-row .n, .rv-row .m { text-align: left; }
  .rv-row [data-label]::before { content: attr(data-label) ": "; font-weight: 400; color: var(--muted); }
}

/* Khung hoàn tất phiếu: in, ký, tải lên */
.sign-box { margin-top: 28px; padding: 22px 24px; border-radius: var(--radius-xl); background: linear-gradient(135deg, #f5f3ff 0%, #fff3fa 100%); border: 1px solid #ddd6ff; }
.sign-box h3 { margin: 0 0 12px; }
.sign-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sign-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; }
.sign-step .dot {
  position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--red); color: #fff; font-weight: 800; transition: background-color 0.3s;
}
.sign-step.done .dot { background: var(--ok); color: transparent; }
.sign-step.done .dot::after {
  content: ""; position: absolute; left: 50%; top: 45%; width: 7px; height: 13px; border: solid #fff; border-width: 0 2.6px 2.6px 0;
  transform: translate(-50%, -50%) rotate(45deg); animation: tick 0.35s var(--ease-out);
}
.sign-step strong { font-size: 16px; color: var(--ink-strong); }
.sign-step .hint { margin: 2px 0 10px; font-size: 14.5px; }
.sign-step #codeNow { color: var(--red); letter-spacing: 0.05em; }
.warn { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: var(--cream); color: var(--warn-ink); font-size: 14px; font-weight: 600; }
.saved-note { margin: 0 0 6px; padding: 9px 12px; border-radius: 10px; background: var(--ok-soft); color: var(--ok); font-size: 14px; font-weight: 600; }
.saved-note.warn { background: var(--cream); color: var(--warn-ink); }

/* Thẻ trạng thái phiếu đầu bước 3 */
.status-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; margin: 0 0 20px; padding: 14px 18px; border-radius: var(--radius); border: 1px solid; }
.status-card strong { display: block; font-size: 16px; font-weight: 800; margin-bottom: 2px; }
.status-card p { margin: 2px 0 0; font-size: 14.5px; }
.status-icon { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; }
.status-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.status-card.is-sent { background: var(--ok-soft); border-color: #bfe3cc; color: var(--ok); }
.status-card.is-sent strong { color: var(--ok); }
.status-card.is-sent p { color: var(--ink); }
.status-card.is-pending { background: var(--cream); border-color: #f3dc8f; color: var(--warn-ink); }
.status-card.is-pending strong { color: var(--warn-ink); }
.status-card.is-pending p { color: var(--ink); }
@media (max-width: 560px) {
  .status-card { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 14px; }
  .status-icon { width: 30px; height: 30px; }
  .status-icon svg { width: 18px; height: 18px; }
}
.sign-step .err:empty { min-height: 0; margin: 0; }
.drop {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; cursor: pointer;
  border: 2px dashed var(--line-strong); background: #fff; color: var(--ink); transition: border-color 0.2s, background-color 0.2s;
}
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop svg { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--red); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.drop:hover, .drop.drag { border-color: var(--red); background: var(--red-soft); }
.drop:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.drop u { color: var(--red); font-weight: 700; text-underline-offset: 3px; }
.drop.has-file { border-style: solid; border-color: var(--line); padding: 10px 14px; }
.upload-progress { height: 6px; border-radius: 6px; background: var(--grey-pill); margin-top: 10px; overflow: hidden; }
.upload-progress span { display: block; height: 100%; width: 0; background: var(--red); transition: width 0.2s; }
.upload-file { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: var(--ok-soft); font-size: 14.5px; flex-wrap: wrap; }
.upload-file svg { width: 22px; height: 22px; fill: none; stroke: var(--ok); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ok-tag { margin-left: auto; font-size: 12.5px; font-weight: 800; color: var(--ok); text-transform: uppercase; letter-spacing: 0.04em; }
.confirm { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14.5px; color: var(--ink-strong); cursor: pointer; }
.confirm input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--red); flex: none; }
@media (max-width: 560px) { .sign-box { padding: 18px 14px; } }
@media (max-width: 760px) { .pk-extra { display: none; } }

/* ---------- Bản in phiếu (chỉ hiện khi in) ---------- */
#printSheet { display: none; }
@media print {
  @page { size: A4 landscape; margin: 9mm 11mm 10mm; }
  html, body { background: #fff !important; }
  body { padding: 0 !important; }
  body > *:not(#printSheet) { display: none !important; }
  #printSheet { display: block !important; }
}
.ps { font-family: "Times New Roman", Times, serif; font-size: 11.5pt; line-height: 1.35; color: #000; }
.ps * { color: #000 !important; }
.ps-head { display: flex; justify-content: space-between; align-items: flex-start; }
.ps-logo { height: 12mm; width: auto; }
.ps-logos { display: flex; align-items: center; gap: 3mm; }
.ps-logo.ps-co { height: 9mm; }
.ps-sep { width: 0; height: 8mm; border-left: 0.6pt solid #999; }
.ps-meta { text-align: right; font-size: 10.5pt; }
.ps-title { margin: 1mm 0 0; text-align: center; font-size: 15pt; font-weight: 700; letter-spacing: 0.02em; }
.ps-sub { margin: 0.5mm 0 2mm; text-align: center; font-style: italic; }
.ps h2 { margin: 2.5mm 0 1.2mm; font-size: 12pt; font-weight: 700; }
.ps table { width: 100%; border-collapse: collapse; }
.ps-info th, .ps-info td { border: 0.6pt solid #000; padding: 0.9mm 2mm; text-align: left; vertical-align: top; }
.ps-info th { width: 17%; font-weight: 700; background: #f2f2f2; }
.ps-info td { width: 33%; }
.ps-table th, .ps-table td { border: 0.6pt solid #000; padding: 1mm 1.6mm; vertical-align: top; }
.ps-table thead th { font-weight: 700; text-align: center; vertical-align: middle; background: #f2f2f2; font-size: 10.5pt; }
.ps-table thead { display: table-header-group; }
.ps-table tr { break-inside: avoid; page-break-inside: avoid; }
.ps-table td.n { text-align: right; white-space: nowrap; }
.ps-table td.c { text-align: center; }
.ps-group td { font-weight: 700; font-style: italic; background: #fafafa; }
.ps-total td { font-weight: 700; }
.ps-comment { margin: 2.5mm 0 0; }
.ps-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 10mm; margin-top: 3mm; text-align: center; break-inside: avoid; page-break-inside: avoid; }
.ps-sign p { margin: 0; }
.ps-date { font-style: italic; min-height: 5mm; }
.ps-role { font-weight: 700; margin-top: 1mm !important; }
.ps-hint { font-style: italic; font-size: 10.5pt; }
.ps-name { margin-top: 17mm !important; font-weight: 700; }
.ps-note { font-size: 9pt; font-style: italic; }

/* Điện thoại hẹp: thu nhỏ cụm logo */
@media (max-width: 560px) {
  .brand { gap: 10px; }
  .brand img { height: 32px; }
  .brand .brand-co { height: 26px; }
  .brand-sep { height: 24px; }
  .foot-logos img { height: 40px; }
  .foot-logos .brand-co { height: 30px; }
}
/* Màn hình rất hẹp: ẩn nút "Bắt đầu khảo sát" trên thanh trên cùng (form ngay bên dưới) */
@media (max-width: 420px) { .topbar #ctaTop { display: none; } }