/* ============================================================================
 *  /form — SAIGON SMILE · Phân tích cơ thể & Lộ trình giảm cân
 *  Tông cam thương hiệu (#ec7700). Single-column, mobile-first, theme sáng/tối.
 * ==========================================================================*/

:root, [data-theme="light"]{
  --accent:#ec7700; --accent-2:#ff9a3d; --accent-ink:#ffffff;
  --bg:#fbf7f2; --bg-2:#f3efe9; --panel:#ffffff; --line:#eadfd3;
  --txt:#241c14; --muted:#7a6a5a; --soft:#9b8b7b;
  --ring:rgba(236,119,0,.22);
  --good:#15803d; --warn:#b45309; --bad:#c81e1e; --info:#0369a1;
  --shadow:0 1px 3px rgba(60,40,20,.08), 0 8px 30px rgba(60,40,20,.08);
  --hero-ink:#ffffff;
}
[data-theme="dark"]{
  --accent:#ff9a3d; --accent-2:#ffb066; --accent-ink:#241206;
  --bg:#14100c; --bg-2:#1c1712; --panel:#211b15; --line:#342a20;
  --txt:#f2e9df; --muted:#b6a695; --soft:#8f8171;
  --ring:rgba(255,154,61,.25);
  --good:#4ade80; --warn:#fbbf24; --bad:#f87171; --info:#38bdf8;
  --shadow:none;
  --hero-ink:#ffffff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font-family:'Be Vietnam Pro','Segoe UI',system-ui,-apple-system,sans-serif;
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:var(--accent); text-decoration:none}
.container{max-width:940px; margin:0 auto; padding:0 18px}
.container-sm{max-width:720px; margin:0 auto; padding:0 18px}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:30; background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
}
.topbar .container{display:flex; align-items:center; justify-content:space-between; height:60px}
.topbar .logo{display:flex; align-items:center; gap:10px; font-weight:700}
.topbar .logo img{height:30px; width:auto}
.topbar .tb-actions{display:flex; align-items:center; gap:10px}
.theme-btn{border:1px solid var(--line); background:var(--panel); color:var(--muted);
  width:38px; height:38px; border-radius:50%; cursor:pointer; font-size:1rem; display:grid; place-items:center}
.theme-btn:hover{color:var(--accent); border-color:var(--accent)}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; color:var(--hero-ink);
  background:radial-gradient(120% 120% at 15% 0%, #ffb066 0%, var(--accent) 42%, #d1600a 100%);
  padding:52px 0 64px;
}
.hero::after{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 90% 20%, rgba(255,255,255,.14), transparent 60%); pointer-events:none}
.hero.has-bg{background-size:cover; background-position:center; background-repeat:no-repeat}
.hero .container{position:relative; z-index:1; text-align:center}
.hero .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600;
  background:rgba(255,255,255,.18); padding:6px 14px; border-radius:100px; margin-bottom:16px}
.hero h1{font-size:clamp(1.7rem,4.6vw,2.7rem); line-height:1.15; margin:.2rem 0 .5rem; font-weight:800; letter-spacing:-.01em}
.hero p.lead{font-size:clamp(1rem,2.3vw,1.18rem); opacity:.95; max-width:620px; margin:0 auto 26px}
.hero .hero-badges{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; margin-top:22px; font-size:.86rem; opacity:.95}
.hero .hero-badges span{display:inline-flex; align-items:center; gap:7px}
.hero-logo{height:40px; margin-bottom:22px}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:12px; font-weight:700; font-size:1rem; padding:14px 26px; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease; text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-cta{background:#fff; color:var(--accent); box-shadow:0 10px 30px rgba(0,0,0,.18)}
.btn-cta:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.24)}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 22px var(--ring)}
.btn-primary:hover{background:#d56b00}
[data-theme="dark"] .btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent; color:var(--txt); border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn-lg{padding:16px 34px; font-size:1.06rem}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-block{width:100%}

/* ── Steps / value section on landing ────────────────────────────────────── */
.section{padding:44px 0}
.section h2{font-size:1.5rem; font-weight:800; text-align:center; margin:0 0 6px}
.section .sub{text-align:center; color:var(--muted); margin:0 auto 30px; max-width:560px}
.how-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px}
.how-card{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow)}
.how-card .n{width:38px; height:38px; border-radius:11px; background:var(--bg-2); color:var(--accent);
  display:grid; place-items:center; font-weight:800; margin-bottom:12px; font-size:1.05rem}
.how-card h3{margin:0 0 6px; font-size:1.05rem}
.how-card p{margin:0; color:var(--muted); font-size:.92rem}

/* ── Gallery không gian spa ──────────────────────────────────────────────── */
.section-alt{background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px}
.g-item{margin:0; border-radius:16px; overflow:hidden; box-shadow:var(--shadow); position:relative}
.g-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.g-item:hover img{transform:scale(1.06)}
.g-item.g-tall{grid-row:span 2; grid-column:span 2}
@media(max-width:760px){
  .gallery-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:130px}
  .g-item.g-tall{grid-column:span 2; grid-row:span 1}
}

/* ── Wizard ──────────────────────────────────────────────────────────────── */
.wizard-wrap{padding:34px 0 60px; min-height:70vh}
.card{background:var(--panel); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow)}
.wizard{max-width:620px; margin:0 auto}
.progress{height:8px; background:var(--bg-2); border-radius:100px; overflow:hidden; margin-bottom:6px}
.progress > i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent-2),var(--accent));
  border-radius:100px; transition:width .35s cubic-bezier(.4,0,.2,1)}
.progress-meta{display:flex; justify-content:space-between; font-size:.78rem; color:var(--muted); margin-bottom:18px}

.step{display:none; animation:fade .35s ease}
.step.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.step-inner{padding:26px 26px 24px}
.step h2.q{font-size:1.32rem; font-weight:800; margin:.1rem 0 4px; letter-spacing:-.01em}
.step .hint{color:var(--muted); font-size:.92rem; margin:0 0 20px}

label.fld{display:block; font-weight:600; font-size:.9rem; margin:0 0 7px}
.input, select.input{width:100%; padding:13px 15px; font-size:1.05rem; color:var(--txt);
  background:var(--bg-2); border:1.5px solid var(--line); border-radius:12px; outline:none; transition:border .15s, box-shadow .15s;
  font-family:inherit}
.input:focus, select.input:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); background:var(--panel)}
.input.suffix-pad{padding-right:52px}
.field{margin-bottom:18px; position:relative}
.field .suffix{position:absolute; right:15px; top:39px; color:var(--soft); font-size:.95rem; pointer-events:none}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
@media(max-width:480px){.row2{grid-template-columns:1fr} .row3{grid-template-columns:1fr 1fr}}

/* Nhãn nhóm nhỏ trong bước gộp + đường phân cách */
.wz-label{font-weight:700; font-size:.92rem; margin:0 0 9px}
.wz-div{border:0; border-top:1px solid var(--line); margin:20px 0 16px}

/* Chip vùng muốn giảm (dạng lưới nhỏ gọn) */
.choices.areas{grid-template-columns:1fr 1fr; gap:9px}
@media(max-width:480px){.choices.areas{grid-template-columns:1fr 1fr}}
.area-chip{padding:11px 14px}
.area-chip .t{font-weight:600}

/* Choice chips / cards (radio & checkbox) */
.choices{display:grid; gap:10px}
.choices.cols-2{grid-template-columns:1fr 1fr}
@media(max-width:480px){.choices.cols-2{grid-template-columns:1fr}}
.choice{position:relative; display:flex; align-items:center; gap:12px; padding:14px 16px;
  border:1.5px solid var(--line); border-radius:13px; background:var(--bg-2); cursor:pointer; transition:.15s}
.choice:hover{border-color:var(--accent-2)}
.choice input{position:absolute; opacity:0; pointer-events:none}
.choice .ic{font-size:1.35rem; line-height:1}
.choice .t{font-weight:600}
.choice .d{font-size:.8rem; color:var(--muted)}
.choice.sel{border-color:var(--accent); background:color-mix(in srgb,var(--accent) 12%, var(--panel)); box-shadow:0 0 0 3px var(--ring)}
.choice .tick{margin-left:auto; color:var(--accent); opacity:0; font-size:1.2rem}
.choice.sel .tick{opacity:1}

/* Live BMI meter */
.bmi-live{margin-top:6px; background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:16px}
.bmi-live .top{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px}
.bmi-live .val{font-size:1.8rem; font-weight:800}
.bmi-live .cls{font-weight:700; font-size:.92rem}
.bmi-bar{height:10px; border-radius:100px; background:linear-gradient(90deg,#3b82f6 0 18%,#22c55e 18% 42%,#eab308 42% 55%,#f97316 55% 78%,#ef4444 78% 100%); position:relative}
.bmi-bar .pin{position:absolute; top:-5px; width:4px; height:20px; background:var(--txt); border-radius:2px; transform:translateX(-50%); transition:left .3s ease; box-shadow:0 0 0 2px var(--panel)}
.bmi-scale{display:flex; justify-content:space-between; font-size:.68rem; color:var(--soft); margin-top:6px}

/* Photo upload */
.photo-drop{display:block; width:100%; border:2px dashed var(--line); border-radius:16px; padding:26px; text-align:center; cursor:pointer;
  background:var(--bg-2); transition:.15s}
.photo-drop:hover{border-color:var(--accent)}
.photo-drop .ic{font-size:2.4rem; color:var(--accent)}
.photo-drop .big{font-weight:700; margin-top:8px}
.photo-drop .sm{color:var(--muted); font-size:.84rem; margin-top:2px}
.photo-preview{position:relative; display:inline-block; margin-top:14px}
.photo-preview img{max-height:220px; border-radius:14px; border:1px solid var(--line)}
.photo-preview .rm{position:absolute; top:8px; right:8px; background:rgba(0,0,0,.6); color:#fff; border:0;
  width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:1rem}
.tag-optional{display:inline-block; font-size:.7rem; font-weight:700; color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--panel));
  padding:2px 9px; border-radius:100px; margin-left:8px; vertical-align:middle}
.pose-status{margin-top:12px; font-size:.85rem; color:var(--muted); display:flex; align-items:center; gap:7px}

/* Contact gate step */
.gift-box{text-align:center; margin-bottom:18px}
.gift-box .ic{font-size:2.6rem}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.84rem; color:var(--muted); margin-top:4px}
.consent input{margin-top:3px}

/* Nav buttons */
.wizard-nav{display:flex; gap:12px; padding:0 26px 26px; margin-top:14px}
.wizard-nav .btn{flex:1}
.err-msg{color:var(--bad); font-size:.85rem; margin-top:8px; min-height:1.1em}

/* Loading / analyzing screen */
.analyzing{text-align:center; padding:60px 20px}
.pulse-ring{width:96px; height:96px; margin:0 auto 24px; border-radius:50%;
  background:color-mix(in srgb,var(--accent) 12%, var(--panel));
  position:relative}
.pulse-ring::before,.pulse-ring::after{content:""; position:absolute; inset:0; border-radius:50%;
  border:3px solid var(--accent); animation:ripple 1.8s ease-out infinite}
.pulse-ring::after{animation-delay:.9s}
@keyframes ripple{from{transform:scale(.5); opacity:.9}to{transform:scale(1.8); opacity:0}}
.pulse-mark{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; object-fit:contain; z-index:2}
.analyzing h2{font-size:1.35rem; margin:.2rem 0}
.analyzing .steps-log{color:var(--muted); font-size:.95rem; margin-top:8px; min-height:1.4em}
.analyzing-logo{height:30px; opacity:.55; margin-top:26px}

footer.site{border-top:1px solid var(--line); padding:26px 0; color:var(--muted); font-size:.85rem; text-align:center}
footer.site a{color:var(--muted); text-decoration:underline}

/* ============================================================================
 *  REPORT (result.php)
 * ==========================================================================*/
.report{max-width:860px; margin:0 auto; padding:28px 0 60px}
.rep-head{background:radial-gradient(120% 130% at 10% 0%, #ffb066, var(--accent) 55%, #d1600a);
  color:#fff; border-radius:22px; padding:28px 28px 26px; position:relative; overflow:hidden}
.rep-head::after{content:""; position:absolute; right:-40px; top:-40px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
.rep-head .who{position:relative; z-index:1}
.rep-head .hi{opacity:.9; font-size:.9rem}
.rep-head h1{font-size:1.7rem; margin:2px 0 4px; font-weight:800}
.rep-head .sub{opacity:.92; font-size:.95rem}
.rep-head img.mk{position:absolute; right:22px; bottom:18px; height:44px; opacity:.9; z-index:1}
@media(max-width:640px){ .rep-head img.mk{display:none} }  /* mobile: tránh đè lên nội dung/badge */

.ai-badge{display:inline-flex; gap:6px; align-items:center; font-size:.74rem; font-weight:700;
  background:rgba(255,255,255,.2); padding:4px 11px; border-radius:100px; margin-top:12px}

/* Banner không gian spa trong báo cáo (in cả PDF) */
.rep-banner{position:relative; border-radius:18px; overflow:hidden; margin:18px 0; height:190px; box-shadow:var(--shadow)}
.rep-banner img{width:100%; height:100%; object-fit:cover; display:block}
.rep-banner .cap{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; color:#fff; font-weight:700;
  font-size:.95rem; background:linear-gradient(transparent, rgba(28,16,6,.72))}
.rep-banner .cap i{color:#ffcfa0}
/* Dải 3 ảnh trong khối CTA */
.cta-gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:4px 0 18px}
.cta-gallery img{width:100%; height:120px; object-fit:cover; border-radius:12px; border:2px solid rgba(255,255,255,.35)}
@media(max-width:520px){.cta-gallery img{height:88px}}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:20px 0}
.kpi{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow); border-left:4px solid var(--accent)}
.kpi .lab{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.kpi .v{font-size:1.7rem; font-weight:800; margin-top:3px; line-height:1.1}
.kpi .u{font-size:.82rem; color:var(--soft); font-weight:600}
.kpi small{display:block; color:var(--muted); font-size:.76rem; margin-top:3px}
.kpi.tone-good{border-left-color:var(--good)} .kpi.tone-warn{border-left-color:var(--warn)}
.kpi.tone-bad{border-left-color:var(--bad)} .kpi.tone-info{border-left-color:var(--info)}

.rep-card{background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px 24px; box-shadow:var(--shadow); margin-bottom:18px}
.rep-card > h2{display:flex; align-items:center; gap:10px; font-size:1.18rem; margin:0 0 14px; font-weight:800}
.rep-card > h2 .ic{width:34px; height:34px; border-radius:10px; background:var(--bg-2); color:var(--accent); display:grid; place-items:center; font-size:1.05rem}
.rep-card p{margin:.2rem 0 0; color:var(--txt)}
.lead-note{color:var(--muted)}

.macro-bar{display:flex; height:16px; border-radius:100px; overflow:hidden; margin:14px 0 8px; border:1px solid var(--line)}
.macro-bar > span{display:block}
.macro-p{background:#ef6c3b} .macro-c{background:#f2b134} .macro-f{background:#7c9cf0}
.macro-legend{display:flex; flex-direction:column; gap:8px; font-size:.86rem; color:var(--muted)}
.macro-legend b{color:var(--txt)}
.macro-legend i{width:11px; height:11px; border-radius:3px; display:inline-block; margin-right:6px; vertical-align:middle}
.macro-wrap{display:flex; align-items:center; gap:20px; margin-top:14px; flex-wrap:wrap}
.macro-donut{flex:0 0 auto}
.macro-side{flex:1 1 220px; min-width:200px}

/* Chỉ số trực quan (SVG gauges) */
.chart-svg{display:block; max-width:100%; height:auto}
.viz-card .viz-gauges{display:flex; gap:22px; justify-content:center; flex-wrap:wrap; align-items:flex-start}
.viz-item{text-align:center}
.viz-cap{font-size:.82rem; color:var(--muted); font-weight:600; margin-top:2px}
.viz-timeline{margin-top:8px; border-top:1px dashed var(--line); padding-top:6px}
.meal-ic{color:var(--accent); margin-right:2px}
.wo-ic{color:var(--accent); margin-right:4px}

.menu-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.meal{background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:15px 16px}
.meal .mh{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.meal .mh b{font-size:1rem} .meal .mh .kc{font-size:.8rem; color:var(--accent); font-weight:700}
.meal ul{margin:0; padding-left:18px} .meal li{margin:3px 0; font-size:.9rem}

.week{display:grid; gap:10px}
.wrow{display:grid; grid-template-columns:78px 1fr; gap:14px; padding:12px 14px; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; align-items:start}
.wrow .day{font-weight:800; color:var(--accent); font-size:.9rem}
.wrow .focus{font-weight:700; font-size:.9rem; margin-bottom:2px}
.wrow .plan{font-size:.88rem; color:var(--muted)}

.tips li{margin:8px 0}
.warn-box{background:rgba(180,83,9,.10); border:1px solid rgba(180,83,9,.35);
  border-radius:14px; padding:14px 18px}
.warn-box li{margin:6px 0; font-size:.9rem}

.cta-card{background:radial-gradient(120% 130% at 90% 10%, #ffb066, var(--accent) 60%, #d1600a); color:#fff; text-align:center; border:0}
.cta-card h2{justify-content:center; color:#fff}
.cta-card h2 .ic{background:rgba(255,255,255,.2); color:#fff}
.cta-card p{color:#fff; opacity:.95; max-width:560px; margin:0 auto 18px}
.cta-card .svc{list-style:none; padding:0; margin:0 0 18px; display:inline-block; text-align:left}
.cta-card .svc li{margin:7px 0; padding-left:26px; position:relative}
.cta-card .svc li::before{content:"✓"; position:absolute; left:0; font-weight:800}
.cta-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

.rep-actions{position:sticky; bottom:0; z-index:20; background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:12px 0; margin-top:10px}
.rep-actions .container{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; align-items:center}

/* ── Sơ đồ cơ thể (body map) ─────────────────────────────────────────────── */
.bm-top{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.bm-shape,.bm-sym,.bm-src{display:inline-flex; align-items:center; gap:6px; font-size:.8rem; font-weight:700;
  padding:5px 12px; border-radius:100px; background:var(--bg-2); border:1px solid var(--line); color:var(--txt)}
.bm-src{color:var(--soft)} .bm-src.on{color:var(--accent); border-color:rgba(236,119,0,.40); background:rgba(236,119,0,.10)}
.bm-grid{display:grid; grid-template-columns:minmax(220px,1fr) 1.3fr; gap:20px; align-items:start}
@media(max-width:640px){.bm-grid{grid-template-columns:1fr}}
.bm-figure{text-align:center}
.bm-photo{margin:0 0 10px}
.bm-photo img{max-height:150px; border-radius:12px; border:1px solid var(--line); object-fit:cover}
.bm-photo span{display:block; font-size:.72rem; color:var(--muted); margin-top:4px}
.bm-legend{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; font-size:.74rem; color:var(--muted); margin-top:6px}
.bm-legend .dot,.bm-region .dot{width:11px; height:11px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:5px}

/* Màu rating dùng chung cho SVG + chấm + chip */
.dot.r-good{background:var(--good)} .dot.r-watch{background:var(--warn)} .dot.r-priority{background:var(--accent)} .dot.r-na{background:#c7bfb4}
.bf{width:100%; max-width:300px; height:auto}
.bf .limb{stroke:rgba(90,60,30,.14); stroke-width:1.5; transition:fill .2s}
.bf .band{transition:fill .2s}
.bf .bf-skin{fill:#e9dccb; stroke:rgba(90,60,30,.14); stroke-width:1.5}
.bf .bf-outline{fill:none; stroke:rgba(110,74,38,.28); stroke-width:2; stroke-linejoin:round}
.bf .r-good{fill:#3fae6b} .bf .r-watch{fill:#e6a417} .bf .r-priority{fill:var(--accent)} .bf .r-na{fill:#dcd3c6}
[data-theme="dark"] .bf .bf-skin{fill:#3a3128} [data-theme="dark"] .bf .r-na{fill:#4a4238}
[data-theme="dark"] .bf .bf-outline{stroke:rgba(255,220,180,.22)} [data-theme="dark"] .bf .limb{stroke:rgba(255,220,180,.12)}
.bf-callout line{stroke:var(--soft); stroke-width:1.2; stroke-dasharray:3 3}
.bf-callout rect{fill:var(--panel); stroke:var(--line); stroke-width:1}
.bf-c-lab{fill:var(--muted); font-size:8.5px; font-weight:600; font-family:'Be Vietnam Pro',system-ui,sans-serif}
.bf-c-val{fill:var(--accent); font-size:12px; font-weight:800; font-family:'Be Vietnam Pro',system-ui,sans-serif}

.bm-regions{display:flex; flex-direction:column; gap:9px}
.bm-overall{margin:0 0 4px; color:var(--txt); font-size:.92rem}
.bm-region{background:var(--bg-2); border:1px solid var(--line); border-radius:11px; padding:9px 12px}
.bm-r-head{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.bm-r-head b{font-size:.9rem}
.bm-metric{font-size:.72rem; color:var(--muted); font-weight:600}
.bm-chip{margin-left:auto; font-size:.68rem; font-weight:800; padding:2px 9px; border-radius:100px; color:#fff}
.bm-chip.r-good{background:var(--good)} .bm-chip.r-watch{background:var(--warn)} .bm-chip.r-priority{background:var(--accent)} .bm-chip.r-na{background:#a99e8f}
.bm-r-cmt{font-size:.83rem; color:var(--muted); margin-top:3px}
.bm-hint{font-size:.8rem; color:var(--accent); margin:6px 0 0}
.bm-note{font-size:.72rem; color:var(--soft); margin:12px 0 0}
/* Vùng khách muốn giảm */
.bm-goal{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0 0 12px; font-size:.86rem; color:var(--txt)}
.bm-goal i{color:var(--accent)}
.goal-chip{display:inline-block; font-size:.76rem; font-weight:700; color:#fff; background:var(--accent); padding:2px 10px; border-radius:100px}
.goal-badge{display:inline-flex; align-items:center; gap:3px; font-size:.66rem; font-weight:800; color:var(--accent);
  border:1px solid var(--accent); border-radius:100px; padding:1px 7px; margin-left:2px}
.bm-region.is-goal{border-color:rgba(236,119,0,.45); background:rgba(236,119,0,.06)}
.bm-ex{display:inline-block; margin-left:8px; font-size:.76rem; font-weight:700; color:var(--accent); white-space:nowrap}

/* Tiến trình */
.prog-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:6px}
.prog-item{background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px}
.prog-item .pl{font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
.prog-item .pv{font-size:1.1rem; margin:3px 0}
.prog-item .pd{font-size:.82rem; font-weight:800; color:var(--muted)}
.prog-item .pd.good{color:var(--good)} .prog-item .pd.bad{color:var(--bad)}
.prog-msg{margin:12px 0 0; font-size:.88rem; color:var(--good); font-weight:600}
.prog-msg i{margin-right:5px}

.disclaimer{font-size:.78rem; color:var(--soft); text-align:center; margin:18px auto 0; max-width:640px}

/* Bố cục GỌN khi xuất PDF bằng html2pdf (thêm/bỏ class .pdf-mode lúc chụp) —
   giúp chia trang đẹp, ít khoảng trắng, giống bản in. */
.pdf-mode{max-width:100% !important}
.pdf-mode .rep-card{margin-bottom:10px; padding:14px 16px}
.pdf-mode .rep-head{padding:16px 18px}
.pdf-mode .menu-grid{grid-template-columns:1fr 1fr; gap:9px}
.pdf-mode .week{grid-template-columns:1fr 1fr; gap:9px}
.pdf-mode .bm-grid{grid-template-columns:.85fr 1.15fr; gap:14px}
.pdf-mode .bm-figure .bf{max-width:210px}
.pdf-mode .kpis{gap:8px}
.pdf-mode .rep-brand-info,.pdf-mode .rep-brand-note{display:none}  /* liên hệ đã ở footer mỗi trang */

/* Dải thương hiệu cuối báo cáo (in cả PDF) */
.rep-brand{text-align:center; margin:26px auto 0; padding:22px 18px 6px; border-top:1px solid var(--line)}
.rep-brand img{height:66px; width:auto; margin-bottom:12px}
.rep-brand-info{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; color:var(--muted); font-size:.9rem; font-weight:600}
.rep-brand-info i{color:var(--accent)}
.rep-brand-note{color:var(--soft); font-size:.76rem; margin-top:8px}

/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-wrap{max-width:1200px; margin:0 auto; padding:20px 18px 60px}
.table{width:100%; border-collapse:collapse; font-size:.88rem; background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.table th{background:var(--bg-2); text-align:left; padding:10px 12px; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); white-space:nowrap}
.table td{padding:10px 12px; border-top:1px solid var(--line); vertical-align:middle}
.table tr:hover td{background:var(--bg-2)}
.badge{display:inline-block; padding:2px 9px; border-radius:100px; font-size:.72rem; font-weight:700}
.badge.new{background:#dbeafe; color:#1e40af} .badge.contacted{background:#fef3c7; color:#92400e}
.badge.booked{background:#dcfce7; color:#166534} .badge.done{background:#e5e7eb; color:#374151}
.badge.spam{background:#fee2e2; color:#991b1b}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px}
.toolbar .input{width:auto}

/* ── Dashboard thống kê admin ── */
.stat-kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px}
.stat-kpi{background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow)}
.stat-kpi.accent{border-color:var(--accent); background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),var(--panel))}
.stat-kpi .sk-lab{font-size:.74rem; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); font-weight:600}
.stat-kpi .sk-v{font-size:1.7rem; font-weight:800; line-height:1.15; margin:2px 0}
.stat-kpi .sk-sub{font-size:.76rem; color:var(--soft)}
.chart-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.chart-box{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; box-shadow:var(--shadow)}
.chart-box.wide{grid-column:1/-1}
.cb-h{font-weight:700; font-size:.95rem; margin-bottom:10px; display:flex; align-items:center; gap:8px}
.cb-h i{color:var(--accent)}
.cb-donut{display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:center}
.chart-legend{display:flex; flex-direction:column; gap:6px; font-size:.84rem; color:var(--muted)}
.chart-legend span{display:flex; align-items:center; gap:7px}
.chart-legend b{color:var(--txt)}
.chart-legend i{width:11px; height:11px; border-radius:3px; display:inline-block; flex:0 0 auto}
.chart-empty{color:var(--soft); font-size:.86rem; text-align:center; padding:24px 0}

/* Table bọc báo cáo: header(thead)/footer(tfoot) chỉ hiện khi IN & LẶP mỗi trang,
   trình duyệt TỰ CHỪA CHỖ nên KHÔNG đè lên nội dung (khác position:fixed). */
.rep-table{width:100%; border-collapse:collapse}
.rep-table > tbody > tr > td{padding:0}
.rep-table > thead, .rep-table > tfoot{display:none}   /* ẩn trên màn hình */
.print-header,.print-footer{text-align:center}

@media print{
  @page{ size:A4; margin:9mm; }
  .rep-table > thead{display:table-header-group}        /* lặp đầu mỗi trang */
  .rep-table > tfoot{display:table-footer-group}        /* lặp cuối mỗi trang */
  .rep-table > thead > tr > td, .rep-table > tfoot > tr > td{padding:0}
  .print-header{padding:0 0 4mm}
  .print-header img{height:22px; width:auto; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .print-footer{padding:4mm 0 0; color:#8a7a68; line-height:1.4;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .print-footer .pf-1{font-size:8.5pt; font-weight:700; color:#c2410c}
  .print-footer .pf-1 i{color:#ec7700}
  .print-footer .pf-2{font-size:7.5pt; color:#8a7a68}
  /* Chữ liên hệ đã có ở footer → ẩn phần trùng trong dải logo cuối, giữ lại logo. */
  .rep-brand-info,.rep-brand-note{display:none !important}
  .no-print{display:none !important}
  html,body{background:#fff !important; color:#111 !important; font-size:11.5px}
  .container{max-width:100%; padding:0}
  .report{padding:0; max-width:100%; margin:0}

  /* MỖI CARD GIỮ NGUYÊN VẸN — không cắt đôi; card nào không đủ chỗ ở cuối trang
     thì dời NGUYÊN sang trang sau. (Đã bỏ lệnh ép-trang nên không còn trang trắng.) */
  .rep-card{box-shadow:none !important; border-color:#ece2d6 !important;
    break-inside:avoid; page-break-inside:avoid; margin:0 0 8px; padding:12px 14px}
  .kpi,.meal,.wrow,.warn-box,.rep-brand,.macro-legend,.viz-item,.macro-wrap{break-inside:avoid; page-break-inside:avoid}
  /* Gauge SVG giữ màu khi in; xếp gọn ngang. */
  .chart-svg{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  .viz-card .viz-gauges{gap:16px}
  .viz-item .chart-svg{max-height:118px}
  .macro-wrap{gap:14px}

  /* Tiêu đề luôn dính nội dung ngay dưới, không mồ côi cuối trang. */
  .rep-card>h2{font-size:1rem; margin:0 0 8px; break-after:avoid; page-break-after:avoid}
  .rep-card>h2 .ic{width:26px; height:26px; font-size:.9rem}
  .rep-card p{margin:0}

  /* Màu nền/gradient vẫn in ra. */
  .rep-head,.cta-card,.kpi,.macro-bar>span,.bmi-bar{
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important;}

  /* Header + KPI gọn lại. */
  .rep-head{padding:15px 18px; margin-bottom:8px}
  .rep-head h1{font-size:1.3rem}
  .rep-head .mk{height:34px}
  .kpis{gap:7px; margin:9px 0}
  .kpi{padding:9px 12px} .kpi .v{font-size:1.28rem}

  /* Lưới thực đơn & lịch tập gọn 2 cột → mỗi khối thấp, ít khoảng trắng. */
  .menu-grid{grid-template-columns:1fr 1fr; gap:8px}
  .meal{padding:9px 11px}
  .week{grid-template-columns:1fr 1fr; gap:8px}
  .wrow{padding:9px 11px; grid-template-columns:64px 1fr}
  .tips li{margin:4px 0}

  /* Ảnh không gian spa trong PDF: giữ nguyên khối, gọn chiều cao. */
  .rep-banner{height:112px; margin:8px 0; break-inside:avoid; page-break-inside:avoid}
  .rep-banner .cap{font-size:.82rem; padding:9px 14px}
  .cta-gallery{gap:8px; margin:2px 0 10px; break-inside:avoid; page-break-inside:avoid}
  .cta-gallery img{height:64px; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important}
  /* Cụm cuối (Lịch tập→CTA→thương hiệu) dồn gọn cho vừa 1 trang. */
  .cta-card{padding:12px 14px} .cta-card .svc li{margin:4px 0}
  .rep-brand{margin-top:10px; padding-top:12px} .rep-brand img{height:44px; margin-bottom:8px}
  .warn-box li{margin:3px 0}

  /* MỌI phần CHẢY LIỀN, lấp đầy trang; chỉ đẩy sang trang khi một KHỐI NHỎ
     (hình, từng vùng, bữa ăn, ngày tập…) không còn đủ chỗ. KHÔNG ép sang trang,
     KHÔNG giữ nguyên cả card lớn (để không bỏ trống trang trước). */
  .bm-grid{grid-template-columns:.85fr 1.15fr; gap:14px}   /* 2 cột như màn hình */
  .bm-figure .bf{max-width:200px}
  .bm-region{break-inside:avoid; page-break-inside:avoid; padding:6px 10px}
  .bm-r-cmt{font-size:.8rem}
  .bf .limb,.bf .band,.bf .bf-skin,.bf-callout rect,.bf-c-val,.bf-c-lab,.bm-chip,.dot,
  .bm-shape,.bm-sym,.bm-src{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important}
  .bm-photo img{max-height:110px}
  .bm-hint{display:none !important}

  .cta-actions{display:none !important}        /* ẩn nút bấm, giữ nội dung + hotline */
  .disclaimer{display:none !important}         /* trùng với dòng miễn trừ ở dải thương hiệu */
  .cta-card{padding:14px 16px}
  .disclaimer{margin:10px auto 0}
  .rep-brand{margin-top:12px; padding-top:14px}
  .rep-brand img{height:52px}
  a[href]{text-decoration:none; color:inherit}
}