/* STONK compact pricing page v2 */
@font-face{font-family:"TikTok Sans";src:url("/app/fonts/tiktok-sans-vietnamese-standard-normal.woff2") format("woff2");font-display:swap;font-style:normal;font-weight:100 900}
:root{--bg:#f8f7fc;--surface:#fff;--ink:#251c46;--muted:#6f6785;--line:#eae6f3;--primary:#6e4ae8;--primary-dark:#5635c9;--soft:#f2effc;--green:#087f5b;--green-bg:#eaf8f1;--red:#c92a2a;--red-bg:#fff0f0;--blue-bg:#edf3ff;--yellow-bg:#fff9db;--pink-bg:#fbf0f6;--shadow:0 16px 40px rgba(47,35,92,.08);font-family:"Inter",system-ui,-apple-system,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-inline-size:0;background:var(--bg);line-height:1.45}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;z-index:100;top:.5rem;left:.5rem;transform:translateY(-160%);padding:.75rem 1rem;border-radius:.65rem;background:var(--ink);color:#fff}.skip-link:focus{transform:none}
.app-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:68px;padding:10px max(18px,calc((100% - 1320px)/2));border-bottom:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(14px)}.brand{display:flex;min-width:0;align-items:center;gap:10px;color:inherit;text-decoration:none}.brand img{flex:0 0 auto;border-radius:10px;object-fit:contain}.brand span{display:grid;min-width:0;line-height:1.15}.brand strong{font-size:.9rem;letter-spacing:.02em}.brand small{margin-top:3px;color:var(--muted);font-size:.72rem}.account-box{display:flex;flex:0 0 auto;align-items:center;gap:10px;color:var(--muted);font-size:.8rem}
.header-start{display:flex;align-items:center;gap:20px;min-width:0}.platform-switch{display:flex;padding:4px;border:1px solid var(--line);border-radius:12px;background:#faf9fd}.platform-switch a{min-height:40px;padding:10px 16px;border-radius:8px;color:var(--muted);font-size:.76rem;font-weight:850;text-decoration:none;white-space:nowrap}.platform-switch a.active{background:var(--primary);color:#fff}
.workspace{width:min(1320px,calc(100% - 28px));margin:18px auto 44px}.calculator-card,.bulk-card{border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.calculator-card{overflow:hidden}.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:22px 24px 16px}.eyebrow{margin:0 0 4px;color:var(--primary);font-size:.69rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}h1,h2,h3,p{overflow-wrap:anywhere}h1{margin:0;font-size:clamp(1.55rem,3vw,2.15rem);line-height:1.14;letter-spacing:-.025em}.card-heading p:last-child,.premium-bar p,.result-heading p{margin:.35rem 0 0;color:var(--muted);font-size:.86rem}.version-pill,#feeBadge{display:inline-flex;align-items:center;min-height:30px;padding:4px 10px;border-radius:999px;background:var(--soft);color:var(--primary-dark);font-size:.7rem;font-weight:800;white-space:nowrap}
#pricingForm{padding:0 24px}.quick-inputs{display:grid;grid-template-columns:minmax(150px,.75fr) minmax(150px,.75fr) minmax(240px,1.45fr) minmax(285px,1.5fr) 142px;gap:12px;align-items:end;padding:16px;border:1px solid var(--line);border-radius:14px;background:#fcfbfe}.field{min-width:0}.field>label,.premium-action>label{display:block;margin:0 0 6px;color:#4b4268;font-size:.78rem;font-weight:750}.field label small{color:var(--muted);font-weight:500}.input-suffix{position:relative}.input-suffix span{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}.input-suffix input{padding-right:34px}input{width:100%;min-height:48px;padding:10px 12px;border:1px solid #cfc8df;border-radius:10px;background:#fff;color:var(--ink)}input:hover{border-color:#9c91ba}input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,.table-scroll:focus-visible{outline:3px solid rgba(110,74,232,.28);outline-offset:2px}input[aria-invalid="true"]{border-color:var(--red);background:var(--red-bg)}.hint,.field-error{display:block;margin-top:4px;font-size:.68rem}.hint{color:var(--muted)}.field-error{min-height:1em;color:var(--red);font-weight:650}
.tax-profile{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;border:0}.tax-profile legend{margin:0 0 6px;padding:0;color:#4b4268;font-size:.78rem;font-weight:750}.tax-profile label{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:6px;border:1px solid #cfc8df;border-radius:10px;background:#fff;cursor:pointer;font-size:.76rem;font-weight:750;text-align:center}.tax-profile label:has(input:checked){border-color:var(--primary);background:var(--soft);color:var(--primary-dark)}.tax-profile input{width:16px;min-height:16px;margin:0;accent-color:var(--primary)}.tax-profile small{color:var(--muted);font-size:.65rem}.btn{display:inline-flex;min-height:48px;padding:10px 16px;border:1px solid transparent;border-radius:10px;align-items:center;justify-content:center;gap:7px;font-weight:800;text-align:center;text-decoration:none;cursor:pointer}.btn:disabled{cursor:wait;opacity:.55}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 7px 16px rgba(110,74,232,.2)}.btn-primary:hover{background:var(--primary-dark)}.btn-soft{border-color:var(--line);background:var(--soft);color:var(--primary-dark)}.full{width:100%}.status{min-height:1.15rem;margin:.45rem 0;color:var(--muted);font-size:.76rem;font-weight:650}.status.error{color:var(--red)}.status.success{color:var(--green)}
.category-combobox{position:relative;min-width:0}.category-suggestions{position:absolute;z-index:30;top:calc(100% + 5px);left:0;width:100%;max-height:min(360px,50dvh);padding:5px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:0 16px 36px rgba(37,28,70,.16)}.category-suggestions button{display:grid;width:100%;min-height:48px;padding:8px 10px;border:0;border-radius:8px;background:#fff;color:var(--ink);cursor:pointer;text-align:left}.category-suggestions button:hover,.category-suggestions button:focus-visible{background:var(--soft);outline:none}.category-suggestions strong{font-size:.78rem}.category-suggestions small{overflow:hidden;color:var(--muted);font-size:.64rem;text-overflow:ellipsis;white-space:nowrap}
.advanced{margin:-1px 0 0;border:1px solid var(--line);border-radius:0}.advanced summary,.bulk-card>summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:10px 14px;cursor:pointer;font-weight:800}.advanced summary span,.bulk-card>summary span{color:var(--muted);font-size:.72rem;font-weight:600}.advanced-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:4px 14px 14px;border-top:1px solid var(--line)}.advanced-grid .field{padding-top:10px}.advanced-grid input{min-height:44px}.fee-summary-groups{display:flex;gap:5px}.advanced summary .fee-summary-groups b{padding:3px 7px;border-radius:999px;background:var(--soft);color:var(--primary-dark);font-size:.62rem}.calculate-btn{width:100%;margin:8px 0 6px}
.result-section{margin-top:14px;border-top:1px solid var(--line)}.result-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 24px 12px}.result-heading h2,.premium-bar h2{margin:0;font-size:1.05rem}.table-scroll{overflow-x:auto;overscroll-behavior:contain;border-top:1px solid var(--line)}.profit-table{width:100%;min-width:820px;border-collapse:collapse;table-layout:fixed}.profit-table th,.profit-table td{height:40px;padding:8px 13px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.79rem}.profit-table th:last-child,.profit-table td:last-child{border-right:0}.profit-table thead th{height:52px;background:#eeeaf8;color:var(--ink);font-weight:850;text-align:center}.profit-table thead th:first-child{width:32%;text-align:left}.profit-table tbody th{font-weight:650;text-align:left}.profit-table td{text-align:right;font-variant-numeric:tabular-nums}.profit-table .row-fee th,.profit-table .row-fee td{background:var(--blue-bg)}.profit-table .row-affiliate th,.profit-table .row-affiliate td,.profit-table .row-ads th,.profit-table .row-ads td{background:var(--yellow-bg)}.profit-table .row-ops th,.profit-table .row-ops td{background:var(--pink-bg)}.profit-table .row-settlement th,.profit-table .row-settlement td{background:#eaf6ee;font-weight:800}.profit-table .row-profit th,.profit-table .row-profit td{height:58px;background:#fff7b8;font-size:.96rem;font-weight:900}.profit-table .row-profit td.positive{color:var(--green)}.profit-table .row-profit td.negative{color:var(--red)}.profit-table .row-rate th,.profit-table .row-rate td{font-weight:850}.profit-table .zero{color:#aaa}.profit-table .loss-label,.profit-table .profit-label{display:block;font-size:.62rem;text-transform:uppercase}.profit-table .loss-label{color:var(--red)}.profit-table .profit-label{color:var(--green)}.mobile-results{display:none}
.premium-bar{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(420px,1.3fr);gap:16px;align-items:center;padding:18px 24px;border-top:1px solid var(--line);background:linear-gradient(100deg,#faf8ff,#f3efff)}.premium-action{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.premium-action label{grid-column:1/-1;margin:0}.analysis-result{padding:20px 24px;border-top:1px solid var(--line)}.analysis-evidence{display:grid;gap:3px;margin-bottom:10px;padding:11px 13px;border:1px solid #d9d0f6;border-radius:11px;background:var(--soft)}.analysis-evidence strong{font-size:.82rem}.analysis-evidence span{color:var(--muted);font-size:.72rem}.strategy-grid,.comparable-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.strategy-card,.product-card{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}.strategy-card h3,.product-card strong{margin:0;font-size:.88rem}.strategy-card p,.product-card span,.product-card small{display:block;margin:.35rem 0 0;color:var(--muted);font-size:.76rem}.product-card{min-height:48px;color:inherit;text-align:left;cursor:pointer}.product-card:hover{border-color:var(--primary)}
.bulk-card{margin-top:14px;overflow:hidden}.bulk-content{padding:0 18px 18px;border-top:1px solid var(--line)}.bulk-content>p{color:var(--muted);font-size:.8rem}.bulk-actions{margin-bottom:10px}.bulk-content form{display:grid;grid-template-columns:1fr 180px;gap:10px;align-items:end}.file-picker{display:grid;gap:4px;padding:10px 12px;border:1px dashed #b8aed1;border-radius:10px}.file-picker small{color:var(--muted)}.file-picker input{min-height:auto;padding:5px;border:0}.progress-row{display:flex;justify-content:space-between;margin-top:14px}progress{width:100%;height:12px}.close{position:absolute;top:10px;right:10px;display:grid;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;place-items:center;background:#fff;color:var(--ink);font-size:1.45rem;cursor:pointer}dialog{padding:0;border:0;border-radius:16px;background:transparent}dialog::backdrop{background:rgba(25,18,52,.55);backdrop-filter:blur(3px)}.dialog-card{position:relative;width:min(430px,calc(100vw - 24px));padding:24px;border-radius:16px;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.2)}.dialog-card h2{margin:0 40px 16px 0}.dialog-card .field{margin-bottom:12px}.drawer{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border-radius:0}.drawer article{position:relative;width:min(540px,100%);min-height:100%;margin-left:auto;padding:24px;background:#fff;box-shadow:-20px 0 60px rgba(0,0,0,.2)}.detail-image{width:100%;max-height:260px;border-radius:12px;object-fit:contain;background:var(--bg)}.detail-list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.detail-list div{padding:10px;border-radius:9px;background:var(--bg)}.detail-list dt{color:var(--muted);font-size:.68rem}.detail-list dd{margin:3px 0 0;font-weight:750}
@media(max-width:1060px){.quick-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}.category-field,.tax-profile{grid-column:span 2}.calculate-btn{grid-column:2}.advanced-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.workspace{width:min(100% - 12px,1320px);margin-top:8px}.app-header{min-height:60px;padding:8px 12px}.brand strong{font-size:.78rem}.brand small,.account-box span{display:none}.card-heading,#pricingForm,.result-heading,.premium-bar,.analysis-result{padding-left:14px;padding-right:14px}.card-heading{padding-top:16px}.version-pill{display:none}.quick-inputs{grid-template-columns:1fr;padding:12px}.category-field,.tax-profile,.calculate-btn{grid-column:auto}.tax-profile{grid-template-columns:1fr}.tax-profile label{justify-content:flex-start;padding-left:14px}.advanced-grid{grid-template-columns:1fr}.result-heading{align-items:flex-start}.table-scroll{margin:0}.profit-table th:first-child{position:sticky;left:0;z-index:2;box-shadow:2px 0 4px rgba(37,28,70,.06)}.profit-table thead th:first-child{z-index:3}.profit-table tbody th{background:#fff}.profit-table .row-fee th{background:var(--blue-bg)}.profit-table .row-affiliate th,.profit-table .row-ads th{background:var(--yellow-bg)}.profit-table .row-ops th{background:var(--pink-bg)}.profit-table .row-settlement th{background:#eaf6ee}.profit-table .row-profit th{background:#fff7b8}.premium-bar{grid-template-columns:1fr}.premium-action{grid-template-columns:1fr}.premium-action label{grid-column:auto}.strategy-grid,.comparable-grid,.bulk-content form{grid-template-columns:1fr}.bulk-card>summary{align-items:flex-start;flex-direction:column}.drawer article{padding:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* Bảng nhiều sản phẩm và các trường bổ sung theo workbook */
select{width:100%;min-height:48px;padding:10px 12px;border:1px solid #cfc8df;border-radius:10px;background:#fff;color:var(--ink);font:inherit}
select:hover{border-color:#9c91ba}select:focus-visible{outline:3px solid rgba(110,74,232,.28);outline-offset:2px}
.multi-card{margin-top:14px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow)}
.multi-summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:9px 16px;cursor:pointer}.multi-summary span{color:var(--muted);font-size:.7rem;font-weight:650}.multi-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px}.multi-heading h2{margin:0;font-size:.9rem}.multi-heading p{margin:0;color:var(--muted);font-size:.7rem}.multi-heading>div:last-child{display:flex;gap:6px}.multi-heading .btn{min-height:36px;padding:6px 10px;font-size:.7rem}
.multi-table{width:100%;min-width:1020px;border-collapse:collapse;table-layout:fixed}.multi-table th,.multi-table td{padding:4px;border:1px solid var(--line);font-size:.68rem}.multi-table thead th{background:#ead4df;color:#9d1717;text-align:center}.multi-table input,.multi-table select{min-width:0;min-height:34px;padding:5px;border-radius:6px;font-size:.68rem}.multi-table th:nth-child(1){width:3.5%}.multi-table th:nth-child(2){width:14%}.multi-table th:nth-child(3){width:9%}.multi-table th:nth-child(4){width:10%}.multi-table th:nth-child(5){width:18%}.multi-table th:nth-child(6){width:8%}.multi-table th:nth-child(n+7):nth-child(-n+10){width:8%}.multi-table th:nth-child(11){width:5.5%}.multi-table .multi-index{width:auto;text-align:center}.multi-table .multi-name,.multi-table .multi-category,.multi-table .multi-profit{min-width:0}.multi-table .multi-profit{background:#fffbd1;text-align:right;font-weight:850;font-variant-numeric:tabular-nums}.multi-table .multi-profit.positive{color:var(--green)}.multi-table .multi-profit.negative{color:var(--red)}.multi-remove{min-width:34px;min-height:34px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--red);cursor:pointer}#multiStatus{padding:0 12px 7px}
.profit-table .row-input th,.profit-table .row-input td{background:#fff}.profit-table .row-campaign th,.profit-table .row-campaign td{background:#fff4cf}.profit-table .row-total th,.profit-table .row-total td{background:#e5f3e7;font-weight:850}.profit-table .row-recommended th,.profit-table .row-recommended td{height:52px;background:#fff600;color:#bc1717;font-weight:900}
@media(max-width:900px){.multi-heading{align-items:stretch;flex-direction:column}.multi-heading>div:last-child{display:grid;grid-template-columns:1fr 1fr}.advanced-grid select{min-height:48px}}

/* Giữ nhận diện Booking, chỉ kế thừa cấu trúc tính toán từ workbook */
.multi-table thead th{background:#eee9ff;color:#49338f}.multi-table .multi-profit{background:#f7f4ff}.profit-table .row-fee th,.profit-table .row-fee td{background:#f1f5ff}.profit-table .row-campaign th,.profit-table .row-campaign td{background:#faf6ff}.profit-table .row-affiliate th,.profit-table .row-affiliate td,.profit-table .row-ads th,.profit-table .row-ads td{background:#f6f2ff}.profit-table .row-ops th,.profit-table .row-ops td{background:#fbf8ff}.profit-table .row-total th,.profit-table .row-total td,.profit-table .row-settlement th,.profit-table .row-settlement td{background:#edf8f3}.profit-table .row-profit th,.profit-table .row-profit td{background:#ede7ff}.profit-table .row-recommended th,.profit-table .row-recommended td{background:#6e4ae8;color:#fff}.result-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.result-actions .btn{min-height:38px;padding:7px 11px;font-size:.72rem}
.row-kind{display:inline-flex;margin-left:7px;padding:2px 5px;border-radius:999px;background:rgba(110,74,232,.1);color:#6e4ae8;font-size:.56rem;font-weight:800;vertical-align:middle}.row-recommended .row-kind{background:rgba(255,255,255,.2);color:#fff}
.multi-profit small{display:block;margin-top:3px;color:var(--muted);font-size:.58rem;font-weight:650}.multi-profit.positive small,.multi-profit.negative small{color:var(--muted)}
.multi-remove-cell{display:flex;align-items:center;justify-content:center;gap:5px}.multi-detail-toggle{min-height:36px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--primary-dark);font-size:.64rem;font-weight:800;white-space:nowrap;cursor:pointer}.multi-detail-row>td{padding:0!important;background:#faf9fd}.multi-detail-panel{padding:12px 14px}.multi-detail-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.multi-detail-tabs{display:flex;gap:5px;flex-wrap:wrap}.multi-detail-tabs button{min-height:36px;padding:5px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:.67rem;font-weight:800;cursor:pointer}.multi-detail-tabs button[aria-selected="true"]{border-color:var(--primary);background:var(--primary);color:#fff}.multi-detail-fees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;overflow:hidden;border:1px solid var(--line);border-radius:9px;background:var(--line)}.multi-detail-fees>div{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:8px;align-items:center;min-height:42px;padding:7px 9px;background:#fff}.multi-detail-fees dt{font-size:.7rem;font-weight:700}.multi-detail-fees dd{margin:0;font-size:.72rem;font-weight:850;text-align:right;font-variant-numeric:tabular-nums}.multi-detail-fees .positive{color:var(--green)}.multi-detail-fees .negative{color:var(--red)}

@media(min-width:1061px){.calculator-card{display:grid;grid-template-columns:440px minmax(0,1fr);align-items:start}.card-heading,.premium-bar,.analysis-result,.market-overview{grid-column:1/-1}#pricingForm{grid-column:1;padding-right:14px}.quick-inputs{display:grid;grid-template-columns:1fr;padding:0;border-radius:10px;overflow:visible}.quick-inputs>.field{display:grid;grid-template-columns:minmax(150px,1fr) 190px;gap:8px;align-items:center;min-height:52px;padding:5px 8px 5px 12px;border-bottom:1px solid var(--line)}.quick-inputs>.field>label{margin:0}.quick-inputs>.field>.hint,.quick-inputs>.field>.field-error{grid-column:2;margin:0}.quick-inputs .money-field input{min-height:40px;text-align:right;font-size:1rem;font-weight:850}.category-field,.tax-profile,.calculate-btn{grid-column:auto}.quick-inputs>.category-field{grid-template-columns:minmax(120px,.75fr) minmax(0,1.25fr)}.quick-inputs>.tax-profile{display:grid;grid-template-columns:110px repeat(3,1fr);gap:5px;align-items:center;min-height:60px;padding:5px 8px 5px 12px}.tax-profile legend{grid-column:1;margin:0}.tax-profile label{min-height:42px;padding:4px;font-size:.68rem}.calculate-btn{margin:8px}.advanced-grid{grid-template-columns:1fr;padding:4px 10px 10px}.advanced-grid .field{display:grid;grid-template-columns:minmax(170px,1fr) 165px;gap:8px;align-items:center;padding-top:6px}.advanced-grid .field>label{margin:0}.advanced-grid input,.advanced-grid select{min-height:40px;text-align:right}.result-section{grid-column:2;margin-top:0;border-top:0;border-left:1px solid var(--line)}.result-section>.table-scroll{max-height:calc(100dvh - 270px);overflow:auto;scrollbar-gutter:stable}.profit-table thead{position:sticky;top:0;z-index:5}.profit-table thead th{box-shadow:0 1px 0 var(--line)}}
.decision-panel{display:grid;grid-template-columns:minmax(300px,1fr) minmax(220px,.8fr);gap:12px;padding:0 18px 12px}.mini-chart{display:grid;gap:7px}.bar-row{display:grid;grid-template-columns:108px 1fr 92px;gap:8px;align-items:center;font-size:.68rem}.bar-track{height:9px;overflow:hidden;border-radius:999px;background:#ece8f5}.bar-fill{height:100%;border-radius:inherit;background:var(--primary)}.bar-fill.negative{background:#e25555}.bar-value{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}.suggestion-list{display:grid;gap:5px;margin:0;padding:0;list-style:none}.suggestion-list li{padding:7px 9px;border-radius:8px;background:#f6f3ff;color:#51476f;font-size:.68rem}.suggestion-list li strong{color:var(--ink)}
.market-bar-track{display:block !important;width:100% !important;height:12px !important;border-radius:99px !important;border:1px solid #d4c8fa !important;background:#ede7ff !important;overflow:hidden !important;position:relative !important}
.market-bar-fill{display:block !important;height:100% !important;min-width:4px !important;border-radius:inherit !important;background:linear-gradient(90deg,#6366f1,#8b5cf6) !important;box-shadow:inset 0 0 0 1px rgba(64,35,150,.12) !important;transition:width .4s ease-out !important}
@media(max-width:1060px){.decision-panel{grid-template-columns:1fr 1fr}.market-kpis{grid-template-columns:repeat(2,1fr)}.market-charts{grid-template-columns:1fr 1fr}.market-charts article:last-child{grid-column:1/-1}}
@media(max-width:1023px){
  .workspace{width:min(1320px,calc(100% - 12px))}
  .decision-panel{grid-template-columns:1fr;padding:0 14px 12px}.bar-row{grid-template-columns:minmax(82px,1fr) minmax(72px,1fr) minmax(72px,auto)}
  .market-kpis,.market-charts{grid-template-columns:1fr;padding-left:14px;padding-right:14px}.market-charts article:last-child{grid-column:auto}.result-actions{align-items:flex-start;flex-direction:column}.result-heading{flex-direction:column}
  .result-section>.table-scroll{display:none}.mobile-results{display:block;border-top:1px solid var(--line)}
  .mobile-result-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:12px 14px}.mobile-result-tabs button{min-width:0;min-height:48px;padding:7px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:.72rem;font-weight:800}.mobile-result-tabs button[aria-selected="true"]{border-color:var(--primary);background:var(--soft);color:var(--primary-dark)}
  .mobile-breakdown{display:grid;margin:0;padding:0 14px 14px}.mobile-fee-row{display:grid;grid-template-columns:minmax(0,1fr) max-content;gap:12px;align-items:center;min-height:48px;padding:8px 10px;border-bottom:1px solid var(--line);background:#fff}.mobile-fee-row:first-child{border-radius:10px 10px 0 0}.mobile-fee-row:last-child{border-bottom:0;border-radius:0 0 10px 10px}.mobile-fee-row dt{min-width:0;font-size:.73rem;font-weight:650}.mobile-fee-row dd{margin:0;text-align:right;font-size:.76rem;font-weight:780;font-variant-numeric:tabular-nums}.mobile-fee-row dd small{display:block;font-size:.6rem}.mobile-fee-row .row-kind{display:inline-flex;width:auto;margin:3px 0 0 5px}.mobile-fee-row.row-fee,.mobile-fee-row.row-fee dt,.mobile-fee-row.row-fee dd{background:#f1f5ff}.mobile-fee-row.row-campaign,.mobile-fee-row.row-campaign dt,.mobile-fee-row.row-campaign dd,.mobile-fee-row.row-affiliate,.mobile-fee-row.row-affiliate dt,.mobile-fee-row.row-affiliate dd,.mobile-fee-row.row-ads,.mobile-fee-row.row-ads dt,.mobile-fee-row.row-ads dd{background:#f7f4ff}.mobile-fee-row.row-ops,.mobile-fee-row.row-ops dt,.mobile-fee-row.row-ops dd{background:#fbf8ff}.mobile-fee-row.row-total,.mobile-fee-row.row-settlement{background:#edf8f3}.mobile-fee-row.row-profit{min-height:58px;background:#ede7ff}.mobile-fee-row.row-profit dt,.mobile-fee-row.row-profit dd,.mobile-fee-row.row-recommended dt,.mobile-fee-row.row-recommended dd{font-weight:900}.mobile-fee-row.row-recommended{min-height:58px;background:var(--primary);color:#fff}.mobile-fee-row.row-recommended .row-kind{background:rgba(255,255,255,.18);color:#fff}
  .multi-card>.table-scroll{overflow:visible;border-top:0}.multi-table,.multi-table tbody,.multi-table tr,.multi-table td{display:block;width:100%;min-width:0}.multi-table{min-width:0;padding:0 10px 10px}.multi-table thead{display:none}.multi-table tr{margin-bottom:12px;padding:8px;border:1px solid var(--line);border-radius:12px;background:#fff}.multi-table td{display:grid;grid-template-columns:minmax(82px,.7fr) minmax(0,1.3fr);gap:8px;align-items:center;padding:5px;border:0}.multi-table td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:.7rem;font-weight:750}.multi-table .multi-index{width:100%;padding-bottom:8px;border-bottom:1px solid var(--line);text-align:left}.multi-table .multi-profit{min-width:0;text-align:right}.multi-remove-cell{display:flex!important;justify-content:flex-end!important}.multi-remove{min-width:48px;min-height:48px}
}

/* Bản giá một luồng như workbook: nhập liệu ở trên, bảng kết quả ngay bên dưới. */
.decision-panel{display:none}
.profit-table thead th span,.profit-table thead th small{display:block}
.profit-table thead th small{margin-top:3px;color:#6f6785;font-size:.62rem;font-weight:650;line-height:1.2}
.row-group-summary th,.row-group-summary td{font-weight:850}
.row-group-detail th{padding-left:28px!important}
.fee-toggle{width:100%;min-height:32px;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:850;text-align:left;cursor:pointer}
.fee-toggle:focus-visible{outline:3px solid rgba(110,74,232,.28);outline-offset:2px}

@media(min-width:1061px){
  .calculator-card{display:block}
  .card-heading,.premium-bar,.analysis-result,.market-overview{grid-column:auto}
  #pricingForm,#form{padding:0!important;margin:0!important;width:100%!important}
  #pricingForm>.quick-inputs{display:grid;grid-template-columns:1fr;padding:0;border-radius:10px 10px 0 0;overflow:visible}
  .quick-inputs>.field{display:grid;grid-template-columns:minmax(260px,.7fr) minmax(300px,1.3fr);gap:12px;align-items:center;min-height:54px;padding:6px 14px;border-bottom:1px solid var(--line)}
  .quick-inputs>.field>label{margin:0}
  .quick-inputs>.field>.hint,.quick-inputs>.field>.field-error{grid-column:2;margin:0}
  .quick-inputs .money-field input{min-height:42px;text-align:right;font-size:1rem;font-weight:850}
  .quick-inputs>.category-field,.quick-inputs>.tax-profile{grid-column:auto;grid-template-columns:minmax(260px,.7fr) minmax(300px,1.3fr)}
  .pricing-strategy>div{grid-template-columns:minmax(260px,.7fr) minmax(300px,1.3fr);padding-inline:14px}
  .advanced-grid{grid-template-columns:1fr 1fr 1fr}
  .result-section{margin-top:0;border-top:1px solid var(--line);border-left:0}
  .result-section>.table-scroll{max-height:none;overflow-x:auto;overflow-y:visible;scrollbar-gutter:auto}
  .profit-table thead{position:static}
}

@media(max-width:900px){
  html,body{max-width:100%;overflow-x:clip;scroll-behavior:auto}
  .app-header{position:static;backdrop-filter:none}
  .calculator-card,.result-section,.mobile-results,.multi-card{min-width:0;contain:inline-size}
  .table-scroll{overscroll-behavior-x:none;touch-action:pan-y}
  .mobile-breakdown{overflow-anchor:none}
  .mobile-fee-row{transform:none!important}
  .mobile-fee-row.row-group-detail dt{padding-left:16px}
  .mobile-fee-row .fee-toggle{min-height:36px}
}
@media(max-width:360px){.brand span{display:none}.app-header{padding-inline:8px}.card-heading,#pricingForm,.result-heading,.premium-bar,.analysis-result{padding-left:10px;padding-right:10px}.quick-inputs{padding:9px}.mobile-result-tabs,.mobile-breakdown{padding-left:10px;padding-right:10px}}
@media(max-width:620px){.app-header{align-items:flex-start}.header-start{flex:1;gap:8px}.brand span{display:none}.platform-switch{flex:1}.platform-switch a{flex:1;padding-inline:7px;text-align:center}.account-box{padding-top:5px}}

/* Mọi thông số nhập theo một cấu trúc dòng, tương ứng bảng tính gốc. */
.quick-inputs{grid-template-columns:1fr}.quick-inputs>.field{display:grid;grid-template-columns:minmax(155px,.9fr) minmax(0,1.1fr);gap:8px;align-items:center;padding:7px 9px;border-bottom:1px solid var(--line)}.quick-inputs>.field>label{margin:0}.quick-inputs>.field>.hint,.quick-inputs>.field>.field-error{grid-column:2;margin:0}.quick-inputs>.tax-profile{grid-column:auto}.quick-inputs>.calculate-btn{grid-column:auto;width:100%}.pricing-strategy{display:grid;border-bottom:1px solid var(--line);background:#f8f6ff}.pricing-strategy>div{display:grid;grid-template-columns:minmax(155px,.9fr) minmax(0,1.1fr);gap:8px;align-items:center;min-height:52px;padding:7px 9px;border-bottom:1px dashed #ddd6f0}.pricing-strategy>div:last-child{border-bottom:0}.pricing-strategy span{color:#4b4268;font-size:.76rem;font-weight:750}.pricing-strategy strong{text-align:right;color:var(--primary-dark);font-size:1rem;font-variant-numeric:tabular-nums}.pricing-strategy small{grid-column:2;color:var(--muted);font-size:.64rem;text-align:right}.advanced-grid{grid-template-columns:1fr}.advanced-grid .field{display:grid;grid-template-columns:minmax(170px,1fr) 165px;gap:8px;align-items:center;padding-top:6px}.advanced-grid .field>label{margin:0}.advanced-grid input,.advanced-grid select{min-height:40px;text-align:right}
.fee-groups{display:grid;gap:7px;padding:8px;border-top:1px solid var(--line);background:#faf9fd}.fee-group{border:1px solid var(--line);border-radius:9px;background:#fff}.advanced .fee-group>summary{min-height:42px;padding:7px 10px}.fee-group>summary span{color:var(--ink);font-size:.76rem;font-weight:800}.fee-group>summary small{color:var(--muted);font-size:.64rem;font-weight:600}.fee-group .advanced-grid{border-top:1px solid var(--line)}.fixed-fees{display:grid;margin:0;padding:2px 10px 8px;border-top:1px solid var(--line)}.fixed-fees>div{display:grid;grid-template-columns:minmax(145px,1fr) minmax(0,1fr);gap:8px;align-items:center;min-height:36px;border-bottom:1px dashed var(--line);font-size:.7rem}.fixed-fees>div:last-child{border-bottom:0}.fixed-fees dt{font-weight:700}.fixed-fees dd{margin:0;color:var(--muted);text-align:right}
.quick-inputs>.tax-profile>label{display:block;min-height:0;padding:0;border:0;background:transparent;cursor:default;text-align:left}.quick-inputs>.tax-profile>label:hover{border:0;background:transparent}
.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.shared-review{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.shared-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px}.shared-heading p:last-child{margin:.4rem 0 0;color:var(--muted);font-size:.78rem}.review-tabs{display:flex;gap:6px;padding:10px 24px;overflow-x:auto;border-block:1px solid var(--line);background:#faf9fd}.review-tabs button{min-height:42px;padding:8px 14px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);font:inherit;font-size:.75rem;font-weight:800;white-space:nowrap;cursor:pointer}.review-tabs button[aria-selected="true"]{border-color:var(--primary);background:var(--primary);color:#fff}.review-content{padding:18px 24px}.review-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.review-kpi,.review-product-summary{padding:13px;border:1px solid var(--line);border-radius:11px;background:#faf9fd}.review-kpi small,.review-product-summary small{display:block;color:var(--muted);font-size:.65rem}.review-kpi strong,.review-product-summary strong{display:block;margin-top:4px;font-size:.92rem}.review-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}.review-detail-table{width:100%;border-collapse:collapse}.review-detail-table th,.review-detail-table td{padding:9px;border-bottom:1px solid var(--line);font-size:.74rem;text-align:right}.review-detail-table th:first-child{text-align:left}.review-detail-table thead th{background:var(--soft)}body.shared-mode>.app-header .account-box{display:none}body.shared-mode .calculator-card,body.shared-mode .multi-card,body.shared-mode .bulk-card{display:none}
.product-workspace-tabs{display:flex;gap:3px;padding:9px 14px 0;overflow-x:auto;overscroll-behavior-x:contain;border-top:1px solid var(--line);background:#f3f1f8;scrollbar-width:thin}
.product-workspace-tabs button,.review-tabs button{position:relative;min-width:110px;max-width:220px;min-height:40px;padding:8px 14px;overflow:hidden;border:1px solid #d8d2e5;border-bottom-color:#bdb3d6;border-radius:10px 10px 0 0;background:#e9e6f0;color:#625a78;font:inherit;font-size:.73rem;font-weight:750;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.product-workspace-tabs button[aria-selected="true"],.review-tabs button[aria-selected="true"]{z-index:1;border-color:#bcaef0;border-bottom-color:#fff;background:#fff;color:var(--primary-dark);box-shadow:0 -2px 8px rgba(74,47,154,.08)}
@media(max-width:900px){.shared-heading{align-items:stretch;flex-direction:column;padding:16px 14px}.review-tabs{padding-inline:14px}.review-content{padding:14px}.review-summary,.review-products{grid-template-columns:1fr}.dialog-actions{grid-template-columns:1fr}.review-detail-table{min-width:650px}.review-table-scroll{overflow-x:auto}}
@media(max-width:900px){
  /* Mobile giữ đúng cấu trúc bảng gốc: mỗi thông số là một hàng gọn,
     nhãn bên trái và giá trị bên phải, không tạo các khối cao như card. */
  .quick-inputs{gap:0;padding:6px 10px}
  .quick-inputs>.field,.advanced-grid .field{grid-template-columns:minmax(128px,.9fr) minmax(0,1.1fr);min-height:60px;padding:6px 8px}
  .quick-inputs>.field>label,.advanced-grid .field>label{margin:0;padding-right:6px;line-height:1.25}
  .quick-inputs input,.quick-inputs select{min-height:46px}
  .quick-inputs>.field>.hint{display:none}
  .quick-inputs>.field>.field-error:empty{display:none}
  .quick-inputs>.field>.field-error:not(:empty){grid-column:1/-1;margin:1px 0 0}
  .pricing-strategy>div{grid-template-columns:minmax(128px,.9fr) minmax(0,1.1fr);min-height:58px;padding:6px 8px}
  .pricing-strategy small{display:none}
  .tax-profile select{font-size:.75rem}
}

/* Bố cục bảng nhập hợp nhất và bảng phí chi tiết cho nhiều sản phẩm. */
@media(min-width:1061px){
  #pricingForm>.quick-inputs{border-radius:10px 10px 0 0}
  #pricingForm>.calculate-btn{margin:8px 0 6px}
}
@media(max-width:900px){
  .fee-summary-groups{gap:3px}.advanced summary .fee-summary-groups b{padding:2px 5px;font-size:.56rem}
  .multi-detail-row{margin-top:-13px!important}
  .multi-detail-row>td{display:block!important}
  .multi-detail-panel{padding:8px}
  .multi-detail-heading{align-items:flex-start;flex-direction:column}
  .multi-detail-fees{grid-template-columns:1fr}
  .multi-detail-tabs{display:grid;width:100%;grid-template-columns:1fr 1fr}
  .multi-detail-tabs button{min-height:44px}
}

/* Bảng tính gọn: Mô tả kiêm lựa chọn và tỷ lệ, 4 nguồn đơn. */
.unified-pricing-table{width:100%;min-width:0;table-layout:fixed}
.unified-pricing-table col.col-mode{width:0}
.unified-pricing-table col.col-description{width:44%}
.unified-pricing-table col.col-choice{width:0}
.unified-pricing-table col.col-rate{width:0}
.unified-pricing-table col.col-source{width:14%}
.unified-pricing-table thead tr:first-child>th:first-child,.unified-pricing-table .pricing-input-rows>tr>td:first-child,.unified-pricing-table #profitTableBody .mode-cell{width:0!important;max-width:0;padding:0!important;border:0;overflow:hidden;color:transparent;font-size:0}
.unified-pricing-table thead tr:first-child>th:nth-child(3),.unified-pricing-table .pricing-input-rows>tr>td:nth-child(3),.unified-pricing-table #profitTableBody .choice-cell{width:0!important;max-width:0;padding:0!important;border:0;overflow:hidden;color:transparent;font-size:0}
.unified-pricing-table thead tr:first-child>th:nth-child(4),.unified-pricing-table .pricing-input-rows>tr>td:nth-child(4),.unified-pricing-table #profitTableBody .rate-cell{width:0!important;max-width:0;padding:0!important;border:0;overflow:hidden;color:transparent;font-size:0}
.profit-table.unified-pricing-table thead th:first-child{width:0}
.unified-pricing-table thead tr:first-child th:nth-child(2){text-align:left}
.unified-pricing-table th,.unified-pricing-table td{height:34px;padding:4px 7px}
.unified-pricing-table thead th{height:44px;padding:5px 6px;line-height:1.12}
.unified-pricing-table thead th small{display:block;margin-top:4px;color:#685f82;font-size:.6rem;font-weight:650;line-height:1.15}
.unified-pricing-table .pricing-input-rows>tr>td:first-child,.unified-pricing-table .mode-cell{color:#5d5572;font-size:.68rem;font-weight:750;text-align:left}
.unified-pricing-table .pricing-input-rows th{font-weight:650}
.unified-pricing-table .pricing-input-rows td:nth-child(n+4){text-align:center}
.unified-pricing-table tbody td:nth-child(n+5){white-space:nowrap}
.unified-pricing-table .money-mirror{text-align:right!important;font-variant-numeric:tabular-nums}
.unified-pricing-table .calculation-basis{display:inline;margin-left:5px;color:#716987;font-size:.56rem;font-weight:650;line-height:1.05;white-space:nowrap}
.unified-pricing-table .field-error:empty{display:none}
.cell-input,.cell-rate,.cell-select{width:100%;min-width:0}
.description-control{display:grid;grid-template-columns:minmax(135px,.9fr) minmax(170px,1.1fr) minmax(54px,.35fr);gap:8px;align-items:center}
.description-control>label,.description-control>span{font-weight:700}
.description-control .cell-select,.description-control .fee-options-toggle{min-height:32px}
.description-control>.inline-rate{justify-self:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.description-control>.cell-rate{max-width:82px;justify-self:end}
.description-control.rate-control{grid-template-columns:minmax(135px,1fr) 82px}
.description-control.value-control{grid-template-columns:minmax(135px,1fr) minmax(150px,180px)}
.fee-options-toggle-row .description-control{grid-template-columns:minmax(135px,.9fr) minmax(170px,1.45fr)}
.cell-input input,.cell-rate input,.cell-select{min-height:32px;padding:4px 8px;border:1px solid #bdb3d6;border-radius:6px;background:#fff}
.cell-input input,.cell-rate input{text-align:right;font-weight:800}
.cell-input.input-suffix input,.cell-rate.input-suffix input{padding-right:24px}
.cell-input.input-suffix span,.cell-rate.input-suffix span{right:7px}
.pricing-input-rows .row-target th,.pricing-input-rows .row-target td{background:#fff9db}
.pricing-input-rows .row-campaign,.pricing-input-rows .row-affiliate,.pricing-input-rows .row-ads{display:table-row}
.pricing-input-rows .fee-options-toggle-row{display:none}
.fee-options-toggle-row th,.fee-options-toggle-row td{background:#faf9fd}.fee-options-toggle{min-height:30px;padding:4px 9px;border:1px solid #cfc8df;border-radius:6px;background:#fff;color:var(--primary-dark);font:inherit;font-size:.68rem;font-weight:800;cursor:pointer}.fee-options-toggle-row small{color:var(--muted);font-size:.62rem}.pricing-input-rows .strategy-row .strategy-price-cell{padding:5px 9px;background:var(--primary)!important;color:#fff!important;text-align:right}.strategy-price-cell small,.strategy-price-cell strong{display:block;color:#fff!important}.strategy-price-cell small{font-size:.58rem;font-weight:650}.strategy-price-cell strong{font-size:.86rem}
.pricing-input-rows .row-recommended strong{display:block;color:#fff;font-size:.9rem;text-align:right}
.pricing-input-rows .row-recommended small{display:block;color:rgba(255,255,255,.82);font-size:.58rem;text-align:right}
.unified-pricing-table .row-recommended th,.unified-pricing-table .row-recommended td,.unified-pricing-table .row-recommended .zero{height:42px;color:#fff!important}
.unified-pricing-table .row-profit th,.unified-pricing-table .row-profit td{height:46px}
.pricing-input-rows .calculate-row .btn{width:100%;min-height:36px}
.pricing-input-rows .calculate-row .status{min-height:0;margin:2px 0 0;text-align:left}
.pricing-input-rows .calculate-row{display:none}
#profitTableBody .choice-cell,#profitTableBody .rate-cell{background:inherit}
#profitTableBody .row-group-detail th{padding-left:22px!important}

@media(min-width:1024px){
  .app-header{min-height:52px;padding-block:6px}
  .card-heading{padding:10px 16px 8px}.card-heading .eyebrow,.card-heading p:last-child{display:none}.card-heading h1{font-size:1.55rem}
  .result-heading{padding:8px 16px}.result-heading p{display:none}
  .unified-pricing-table thead th{height:36px;padding-block:5px}
  .unified-pricing-table th,.unified-pricing-table td{height:30px;padding-block:3px}
  .unified-pricing-table .row-recommended th,.unified-pricing-table .row-recommended td{height:38px}
  .unified-pricing-table .row-profit th,.unified-pricing-table .row-profit td{height:40px}
}
@media(min-width:1024px){
  .unified-pricing-table .pricing-input-rows{display:table-row-group!important;width:auto!important}
  .unified-pricing-table .pricing-input-rows>.input-board-row{display:table-row!important}
  .unified-pricing-table .pricing-input-rows>.input-board-row>th{display:table-cell!important;width:auto!important;max-width:none!important;padding:0!important}
}

/* Table semantics are kept on desktop to prevent row overlap at intermediate viewport widths. */
@media(min-width:1024px){
  .unified-pricing-table .pricing-input-rows{display:table-row-group!important;width:auto;border:0}
  .unified-pricing-table .pricing-input-rows>tr,.unified-pricing-table .pricing-input-rows>.row-campaign,.unified-pricing-table .pricing-input-rows>.row-affiliate,.unified-pricing-table .pricing-input-rows>.row-ads,.unified-pricing-table .pricing-input-rows>.strategy-row{display:table-row!important;height:auto!important;min-height:0;border:0;overflow:visible}
  .unified-pricing-table .pricing-input-rows>tr>th,.unified-pricing-table .pricing-input-rows>tr>td{display:table-cell!important;height:auto!important;min-height:0}
  .unified-pricing-table .pricing-input-rows>.fee-options-toggle-row,.unified-pricing-table .pricing-input-rows>.calculate-row{display:none!important}
}

/* Một khu nhập duy nhất trong bảng; không để các cột kết quả tạo khoảng trống. */
.unified-pricing-table .input-board-row>th{position:static!important;width:auto!important;padding:0!important;background:#fff!important;box-shadow:none!important}
.input-board {
  display: grid !important;
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  overflow: visible !important;
  box-shadow: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}

@media (min-width: 1120px) {
  .input-board {
    grid-template-columns: minmax(75px, 0.65fr) minmax(75px, 0.65fr) minmax(75px, 0.65fr) minmax(135px, 1.1fr) minmax(215px, 1.45fr) minmax(215px, 1.45fr) !important;
  }
  .input-board > :nth-child(6n) {
    border-right: none !important;
  }
  .input-board > .board-output-recommended {
    grid-column: span 2 !important;
  }
  /* Shopee has 5 columns in 2 rows - Row 2 cols 1, 2, 4 slimmed, col 5 gets 2.25fr for 1-row fit */
  form#form .input-board,
  .shopee-page .input-board {
    grid-template-columns: minmax(85px, 0.7fr) minmax(85px, 0.7fr) minmax(150px, 1.15fr) minmax(100px, 0.8fr) minmax(380px, 2.25fr) !important;
  }
  form#form .input-board > :nth-child(5n),
  .shopee-page .input-board > :nth-child(5n) {
    border-right: none !important;
  }
  form#form .input-board > .board-output-recommended,
  .shopee-page .input-board > .board-output-recommended {
    grid-column: span 1 !important;
  }
}

@media (max-width: 1119px) and (min-width: 768px) {
  .input-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .input-board > :nth-child(3n) {
    border-right: none !important;
  }
  .input-board > .board-output-recommended {
    grid-column: span 1 !important;
  }
}

@media (max-width: 767px) and (min-width: 520px) {
  .input-board {
    grid-template-columns: 1fr 1fr !important;
  }
  .input-board > :nth-child(2n) {
    border-right: none !important;
  }
  .input-board > .board-output-recommended {
    grid-column: span 2 !important;
  }
}

@media (max-width: 519px) {
  .input-board {
    grid-template-columns: 1fr !important;
  }
  .input-board > * {
    border-right: none !important;
  }
  .input-board > .board-output-recommended {
    grid-column: auto !important;
  }
}

.board-field {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 50px !important;
  padding: 5px 9px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #ffffff !important;
  min-width: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

.board-field > span:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  white-space: nowrap !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  color: #334155 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.1px !important;
}

.board-field b {
  color: var(--primary) !important;
  font-weight: 800 !important;
  margin-left: auto !important;
  white-space: nowrap !important;
  font-size: 0.72rem !important;
}

.board-field .input-suffix {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

.board-field select,
.board-field .category-combobox {
  width: 100% !important;
  min-width: 0 !important;
  position: relative !important;
}

.board-field input,
.board-field select {
  width: 100% !important;
  min-height: 28px !important;
  height: 28px !important;
  padding: 2px 7px !important;
  border: 1px solid #cfc8df !important;
  border-radius: 6px !important;
  font-size: 0.81rem !important;
  font-weight: 750 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  color: #0f172a !important;
}

.board-field input:focus,
.board-field select:focus {
  border-color: var(--primary) !important;
  outline: 2px solid rgba(110, 74, 232, 0.2) !important;
}

.board-field .input-suffix input {
  padding-right: 22px !important;
  text-align: right !important;
  font-weight: 850 !important;
}

.board-field .input-suffix span {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.72rem !important;
  color: var(--muted) !important;
  pointer-events: none !important;
}

.board-pair {
  display: grid !important;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) !important;
  gap: 4px !important;
  width: 100% !important;
}

.board-pair select {
  padding-inline: 4px !important;
  font-size: 0.74rem !important;
}

.board-pair .input-suffix input {
  font-size: 0.76rem !important;
  padding-inline: 4px 16px !important;
}

/* Category Suggestions Autocomplete Dropdown - 5 dòng chuẩn kèm thanh cuộn */
.category-suggestions,
.board-field .category-suggestions {
  position: absolute !important;
  z-index: 99999 !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  width: min(520px, calc(100vw - 32px)) !important;
  min-width: 280px !important;
  max-height: 270px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px !important;
  border: 1px solid #b8a6e8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(37, 28, 70, 0.25) !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}

.category-suggestions button,
.board-field .category-suggestions button {
  width: 100% !important;
  text-align: left !important;
  padding: 8px 10px !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.78rem !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  border-bottom: 1px solid #f1f0f7 !important;
  min-height: 48px !important;
}

.category-suggestions button:last-child {
  border-bottom: none !important;
}

.category-suggestions button:hover,
.category-suggestions button.is-active {
  background: #f5f3ff !important;
  color: var(--primary) !important;
}

.category-suggestions small,
.board-field .category-suggestions small {
  color: #6b7280 !important;
  font-size: 0.68rem !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.35 !important;
}

/* Output card for Recommended Price in Row 2 */
.board-output {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  min-height: 50px !important;
  padding: 4px 10px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1px solid var(--line) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.board-output-recommended {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 4px 12px !important;
  background: linear-gradient(135deg, #5b36d6, #7852f5) !important;
}

.board-output-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  min-width: 0 !important;
}

.board-output-meta small {
  font-size: 0.63rem !important;
  opacity: 0.92 !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
  color: #e0e7ff !important;
}

.board-output-meta strong {
  font-size: 1rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
}

.btn-apply-price {
  padding: 4px 9px !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: var(--primary-dark) !important;
  border: none !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
}
.btn-apply-price:hover{background:#fff;color:var(--primary-dark);box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* Thước đo dải giá thị trường trực quan */
.price-gauge{margin-top:10px;padding:10px 12px;border:1px solid #dcd4f5;border-radius:9px;background:#fff}
.gauge-labels{display:flex;justify-content:space-between;margin-bottom:6px;color:var(--muted);font-size:.64rem;font-weight:700}
.gauge-median{color:var(--primary-dark);font-weight:850}
.gauge-track{position:relative;height:8px;border-radius:999px;background:linear-gradient(90deg,#bbf7d0,#fef08a,#fecaca)}
.gauge-median-mark{position:absolute;top:-2px;bottom:-2px;width:2px;transform:translateX(-50%);background:var(--primary);border-radius:1px}
.gauge-current-marker{position:absolute;top:50%;transform:translate(-50%,-50%)}
.marker-pin{display:inline-block;padding:2px 6px;border-radius:999px;background:var(--ink);color:#fff;font-size:.56rem;font-weight:850;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.2)}

.strategy-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1060px){.strategy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){
  .calculator-product-bar{padding-inline:8px;flex-wrap:wrap}
  .calculator-product-tabs{width:100%}
  .calculator-product-tab{min-width:95px;padding-inline:8px 6px}
  .calculator-product-actions{width:100%;justify-content:flex-end;margin-top:4px}
  .strategy-grid{grid-template-columns:1fr}
  .result-actions{display:grid;width:100%;grid-template-columns:max-content minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:5px;align-items:stretch}
  .result-actions .btn{min-width:0;min-height:36px;padding:5px 6px;font-size:.62rem;line-height:1.15;white-space:normal}
  .result-actions #feeBadge{min-height:36px;padding-inline:7px;font-size:.62rem}
}

/* Khối cảnh báo lỗ vốn nhấp nháy đỏ & đề xuất tối ưu */
.loss-alert-card{margin:12px 20px 16px;padding:16px 18px;border:2px solid #ef4444;border-radius:14px;background:#fff5f5;box-shadow:0 4px 20px rgba(239,68,68,.18);animation:pulse-alert-border 1.8s infinite ease-in-out}
@keyframes pulse-alert-border{0%,100%{border-color:#ef4444;box-shadow:0 0 0 0 rgba(239,68,68,.4),0 4px 16px rgba(239,68,68,.12)}50%{border-color:#b91c1c;box-shadow:0 0 0 6px rgba(239,68,68,.15),0 6px 24px rgba(239,68,68,.25)}}
.loss-alert-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #fecaca}
.loss-alert-badge{display:inline-flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;background:#dc2626;color:#fff;font-size:.74rem;font-weight:850;letter-spacing:.03em;box-shadow:0 2px 8px rgba(220,38,38,.35)}
.loss-alert-pulse{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse-dot 1s infinite alternate}
@keyframes pulse-dot{from{opacity:.3;transform:scale(.8)}to{opacity:1;transform:scale(1.3)}}
.loss-alert-channels{color:#991b1b;font-size:.76rem;font-weight:750}
.loss-alert-body{display:grid;grid-template-columns:minmax(300px,1fr) minmax(320px,1.2fr);gap:16px;margin-top:14px}
.loss-target-price-box{padding:14px;border:1px solid #fca5a5;border-radius:12px;background:#fff}
.target-price-label{display:block;color:#991b1b;font-size:.7rem;font-weight:850;letter-spacing:.02em}
.target-price-row{display:flex;align-items:center;gap:12px;margin:8px 0;flex-wrap:wrap}
.target-price-val{color:#15803d;font-size:1.35rem;font-weight:900;letter-spacing:-.02em}
.btn-apply-min10{padding:8px 14px;border:0;border-radius:8px;background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;font:inherit;font-size:.72rem;font-weight:850;cursor:pointer;box-shadow:0 4px 12px rgba(22,163,74,.28);transition:all .15s ease}
.btn-apply-min10:hover{background:linear-gradient(135deg,#15803d,#166534);transform:translateY(-1px);box-shadow:0 6px 16px rgba(22,163,74,.35)}
.target-price-sub{display:block;color:#6b7280;font-size:.64rem;line-height:1.3}
.loss-optimize-column{padding:14px;border:1px solid #fed7aa;border-radius:12px;background:#fffbeb}
.loss-optimize-title{display:block;margin-bottom:8px;color:#9a3412;font-size:.7rem;font-weight:850}
.loss-optimize-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.loss-optimize-list li{position:relative;padding-left:16px;color:#7c2d12;font-size:.68rem;line-height:1.35}
.loss-optimize-list li::before{content:"•";position:absolute;left:3px;color:#ea580c;font-weight:900;font-size:.85rem}
.loss-optimize-list strong{color:#431407}

/* Nhấp nháy đỏ trên ô kết quả bị âm trong bảng */
.profit-table .row-profit td.negative,.result-cell.profit.negative{animation:pulse-loss-cell 1.5s infinite ease-in-out}
@keyframes pulse-loss-cell{0%,100%{background:#fee2e2;color:#dc2626}50%{background:#fecaca;color:#991b1b}}

@media(max-width:900px){
  .loss-alert-body{grid-template-columns:1fr}
  .loss-alert-card{margin:8px 10px 12px;padding:12px 14px}
}

/* =========================================================
   MOBILE ANTI-ZOOM & ERGONOMIC TOUCH CONTROLS
   Ngăn chặn việc iOS Safari / WebKit tự động phóng to màn hình khi chạm vào ô nhập.
   ========================================================= */
@media screen and (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
    touch-action: pan-y;
  }
  input,
  select,
  textarea,
  .board-field input,
  .board-field select,
  .input-suffix input,
  .product-category-tool input,
  .category-combobox input,
  .vnd-input,
  .multi-table input,
  .multi-table select,
  .advanced-grid input,
  .advanced-grid select {
    font-size: 16px !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    touch-action: manipulation;
  }
  .board-field {
    min-height: 52px;
    padding: 8px 10px;
  }
  .board-pair {
    grid-template-columns: minmax(105px, 1fr) 95px;
  }
  .board-field .input-suffix input {
    padding-right: 28px;
  }
  .board-field .input-suffix > span {
    font-size: 14px;
    right: 9px;
  }
}

/* =========================================================
   PUBLIC STATS BANNER (SOCIAL PROOF / QUẢNG CÁO ĐẦU TRANG)
   ========================================================= */
.public-stats-banner {
  margin: 0 0 16px;
  padding: 14px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff, #f9f7ff);
  box-shadow: 0 4px 20px rgba(110, 74, 232, 0.05);
}

.stats-banner-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 0.72rem;
  font-weight: 850;
  color: var(--primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stats-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  animation: pulse-dot 2s infinite ease-in-out;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(110, 74, 232, 0.12);
  border-radius: 12px;
  background: #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(110, 74, 232, 0.08);
}

.stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--soft);
  font-size: 1.25rem;
  flex-shrink: 0;
}

.stat-info {
  display: grid;
  gap: 2px;
}

.stat-info strong {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.stat-info small {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 650;
}

/* =========================================================
   HEADER ACCOUNT HUB (ĐĂNG NHẬP / ĐĂNG XUẤT / QUẢN LÝ SHOP)
   ========================================================= */
.account-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.retention-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: #ede7ff;
  color: var(--primary);
  font-size: 0.68rem;
  font-weight: 800;
}

.retention-pill.permanent {
  background: #fef3c7;
  color: #b45309;
}

.btn-login-nav {
  min-height: 38px;
  padding: 6px 14px;
  font-size: 0.78rem;
}

.btn-workspace-nav,
.btn-admin-nav,
.btn-logout-nav {
  min-height: 38px;
  padding: 6px 11px;
  font-size: 0.74rem;
}

.btn-admin-nav {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

/* =========================================================
   KOC DEAL FLOOR & MAX VOUCHER CARD
   ========================================================= */
.koc-floor-card {
  margin: 12px 0 16px;
  padding: 14px 18px;
  border: 1px solid #c7d2fe;
  border-radius: 14px;
  background: linear-gradient(135deg, #eef2ff, #f8faff);
}

.koc-floor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.koc-floor-badge {
  font-size: 0.74rem;
  font-weight: 900;
  color: #4338ca;
  letter-spacing: 0.03em;
}

.koc-floor-desc {
  font-size: 0.68rem;
  color: #6366f1;
  font-weight: 600;
}

.koc-floor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.koc-floor-item {
  padding: 12px 14px;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
  background: #ffffff;
}

.koc-floor-item.highlight {
  border-color: #86efac;
  background: #f0fdf4;
}

.koc-floor-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  color: #4b5563;
  margin-bottom: 4px;
}

.koc-floor-val {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.koc-floor-val.price {
  color: #15803d;
}

.koc-floor-sub {
  display: block;
  margin-top: 4px;
  font-size: 0.65rem;
  color: #6b7280;
}

.koc-floor-sub b {
  color: #4f46e5;
}

/* =========================================================
   WORKSPACE & ADMIN MODALS
   ========================================================= */
dialog {
  padding: 0 !important;
  border: none !important;
  border-radius: 16px;
  background: transparent;
  max-width: 100vw !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

dialog::backdrop {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
}

.workspace-modal-card,
.admin-modal-card {
  box-sizing: border-box !important;
  max-width: calc(100vw - 20px);
  max-height: 90vh;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior-x: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(23, 17, 62, 0.2);
  margin: auto;
}

.workspace-modal-card {
  width: min(720px, calc(100vw - 20px));
  padding: 24px;
}

.admin-modal-card {
  width: min(960px, calc(100vw - 20px));
  padding: 24px;
}

.workspace-save-box {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  padding: 14px;
  margin: 14px 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fcfbfe;
}

.workspace-save-box .field {
  margin-bottom: 0;
}

.workspace-sheets-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.sheet-item-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.15s ease;
}

.sheet-item-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(110, 74, 232, 0.08);
}

.sheet-item-info {
  display: grid;
  gap: 3px;
}

.sheet-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 850;
  color: var(--ink);
}

.sheet-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  color: var(--muted);
}

.sheet-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 16px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  box-sizing: border-box;
  width: 100%;
}

.admin-tabs button {
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.admin-tabs button.active {
  background: var(--soft);
  color: var(--primary);
  border-color: var(--line);
}

.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-sizing: border-box;
  width: 100%;
  font-size: 0.75rem;
}

.admin-table-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 12px;
}

.admin-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.admin-table th,
.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.admin-table thead th {
  background: #f8f6fd;
  font-weight: 850;
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 1;
}

@media screen and (max-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .koc-floor-grid {
    grid-template-columns: 1fr;
  }
  .workspace-save-box {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  .workspace-modal-card,
  .admin-modal-card {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 92vh !important;
    padding: 14px 10px !important;
    border-radius: 12px;
  }

  .admin-tabs button {
    flex: 1 1 auto;
    text-align: center;
    padding: 7px 8px;
    font-size: 0.72rem;
  }

  .admin-bulk-bar {
    padding: 6px 8px;
    gap: 6px;
    font-size: 0.7rem;
  }

  .admin-bulk-bar button {
    padding: 4px 8px;
    font-size: 0.68rem;
  }

  .sheet-item-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
  }

  .sheet-item-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

@media screen and (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}


/* Input Board Standalone (100% width above table) */
.input-board-container {
  padding: 0 24px 16px;
}
.input-board {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: visible !important;
  box-shadow: 0 2px 12px rgba(110, 74, 232, 0.05) !important;
  text-align: left !important;
}
.board-field {
  display: grid !important;
  grid-template-columns: minmax(118px, 1fr) minmax(110px, 1.1fr) !important;
  gap: 8px !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #ffffff !important;
  font-size: 0.74rem !important;
}
.board-field.wide {
  grid-column: span 2 !important;
}
.board-field.target {
  background: #fff9db !important;
}
.board-field > span:first-child {
  font-weight: 800 !important;
}
.board-field b {
  margin-left: 4px !important;
  color: var(--primary) !important;
  white-space: nowrap !important;
}
.board-field input, .board-field select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  border: 1px solid #cfc8df !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 0.78rem !important;
}
.board-field .input-suffix input {
  padding-right: 26px !important;
  text-align: right !important;
  font-weight: 850 !important;
}
.board-output {
  display: flex !important;
  min-height: 48px !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 6px 14px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
}
.board-output-wide {
  grid-column: span 2 !important;
}
@media (max-width: 1024px) {
  .input-board-container {
    padding: 0 14px 12px !important;
  }
  .input-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .board-field.wide, .board-output-wide {
    grid-column: span 2 !important;
  }
}
@media (max-width: 640px) {
  .input-board {
    grid-template-columns: 1fr !important;
  }
  .board-field, .board-field.wide, .board-output-wide {
    grid-column: auto !important;
    grid-template-columns: minmax(110px, 0.9fr) minmax(0, 1.1fr) !important;
  }
  .board-output {
    align-items: flex-start !important;
  }
}

/* Header & Account Box Improvements */
.app-header {
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 10px 24px !important;
}
.header-start {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.account-box {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  flex-wrap: wrap !important;
}
.btn-login-nav {
  min-height: 38px !important;
  padding: 6px 16px !important;
  border-radius: 8px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.btn-login-nav:hover {
  background: var(--primary-dark) !important;
}
.btn-workspace-nav {
  min-height: 38px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: var(--soft) !important;
  color: var(--primary-dark) !important;
  border: 1px solid var(--line) !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.btn-admin-nav {
  min-height: 38px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: #fff7ed !important;
  color: #c2410c !important;
  border: 1px solid #fdba74 !important;
  font-weight: 800 !important;
  cursor: pointer !important;
}
.btn-logout-nav {
  min-height: 38px !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}


/* Highlight Cost & Customer Price Inputs */
.board-field-highlight {
  background: #f0f7ff !important;
  border-left: 4px solid #3b82f6 !important;
}
.board-field-highlight > span:first-child {
  color: #1d4ed8 !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* removed emoji */
.board-field-highlight input {
  border-color: #93c5fd !important;
  background: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
  color: #1e3a8a !important;
  box-shadow: inset 0 1px 3px rgba(59, 130, 246, 0.1) !important;
}
.board-field-highlight input:focus {
  border-color: #2563eb !important;
  outline: 2px solid rgba(37, 99, 235, 0.25) !important;
}

.board-field-highlight-primary {
  background: #f0fdf4 !important;
  border-left: 4px solid #10b981 !important;
}
.board-field-highlight-primary > span:first-child {
  color: #047857 !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
/* removed emoji */
.board-field-highlight-primary input {
  border-color: #86efac !important;
  background: #ffffff !important;
  font-size: 0.95rem !important;
  font-weight: 850 !important;
  color: #064e3b !important;
  box-shadow: inset 0 1px 3px rgba(16, 185, 129, 0.1) !important;
}
.board-field-highlight-primary input:focus {
  border-color: #059669 !important;
  outline: 2px solid rgba(5, 150, 105, 0.25) !important;
}

/* Shared Notice Banner */
.shared-notice-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  margin: 10px 24px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.shared-notice-banner.guest {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}
.shared-notice-banner.user {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.shared-notice-banner .btn-banner-action {
  padding: 5px 12px;
  border-radius: 6px;
  background: #d97706;
  color: #ffffff;
  border: none;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.shared-notice-banner .btn-banner-action:hover {
  background: #b45309;
}

/* Guest Warning in Dialog */
.guest-share-warning {
  padding: 10px 14px;
  margin: 10px 0;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.78rem;
  line-height: 1.45;
}
.guest-share-warning button {
  color: #b45309;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}


/* 2-Row Compact Input Board on Desktop */
@media (min-width: 1025px) {
  .input-board {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 0 !important;
  }
  .input-board .board-field.col-span-2 {
    grid-column: span 2 !important;
  }
  .input-board .board-output.col-span-2 {
    grid-column: span 2 !important;
  }
  .input-board .board-output.col-span-1 {
    grid-column: span 1 !important;
  }
}

@media (max-width: 1024px) and (min-width: 641px) {
  .input-board {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .input-board .board-field.col-span-2,
  .input-board .board-output.col-span-2 {
    grid-column: span 2 !important;
  }
}

@media (max-width: 640px) {
  .input-board {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  .input-board .board-field.col-span-2,
  .input-board .board-output.col-span-2 {
    grid-column: auto !important;
  }
}

/* Secondary collapsible fees drawer */
.advanced-fees-details {
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #fbfaff !important;
  overflow: hidden !important;
}
.advanced-fees-details summary {
  padding: 9px 20px !important;
  font-size: 0.75rem !important;
  font-weight: 750 !important;
  color: var(--primary) !important;
  cursor: pointer !important;
  background: #f5f2ff !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  user-select: none !important;
}
.advanced-fees-details summary:hover {
  background: #ede8ff !important;
}
.advanced-fees-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px 20px !important;
  background: #ffffff !important;
}
@media (max-width: 1024px) {
  .advanced-fees-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .advanced-fees-grid {
    grid-template-columns: 1fr;
  }
}

/* Admin Dialog Mobile Touch & Sliding Fix */
#adminDialog .dialog-card {
  width: min(960px, calc(100vw - 20px)) !important;
  max-width: 960px !important;
  max-height: 90vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px !important;
  overflow: hidden !important;
}
.admin-scroll-wrapper {
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  flex: 1 1 auto !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  margin-top: 10px !important;
  background: #ffffff !important;
}
.admin-scroll-wrapper table {
  min-width: 700px !important;
  width: 100% !important;
  border-collapse: collapse !important;
}
.admin-scroll-wrapper th, .admin-scroll-wrapper td {
  padding: 8px 10px !important;
  font-size: 0.75rem !important;
  border-bottom: 1px solid var(--line) !important;
}
.admin-scroll-wrapper th {
  background: var(--soft) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* Admin Bulk Actions Bar */
.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 10px 0;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 0.8rem;
  font-weight: 700;
  flex-wrap: wrap;
}
.admin-bulk-bar button {
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
}

@media (max-width: 640px) {
  #adminDialog .dialog-card {
    width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    padding: 10px !important;
  }
}


/* ============================================================================
   RESPONSIVE TOP ACTION TOOLBAR (DESKTOP & COMPACT MOBILE)
   ============================================================================ */
.btn-label-mobile {
  display: none !important;
}
.btn-label-desktop {
  display: inline !important;
}

/* Top Toolbar under page title */
.top-action-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 24px 14px !important;
  border-bottom: 1px solid var(--line) !important;
  background: #faf8ff !important;
  flex-wrap: wrap !important;
}

.top-action-toolbar .product-category-tool {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 360px !important;
  max-width: 580px !important;
}

.top-action-toolbar .product-category-tool input {
  height: 38px !important;
  min-height: 38px !important;
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
}

.top-action-toolbar .result-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-left: auto !important;
}

.top-action-toolbar .result-actions .btn {
  height: 38px !important;
  min-height: 38px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  white-space: nowrap !important;
}

.shop-type-toggle {
  display: inline-flex !important;
  align-items: center !important;
  background: #ede9f6 !important;
  padding: 3px !important;
  border-radius: 20px !important;
  border: 1px solid #dcd3ee !important;
  gap: 3px !important;
}

.shop-type-btn {
  border: none !important;
  background: transparent !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #685f82 !important;
  padding: 5px 12px !important;
  border-radius: 16px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.shop-type-btn:hover {
  color: #2b2342 !important;
}

.shop-type-btn.active[data-type="standard"] {
  background: #ffffff !important;
  color: #2f27ce !important;
  box-shadow: 0 1px 4px rgba(47, 39, 206, 0.15) !important;
}

.shop-type-btn.active[data-type="mall"] {
  background: linear-gradient(135deg, #d32f2f, #b71c1c) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(211, 47, 47, 0.35) !important;
}

.fee-diff-tag {
  display: inline-block;
  font-size: 0.85em;
  font-weight: 750;
  margin-left: 3px;
}
.fee-diff-tag.higher {
  color: #d32f2f;
}
.fee-diff-tag.lower {
  color: #1b873f;
}

/* Compact layout on tablets & phones */
@media (max-width: 900px) {
  .btn-label-desktop {
    display: none !important;
  }
  .btn-label-mobile {
    display: inline !important;
  }

  .top-action-toolbar {
    padding: 8px 10px !important;
    gap: 6px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Row 1: Product search input & button */
  .top-action-toolbar .product-category-tool {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    gap: 5px !important;
  }

  .top-action-toolbar .product-category-tool input {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 4px 8px !important;
    font-size: 0.74rem !important;
    border-radius: 8px !important;
  }

  .top-action-toolbar .product-category-tool .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 33px !important;
    min-height: 33px !important;
    padding: 4px 10px !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  /* Row 2 & 3: Structured, compact 3-column action grid */
  .top-action-toolbar .result-actions {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 5px !important;
    margin: 0 !important;
    align-items: center !important;
  }

  /* Sub-row 1: Shop Toggle (spans 2 cols) & Fee Badge (spans 1 col, right-aligned) */
  .top-action-toolbar .shop-type-toggle {
    grid-column: 1 / 3 !important;
    justify-self: start !important;
    padding: 2px !important;
    border-radius: 12px !important;
  }

  .top-action-toolbar .shop-type-btn {
    padding: 3px 8px !important;
    font-size: 0.68rem !important;
    border-radius: 10px !important;
  }

  .top-action-toolbar #feeBadge {
    grid-column: 3 / 4 !important;
    justify-self: end !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 1px 6px !important;
    font-size: 0.67rem !important;
    font-weight: 750 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .top-action-toolbar #categoryRate {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    height: 26px !important;
    min-height: 26px !important;
    padding: 1px 8px !important;
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Sub-row 2: 3 Action buttons spanning 1 col each */
  .top-action-toolbar #copyPricingSummary {
    grid-column: 1 / 2 !important;
  }

  .top-action-toolbar #addCurrentProduct,
  .top-action-toolbar #addProductQuick {
    grid-column: 2 / 3 !important;
  }

  .top-action-toolbar #shareCalculation,
  .top-action-toolbar #shareShopeeCalculation {
    grid-column: 3 / 4 !important;
  }

  .top-action-toolbar .result-actions .btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 3px 4px !important;
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    border-radius: 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ============================================================================
   EXACT 2-ROW FULL-WIDTH CLEAN INPUT BOARD & ZERO OVERFLOW
   ============================================================================ */
.input-board-container {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  -webkit-overflow-scrolling: touch !important;
}

.input-board-status {
  padding: 4px 20px !important;
  margin: 0 !important;
}

.input-board {
  display: grid !important;
  width: 100% !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  overflow: visible !important;
  box-shadow: none !important;
  position: relative !important;
  box-sizing: border-box !important;
}

@media (min-width: 1120px) {
  .input-board {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    grid-template-rows: auto auto !important;
  }
  .input-board > :nth-child(6n) {
    border-right: none !important;
  }
}
@media (max-width: 1119px) and (min-width: 760px) {
  .input-board {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .input-board > :nth-child(3n) {
    border-right: none !important;
  }
}

@media (max-width: 1023px) and (min-width: 681px) {
  .input-board {
    grid-template-columns: 1fr 1fr !important;
  }
  .input-board > :nth-child(2n) {
    border-right: none !important;
  }
}

@media (max-width: 680px) {
  .input-board {
    grid-template-columns: 1fr !important;
  }
  .input-board > * {
    border-right: none !important;
  }
}

.board-field {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  min-height: 46px !important;
  padding: 6px 10px !important;
  border-right: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
  background: #ffffff !important;
  min-width: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* KHÔNG BAO GIỜ CHO PHÉP XUỐNG DÒNG */
.board-field > span:first-child {
  white-space: nowrap !important;
  font-size: 0.76rem !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  color: #1e1b4b !important;
  letter-spacing: -0.2px !important;
}

.board-field b {
  color: var(--primary) !important;
  font-weight: 850 !important;
  margin-left: 3px !important;
  white-space: nowrap !important;
}

.board-field .input-suffix {
  position: relative !important;
  flex: 1 1 auto !important;
  min-width: 65px !important;
}

.board-field select,
.board-field .category-combobox {
  flex: 1 1 auto !important;
  min-width: 80px !important;
  position: relative !important;
}

.board-field input,
.board-field select {
  width: 100% !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 4px 6px !important;
  border: 1px solid #cfc8df !important;
  border-radius: 7px !important;
  font-size: 0.78rem !important;
  text-overflow: ellipsis !important;
}

.board-field .input-suffix input {
  padding-right: 20px !important;
  text-align: right !important;
  font-weight: 850 !important;
}

.board-field .input-suffix span {
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 0.72rem !important;
  color: var(--muted) !important;
}

/* Category Suggestions Autocomplete Dropdown - 5 dòng chuẩn kèm thanh cuộn */
.category-suggestions,
.board-field .category-suggestions {
  position: absolute !important;
  z-index: 99999 !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  width: min(520px, calc(100vw - 32px)) !important;
  min-width: 280px !important;
  max-height: 270px !important; /* Chuẩn 5 dòng kèm scrollbar mượt */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px !important;
  border: 1px solid #b8a6e8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(37, 28, 70, 0.25) !important;
  overscroll-behavior: contain !important;
  scrollbar-width: thin !important;
}

.category-suggestions button,
.board-field .category-suggestions button {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 5px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #f0ecf8 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #1e1b4b !important;
  cursor: pointer !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

.category-suggestions button:last-child,
.board-field .category-suggestions button:last-child {
  border-bottom: 0 !important;
}

.category-suggestions button:hover,
.category-suggestions button:focus-visible,
.board-field .category-suggestions button:hover,
.board-field .category-suggestions button:focus-visible {
  background: #f3efff !important;
  outline: none !important;
}

.category-suggestions strong,
.board-field .category-suggestions strong {
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #1e1b4b !important;
}

.category-suggestions small,
.board-field .category-suggestions small {
  display: block !important;
  margin-top: 2px !important;
  overflow: hidden !important;
  color: #6b7280 !important;
  font-size: 0.65rem !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

/* Outputs in Row 2 */
.board-output {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  min-height: 46px !important;
  padding: 4px 10px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-bottom: 1px solid var(--line) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.board-output small {
  font-size: 0.64rem !important;
  opacity: 0.9 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

.board-output strong {
  font-size: 0.92rem !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.board-output-recommended {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
}

.board-output-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  min-width: 0 !important;
}

.btn-apply-price {
  padding: 2px 7px !important;
  border-radius: 5px !important;
  background: #ffffff !important;
  color: var(--primary-dark) !important;
  border: none !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
}
.btn-apply-price:hover {
  background: #f3efff !important;
}

/* ============================================================================
   PRO FEATURE CARD (SO SÁNH THỊ TRƯỜNG & ĐỀ XUẤT CHIẾN LƯỢC)
   ============================================================================ */
.premium-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 20px !important;
  border-top: 1px solid #e2d9f3 !important;
  background: linear-gradient(100deg, #fbfaff 0%, #f4f0ff 100%) !important;
}

@media (max-width: 900px) {
  .premium-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }
}

.pro-card-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.pro-card-row-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.pro-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 9px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
  color: #ffffff !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 6px rgba(79, 70, 229, 0.25) !important;
  text-transform: uppercase !important;
}

.pro-card-title {
  margin: 0 !important;
  font-size: 0.96rem !important;
  font-weight: 850 !important;
  color: #1e1b4b !important;
  letter-spacing: -0.2px !important;
}

.pro-card-desc {
  margin: 0 !important;
  font-size: 0.77rem !important;
  color: #64748b !important;
  line-height: 1.35 !important;
}

.btn-pro-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 8px 20px !important;
  border-radius: 9px !important;
  border: 1px solid #6d28d9 !important;
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%) !important;
  color: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35) !important;
  transition: all 0.18s ease !important;
  text-decoration: none !important;
}

.btn-pro-action:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45) !important;
}

/* ============================================================================
   QUICK WORKSPACE SAVE GROUP (ĐẶT TÊN BẢNG & LƯU BẢNG NHANH)
   ============================================================================ */
.workspace-quick-save-group {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #f8f6fc !important;
  border: 1px solid #d5cde8 !important;
  border-radius: 8px !important;
  padding: 2px 4px 2px 8px !important;
}

.workspace-title-input {
  border: none !important;
  background: transparent !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  color: #1e1b4b !important;
  width: 170px !important;
  min-width: 130px !important;
  outline: none !important;
  padding: 2px 0 !important;
}

.workspace-title-input::placeholder {
  color: #948aa8 !important;
  font-weight: 500 !important;
}

.btn-quick-save {
  height: 30px !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  background: var(--primary) !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  box-shadow: 0 2px 6px rgba(110, 74, 232, 0.25) !important;
  transition: all 0.15s ease !important;
}

.btn-quick-save:hover {
  background: var(--primary-dark) !important;
  transform: translateY(-1px) !important;
}

.btn-quick-save.saved-success {
  background: #15803d !important;
  box-shadow: 0 2px 6px rgba(21, 128, 61, 0.3) !important;
}

/* ============================================================================
   PRO MARKET INTELLIGENCE, OPTIMAL PRICING, BENCHMARK & VIDEO STYLING
   ============================================================================ */
.section-sub-header {
  margin: 18px 0 12px;
  padding: 0 4px;
}
.sub-header-title {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 850;
  color: #1e1b4b;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sub-header-desc {
  margin: 3px 0 0;
  font-size: 0.74rem;
  color: #64748b;
  font-weight: 500;
}

.optimal-pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 18px;
}
@media (max-width: 768px) {
  .optimal-pricing-tiers {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.pricing-tier-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  transition: all 0.18s ease;
}
.pricing-tier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.tier-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 2px;
}
.tier-price {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.15;
}
.tier-desc {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.3;
}

.tier-penetration {
  border-color: #a7f3d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}
.tier-penetration .tier-tag { color: #047857; }
.tier-penetration .tier-price { color: #065f46; }

.tier-optimal {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #f5f3ff 0%, #ffffff 100%);
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.12);
}
.tier-optimal .tier-tag { color: #6d28d9; }
.tier-optimal .tier-price { color: #4c1d95; }
.tier-optimal.highlight {
  border-width: 2px;
  border-color: #7c3aed;
}

.tier-premium {
  border-color: #fed7aa;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
}
.tier-premium .tier-tag { color: #c2410c; }
.tier-premium .tier-price { color: #9a3412; }

.comparable-wrapper {
  margin: 16px 0;
}
.comparable-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.benchmarked-product-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.18s ease;
}
.benchmarked-product-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.12);
  transform: translateY(-2px);
}
.product-img-wrap {
  width: 76px;
  height: 76px;
  border-radius: 9px;
  overflow: hidden;
  background: #f1f5f9;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-icon-fallback {
  font-size: 1.8rem;
}
.product-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.product-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 750;
  color: #1e293b;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.product-price {
  font-size: 0.95rem;
  font-weight: 850;
  color: #4338ca;
}
.badge-sales {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fef2f2;
  color: #dc2626;
  font-size: 0.65rem;
  font-weight: 750;
}
.product-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.68rem;
  color: #64748b;
}
.product-seller {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}
.product-rev {
  font-weight: 700;
  color: #059669;
}
.product-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.btn-view-tiktok {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  background: #0f172a;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-view-tiktok:hover {
  background: #1e293b;
  color: #38bdf8;
  transform: translateY(-1px);
}
.btn-view-detail {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: #475569;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-view-detail:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.top-videos-wrapper {
  margin: 20px 0 16px;
}
.top-videos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.market-video-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.18s ease;
}
.market-video-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.09);
  border-color: #cbd5e1;
}
.video-cover-wrap {
  width: 100%;
  height: 140px;
  position: relative;
  background: #0f172a;
  cursor: pointer;
  overflow: hidden;
}
.video-cover-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.video-cover-wrap:hover img {
  transform: scale(1.05);
}
.video-cover-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #64748b;
}
.play-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.75);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  transition: all 0.18s ease;
}
.video-cover-wrap:hover .play-overlay {
  background: rgba(79, 70, 229, 0.9);
  transform: translate(-50%, -50%) scale(1.12);
}
.video-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  font-size: 0.62rem;
  font-weight: 750;
}
.video-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
}
.video-author {
  font-size: 0.68rem;
  font-weight: 750;
  color: #6366f1;
}
.video-caption {
  margin: 0;
  font-size: 0.74rem;
  color: #334155;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.68rem;
  border-top: 1px dashed #f1f5f9;
  border-bottom: 1px dashed #f1f5f9;
}
.v-stat {
  color: #475569;
  font-weight: 650;
}
.v-stat.gmv {
  color: #059669;
  font-weight: 800;
}
.video-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.btn-play-video {
  flex: 1 1 auto;
  padding: 5px 8px;
  border-radius: 6px;
  border: none;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 750;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-play-video:hover {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}
.btn-tiktok-video {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  color: #1e293b;
  font-size: 0.7rem;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-tiktok-video:hover {
  background: #0f172a;
  color: #ffffff;
}

.market-portal-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 100%);
  color: #ffffff;
  margin: 20px 0 12px;
  box-shadow: 0 4px 18px rgba(46, 16, 101, 0.25);
  flex-wrap: wrap;
}
.market-portal-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-width: 650px;
}
.market-portal-title {
  font-size: 0.95rem;
  font-weight: 850;
  color: #ffffff;
}
.market-portal-desc {
  margin: 0;
  font-size: 0.75rem;
  color: #cbd5e1;
  line-height: 1.35;
}
.btn-market-portal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: 8px;
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(236, 72, 153, 0.35);
  transition: all 0.18s ease;
}
.btn-market-portal:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(236, 72, 153, 0.45);
}

.video-modal .video-modal-card {
  width: min(540px, calc(100vw - 24px));
  padding: 18px;
  border-radius: 14px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  position: relative;
}
.video-modal-card h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 850;
  color: #1e1b4b;
  padding-right: 28px;
}
.video-container {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #000000;
  min-height: 320px;
}
.video-modal-actions {
  display: flex;
  justify-content: flex-end;
}

/* ============================================================================
   EXECUTIVE GROWTH BLUEPRINT & MASTER STRATEGY SECTIONS
   ============================================================================ */
.strategy-executive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.strategy-executive-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Macro Market Dashboard Card */
.macro-market-card {
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}
.macro-market-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 8px;
}
.macro-market-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 850;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 6px;
}
.macro-kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.macro-kpi-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.macro-kpi-item small {
  font-size: 0.7rem;
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.macro-kpi-item strong {
  font-size: 1.05rem;
  font-weight: 900;
  color: #1e1b4b;
}
.macro-kpi-item span {
  font-size: 0.72rem;
  color: #10b981;
  font-weight: 700;
}
.macro-insight-box {
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #1e3a8a;
  line-height: 1.45;
}

/* 4-Week Execution Roadmap */
.roadmap-wrapper {
  margin-top: 20px;
  margin-bottom: 20px;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.roadmap-week-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.roadmap-week-card:hover {
  transform: translateY(-2px);
  border-color: #cbd5e1;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.roadmap-week-badge {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.roadmap-week-card:nth-child(1) .roadmap-week-badge { background: #dbeafe; color: #1d4ed8; }
.roadmap-week-card:nth-child(2) .roadmap-week-badge { background: #fce7f3; color: #be185d; }
.roadmap-week-card:nth-child(3) .roadmap-week-badge { background: #fef3c7; color: #b45309; }
.roadmap-week-card:nth-child(4) .roadmap-week-badge { background: #d1fae5; color: #047857; }
.roadmap-week-title {
  font-size: 0.88rem;
  font-weight: 850;
  color: #0f172a;
  margin: 0;
  line-height: 1.3;
}
.roadmap-week-focus {
  font-size: 0.73rem;
  color: #64748b;
  font-weight: 600;
  margin: 0;
}
.roadmap-tasks-list {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roadmap-tasks-list li {
  font-size: 0.76rem;
  color: #334155;
  line-height: 1.35;
}

/* Content Blueprint */
.content-blueprint-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
}
.content-blueprint-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.blueprint-box {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border-left: 3px solid #64748b;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.blueprint-box.box-hook { border-left-color: #f59e0b; background: #fffbeb; }
.blueprint-box.box-pain { border-left-color: #ef4444; background: #fef2f2; }
.blueprint-box.box-solution { border-left-color: #10b981; background: #ecfdf5; }
.blueprint-box.box-cta { border-left-color: #6366f1; background: #eef2ff; }
.blueprint-box small {
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}
.blueprint-box.box-hook small { color: #b45309; }
.blueprint-box.box-pain small { color: #b91c1c; }
.blueprint-box.box-solution small { color: #047857; }
.blueprint-box.box-cta small { color: #4338ca; }
.blueprint-box p {
  margin: 0;
  font-size: 0.76rem;
  color: #1e293b;
  line-height: 1.4;
}

/* Top Creators Grid & Cards */
.top-creators-wrapper, .top-shops-wrapper {
  margin-top: 24px;
}
.top-creators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.creator-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.03);
  transition: transform 0.18s ease;
}
.creator-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
}
.creator-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.creator-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.creator-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.creator-name {
  font-size: 0.82rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-handle {
  font-size: 0.7rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.creator-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 0.72rem;
}
.creator-stat-val {
  font-weight: 850;
  color: #1e1b4b;
}
.creator-actions-row {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.btn-creator-tiktok {
  flex: 1;
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #334155;
  font-size: 0.7rem;
  font-weight: 750;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-creator-tiktok:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.btn-creator-invite {
  flex: 1;
  text-align: center;
  padding: 5px 8px;
  border-radius: 6px;
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.15s ease;
}
.btn-creator-invite:hover {
  opacity: 0.92;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.35);
}

/* Top Shops Grid */
.top-shops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.shop-benchmark-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shop-logo {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.shop-name {
  font-size: 0.82rem;
  font-weight: 850;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: #64748b;
}
.shop-revenue-highlight {
  font-size: 0.95rem;
  font-weight: 900;
  color: #4f46e5;
}

.exec-title {
  margin: 6px 0 2px !important;
  font-size: 1.1rem !important;
  font-weight: 900 !important;
  color: #0f172a !important;
}
.exec-subtitle {
  margin: 0 !important;
  font-size: 0.78rem !important;
  color: #64748b !important;
}
.exec-source {
  font-size: 0.75rem !important;
  color: #475569 !important;
  background: #f8fafc !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #e2e8f0 !important;
}
.macro-badge-pill {
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  color: #6366f1 !important;
  background: #eef2ff !important;
  padding: 2px 8px !important;
  border-radius: 6px !important;
}
.macro-kpi-note {
  color: #64748b !important;
}
.macro-kpi-channel {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
}
.macro-kpi-affiliate {
  color: #4f46e5 !important;
}
.creator-stat-gmv {
  color: #10b981 !important;
}
.shop-name-col {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.shop-rev-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 6px !important;
  background: #f8fafc !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
}
.section-sub-header {
  margin-bottom: 8px !important;
}

/* ============================================================================
   AI ANALYSIS ANIMATED LOADING PROGRESS BAR WITH PERCENTAGE & STAGES
   ============================================================================ */
.analysis-loading-card {
  margin: 16px 24px 20px !important;
  padding: 18px 22px !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #f8faff 0%, #f0fdf4 100%) !important;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.08) !important;
  animation: fadeInProgress 0.25s ease-out;
}
@keyframes fadeInProgress {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.loading-card-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.loading-spinner-wrap {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.loading-ring-spinner {
  position: absolute !important;
  inset: 0 !important;
  border: 3px solid #e0e7ff !important;
  border-top-color: #4f46e5 !important;
  border-radius: 50% !important;
  animation: spinRing 0.8s linear infinite !important;
}
@keyframes spinRing {
  to { transform: rotate(360deg); }
}
.loading-center-emoji {
  font-size: 1.1rem !important;
  animation: pulseEmoji 1.2s ease-in-out infinite !important;
}
@keyframes pulseEmoji {
  0%, 100% { transform: scale(0.9); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; }
}
.loading-details-col {
  flex: 1 !important;
  min-width: 0 !important;
}
.loading-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}
.loading-main-title {
  font-size: 0.95rem !important;
  font-weight: 850 !important;
  color: #1e1b4b !important;
}
.loading-percent-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: #4f46e5 !important;
  color: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25) !important;
  transition: all 0.2s ease !important;
}
.loading-sub-desc {
  margin: 4px 0 10px !important;
  font-size: 0.78rem !important;
  color: #475569 !important;
  line-height: 1.35 !important;
}
.loading-bar-track {
  width: 100% !important;
  height: 9px !important;
  background: #e2e8f0 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
}
.loading-bar-fill {
  height: 100% !important;
  width: 12%;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #4f46e5, #06b6d4, #10b981) !important;
  background-size: 200% 100% !important;
  animation: gradientShift 2s linear infinite !important;
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.4) !important;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.loading-stages-list {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}
.stage-step {
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  color: #94a3b8 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
.stage-step.active {
  color: #4f46e5 !important;
  background: #e0e7ff !important;
  font-weight: 850 !important;
}

/* TikTok Embed Frame */
.tiktok-embed-frame {
  width: 100% !important;
  height: 520px !important;
  border: none !important;
  border-radius: 12px !important;
  background: #000000 !important;
}

/* TikTok Search Helper Button */
.btn-search-tiktok {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  background: #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.72rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  border: 1px solid #cbd5e1 !important;
  transition: all 0.15s ease !important;
}
.btn-search-tiktok:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Outlier Price Markers & Strategic Notices */
.marker-pin.pin-outlier-high {
  background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.45) !important;
  font-weight: 850 !important;
  animation: pulse-outlier 2s infinite ease-in-out;
}
.marker-pin.pin-outlier-low {
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45) !important;
  font-weight: 850 !important;
}
@keyframes pulse-outlier {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.gauge-outlier-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.45;
}
.gauge-outlier-box.outlier-high {
  background: #fff7ed;
  border: 1px solid #ffedd5;
  border-left: 4px solid #ea580c;
  color: #9a3412;
}
.gauge-outlier-box.outlier-low {
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-left: 4px solid #2563eb;
  color: #1e40af;
}
.gauge-outlier-box.outlier-normal {
  background: #f0fdf4;
  border: 1px solid #dcfce7;
  border-left: 4px solid #16a34a;
  color: #166534;
}
.gauge-outlier-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.gauge-outlier-body strong {
  display: block;
  font-size: 0.86rem;
  margin-bottom: 3px;
}
.gauge-outlier-body p {
  margin: 0;
  font-size: 0.78rem;
  opacity: 0.95;
}

/* ==========================================================================
   MARKET OVERVIEW & BENCHMARK CHARTS (Dữ liệu thị trường)
   ========================================================================== */
.market-overview {
  margin-top: 24px;
  padding: 24px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

.market-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.market-kpi {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.market-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.market-kpi small {
  font-size: 0.8rem;
  font-weight: 550;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.market-kpi strong {
  font-size: 1.25rem;
  font-weight: 750;
  color: #0f172a;
}

.market-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

.market-charts article {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  display: flex;
  flex-direction: column;
}

.market-charts article h3 {
  font-size: 0.96rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.market-bar {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
  font-size: 0.84rem !important;
  min-height: 28px !important;
}

.market-bar:last-child {
  margin-bottom: 0 !important;
}

.market-bar-label {
  flex: 0 0 130px !important;
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #334155 !important;
  font-weight: 550 !important;
  font-size: 0.83rem !important;
}

.market-bar-track {
  flex: 1 1 auto !important;
  height: 9px !important;
  background: #f1f5f9 !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  position: relative !important;
}

.market-bar-fill {
  height: 100% !important;
  border-radius: 999px !important;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.market-bar-val {
  flex: 0 0 55px !important;
  text-align: right !important;
  font-size: 0.82rem !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   COLLAPSIBLE WORKBOOK SECTIONS (Nhiều sản phẩm & File Excel)
   ========================================================================== */
.multi-section, .bulk-section {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  margin-top: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: border-color 0.2s ease;
}

.multi-section[open], .bulk-section[open] {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.multi-summary, .bulk-summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 1rem;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  padding: 4px 0;
}

.multi-summary::-webkit-details-marker,
.bulk-summary::-webkit-details-marker {
  display: none;
}

.multi-summary::after,
.bulk-summary::after {
  content: "Mở rộng ▾";
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 14px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #475569;
  transition: all 0.2s ease;
}

details[open] .multi-summary::after,
details[open] .bulk-summary::after {
  content: "Thu gọn ▴";
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

/* ==========================================================================
   PRODUCT CARD ACTION BUTTONS (2-Row Layout - Không bị đứt chữ)
   ========================================================================== */
.product-card-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  box-sizing: border-box;
}

.btn-view-tiktok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  background: #0f172a;
  color: #ffffff !important;
  font-size: 0.84rem;
  font-weight: 650;
  border-radius: 999px;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
  transition: background 0.15s ease, transform 0.1s ease;
}

.btn-view-tiktok:hover {
  background: #1e293b;
  transform: translateY(-1px);
  color: #ffffff !important;
}

.product-sub-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.btn-search-tiktok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #334155 !important;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none !important;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.btn-search-tiktok:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a !important;
}

.btn-view-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  color: #1d4ed8 !important;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
  transition: all 0.15s ease;
}

.btn-view-detail:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1e40af !important;
}

/* ==========================================================================
   LOSS ALERT CARD & DUAL EXIT STRATEGY (Cảnh báo lỗ vốn & 2 Lựa chọn xử lý)
   ========================================================================== */
.loss-alert-card {
  margin-top: 18px;
  margin-bottom: 24px;
  background: linear-gradient(180deg, #fff7ed 0%, #fff1f2 100%);
  border: 1.5px solid #fecdd3;
  border-left: 6px solid #e11d48;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.08);
  box-sizing: border-box;
}

.loss-alert-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}

.loss-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e11d48;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 750;
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.loss-alert-pulse {
  width: 8px;
  height: 8px;
  background: #ffffff;
  border-radius: 50%;
  animation: pulse-loss 1.5s infinite;
}

@keyframes pulse-loss {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.2); }
}

.loss-alert-channels {
  font-size: 0.85rem;
  font-weight: 650;
  color: #9f1239;
}

.loss-current-status-banner {
  margin-bottom: 16px;
  background: #ffffff;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 2px 6px rgba(225, 29, 72, 0.05);
}

.loss-banner-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.loss-banner-dot {
  font-size: 1.1rem;
  line-height: 1.2;
}

.loss-banner-text strong {
  display: block;
  font-size: 0.92rem;
  color: #b91c1c;
  margin-bottom: 4px;
}

.loss-banner-text p {
  margin: 0;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.45;
}

.loss-alert-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.loss-action-column {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

.loss-target-price-box {
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-left: 4px solid #f97316;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.target-price-label {
  font-size: 0.82rem;
  font-weight: 750;
  color: #c2410c;
  margin-bottom: 8px;
}

.target-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0;
}

.target-price-val {
  font-size: 1.45rem;
  font-weight: 850;
  color: #ea580c;
}

.btn-apply-min10 {
  background: #f97316;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(249, 115, 22, 0.25);
  transition: all 0.15s ease;
}

.btn-apply-min10:hover {
  background: #ea580c;
  transform: translateY(-1px);
}

.target-price-sub {
  font-size: 0.74rem;
  color: #78716c;
  line-height: 1.35;
  margin-top: 4px;
}

.loss-cost-cut-box {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #0284c7;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cost-cut-label {
  font-size: 0.82rem;
  font-weight: 750;
  color: #0369a1;
  margin-bottom: 6px;
}

.cost-cut-desc {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  color: #334155;
  line-height: 1.4;
}

.cost-cut-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cost-cut-steps li {
  color: #334155;
}

.cost-cut-steps li strong {
  color: #0f172a;
}

.cost-cut-result {
  padding-top: 5px;
  border-top: 1px dashed #e2e8f0;
  color: #047857 !important;
}

.cost-cut-result strong {
  color: #047857 !important;
}

.btn-apply-cost-cuts {
  background: #0284c7;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.25);
  transition: all 0.15s ease;
  width: 100%;
}

.btn-apply-cost-cuts:hover {
  background: #0369a1;
  transform: translateY(-1px);
}

.cost-cut-warning {
  margin: 0 0 6px 0;
  font-size: 0.82rem;
  color: #991b1b;
  line-height: 1.4;
}

.cost-cut-advice {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.35;
}

/* ==========================================================================
   OPTIMAL PRICING TIER CARDS (3 Kịch bản định giá)
   ========================================================================== */
.optimal-pricing-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.tier-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.tier-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.tier-card.tier-optimal {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.1);
}

.tier-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.tier-name {
  font-size: 0.92rem;
  font-weight: 750;
  color: #1e293b;
}

.tier-badge-loss {
  background: #fee2e2;
  color: #b91c1c;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.tier-badge-profit {
  background: #dcfce7;
  color: #15803d;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

.tier-price {
  font-size: 1.6rem;
  font-weight: 850;
  color: #0f172a;
  margin-bottom: 4px;
}

.tier-desc {
  font-size: 0.78rem;
  color: #64748b;
  line-height: 1.35;
  margin-bottom: 12px;
}

.tier-plan-box {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  flex: 1 1 auto;
}

.tier-strategy-note strong {
  display: block;
  font-size: 0.78rem;
  color: #334155;
  margin-bottom: 4px;
}

.tier-strategy-note span {
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
  display: block;
}

.tier-card-actions {
  margin-top: auto;
}

.btn-apply-tier {
  width: 100%;
  padding: 9px 12px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  color: #0f172a;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-apply-tier:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

.tier-optimal .btn-apply-tier {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.tier-optimal .btn-apply-tier:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

/* ==========================================================================
   RESPONSIVE OVERFLOW & CONTAINER SAFETY
   ========================================================================== */
.workspace, .calc-shell, .result-stack, .analysis-card, .market-overview {
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   ENHANCED 2-ROW TOP TOOLBAR & CARD MARGINS
   ========================================================================== */
.top-action-toolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 12px 24px !important;
  border-bottom: 1px solid var(--line) !important;
  background: #faf8ff !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.toolbar-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.toolbar-row-main .product-category-tool {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  max-width: 680px !important;
  min-width: 0 !important;
}

.toolbar-row-main .product-category-tool input {
  flex: 1 1 auto !important;
  min-width: 200px !important;
  height: 38px !important;
  font-size: 0.82rem !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
}

.toolbar-shop-group {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.toolbar-row-actions {
  padding-top: 4px !important;
  border-top: 1px dashed rgba(110, 74, 232, 0.12) !important;
}

.toolbar-row-actions .workspace-quick-save-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}

.toolbar-row-actions .workspace-title-input {
  height: 34px !important;
  min-width: 160px !important;
  padding: 4px 10px !important;
  font-size: 0.8rem !important;
}

.toolbar-row-actions .btn-quick-save {
  height: 34px !important;
  padding: 4px 12px !important;
  font-size: 0.78rem !important;
}

.toolbar-action-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
}

.toolbar-action-buttons .btn {
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 12px !important;
  font-size: 0.8rem !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .top-action-toolbar {
    padding: 10px 14px !important;
    gap: 8px !important;
  }
  .toolbar-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .toolbar-row-main .product-category-tool {
    max-width: 100% !important;
    width: 100% !important;
  }
  .toolbar-shop-group {
    margin-left: 0 !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .toolbar-action-buttons {
    margin-left: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }
  .toolbar-action-buttons .btn {
    padding: 4px 6px !important;
    font-size: 0.72rem !important;
  }
}

/* ==========================================================================
   FIX MARGINS & SÁT LỀ CHO THẺ TÍNH NHANH NHIỀU SP VÀ XỬ LÝ FILE EXCEL
   ========================================================================== */
.multi-card, .bulk-card, .multi-section, .bulk-section {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 18px 24px !important;
  margin: 24px 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.multi-card[open], .bulk-card[open], .multi-section[open], .bulk-section[open] {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.multi-summary, .bulk-summary {
  cursor: pointer !important;
  list-style: none !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: #0f172a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  user-select: none !important;
  padding: 6px 10px !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

.multi-summary > strong, .bulk-summary > strong {
  font-size: 1.05rem !important;
  font-weight: 750 !important;
  color: #0f172a !important;
  flex: 0 0 auto !important;
}

.multi-summary > span, .bulk-summary > span {
  font-size: 0.84rem !important;
  font-weight: normal !important;
  color: #64748b !important;
  flex: 1 1 auto !important;
  margin-left: 12px !important;
}

.multi-summary::after, .bulk-summary::after {
  content: "Mở rộng ▾" !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 999px !important;
  color: #475569 !important;
  transition: all 0.2s ease !important;
  flex: 0 0 auto !important;
  margin-right: 6px !important;
}

details[open] .multi-summary::after, details[open] .bulk-summary::after {
  content: "Thu gọn ▴" !important;
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}

/* MOBILE FIX: Tránh co ép chữ "Mỗi sản phẩm một hàng · tối đa 500" thành 1 từ / dòng */
@media (max-width: 640px) {
  .multi-card, .bulk-card, .multi-section, .bulk-section {
    padding: 14px 16px !important;
  }
  .multi-summary, .bulk-summary {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px 10px !important;
    padding: 4px 6px !important;
  }
  .multi-summary > strong, .bulk-summary > strong {
    flex: 1 1 auto !important;
    font-size: 0.95rem !important;
  }
  .multi-summary::after, .bulk-summary::after {
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
  }
  .multi-summary > span, .bulk-summary > span {
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    color: #64748b !important;
  }
}

/* SVG Icons & Vector Logos */
.svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  flex-shrink: 0;
  stroke: currentColor;
}
.svg-icon.fill-current {
  fill: currentColor;
  stroke: none;
}
.svg-icon.svg-star {
  fill: #eab308;
  stroke: none;
}
.svg-icon.svg-alert {
  stroke: #ef4444;
}
.svg-icon.svg-check {
  stroke: #22c55e;
}
.platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.15em;
  flex-shrink: 0;
}
.platform-switch a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}
.platform-switch a .platform-icon {
  width: 16px;
  height: 16px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.btn-quick-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.calculator-product-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.stat-card .stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(110, 74, 232, 0.12);
  color: var(--primary);
  flex-shrink: 0;
}
.stat-card .stat-icon .svg-icon {
  width: 22px;
  height: 22px;
}
.step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -0.2em;
}
.step-icon.step-down {
  background: #fee2e2;
  color: #dc2626;
}
.step-icon.step-profit {
  background: #dcfce7;
  color: #15803d;
}
.step-icon .svg-icon {
  width: 12px;
  height: 12px;
}
.loss-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  font-weight: 850;
  font-size: 0.76rem;
}
.loss-banner-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dc2626;
  margin-right: 6px;
  box-shadow: 0 0 6px #dc2626;
}

.calculator-product-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.calculator-product-add .svg-icon {
  width: 14px;
  height: 14px;
}


/* STONK AGENCY Promo Banner Styles */
.booking-promo {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  margin: 18px 0 22px !important;
  padding: 16px 20px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #4a0715 0%, #690c20 50%, #85122b 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 20px rgba(74, 7, 21, 0.25) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
}
.booking-promo-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.booking-promo-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.booking-promo-copy span, #bookingPromoOffer {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 215, 0, 0.2) !important;
  color: #ffd700 !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  width: fit-content !important;
}
.booking-promo-copy strong, #bookingPromoTitle {
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.3px !important;
}
.booking-promo-copy small, #bookingPromoSubtitle {
  font-size: 0.75rem !important;
  color: #fecdd3 !important;
  opacity: 0.9 !important;
}
.booking-promo-highlights {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 8px 16px !important;
  padding: 12px 14px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.promo-highlight-item {
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 6px !important;
}
.promo-highlight-item strong {
  font-weight: 750 !important;
  color: #fef08a !important;
}
.booking-promo-actions {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 10px !important;
  margin-top: 4px !important;
}
.promo-link {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.promo-link:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-1px) !important;
  border-color: #ffd700 !important;
}
.promo-link-primary {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%) !important;
  border-color: #fca5a5 !important;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.4) !important;
}
.promo-link-primary:hover {
  background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%) !important;
}
.promo-link strong {
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  color: #ffffff !important;
}
.promo-link small {
  font-size: 0.68rem !important;
  color: #fecdd3 !important;
  margin-top: 2px !important;
}

/* Workspace Sheet Titles */
.sheet-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
.sheet-shop-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #4b5563 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}
.sheet-title-text {
  color: #111827 !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
}

/* Hide duplicate source-heading-row inside tbody */
.source-heading-row {
  display: none !important;
}

/* Base styling for calculator-product-bar on all viewports */
.calculator-product-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 16px !important;
  margin: 12px 0 0 !important;
  border: 1px solid var(--line) !important;
  border-bottom: 0 !important;
  background: #f8fafc !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  position: static !important;
}

.calculator-product-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 1 1 auto !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.calculator-product-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid #d4cde3 !important;
  background: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  color: #4b5563 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
}

.calculator-product-tab.active {
  background: #f3f0ff !important;
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  font-weight: 850 !important;
}

.calculator-product-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.calculator-product-action,
.calculator-product-add {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  border: 1px solid #d4cde3 !important;
  background: #ffffff !important;
  font-size: 0.76rem !important;
  font-weight: 750 !important;
  color: #374151 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}

.calculator-product-action:hover,
.calculator-product-add:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* Shopee page grid: Desktop (5 cols), Tablet (3 cols), Mobile (2 cols) - Col 5 expanded for single-row recommendation */
@media (min-width: 1025px) {
  .shopee-page .input-board,
  form#form .input-board {
    display: grid !important;
    grid-template-columns: minmax(85px, 0.7fr) minmax(85px, 0.7fr) minmax(150px, 1.15fr) minmax(100px, 0.8fr) minmax(380px, 2.25fr) !important;
  }
  .shopee-page .input-board > .board-output-recommended,
  form#form .input-board > .board-output-recommended {
    grid-column: span 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    padding: 4px 10px !important;
  }
  .shopee-page .input-board > .board-output-recommended .board-output-meta,
  form#form .input-board > .board-output-recommended .board-output-meta,
  .input-board > .board-output-recommended .board-output-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }
  .shopee-page .input-board > .board-output-recommended .rec-row-list,
  form#form .input-board > .board-output-recommended .rec-row-list,
  .shopee-page .input-board > .board-output-recommended .rec-row-voucher,
  form#form .input-board > .board-output-recommended .rec-row-voucher,
  .input-board > .board-output-recommended .rec-row-list,
  .input-board > .board-output-recommended .rec-row-voucher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  .shopee-page .input-board > .board-output-recommended .btn-apply-price,
  form#form .input-board > .board-output-recommended .btn-apply-price,
  .input-board > .board-output-recommended .btn-apply-price {
    flex-shrink: 0 !important;
    position: static !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .shopee-page .input-board,
  form#form .input-board {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .shopee-page .input-board > .board-output-recommended,
  form#form .input-board > .board-output-recommended {
    grid-column: span 1 !important;
  }
}

@media (max-width: 767px) {
  .shopee-page .input-board,
  form#form .input-board {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .shopee-page .input-board > .board-product-name-row,
  form#form .input-board > .board-product-name-row,
  .shopee-page .input-board > label[for="category"],
  form#form .input-board > label[for="category"],
  .shopee-page .input-board > .board-output-recommended,
  form#form .input-board > .board-output-recommended {
    grid-column: span 2 !important;
  }
}

/* Recommended Price 2-line styling with voucher 30% */
.board-output-recommended {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 5px 12px !important;
  min-height: 52px !important;
  background: linear-gradient(135deg, #5b36d6, #7852f5) !important;
}

.board-output-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
}

.rec-row-list {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.75rem !important;
  color: #fef08a !important;
}

.rec-val-list {
  font-size: 0.95rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
}

.rec-row-voucher {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.72rem !important;
  color: #e0e7ff !important;
}

.rec-voucher-input-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

.rec-voucher-input-wrap input {
  width: 44px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 1px 14px 1px 4px !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  text-align: right !important;
}

.rec-voucher-input-wrap span {
  position: absolute !important;
  right: 3px !important;
  font-size: 0.68rem !important;
  color: #ffffff !important;
  pointer-events: none !important;
}

.rec-arrow {
  opacity: 0.8 !important;
}

.rec-val-customer {
  font-size: 0.85rem !important;
  font-weight: 850 !important;
  color: #a7f3d0 !important;
}

/* Center aligned STONK Agency Promo Banner (no emojis, no icon font) */
.booking-promo {
  text-align: center !important;
  padding: 22px 20px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #420713 0%, #630b1e 50%, #7d1026 100%) !important;
  box-shadow: 0 6px 24px rgba(66, 7, 19, 0.3) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.booking-promo-inner {
  max-width: 960px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
}

.booking-promo-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  text-align: center !important;
}

.promo-badge {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 999px !important;
  background: rgba(255, 215, 0, 0.18) !important;
  color: #ffd700 !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.promo-title {
  font-size: 1.35rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.5px !important;
  margin: 2px 0 0 !important;
}

.promo-subtitle {
  font-size: 0.8rem !important;
  color: #fecdd3 !important;
  opacity: 0.9 !important;
}

.booking-promo-highlights {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 8px 18px !important;
  max-width: 900px !important;
  padding: 12px 18px !important;
  background: rgba(0, 0, 0, 0.22) !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.promo-highlight-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
  color: #fef08a !important;
  font-weight: 750 !important;
  text-align: left !important;
}

.highlight-bullet {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffd700 !important;
  box-shadow: 0 0 6px #ffd700 !important;
  flex-shrink: 0 !important;
}

.booking-promo-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  width: 100% !important;
}

/* Category Combobox & Suggestions clean position */
.board-field .category-combobox {
  position: relative !important;
  width: 100% !important;
}

.category-suggestions,
.board-field .category-suggestions {
  position: absolute !important;
  z-index: 999999 !important;
  top: calc(100% + 2px) !important;
  left: 0 !important;
  width: min(560px, calc(100vw - 32px)) !important;
  min-width: 290px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 4px !important;
  border: 1px solid #a78bfa !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: 0 16px 36px rgba(37, 28, 70, 0.3) !important;
  overscroll-behavior: contain !important;
}


/* =========================================================
   REFINED COMPACT PROMO BANNER & SYMMETRICAL INPUT BOARD
   ========================================================= */

/* Compact Determine Category Button */
.btn-determine-category,
button#determineCategory {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 750 !important;
  height: 36px !important;
  min-height: 36px !important;
  border-radius: 8px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Board Product Name Synchronized Full-width Row */
.board-product-name-row {
  grid-column: 1 / -1 !important;
  padding: 8px 14px !important;
  background: #f8fafc !important;
  border-bottom: 1px solid var(--line) !important;
}

.board-product-name-label {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  width: 100% !important;
}

.board-product-name-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.board-product-name-input {
  flex: 1 1 auto !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 4px 12px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  font-size: 0.84rem !important;
  font-weight: 650 !important;
  color: #1e293b !important;
  transition: border-color 0.15s ease !important;
}

.board-product-name-input:focus {
  border-color: var(--primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(91, 54, 214, 0.15) !important;
}

/* Symmetrical Grid Alignment */
@media (min-width: 1120px) {
  /* TikTok Shop 6 columns: slim cols 1-3, expand recommendation span 2 */
  #pricingForm .input-board {
    display: grid !important;
    grid-template-columns: minmax(75px, 0.65fr) minmax(75px, 0.65fr) minmax(75px, 0.65fr) minmax(135px, 1.1fr) minmax(215px, 1.45fr) minmax(215px, 1.45fr) !important;
  }
  #pricingForm .input-board > .board-output-recommended {
    grid-column: span 2 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    padding: 4px 10px !important;
    overflow: visible !important;
  }
  #pricingForm .input-board > .board-output-recommended .board-output-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  #pricingForm .input-board > .board-output-recommended .rec-row-list,
  #pricingForm .input-board > .board-output-recommended .rec-row-voucher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    margin: 0 !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  #pricingForm .input-board > .board-output-recommended .btn-apply-price {
    flex-shrink: 0 !important;
    position: static !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  /* Shopee 5 columns - row 2 cols 1, 2, 4 slimmed, col 5 gets 2.3fr for 1-row layout */
  form#form .input-board,
  .shopee-page .input-board {
    display: grid !important;
    grid-template-columns: minmax(80px, 0.65fr) minmax(80px, 0.65fr) minmax(150px, 1.15fr) minmax(95px, 0.75fr) minmax(390px, 2.35fr) !important;
  }
  form#form .input-board > .board-output-recommended,
  .shopee-page .input-board > .board-output-recommended {
    grid-column: span 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    white-space: nowrap !important;
    padding: 4px 10px !important;
  }
  form#form .input-board > .board-output-recommended .board-output-meta,
  .shopee-page .input-board > .board-output-recommended .board-output-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }
  form#form .input-board > .board-output-recommended .rec-row-list,
  form#form .input-board > .board-output-recommended .rec-row-voucher,
  .shopee-page .input-board > .board-output-recommended .rec-row-list,
  .shopee-page .input-board > .board-output-recommended .rec-row-voucher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }
  form#form .input-board > .board-output-recommended .btn-apply-price,
  .shopee-page .input-board > .board-output-recommended .btn-apply-price {
    flex-shrink: 0 !important;
    position: static !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }
}

/* Fix Voucher % Input Clipping */
.rec-row-voucher {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.74rem !important;
  color: #e0e7ff !important;
  white-space: nowrap !important;
}

.rec-voucher-ctrl {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.rec-voucher-input {
  width: 42px !important;
  min-width: 42px !important;
  height: 22px !important;
  min-height: 22px !important;
  padding: 1px 2px !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 4px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 0.78rem !important;
  font-weight: 850 !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
}

.rec-voucher-input::-webkit-outer-spin-button,
.rec-voucher-input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

.rec-voucher-unit {
  font-size: 0.75rem !important;
  font-weight: 850 !important;
  color: #fef08a !important;
}

/* Clean Select for Hoàn phí VC */
.clean-select {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 6px 10px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  color: #334155 !important;
}

/* Super Compact & Sleek STONK Promo Banner */
.booking-promo {
  text-align: center !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #380510 0%, #540819 50%, #6e0d21 100%) !important;
  box-shadow: 0 4px 14px rgba(56, 5, 16, 0.25) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
  margin: 16px 0 !important;
}

.booking-promo-inner {
  max-width: 980px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

.booking-promo-top {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.promo-badge {
  display: inline-block !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 215, 0, 0.18) !important;
  color: #ffd700 !important;
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.promo-title {
  font-size: 1.05rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: 0.4px !important;
}

.promo-sep {
  color: rgba(255, 255, 255, 0.4) !important;
}

.promo-subtitle {
  font-size: 0.76rem !important;
  color: #fecdd3 !important;
  opacity: 0.95 !important;
}

.booking-promo-highlights {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 6px 14px !important;
  padding: 4px 12px !important;
  background: rgba(0, 0, 0, 0.18) !important;
  border-radius: 6px !important;
}

.promo-highlight-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.74rem !important;
  line-height: 1.3 !important;
  color: #fef08a !important;
  font-weight: 750 !important;
}

.highlight-bullet {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #ffd700 !important;
  flex-shrink: 0 !important;
}

.booking-promo-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.promo-link {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 12px !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  font-size: 0.74rem !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.promo-link:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: #ffd700 !important;
  color: #ffd700 !important;
}

.promo-link-primary {
  background: #e11d48 !important;
  border-color: #f43f5e !important;
  color: #ffffff !important;
  font-weight: 850 !important;
}

.promo-link-primary:hover {
  background: #be123c !important;
  color: #ffffff !important;
}


/* =========================================================
   GORGEOUS FLOATING CATEGORY MATCH PANEL & OPTIONS
   ========================================================= */

.product-category-tool {
  position: relative !important;
}

.category-match-panel {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 0 !important;
  z-index: 999999 !important;
  width: min(580px, calc(100vw - 32px)) !important;
  background: #ffffff !important;
  border: 1px solid #c7d2fe !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(30, 27, 75, 0.25) !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  animation: panelSlideDown 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes panelSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.match-panel-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

.match-panel-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.74rem !important;
  font-weight: 800 !important;
  color: var(--primary) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
}

.btn-close-match-panel {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  border: 1px solid #e2e8f0 !important;
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.btn-close-match-panel:hover {
  background: #fee2e2 !important;
  color: #ef4444 !important;
  border-color: #fca5a5 !important;
}

.category-match-option {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 10px 14px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9px !important;
  background: #f8fafc !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.category-match-option:hover {
  background: #ffffff !important;
  border-color: var(--primary) !important;
  box-shadow: 0 4px 14px rgba(91, 54, 214, 0.14) !important;
  transform: translateY(-1px) !important;
}

.match-option-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
}

.match-option-label {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #6366f1 !important;
  background: #eef2ff !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.match-option-leaf {
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  color: #1e293b !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.match-option-rate {
  font-size: 0.75rem !important;
  font-weight: 850 !important;
  color: #059669 !important;
  background: #ecfdf5 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

.match-option-path-row {
  font-size: 0.74rem !important;
  color: #64748b !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

.match-empty-box {
  padding: 12px !important;
  text-align: center !important;
  font-size: 0.8rem !important;
  color: #64748b !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}


/* =========================================================
   FIX CATEGORY MATCH PANEL HIDDEN STATE & TABLE SCROLL TRAP
   ========================================================= */

/* Absolute enforcement of hidden state on category match panel */
.category-match-panel[hidden],
#categoryMatchPanel[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Shipping refund pair with toggle and editable fee */
.shipping-refund-pair {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  width: 100% !important;
}

.shipping-toggle-select {
  width: 58px !important;
  min-width: 58px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 4px 6px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  font-size: 0.8rem !important;
  font-weight: 750 !important;
  color: #334155 !important;
  cursor: pointer !important;
}

.shipping-fee-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: calc(100% - 62px) !important;
}

.shipping-fee-wrap input {
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
}

/* Eliminate table scroll trap: allow smooth vertical mouse-wheel scrolling */
.table-scroll,
.result-section > .table-scroll,
.unified-pricing-table,
.profit-table {
  max-height: none !important;
  overflow-y: visible !important;
  overscroll-behavior: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: auto !important;
}


/* Profit Rate Pill with dynamic color scale */
.profit-rate-pill {
  letter-spacing: 0.2px !important;
  line-height: 1.25 !important;
  font-variant-numeric: tabular-nums !important;
  text-align: center !important;
  min-width: 68px !important;
  transition: all 0.2s ease !important;
}

.unified-pricing-table tr.row-rate td {
  padding-block: 6px !important;
}

/* Symmetrical Grid Layout contract */
@media (min-width: 1100px) {
  .input-board-legacy-grid {
    grid-template-columns: 1.15fr 1.15fr 1.6fr 1.05fr 1.05fr;
    grid-template-rows: auto auto;
  }
}
@media (max-width: 1099px) and (min-width: 681px) {
  .input-board-legacy-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 680px) {
  .input-board-legacy-grid {
    grid-template-columns: 1fr;
  }
}
.board-field > span:first-child,
.board-output-meta small {
  white-space: nowrap !important;
  min-height: 46px;
}

/* Ô nhập tên sản phẩm đồng bộ ở thanh Phân tích Thị trường PRO */
.pro-product-input-wrap {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
}

.market-product-input {
  width: 280px !important;
  min-width: 200px !important;
  height: 40px !important;
  padding: 6px 12px !important;
  border: 1.5px solid #c7d2fe !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #1e1b4b !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.market-product-input:focus {
  border-color: #6366f1 !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

.market-product-input::placeholder {
  color: #94a3b8 !important;
  font-weight: 450 !important;
}

@media (max-width: 900px) {
  .premium-action {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
  }
  .pro-product-input-wrap,
  .market-product-input,
  .btn-pro-action {
    width: 100% !important;
  }
}

/* Fix premium action button overflow and flex sizing */
.premium-action {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

.pro-product-input-wrap {
  display: inline-flex !important;
  align-items: center !important;
  flex: 1 1 240px !important;
  min-width: 180px !important;
  max-width: 320px !important;
}

.market-product-input {
  width: 100% !important;
  height: 40px !important;
  padding: 6px 12px !important;
  border: 1.5px solid #c7d2fe !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #1e1b4b !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  outline: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.btn-pro-action {
  flex: 0 0 auto !important;
  min-width: max-content !important;
  width: auto !important;
  white-space: nowrap !important;
  padding: 8px 18px !important;
}

/* TikTok Shop PC: Ensure no text clipping for 'Giá niêm yết' */
@media (min-width: 1025px) {
  #pricingForm .input-board {
    grid-template-columns: minmax(75px, 0.65fr) minmax(75px, 0.65fr) minmax(75px, 0.65fr) minmax(135px, 1.1fr) minmax(215px, 1.45fr) minmax(215px, 1.45fr) !important;
  }
  #pricingForm .input-board > .board-output-recommended {
    grid-column: span 2 !important;
    overflow: visible !important;
  }
  #pricingForm .input-board > .board-output-recommended .board-output-meta {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  #pricingForm .input-board > .board-output-recommended .rec-row-list,
  #pricingForm .input-board > .board-output-recommended .rec-row-voucher {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }
  #pricingForm .input-board > .board-output-recommended .rec-label {
    white-space: nowrap !important;
    display: inline !important;
  }
}

/* Mobile: Compact tight layout for Market Intelligence PRO box (no huge gap) */
@media (max-width: 900px) {
  .premium-bar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 12px 14px !important;
  }
  .pro-card-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 0 !important;
  }
  .pro-card-row-title {
    margin: 0 !important;
  }
  .pro-card-desc {
    margin: 0 !important;
    line-height: 1.35 !important;
  }
  .premium-action,
  .premium-action.premium-action-compact {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .pro-product-input-wrap {
    display: flex !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .market-product-input {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    font-size: 0.8rem !important;
  }
  .btn-pro-action {
    display: flex !important;
    width: 100% !important;
    min-height: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
  }
}

/* Typography: Plus Jakarta Sans for headings & buttons, Inter for data & body */
:root {
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-data: 'Inter', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.eyebrow,
.card-heading h1,
.pro-card-title,
.btn,
.btn-primary,
.btn-soft,
.btn-pro-action,
.btn-apply-price,
.platform-switch a,
.shop-type-btn,
.calculator-product-tab,
.calculator-product-add,
.calculator-product-action,
.version-pill,
.pro-badge,
.board-field > span:first-child,
.board-output-meta strong,
.rec-label,
.target-price-label,
.loss-alert-badge,
button {
  font-family: var(--font-heading) !important;
}

.profit-table,
.unified-pricing-table,
.multi-table,
.table-scroll,
.board-output,
.vnd-input,
input,
select,
td,
th {
  font-family: var(--font-data) !important;
  font-variant-numeric: tabular-nums !important;
}