/* The sale project · Ming Collection — app.css
   mobile-first · light theme · tokens at :root */

:root{
  --navy:#1E3A5F; --navy-d:#16304f; --navy-50:#EDF2F8; --navy-100:#D9E3EF; --navy-300:#8FA8C6;
  --ink:#1F2937; --muted:#6B7280; --line:#E5E7EB; --line-2:#EEF0F4;
  --bg:#F3F5F9; --card:#fff; --row-alt:#FAFBFD;

  --red:#C62828;    --red-bg:#FDECEA;
  --amber:#B45309;  --amber-bg:#FEF3C7;
  --green:#2E7D32;  --green-bg:#E8F5E9;
  --orange:#EA580C; --orange-bg:#FFEDD5; --orange-ink:#C2410C;
  --blue:#2563EB;   --blue-bg:#DBEAFE;   --blue-ink:#1D4ED8;
  --gray:#6B7280;   --gray-bg:#F1F5F9;

  --font:"IBM Plex Sans Thai","Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:14px; --r-sm:10px;
  --sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04);
  --sh-pop:0 12px 32px -6px rgba(16,24,40,.18),0 4px 10px rgba(16,24,40,.06);
  --gut:16px; --maxw:1440px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:720px){ :root{ --gut:24px; } }

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 15px/1.55 var(--font); -webkit-font-smoothing:antialiased;
  color-scheme:light;
}
[hidden]{ display:none !important; }
html.lock{ overflow:hidden; }
h1,h2,h3,p{ margin:0; }
button,input,select{ font:inherit; color:inherit; }
button{ cursor:pointer; }
a{ color:var(--blue-ink); }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted{ color:var(--muted); }
.num{ font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; border-radius:6px; }

/* ---------- tone helpers ---------- */
.t-red{    --c:var(--red);    --bg2:var(--red-bg);    --ink2:var(--red); }
.t-amber{  --c:var(--amber);  --bg2:var(--amber-bg);  --ink2:var(--amber); }
.t-green{  --c:var(--green);  --bg2:var(--green-bg);  --ink2:var(--green); }
.t-orange{ --c:var(--orange); --bg2:var(--orange-bg); --ink2:var(--orange-ink); }
.t-blue{   --c:var(--blue);   --bg2:var(--blue-bg);   --ink2:var(--blue-ink); }
.t-gray{   --c:var(--gray);   --bg2:var(--gray-bg);   --ink2:var(--gray); }
.t-navy{   --c:var(--navy);   --bg2:var(--navy-50);   --ink2:var(--navy); }

/* ================= masthead ================= */
.mast{
  background:
    radial-gradient(900px 260px at 88% -60%, rgba(120,165,225,.38), transparent 62%),
    radial-gradient(500px 200px at 8% 130%, rgba(120,165,225,.18), transparent 65%),
    linear-gradient(180deg,#1E3A5F,#17315a);
  color:#fff;
}
.mast-in{
  max-width:var(--maxw); margin:0 auto; padding:14px var(--gut) 14px;
  display:grid; grid-template-columns:1fr auto; gap:12px 12px; align-items:center;
}
.brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.mark{
  flex:none; width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-weight:700; font-size:20px; letter-spacing:-.02em; color:#fff;
  background:linear-gradient(145deg,rgba(255,255,255,.22),rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.brand-t h1{ font-size:18px; line-height:1.25; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.brand-t p{ font-size:12px; color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.upd{
  justify-self:end; font-size:11.5px; line-height:1.3; padding:4px 9px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.92);
  white-space:nowrap;
}
.upd.stale{ background:var(--amber-bg); color:var(--amber); border-color:transparent; }
.gsearch{
  grid-column:1/-1; display:flex; align-items:center; gap:8px; height:42px; padding:0 12px;
  border-radius:12px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.85); transition:background .2s,color .2s,border-color .2s;
}
.gsearch input{
  flex:1; min-width:0; background:none; border:0; outline:0; color:inherit; height:100%;
}
.gsearch input::placeholder{ color:rgba(255,255,255,.65); }
.gsearch:focus-within{ background:#fff; color:var(--ink); border-color:#fff; }
.gsearch:focus-within input::placeholder{ color:var(--muted); }
.gsearch input::-webkit-search-cancel-button{ cursor:pointer; }
.btn-out{
  justify-self:end; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff;
  padding:6px 12px; border-radius:999px; font-size:13px;
}

/* tabs: bottom bar on mobile */
.tabs{
  position:fixed; z-index:60; left:0; right:0; bottom:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px;
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line); box-shadow:0 -4px 16px rgba(16,24,40,.06);
}
.tab{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 6px;
  border:0; background:transparent; color:var(--muted); border-radius:12px;
  font-size:12.5px; font-weight:500; transition:background .2s,color .2s;
}
.tab[aria-selected="true"]{ background:var(--navy-50); color:var(--navy); font-weight:600; }

@media (max-width:719px){
  .brand{ grid-column:1; grid-row:1; }
  .btn-out{ grid-column:2; grid-row:1; }
  .upd{ grid-column:1/-1; grid-row:2; justify-self:start; }
  .gsearch{ grid-row:3; }
}
@media (min-width:720px){
  .mast-in{ grid-template-columns:auto 1fr minmax(260px,420px) auto; padding-bottom:14px; }
  .brand,.upd,.gsearch,.btn-out{ grid-row:1; }
  .brand{ grid-column:1; } .upd{ grid-column:2; } .gsearch{ grid-column:3; } .btn-out{ grid-column:4; }
  .tabs{
    position:static; display:flex; gap:4px; max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
    background:none; backdrop-filter:none; border:0; box-shadow:none;
  }
  .tab{
    flex-direction:row; gap:8px; padding:10px 18px; font-size:14.5px; border-radius:12px 12px 0 0;
    color:rgba(255,255,255,.78);
  }
  .tab:hover{ color:#fff; background:rgba(255,255,255,.08); }
  .tab[aria-selected="true"]{ background:var(--bg); color:var(--navy); }
}

/* ================= page ================= */
.wrap{ max-width:var(--maxw); margin:0 auto; padding:16px var(--gut) 96px; }
@media (min-width:720px){ .wrap{ padding-top:20px; padding-bottom:48px; } }
.view{ animation:fade .25s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

.card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); }

.controls{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); }
.ctl-left{ display:grid; gap:14px; align-content:start; min-width:0; }
@media (min-width:1040px){
  .controls{ grid-template-columns:minmax(0,1fr) 380px; gap:16px; }
  .ctl-left{ gap:16px; }
}

/* ================= KPI ================= */
.kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (min-width:640px){ .kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } }
.kpis-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.kpi{
  position:relative; text-align:left; display:flex; flex-direction:column; gap:1px;
  padding:12px 14px 14px; background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--sh); min-width:0; font:inherit;
  transition:transform .15s var(--ease),box-shadow .2s,background .2s,border-color .2s;
}
.k-label{ font-size:12.5px; color:var(--muted); line-height:1.35; }
.k-val{
  font-size:24px; line-height:1.2; font-weight:700; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums; color:var(--navy); margin-top:2px;
  overflow-wrap:anywhere;
}
.k-val small{ font-size:.55em; font-weight:600; opacity:.8; margin-right:2px; }
.k-sub{ font-size:11.5px; color:var(--muted); min-height:17px; line-height:1.4; }
.kpi.q{ cursor:pointer; }
.kpi.q .k-val{ color:var(--c); }
.kpi.q::after{
  content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px;
  background:var(--c); border-radius:3px 3px 0 0; opacity:.9;
}
.kpi.q:hover{ transform:translateY(-1px); box-shadow:0 4px 12px -2px rgba(16,24,40,.12); }
.kpi.q[aria-pressed="true"]{ background:var(--bg2); border-color:var(--c); box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 25%,transparent); }
.kpi.q[aria-pressed="true"] .k-sub{ color:var(--ink2); font-weight:600; }
.kpi.q.zero .k-val{ color:var(--muted); }
.kpi.plain::after{ content:none; }
.kpi.good .k-sub{ color:var(--green); font-weight:600; }
.kpi.bad .k-sub{ color:var(--red); font-weight:600; }
.skel .k-val{ color:transparent; background:linear-gradient(90deg,var(--gray-bg),#e6ebf2,var(--gray-bg)); background-size:200% 100%; animation:sh 1.2s infinite linear; border-radius:6px; width:60%; }
@keyframes sh{ to{ background-position:-200% 0; } }
@media (min-width:640px){ .k-val{ font-size:26px; } }

/* ================= filters ================= */
.fcard{ padding:12px 14px; }
.fhead{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ftitle{ font-weight:600; font-size:14px; color:var(--navy); margin-right:auto; }
.fsearch{
  flex:1 1 220px; display:flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  background:#fff; border:1px solid var(--line); border-radius:12px; color:var(--muted);
}
.fsearch:focus-within{ border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-50); color:var(--navy); }
.fsearch input{ flex:1; min-width:0; border:0; outline:0; background:none; height:100%; color:var(--ink); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; height:40px; padding:0 16px;
  border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink); font-weight:500;
  transition:background .2s,border-color .2s,transform .1s,opacity .2s;
}
.btn:hover{ background:var(--navy-50); border-color:var(--navy-100); }
.btn:active{ transform:scale(.98); }
.btn.sm{ height:34px; padding:0 12px; font-size:13.5px; }
.btn.primary{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.btn.primary:hover{ background:var(--navy-d); }
.btn.ghost{ background:transparent; }
.btn:disabled{ opacity:.45; cursor:default; pointer-events:none; }
.link{ border:0; background:none; padding:4px 2px; color:var(--blue-ink); font-size:13px; font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.link:disabled{ color:var(--muted); text-decoration:none; opacity:.6; cursor:default; }

.btn-filter{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px; border-radius:12px;
  background:var(--navy-50); border:1px solid var(--navy-100); color:var(--navy); font-weight:600; font-size:13.5px;
}
.badge{
  min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--navy); color:#fff;
  font-size:11.5px; font-weight:700; display:inline-grid; place-items:center;
}

.filters{ margin-top:10px; }
.sheet-head,.sheet-foot{ display:none; }
.sheet-body{ display:flex; flex-wrap:wrap; gap:8px; }

/* multi-select */
.ms{ position:relative; }
.ms-btn{
  display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; width:100%;
  background:#fff; border:1px solid var(--line); border-radius:12px; text-align:left;
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.ms-btn:hover{ border-color:var(--navy-300); }
.ms-lab{ font-size:12.5px; color:var(--muted); flex:none; }
.ms-val{ font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; margin-left:auto; }
.ms-btn svg{ flex:none; color:var(--muted); transition:transform .2s var(--ease); }
.ms.open .ms-btn svg{ transform:rotate(180deg); }
.ms.open .ms-btn{ border-color:var(--navy); box-shadow:0 0 0 3px var(--navy-50); }
.ms.on .ms-btn{ background:var(--navy-50); border-color:var(--navy-100); }
.ms.on .ms-val{ color:var(--navy); }
.ms-pop{
  display:none; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
.ms.open .ms-pop{ display:block; animation:pop .16s var(--ease); }
@keyframes pop{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.ms-s{ padding:8px; border-bottom:1px solid var(--line-2); }
.ms-s input{ width:100%; height:36px; border:1px solid var(--line); border-radius:10px; padding:0 10px; outline:0; background:var(--row-alt); }
.ms-s input:focus{ border-color:var(--navy); background:#fff; }
.ms-opts{ max-height:280px; overflow:auto; padding:4px; overscroll-behavior:contain; }
.opt{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; cursor:pointer; min-height:40px; }
.opt:hover{ background:var(--navy-50); }
.opt input{ position:absolute; opacity:0; pointer-events:none; }
.box{
  flex:none; width:18px; height:18px; border-radius:5px; border:1.6px solid var(--navy-300); background:#fff;
  display:grid; place-items:center; transition:background .15s,border-color .15s;
}
.opt input:checked + .box{ background:var(--navy); border-color:var(--navy); }
.opt input:checked + .box::after{ content:""; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg); }
.opt input:focus-visible + .box{ outline:2px solid var(--blue); outline-offset:2px; }
.olab{ flex:1; min-width:0; font-size:14px; line-height:1.35; overflow-wrap:anywhere; }
.ocnt{ font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.opt.zero{ opacity:.5; }
.ms-none{ padding:14px; color:var(--muted); text-align:center; font-size:13.5px; }
.ms-foot{ border-top:1px solid var(--line-2); padding:6px 10px; text-align:right; }

@media (min-width:720px){
  .sheet-body .ms{ width:auto; }
  .ms-btn{ width:auto; }
  .ms-val{ margin-left:4px; }
  .ms-pop{ position:absolute; z-index:40; top:calc(100% + 6px); left:0; width:300px; box-shadow:var(--sh-pop); }
  .btn-filter{ display:none; }
}

/* mobile filter sheet */
@media (max-width:719px){
  .sheet{
    position:fixed; z-index:80; left:0; right:0; bottom:0; margin:0; max-height:86vh;
    display:flex; flex-direction:column; background:#fff; border-radius:20px 20px 0 0;
    box-shadow:0 -12px 40px rgba(16,24,40,.25); transform:translateY(105%); visibility:hidden;
    transition:transform .28s var(--ease),visibility 0s .28s;
  }
  .sheet.open{ transform:none; visibility:visible; transition:transform .28s var(--ease); }
  .sheet-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; font-size:17px; }
  .sheet-x{ width:40px; height:40px; border:0; background:var(--gray-bg); border-radius:50%; }
  .sheet-body{ display:block; overflow:auto; padding:4px 14px 8px; flex:1; }
  .sheet-body .ms{ margin-bottom:8px; }
  .sheet-foot{ display:flex; gap:10px; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
  .sheet-foot .btn{ flex:1; height:46px; }
  .sheet-foot .btn.primary{ flex:1.6; }
  .ms-pop{ position:static; margin-top:6px; }
  .ms-opts{ max-height:240px; }
  .fhead .ftitle{ display:none; }
  .fhead .btn-filter{ margin-right:auto; height:40px; }
  .fhead .btn.sm{ height:40px; }
}
.backdrop{ position:fixed; inset:0; z-index:70; background:rgba(15,23,42,.45); animation:fade .2s; }

/* active chips */
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.chips:empty{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:2px 10px;
  border-radius:999px; border:1px solid var(--navy-100); background:var(--navy-50); color:var(--navy);
  font-size:13px; font-weight:500; line-height:1.3; max-width:100%;
}
.chip b{ font-weight:500; color:var(--muted); }
.chip i{ font-style:normal; opacity:.65; margin-left:2px; }
.chip:hover{ background:var(--navy-100); }
.chip.tgl{ background:#fff; border-color:var(--line); color:var(--ink); height:32px; }
.chip.tgl[aria-pressed="true"]{ background:var(--green-bg); border-color:color-mix(in srgb,var(--green) 40%,transparent); color:var(--green); font-weight:600; }

/* ================= health bar ================= */
.health{ padding:12px 14px 14px; }
.health-h{ display:flex; justify-content:space-between; gap:8px; font-size:13px; font-weight:600; color:var(--navy); }
.health-n{ color:var(--muted); font-weight:400; }
.hbar{ display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--gray-bg); margin:10px 0 8px; gap:2px; }
.hseg{ min-width:3px; background:var(--c); transition:flex-basis .4s var(--ease),flex-grow .4s var(--ease); }
.hseg.ghost{ background:repeating-linear-gradient(135deg,#9CA3AF 0 3px,#C5CBD4 3px 6px); }
.hleg{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; }
.hleg li{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); }
.hleg i{ width:9px; height:9px; border-radius:3px; background:var(--c); display:inline-block; }
.hleg i.ghost{ background:repeating-linear-gradient(135deg,#9CA3AF 0 2px,#C5CBD4 2px 4px); }
.hleg b{ font-variant-numeric:tabular-nums; }
.hleg span{ color:var(--muted); }

/* ================= basket panel ================= */
.bp{ position:relative; overflow:hidden; }
.bp-in{ display:flex; flex-direction:column; }
.bp-head{
  display:flex; align-items:center; gap:10px; width:100%; padding:14px 16px; background:none; border:0; text-align:left;
}
.bp-title{ font-weight:600; color:var(--navy); font-size:15px; }
.bp-total{ color:var(--muted); font-weight:400; font-size:13px; margin-left:4px; }
.bp-sel{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--navy); background:var(--navy-50); padding:2px 9px; border-radius:999px; }
.bp-sel:empty{ display:none; }
.bp-chev{ color:var(--muted); transition:transform .2s var(--ease); }
.bp-head[aria-expanded="true"] .bp-chev{ transform:rotate(180deg); }
.bp-body{ display:none; min-height:0; flex:1; flex-direction:column; border-top:1px solid var(--line-2); }
.bp.open .bp-body{ display:flex; }
.bp-tools{ padding:10px 12px 6px; display:grid; gap:6px; }
.bp-search{
  display:flex; align-items:center; gap:8px; height:38px; padding:0 10px; border:1px solid var(--line);
  border-radius:11px; color:var(--muted); background:var(--row-alt);
}
.bp-search:focus-within{ border-color:var(--navy); background:#fff; box-shadow:0 0 0 3px var(--navy-50); }
.bp-search input{ flex:1; min-width:0; border:0; outline:0; background:none; color:var(--ink); height:100%; }
.bp-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bp-list{ list-style:none; margin:0; padding:2px 8px 10px; overflow:auto; max-height:360px; overscroll-behavior:contain; }
.bp-item{
  display:flex; align-items:flex-start; gap:10px; width:100%; padding:9px 8px; border:0; border-radius:10px;
  background:none; text-align:left; transition:background .15s;
}
.bp-item:hover{ background:var(--row-alt); }
.bp-item .box{ margin-top:2px; }
.bp-item[aria-pressed="true"]{ background:var(--navy-50); }
.bp-item[aria-pressed="true"] .box{ background:var(--navy); border-color:var(--navy); }
.bp-item[aria-pressed="true"] .box::after{ content:""; width:8px; height:4px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:translateY(-1px) rotate(-45deg); }
.bp-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.bp-name{
  font-size:13.5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; overflow-wrap:anywhere;
}
.bp-meta{ display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.dot{ width:7px; height:7px; border-radius:50%; background:#B8BFCA; flex:none; display:inline-block; }
.dot.live{ background:var(--green); box-shadow:0 0 0 3px rgba(46,125,50,.16); }
.live-t{ color:var(--green); font-weight:600; }
.bp-count{ font-size:13px; font-weight:600; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap; padding-top:1px; }
.bp-count s{ text-decoration:none; color:var(--muted); font-weight:400; }
.bp-item.zero{ opacity:.45; }
.bp-item.none{ position:sticky; top:0; z-index:1; background:#fff; border-bottom:1px dashed var(--line); border-radius:0; margin-bottom:2px; }
.bp-item.none[aria-pressed="true"]{ background:var(--navy-50); }
.bp-item.none .bp-name{ font-weight:600; color:var(--navy); }
.bp-empty{ padding:18px; text-align:center; color:var(--muted); font-size:13.5px; }

@media (min-width:1040px){
  .bp{ min-height:440px; }
  .bp-in{ position:absolute; inset:0; }
  .bp-head{ cursor:default; pointer-events:none; }
  .bp-chev{ display:none; }
  .bp-body{ display:flex; }
  .bp-list{ max-height:none; flex:1; }
}

/* ================= tables ================= */
.tblhead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; margin:18px 2px 8px; }
.tblhead .count{ flex:1 1 260px; }
.count{ font-size:14px; color:var(--muted); }
.count b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.sortsel{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.sortsel select{
  height:36px; border:1px solid var(--line); border-radius:10px; padding:0 8px; background:#fff; color:var(--ink);
}
.tblcard{ padding:0; }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; }
.tbl thead{ display:none; }
.tbl tbody{ display:grid; grid-template-columns:minmax(0,1fr); }
.tbl tr{ display:block; }
.tbl td{ display:block; }

/* pills */
.pill{
  display:inline-flex; align-items:center; gap:5px; padding:2px 10px 2px 8px; border-radius:999px;
  background:var(--bg2); color:var(--ink2); font-size:12.5px; font-weight:600; line-height:1.5; white-space:nowrap;
  border:1px solid color-mix(in srgb,var(--c) 22%,transparent);
}
.pill .ic{ font-size:10px; }
.pill.ghost{ background:#fff; border-style:dashed; font-weight:500; }
.st{ display:inline-flex; align-items:flex-start; gap:6px; font-size:13px; line-height:1.4; color:var(--ink); }
.st i{ width:8px; height:8px; border-radius:50%; background:var(--c); margin-top:6px; flex:none; }
.clamp{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.dash{ color:#A3AAB5; }
.sku{ font-weight:600; overflow-wrap:anywhere; }

/* ----- card list (mobile / tablet) ----- */
.tbl tr.row{
  position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px 10px;
  padding:14px 16px; border-bottom:1px solid var(--line-2); cursor:pointer;
  transition:background .15s;
}
.tbl tr.row:hover{ background:var(--row-alt); }
.tbl tr.row.is-open{ background:var(--navy-50); }
.row td[data-l="sig"]{ grid-column:1/3; grid-row:1; }
.row td[data-l="state"]{ grid-column:3/5; grid-row:1; justify-self:end; text-align:right; }
.row td[data-l="sku"]{ grid-column:1/-1; font-size:15.5px; }
.row td[data-l="cat"]{ grid-column:1/-1; font-size:13px; color:var(--muted); }
.row td[data-l="year"]{ display:none; }
.row td.nm{ display:flex; flex-direction:column; font-variant-numeric:tabular-nums; }
.row td.nm::before{ content:attr(data-t); font-size:11px; color:var(--muted); line-height:1.3; }
.row td.nm b{ font-weight:600; font-size:15px; }
.row td[data-l="note"]{ grid-column:2/-1; align-self:center; font-size:13px; color:var(--amber); background:var(--amber-bg); padding:4px 10px; border-radius:8px; }
.row td[data-l="note"].empty-c{ display:none; }
.row td[data-l="nb"]{ grid-column:1/2; }
.tbl tr.detail{ display:block; border-bottom:1px solid var(--line-2); background:var(--navy-50); }
.tbl tr.detail td{ padding:12px 16px 16px; }

/* basket rows */
.bname-meta{ display:block; font-weight:400; font-size:12px; color:var(--muted); margin-top:2px; }

.ext{
  display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:500; text-decoration:none;
  color:var(--blue-ink); padding:4px 8px; border-radius:8px; white-space:nowrap;
}
.ext:hover{ background:var(--blue-bg); }
.diff-pos{ color:var(--green); font-weight:600; }
.diff-neg{ color:var(--red); font-weight:600; }
.low-days{ color:var(--orange-ink); font-weight:600; }

/* detail content */
.pd-h{ font-weight:600; font-size:13.5px; color:var(--navy); margin-bottom:8px; }
.pd-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.pd-list li{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:4px 10px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px;
}
.pd-name{ font-size:13.5px; overflow-wrap:anywhere; line-height:1.4; }
.pd-meta{ grid-column:2; font-size:11.5px; color:var(--muted); }
.pd-price{ font-weight:600; font-variant-numeric:tabular-nums; grid-row:1; grid-column:3; text-align:right; }
.pd-list li .ext{ grid-column:3; grid-row:2; justify-self:end; padding:0 4px; }
.pd-empty{ color:var(--muted); font-size:13.5px; }
.pd-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.pd-k{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.pd-k span{ display:block; font-size:11.5px; color:var(--muted); }
.pd-k b{ font-size:15px; font-variant-numeric:tabular-nums; }
.pd-advice{ margin:0 0 10px; font-size:13.5px; color:#374151; }

.empty{ padding:40px 20px; text-align:center; display:grid; gap:6px; justify-items:center; }
.empty-i{ font-size:34px; }
.more{ padding:14px; text-align:center; border-top:1px solid var(--line-2); }

.ideas{
  background:linear-gradient(180deg,#F4F8FF,#EEF4FF); border:1px solid #CFDFFB; border-radius:var(--r);
  padding:4px 12px; box-shadow:var(--sh);
}
.ideas-body p{ margin:0 0 6px; font-size:14px; line-height:1.6; color:#1e293b; }
.ideas-body p.lead{ font-weight:600; font-size:14.5px; }
.ideas-body p.talk{ background:#fff; border-left:3px solid var(--blue); padding:8px 12px; border-radius:0 10px 10px 0; font-weight:500; }
.ideas-body p.fine{ font-size:12.5px; color:var(--muted); line-height:1.6; }
.ideas-body p.end{ font-size:12.5px; color:var(--blue-ink); font-weight:600; margin:8px 0 0; }

.b-top{ display:grid; gap:10px; grid-template-columns:minmax(0,1fr); margin-bottom:12px; }

.lchips{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0; }
.lchip{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:4px 8px 4px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-weight:500; font-size:13.5px;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.lchip:hover{ border-color:var(--c); }
.lchip .n{
  min-width:24px; height:24px; border-radius:999px; display:inline-grid; place-items:center; padding:0 6px;
  background:var(--bg2); color:var(--ink2); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums;
}
.lchip[aria-pressed="true"]{ background:var(--bg2); border-color:var(--c); color:var(--ink2); font-weight:600; box-shadow:0 0 0 2px color-mix(in srgb,var(--c) 22%,transparent); }
.lchip.zero:not([aria-pressed="true"]){ opacity:.5; }

.foot{ margin-top:28px; text-align:center; font-size:12px; color:var(--muted); }
.fatal{ padding:30px 20px; text-align:center; display:grid; gap:8px; justify-items:center; }

/* ----- desktop table ----- */
@media (min-width:1180px){
  .tbl thead{ display:table-header-group; }
  .tbl tbody{ display:table-row-group; }
  .tbl tr{ display:table-row; }
  .tbl td,.tbl th{ display:table-cell; }
  .tbl tr.row{ display:table-row; }
  .tbl td{ padding:11px 12px; border-bottom:1px solid var(--line-2); vertical-align:middle; font-size:14px; }
  .tbl tr.row:hover td{ background:var(--navy-50); }
  .tbl tr.row.is-open td{ background:var(--navy-50); border-bottom-color:transparent; }
  .row td[data-l]{ grid-column:auto; grid-row:auto; justify-self:auto; text-align:left; }
  .row td.num{ text-align:right; }
  .row td[data-l="year"]{ display:table-cell; }
  .row td.nm{ display:table-cell; }
  .row td.nm::before{ content:none; }
  .row td.nm b{ font-size:14px; font-weight:500; }
  .row td[data-l="sku"]{ font-size:14px; }
  .row td[data-l="cat"]{ font-size:13px; color:#4B5563; }
  .row td[data-l="note"]{ background:none; color:var(--amber); padding:11px 12px; border-radius:0; font-size:13px; }
  .row td[data-l="note"].empty-c{ display:table-cell; }
  .tbl tr.detail{ display:table-row; }
  .tbl tr.detail td{ padding:6px 16px 18px 28px; background:var(--navy-50); border-bottom:1px solid var(--line); }
  .pd-list li{ grid-template-columns:auto minmax(0,1fr) 110px auto; }
  .pd-meta{ grid-column:auto; }
  .pd-price{ grid-row:auto; grid-column:auto; }
  .pd-list li .ext{ grid-column:auto; grid-row:auto; }
  .pd-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }

  .tbl thead th{
    position:sticky; top:0; z-index:5; background:#F8FAFC; border-bottom:1px solid var(--line);
    font-size:12.5px; font-weight:600; color:#4B5563; text-align:left; padding:0; white-space:nowrap;
  }
  .tbl thead th:first-child{ border-top-left-radius:var(--r); }
  .tbl thead th:last-child{ border-top-right-radius:var(--r); }
  .tbl thead th.num{ text-align:right; }
  .th-b{
    display:inline-flex; align-items:center; gap:5px; width:100%; padding:12px 12px; border:0; background:none;
    font-weight:600; color:inherit; justify-content:flex-start;
  }
  th.num .th-b{ justify-content:flex-end; }
  .th-b:hover{ color:var(--navy); background:var(--navy-50); }
  .th-b .ar{ font-size:9px; opacity:.25; }
  th[aria-sort="ascending"] .th-b,th[aria-sort="descending"] .th-b{ color:var(--navy); }
  th[aria-sort="ascending"] .ar,th[aria-sort="descending"] .ar{ opacity:1; }
  .th-plain{ display:block; padding:12px; }
  .sortsel{ display:none; }

}

/* ================= login ================= */
.login{
  position:fixed; inset:0; z-index:100; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 16px; gap:18px;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(120,165,225,.40), transparent 60%),
    radial-gradient(700px 400px at 0% 110%, rgba(120,165,225,.22), transparent 60%),
    linear-gradient(180deg,#1E3A5F,#142a4a);
}
.lg-card{
  width:100%; max-width:400px; background:#fff; border-radius:22px; padding:26px 24px 24px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.2); animation:fade .35s var(--ease);
}
.lg-brand{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.lg-mark{ background:var(--navy); border-color:var(--navy); box-shadow:none; }
.lg-name{ font-weight:700; font-size:17px; color:var(--navy); line-height:1.2; }
.lg-sub{ font-size:12.5px; color:var(--muted); }
.lg-pane h2{ font-size:22px; color:var(--ink); margin-bottom:6px; letter-spacing:-.01em; }
.lg-lead{ color:#4B5563; font-size:14.5px; margin-bottom:18px; }
.lg-lab{ display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; }
.lg-input{
  width:100%; height:48px; border:1px solid #D1D5DB; border-radius:12px; padding:0 14px; font-size:16px; outline:0; background:#fff;
  transition:border-color .2s,box-shadow .2s;
}
.lg-input:focus{ border-color:var(--navy); box-shadow:0 0 0 4px var(--navy-50); }
.lg-input.bad{ border-color:var(--red); box-shadow:0 0 0 4px var(--red-bg); }
.lg-err{
  display:flex; align-items:center; gap:8px; margin-top:10px; padding:9px 12px; border-radius:10px;
  background:var(--red-bg); color:var(--red); font-size:14px; font-weight:500;
}
.lg-btn{ width:100%; height:48px; margin-top:16px; font-size:15.5px; }
.lg-btn[aria-busy="true"]{ opacity:.7; pointer-events:none; }
.lg-err:not([hidden]) ~ .lg-note{ display:none; }
.lg-note{ margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center; }
.lg-mail{ width:76px; height:76px; border-radius:22px; background:var(--navy-50); color:var(--navy); display:grid; place-items:center; margin:0 auto 14px; }
#lg-check{ text-align:center; }
.lg-email{ color:var(--navy); overflow-wrap:anywhere; }
.lg-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.lg-actions .btn{ flex:1 1 140px; }
.lg-foot{ font-size:12px; color:rgba(255,255,255,.6); }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}
@media print{ .mast,.tabs,.controls,.filters{ display:none; } }

.fhint{ font-weight:400; font-size:12px; color:var(--muted); margin-left:6px; }
@media (max-width:719px){ .fhint{ display:none; } }

/* ================= ตลาด (ราคาคู่แข่ง) ================= */
.mk{ display:inline-flex; flex-direction:column; align-items:flex-end; line-height:1.3; }
.mk b{ font-size:14px; color:var(--ink2); font-variant-numeric:tabular-nums; }
.mk small{ font-size:11.5px; color:var(--ink2); }
.mk.any{ --ink2:var(--muted); opacity:.85; }
.mk-cav{ margin:0; font-size:12px; line-height:1.55; color:var(--muted); }
.mk-cav-top{ background:#fff; border:1px dashed var(--navy-300); border-radius:10px; padding:8px 12px; margin:14px 2px 0; }
.mk-cav-top b{ color:var(--navy); }
.pd-mk{ margin:0 0 6px; font-size:13.5px; line-height:1.6; }
@media (max-width:1179px){
  .row td.mkc{ grid-column:1/-1; order:2; }
  .row td[data-l="note"]{ order:1; }
  .row td.mkc::before{ content:"เทียบตลาด"; display:block; font-size:11px; color:var(--muted); line-height:1.3; }
  .row td.mkc .mk{ flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:0 8px; }
  .row td.mkc.empty-c{ display:none; }
  .tbl-a td[data-l="note"]{ grid-column:1/-1; }
  .tbl-a td[data-l="sig"]{ grid-column:1/3; }
}
@media (min-width:1180px){ .row td.mkc.empty-c{ display:table-cell; } td.mkc{ min-width:112px; } }
.go-an{ padding:0 10px; white-space:nowrap; }
.to-an{ margin:10px 0 0; }
.tag{ display:inline-block; margin-left:6px; padding:0 7px; border-radius:999px; background:var(--bg2); color:var(--ink2); font-size:11px; font-weight:600; line-height:1.6; vertical-align:middle; }
.tags{ white-space:normal; }

/* ================= TAB 3 : วิเคราะห์กลยุทธ์ ================= */
.tab span{ text-align:center; line-height:1.3; }
@media (max-width:719px){ .tab{ padding:7px 2px; font-size:12px; } }
.az-note{
  display:flex; gap:10px; align-items:flex-start; padding:10px 14px; margin-bottom:14px; border-radius:var(--r);
  background:linear-gradient(180deg,#F4F8FF,#EEF4FF); border:1px solid #CFDFFB; font-size:13px; line-height:1.55; color:#1e293b;
}
.az-note svg{ flex:none; color:var(--blue-ink); margin-top:3px; }
.az-note b{ color:var(--blue-ink); }
.az-grid{ display:grid; gap:14px; grid-template-columns:minmax(0,1fr); align-items:start; }
.az-main{ display:grid; gap:14px; min-width:0; grid-template-columns:minmax(0,1fr); }
.az-main > *{ min-width:0; }
@media (min-width:1100px){
  .az-grid{ grid-template-columns:minmax(280px,320px) minmax(480px,1fr); gap:16px; }
  .az-pick{ position:sticky; top:12px; height:calc(100vh - 24px); max-height:760px; }
}
@media (min-width:1280px){
  .az-main.az-has{ grid-template-columns:minmax(420px,1fr) 430px; grid-template-areas:"head head" "sum adv" "bud adv" "more more"; align-items:start; }
  /* แผงผู้ช่วย: wrapper (.az-side) เป็นเซลล์กริดที่จองคอลัมน์ขวาไว้ — ตัวแผงที่ sticky อยู่ "ข้างใน" wrapper
     (Chrome จำกัด sticky ด้วย containing block = wrapper ไม่ใช่ทั้งกริด จึงไม่ไหลลงไปทับตาราง SKU) */
  .az-head{ grid-area:head; } .az-score{ grid-area:score; }
  .az-side{ grid-area:adv; align-self:stretch; min-width:0; }
  .az-adv{ position:sticky; top:12px; max-height:calc(100vh - 24px); }
  .az-sum{ grid-area:sum; } .az-bud{ grid-area:bud; } .az-more{ grid-area:more; }
}

/* ----- picker ----- */
.az-pick .bp-sel{ max-width:55%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.az-quick{ display:flex; flex-wrap:wrap; gap:6px; }
.az-quick .chip{ height:34px; }
.az-quick .chip b{ color:inherit; font-weight:700; font-variant-numeric:tabular-nums; }
.az-list{ list-style:none; }
.az-item{
  display:flex; gap:10px; align-items:flex-start; width:100%; padding:9px 10px; border:0; border-left:3px solid transparent;
  border-radius:10px; background:none; text-align:left; transition:background .15s;
}
.az-item:hover{ background:var(--row-alt); }
.az-item[aria-current="true"]{ background:var(--navy-50); border-left-color:var(--navy); }
.az-val{ flex:none; font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; line-height:1.35; }
.az-val small{ display:block; font-weight:400; font-size:11px; color:var(--muted); }
.az-hint{ padding:8px 10px; margin:2px 0 4px; border-radius:10px; background:var(--amber-bg); color:var(--amber); font-size:12.5px; line-height:1.5; }

/* ----- empty / start ----- */
.az-empty{ padding:36px 18px 28px; text-align:center; display:grid; gap:6px; justify-items:center; }
.az-starts{ display:grid; gap:10px; width:100%; max-width:760px; margin-top:12px; grid-template-columns:minmax(0,1fr); }
@media (min-width:720px){ .az-starts{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.az-start{
  display:flex; flex-direction:column; gap:2px; text-align:left; padding:12px 14px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--sh); transition:transform .15s var(--ease),border-color .15s,box-shadow .2s;
}
.az-start:hover{ transform:translateY(-1px); border-color:var(--navy-300); box-shadow:0 4px 12px -2px rgba(16,24,40,.12); }
.as-t{ font-size:12px; font-weight:600; color:var(--blue-ink); }
.as-n{ font-size:13.5px; line-height:1.45; color:var(--ink); overflow-wrap:anywhere; }
.as-v{ font-size:15px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; }

/* ----- headline ----- */
.az-head{ padding:16px 18px; border-left:5px solid var(--c); }
.az-h-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.az-head h2{ font-size:18px; line-height:1.45; margin:8px 0 4px; overflow-wrap:anywhere; letter-spacing:-.005em; }
.az-meta{ display:flex; flex-wrap:wrap; gap:2px 14px; font-size:12.5px; color:var(--muted); align-items:center; }
.az-meta > span{ display:inline-flex; align-items:center; gap:6px; }
.az-verdict{ margin:12px 0 0; padding:12px 14px; border-radius:12px; background:var(--bg2); font-size:16px; line-height:1.65; font-weight:500; color:var(--ink); overflow-wrap:anywhere; }
.az-verdict b{ font-weight:700; color:var(--ink2); }
.az-sigs{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.sg{ display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; background:var(--bg2); color:var(--ink2); font-size:12.5px; font-weight:600; border:1px solid color-mix(in srgb,var(--c) 22%,transparent); }

/* ----- scorecards + gauge ----- */
.az-score{ display:grid; gap:10px; grid-template-columns:minmax(0,1fr); align-content:start; }
@media (min-width:560px){ .az-score{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.az-sc{ padding:12px 14px 14px; display:flex; flex-direction:column; gap:3px; min-width:0; }
.sc-t{ margin:0; font-size:12.5px; font-weight:500; color:var(--muted); }
.sc-v{ font-size:26px; font-weight:700; line-height:1.2; color:var(--navy); font-variant-numeric:tabular-nums; }
.sc-v small{ font-size:.5em; font-weight:600; color:var(--muted); margin-left:2px; }
.sc-s{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--ink2); line-height:1.4; }
.sc-s i{ width:8px; height:8px; border-radius:50%; background:var(--c); flex:none; }
.sc-n{ font-size:12px; line-height:1.55; color:var(--muted); }
.gauge{ position:relative; height:10px; margin:12px 4px 22px; }
.g-track{ position:absolute; inset:0; border-radius:999px; opacity:.92; }
.g-tick{ position:absolute; top:0; bottom:0; width:2px; margin-left:-1px; background:#fff; }
.g-lab{ position:absolute; top:14px; transform:translateX(-50%); font-size:10.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums; }
.g-mark{ position:absolute; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#fff; border:3px solid var(--navy); box-shadow:0 1px 3px rgba(16,24,40,.35); transition:left .4s var(--ease); }
.az-sc .hbar{ margin:10px 0 8px; }

/* ----- section heads ----- */
.az-sec-h{ margin:0 0 10px; font-size:15px; color:var(--navy); line-height:1.4; }
.az-sec-h small{ font-weight:400; font-size:12px; color:var(--muted); margin-left:6px; }

/* ----- funnel ----- */
.az-fun,.az-mkt{ padding:14px 16px 16px; }
.fn-step{ display:grid; grid-template-columns:92px minmax(0,1fr) 64px; gap:10px; align-items:center; }
.fn-l{ font-size:13px; color:var(--ink); }
.fn-bar{ height:14px; border-radius:7px; background:var(--gray-bg); overflow:hidden; }
.fn-bar i{ display:block; height:100%; border-radius:7px; background:var(--navy); }
.fn-v{ text-align:right; font-variant-numeric:tabular-nums; font-size:14px; }
.fn-conv{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; margin:5px 0 5px 4px; padding:6px 10px; border-left:2px solid var(--navy-100); font-size:12.5px; color:var(--muted); }
.fn-conv .ar{ color:var(--navy-300); }
.fn-conv b{ color:var(--navy); font-size:14px; font-variant-numeric:tabular-nums; }
.vs{ display:inline-flex; align-items:center; gap:4px; padding:0 8px; border-radius:999px; background:var(--bg2); color:var(--ink2); font-size:12px; font-weight:600; line-height:1.7; }
.vs small{ font-weight:400; }
.fn-tot{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin-top:6px; padding-top:10px; border-top:1px dashed var(--line); font-size:13px; }
.fn-note{ margin:10px 0 0; padding:8px 12px; border-radius:10px; background:var(--gray-bg); font-size:12.5px; line-height:1.6; color:var(--ink); }
.fn-note.warn{ background:var(--amber-bg); color:var(--amber); }
.fn-empty,.fn-ref,.fn-foot{ margin:0 0 6px; font-size:13px; color:var(--muted); line-height:1.6; }
.fn-foot{ margin-top:8px; font-size:11.5px; }

/* ----- market block ----- */
.mk-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:10px; }
.mk-st{ padding:8px 10px; border-radius:10px; background:var(--bg2); display:flex; flex-direction:column; gap:1px; min-width:0; }
.mk-st b{ font-size:20px; line-height:1.2; color:var(--ink2); font-variant-numeric:tabular-nums; }
.mk-st span{ font-size:11.5px; color:var(--ink); line-height:1.35; }
.mk-h{ margin:14px 0 6px; font-size:13.5px; color:var(--navy); }
.mk-h small{ font-weight:400; color:var(--muted); font-size:12px; margin-left:6px; }
.mk-sub{ margin:6px 0 4px; font-size:12.5px; color:var(--muted); line-height:1.55; }
.mk-list{ list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px; }
.mk-list li{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:2px 10px; align-items:center; background:var(--row-alt); border:1px solid var(--line-2); border-radius:10px; padding:7px 10px; }
.mk-sku{ font-weight:600; font-size:13.5px; line-height:1.4; overflow-wrap:anywhere; grid-column:1; grid-row:1; }
.mk-p{ grid-column:1/3; grid-row:2; font-size:12px; color:var(--muted); line-height:1.45; }
.mk-g{ grid-column:2; grid-row:1; font-size:12.5px; font-weight:700; padding:0 8px; border-radius:999px; background:var(--bg2); color:var(--ink2); font-variant-numeric:tabular-nums; }
.mk-list .ext{ grid-column:3; grid-row:1 / span 2; padding:4px 6px; }
.az-mkt .mk-cav{ margin:10px 0 4px; padding:8px 12px; background:var(--amber-bg); color:var(--amber); border-radius:10px; }
.az-mkt .btn{ margin-top:2px; }

/* ----- advisor ----- */
.adv{ display:flex; flex-direction:column; overflow:hidden; border-color:#CFDFFB; min-width:0; }
.adv-h{ display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(180deg,#F4F8FF,#EEF4FF); border-bottom:1px solid #CFDFFB; }
.adv-av{ flex:none; width:36px; height:36px; border-radius:50%; background:var(--navy); color:#fff; display:grid; place-items:center; }
.adv-t{ flex:1; min-width:0; }
.adv-t b{ display:block; font-size:15px; color:var(--navy); line-height:1.3; }
.adv-t small{ display:block; font-size:11.5px; color:var(--muted); line-height:1.4; }
#adv-copy{ flex:none; }
#adv-copy.done{ background:var(--green-bg); border-color:color-mix(in srgb,var(--green) 40%,transparent); color:var(--green); }
.adv-qs{ display:flex; gap:8px; overflow-x:auto; padding:10px 14px; border-bottom:1px solid var(--line-2); scroll-snap-type:x proximity; scrollbar-width:thin; overscroll-behavior-x:contain; }
.adv-q{ flex:none; scroll-snap-align:start; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid var(--navy-100); background:var(--navy-50); color:var(--navy); font-size:13.5px; font-weight:500; white-space:nowrap; transition:background .15s,border-color .15s; }
.adv-q:hover{ background:var(--navy-100); }
.adv-q.on{ border-color:var(--navy); box-shadow:0 0 0 2px var(--navy-100); }
.adv-q.sum{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.adv-q.sum:hover{ background:var(--navy-d); }
@media (min-width:720px){ .adv-qs{ flex-wrap:wrap; overflow:visible; } }
.adv-chat{ position:relative; display:flex; flex-direction:column; gap:10px; padding:14px; background:var(--row-alt); }
.adv-h,.adv-qs,.adv-foot{ flex:none; }
@media (min-width:1280px){ .adv-chat{ flex:1 1 auto; min-height:200px; max-height:none; overflow:auto; overscroll-behavior:contain; } }
.msg{ max-width:100%; min-width:0; }
.msg.me{ align-self:flex-end; max-width:88%; padding:7px 14px; border-radius:16px 16px 4px 16px; background:var(--navy); color:#fff; font-size:14px; }
.msg.bot{ align-self:stretch; background:#fff; border:1px solid var(--line); border-radius:4px 16px 16px 16px; padding:12px 14px; box-shadow:var(--sh); }
.msg.hello{ font-size:13px; color:var(--muted); box-shadow:none; background:transparent; border-style:dashed; }
.ans p{ margin:0 0 8px; font-size:14px; line-height:1.7; overflow-wrap:anywhere; }
.ans b{ color:var(--navy); font-weight:700; }
.ans h4{ margin:10px 0 4px; font-size:12.5px; font-weight:600; color:var(--muted); }
.ans ul{ margin:0 0 8px; padding-left:18px; font-size:13.5px; line-height:1.65; overflow-wrap:anywhere; }
.ans li{ margin-bottom:2px; }
.ans .idea{ margin:10px 0 8px; padding:8px 12px; background:#F4F8FF; border-left:3px solid var(--blue); border-radius:0 10px 10px 0; }
.ans .idea > b{ display:block; font-size:12.5px; color:var(--blue-ink); margin-bottom:2px; }
.ans .idea ul{ margin:0; font-size:13.5px; }
.why{ margin-top:10px; padding:8px 12px; background:var(--navy-50); border-radius:10px; font-size:12.5px; }
.why summary{ cursor:pointer; font-weight:600; color:var(--navy); }
.why ul{ list-style:none; margin:6px 0 0; padding:0; display:grid; gap:4px; font-size:12.5px; line-height:1.55; }
.why li{ display:flex; gap:8px; margin:0; }
.why li i{ flex:none; width:16px; font-style:normal; font-weight:700; text-align:center; }
.why li.y i{ color:var(--green); } .why li.n i{ color:var(--red); } .why li.na i{ color:var(--muted); }
.why li span{ min-width:0; overflow-wrap:anywhere; color:#374151; }
.why li.y b{ color:var(--green); } .why li.n b{ color:var(--red); }
.copybox{ width:100%; margin-top:6px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; font:inherit; font-size:12.5px; line-height:1.55; background:var(--row-alt); color:var(--ink); resize:vertical; }
.adv-foot{ margin:0; padding:8px 14px 12px; font-size:11.5px; color:var(--muted); line-height:1.5; border-top:1px solid var(--line-2); }

/* ----- SKU section ----- */
.az-sku .az-sec-h{ margin:4px 2px 10px; }
.az-ins{ margin-bottom:0; }
.az-ins .k-sub{ overflow-wrap:anywhere; }
.asort{ display:inline-flex !important; }
.tbl-a tr.row{ cursor:default; }
.tbl-a .th-plain{ white-space:nowrap; }
.tbl-a td[data-l="sku"] .tags{ display:inline; }

/* ----- เพิ่ม: ราคาไลฟ์/โปร · 3 ร้านถูกสุด · การ์ดช่องว่างมีรูป · แนวโน้ม ROAS ----- */
.lv{ display:inline-block; margin-left:6px; padding:0 7px; border-radius:999px; background:var(--amber-bg); color:var(--amber); font-size:11px; font-weight:600; line-height:1.6; white-space:nowrap; border:1px solid color-mix(in srgb,var(--amber) 25%,transparent); }
.mk .lv{ margin:2px 0 0; }
@media (max-width:1179px){ .row td.mkc .mk .lv{ margin:0; } }
.mk-shops{ list-style:none; margin:0 0 6px; padding:0; display:grid; gap:6px; }
.mk-shops li{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:7px 10px; font-size:13.5px; }
.mk-shops .rk{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--navy-50); color:var(--navy); font-size:12px; font-weight:700; display:grid; place-items:center; }
.mk-shops .pr{ font-weight:700; font-variant-numeric:tabular-nums; color:var(--navy); }
.mk-shops .lv{ margin-left:0; }
.mk-shops .ext{ margin-left:auto; }
.mk-list li.gi{ grid-template-columns:48px minmax(0,1fr) auto; }
.mk-list li.gi .mk-img{ grid-column:1; grid-row:1 / span 2; width:48px; height:48px; border-radius:8px; object-fit:cover; background:var(--gray-bg); }
.mk-list li.gi .mk-sku{ grid-column:2; }
.mk-list li.gi .mk-p{ grid-column:2; }
.mk-list li.gi .ext{ grid-column:3; }
.ad-trend{ display:flex; align-items:center; gap:12px; margin:0 0 6px; padding:8px 12px; border-radius:12px; background:var(--bg2); color:var(--c); }
.spark{ flex:none; display:block; }
.at-t{ min-width:0; color:var(--ink); display:flex; flex-direction:column; line-height:1.4; }
.at-t b{ font-size:13px; color:var(--ink2); }
.at-t span{ font-size:13.5px; font-weight:600; overflow-wrap:anywhere; }
.at-t small{ font-size:11.5px; color:var(--muted); overflow-wrap:anywhere; }
.at-cav{ margin:0 0 12px; font-size:11.5px; line-height:1.55; color:var(--muted); }

/* ----- แก้ตามผลทดสอบ: ข้อสังเกตเพิ่มเติม · แท็กร้าน · ไม่มี SKU ----- */
.az-src{ margin:6px 2px 0; font-size:11.5px; color:var(--muted); }
.az-obs{ margin-top:12px; padding:10px 12px; border-radius:12px; background:var(--row-alt); border:1px dashed var(--line); }
.az-obs h3{ margin:0 0 6px; font-size:13.5px; color:var(--navy); }
.az-obs h3 small{ font-weight:400; font-size:11.5px; color:var(--muted); margin-left:6px; }
.az-obs ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.az-obs li{ display:flex; gap:8px; align-items:flex-start; font-size:13.5px; line-height:1.6; }
.az-obs li i{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--c); margin-top:9px; }
.az-obs li span{ min-width:0; overflow-wrap:anywhere; }
.az-obs b{ color:var(--navy); }
.az-none{ margin:0; font-size:13px; color:var(--muted); }
.shop-tag,.nosku-tag{ display:inline-block; padding:0 7px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.6; vertical-align:middle; }
.shop-tag{ background:var(--blue-bg); color:var(--blue-ink); }
.nosku-tag{ background:var(--gray-bg); color:var(--gray); border:1px dashed #C5CBD4; }
.az-item.nosku{ opacity:.6; }
.az-item.nosku[aria-current="true"]{ opacity:1; }

/* ----- ราคา 2 มุม · เทียบชื่อ/หมวด/ปี ----- */
.mk-basis{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 6px; }
.mb-l{ font-size:12.5px; color:var(--muted); font-weight:600; margin-right:2px; }
.seg{ min-height:34px; padding:0 12px; border-radius:999px; border:1px solid var(--navy-100); background:#fff; color:var(--navy); font-size:13px; font-weight:500; line-height:1.3; }
.seg:hover{ background:var(--navy-50); }
.seg[aria-pressed="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.mk-basis-note{ margin:0 0 8px; }
.mk-cav-t{ margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
.mkv{ max-width:220px; text-align:right; overflow-wrap:anywhere; color:var(--muted) !important; }
@media (max-width:1179px){ .row td.mkc .mkv{ max-width:none; text-align:left; } }
.yb{ display:inline-block; padding:0 7px; border-radius:999px; font-size:11px; font-weight:600; line-height:1.6; white-space:nowrap; vertical-align:middle; }
.yb.hint{ background:var(--green-bg); color:var(--green); }
.yb.infer{ background:var(--gray-bg); color:var(--gray); border:1px dashed #C5CBD4; cursor:help; }
.mk.sus{ --ink2:var(--muted); opacity:.85; max-width:240px; }
.mk.sus .ext{ padding:2px 0; }
.mk-vs{ grid-column:1 / -1; grid-row:3; display:flex; flex-wrap:wrap; gap:2px 14px; font-size:11.5px; color:var(--muted); line-height:1.5; padding-top:2px; }
.mk-vs b{ color:var(--navy); font-weight:600; margin-right:3px; }
.vs-title{ flex-basis:100%; overflow-wrap:anywhere; }
.pd-mk + .mk-vs{ display:flex; margin:0 0 8px; padding:6px 10px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.mk-shops .sn{ color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }

/* ----- ปีอนุมาน (ยังไม่ยืนยัน) · แพ็คเกจ · ช่องติ๊กรวม ----- */
.mk.inf{ --ink2:var(--muted); opacity:.88; max-width:260px; padding-left:8px; border-left:2px dashed #C5CBD4; }
.mk-ih{ font-weight:600; color:var(--muted) !important; }
.yb.pkg{ background:var(--amber-bg); color:var(--amber); }
.mk-inc{ display:inline-flex; align-items:center; gap:6px; min-height:34px; margin-left:4px; font-size:12.5px; color:var(--ink); }
.mk-inc input{ width:18px; height:18px; accent-color:var(--navy); }
@media (max-width:1179px){ .row td.mkc .mk.inf{ max-width:none; } }

.yb.img{ background:var(--green-bg); color:var(--green); cursor:help; }
.yb + .yb{ margin-left:4px; }

.row td[data-l="sig"] .pill{ white-space:nowrap; }
/* จอ 1180–1439: ชิปเกณฑ์/ตลาดยาวขึ้น → บีบ padding/ฟอนต์ของตารางเล็กน้อยให้พอดีการ์ด ไม่ล้น */
@media (min-width:1180px) and (max-width:1439px){
  .tbl td{ padding:9px 6px; font-size:13px; }
  .tbl thead th .th-b,.tbl .th-plain{ padding:11px 6px; font-size:12px; }
  .tbl .pill{ font-size:11.5px; padding:1px 7px 1px 5px; }
  .row td.nm b{ font-size:13px; }
  .mk b{ font-size:13px; } .mk small,.mkv{ font-size:11px; } .mkv{ max-width:170px; }
  .row td[data-l="note"]{ max-width:150px; }
}
@media (min-width:1180px){ .row td[data-l="sig"]{ white-space:nowrap; } .mk b,.mk small{ white-space:normal; } }

/* ================= TAB 4 : แจ้งเตือน + กระดิ่ง ================= */
.mast-act{ display:flex; align-items:center; gap:8px; justify-self:end; }
@media (max-width:719px){ .mast-act{ grid-column:2; grid-row:1; } }
@media (min-width:720px){ .mast-act{ grid-column:4; grid-row:1; } }
.bell{ position:relative; width:42px; height:42px; border-radius:12px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); color:#fff; display:grid; place-items:center; transition:background .2s; }
.bell:hover{ background:rgba(255,255,255,.22); }
.bell-n{ position:absolute; top:-7px; right:-7px; min-width:21px; height:21px; padding:0 5px; border-radius:999px; background:#E53935; color:#fff; font-size:11.5px; font-weight:700; line-height:1; display:grid; place-items:center; border:2px solid #1E3A5F; font-variant-numeric:tabular-nums; }
.bell-dot{ position:absolute; bottom:6px; right:7px; width:9px; height:9px; border-radius:50%; background:#60A5FA; border:2px solid #1E3A5F; }
.bell.warn::after{ content:""; position:absolute; top:5px; left:6px; width:8px; height:8px; border-radius:50%; background:#F59E0B; }
.tab{ position:relative; }
.tab-n{ position:absolute; top:2px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:#E53935; color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; line-height:1; }
@media (max-width:400px){ .tab span{ font-size:11px; } }
@media (min-width:720px){ .tab-n{ position:static; margin-left:2px; } }

.al-banner{ padding:10px 14px; border-radius:12px; font-size:13.5px; line-height:1.55; margin:0 0 12px; overflow-wrap:anywhere; }
.al-banner.warn{ background:var(--amber-bg); color:var(--amber); border:1px solid color-mix(in srgb,var(--amber) 30%,transparent); font-weight:600; }
.al-banner.mock{ background:var(--blue-bg); color:var(--blue-ink); }
.al-ok{ margin:0 0 10px; font-size:12px; color:var(--muted); }
.al-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-bottom:6px; }
.al-tools .lchips{ margin:8px 0; }
.al-hidtgl{ display:inline-flex; align-items:center; gap:6px; font-size:13px; min-height:38px; margin-left:auto; }
.al-hidtgl input{ width:18px; height:18px; accent-color:var(--navy); }
.al-sec-h{ margin:18px 2px 8px; font-size:16px; color:var(--c); display:flex; align-items:center; gap:8px; }
.al-sec-h small{ font-size:12.5px; font-weight:700; padding:0 8px; border-radius:999px; background:var(--bg2); color:var(--ink2); }
.al-list{ display:grid; gap:12px; }
.al-none{ margin:0; padding:14px 16px; font-size:13.5px; color:var(--muted); }
.al-empty{ padding:36px 18px; }
.al-card{ padding:0; overflow:hidden; border-left:5px solid var(--c); transition:box-shadow .3s; }
.al-card.read{ opacity:.78; } .al-card.hid{ opacity:.5; }
.al-card.flash{ box-shadow:0 0 0 3px var(--blue); }
.al-h{ padding:14px 16px 6px; display:flex; flex-wrap:wrap; gap:6px 14px; align-items:flex-start; justify-content:space-between; }
.al-h1{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; }
.al-h0{ flex:1 1 260px; min-width:0; }
.al-prod{ display:flex; align-items:center; gap:10px; margin-top:8px; min-width:0; }
.al-img{ position:relative; flex:none; width:56px; height:56px; border-radius:10px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; overflow:hidden; }
.al-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.al-ico{ font-style:normal; font-size:22px; opacity:.55; }
.al-name{ flex:1; min-width:0; font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.al-name.none{ font-style:italic; opacity:.7; }
.al-sku{ font-size:22px; font-weight:700; letter-spacing:-.01em; line-height:1.25; overflow-wrap:anywhere; color:var(--ink); }
.al-tag{ display:inline-flex; align-items:center; padding:3px 12px; border-radius:999px; font-size:14px; font-weight:700; white-space:nowrap; }
.al-tag.out{ background:var(--red); color:#fff; } .al-tag.cancel{ background:var(--blue-bg); color:var(--blue-ink); }
.al-when{ font-size:13px; color:var(--muted); }
.al-when b{ color:var(--ink); }
.al-info{ margin:0; padding:0 16px 10px; font-size:13px; line-height:1.6; color:var(--muted); overflow-wrap:anywhere; }
.al-kv{ display:grid; grid-template-columns:max-content 1fr; gap:2px 12px; margin:0; padding:0 16px 10px; font-size:13px; line-height:1.6; }
.al-kv dt{ color:var(--muted); }
.al-kv dd{ margin:0; color:var(--ink); overflow-wrap:anywhere; min-width:0; }
.al-sug{ margin:0 16px 10px; padding:10px 12px; border-radius:12px; font-size:15px; font-weight:600; line-height:1.55; overflow-wrap:anywhere; }
.al-sug.lv-price{ background:var(--red-bg); color:var(--red); } .al-sug.lv-wait{ background:var(--amber-bg); color:var(--amber); }
.al-sug.lv-none{ background:var(--gray-bg); color:var(--gray); } .al-sug.lv-back{ background:var(--green-bg); color:var(--green); }
.al-body{ display:grid; gap:14px; padding:4px 16px 14px; grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){ .al-body.two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
.al-body > section{ min-width:0; }
.al-h3{ margin:0 0 6px; font-size:13px; font-weight:600; color:var(--muted); }
.al-blist,.al-subs{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.al-b{ display:grid; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; min-width:0; }
.al-b.bought{ border-color:var(--blue); background:#F4F8FF; }
.al-b-main{ display:grid; gap:4px; min-width:0; }
.al-b-name{ font-size:13.5px; line-height:1.45; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.al-b-meta{ font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:2px 8px; }
.al-note{ font-size:11.5px; color:var(--amber); background:var(--amber-bg); border-radius:8px; padding:3px 8px; line-height:1.45; }
.al-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.al-btns .btn{ height:42px; padding:0 8px; font-size:13.5px; text-decoration:none; color:var(--ink); white-space:nowrap; }
.al-btns .btn.sm{ height:36px; font-size:13px; }
.al-btns .al-edit{ background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; }
.al-btns .al-edit:hover{ background:var(--navy-d); }
.al-btns .btn.off{ opacity:.45; pointer-events:none; }
.al-sub{ display:grid; gap:8px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; min-width:0; }
.al-sub.dim{ opacity:.55; background:var(--row-alt); }
.al-sub.rec{ opacity:1; border-color:var(--green); background:#F6FBF6; box-shadow:0 0 0 2px color-mix(in srgb,var(--green) 22%,transparent); }
.al-sub-h{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:13.5px; }
.al-sub-h b{ overflow-wrap:anywhere; }
.al-chip{ display:inline-block; padding:0 8px; border-radius:999px; background:var(--gray-bg); color:var(--gray); font-size:11.5px; font-weight:600; line-height:1.7; white-space:nowrap; }
.al-chip.same{ background:var(--green-bg); color:var(--green); } .al-chip.rec{ background:var(--green); color:#fff; } .al-chip.bought{ background:var(--blue); color:#fff; }
.al-stk{ font-size:12.5px; font-weight:700; color:var(--green); } .al-stk.z{ color:var(--muted); }
.al-f{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px 14px; border-top:1px solid var(--line-2); }
@media (max-width:719px){ .al-f .btn{ flex:1 1 140px; height:42px; } .al-sku{ font-size:20px; } }

@media (max-width:719px){ .al-sug .link,.al-info .link{ display:inline-flex; align-items:center; min-height:36px; padding:0 8px; margin-left:2px; } }

/* ================= หลายแพลตฟอร์ม ================= */
.pfbar{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin:0 0 14px; padding:10px 14px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); }
.pf-group{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pf-l{ font-size:12.5px; font-weight:600; color:var(--muted); }
.pf-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.pf-chip{ min-height:36px; }
.pf-shop{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.pf-shop select{ height:38px; border:1px solid var(--line); border-radius:10px; padding:0 8px; background:#fff; color:var(--ink); max-width:260px; }
.pf-sum{ flex-basis:100%; font-size:12px; color:var(--muted); }
@media (max-width:719px){ .pf-shop{ margin-left:0; width:100%; } .pf-shop select{ flex:1; max-width:none; } }
.pf-b{ display:inline-block; padding:0 7px; border-radius:6px; font-size:11px; font-weight:700; line-height:1.75; white-space:nowrap; vertical-align:middle; color:#fff; }
.pf-shopee{ background:#D63D1F; } .pf-tiktok{ background:#111827; } .pf-lazada{ background:#1E2A78; }
.bname-meta .pf-b,.bp-meta .pf-b,.al-b-meta .pf-b{ margin-right:2px; }
.lk{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.pd-links{ max-width:380px; margin:0 0 10px; }
.pd-diff{ margin:0 0 8px; padding:8px 12px; background:var(--amber-bg); color:var(--amber); border-radius:10px; font-size:13.5px; font-weight:600; line-height:1.55; }
.pd-same{ margin:0 0 8px; font-size:12.5px; color:var(--green); font-weight:600; }
.pd-plat{ margin:10px 0 6px; font-size:13px; display:flex; align-items:center; gap:6px; }
.pd-ext{ grid-column:3; grid-row:2; display:flex; gap:6px; justify-self:end; }
.pd-ext .ext{ grid-column:auto; grid-row:auto; }
@media (min-width:1180px){ .pd-ext{ grid-column:auto; grid-row:auto; } }
.az-h-l,.az-h-r{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; }

/* ----- ยกเลิกเร่งด่วน / ลูกค้าขอยกเลิก / ยังไม่ชำระ ----- */
.al-pin{ margin:0 0 6px; }
.al-card.urgent{ border:2px solid var(--red); border-left-width:6px; background:#FFF8F7; box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 14%,transparent); }
.al-card.req{ border:2px solid var(--amber); border-left-width:6px; background:#FFFCF3; }
.al-card.unpaid{ opacity:.6; }
.al-card.unpaid.read{ opacity:.5; }
.al-alarm{ margin:0 16px 10px; padding:12px 14px; border-radius:12px; background:var(--red); color:#fff; font-size:15.5px; font-weight:700; line-height:1.55; overflow-wrap:anywhere; }
.al-alarm.req{ background:var(--amber); }
.al-parcel{ margin:0 16px 10px; padding:10px 12px; border:1px dashed var(--red); border-radius:12px; background:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.al-card.req .al-parcel{ border-color:var(--amber); }
.al-pk-l{ flex-basis:100%; font-size:12px; color:var(--muted); }
.al-pk{ font-family:ui-monospace,Consolas,"Courier New",monospace; font-size:20px; letter-spacing:.02em; line-height:1.3; color:var(--ink); overflow-wrap:anywhere; }
.al-parcel .btn{ min-height:40px; }
.al-parcel .btn.done{ background:var(--green-bg); border-color:color-mix(in srgb,var(--green) 40%,transparent); color:var(--green); }
.al-pkn{ font-family:ui-monospace,Consolas,"Courier New",monospace; }
.al-chip.stage{ background:var(--amber-bg); color:var(--amber); } .al-chip.prn{ background:var(--red-bg); color:var(--red); }
.al-tag.req{ background:var(--amber); color:#fff; }
.al-faint{ font-size:12px; font-weight:500; color:var(--muted); }
.al-line{ margin:0 0 12px; }
.al-tg{ display:inline-flex; align-items:center; gap:6px; margin-left:10px; padding:3px 12px 3px 4px; border-radius:999px; background:#e8f5fd; color:#0f6a99; font-weight:600; text-decoration:none; border:1px solid #bfe3f6; }
.al-tg:hover{ background:#d4eefb; }
.bell.has-urgent{ box-shadow:0 0 0 2px #E53935; }
@media (max-width:719px){ .al-parcel .btn{ flex:1 1 100%; } }

.pv-hint{ display:block; font-size:11px; font-weight:400; color:var(--muted); line-height:1.35; white-space:normal; text-align:right; }
@media (max-width:1179px){ .row td.nm .pv-hint{ text-align:left; } }

/* ----- ปรับราคา/คืนราคาตัวรอขาย (ม่วง) ----- */
:root{ --purple:#6D28D9; --purple-bg:#F3E8FF; }
.al-card.purple{ border:2px solid var(--purple); border-left-width:6px; background:#FBF8FF; }
.al-alarm.purple{ background:var(--purple); }
.al-tag.restore{ background:var(--purple); color:#fff; }
.al-sug.lv-restore,.al-sug.lv-reprice{ background:var(--purple-bg); color:var(--purple); }
.al-rpbox{ margin:0 16px 12px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--purple) 35%,transparent); border-radius:12px; background:#fff; }
.al-rpbox .al-h3{ color:var(--purple); }
.al-rp{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.al-rp-i{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--row-alt); }
.al-rp-main{ flex:1 1 220px; min-width:0; display:grid; gap:3px; }
.al-rp-top{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; }
.al-rp-sku{ font-size:14.5px; overflow-wrap:anywhere; }
.al-rp-bk{ font-size:12px; color:var(--muted); line-height:1.4; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.al-rp-price{ font-size:15px; font-variant-numeric:tabular-nums; }
.al-rp-from{ color:var(--muted); text-decoration:line-through; text-decoration-color:#C5CBD4; }
.al-rp-to{ color:var(--purple); font-size:17px; }
.al-rp-price small{ color:var(--muted); font-weight:400; }
.al-edit-one{ flex:0 0 auto; background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600; text-decoration:none; white-space:nowrap; min-height:40px; }
.al-edit-one:hover{ background:var(--navy-d); }
.al-edit-one.off{ opacity:.45; pointer-events:none; background:#fff; color:var(--ink); border-color:var(--line); }
@media (max-width:719px){ .al-edit-one{ flex:1 1 100%; } .al-rpbox{ margin-left:12px; margin-right:12px; } }

/* ----- แถวรายละเอียด SKU แบบกะทัดรัด ----- */
.pd-sum{ display:grid; gap:10px; grid-template-columns:minmax(0,1fr); margin-bottom:12px; }
@media (min-width:800px){ .pd-sum{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pd-card{ background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; gap:3px; min-width:0; border-left:4px solid var(--c,var(--navy-300)); }
.pd-card.mute{ opacity:.7; }
.pd-cl{ font-size:12px; color:var(--muted); font-weight:600; }
.pd-i{ cursor:help; color:var(--blue-ink); }
.pd-cv{ font-size:24px; line-height:1.25; color:var(--navy); font-variant-numeric:tabular-nums; }
.pd-cs{ font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.pd-cs small{ display:block; font-size:11.5px; color:var(--muted); }
.pd-cs.warn{ color:var(--amber); font-weight:600; } .pd-cs.ok{ color:var(--green); font-weight:600; }
.pd-gap{ font-weight:700; color:var(--ink2); }
.pd-cm{ font-size:12.5px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.pd-ca{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12.5px; }
.pd-more summary{ cursor:pointer; color:var(--blue-ink); }
.pd-more div{ padding:2px 0; }
.pd-bh{ font-size:13px; color:var(--navy); margin:0 0 6px; }
.pd-bt{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.pd-r{ display:grid; grid-template-columns:64px minmax(0,1fr) 84px 76px auto; align-items:center; gap:8px; padding:4px 12px; min-height:40px; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.pd-r:last-child{ border-bottom:0; }
.pd-r.off{ opacity:.5; }
.pd-n{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pd-s{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); }
.pd-p{ text-align:right; font-variant-numeric:tabular-nums; }
.pd-b{ display:flex; gap:6px; justify-content:flex-end; }
.pd-b .btn.sm{ height:30px; padding:0 10px; font-size:12.5px; text-decoration:none; white-space:nowrap; }
.pd-b .btn:not(.ghost){ background:var(--navy); color:#fff; border-color:var(--navy); }
@media (max-width:719px){
  .pd-r{ grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"pf n p" "s s s" "b b b"; padding:8px 12px; row-gap:4px; }
  .pd-r > .pf-b{ grid-area:pf; } .pd-n{ grid-area:n; } .pd-p{ grid-area:p; } .pd-s{ grid-area:s; } .pd-b{ grid-area:b; }
  .pd-b .btn{ flex:1; height:38px; }
}

/* ================= แท็บ 2 : ตะกร้า & โฆษณา (จัดใหม่ — เห็นว่าต้องทำอะไรกับตะกร้าไหน) ================= */
/* แถบตัวเลขสรุป: แถวเดียวบางๆ */
.kstrip{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh); overflow:hidden; }
.kstrip .kpi{ border:0; border-radius:0; box-shadow:none; background:none; padding:8px 14px 9px; gap:0; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.kstrip .kpi:nth-child(2n){ border-right:0; }
.kstrip .kpi:nth-last-child(-n+2){ border-bottom:0; }
.kstrip .kpi.q:hover{ transform:none; box-shadow:none; background:var(--row-alt); }
.kstrip .kpi.q::after{ left:0; right:0; height:2px; border-radius:0; }
.kstrip .kpi.q[aria-pressed="true"]{ box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--c) 40%,transparent); }
.kstrip .k-label{ font-size:12px; }
.kstrip .k-val{ font-size:19px; margin-top:0; line-height:1.25; }
.kstrip .k-sub{ font-size:11.5px; min-height:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kstrip .skel .k-val{ width:50%; }
@media (min-width:900px){
  .kstrip{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .kstrip .kpi{ border-bottom:0; border-right:1px solid var(--line-2); }
  .kstrip .kpi:nth-child(2n){ border-right:1px solid var(--line-2); }
  .kstrip .kpi:last-child{ border-right:0; }
}

/* ไอเดียชวนทีมคิด: พับเหลือบรรทัดเดียว */
.ideas-row{ display:flex; align-items:center; gap:10px; min-height:38px; }
.ideas-ic{ flex:none; font-size:16px; }
.ideas-head{ flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:6px; white-space:nowrap; overflow:hidden; font-size:13.5px; }
.ideas-head b{ color:var(--blue-ink); flex:none; }
.ideas-nc{ flex:none; color:var(--muted); font-size:12px; }
.ideas-line{ min-width:0; overflow:hidden; text-overflow:ellipsis; color:#1e293b; }
.ideas-line::before{ content:"·"; margin-right:6px; color:var(--muted); }
.ideas-act{ flex:none; display:flex; gap:6px; align-items:center; }
.ideas-act .btn{ height:32px; }
.ideas-act .btn.go-an{ background:#fff; border-color:#CFDFFB; color:var(--blue-ink); font-weight:600; }
.ideas-body{ margin-top:8px; padding-top:8px; border-top:1px solid #CFDFFB; }
.ideas-body[hidden]{ display:none; }
@media (max-width:719px){
  .ideas-row{ flex-wrap:wrap; }
  .ideas-head{ flex:1 1 calc(100% - 40px); }
  .ideas-act{ flex:1 1 100%; }
  .ideas-act > span{ flex:1; display:flex; }
  .ideas-act .btn{ width:100%; height:40px; }
  .ideas-act .btn.ghost{ flex:1; }
}

/* ตัวกรอง: ป้ายเป็นหลัก + ค้นหา/ดรอปดาวน์แถวเดียว */
.btool .lchips{ margin:0 0 10px; gap:6px; }
.btool .lchip{ min-height:34px; padding:2px 6px 2px 11px; gap:6px; font-size:13px; }
.btool .lchip .n{ min-width:22px; height:22px; font-size:12px; }
.lc-g{ font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.01em; margin-right:2px; }
.lc-sep{ width:1px; height:20px; background:var(--line); margin:0 6px; }
.lchip.mute:not([aria-pressed="true"]){ background:#F8FAFC; color:var(--muted); border-style:dashed; }
.lchip.mute:not([aria-pressed="true"]) .n{ background:#EEF1F5; color:var(--muted); }
.btool .fhead{ gap:8px; align-items:center; }
.btool .fsearch{ flex:1 1 200px; max-width:300px; height:38px; }
.btool .filters{ margin:0; }
.btool .btn.sm{ height:38px; }
@media (min-width:720px){
  .btool .filters{ flex:1 1 auto; min-width:0; }
  .btool .sheet-body{ flex-wrap:wrap; gap:6px; }
  .btool .ms-btn{ height:38px; padding:0 10px; }
  .btool .ms-val{ max-width:110px; }
}
@media (max-width:719px){ .btool .fsearch{ max-width:none; } .btool .lc-sep{ display:none; } }

/* ตาราง = แถวลงมือทำ */
.tbl-b td[data-l="ads"],.tbl-b td[data-l="days"]{ font-size:13px; }
.tbl-b .bn-t{ font-weight:600; font-size:14.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.tbl-b .bname-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:0 4px; }
.ba-do{ display:block; font-weight:700; color:var(--ink); font-size:13.5px; line-height:1.4; }
.ba-do.plain{ font-weight:400; color:var(--muted); font-size:13px; }
.ba-why{ display:block; font-size:12px; color:var(--muted); line-height:1.4; }
.ba-none{ color:#8A93A1; font-size:12.5px; }
.bo-l1{ display:block; line-height:1.4; font-variant-numeric:tabular-nums; }
.bo-l1 b{ font-size:15px; }
.bo-c{ color:var(--muted); }
.bo-l2{ display:block; font-size:11.5px; line-height:1.4; }
.dchip{ display:inline-block; padding:1px 9px; border-radius:999px; font-weight:600; font-size:12.5px; font-variant-numeric:tabular-nums; border:1px solid transparent; white-space:nowrap; }
.dchip.d-red{ background:var(--red-bg); color:var(--red); border-color:color-mix(in srgb,var(--red) 25%,transparent); }
.dchip.d-amber{ background:var(--amber-bg); color:var(--amber); border-color:color-mix(in srgb,var(--amber) 25%,transparent); }
.dchip.d-green{ background:#E8F6EE; color:var(--green); border-color:color-mix(in srgb,var(--green) 25%,transparent); }
.dchip.d-blue{ background:var(--blue-bg); color:var(--blue-ink); border-color:#CFDFFB; }
.acts{ display:flex; align-items:center; gap:6px; }
.ibtn{ flex:none; width:34px; height:34px; display:inline-grid; place-items:center; border-radius:10px; border:1px solid var(--line); background:#fff; text-decoration:none; font-size:15px; line-height:1; }
.ibtn:hover{ background:var(--navy-50); border-color:var(--navy-100); }
.ibtn.off{ visibility:hidden; }

/* มือถือ/แท็บเล็ต: การ์ดซ้อนแนวตั้ง ปุ่มเต็มกว้าง */
.tbl-b tr.row{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 10px; }
.tbl-b td[data-l="lab"],.tbl-b td[data-l="name"],.tbl-b td[data-l="advice"],.tbl-b td[data-l="act"]{ grid-column:1/-1; }
.tbl-b td[data-l="ads"]{ grid-column:1/2; }
.tbl-b td[data-l="days"]{ grid-column:2/3; }
.tbl-b td.nm::before{ content:attr(data-t); }
.tbl-b td[data-l="act"] .acts{ width:100%; }
.tbl-b td[data-l="act"] .go-an{ flex:1; height:42px; font-size:14.5px; }
.tbl-b td[data-l="act"] .ibtn{ width:44px; height:42px; }
.tbl-b td[data-l="advice"] .ba-do{ font-size:14px; }
@media (min-width:1180px){
  .tbl-b td{ padding:7px 10px; }
  .tbl-b tr.row{ height:56px; }
  .tbl-b td.nm::before{ content:none; }
  .tbl-b td[data-l="name"]{ max-width:320px; min-width:230px; }
  .tbl-b .bn-t{ display:block; -webkit-line-clamp:unset; white-space:nowrap; text-overflow:ellipsis; font-size:14px; }
  .tbl-b td[data-l="advice"]{ max-width:360px; min-width:220px; }
  .tbl-b .ba-do,.tbl-b .ba-why{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tbl-b td[data-l="ads"]{ min-width:150px; }
  .tbl-b td[data-l="act"]{ white-space:nowrap; padding-right:14px; }
  .tbl-b td[data-l="act"] .acts{ width:auto; }
  .tbl-b td[data-l="act"] .go-an{ flex:none; height:34px; font-size:13.5px; }
  .tbl-b td[data-l="act"] .ibtn{ width:34px; height:34px; }
}

.tbl-b .bm-t{ min-width:0; }
@media (min-width:1180px){ .tbl-b .bname-meta{ flex-wrap:nowrap; overflow:hidden; } .tbl-b .bm-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tbl-b .bname-meta .pf-b{ flex:none; } }

.bo-l1,.bo-l2{ white-space:nowrap; }
@media (min-width:1180px){ .tbl-b td[data-l="ads"]{ min-width:185px; } }

@media (min-width:1180px){
  .tbl-b td{ padding:6px 8px; }
  .tbl-b td[data-l="name"]{ max-width:250px; min-width:190px; }
  .tbl-b td[data-l="advice"]{ max-width:300px; min-width:190px; }
  .tbl-b td[data-l="ads"]{ min-width:165px; }
  .tbl-b td[data-l="act"]{ padding-right:10px; }
  .tbl-b .th-b{ padding:12px 8px; }
  .tbl-b .th-plain{ padding:12px 8px; }
}

/* ===== Growth Framework = ความรู้ของผู้ช่วย (บรรทัดใต้ป้ายในหัวข้อ + ⓘ) ===== */
.info{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--navy-50); color:var(--navy); font-size:11px; font-weight:700; cursor:help; vertical-align:middle; }
.az-strat{ margin:8px 2px 0; font-size:13px; line-height:1.6; color:#334155; }
.az-strat b{ color:var(--ink); }

.k-d{ display:block; font-size:11px; line-height:1.4; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-d:empty{ display:none; }
.kpi.good .k-d{ color:var(--green); font-weight:600; }
.kpi.bad .k-d{ color:var(--red); font-weight:600; }
.kstrip .k-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.ad-prev-note{ margin:0; padding:5px 12px; font-size:12px; color:var(--muted); background:#F8FAFC; border:1px solid var(--line-2); border-radius:10px; }
.ad-prev-note.warn{ background:var(--amber-bg); color:var(--amber); border-color:color-mix(in srgb,var(--amber) 30%,transparent); }
.ad-prev-note[hidden]{ display:none; }
.bo-pv{ color:#334155; }
.fn-prev{ margin-top:12px; padding:10px 12px; background:#F8FAFC; border:1px solid var(--line-2); border-radius:12px; }
.fn-prev h4{ margin:0 0 6px; font-size:13px; color:var(--navy); }
.fn-prev h4 small{ font-weight:400; color:var(--muted); }
.fn-pt{ width:100%; border-collapse:collapse; font-size:12.5px; font-variant-numeric:tabular-nums; }
.fn-pt th,.fn-pt td{ padding:4px 6px; text-align:right; border-bottom:1px solid var(--line-2); }
.fn-pt thead th{ color:var(--muted); font-weight:500; font-size:11.5px; }
.fn-pt tbody th{ text-align:left; font-weight:500; color:var(--ink); }
.fn-pt td.up{ color:var(--green); font-weight:600; } .fn-pt td.dn{ color:var(--red); font-weight:600; }

.lowb{ display:inline-block; padding:0 8px; border-radius:999px; background:#EEF1F5; color:var(--muted); font-size:11px; font-weight:600; border:1px dashed var(--line); white-space:nowrap; }
.fn-lowb{ margin:0 0 6px; font-size:12px; color:var(--muted); }

/* แจ้งเตือนประเภท "มีของแต่หลุดตะกร้า" (orphan) — ส้ม แยกจากแดง(หมด/ยกเลิก) และม่วง(ปรับราคา) */
.al-card.orphan{ border:2px solid #C2410C; border-left-width:6px; background:#FFF8F2; box-shadow:0 0 0 3px color-mix(in srgb,#C2410C 12%,transparent); }
.al-alarm.orphan{ background:#C2410C; }
.al-alarm.orphan.done{ background:#15803D; }
.al-tag.orphan{ background:#C2410C; color:#fff; }
.al-sug.lv-orphan{ background:#FFEDD5; color:#7C2D12; }
.al-card.orphan .al-edit-one{ background:#C2410C; border-color:#C2410C; }
.al-card.orphan .al-edit-one:hover{ background:#9A3412; }
.al-card.orphan .al-edit-one.done{ background:#fff; color:var(--ink); border-color:var(--line); font-weight:500; }
.al-card.orphan .al-edit-one.off{ background:#fff; }

/* ===== ยอดพ่วง (Halo) ===== */
.hchip{ display:inline-block; margin-top:2px; padding:0 8px; border-radius:999px; background:#EDE9FE; color:#5B21B6; border:1px solid #DDD6FE; font-size:11px; font-weight:600; line-height:1.6; white-space:nowrap; }
.hchip.off{ background:#EEF1F5; color:var(--muted); border:1px dashed var(--line); font-weight:500; }
.bo-halo{ color:#5B21B6; }
.az-halo{ padding:14px 16px 16px; margin-top:0; }
.hl-cav{ margin:0 0 8px; font-size:12px; color:var(--muted); }
.hl{ display:grid; gap:0; }
.hl-r{ display:grid; grid-template-columns:minmax(0,1fr) repeat(5,minmax(60px,auto)); gap:4px 12px; align-items:center; padding:7px 4px; border-bottom:1px solid var(--line-2); font-size:13px; font-variant-numeric:tabular-nums; }
.hl-r > span:not(.hl-n){ text-align:right; }
.hl-hd{ font-size:11.5px; color:var(--muted); font-weight:500; }
.hl-n{ min-width:0; display:flex; align-items:center; gap:6px; }
.hl-n .link{ text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; padding:2px 0; }
@media (max-width:719px){
  .hl-hd{ display:none; }
  .hl-r{ grid-template-columns:repeat(3,minmax(0,1fr)); padding:9px 2px; }
  .hl-r .hl-n{ grid-column:1/-1; }
  .hl-r > span:not(.hl-n){ text-align:left; display:flex; flex-direction:column; }
  .hl-r > span[data-t]::before{ content:attr(data-t); font-size:11px; color:var(--muted); }
}
@media (min-width:900px){ .kstrip{ grid-template-columns:repeat(5,minmax(0,1fr)); } }
.kstrip .kpi[hidden]{ display:none; }
@media (max-width:899px){ .kstrip .kpi:last-child{ grid-column:1/-1; border-right:0; } }

@media (min-width:1180px){ .tbl-b .bo-halo{ display:inline-block; margin-right:6px; } .tbl-b .hchip{ display:inline-block; margin-top:0; } .tbl-b .hchip .ht{ display:none; } .tbl-b .hchip.off{ font-size:10.5px; } }

.ans b,.az-verdict b{ font-weight:600; }
.az-strat{ color:var(--ink2,#334155); }

.btn-dl{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; white-space:nowrap; }
.btn-dl[hidden]{ display:none; }
.btn-dl.busy{ opacity:.7; pointer-events:none; }
@media (max-width:719px){ .btn-dl{ padding:6px 9px; } .btn-dl .dl-t{ display:none; } }
.toast-x{ position:fixed; left:50%; bottom:84px; transform:translateX(-50%); z-index:120; background:#1F2937; color:#fff; padding:9px 16px; border-radius:12px; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.25); }

.az-xlsx{ border:0; background:none; cursor:pointer; font:inherit; }
.az-xlsx.busy{ opacity:.65; pointer-events:none; }
@media (max-width:719px){ .az-xlsx .xl-t{ display:none; } .az-xlsx{ min-width:40px; justify-content:center; } }

/* กันคอลัมน์บีบ: ปุ่มทางลัดในหน้าว่างและชิปกรอง เรียงเป็นแถวห่อบรรทัด ไม่เรียงตั้ง */
.az-starts{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.az-quick{ flex-wrap:wrap; } .az-quick .chip{ white-space:nowrap; flex:none; }
.az-main,.az-grid > *{ min-width:0; }
.az-start .as-n,.az-start .as-t{ overflow-wrap:break-word; word-break:normal; }

.adv-qs{ flex-wrap:wrap; overflow:visible; scroll-snap-type:none; }
.adv-q{ max-width:100%; }
@media (max-width:719px){ .adv-q{ min-height:34px; padding:0 10px; font-size:13px; } .adv-qs{ gap:6px; } }
@media (min-width:1280px){ .adv-q{ min-height:34px; padding:0 11px; font-size:13px; } }

.ad-perline{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; padding:5px 12px; font-size:12px; color:var(--ink); background:#F8FAFC; border:1px solid var(--line-2); border-radius:10px; }
.ad-perline[hidden]{ display:none; }
.ad-perline .pl-t{ color:var(--muted); font-weight:600; }
.ad-perline .pl-i b{ color:var(--navy); margin-right:4px; }
.pcmp{ margin:10px 0 0; padding:10px 12px; background:#fff; border:1px solid var(--line-2); border-radius:12px; }
.pcmp h4{ margin:0 0 6px; font-size:13px; color:var(--navy); }
.pcmp h4 small{ font-weight:400; color:var(--muted); margin-left:6px; }
.pcmp .fn-pt th,.pcmp .fn-pt td{ vertical-align:top; }
.pcmp .fn-pt td.mt{ text-align:center; color:var(--muted); }
.pc{ display:block; font-size:11px; color:var(--muted); }
.pc.up{ color:var(--green); font-weight:600; } .pc.dn{ color:var(--red); font-weight:600; }
.b-xlsx{ margin-left:6px; }
.b-xlsx.busy{ opacity:.65; pointer-events:none; }
.az-halo .pcmp,.az-fun .pcmp{ background:#F8FAFC; }
@media (max-width:719px){ .pcmp .fn-pt{ font-size:11.5px; } .pcmp .fn-pt th,.pcmp .fn-pt td{ padding:4px 3px; } .b-xlsx{ margin:6px 0 0; width:100%; } }

.az-bud{ padding:14px 16px 16px; }
.bd-v{ display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.bd-chip{ display:inline-block; padding:2px 12px; border-radius:999px; font-size:13px; font-weight:600; background:var(--bg2,#EEF1F5); color:var(--ink2,#334155); border:1px solid color-mix(in srgb,var(--c,#6B7280) 35%,transparent); }
.bd-v.t-green{ --c:var(--green); --bg2:var(--green-bg,#E8F6EE); --ink2:var(--green); } .bd-v.t-amber{ --c:var(--amber); --bg2:var(--amber-bg); --ink2:var(--amber); }
.bd-v.t-blue{ --c:var(--blue-ink); --bg2:var(--blue-bg); --ink2:var(--blue-ink); } .bd-v.t-red{ --c:var(--red); --bg2:var(--red-bg); --ink2:var(--red); }
.bd-big{ margin:0; font-size:16px; line-height:1.5; color:var(--ink); } .bd-big b{ font-size:17px; }
.bd-why{ margin:8px 0 0; font-size:14px; line-height:1.6; color:#334155; }
.bd-t{ margin-top:10px; } .bd-t tr.best th,.bd-t tr.best td{ background:#F0FDF4; font-weight:600; }
.bd-ul{ margin:10px 0 0; padding-left:20px; font-size:13.5px; line-height:1.6; }
.bd-mute{ margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.55; }

.al-ord{ margin:8px 16px 10px; padding:8px 12px; border:1px solid var(--line-2); border-radius:12px; background:#F8FAFC; }
.al-ord-h{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:4px; }
.al-ord-shop{ font-weight:400; color:var(--muted); }
.al-ord .al-kv{ margin:0; } .al-ono{ font-family:ui-monospace,Consolas,monospace; font-size:13px; overflow-wrap:anywhere; }

/* ===== สรุปก่อน + พับรายละเอียด ===== */
.az-bar{ margin:0 0 12px; } .az-bar .btn[aria-pressed="true"]{ background:var(--navy); color:#fff; border-color:var(--navy); }
.az-more{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--sh); }
.az-more > summary{ cursor:pointer; padding:12px 16px; font-weight:600; color:var(--navy); list-style:none; min-height:44px; display:flex; align-items:center; gap:8px; }
.az-more > summary::-webkit-details-marker{ display:none; } .az-more > summary::before{ content:"▸"; } .az-more[open] > summary::before{ content:"▾"; }
.az-more > summary small{ font-weight:400; color:var(--muted); }
.az-more-in{ display:grid; gap:14px; padding:0 12px 14px; min-width:0; } .az-more-in > *{ min-width:0; }
.az-sum{ padding:14px 16px; border-left:5px solid var(--c,#6B7280); }
.sm-h{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .sm-t{ font-size:12px; color:var(--muted); }
.sm-big{ margin:8px 0 4px; font-size:18px; line-height:1.5; font-weight:600; color:var(--ink); }
.sm-ul{ margin:4px 0 0; padding-left:20px; font-size:14px; line-height:1.6; } .sm-do{ margin:8px 0 0; font-size:13px; color:var(--navy); }
.sm-strip{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
.sm-s{ background:#F8FAFC; border:1px solid var(--line-2); border-radius:10px; padding:8px 10px; display:flex; flex-direction:column; min-width:0; }
.sm-s span{ font-size:11.5px; color:var(--muted); } .sm-s b{ font-size:15px; font-variant-numeric:tabular-nums; } .sm-s small{ font-size:11px; color:var(--muted); }
.mvd{ font-size:11.5px; font-weight:600; color:var(--muted); } .mvd.up{ color:var(--green); } .mvd.dn{ color:var(--red); } .mvd.am{ color:var(--amber); }
.mv-chip{ display:inline-flex; padding:2px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap; background:#EEF1F5; color:#475569; }
.mv-chip.t-red{ background:var(--red-bg); color:var(--red); } .mv-chip.t-green{ background:#E8F6EE; color:var(--green); }
/* ===== หน้ายอดขายเดือนนี้ ===== */
.mv{ padding:14px 16px 16px; } .mv + .mv{ margin-top:14px; }
.mv-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; align-items:center; } .mv-top h2{ font-size:18px; margin:0; } .mv-top h2 small{ display:block; font-size:12.5px; font-weight:400; color:var(--muted); } .mv-top h3{ margin:0; font-size:15px; color:var(--navy); }
.mv-bs,.mv-fl{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:10px 0 0; }
.mv-verdict{ margin:12px 0 4px; font-size:16px; font-weight:600; line-height:1.55; } .mv-why{ margin:0; padding-left:20px; font-size:14px; line-height:1.6; }
.mv-note{ margin:8px 0 0; padding:6px 10px; border-radius:8px; background:var(--amber-bg); color:var(--amber); font-size:12.5px; }
.mv-ks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; } @media (min-width:720px){ .mv-ks{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mv-k{ background:#F8FAFC; border:1px solid var(--line-2); border-radius:12px; padding:10px 12px; display:flex; flex-direction:column; min-width:0; } .mv-k b{ font-size:20px; font-variant-numeric:tabular-nums; color:var(--navy); }
.mv-proj,.mv-cap{ margin:8px 0 0; font-size:12.5px; color:var(--muted); } .mv-warn{ margin:8px 0 0; padding:8px 12px; border-radius:10px; background:var(--amber-bg); color:var(--amber); font-size:13px; line-height:1.5; }
.mv-chart{ width:100%; max-width:480px; height:auto; margin-top:10px; display:block; }
.mv-sort{ font-size:12.5px; color:var(--muted); } .mv-sort select{ margin-left:4px; height:34px; border:1px solid var(--line); border-radius:10px; padding:0 6px; background:#fff; }
.mv-tbl{ margin-top:10px; } .mv-r{ display:grid; grid-template-columns:minmax(0,2.4fr) 1.3fr .8fr 1fr .7fr 1fr; gap:4px 10px; align-items:center; padding:8px 4px; border-bottom:1px solid var(--line-2); font-size:13px; font-variant-numeric:tabular-nums; }
.mv-r:not(.mv-hd){ cursor:pointer; } .mv-r:not(.mv-hd):hover{ background:var(--navy-50); } .mv-hd{ font-size:11.5px; color:var(--muted); }
.mv-n{ min-width:0; display:flex; flex-direction:column; } .mv-n b{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mv-n small{ color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mv-none{ margin:12px 0 0; color:var(--muted); }
@media (max-width:899px){ .mv-hd{ display:none; } .mv-r{ grid-template-columns:repeat(3,minmax(0,1fr)); } .mv-r .mv-n{ grid-column:1/-1; } .mv-r .mv-n b{ white-space:normal; } .mv-r > span[data-t]{ display:flex; flex-direction:column; } .mv-r > span[data-t]::before{ content:attr(data-t); font-size:11px; color:var(--muted); } .mv-n small{ white-space:normal; } }

/* ===== SKU table / รายละเอียดที่พับ: อยู่ในกล่องตัวเอง เลื่อนแนวนอนภายในกล่อง ไม่ล้นไปทับแผงอื่น ===== */
.az-more-in{ grid-template-columns:minmax(0,1fr); }
.az-more-in > *{ width:100%; max-width:100%; min-width:0; }
.az-sku{ overflow-x:auto; }
.az-sku .tbl{ word-break:normal; overflow-wrap:break-word; }
@media (min-width:1180px){
  .az-sku #az-table{ min-width:780px; }
  .az-sku #az-table td:first-child,.az-sku #az-table th:first-child{ min-width:190px; }
}
.az-more-in > *{ grid-area:auto !important; }

/* ===== เลย์เอาต์ใหม่: [สรุปทิศทาง | ปรับค่าโฆษณา] แถวเดียว → ผู้ช่วยเต็มความกว้าง → รายละเอียดที่พับ ===== */
.az-main.az-has{ display:grid; grid-template-columns:minmax(0,1fr); grid-template-areas:none; gap:14px; align-items:start; }
.az-main.az-has > *{ grid-area:auto !important; grid-column:1 / -1; min-width:0; }
.az-pair{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.az-pair > *{ min-width:0; }
@media (min-width:1100px){ .az-pair{ flex-direction:row; align-items:stretch; } .az-pair > *{ flex:1 1 0; } }
.az-side{ align-self:auto; }
.az-adv{ position:static; max-height:none; }
.adv-chat{ max-height:420px; overflow:auto; }

.rt{ margin-top:12px; padding:10px 12px; border:1px dashed var(--line); border-radius:12px; background:#FAFBFD; }
.rt h4{ margin:0 0 6px; font-size:13.5px; color:var(--navy); }
.rt-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.rt-row label{ font-size:13px; } .rt-row input{ width:84px; height:36px; border:1px solid var(--line); border-radius:10px; padding:0 8px; font-size:15px; }
.rt-out{ margin-top:8px; font-size:13.5px; line-height:1.6; } .rt-out p{ margin:4px 0; } .rt-out ul{ margin:4px 0; padding-left:20px; }
.rt-chip{ display:inline-block; padding:1px 10px; border-radius:999px; font-size:12px; font-weight:600; background:#EEF1F5; color:#475569; } .rt-chip.ok{ background:#E8F6EE; color:var(--green); }
.rt-mute{ font-size:12px; color:var(--muted); }

/* =====================================================================
   Liquid Glass layer (22 ต.ค. 2026) — ทับของเดิมด้านบน ลบบล็อกนี้ทั้งก้อนเพื่อกลับเป็นแบบเดิม
   ===================================================================== */
:root{
  --glass-bg: linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.52));
  --glass-line: rgba(255,255,255,.92);
  --glass-sh: 0 10px 28px rgba(60,70,140,.13), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.35);
  --glass-sh-hover: 0 16px 36px rgba(60,70,140,.20), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255,255,255,.45);
}
body{
  background:
    radial-gradient(900px 520px at 8% -6%, rgba(124,150,255,.24), transparent 62%),
    radial-gradient(760px 480px at 96% 8%, rgba(255,150,190,.18), transparent 60%),
    radial-gradient(900px 600px at 70% 104%, rgba(80,200,240,.20), transparent 62%),
    #EEF1FA;
  background-attachment: fixed;
}

/* การ์ดทุกใบ = แก้วฝ้า */
.card, .pfbar, .az-item, .bp, .al-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-sh);
  backdrop-filter: blur(16px) saturate(170%); -webkit-backdrop-filter: blur(16px) saturate(170%);
}
.card, .pfbar, .al-card{ border-radius: 20px; }
.card:hover, .al-card:hover{ box-shadow: var(--glass-sh-hover); }
.card, .al-card{ transition: box-shadow .3s var(--ease), transform .3s var(--ease), opacity .25s; }

/* การ์ดแจ้งเตือน: คงแถบสี/กรอบเตือนเดิมไว้ แต่พื้นเป็นแก้วเจือสีตามระดับ */
.al-card{ border-left: 5px solid var(--c); }
.al-card.urgent{ background: linear-gradient(135deg, rgba(255,240,238,.88), rgba(255,255,255,.55)); border: 2px solid var(--red); border-left-width: 6px; }
.al-card.req{ background: linear-gradient(135deg, rgba(255,249,228,.88), rgba(255,255,255,.55)); border: 2px solid var(--amber); border-left-width: 6px; }
.al-card.purple{ background: linear-gradient(135deg, rgba(247,238,255,.88), rgba(255,255,255,.55)); border: 2px solid var(--purple); border-left-width: 6px; }
.al-card.orphan{ background: linear-gradient(135deg, rgba(255,243,233,.88), rgba(255,255,255,.55)); border: 2px solid #C2410C; border-left-width: 6px; }

/* หัวเว็บ: กระจกสีน้ำเงินเข้ม มีแสงขอบล่าง */
.mast{
  background:
    radial-gradient(900px 260px at 88% -60%, rgba(150,185,255,.50), transparent 62%),
    radial-gradient(520px 220px at 8% 130%, rgba(255,150,200,.26), transparent 65%),
    linear-gradient(180deg, rgba(30,58,95,.97), rgba(23,49,90,.94));
  box-shadow: 0 10px 30px rgba(30,58,95,.28), inset 0 -1px 0 rgba(255,255,255,.18);
}

/* แท็บ: แผ่นแก้ว ตัวที่เลือกอยู่เป็นกระจกสว่าง */
.tab{ transition: background .3s var(--ease), color .25s, box-shadow .3s var(--ease), transform .3s var(--ease); }
.tab:not([aria-selected="true"]):hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.tab[aria-selected="true"]{
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(235,242,255,.78));
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(20,40,90,.22);
}

/* ปุ่ม */
.btn{
  border-radius: 12px; border: 1px solid rgba(110,120,170,.28);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(236,241,255,.6));
  box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(60,70,140,.10);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .25s, border-color .25s;
}
.btn:hover{ transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, 0 10px 20px rgba(60,70,140,.18); }
.btn:active{ transform: scale(.97); transition-duration: .1s; }
.btn.primary{
  background: linear-gradient(135deg, rgba(34,70,118,.98), rgba(60,105,170,.88)); border-color: rgba(255,255,255,.35); color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 18px rgba(30,58,95,.34);
}
.btn.primary:hover{ background: linear-gradient(135deg, rgba(24,54,98,1), rgba(50,92,155,.94)); }
.btn.ghost{ background: rgba(255,255,255,.35); }

/* ชิป / ป้ายเล็ก */
.al-chip, .pill, .dchip{
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.pf-b{ transition: transform .25s var(--ease), box-shadow .25s; }
.pf-b:hover{ transform: translateY(-1px); }

/* ช่องกรอก */
input, select{ transition: border-color .25s, box-shadow .25s, background .25s; }
input[type="search"], input[type="text"], select{
  background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(240,244,255,.62)); border-radius: 12px;
  box-shadow: inset 0 1px 0 #fff;
}

/* ตาราง/แถวภายในการ์ด: เส้นบางจาง ๆ */
.card table tr, .card .row{ border-color: rgba(120,130,170,.14); }

/* กรอบที่เด้งขึ้น (popup/โมดัล) */
.sheet, .modal, .pop, .drawer{
  background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(240,238,255,.7));
  backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-line); box-shadow: 0 24px 60px rgba(60,50,140,.30), inset 0 1px 0 #fff;
}

/* การ์ดแจ้งเตือนเด้งเข้า */
@keyframes glassIn{ from{ opacity:0; transform: translateY(8px) scale(.985); } }
.al-card, .az-item{ animation: glassIn .35s var(--ease) both; }

/* เครื่องที่ตั้งลดการเคลื่อนไหว / เครื่องช้า: ปิดเบลอและแอนิเมชัน */
@media (prefers-reduced-motion: reduce){
  .al-card, .az-item{ animation: none; }
  .card, .al-card, .btn, .tab{ transition: none; }
}
@media (max-width: 719px){
  .card, .pfbar, .az-item, .bp, .al-card{ backdrop-filter: blur(8px) saturate(150%); -webkit-backdrop-filter: blur(8px) saturate(150%); }
}

.fn-sum{ margin:6px 0 10px; padding:10px 14px; border-radius:10px; background:#f1f5fb; border:1px solid #d9e2f1; }
.fn-sum p{ margin:0 0 4px; font-size:14px; }
.fn-sum ul{ margin:0; padding-left:18px; font-size:14px; }
.sm-line{ margin:2px 0 10px; font-size:15px; }
.sm-line .up{ color:#1b7a3a; }
.sm-line .dn{ color:#c0392b; }
.sm-line small{ color:#6b7488; margin-left:4px; }

.mv-trade{ margin:10px 0 14px; padding:12px 16px; border-radius:12px; background:#f1f5fb; border:1px solid #d9e2f1; }
.mv-trade p{ margin:6px 0; font-size:14px; }
.mv-trade .mv-th{ font-size:16px; margin-top:0; }
.mv-trade ul{ margin:4px 0 6px; padding-left:20px; font-size:14px; }
.mv-trade .up{ color:#1b7a3a; }
.mv-trade .dn{ color:#c0392b; }
.mv-trade small{ color:#6b7488; }
.mv-rule{ padding-top:6px; border-top:1px dashed #cdd7ea; }

.fn-inc,.sm-inc,.mv-inc{ margin:8px 0 2px; padding:8px 12px; border-radius:8px; background:#e8f3ec; border:1px solid #bfdcc9; font-size:15px; }
.fn-inc small,.sm-inc small{ color:#5d6b60; }

.mi-t{ margin:6px 0 10px; font-size:15px; }
.mi-t .up,.mi .up{ color:#1b7a3a; } .mi-t .dn,.mi .dn{ color:#c0392b; }
.mi-sum{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:0 0 12px; }
.mi-c{ padding:10px 12px; border-radius:10px; border:1px solid #d9e2f1; background:#f7f9fd; display:flex; flex-direction:column; gap:2px; }
.mi-c.t-green{ background:#eaf6ee; border-color:#bfdcc9; } .mi-c.t-amber{ background:#fff6e0; border-color:#f0d9a0; } .mi-c.t-red{ background:#fdecea; border-color:#f1c0ba; }
.mi-c span{ font-size:18px; font-weight:700; } .mi-c small{ color:#5d6b80; }
.mi-tbl{ max-height:520px; overflow:auto; border:1px solid #e1e8f4; border-radius:10px; }
.mi-r{ display:grid; grid-template-columns:minmax(0,3fr) 1fr 1fr 1fr 1.3fr; gap:8px; align-items:center; padding:8px 12px; border-bottom:1px solid #eef2f9; font-size:14px; }
.mi-r[data-id]{ cursor:pointer; } .mi-r[data-id]:hover{ background:#f3f7fd; }
.mi-hd{ position:sticky; top:0; background:#eef3fb; font-weight:600; font-size:13px; z-index:1; }
.mi-n{ display:flex; flex-direction:column; min-width:0; } .mi-n b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mi-n small{ color:#6b7488; }
@media (max-width:760px){ .mi-sum{ grid-template-columns:1fr; } .mi-r{ grid-template-columns:1fr 1fr; } .mi-hd{ display:none; } .mi-r > span[data-t]::before{ content:attr(data-t) ': '; color:#6b7488; font-weight:400; } }

.az-conf{ margin:8px 0; padding:10px 14px; border-radius:10px; background:#fff3d6; border:1px solid #f0cf80; color:#6b4a00; font-size:14px; }

.mv-th.t-green{ color:#166534; } .mv-th.t-amber{ color:#8a5a00; } .mv-th.t-red{ color:#b3261e; }
.mv-tt{ margin:8px 0; border:1px solid #d9e2f1; border-radius:10px; overflow:hidden; background:#fff; }
.mv-tr{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr 1.3fr; gap:8px; padding:8px 12px; border-bottom:1px solid #eef2f9; font-size:14px; align-items:center; }
.mv-tr:last-child{ border-bottom:0; } .mv-th2{ background:#eef3fb; font-weight:600; font-size:13px; }
.mv-tr.t-green{ background:#eaf6ee; } .mv-tr.t-amber{ background:#fff6e0; } .mv-tr.t-red{ background:#fdecea; } .mv-tr.mv-tot{ background:#f1f5fb; }
.mv-tr small{ color:#6b7488; } .mv-q{ margin:6px 0; font-size:14px; }
.mi-qw{ margin:12px 0 6px; padding:10px 14px; border-radius:10px; background:#eef4ff; border:1px solid #cfe0fb; font-size:14px; } .mi-qw ul{ margin:4px 0; padding-left:20px; }
@media (max-width:760px){ .mv-tr{ grid-template-columns:1fr 1fr; } .mv-th2{ display:none; } }

.sm-rich{ margin:4px 0 10px; padding-left:20px; font-size:14px; } .sm-rich .up{ color:#1b7a3a; } .sm-rich .dn{ color:#c0392b; }
.rt-net{ margin:8px 0; padding:8px 12px; border-radius:8px; background:#fff6e0; border:1px solid #f0d9a0; font-size:14px; }

.mv-3{ list-style:none; margin:6px 0 8px; padding:0; border:1px solid #d9e2f1; border-radius:10px; background:#fff; overflow:hidden; }
.mv-3 li{ display:grid; grid-template-columns:1.6fr 1.6fr 1fr; gap:8px; padding:8px 12px; border-bottom:1px solid #eef2f9; font-size:15px; } .mv-3 li:last-child{ border-bottom:0; }
.mv-3 li > span:first-child{ color:#4b566b; } .mv-3 .up{ color:#1b7a3a; } .mv-3 .dn{ color:#c0392b; }
@media (max-width:760px){ .mv-3 li{ grid-template-columns:1fr 1fr; } .mv-3 li > b{ grid-column:2; text-align:right; } }

.mv-pc{ margin:4px 0 8px; padding-left:20px; font-size:14px; }
.sm-cap{ margin:2px 0 8px; font-size:12px; color:#6b7488; }

.hv-tiles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:12px 0 4px; } @media (max-width:760px){ .hv-tiles{ grid-template-columns:1fr; } }
.hv-t{ background:#F8FAFC; border:1px solid var(--line-2); border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.hv-t > span{ color:#475569; font-size:14px; } .hv-t > b{ font-size:30px; line-height:1.1; color:var(--navy); font-variant-numeric:tabular-nums; } .hv-t small{ color:#64748B; }
.hv-c{ font-size:15px; font-weight:700; color:#475569; } .hv-c.up{ color:#1b7a3a; } .hv-c.dn{ color:#c0392b; } .hv-c small{ font-weight:400; }
.hv-h{ margin:0 0 4px; font-size:17px; } .hv-h small{ font-weight:400; color:#64748B; font-size:13px; }
.hv-cap{ margin:6px 0 0; font-size:15px; } .hv-cap .up,.hv-why .up{ color:#1b7a3a; } .hv-cap .dn,.hv-why .dn{ color:#c0392b; } .hv-cap small{ color:#64748B; }
.hv-tw{ overflow-x:auto; } .hv-tb{ width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; }
.hv-tb th,.hv-tb td{ padding:8px 10px; border-bottom:1px solid #eef2f9; text-align:right; } .hv-tb th:first-child{ text-align:left; font-weight:600; } .hv-tb thead th{ background:#eef3fb; font-size:13px; }
.hv-tb td.up{ color:#1b7a3a; } .hv-tb td.dn{ color:#c0392b; } .hv-res th,.hv-res td{ background:#f1f5fb; } .hv-res small{ font-weight:400; color:#64748B; }
.hv-why{ margin:10px 0 0; font-size:15px; }
.mv-det{ margin-top:14px; } .mv-det > summary{ cursor:pointer; padding:12px 16px; background:#fff; border:1px solid var(--line-2); border-radius:12px; font-weight:600; color:var(--navy); }
.mv-det[open] > summary{ margin-bottom:12px; }

.hv-tiles{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } @media (max-width:1100px){ .hv-tiles{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px){ .hv-tiles{ grid-template-columns:1fr !important; } }
.hv-tot{ background:#EEF4FF; border-color:#cfe0fb; }

.bk-rec{ padding:16px 18px; border-left:6px solid #94a3b8; }
.bk-rec.t-red{ border-left-color:#c0392b; background:#fff7f6; } .bk-rec.t-green{ border-left-color:#1b7a3a; background:#f4fbf6; } .bk-rec.t-amber{ border-left-color:#d97706; background:#fffaf0; }
.bk-act{ margin:4px 0 8px; font-size:20px; font-weight:700; color:var(--navy); } .bk-wh{ margin:6px 0 2px; color:#64748B; font-size:13px; }
.bk-rec ul{ margin:0; padding-left:20px; font-size:15px; } .bk-rec li{ margin:3px 0; }
.hv-na{ font-size:22px !important; color:#64748B !important; }
.az-more2{ margin:12px 0; } .az-more2 > summary{ cursor:pointer; padding:12px 16px; background:#fff; border:1px solid var(--line-2); border-radius:12px; font-weight:600; color:var(--navy); } .az-more2[open] > summary{ margin-bottom:12px; }

.hv-split{ display:grid; grid-template-columns:minmax(260px,480px) minmax(0,1fr); gap:24px; align-items:start; } @media (max-width:820px){ .hv-split{ grid-template-columns:1fr; } }
.hv-svg .mv-chart{ margin-top:4px; } .hv-side h4{ margin:6px 0 6px; font-size:16px; color:var(--navy); } .hv-hd{ margin:0 0 10px; font-size:15px; } .hv-hd small{ color:#64748B; }
.hv-lst{ width:100%; border-collapse:collapse; font-size:15px; font-variant-numeric:tabular-nums; } .hv-lst th,.hv-lst td{ padding:7px 8px; border-bottom:1px solid #eef2f9; text-align:right; } .hv-lst th{ text-align:left; font-weight:600; }
.hv-lst tr.now th,.hv-lst tr.now td{ background:#fff6e0; font-weight:700; } .hv-lst tr.avg th,.hv-lst tr.avg td{ color:#64748B; border-bottom:0; } .hv-lst small{ font-weight:400; color:#64748B; }
.hv-lst .up{ color:#1b7a3a; } .hv-lst .dn{ color:#c0392b; } .hv-hd .up{ color:#1b7a3a; } .hv-hd .dn{ color:#c0392b; }

.hv-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; } .hv-pair > .card{ margin-top:0; } @media (max-width:900px){ .hv-pair{ grid-template-columns:1fr; } }
.hv-pair .mv-chart{ max-width:100%; }

.hv-tiles{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important; }

.hv-goal{ margin:12px 0 4px; padding:12px 16px; border-radius:12px; font-size:16px; border:1px solid #d9e2f1; background:#f8fafc; } .hv-goal small{ display:block; margin-top:4px; color:#475569; font-size:13px; }
.hv-goal.t-green{ background:#eaf6ee; border-color:#bfdcc9; } .hv-goal.t-amber{ background:#fff6e0; border-color:#f0d9a0; } .hv-goal.t-red{ background:#fdecea; border-color:#f1c0ba; }

.hv-real{ margin-top:4px; padding-top:4px; border-top:1px dashed #cdd7ea; color:#1b7a3a !important; }

.hv-mt th,.hv-mt td{ white-space:nowrap; } .hv-mt td.cur,.hv-mt th.cur{ background:#fff6e0; font-weight:700; } .hv-mt td.avg,.hv-mt th.avg{ background:#eef3fb; color:#475569; } .hv-mt tr.dys th,.hv-mt tr.dys td{ color:#64748B; font-size:13px; }

.as-card{ background:#fff; border:1px solid var(--line-2); border-left:6px solid #94a3b8; border-radius:14px; padding:14px 16px; margin-top:12px; }
.as-card.t-green{ border-left-color:#1b7a3a; } .as-card.t-amber{ border-left-color:#d97706; } .as-card.t-red{ border-left-color:#c0392b; }
.as-h{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:space-between; }
.as-name{ background:none; border:0; padding:0; text-align:left; font-weight:700; font-size:15px; color:var(--navy); cursor:pointer; max-width:100%; } .as-name:hover{ text-decoration:underline; }
.as-acts{ display:flex; gap:6px; flex-wrap:wrap; }
.as-act{ font-size:13px; padding:3px 10px; border-radius:999px; border:1px solid #d9e2f1; background:#f8fafc; }
.as-act.t-amber{ background:#fff6e0; border-color:#f0d9a0; color:#8a5a00; } .as-act.t-blue{ background:#eef4ff; border-color:#cfe0fb; color:#1d4ed8; } .as-act.t-green{ background:#eaf6ee; border-color:#bfdcc9; color:#166534; }
.as-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:10px; } @media (max-width:820px){ .as-grid{ grid-template-columns:1fr; } }
.as-col{ display:flex; flex-direction:column; gap:3px; background:#f8fafc; border-radius:10px; padding:10px 12px; } .as-col b{ font-size:15px; } .as-col small{ color:#64748B; font-size:13px; }
.as-k{ font-size:12px; color:#64748B; font-weight:600; }
.as-chip.t-green{ color:#166534; } .as-chip.t-amber{ color:#8a5a00; } .as-chip.t-red{ color:#b3261e; } .as-chip.t-gray{ color:#475569; }
.as-col .dn,.as-why .dn{ color:#c0392b; }
.as-why{ margin:10px 0 0; padding-left:20px; font-size:14px; }
.as-lv{ margin-top:8px; } .as-lv summary{ cursor:pointer; font-size:13px; color:#1d4ed8; }
.as-lv table{ width:100%; border-collapse:collapse; margin-top:6px; font-size:13px; font-variant-numeric:tabular-nums; } .as-lv th,.as-lv td{ padding:5px 8px; border-bottom:1px solid #eef2f9; text-align:right; } .as-lv th:first-child,.as-lv td:first-child{ text-align:left; }
.as-lv tr.rec td{ background:#eaf6ee; font-weight:700; }

.cmp-tb td,.cmp-tb th{ white-space:nowrap; } .cmp-tb td .dn,.cmp-tb td b.dn,.hv-tb b.dn,.hv-t b.dn{ color:#c0392b; } .hv-tb b.up,.hv-t b.up{ color:#1b7a3a; } .cmp-inf{ color:#8a5a00; font-weight:400; }

.as-gate.t-green{ background:#eaf6ee; } .as-gate.t-gray{ background:#f1f5f9; } .as-gate.t-blue{ background:#eef4ff; }
.hv-gate.t-green{ background:#eaf6ee; border-color:#bfdcc9; } .hv-gate.t-blue{ background:#eef4ff; border-color:#cfe0fb; }
.as-gtop{ margin:10px 0 4px; font-size:14px; } .as-gtop .as-name{ font-size:14px; }
@media (max-width:1100px){ .as-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){ .as-grid{ grid-template-columns:1fr; } }

.cs-sum{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 12px; } .cs-s{ background:#f8fafc; border:1px solid var(--line-2); border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; min-width:170px; }
.cs-s span{ font-size:13px; color:#475569; } .cs-s b{ font-size:22px; color:var(--navy); } .cs-s small{ color:#64748B; }
.cs-shop{ margin:14px 0 6px; font-size:15px; color:var(--navy); } .cs-shop small{ font-weight:400; color:#64748B; font-size:12px; }
.cs-list{ list-style:none; margin:0; padding:0; border:1px solid #e1e8f4; border-radius:12px; overflow:hidden; }
.cs-list li{ display:grid; grid-template-columns:minmax(0,2.4fr) minmax(0,1.4fr) minmax(0,1fr) 110px; gap:12px; align-items:center; padding:10px 14px; border-bottom:1px solid #eef2f9; }
.cs-list li:last-child{ border-bottom:0; }
.cs-n{ min-width:0; display:flex; flex-direction:column; } .cs-n a{ color:var(--navy); font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; } .cs-n a:hover{ text-decoration:underline; } .cs-n small{ color:#64748B; font-size:12px; }
.cs-bar{ position:relative; height:22px; background:#eef2f9; border-radius:6px; } .cs-bar i{ position:absolute; left:0; top:0; bottom:0; background:#93c5fd; border-radius:6px; } .cs-bar b{ position:relative; padding-left:8px; line-height:22px; font-size:13px; font-variant-numeric:tabular-nums; }
.cs-d,.cs-o{ display:flex; flex-direction:column; font-variant-numeric:tabular-nums; } .cs-d small,.cs-o small{ color:#64748B; font-size:12px; } .cs-d b.dn{ color:#c0392b; } .cs-d b.up{ color:#1b7a3a; }
.cs .btn{ margin-top:8px; }
@media (max-width:760px){ .cs-list li{ grid-template-columns:1fr 1fr; } .cs-n{ grid-column:1 / -1; } }


/* แจ้งเตือน: การ์ดแต่ละใบเป็นกรอบ จัด 2 คอลัมน์ เท่ากันพอดี (เจ้าของร้านขอ 26 ต.ค.) */
.al-list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; align-items:stretch; }
@media (max-width:900px){ .al-list{ grid-template-columns:1fr; } }
.al-list > .al-card{ border:2px solid #1e3a8a; border-left-width:2px; border-radius:22px; box-shadow:inset 0 6px 0 var(--c), 0 8px 26px rgba(59,91,219,.18); display:flex; flex-direction:column; height:100%; }
.al-list > .al-card:hover{ box-shadow:inset 0 6px 0 var(--c), 0 10px 32px rgba(59,91,219,.28); }

/* การ์ดแจ้งเตือน: ปุ่มกลม − (ย่อ) มุมขวาบน · × (ปิด → ไปประวัติ) มุมขวาล่าง · ปุ่มล่างชิดก้นการ์ด */
.al-list > .al-card > .al-f{ margin-top:auto; display:flex; align-items:center; gap:8px; }
.al-rb{ width:30px; height:30px; flex:0 0 30px; border-radius:50%; border:0; background:#cbd5e1; color:#fff; font-size:20px; line-height:30px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; }
.al-rb:hover{ background:#94a3b8; } .al-x{ margin-left:auto; } .al-x:hover{ background:#c0392b; }
.al-h{ position:relative; } .al-minb{ position:absolute; top:12px; right:12px; } .al-h .al-when{ padding-right:40px; }
.al-list > .al-card.al-min{ height:auto; align-self:start; }
.al-card.al-min .al-h{ border-bottom:0; } .al-card.al-min .al-prod{ display:none; }

/* ปุ่มไปเว็บระบบสต็อก (มุมขวาสุดของแถบหัว) */
.stock-link{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px 6px 10px; border-radius:12px; background:#1e1b4b; border:1px solid rgba(255,255,255,.18); color:#fff; text-decoration:none; line-height:1.05; box-shadow:0 2px 10px rgba(0,0,0,.18); transition:transform .15s, box-shadow .15s; }
.stock-link:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.28); }
.sl-m{ font-size:24px; font-weight:900; color:#ec4899; font-family:inherit; }
.sl-t{ font-size:12px; font-weight:800; letter-spacing:.3px; }
@media (max-width:640px){ .sl-t{ display:none; } }
.cs-list li.cs-head{ background:#f6f8fc; padding:6px 14px; font-size:12px; color:#64748B; font-weight:600; }
@media (max-width:760px){ .cs-list li.cs-head{ display:none; } }

.cmp-yu{ display:inline-block; margin-left:4px; padding:1px 7px; border-radius:999px; background:#EEF2FF; color:#3B5BDB; font-weight:600; font-size:11.5px; white-space:nowrap; }

.opp-chip{ display:inline-block; margin:1px 4px 1px 0; padding:2px 9px; border-radius:999px; font-size:12px; white-space:nowrap; font-weight:600; }
.opp-out{ background:#E3F4EA; color:#067647; } .opp-in{ background:#F1F5F9; color:#475467; } .opp-unk{ background:#FFF6ED; color:#B54708; }
#opp-thr{ height:28px; border:1px solid var(--line); border-radius:8px; padding:0 4px; background:#fff; font-weight:600; }

.cmp-tb th.cmp-sh{ text-align:center; border-left:2px solid #dbe3f3; } .cmp-tb .cmp-sc{ text-align:center; font-variant-numeric:tabular-nums; } .cmp-tb .cmp-na{ color:#98A2B3; }
.cmp-tb tbody td.cmp-sc:nth-child(7), .cmp-tb tbody td.cmp-sc:nth-child(9), .cmp-tb tbody td.cmp-sc:nth-child(11){ border-left:2px solid #eef2f9; }

/* ล็อกตาราง (freeze panes): หัวตารางค้างด้านบน + คอลัมน์ SKU ค้างด้านซ้าย — เลื่อนดูในกรอบสูงไม่เกิน 72% ของจอ */
.cmp-wrap{ max-height:72vh; overflow:auto; position:relative; }
.cmp-tb{ border-collapse:separate; border-spacing:0; }
.cmp-tb thead th{ position:sticky; top:0; z-index:3; background:#eef3fb; height:38px; box-shadow:0 1px 0 #dbe3f3; }
.cmp-tb thead tr:nth-child(2) th{ top:38px; z-index:3; }
.cmp-tb thead th[rowspan="2"]{ vertical-align:middle; }
.cmp-tb thead th:first-child{ left:0; z-index:5; }
.cmp-tb tbody th[scope="row"]{ position:sticky; left:0; z-index:2; background:#fff; text-align:left; box-shadow:1px 0 0 #dbe3f3; }
.cmp-tb tbody tr:hover th[scope="row"]{ background:#f6f8fd; }

.cmp-pl{ color:inherit; text-decoration:underline dotted; text-underline-offset:3px; } .cmp-pl:hover{ color:var(--navy); text-decoration:underline; } .cmp-tb td.cmp-used{ font-weight:700; }

/* สต็อกคู่แข่ง: กรอบของแต่ละร้านสูงจำกัด เลื่อนในกรอบ + ล็อกหัวตารางของร้านนั้น */
.cs-list{ max-height:420px; overflow-y:auto; position:relative; }
.cs-list li.cs-head{ position:sticky; top:0; z-index:2; background:#f1f5fb; box-shadow:0 1px 0 #dbe3f3; }

.cmp-tb td.cmp-px{ text-align:left; min-width:190px; white-space:normal; } .cmp-pxi{ display:inline-block; margin:1px 8px 1px 0; white-space:nowrap; } .cmp-pxi b{ font-weight:700; }
.cmp-tb th.cmp-px-h{ min-width:190px; }

.cmp-promo{ color:#B54708; font-weight:600; font-size:11.5px; white-space:nowrap; }

/* เมนูหัวคอลัมน์ (กดหัวตารางเรียง/กรอง) */
.cmp-tb th.cmp-hd{ cursor:pointer; user-select:none; white-space:nowrap; } .cmp-tb th.cmp-hd:hover{ background:#e3ebf8; }
.cmp-tb th.cmp-hd .cmp-car{ font-style:normal; font-size:10px; color:#94a3b8; margin-left:4px; } .cmp-tb th.cmp-hd.on{ background:#dbe8ff; color:#1e3a8a; } .cmp-tb th.cmp-hd.on .cmp-car{ color:#1e3a8a; }
.cmp-pop{ position:fixed; z-index:9999; width:260px; max-height:70vh; display:flex; flex-direction:column; background:#fff; border:1px solid #dbe3f3; border-radius:16px; box-shadow:0 14px 40px rgba(30,58,138,.22); padding:10px; font-size:14px; }
.cmp-pop-t{ font-weight:700; color:var(--navy); padding:2px 6px 6px; border-bottom:1px solid #eef2f9; margin-bottom:4px; }
.cmp-pop-i{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; border-radius:8px; padding:8px 8px; cursor:pointer; color:var(--ink); font:inherit; } .cmp-pop-i:hover{ background:#f1f5fb; } .cmp-pop-i b{ width:26px; color:#3B5BDB; } .cmp-pop-x b{ color:#c0392b; } .cmp-pop-x{ color:#c0392b; }
.cmp-pop-q{ width:100%; margin:6px 0; height:34px; border:1px solid #dbe3f3; border-radius:10px; padding:0 10px; box-sizing:border-box; }
.cmp-pop-l{ overflow-y:auto; flex:1; min-height:80px; max-height:260px; border-top:1px solid #eef2f9; padding-top:4px; } .cmp-pop-r{ display:flex; align-items:center; gap:8px; padding:5px 6px; cursor:pointer; border-radius:6px; } .cmp-pop-r:hover{ background:#f6f8fd; } .cmp-pop-r input{ width:17px; height:17px; accent-color:#3B5BDB; }
.cmp-pop-n{ font-size:12px; color:#64748B; padding:6px; }
.cmp-pop-b{ display:flex; gap:8px; justify-content:space-between; padding-top:8px; border-top:1px solid #eef2f9; margin-top:6px; } .cmp-pop-b .btn:first-child{ flex:1; background:#3B5BDB; color:#fff; border-color:#3B5BDB; border-radius:999px; } .cmp-pop-rs{ color:#c0392b; border-color:#c0392b; border-radius:999px; }

.hv-real{ color:#1e3a8a; font-size:13px; margin-top:4px; } .hv-real b{ font-weight:700; }