/* ==========================================================
   โคตรเศรษฐี (Kotsetthi) — ธีมแดงมงคล
   ต่อยอดจาก Bootstrap 5 : override ตัวแปร + คอมโพเนนต์เฉพาะงาน
   แดงชาด + ทองคำเปลว = สีของความมงคลและโชคลาภแบบไทย-จีน
   ไฟล์นี้ใช้ร่วมกันทั้ง 3 หน้า mockup และคัดลอกไปเป็น public/assets/css/app.css
   ========================================================== */

:root{
  /* ---- แดง: สีหลักของแบรนด์ ---- */
  --ks-red:#C1121F;         /* แดงชาด — ปุ่มหลัก ราคา จุดเน้น */
  --ks-red-deep:#7E0C14;    /* แดงเลือดหมู — แถบฮีโร่ ฟุตเตอร์ */
  --ks-red-dark:#5A070D;    /* แดงเข้มสุด — เงาและขอบ */
  --ks-red-soft:#FCEBEA;    /* พื้นอ่อน */

  /* ---- ทอง: สีรอง ---- */
  --ks-gold:#C99A2E;
  --ks-gold-bright:#F0C45A; /* ใช้บนพื้นแดงเท่านั้น */
  --ks-gold-soft:#FCF3DF;

  /* ---- กลาง: เอนไปทางอุ่นให้เข้ากับแดง ---- */
  --ks-ink:#1C1416;
  --ks-muted:#6B5D60;
  --ks-faint:#9A8C8F;
  --ks-line:#E8DFDF;
  --ks-line-2:#D3C6C6;
  --ks-bg:#F7F3F2;
  --ks-surface:#FFFFFF;
  --ks-surface-2:#FBF7F6;
  --ks-cream:#FFF6EA;       /* ตัวหนังสือบนพื้นแดง */

  /* ---- สีสื่อความหมาย (แยกจากสีแบรนด์) ---- */
  --ks-good:#12735A;
  --ks-good-soft:#E2F1EC;
  --ks-mid:#B07A12;          /* ช่วงกลาง — ไม่ใช้แดงแบรนด์ เพราะจะอ่านว่า "แย่" */
  --ks-mid-soft:#FBF1DE;
  --ks-bad:#A93A2A;
  --ks-bad-soft:#F8E9E6;

  --ks-radius:10px;
  --ks-shadow:0 1px 2px rgba(28,20,22,.06), 0 10px 26px -18px rgba(90,7,13,.45);
  --ks-shadow-red:0 8px 22px -12px rgba(126,12,20,.55);

  /* ---- bootstrap overrides ---- */
  --bs-body-bg:var(--ks-bg);
  --bs-body-color:var(--ks-ink);
  --bs-body-font-family:"Prompt","Segoe UI",system-ui,sans-serif;
  --bs-body-font-size:.95rem;
  --bs-body-line-height:1.65;
  --bs-border-color:var(--ks-line);
  --bs-primary:var(--ks-red);
  --bs-link-color:var(--ks-red);
  --bs-link-hover-color:var(--ks-red-deep);
}

body{-webkit-font-smoothing:antialiased;background:var(--ks-bg);color:var(--ks-ink)}
h1,h2,h3,h4,h5{font-family:"Prompt",serif;font-weight:700;line-height:1.34;text-wrap:balance}
a{text-decoration:none}
.mono{font-family:"Prompt",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.text-muted-2{color:var(--ks-muted)!important}
.eyebrow{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ks-faint);font-weight:600}
.eyebrow-gold{color:var(--ks-gold-bright)}

/* ---------- แถบต้นแบบ ---------- */
.protobar{background:var(--ks-red-dark);color:var(--ks-cream);font-size:.78rem;padding:.35rem 0;text-align:center}
.protobar code{color:var(--ks-gold-bright)}

/* ---------- แถบบนสุด ---------- */
.ks-topbar{background:var(--ks-red-deep);color:var(--ks-cream);font-size:.8rem}
.ks-topbar a{color:var(--ks-gold-bright)}
.ks-topbar a:hover{color:#fff}

/* ---------- navbar ---------- */
.ks-nav{background:var(--ks-surface);border-bottom:2px solid var(--ks-red)}
.ks-logo{display:flex;align-items:center;gap:.55rem;font-family:"Prompt",serif;font-weight:700;
  font-size:1.2rem;color:var(--ks-ink)}
.ks-logo .seal{width:34px;height:34px;border-radius:50%;background:var(--ks-red);color:var(--ks-gold-bright);
  display:grid;place-items:center;font-size:.95rem;font-weight:700;box-shadow:var(--ks-shadow-red)}
.ks-logo-img{height:38px;width:auto;max-width:160px;object-fit:contain;display:block}
footer.ks-foot .ks-logo-img{height:34px}
.ks-nav .nav-link{color:var(--ks-muted);font-size:.9rem;padding:.45rem .7rem;border-radius:8px;font-weight:500}
.ks-nav .nav-link:hover{background:var(--ks-red-soft);color:var(--ks-red)}
.ks-nav .nav-link.active{color:var(--ks-red);background:var(--ks-red-soft)}

/* ---------- ปุ่ม ---------- */
.btn-ks{background:var(--ks-red);border:1px solid var(--ks-red);color:#fff;font-weight:600}
.btn-ks:hover{background:var(--ks-red-deep);border-color:var(--ks-red-deep);color:#fff}
.btn-gold{background:var(--ks-gold-bright);border:1px solid var(--ks-gold-bright);color:#3A2708;font-weight:700}
.btn-gold:hover{background:#FFD87A;border-color:#FFD87A;color:#3A2708}
.btn-outline-ks{border:1px solid var(--ks-line-2);background:var(--ks-surface);color:var(--ks-ink)}
.btn-outline-ks:hover{border-color:var(--ks-red);color:var(--ks-red);background:var(--ks-surface)}
.btn-ghost-gold{border:1px solid rgba(240,196,90,.55);background:transparent;color:var(--ks-gold-bright);font-weight:600}
.btn-ghost-gold:hover{background:rgba(240,196,90,.14);color:#fff;border-color:var(--ks-gold-bright)}
.btn-line{background:#06C755;border:1px solid #06C755;color:#fff;font-weight:600}
.btn-line:hover{background:#05A948;border-color:#05A948;color:#fff}

/* ---------- ฮีโร่แดง ---------- */
.hero-red{background:var(--ks-red-deep);color:var(--ks-cream);position:relative;overflow:hidden}
.hero-red::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(240,196,90,.20) 1px, transparent 0);
  background-size:15px 15px}
.hero-red::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--ks-gold),var(--ks-gold-bright),var(--ks-gold))}
.hero-red > *{position:relative;z-index:1}
.hero-red h1{color:#fff;font-size:clamp(1.8rem,4vw,2.9rem);letter-spacing:-.01em}
.hero-red h1 em{font-style:normal;color:var(--ks-gold-bright)}
.hero-red .lead{color:rgba(255,246,234,.82);font-size:1rem;max-width:56ch}
.hero-search{background:rgba(255,255,255,.1);border:1px solid rgba(240,196,90,.4);border-radius:12px;padding:.4rem}
.hero-search input{background:#fff;border:0;border-radius:9px;font-size:1.05rem}
.hero-search input:focus{box-shadow:none}
.hero-chip{border:1px dashed rgba(240,196,90,.5);border-radius:999px;padding:.2rem .75rem;font-size:.83rem;
  color:var(--ks-cream);display:inline-block}
.hero-chip:hover{background:rgba(240,196,90,.16);border-style:solid;color:#fff}

/* เบอร์เด่นในฮีโร่ */
.hero-feature{background:rgba(0,0,0,.22);border:1px solid rgba(240,196,90,.35);border-radius:14px;padding:1.15rem}
.hero-feature .n{font-family:"Prompt",monospace;font-size:1.95rem;font-weight:600;color:var(--ks-gold-bright);
  letter-spacing:1px;display:block}
.hero-feature .price{font-family:"Prompt",monospace;font-size:1.35rem;font-weight:600;color:#fff}

/* ---------- แถบความน่าเชื่อถือ ---------- */
.trust{background:var(--ks-ink);color:var(--ks-cream)}
.trust .item{display:flex;align-items:center;gap:.6rem;padding:.7rem 0;font-size:.86rem}
.trust .dot{width:7px;height:7px;border-radius:50%;background:var(--ks-gold-bright);flex:none}

/* ---------- ราคาก่อนลด (ใช้ได้ทุกที่ ไม่ผูกกับการ์ด) ---------- */
.was{font-family:"Prompt",ui-monospace,monospace;font-size:.85rem;color:var(--ks-faint);
  text-decoration:line-through;text-decoration-thickness:1px;display:inline-block}
.hero-feature .was{font-size:.9rem;color:rgba(255,246,234,.55)}
.ncard .was{font-size:.8rem}

/* ---------- ตราประทับผลรวม ---------- */
.seal-sum{width:52px;height:52px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;
  border:1.5px solid currentColor;font-family:"Prompt",monospace;text-align:center}
.seal-sum::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px dashed currentColor;opacity:.35}
.seal-sum b{font-size:1.15rem;font-weight:600;line-height:1;display:block}
.seal-sum small{font-size:.53rem;letter-spacing:.08em;opacity:.85;font-family:"Prompt",sans-serif}
.seal-lg{width:78px;height:78px}
.seal-lg b{font-size:1.7rem}
.seal-lg small{font-size:.62rem}
.lv-A{color:var(--ks-good)}
.lv-B{color:var(--ks-red)}
.lv-C{color:var(--ks-gold)}
.lv-D{color:var(--ks-bad)}

/* ---------- บันไดคู่เลข ---------- */
.numline{display:grid;grid-template-columns:repeat(20,1fr);max-width:430px}
.numline .d{grid-column:span 2;text-align:center;font-family:"Prompt",monospace;font-size:1.6rem;font-weight:500;line-height:1.2}
.numline .pr{grid-column:span 2;height:6px;border-radius:3px;margin:.15rem .2rem 0;background:var(--ks-line)}
.numline .pr.g{background:var(--ks-good)}
.numline .pr.b{background:var(--ks-bad)}
.numline .pr.n{background:var(--ks-line-2)}
.numline .pr.x{background:transparent;border-top:2px dotted var(--ks-line-2)}
.numline .sp{grid-column:span 1}
.numline .d.kal{color:var(--ks-bad);position:relative}
.numline .d.kal::after{content:"";position:absolute;left:22%;right:22%;bottom:2px;border-bottom:2px dotted var(--ks-bad)}

/* ---------- การ์ดเบอร์ ---------- */
.ncard{background:var(--ks-surface);border:1px solid var(--ks-line);border-radius:var(--ks-radius);
  padding:.9rem;height:100%;display:flex;flex-direction:column;gap:.6rem;position:relative;transition:.16s}
.ncard:hover{border-color:var(--ks-red);box-shadow:var(--ks-shadow);transform:translateY(-2px)}
.ncard.hot{border-color:var(--ks-red)}
.ncard .flag{position:absolute;top:-1px;right:12px;background:var(--ks-red);color:var(--ks-gold-bright);
  font-size:.66rem;font-weight:700;padding:.12rem .55rem;border-radius:0 0 6px 6px;letter-spacing:.03em}
.ncard .n{font-family:"Prompt",monospace;font-size:1.35rem;font-weight:600;color:var(--ks-ink);letter-spacing:.5px}
.ncard .n:hover{color:var(--ks-red)}
.ncard .price{font-family:"Prompt",monospace;font-size:1.1rem;font-weight:700;color:var(--ks-red)}
/* ปุ่มในการ์ดต้องอยู่เหนือ overlay ของ .stretched-link เพื่อคง hover/โฟกัสของตัวเอง */
.ncard .btn{position:relative;z-index:1}

/* ---------- ป้ายเครือข่าย ---------- */
.net{font-size:.72rem;font-weight:600;padding:.1rem .45rem;border-radius:5px}
.net-ais{background:#E9F0F7;color:#1B5B8F}
.net-true{background:#FBE9EA;color:#A42730}
.net-dtac{background:#EAF3EC;color:#22694A}
.net-nt{background:#EDEBF6;color:#4A3C86}

/* ---------- chip ---------- */
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.12rem .55rem;border-radius:999px;
  font-size:.78rem;background:var(--ks-surface-2);border:1px solid var(--ks-line);color:var(--ks-muted);
  white-space:nowrap}
.chip-good{background:var(--ks-good-soft);border-color:transparent;color:var(--ks-good);font-weight:500}
.chip-bad{background:var(--ks-bad-soft);border-color:transparent;color:var(--ks-bad);font-weight:500}
.chip-red{background:var(--ks-red-soft);border-color:transparent;color:var(--ks-red);font-weight:600}
.chip-gold{background:var(--ks-gold-soft);border-color:transparent;color:var(--ks-gold);font-weight:600}
.chip-warn{background:var(--ks-mid-soft);border-color:transparent;color:var(--ks-mid);font-weight:600}

/* ---------- หัวข้อ section ---------- */
.sect-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.sect-head h2{font-size:1.35rem;margin:0;position:relative;padding-left:.85rem}
.sect-head h2::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:4px;border-radius:2px;
  background:var(--ks-red)}
.sect-head p{margin:.25rem 0 0 .85rem;font-size:.85rem;color:var(--ks-muted)}

/* ---------- ทางลัดเลือกเบอร์ ---------- */
.pick{display:block;background:var(--ks-surface);border:1px solid var(--ks-line);border-radius:var(--ks-radius);
  padding:.7rem .9rem;transition:.15s;height:100%}
.pick:hover{border-color:var(--ks-red);background:var(--ks-red-soft)}
.pick b{font-family:"Prompt",monospace;font-size:1.1rem;color:var(--ks-red);display:block;line-height:1.2}
.pick span{font-size:.78rem;color:var(--ks-muted)}

/* ---------- แถบเครื่องมือวิเคราะห์ ---------- */
.tool-band{background:var(--ks-ink);color:var(--ks-cream);border-radius:14px;padding:1.6rem;position:relative;overflow:hidden}
.tool-band::after{content:"";position:absolute;top:-40%;right:-8%;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(193,18,31,.55),transparent 62%)}
.tool-band > *{position:relative;z-index:1}
.tool-band h2{color:#fff}

/* ---------- ขั้นตอนสั่งซื้อ ---------- */
.step{display:flex;gap:.85rem;align-items:flex-start}
.step .num{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ks-red-soft);color:var(--ks-red);font-family:"Prompt",monospace;font-weight:700;font-size:.9rem}
.step b{display:block;font-size:.95rem}
.step span{font-size:.83rem;color:var(--ks-muted)}

/* ---------- อื่น ๆ ---------- */
.ks-card{background:var(--ks-surface);border:1px solid var(--ks-line);border-radius:var(--ks-radius)}
.note{background:var(--ks-gold-soft);border-left:3px solid var(--ks-gold);border-radius:8px;padding:.75rem .9rem;font-size:.85rem}
.rail{background:var(--ks-surface);border:1px solid var(--ks-line);border-radius:var(--ks-radius);padding:1rem;position:sticky;top:1rem}
.fgroup{padding-block:.8rem;border-top:1px solid var(--ks-line)}
.fgroup:first-child{border-top:0;padding-top:0}
.fgroup > .h{display:block;font-size:.74rem;font-weight:600;color:var(--ks-faint);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:.45rem}
.pillset{display:flex;flex-wrap:wrap;gap:.3rem}
.pillset input{position:absolute;opacity:0;pointer-events:none}
.pillset label{padding:.2rem .6rem;border:1px solid var(--ks-line-2);border-radius:999px;
  font-size:.8rem;cursor:pointer;font-family:"Prompt",monospace;margin:0}
.pillset input:checked + label{background:var(--ks-red);border-color:var(--ks-red);color:#fff}
.scorerow{display:grid;grid-template-columns:70px 1fr 38px;gap:.6rem;align-items:center;padding:.2rem 0;font-size:.88rem}
.bar{height:9px;border-radius:5px;background:var(--ks-line);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:5px}
.av{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ks-red-soft);color:var(--ks-red);font-weight:700;font-family:"Prompt",serif}
.tbl th{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ks-faint);font-weight:600}
.form-control:focus,.form-select:focus{border-color:var(--ks-red);box-shadow:0 0 0 .2rem rgba(193,18,31,.14)}

/* ---------- ช่องพรีวิวรูปในหน้าตั้งค่า ---------- */
.ks-img-prev{display:flex;align-items:center;justify-content:center;min-height:86px;padding:.5rem;
  border:1px solid var(--ks-line);border-radius:10px;background:var(--ks-surface-2)}
.ks-img-prev img{max-height:72px;max-width:100%;border-radius:6px}
.ks-img-empty{color:var(--ks-faint);font-size:.82rem}

/* ---------- หน้า error (403/404/500) ---------- */
.ks-error{max-width:520px;margin:3rem auto;padding:1rem;text-align:center}
.ks-error-ic{display:inline-grid;place-items:center;width:72px;height:72px;border-radius:50%;margin-bottom:1rem;
  background:var(--ks-red-soft);color:var(--ks-red)}
.ks-error-ic svg{width:34px;height:34px}
.ks-error-ic.warn{background:var(--ks-mid-soft);color:var(--ks-mid)}
.ks-error-ic.muted{background:var(--ks-surface-2);color:var(--ks-faint)}

/* ---------- ปุ่มเลือก/ล้างทั้งกลุ่มสิทธิ์ ---------- */
.ks-grp-toggle{background:none;border:0;padding:0;font-size:.72rem;font-weight:600;
  color:var(--ks-red);cursor:pointer}
.ks-grp-toggle:hover{text-decoration:underline}

/* ---------- ตรวจรหัสผ่านสด ---------- */
.pw-ok{color:var(--ks-good)}
.pw-bad{color:var(--ks-bad)}

/* ---------- Preview ผลรวมในฟอร์มเบอร์ ---------- */
[data-sum-preview]{min-height:1.15em;font-size:.85rem;color:var(--ks-faint);font-weight:600}
[data-sum-preview].is-on{color:var(--ks-red)}

/* ---------- Dropzone อัปโหลดไฟล์ ---------- */
.ks-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.3rem;padding:1.6rem 1rem;border:2px dashed var(--ks-line-2);border-radius:14px;
  background:var(--ks-surface-2);cursor:pointer;transition:border-color .12s,background .12s}
.ks-drop:hover,.ks-drop.is-drag{border-color:var(--ks-red);background:var(--ks-red-soft)}
.ks-drop-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ks-drop-ic{width:30px;height:30px;color:var(--ks-red)}
.ks-drop-main{font-weight:600;font-size:.92rem}
.ks-drop.has-file .ks-drop-main{color:var(--ks-good)}
.ks-drop-sub{font-size:.76rem}

/* ---------- KPI tiles (dashboard) ---------- */
.ks-kpi-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.ks-kpi-ic{display:inline-grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px}
.ks-kpi-ic svg{width:18px;height:18px}
.ks-kpi-val{font-size:1.45rem;font-weight:700;line-height:1.25;margin-top:.35rem}
.ks-kpi-sub{font-size:.75rem}
.ks-kpi-ic.tone-red{color:var(--ks-red);background:var(--ks-red-soft)}
.ks-kpi-ic.tone-gold{color:var(--ks-gold);background:var(--ks-gold-soft)}
.ks-kpi-ic.tone-mid{color:var(--ks-mid);background:var(--ks-mid-soft)}
.ks-kpi-ic.tone-good{color:var(--ks-good);background:var(--ks-good-soft)}
.ks-kpi-ic.tone-bad{color:var(--ks-bad);background:var(--ks-bad-soft)}
.ks-kpi-ic.tone-muted{color:var(--ks-faint);background:var(--ks-surface-2)}

/* ---------- กล่อง QR ---------- */
.qr-box{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.qr-box canvas{display:block;border:1px solid var(--ks-line);border-radius:12px;background:#fff}
.qr-download{font-size:.85rem;font-weight:600;color:var(--ks-red);text-decoration:none}
.qr-download:hover{color:var(--ks-red-deep);text-decoration:underline}
.qr-fallback{font-size:.8rem;color:var(--ks-muted);text-align:center}

/* ---------- ฟุตเตอร์ ---------- */
footer.ks-foot{background:var(--ks-red-deep);color:rgba(255,246,234,.8);font-size:.86rem;
  border-top:3px solid var(--ks-gold)}
footer.ks-foot h6{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ks-gold-bright)}
footer.ks-foot a{color:rgba(255,246,234,.8)}
footer.ks-foot a:hover{color:var(--ks-gold-bright)}
footer.ks-foot .ks-logo{color:#fff}
footer.ks-foot .ks-logo .seal{background:var(--ks-gold-bright);color:var(--ks-red-deep)}

@media (max-width:767.98px){
  .numline{max-width:100%}
  .numline .d{font-size:1.25rem}
  .rail{position:static}
  .hero-red h1{font-size:1.7rem}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

/* ==========================================================
   หลังบ้าน — Admin Shell (sidebar + topbar + toast) & Dark Mode
   ชุด UI Components พิเศษ: theme toggle, fullscreen, sidebar
   collapse, breadcrumb, avatar menu, toast — responsive ครบทุกจอ
   ========================================================== */

/* ---- ตัวแปรโหมดมืด: ทำงานเฉพาะเมื่อ <html data-theme="dark"> ---- */
:root[data-theme="dark"]{
  --ks-ink:#F0E7E7;
  --ks-muted:#B6A6A9;
  --ks-faint:#8C7C7F;
  --ks-line:#372A2C;
  --ks-line-2:#4C3C3E;
  --ks-bg:#161011;
  --ks-surface:#211A1B;
  --ks-surface-2:#2A2123;
  --ks-red-soft:rgba(193,18,31,.22);
  --ks-good-soft:rgba(18,115,90,.22);
  --ks-bad-soft:rgba(169,58,42,.24);
  --ks-mid-soft:rgba(176,122,18,.20);
  --ks-gold-soft:rgba(201,154,46,.18);
  --ks-shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 32px -18px rgba(0,0,0,.9);
  --bs-body-bg:var(--ks-bg);
  --bs-body-color:var(--ks-ink);
  --bs-border-color:var(--ks-line);
  color-scheme:dark;
}
:root[data-theme="dark"] .net-ais{background:#12314A;color:#8FC3ED}
:root[data-theme="dark"] .net-true{background:#4A1D22;color:#F0A6AD}
:root[data-theme="dark"] .net-dtac{background:#153322;color:#8FD4AC}
:root[data-theme="dark"] .net-nt{background:#241E42;color:#B7ABE8}

/* ---- โครงหลัก ---- */
.ks-admin-body{background:var(--ks-bg)}
.ks-admin{display:flex;min-height:100vh;--ks-side-w:246px}
.ks-admin.is-collapsed{--ks-side-w:72px}

/* ---- Sidebar ---- */
.ks-sidebar{width:var(--ks-side-w);flex:0 0 var(--ks-side-w);background:var(--ks-surface);
  border-right:1px solid var(--ks-line);display:flex;flex-direction:column;position:sticky;top:0;
  height:100vh;transition:width .18s ease,transform .22s ease;z-index:1045;overflow:hidden}
.ks-sidebar-head{display:flex;align-items:center;gap:.55rem;height:58px;padding:0 .9rem;flex:none;
  border-bottom:1px solid var(--ks-line);white-space:nowrap}
.ks-sidebar-head .ks-logo{font-size:1.12rem;overflow:hidden}
.ks-sidebar-nav{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;padding:.6rem .55rem 1rem}
.ks-side-sec{font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ks-faint);padding:.9rem .6rem .3rem;white-space:nowrap}
.ks-side-link{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:9px;
  color:var(--ks-muted);font-weight:500;font-size:.9rem;white-space:nowrap;margin-bottom:.1rem}
.ks-side-link:hover{background:var(--ks-red-soft);color:var(--ks-red)}
.ks-side-link.active{background:var(--ks-red);color:#fff;box-shadow:var(--ks-shadow-red)}
.ks-side-link.active svg{color:var(--ks-gold-bright)}
.ks-side-link svg{width:20px;height:20px;flex:none}
.ks-sidebar-foot{flex:none;border-top:1px solid var(--ks-line);padding:.7rem .9rem;font-size:.76rem;
  color:var(--ks-faint);white-space:nowrap;overflow:hidden}

/* สถานะยุบ (desktop) — เหลือไอคอน */
.ks-admin.is-collapsed .ks-side-label,
.ks-admin.is-collapsed .ks-side-sec,
.ks-admin.is-collapsed .ks-logo-text,
.ks-admin.is-collapsed .ks-sidebar-foot span{display:none}
.ks-admin.is-collapsed .ks-side-link{justify-content:center;gap:0}
.ks-admin.is-collapsed .ks-sidebar-head{justify-content:center;padding:0}
/* หัวข้อหมวดตอนยุบ → เส้นคั่นบางแทนตัวอักษร (ตัวแรกซ่อน ไม่ให้ซ้ำกับเส้นใต้โลโก้) */
@media (min-width:992px){
  .ks-admin.is-collapsed .ks-side-sec{display:block;font-size:0;line-height:0;padding:0;
    height:1px;margin:.6rem .55rem;background:var(--ks-line);border-radius:1px}
  .ks-admin.is-collapsed .ks-sidebar-nav > .ks-side-sec:first-child{display:none}
}
/* ป้ายลอย (flyout) ตอนยุบ — วาดด้วย JS บน body เพื่อหนี overflow ของ sidebar */
.ks-side-tip{position:fixed;transform:translateY(-50%);background:var(--ks-red);color:#fff;
  padding:.32rem .6rem;border-radius:8px;font-size:.8rem;font-weight:500;white-space:nowrap;
  box-shadow:var(--ks-shadow-red);z-index:1100;pointer-events:none;animation:ksTipIn .12s ease}
@keyframes ksTipIn{from{opacity:0}to{opacity:1}}
/* ลิงก์ข้ามไปเนื้อหา — โผล่เฉพาะตอนโฟกัสด้วยคีย์บอร์ด */
.ks-skip{position:fixed;top:10px;left:10px;z-index:1200;background:var(--ks-red);color:#fff;
  padding:.55rem .85rem;border-radius:9px;font-size:.85rem;font-weight:600;text-decoration:none;
  box-shadow:var(--ks-shadow-red);transform:translateY(-160%);transition:transform .16s ease}
.ks-skip:focus{transform:none;color:#fff;outline:2px solid var(--ks-gold-bright);outline-offset:2px}
.ks-content:focus{outline:none}

/* ---- ส่วนเนื้อหาหลัก ---- */
.ks-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.ks-topbar-admin{position:sticky;top:0;z-index:1030;display:flex;align-items:center;gap:.75rem;
  height:58px;padding:0 1rem;background:var(--ks-surface);border-bottom:1px solid var(--ks-line)}
.ks-content{flex:1 1 auto;padding:1.3rem 1.15rem}
.ks-icon-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--ks-line);
  background:var(--ks-surface);color:var(--ks-muted);display:grid;place-items:center;flex:none;transition:.15s}
.ks-icon-btn:hover{border-color:var(--ks-red);color:var(--ks-red);background:var(--ks-red-soft)}
.ks-icon-btn svg{width:20px;height:20px}

/* ---- Breadcrumb ---- */
.ks-crumb{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:var(--ks-muted);min-width:0;overflow:hidden}
.ks-crumb a{color:var(--ks-muted)}
.ks-crumb a:hover{color:var(--ks-red)}
.ks-crumb .sep{color:var(--ks-faint);display:inline-flex}
.ks-crumb .cur{color:var(--ks-ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- Avatar & profile menu ---- */
.ks-avatar{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--ks-red);color:var(--ks-gold-bright);font-weight:700;font-family:"Prompt",serif;
  border:2px solid var(--ks-gold-soft)}
.ks-profile-btn{display:flex;align-items:center;gap:.5rem;background:transparent;border:0;padding:.15rem;border-radius:999px}
.ks-profile-btn .who{text-align:right;line-height:1.15;max-width:150px}
.ks-profile-btn .who b{display:block;font-size:.84rem;color:var(--ks-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ks-profile-btn .who span{font-size:.72rem;color:var(--ks-faint)}
.ks-menu{background:var(--ks-surface);border:1px solid var(--ks-line);border-radius:12px;
  box-shadow:var(--ks-shadow);padding:.4rem;min-width:210px}
.ks-menu .dropdown-item{border-radius:8px;font-size:.88rem;padding:.5rem .65rem;color:var(--ks-ink);display:flex;align-items:center;gap:.55rem}
.ks-menu .dropdown-item:hover{background:var(--ks-red-soft);color:var(--ks-red)}
.ks-menu .dropdown-item svg{width:17px;height:17px;color:var(--ks-faint)}
.ks-menu .dropdown-item:hover svg{color:var(--ks-red)}
.ks-menu .dropdown-divider{border-color:var(--ks-line)}

/* ---- Backdrop (มือถือ) ---- */
.ks-backdrop{position:fixed;inset:0;background:rgba(20,8,10,.5);z-index:1044;
  opacity:0;visibility:hidden;transition:.2s}

/* ---- Toast ---- */
.ks-toasts{position:fixed;top:70px;right:16px;z-index:1090;display:flex;flex-direction:column;gap:.5rem;
  max-width:min(360px,calc(100vw - 32px))}
.ks-toast{display:flex;align-items:flex-start;gap:.6rem;background:var(--ks-surface);color:var(--ks-ink);
  border:1px solid var(--ks-line);border-left:4px solid var(--ks-muted);border-radius:11px;
  box-shadow:var(--ks-shadow);padding:.7rem .8rem;font-size:.88rem;animation:ksToastIn .25s ease}
.ks-toast.is-hiding{animation:ksToastOut .2s ease forwards}
.ks-toast .ic{flex:none;width:20px;height:20px;margin-top:1px}
.ks-toast .msg{flex:1 1 auto;line-height:1.5}
.ks-toast .x{flex:none;background:transparent;border:0;color:var(--ks-faint);line-height:1;font-size:1.1rem;padding:0 .1rem}
.ks-toast .x:hover{color:var(--ks-ink)}
.ks-toast.t-success{border-left-color:var(--ks-good)}.ks-toast.t-success .ic{color:var(--ks-good)}
.ks-toast.t-error{border-left-color:var(--ks-bad)}.ks-toast.t-error .ic{color:var(--ks-bad)}
.ks-toast.t-info{border-left-color:var(--ks-red)}.ks-toast.t-info .ic{color:var(--ks-red)}
@keyframes ksToastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
@keyframes ksToastOut{to{opacity:0;transform:translateX(20px)}}

/* ---- Responsive: Tablet & Mobile (< 992px) → sidebar เป็น drawer ---- */
@media (max-width:991.98px){
  .ks-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);width:262px;flex-basis:262px;box-shadow:var(--ks-shadow)}
  .ks-admin.is-collapsed .ks-side-label,
  .ks-admin.is-collapsed .ks-side-sec,
  .ks-admin.is-collapsed .ks-logo-text,
  .ks-admin.is-collapsed .ks-sidebar-foot span{display:revert}
  .ks-admin.is-collapsed .ks-side-link{justify-content:flex-start;gap:.7rem}
  .ks-admin.is-collapsed .ks-sidebar-head{justify-content:flex-start;padding:0 .9rem}
  .ks-admin.is-open .ks-sidebar{transform:translateX(0)}
  .ks-admin.is-open .ks-backdrop{opacity:1;visibility:visible}
  .ks-profile-btn .who{display:none}
}
@media (max-width:575.98px){
  .ks-content{padding:1rem .8rem}
  .ks-topbar-admin{gap:.5rem;padding:0 .7rem}
  .ks-toasts{top:66px;right:10px;left:10px;max-width:none}
}

/* ==========================================================
   ตารางข้อมูลหลังบ้าน — Modern Minimal
   การ์ดยกลอย, เส้นคั่นบาง, แถวโปร่ง, status เป็น pill สี, ปุ่มไอคอน ghost, การ์ดบนมือถือ
   ========================================================== */

/* การ์ดยกลอยเบา ๆ ทั่วทั้งหลังบ้าน — ขอบบาง เพิ่มเงานุ่ม ให้ดูลอยจากพื้น */
.ks-content .ks-card,.ks-card-elevated{border-color:var(--ks-line);
  box-shadow:0 1px 2px rgba(20,10,12,.04), 0 12px 30px -22px rgba(20,10,12,.30)}
:root[data-theme="dark"] .ks-content .ks-card,
:root[data-theme="dark"] .ks-card-elevated{box-shadow:var(--ks-shadow)}

/* ปุ่มจัดการแบบไอคอน ghost — ไร้ขอบจนกว่าจะชี้ ให้ตารางสะอาดตา */
.ks-act{display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:9px;
  border:1px solid transparent;background:transparent;color:var(--ks-faint);
  vertical-align:middle;transition:color .12s,background .12s}
.ks-act + .ks-act,.ks-act + form,form + .ks-act{margin-left:.15rem}
.ks-act:hover{color:var(--ks-red);background:var(--ks-red-soft)}
.ks-act-danger:hover{color:var(--ks-bad);background:var(--ks-bad-soft)}
.ks-act:focus-visible{outline:2px solid var(--ks-red);outline-offset:1px}

/* ตารางโมเดิร์นทุกหน้าหลังบ้าน: ตัดเส้นตั้ง เหลือเส้นคั่นบาง ๆ แถวโปร่ง หัวตารางเบา */
.ks-content .tbl{border-collapse:separate;border-spacing:0}
.ks-content .tbl thead th{border:0;padding:.55rem .8rem;font-size:.68rem;letter-spacing:.09em;
  color:var(--ks-faint);background:transparent}
.ks-content .tbl tbody td{border:0;border-top:1px solid var(--ks-line);padding:.7rem .8rem}
.ks-content .tbl tbody tr:first-child td{border-top:0}
.ks-content .tbl tbody tr{transition:background .1s}
.ks-content .tbl tbody tr:hover{background:var(--ks-surface-2)}
.ks-content .tbl td.c-num a{font-size:.98rem;letter-spacing:.3px}
/* เลือกหลายเบอร์ (bulk) */
.ks-content .tbl th.c-check,.ks-content .tbl td.c-check{width:40px;text-align:center;padding-left:.6rem;padding-right:.2rem}
.ks-bulkbar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--ks-surface);
  border:1px solid var(--ks-red);border-radius:12px;padding:.6rem .9rem;box-shadow:var(--ks-shadow-red)}
.ks-bulkbar .ks-bulk-count{font-size:.9rem;color:var(--ks-ink)}
.ks-bulkbar .ks-bulk-count b{color:var(--ks-red);font-size:1.05rem}

/* status เป็น pill สีตามสถานะ — สื่อความหมายด้วยสี ลดน้ำหนักปุ่มเดิม */
.ks-statsel.form-select{width:auto;min-width:116px;border-color:transparent;border-radius:999px;
  font-weight:600;padding-top:.22rem;padding-bottom:.22rem;background-color:var(--ks-surface-2);
  transition:filter .12s,border-color .12s}
.ks-statsel.form-select:hover{border-color:var(--ks-line-2)}
.ks-statsel-available{background-color:var(--ks-good-soft)!important;color:var(--ks-good)}
.ks-statsel-reserved{background-color:var(--ks-mid-soft)!important;color:var(--ks-mid)}
.ks-statsel-sold{background-color:var(--ks-red-soft)!important;color:var(--ks-red)}
.ks-statsel-hidden{background-color:var(--ks-line)!important;color:var(--ks-faint)}
/* โทนสถานะลูกค้า (lead) */
.ks-statsel-lead-new{background-color:var(--ks-red-soft)!important;color:var(--ks-red)}
.ks-statsel-lead-contacted{background-color:var(--ks-mid-soft)!important;color:var(--ks-mid)}
.ks-statsel-lead-won{background-color:var(--ks-good-soft)!important;color:var(--ks-good)}
.ks-statsel-lead-lost{background-color:var(--ks-line)!important;color:var(--ks-faint)}
/* chip ตัวกรองที่ถูกเลือกอยู่ — วงรอบสีตามโทน */
.chip-on{outline:2px solid currentColor;outline-offset:1px;font-weight:700}

/* ---- มือถือ: แปลงตารางเป็นการ์ด อ่านง่าย กดง่าย ไม่ต้องเลื่อนแนวนอน ---- */
@media (max-width:767.98px){
  .tbl-cards thead{display:none}
  .tbl-cards,.tbl-cards tbody{display:block}
  .tbl-cards tr{display:block;border:1px solid var(--ks-line);border-radius:14px;
    padding:.8rem 1rem;margin-bottom:.75rem;background:var(--ks-surface)}
  .tbl-cards tr.no-card{border:0;background:transparent;padding:0}
  .tbl-cards tbody td{display:flex;justify-content:space-between;align-items:center;gap:1rem;
    padding:.3rem 0;border:0;border-top:0;text-align:right;white-space:normal}
  .tbl-cards td::before{content:attr(data-label);color:var(--ks-faint);font-size:.74rem;
    font-weight:600;letter-spacing:.04em;text-align:left;flex:none}
  .tbl-cards td.c-num{display:block;text-align:left;border-bottom:1px solid var(--ks-line);
    padding-bottom:.55rem;margin-bottom:.45rem}
  .tbl-cards td.c-num::before{display:none}
  .tbl-cards td.c-num a{font-size:1.2rem}
  .tbl-cards td[data-label] .form-select{flex:none;max-width:170px}
  .tbl-cards td.c-act{justify-content:flex-end}
  .tbl-cards td.c-act::before{content:"";flex:1}
  /* cell ที่มีเนื้อหายาว/ฟอร์ม — วางเต็มความกว้าง ป้ายอยู่บรรทัดบน */
  .tbl-cards td.c-wide{display:block;text-align:left}
  .tbl-cards td.c-wide::before{display:block;margin-bottom:.4rem}
  .tbl-cards td.c-wide .form-select{max-width:none}
}