:root{
  --bg:#fcfaf8;
  --panel:#ffffff;
  --line:#eadfd8;
  --ink:#4f3d35;
  --muted:#7e6a62;
  --brown:#7d5142;
  --brown-2:#9a6a56;
  --soft:#f6efea;
  --gold:#d3b295;
  --success:#2c8b57;
  --warning:#b26a1c;
  --shadow:0 18px 42px rgba(84,59,48,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(180deg,#fcfaf8 0%,#f8f0eb 100%);color:var(--ink)}
a{text-decoration:none;color:inherit}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(100%,1120px);margin:0 auto;padding:0 16px}
.hidden{display:none!important}
.eyebrow{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--brown);text-transform:uppercase}
.muted{color:var(--muted)}
.tiny-note{display:block;color:var(--muted);font-size:12px;line-height:1.45}
.topbar{position:sticky;top:0;z-index:20;background:rgba(252,250,248,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(125,81,66,.08)}
.topbar-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.brand{display:flex;flex-direction:column;line-height:1}
.brand-mark{font-weight:900;letter-spacing:.04em;font-size:19px;color:var(--brown)}
.brand-sub{font-size:10px;font-weight:800;letter-spacing:.18em;color:var(--muted)}
.back-link{font-size:13px;font-weight:700;color:var(--brown)}
.gate-section{padding:34px 0 24px}
.gate-wrap{display:grid;place-items:center;min-height:calc(100dvh - 84px)}
.gate-card,.content-card,.welcome-card,.hero-summary,.salon-preview-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow)}
.gate-card{width:min(100%,620px);border-radius:28px;padding:28px 24px;text-align:left}
.lock-badge{width:58px;height:58px;display:grid;place-items:center;background:var(--soft);border-radius:18px;font-size:28px;margin-bottom:14px}
.gate-card h1{margin:0 0 10px;font-size:31px;line-height:1.06}
.lead{margin:0 0 16px;color:var(--muted);line-height:1.55}
.field-label{display:block;margin:8px 0 8px;font-size:13px;font-weight:800;color:var(--brown)}
.gate-row{display:flex;gap:10px;flex-wrap:wrap}
input{height:48px;border:1px solid var(--line);border-radius:16px;background:#fff;padding:0 14px;color:var(--ink);min-width:0;flex:1}
input:focus{outline:none;border-color:rgba(125,81,66,.4);box-shadow:0 0 0 4px rgba(125,81,66,.07)}
.btn{height:46px;border:none;border-radius:16px;padding:0 16px;font-weight:800}
.btn-primary{background:linear-gradient(135deg,var(--brown) 0%,var(--brown-2) 100%);color:#fff}
.btn-light{background:var(--soft);color:var(--brown)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--brown)}
.gate-msg{min-height:18px;margin:10px 0 6px;color:var(--warning);font-size:13px}
.dashboard{padding:18px 0 30px}
.welcome-card{border-radius:26px;padding:20px 20px 18px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.welcome-card h2{margin:0 0 4px;font-size:28px;line-height:1.08}
.header-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#f2e4da;color:var(--brown);font-size:12px;font-weight:800}
.status-pill.warm{background:#f9ead6;color:#9a5e10}
.hero-summary{margin-top:14px;border-radius:28px;padding:20px}
.summary-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.summary-head h3{margin:0;font-size:26px;line-height:1.08}
.formula-mini{padding:10px 12px;border-radius:14px;background:var(--soft);font-size:12px;font-weight:800;color:var(--brown)}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.summary-box{padding:16px;border-radius:22px;border:1px solid var(--line);background:#fff}
.summary-box small{display:block;margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:700}
.summary-box strong{display:block;font-size:26px;line-height:1.05}
.summary-box span{display:block;margin-top:8px;color:var(--muted);font-size:12px;line-height:1.4}
.summary-box-main{background:linear-gradient(135deg,#fffaf6 0%,#f7eee8 100%);border-color:#e5d0c4}
.quick-nav{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:16px}
.quick-item{height:46px;border-radius:16px;border:1px solid var(--line);background:#fff;color:var(--brown);font-size:13px;font-weight:800;padding:0 10px}
.quick-item.active{background:var(--brown);color:#fff;border-color:var(--brown)}
.content-card{margin-top:14px;border-radius:28px;padding:18px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.section-head h3{margin:0;font-size:24px;line-height:1.08}
.helper-chip{display:inline-flex;padding:9px 12px;border-radius:999px;background:var(--soft);font-size:12px;font-weight:800;color:var(--brown)}
.product-lines{display:grid;gap:12px}
.product-line{display:grid;grid-template-columns:minmax(0,1.25fr) 100px 100px 110px 110px;gap:10px;align-items:center;padding:14px;border-radius:22px;border:1px solid var(--line);background:#fff}
.product-info strong{display:block;font-size:16px}
.product-info small{display:block;margin-top:6px;color:var(--muted);line-height:1.4}
.mini-box{padding:10px 12px;border-radius:14px;background:var(--soft);text-align:center}
.mini-box small{display:block;color:var(--muted);font-size:11px;font-weight:700}
.mini-box b{display:block;margin-top:6px;font-size:15px}
.qty-input{width:100%;text-align:center}
.line-result{padding:10px 12px;border-radius:14px;background:#fcf7f4;text-align:right}
.line-result small{display:block;color:var(--muted);font-size:11px;font-weight:700}
.line-result b{display:block;margin-top:6px;font-size:15px}
.calc-note,.program-note,.footer-note{margin-top:14px;padding:14px 16px;border-radius:18px;background:var(--soft);color:var(--muted);font-size:13px;line-height:1.55}
.stock-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.stock-card{padding:16px;border-radius:22px;border:1px solid var(--line);background:#fff}
.stock-card strong{display:block;margin-bottom:10px;font-size:17px}
.stock-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-top:1px dashed #ebdfd7}
.stock-row:first-of-type{border-top:none;padding-top:0}
.stock-row span{color:var(--muted)}
.quarter-panel{display:grid;gap:16px}
.progress-summary strong{display:block;font-size:24px}
.progress-summary span{display:block;margin-top:6px;color:var(--muted)}
.progress-bar{height:14px;border-radius:999px;background:#efe5de;overflow:hidden}
.progress-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brown) 0%,#bc8b73 100%);border-radius:999px;transition:width .25s ease}
.milestones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.milestone{padding:14px;border-radius:20px;background:#fff;border:1px solid var(--line);text-align:center;color:var(--muted)}
.milestone.active{background:#fff8f2;border-color:#e0cabd;color:var(--brown)}
.milestone b{display:block;font-size:18px;color:inherit}
.program-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;padding:18px;border-radius:22px;border:1px solid var(--line);background:#fff}
.program-card h4{margin:8px 0 8px;font-size:21px}
.bullet-list{margin:10px 0 0;padding-left:18px;color:var(--muted);line-height:1.6}
.program-actions{display:flex;flex-direction:column;gap:10px;min-width:220px}
.reconcile-list,.policy-list{display:grid;gap:12px}
.reconcile-card,.policy-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border-radius:22px;border:1px solid var(--line);background:#fff}
.reconcile-card p,.policy-card p{margin:6px 0 0;color:var(--muted);line-height:1.5}
.reconcile-card.done b{color:var(--success)}
.reconcile-card.pending b{color:var(--warning)}
.policy-card{display:block}
.salon-preview-body{display:grid;place-items:center;min-height:100dvh;background:linear-gradient(180deg,#fcfaf8 0%,#f7eee8 100%);padding:18px}
.salon-preview-main{width:min(100%,820px)}
.salon-preview-card{border-radius:28px;padding:26px}
.salon-preview-card h1{margin:0 0 10px;font-size:33px;line-height:1.06}
.salon-highlight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0}
.salon-highlight{padding:14px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.salon-highlight small{display:block;color:var(--muted);font-size:12px;font-weight:700}
.salon-highlight strong{display:block;margin-top:6px;font-size:16px;line-height:1.4}
.salon-only-card{grid-template-columns:1fr}
@media (max-width:980px){
  .summary-grid{grid-template-columns:repeat(2,1fr)}
  .quick-nav{grid-template-columns:repeat(3,1fr)}
  .product-line{grid-template-columns:minmax(0,1fr) 92px 92px;}
  .product-line .line-result{grid-column:2/4}
  .program-card{grid-template-columns:1fr}
  .program-actions{min-width:0}
}
@media (max-width:720px){
  .welcome-card,.summary-head,.section-head{display:grid}
  .stock-grid,.salon-highlight-grid{grid-template-columns:1fr}
}
@media (max-width:620px){
  body{font-size:15px}
  .topbar-inner{min-height:58px}
  .brand-mark{font-size:18px}
  .gate-card{padding:22px 18px;border-radius:24px}
  .gate-card h1{font-size:28px}
  .gate-row{display:grid;grid-template-columns:1fr}
  .welcome-card{padding:18px 16px}
  .welcome-card h2{font-size:24px}
  .hero-summary,.content-card{padding:16px}
  .summary-head h3,.section-head h3{font-size:22px}
  .summary-grid{grid-template-columns:1fr 1fr}
  .summary-box strong{font-size:22px}
  .quick-nav{grid-template-columns:1fr 1fr;gap:8px}
  .quick-item{height:44px;font-size:12.5px}
  .product-line{grid-template-columns:1fr;gap:8px;padding:14px}
  .mini-box,.line-result{text-align:left}
  .program-card h4{font-size:19px}
  .salon-preview-card{padding:22px 18px;border-radius:24px}
  .salon-preview-card h1{font-size:29px}
}


/* V2.8.2 compact polish */
.hero-summary{padding:16px 16px 14px}
.summary-head{margin-bottom:10px}
.summary-head h3{font-size:22px}
.formula-mini{padding:8px 12px;font-size:11.5px}
.summary-grid{gap:10px}
.summary-box{padding:13px 14px;border-radius:20px}
.summary-box small{margin-bottom:6px;font-size:11.5px}
.summary-box strong{font-size:22px}
.summary-box span{margin-top:6px;font-size:11.5px}
#commission{margin-top:12px}
.quick-nav{margin-top:12px}
.quick-item{height:44px}
.content-card{padding:16px}
.section-head{margin-bottom:12px}
.section-head h3{font-size:22px}
.calc-note{margin-top:12px}
@media (max-width:620px){
  .hero-summary{padding:14px}
  .summary-head h3{font-size:19px}
  .summary-grid{grid-template-columns:1fr 1fr;gap:8px}
  .summary-box{padding:12px}
  .summary-box strong{font-size:18px}
  .summary-box span{font-size:11px;line-height:1.35}
  .section-head h3{font-size:20px}
}


/* =========================================================
   V2.8.3 — COMPACT ACTION FIRST
   Mục tiêu: mở trên iPhone thấy nhanh tổng quan + sản phẩm đầu tiên để nhập.
   ========================================================= */
.dashboard{padding-top:10px}
.welcome-compact{
  min-height:64px;
  padding:10px 14px;
  border-radius:20px;
  align-items:center;
}
.welcome-identity{display:flex;align-items:center;gap:10px;min-width:0}
.partner-dot{
  width:38px;height:38px;flex:0 0 38px;border-radius:13px;
  display:grid;place-items:center;background:var(--soft);color:var(--brown);
  font-weight:900;font-size:16px;border:1px solid var(--line)
}
.welcome-compact h2{margin:0 0 2px;font-size:19px;line-height:1.05}
.welcome-compact .muted{margin:0;font-size:11.5px;line-height:1.35}
.preview-mini{font-size:10px;font-weight:800;color:var(--muted);letter-spacing:.04em}
.btn-compact{height:36px;padding:0 12px;border-radius:13px;font-size:12px}

.hero-summary{margin-top:8px;padding:12px;border-radius:22px}
.summary-head{margin-bottom:8px;align-items:center}
.summary-head .eyebrow{margin-bottom:3px;font-size:9.5px}
.summary-head h3{font-size:19px}
.formula-mini{padding:7px 9px;border-radius:12px;font-size:10.5px;white-space:nowrap}
.summary-grid{gap:7px}
.summary-box{padding:10px 11px;border-radius:17px;min-height:98px}
.summary-box small{font-size:10.5px;margin-bottom:4px}
.summary-box strong{font-size:19px}
.summary-box span{font-size:10.5px;line-height:1.28;margin-top:5px}

#commission{margin-top:8px;padding:13px;border-radius:22px}
#commission .section-head{margin-bottom:9px}
#commission .eyebrow{font-size:9.5px;margin-bottom:3px}
#commission .section-head h3{font-size:18px;line-height:1.08}
#commission .helper-chip{padding:7px 9px;font-size:10.5px}
.product-lines{gap:8px}
.product-line{padding:11px;border-radius:18px}
.qty-wrap{display:block;min-width:0}
.qty-wrap small{display:block;margin-bottom:4px;color:var(--muted);font-size:10.5px;font-weight:700}
.qty-wrap .qty-input{height:42px;border-radius:13px;font-weight:800}
.line-result{border-radius:13px}
.calc-note{padding:10px 12px;font-size:11px;line-height:1.4;margin-top:9px}
.quick-nav{margin-top:9px}

@media(max-width:720px){
  .welcome-card.welcome-compact{display:flex}
  .summary-head{display:flex}
}

@media(max-width:620px){
  .container{padding-left:14px;padding-right:14px}
  .dashboard{padding-top:7px}
  .welcome-compact{padding:8px 10px;border-radius:18px;gap:8px}
  .partner-dot{width:34px;height:34px;flex-basis:34px;border-radius:11px;font-size:14px}
  .welcome-compact h2{font-size:17px}
  .welcome-compact .muted{font-size:10.5px}
  .header-actions{gap:7px;flex-wrap:nowrap}
  .preview-mini{font-size:9px}
  .btn-compact{height:32px;padding:0 10px;font-size:11px}

  .hero-summary{margin-top:7px;padding:10px}
  .summary-head{gap:8px;margin-bottom:7px}
  .summary-head h3{font-size:17px}
  .formula-mini{font-size:9.5px;padding:6px 7px;white-space:normal;max-width:48%;text-align:center;line-height:1.2}
  .summary-grid{grid-template-columns:1fr 1fr;gap:6px}
  .summary-box{padding:9px 10px;min-height:86px;border-radius:16px}
  .summary-box small{font-size:10px}
  .summary-box strong{font-size:17px}
  .summary-box span{font-size:9.8px;line-height:1.22}

  #commission{margin-top:7px;padding:11px}
  #commission .section-head{display:block;margin-bottom:7px}
  #commission .section-head h3{font-size:17px}
  #commission .helper-chip{display:none}
  .product-lines{gap:7px}
  .product-line{
    grid-template-columns:92px minmax(0,1fr);
    gap:7px 9px;
    padding:10px;
    border-radius:16px;
  }
  .product-info{grid-column:1/-1}
  .product-info strong{font-size:14px}
  .product-info small{font-size:10.5px;margin-top:3px;line-height:1.3}
  .product-line .mini-box{display:none}
  .qty-wrap{grid-column:1}
  .line-result{grid-column:2;text-align:left;padding:8px 10px}
  .qty-wrap .qty-input{height:39px;font-size:16px;text-align:center}
  .line-result small{font-size:10px}
  .line-result b{font-size:14px;margin-top:4px}
  .calc-note{display:none}

  .quick-nav{grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}
  .quick-item{height:40px;border-radius:14px;font-size:11.5px}
}


/* V2.8.6 admin commission mode */
.product-meta-line{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:12.5px;color:#7a6a62}
.qty-commission-row{display:grid;grid-template-columns:1fr 1.1fr;gap:12px;align-items:end;margin-top:10px}
.qty-block small,.compact-result small{display:block;margin-bottom:8px;color:#7c6b62;font-size:12px}
.stepper{display:flex;align-items:center;border:1px solid #ead8cf;border-radius:18px;overflow:hidden;background:#fff;max-width:190px;height:56px}
.step-btn{width:48px;height:56px;border:0;background:#f7efea;color:#7d5142;font-size:28px;line-height:1;font-weight:700}
.step-btn:active{transform:scale(0.98)}
.stepper .qty-input{width:100%;height:56px;border:0;text-align:center;font-size:22px;font-weight:700;color:#4b3932;background:#fff;padding:0 4px;-moz-appearance:textfield}
.stepper .qty-input::-webkit-outer-spin-button,.stepper .qty-input::-webkit-inner-spin-button{appearance:none;margin:0}
.compact-result{padding:12px 14px;border:1px solid #efe1d8;border-radius:18px;background:#fbf6f2;min-height:56px;display:flex;flex-direction:column;justify-content:center}
.compact-result b{font-size:28px;line-height:1.1;color:#5a4035}
.tiny-note-inline{margin-top:4px;font-size:11.5px;color:#8e7568}
@media (max-width:620px){
  .product-line.compact-product{padding:14px 14px 12px}
  .product-info.compact-head strong{font-size:18px}
  .product-info.compact-head small{font-size:12px}
  .product-meta-line{font-size:11.5px;gap:5px}
  .qty-commission-row{grid-template-columns:1fr;gap:10px}
  .stepper{max-width:100%}
  .compact-result b{font-size:24px}
}


/* V2.8.6 — MOBILE ACTION ROW FIX
   Fix nested commission row being squeezed into the first parent grid column. */
.product-line.compact-product .qty-commission-row{grid-column:1/-1;width:100%;min-width:0}
@media (max-width:620px){
  .product-line.compact-product{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    padding:12px;
  }
  .product-line.compact-product .product-info{grid-column:1/-1}
  .product-line.compact-product .qty-commission-row{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:10px;
    align-items:stretch;
    margin-top:2px;
  }
  .qty-block,.compact-result{min-width:0}
  .qty-block small,.compact-result small{margin-bottom:6px;font-size:11px}
  .stepper{
    width:100%;
    max-width:none;
    height:50px;
    border-radius:15px;
  }
  .step-btn{width:42px;min-width:42px;height:50px;font-size:24px}
  .stepper .qty-input{height:50px;min-width:0;font-size:20px}
  .compact-result{
    min-height:50px;
    padding:9px 11px;
    border-radius:15px;
    justify-content:center;
  }
  .compact-result b{font-size:22px;white-space:nowrap}
  .tiny-note-inline{font-size:10px;line-height:1.25}
  .product-info.compact-head strong{font-size:17px}
  .product-info.compact-head small{font-size:11.5px}
  .product-meta-line{font-size:11px;line-height:1.35;margin-top:4px}
}
@media (max-width:360px){
  .product-line.compact-product .qty-commission-row{grid-template-columns:1fr;gap:8px}
  .compact-result{min-height:54px}
}


/* =========================================================
   V2.8.6 — COMMISSION CARD POLISH
   Gọn hơn, bỏ chữ thừa, số lượng luôn chuẩn 0/1/2... không 03/012.
   ========================================================= */
.product-line.compact-product{padding:10px 12px}
.product-info.compact-head strong{font-size:16px;line-height:1.15}
.product-info.compact-head small{margin-top:3px;font-size:11px;line-height:1.3}
.product-meta-line{margin-top:4px;font-size:11.5px;font-weight:700;color:#806b61}
.qty-commission-row{margin-top:7px;gap:9px}
.qty-block small,.compact-result small{margin-bottom:5px;font-size:10.5px}
.stepper{height:48px;border-radius:14px}
.step-btn{height:48px;width:40px;min-width:40px;font-size:23px}
.stepper .qty-input{height:48px;font-size:20px;line-height:1;padding:0 2px}
.compact-result{min-height:48px;padding:8px 11px;border-radius:14px}
.compact-result b{font-size:22px}
.tiny-note-inline{margin-top:3px;font-size:9.8px}

@media(max-width:620px){
  .product-line.compact-product{padding:10px 11px 9px}
  .product-info.compact-head strong{font-size:16px}
  .product-info.compact-head small{font-size:10.8px}
  .product-meta-line{font-size:10.8px;margin-top:3px}
  .product-line.compact-product .qty-commission-row{gap:8px;margin-top:1px}
  .qty-block small,.compact-result small{margin-bottom:4px;font-size:10px}
  .stepper{height:46px;border-radius:13px}
  .step-btn{height:46px;width:38px;min-width:38px;font-size:22px}
  .stepper .qty-input{height:46px;font-size:19px}
  .compact-result{min-height:46px;padding:7px 10px;border-radius:13px}
  .compact-result b{font-size:21px}
  .tiny-note-inline{font-size:9.4px}
}


/* =========================================================
   BIO.ONE NPP Preview V2.8.7 — Partner Flow
   Thưởng quý • Salon • Đối soát • Chính sách tháng
   ========================================================= */
.formula-mini{white-space:nowrap!important;max-width:none!important}
.summary-box strong,.compact-result b,.reconcile-numbers b{font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.compact-result b{font-size:clamp(20px,5vw,28px)!important;white-space:nowrap}
.quick-salon{position:relative}
.quick-salon em{display:inline-flex;margin-left:4px;padding:2px 5px;border-radius:999px;background:#f5ded0;color:#925439;font-size:8px;font-style:normal;vertical-align:middle}
.quick-item.active em{background:rgba(255,255,255,.2);color:#fff}

/* Quarter */
.quarter-hero{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px;border-radius:22px;background:linear-gradient(135deg,#fffaf6,#f7eee8);border:1px solid #e8d7cd}
.quarter-number small{display:block;color:var(--muted);font-size:11px;font-weight:800}
.quarter-number strong{display:block;margin-top:5px;font-size:28px;letter-spacing:-.035em}
.quarter-number span{display:block;margin-top:5px;color:var(--muted);font-size:13px}
.quarter-status{flex:0 0 auto;padding:9px 11px;border-radius:999px;background:#f6e7dc;color:var(--brown);font-size:10px;font-weight:900;letter-spacing:.05em}
.quarter-status.achieved{background:#e5f4eb;color:#26784a}
.quarter-progress{margin:14px 0 10px;height:12px}
.quarter-rule{padding:11px 13px;border-radius:16px;background:var(--soft);color:var(--muted);font-size:12px;line-height:1.45}
.milestone-grid{margin-top:12px}
.milestone{position:relative;display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-align:left;padding:13px!important}
.milestone small{font-size:9px;font-weight:900;letter-spacing:.08em}
.milestone b{font-size:18px!important}
.milestone span{font-size:11px;line-height:1.35}
.milestone i{margin-top:3px;font-style:normal;font-size:11px;font-weight:800;color:#9a7666}
.milestone.active i{color:var(--success)}
.milestone.featured{background:#fffaf6}

/* Salon program */
.salon-live-card{padding:17px;border-radius:23px;border:1px solid var(--line);background:linear-gradient(135deg,#fff,#fffaf6);box-shadow:0 10px 28px rgba(84,59,48,.045)}
.salon-live-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.program-date{font-size:11px;font-weight:800;color:var(--muted)}
.salon-live-card h4{margin:12px 0 6px;font-size:22px}
.salon-summary{margin:0;color:var(--muted);line-height:1.5}
.salon-benefit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:13px}
.salon-benefit-grid>div{padding:12px;border-radius:17px;background:#fff;border:1px solid var(--line)}
.salon-benefit-grid small{display:block;color:var(--muted);font-size:10.5px;font-weight:800}
.salon-benefit-grid strong{display:block;margin-top:5px;font-size:13px;line-height:1.4}
.salon-action-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}
.share-note{margin-top:8px}
.privacy-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.privacy-split>div{padding:12px;border-radius:18px;border:1px solid var(--line)}
.privacy-split b{display:block;font-size:12px;margin-bottom:5px}
.privacy-split span{display:block;color:var(--muted);font-size:11px;line-height:1.4}
.privacy-yes{background:#fbfffc}.privacy-no{background:#fffafa}

/* Reconcile */
.reconcile-rich{display:block!important;padding:15px!important}
.reconcile-main{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.reconcile-main>strong{font-size:17px}.reconcile-main>small{color:var(--muted);font-size:11px}
.status-pill.success{background:#e5f4eb;color:#26784a}
.pending-pill{background:#fff0dc;color:#9c651a}
.reconcile-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.reconcile-numbers span{padding:10px;border-radius:15px;background:var(--soft)}
.reconcile-numbers small{display:block;color:var(--muted);font-size:10px;font-weight:700}
.reconcile-numbers b{display:block;margin-top:5px;font-size:15px;white-space:nowrap}
.current-period{background:#fffaf6!important}

/* Policy */
.policy-month-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:19px;background:var(--soft);margin-bottom:11px}
.policy-month-head small{display:block;color:var(--muted);font-size:10px;font-weight:800}.policy-month-head strong{display:block;margin-top:3px;font-size:15px}
.policy-accordion .policy-card{padding:0!important;overflow:hidden}
.policy-card summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px}
.policy-card summary::-webkit-details-marker{display:none}
.policy-card summary span{display:flex;align-items:center;gap:9px;min-width:0}
.policy-card summary b{font-size:14px}.policy-card summary em{font-style:normal;font-size:9px;font-weight:900;color:var(--brown);white-space:nowrap}
.policy-dot{width:8px;height:8px;border-radius:50%;background:#b9a39a;flex:none}.policy-dot.new{background:#d7794d}.policy-dot.salon{background:#6a9a7c}
.policy-content{padding:0 14px 14px;color:var(--muted);font-size:12.5px;line-height:1.55;border-top:1px dashed #ecdfd7;padding-top:11px}

/* Public Salon */
.salon-public-brand{font-size:22px;font-weight:900;letter-spacing:.035em;color:var(--brown);margin-bottom:16px}.salon-public-brand span{display:block;font-size:9px;letter-spacing:.18em;color:var(--muted)}
.salon-source{margin:13px 0;padding:11px 13px;border-radius:16px;background:#f7efe9;color:var(--brown);font-size:12px;font-weight:800}
.salon-privacy-note{margin-top:13px;text-align:center;color:var(--muted);font-size:11px;line-height:1.45}

@media(max-width:620px){
  .formula-mini{font-size:9.5px!important;padding:6px 8px!important}
  .quarter-hero{padding:13px}.quarter-number strong{font-size:23px}.quarter-status{font-size:9px;padding:7px 8px}
  .milestone-grid{grid-template-columns:repeat(3,1fr)!important;gap:7px!important}.milestone{padding:10px!important}.milestone b{font-size:15px!important}.milestone span,.milestone i{font-size:9.5px}
  .salon-benefit-grid,.privacy-split{grid-template-columns:1fr}.salon-action-row{grid-template-columns:1fr 1fr}.salon-action-row .btn{padding:0 9px;font-size:12px}
  .reconcile-numbers{gap:6px}.reconcile-numbers span{padding:9px 7px}.reconcile-numbers b{font-size:12.5px;letter-spacing:-.045em}
  .policy-card summary{padding:13px 12px}.policy-card summary b{font-size:13px}.policy-content{padding:10px 12px 12px;font-size:12px}
}
@media(max-width:370px){
  .milestone-grid{grid-template-columns:1fr!important}.milestone{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px}.milestone span{display:none}
  .salon-action-row{grid-template-columns:1fr}
  .reconcile-numbers{grid-template-columns:1fr}.reconcile-numbers span{display:flex;justify-content:space-between;align-items:center}.reconcile-numbers b{margin-top:0}
}


/* V2.9.0 — synchronized NPP monthly + quarterly policy */
.preview-policy-switch{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 2px 0;padding:9px 11px;border-radius:16px;background:#f7efe9;border:1px dashed #e3d2c8}
.preview-policy-switch>span{font-size:10px;font-weight:900;letter-spacing:.04em;color:#81685d;margin-right:2px}
.policy-mode-btn{height:32px;padding:0 11px;border:1px solid #dfcfc6;border-radius:999px;background:#fff;color:#7d5142;font-size:11px;font-weight:800}
.policy-mode-btn.active{background:#7d5142;color:#fff;border-color:#7d5142}
@media(max-width:620px){
  .preview-policy-switch{margin-top:8px;padding:8px 9px;gap:6px}
  .preview-policy-switch>span{width:100%;font-size:9px}
  .policy-mode-btn{height:30px;font-size:10.5px;padding:0 10px}
}


/* =========================================================
   V2.9.0 — FULL PRODUCT GROUPS
   Chăm sóc • Uốn/Duỗi • Tạo kiểu, dùng chung hoa hồng/ký gửi/quý.
   ========================================================= */
.product-group-tabs{
  display:flex;gap:7px;overflow-x:auto;padding:1px 0 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.product-group-tabs::-webkit-scrollbar{display:none}
.product-group-btn{
  flex:0 0 auto;height:36px;padding:0 12px;border-radius:999px;
  border:1px solid #e2d2c9;background:#fff;color:#7d5142;
  font-size:11.5px;font-weight:800;white-space:nowrap;
}
.product-group-btn span{
  display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;
  padding:0 5px;border-radius:999px;background:#f5ece7;font-size:9px;color:#8b6f62;
}
.product-group-btn.active{background:#7d5142;color:#fff;border-color:#7d5142}
.product-group-btn.active span{background:rgba(255,255,255,.18);color:#fff}
#stockGrid{margin-top:2px}
@media(max-width:620px){
  .product-group-tabs{margin-left:-1px;margin-right:-1px;padding-bottom:8px}
  .product-group-btn{height:34px;padding:0 11px;font-size:10.8px}
}


/* V2.9.0 — Dual commission mode */
.policy-mode-explain{margin:10px 0 0;padding:12px 14px;border:1px solid #ead8cf;border-radius:16px;background:#fffaf7;display:flex;gap:8px;align-items:flex-start;flex-direction:column;color:#6f584e}
.policy-mode-explain b{font-size:14px;color:#7d5142}
.policy-mode-explain span{font-size:12.5px;line-height:1.45;color:#806f67}
@media(max-width:620px){.preview-policy-switch{gap:6px}.policy-mode-btn{font-size:12px;padding:8px 10px}.policy-mode-explain{padding:10px 12px}}