ที่มีลิงก์ข้างใน
เป้ากดจะได้เต็มกรอบจริง และคีย์บอร์ดกับโปรแกรมอ่านหน้าจอเห็นเป็นลิงก์เดียว */
.qtile{display:flex;align-items:flex-start;gap:11px;text-decoration:none;
background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);
padding:13px 14px;box-shadow:var(--shadow);min-height:64px;
transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
/* ค่าเริ่มต้นเผื่อกลุ่มไหนยังไม่ได้ตั้ง tone ใน nav.php */
--tone-bg:var(--blush); --tone-ink:var(--accent)}
.qtile:hover{border-color:var(--tone-ink);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.qtile:focus-visible{outline:3px solid var(--tone-ink);outline-offset:2px}
/* สีประจำกลุ่ม — มาจาก 'tone' ใน config/nav.php
⚠ ทุกคู่วัดคอนทราสต์แล้ว: ไอคอนบนพื้นโทน 5.1–7.2:1 · ไอคอนขาวบนพื้นเข้ม (ตอน hover) 6.7–9.9:1
เกินเกณฑ์ 3:1 ของ WCAG 1.4.11 ทุกคู่ — เพิ่มโทนใหม่ต้องวัดก่อน ห้ามเลือกด้วยตาเปล่า
⚠ สีเป็นแค่ตัวช่วยจำ ไม่ใช่ตัวบอกความหมายลำพัง (WCAG 1.4.1)
ทุกกลุ่มมีหัวข้อข้อความกำกับอยู่แล้ว คนตาบอดสีจึงใช้งานได้ครบเหมือนกัน */
.qtile.t-rose,.dgroup .t-rose {--tone-bg:#FBD9E2; --tone-ink:#A82A52}
.qtile.t-amber,.dgroup .t-amber {--tone-bg:#FAE6C4; --tone-ink:#7E5206}
.qtile.t-teal,.dgroup .t-teal {--tone-bg:#CDE8E3; --tone-ink:#0F5C51}
.qtile.t-violet,.dgroup .t-violet{--tone-bg:#E1D9F5; --tone-ink:#4E3396}
.qtile.t-blue,.dgroup .t-blue {--tone-bg:#D2E2F7; --tone-ink:#194B83}
.qtile.t-slate,.dgroup .t-slate {--tone-bg:#DEDBE1; --tone-ink:#45414D}
.qtile.t-green,.dgroup .t-green {--tone-bg:#D5EACF; --tone-ink:#27632F}
.qicon{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
background:var(--tone-bg);color:var(--tone-ink);font-size:15px;
transition:background .15s ease,color .15s ease}
.qtile:hover .qicon{background:var(--tone-ink);color:#fff}
.qtext{min-width:0;display:flex;flex-direction:column;gap:2px}
.qtext b{font-size:14px;font-weight:700;color:var(--ink);line-height:1.45}
.qtext > span{font-size:11.5px;color:var(--ink-muted);line-height:1.6}
.qtile:hover .qtext b{color:var(--tone-ink)}
/* จอเล็กบีบเหลือสองคอลัมน์ แต่ยังต้องกดโดนง่าย จึงลดคำอธิบายทิ้งแทนที่จะย่อกรอบ */
@media (max-width:560px){
.qgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qtile{flex-direction:column;gap:8px;padding:12px;min-height:0}
.qtext > span{display:none}
.qtext b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
.qtile{transition:none}
.qtile:hover{transform:none}
}
.stats{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat .n{font-family:var(--font-mono);font-size:26px;font-weight:600;line-height:1.15}
.stat .l{font-size:13px;color:var(--ink-muted);margin-top:2px;font-weight:600}
.stat.warn .n{color:var(--warn)} .stat.dg .n{color:var(--danger)}
.cols2{display:grid;gap:12px;grid-template-columns:1fr 1fr;align-items:start}
.cols2.stack{grid-template-columns:1fr}
.linklist{display:flex;flex-direction:column}
.linklist a,.linklist button{display:flex;align-items:center;gap:9px;padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
.linklist a:last-child,.linklist button:last-child{border-bottom:none}
.linklist a:hover,.linklist button:hover{background:var(--blush)}
.linklist .sp{flex:1}
/* ---------- Detail ---------- */
.detail{display:grid;gap:16px;grid-template-columns:1fr 288px;align-items:start}
/* ⚠ ลูกของ grid มีขนาดต่ำสุดเท่า min-content โดยปริยาย — ถ้าลูกตัวไหนยุบไม่ได้
คอลัมน์จะบานออกเกินความกว้างที่มี แล้วทั้งหน้าจะเลื่อนแนวนอน */
.detail > *{min-width:0}
.gallery{display:grid;gap:8px;grid-template-columns:repeat(4,1fr)}
.gallery div{position:relative;overflow:hidden;aspect-ratio:1;border-radius:18px;background:linear-gradient(135deg,var(--accent-soft),var(--surface-alt));display:grid;place-items:center;font-size:26px}
.gallery div:first-child{grid-column:span 2;grid-row:span 2;font-size:52px}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.speclist{display:grid;grid-template-columns:150px 1fr;font-size:13.5px}
.speclist dt{padding:9px 0;color:var(--ink-muted);font-weight:600;border-bottom:1px solid var(--line)}
.speclist dd{padding:8px 0;border-bottom:1px solid var(--line);word-break:break-word}
/* ข้อความกำหนดเอง ห้ามตัดบรรทัด — เก็บดิบและเลื่อนแนวนอนแทน */
.pre{white-space:pre;overflow-x:auto;font-size:13px;background:var(--surface-alt);border-radius:16px;padding:10px;border:1px solid var(--line);font-family:var(--font-body)}
/* ---------- หน้ารายละเอียดสินค้า ---------- */
/* รูปเป็นภาพประกอบ ไม่ใช่พระเอกของหน้า — ตรึงกว้าง 300px ทรงจัตุรัส
ข้อมูลที่ทีมขายต้องใช้ตอบลูกค้าจึงขึ้นมาอยู่ระดับสายตาเดียวกับรูป ไม่ถูกดันลงไปใต้จอ */
.phero{display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.pshot{min-width:0}
.pshot .media{border-radius:20px}
.pfacts{display:flex;flex-direction:column;gap:14px;min-width:0}
/* รูปการเก็บรักษา (28 ก.ย. 2569) — ฟอร์มแก้ไข (.keepbox) และหน้ารายละเอียด (.keepshow ใช้ช่องรูปของ .svcimgs) */
/* เมนูเลือกขนาดก่อนคัดลอกการ์ดสินค้า (28 ก.ย. 2569) — app.js openSizePick · position:fixed วางใต้ปุ่ม */
.sizepick{position:fixed;z-index:120;min-width:220px;max-width:300px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
box-shadow:0 10px 30px rgba(40,20,25,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.sizepick-h{font-size:12px;font-weight:700;color:var(--ink-muted);padding:6px 10px 4px}
.sizepick button{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;background:none;border-radius:10px;padding:8px 10px;min-height:38px;font-size:14px;color:var(--ink);cursor:pointer}
.sizepick button .s{flex:1;font-weight:700}
.sizepick button .p{font-family:var(--font-mono);font-size:13px;color:var(--ink-muted);white-space:nowrap}
.sizepick button.all{border-bottom:1px dashed var(--line);border-radius:10px 10px 0 0}
.sizepick button:hover,.sizepick button:focus-visible{background:var(--blush);outline:none}
.keepbox{margin-top:10px;border:1px dashed var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--surface-alt)}
.keephead{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.keepgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.keepimg{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.keepimg img{display:block;width:100%;aspect-ratio:1414/2000;object-fit:cover;object-position:top}
.keepimg .keepdel{position:absolute;right:6px;top:6px;width:30px;height:30px;font-size:12px;color:var(--danger);background:rgba(255,255,255,.94)}
.keepimg .keepsrc{position:absolute;left:6px;bottom:6px;font-size:10.5px;font-weight:600;background:rgba(255,255,255,.92);border-radius:var(--pill);padding:1px 7px}
.keepacts{display:flex;gap:8px;flex-wrap:wrap}
.keepshow{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.keepshow .copychip.keepall{width:auto;align-self:flex-start;min-height:36px;padding:6px 14px;font-size:13px}
.keepshow .svcimgs{grid-template-columns:repeat(auto-fill,minmax(150px,200px))}
/* ตารางขนาด & ราคาข้างรูป (28 ก.ย. 2569) — ทับสไตล์ th/td ของตารางหน้าจอ (sticky · padding ใหญ่) */
.pdtab{border:1px solid var(--line);border-radius:14px;overflow:auto;background:var(--surface);margin-top:4px}
.pdtab table{width:100%;font-size:14px;font-variant-numeric:tabular-nums}
.pdtab th{position:static;padding:8px 12px;font-size:12px;letter-spacing:.02em;color:var(--ink-muted);background:var(--surface-alt);border-bottom:1px solid var(--line)}
.pdtab td{padding:9px 12px;border-bottom:1px dashed var(--line)}
.pdtab tbody tr:last-child td{border-bottom:none}
.pdtab .num{text-align:right}
.pdtab .sz b{font-weight:700}
.pdtab .sz small{font-size:12px;color:var(--ink-muted)}
.pdtab .pr{font-weight:700;font-size:15.5px}
.pdtab .gp{color:var(--ink-muted)}
.plabel{font-size:11.5px;font-weight:700;color:var(--ink-muted);margin-bottom:4px}
.pchips{display:flex;flex-wrap:wrap;gap:7px}
.pchip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--pill);
border:1px solid var(--line);background:var(--surface-alt);font-size:12.5px;line-height:1.4}
.pchip b{font-weight:700}
.pricebig{font-family:var(--font-display);font-weight:700;font-size:27px;line-height:1.2}
.pricebig .unit{font-size:15px;font-weight:500;color:var(--ink-muted)}
.pfact{display:flex;gap:10px;font-size:13.5px;line-height:1.6;min-width:0}
.pfact .k{flex:none;width:96px;color:var(--ink-muted);font-weight:600}
.pfact .v{min-width:0;overflow-wrap:anywhere}
/* ค่าที่ยังไม่กรอก — จางแต่ยังเห็นว่ามีช่องนี้อยู่ ไม่ต้องตะโกนด้วยสีส้มทุกช่อง */
.dash{color:var(--ink-muted)}
.warnbox{display:flex;gap:10px;padding:11px 14px;border-radius:16px;
background:#FBEFD5;color:#7A4E00;font-size:13px;line-height:1.65}
/* ปุ่มคัดลอกข้างหัวข้อ / หัวกล่อง ในหน้ารายละเอียดสินค้า (28 ก.ย. 2569) */
.ptext-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:2px}
.ptext-h .plabel{margin:0}
.copyicon.sm{width:30px;height:30px;font-size:12px;flex:none}
.panel-head .copychip.copyall{width:auto;min-height:34px;padding:5px 14px;font-size:13px}
.ptext + .ptext{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ptext .rawtext{font-size:14px}
/* สรุปสิ่งที่ยังขาดเป็นชิป กวาดตาได้เร็วกว่าประโยคยาวคั่นด้วยจุด */
.misslist .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.misslist .chips{display:flex;flex-wrap:wrap;gap:6px}
.misslist .chip{background:rgba(255,255,255,.72);border:1px solid var(--blush-deep);
border-radius:var(--pill);padding:2px 10px;font-size:12px}
@media (max-width:900px){
.phero{grid-template-columns:1fr;gap:16px}
.pshot{max-width:320px}
}
.mobilerail{display:none}
/* ---------- Tabs ---------- */
.tabs{display:flex;gap:2px;overflow-x:auto;border-bottom:1px solid var(--line);margin-bottom:14px}
.tabs button,.tabs a{padding:10px 15px;font-size:14px;font-weight:600;color:var(--ink-muted);border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none;background:none}
.tabs button:hover,.tabs a:hover{color:var(--ink)}
.tabs .on{color:var(--ink);border-bottom-color:var(--ink);font-weight:700}
.formgrid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.formgrid .full{grid-column:1/-1}
.req{color:var(--danger)}
.helper{font-size:11.5px;color:var(--ink-muted);margin-top:3px}
.repeat-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.repeat-row .inp{flex:1}
.repeat-row .w-pct{width:110px;flex:none}
/* ---------- ช่องอัปโหลดรูปเดี่ยว ---------- */
.imgfield{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.imgfield-preview{flex:none;width:180px;aspect-ratio:16/10;border-radius:var(--radius-sm);overflow:hidden;
background:var(--surface-alt);border:1.5px solid var(--line);display:grid;place-items:center;position:relative}
.imgfield-preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imgfield-empty{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--ink-muted);font-size:12px;font-weight:600}
.imgfield-empty i{font-size:26px}
.imgfield-actions{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.imgfield-remove{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--danger)}
.imgfield-actions .helper{margin:0}
/* หน้าโปรไฟล์: ตัวอย่างรูป Avatar เป็นวงกลมขนาดเดียวกับที่เก็บจริงย่อส่วน */
.avatarprev{flex:none;width:120px;height:120px;border-radius:50%;overflow:hidden;background:var(--surface-alt);
border:1.5px solid var(--line);display:grid;place-items:center}
.avatarprev img{width:100%;height:100%;object-fit:cover;display:block}
.avatarprev.none{border-style:dashed}
.avatarprev.sm{width:56px;height:56px}
/* กล่องที่เด้งลงมาจากปุ่มในแถวตาราง (ตั้งรหัสผ่านใหม่ · รูปโปรไฟล์) */
.rowdrop{position:absolute;right:0;top:42px;z-index:30;background:var(--surface);border:1.5px solid var(--line);
border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:12px;width:250px;max-width:calc(100vw - 32px)}
.avatarfield .rowacts{flex-wrap:wrap}
/* คู่ป้าย-ค่า อ่านอย่างเดียว (หน้าโปรไฟล์) */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:8px 18px;margin:0;font-size:14px}
.kv dt{color:var(--ink-muted);font-weight:600}
.kv dd{margin:0;color:var(--ink)}
@media (max-width:520px){.kv{grid-template-columns:1fr;gap:2px}.kv dd{margin-bottom:8px}}
/* ---------- ตัวแก้ไขข้อความ (จำกัดปุ่มตามสเปกเฟส 6) ---------- */
.editor{border:1.5px solid #CFC2C2;border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.editor:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.editor-bar{display:flex;gap:3px;flex-wrap:wrap;align-items:center;padding:7px 9px;
border-bottom:1px solid var(--line);background:var(--surface-alt)}
.editor-bar button{min-width:32px;height:32px;padding:0 8px;border-radius:var(--pill);
font-size:13px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.editor-bar button:hover{background:var(--hover-bg);color:var(--hover-ink)}
.editor-bar button.on{background:var(--blush)}
.editor-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.editor-area{padding:12px 14px;min-height:190px;outline:none;font-size:14.5px;line-height:1.75}
.editor-area:empty::before{content:"พิมพ์เนื้อหาที่นี่…";color:var(--ink-muted)}
.editor-area h2{font-size:19px;margin:14px 0 6px}
.editor-area h3{font-size:16px;margin:12px 0 5px}
.editor-area h2:first-child,.editor-area h3:first-child,.editor-area p:first-child{margin-top:0}
.editor-area p{margin:0 0 9px}
.editor-area ul,.editor-area ol{margin:0 0 9px;padding-left:22px}
.editor-area li{margin-bottom:3px}
.editor-area a{color:var(--accent)}
.editor-area table{width:auto;min-width:60%;border-collapse:collapse;margin:10px 0;white-space:normal}
.editor-area th,.editor-area td{border:1px solid var(--line);padding:6px 10px;font-size:14px}
.editor-area th{background:var(--surface-alt);font-weight:700}
/* เนื้อหาที่บันทึกแล้ว แสดงผลด้วยกฎชุดเดียวกับตอนแก้ไข เพื่อไม่ให้หน้าตาต่างกัน */
.richtext{font-size:14px;line-height:1.75}
.richtext h2{font-size:18px;margin:14px 0 6px}
.richtext h3{font-size:15.5px;margin:12px 0 5px}
.richtext p{margin:0 0 9px}
.richtext ul,.richtext ol{margin:0 0 9px;padding-left:22px}
.richtext table{border-collapse:collapse;margin:10px 0;white-space:normal}
.richtext th,.richtext td{border:1px solid var(--line);padding:6px 10px}
.richtext th{background:var(--surface-alt)}
/* ---------- Search palette ---------- */
.overlay{position:fixed;inset:0;background:rgba(24,21,18,.42);z-index:300;display:grid;place-items:start center;padding:80px 16px}
.overlay[hidden]{display:none}
.palette{width:100%;max-width:600px;background:var(--surface);border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.palette>input{width:100%;border:none;border-bottom:1px solid var(--line);padding:15px 18px;font-size:16px;outline:none;background:var(--surface);font-weight:600}
.presults{max-height:390px;overflow:auto}
.presults .g{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-muted);padding:9px 16px 4px;font-weight:700}
.presults a{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 16px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none}
.presults a:hover,.presults a.cur{background:var(--blush);color:var(--ink)}
.presults mark{background:var(--blush);color:inherit;border-radius:2px;padding:0 1px;font-weight:700}
.presults a.cur mark{background:#fff}
.presults .sub{font-size:12px;color:var(--ink-muted);margin-left:auto;flex:none}
.pfoot{border-top:1px solid var(--line);padding:8px 16px;font-size:11.5px;color:var(--ink-muted);display:flex;gap:14px;flex-wrap:wrap}
.pfoot kbd{font-family:var(--font-mono);border:1px solid var(--line);border-radius:6px;padding:0 5px;background:var(--surface-alt)}
/* ---------- โปรโมชั่น ----------
⚠ ข้อความจากตารางการตลาดจัดบรรทัดมาแล้ว ต้องแสดงตามนั้นทุกตัว
ใช้ pre-wrap ไม่ใช่ nl2br เพื่อคงทั้งบรรทัดว่างและช่องว่างต้นบรรทัด */
.rawtext{white-space:pre-wrap;word-break:break-word;line-height:1.75;font-size:14.5px;margin:0}
/* รูปโปรโมชั่นในหน้ารายละเอียด — เป็นรูปย่อในคอลัมน์ข้าง ไม่ใช่ภาพเปิดหน้า
⚠ ต้องเป็น contain ไม่ใช่ cover — โปสเตอร์มีตัวหนังสืออยู่ในรูป ครอบตัดแล้วเงื่อนไขหาย */
.promothumbs{display:flex;gap:8px;flex-wrap:wrap}
.promothumbs a{width:76px;height:76px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
background:var(--surface-alt);display:block;flex:none}
.promothumbs a:hover{border-color:var(--accent)}
.promothumbs img{width:100%;height:100%;object-fit:contain;display:block}
/* ---------- ขั้นตอนการปฏิบัติงานของโปรโมชั่น: ตัวแก้ไข + หน้าแสดงผล (26 ก.ย. 2569) ----------
รูปในเนื้อหาต้องไม่ล้นกรอบ และแยกจากข้อความชัด — มักเป็นภาพหน้าจอ POS ที่ต้องอ่านปุ่มได้ */
.steps-area{min-height:220px}
.steps-area img,.steps-body img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);margin:6px 0}
.steps-body{font-size:14.5px;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.steps-body > :first-child{margin-top:0}
.steps-body p{margin:0 0 4px}
.steps-body h3{font-size:15px;margin:14px 0 6px}
.steps-body ul,.steps-body ol{margin:4px 0 8px;padding-left:22px}
.steps-body table{border-collapse:collapse;margin:8px 0;max-width:100%;display:block;overflow-x:auto}
.steps-body th,.steps-body td{border:1px solid var(--line);padding:5px 9px;text-align:left}
.editor-bar button.busy{opacity:.55;pointer-events:none}
/* ---------- ตัวแก้ไขกลาง: สีข้อความ · ปรับขนาดรูป (26 ก.ย. 2569) ---------- */
.editor-colors{position:relative;display:inline-flex}
.editor-colors [data-color-toggle]{position:relative}
.editor-colors .swatchbar{position:absolute;left:9px;right:9px;bottom:5px;height:3px;border-radius:2px;
background:var(--last, var(--ink))}
.editor-pop{position:absolute;top:38px;left:0;z-index:40;display:grid;grid-template-columns:repeat(3,30px);gap:6px;
padding:9px;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg)}
.editor-pop[hidden]{display:none}
.editor-bar .editor-pop .swatch{min-width:0;width:30px;height:30px;padding:0;border-radius:50%;
background:var(--sw);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.editor-bar .editor-pop .swatch:hover{box-shadow:0 0 0 2px var(--ink)}
.editor-bar .editor-pop .swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.editor-bar .editor-pop .swatch.reset{background:var(--surface);color:var(--ink-muted);font-size:12px;display:grid;place-items:center}
.editor-imgbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:7px 9px;
border-bottom:1px solid var(--line);background:var(--surface-alt);font-size:12.5px}
.editor-imgbar .lbl{font-weight:700;color:var(--ink-muted);margin-right:2px}
.editor-imgbar button{height:28px;padding:0 10px;border-radius:var(--pill);border:1px solid var(--line);
background:var(--surface);font-size:12px;font-weight:700;color:var(--ink);cursor:pointer}
.editor-imgbar button:hover{background:var(--hover-bg);color:var(--hover-ink)}
.editor-imgbar button.danger{color:var(--danger)}
.editor-imgbar input[type=range]{width:120px;accent-color:var(--accent)}
.editor-imgbar output{min-width:38px;font-variant-numeric:tabular-nums;font-weight:700}
.editor-area img{display:block;max-width:100%;height:auto;border-radius:10px;border:1px solid var(--line);margin:6px 0;cursor:pointer}
.editor-area img.is-sel{outline:3px solid var(--accent);outline-offset:2px}
/* ---------- คูปอง (26 ก.ย. 2569) ----------
ใหญ่กว่ารูปโปรโมชั่นโดยตั้งใจ — ตัวหนังสือบนคูปอง (รหัส · เงื่อนไข · วันหมดอายุ) ต้องอ่านออกก่อนกดส่ง
กรอบเส้นประ = ภาษาภาพของ "คูปองตัดได้" ให้แยกจากโปสเตอร์โปรโมชั่นได้ทันที
⚠ ใช้เฉพาะตัวแปรสีของธีม (กติกา 13 สี) */
/* หน้ารายละเอียด: ใบละแถวเต็มคอลัมน์ข้าง — ลองสองใบต่อแถวแล้ว รูปเหลือ ~130px อ่านตัวหนังสือบนคูปองไม่ออก
และปุ่ม "คัดลอกใบที่ N" ตัดสองบรรทัด (ตรวจด้วยภาพจริง 26 ก.ย.) */
.coupongrid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.coupongrid.edit{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.coupon{margin:0;position:relative;display:flex;flex-direction:column;gap:6px;padding:8px;
border:1.5px dashed var(--blush-deep);border-radius:var(--radius-sm);background:var(--surface)}
.coupon > a,.coupon > img{display:block;border-radius:10px;overflow:hidden;background:var(--surface-alt);aspect-ratio:4/3}
.coupon img{width:100%;height:100%;object-fit:contain;display:block}
.coupon > a:hover{outline:2px solid var(--accent);outline-offset:1px}
.coupon > a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.coupon figcaption{font-size:12px;font-weight:600;color:var(--ink-muted);text-align:center}
.coupondel{position:absolute;right:12px;top:12px;z-index:2}
/* ป้ายคูปองในหน้ารายการ — เป็นลิงก์ตรงไปกรอบคูปอง */
.b-coupon{background:var(--blush);color:var(--ink);border:1px dashed var(--blush-deep);text-decoration:none}
a.b-coupon:hover{background:var(--hover-bg);color:var(--hover-ink)}
.promotable .pcoupon{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
color:var(--ink);background:var(--blush);border:1px dashed var(--blush-deep);border-radius:8px;
padding:1px 7px;text-decoration:none;white-space:nowrap}
.promotable .pcoupon:hover{background:var(--hover-bg);color:var(--hover-ink)}
/* การ์ดในหน้ารายการก็ไม่ครอบตัดด้วยเหตุผลเดียวกัน — กรอบยังสูงเท่ากันทุกใบ */
.promoshot{background:var(--surface-alt)}
.card .promoshot > img,
.promoshot.carousel .track img{object-fit:contain}
.card .sum{font-size:13px;color:var(--ink-muted);line-height:1.55;margin:2px 0 0}
.promoex{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7}
.promoex li{margin-bottom:2px}
/* ช่องข้อมูลบนการ์ดประเภทโปรโมชั่น — รายละเอียด / เงื่อนไข / ตัวอย่าง
ป้ายกำกับต้องเล็กกว่าเนื้อหาชัดเจน ไม่งั้นการ์ดอ่านเหมือนรายการหัวข้อล้วน */
.typefield{margin-top:9px;min-width:0}
.typefield .lb{display:flex;align-items:center;gap:6px;margin:0 0 3px;
font-size:12px;font-weight:700;color:var(--ink-muted)}
.typefield .rawtext{font-size:13.5px;line-height:1.7}
.typefield>.todo{font-size:11.5px}
/* ---------- หมวดหมู่สินค้า ---------- */
.catform{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.catform .field{margin:0;flex:1;min-width:180px}
.iconpick{display:flex;gap:5px;flex-wrap:wrap;max-width:330px}
.iconpick button{width:34px;height:34px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
display:grid;place-items:center;font-size:14px;color:var(--ink)}
.iconpick button:hover{background:var(--hover-bg);color:var(--hover-ink);border-color:var(--hover-bg)}
.iconpick button.on{background:var(--blush);border-color:var(--blush-deep);color:var(--ink)}
@media (max-width:640px){
.catform{flex-direction:column;align-items:stretch}
.catform .field{max-width:none!important}
}
/* ---------- แถบบันทึกท้ายฟอร์ม ----------
⚠ บนมือถือต้องเกาะ "เหนือ" แถบเมนูล่าง (ซึ่งเป็น sticky bottom:0 เหมือนกันแต่ z สูงกว่า)
ถ้าใช้ bottom:0 เฉยๆ ปุ่มบันทึกจะถูกเมนูล่างทับจนกดไม่ได้เลย */
.savebar{position:sticky;bottom:0;z-index:20}
@media (max-width:900px){
.savebar{bottom:calc(69px + env(safe-area-inset-bottom))}
}
/* ---------- Dialog (ยืนยันการลบ) ---------- */
dialog.dlg{border:1.5px solid var(--line);border-radius:var(--radius);padding:0;box-shadow:var(--shadow-lg);width:min(430px,calc(100vw - 32px));background:var(--surface);color:var(--ink)}
/* ⚠ กล่องรูปชุดบนมือถือสูงเกินจอได้ — ถ้าไม่คุมความสูง ปุ่มคัดลอกจะหลุดออกนอกจอ
จึงให้หัวและท้ายอยู่กับที่ แล้วให้เนื้อในเลื่อนแทน */
/* margin:auto จำเป็น เพราะ reset ของระบบตั้ง margin:0 ทับค่าที่เบราว์เซอร์ใช้จัดกล่องให้อยู่กลางจอ */
dialog.dlg[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 32px);margin:auto}
dialog.dlg::backdrop{background:rgba(24,21,18,.45)}
dialog.dlg .dlg-hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;flex:none}
dialog.dlg .dlg-bd{padding:16px;overflow:auto;min-height:0}
dialog.dlg .dlg-ft{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
/* ---------- Misc ---------- */
.empty{text-align:center;padding:44px 20px;color:var(--ink-muted);font-weight:600}
.empty .big{font-size:38px;margin-bottom:8px}
.skel{background:linear-gradient(90deg,var(--surface-alt) 25%,#F6EAEA 37%,var(--surface-alt) 63%);
background-size:400% 100%;animation:shimmer 1.3s ease infinite;border-radius:var(--radius-sm);height:14px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;box-shadow:var(--shadow-lg);background:var(--ink);color:#fff;padding:9px 16px;border-radius:999px;font-size:13.5px;z-index:500;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-4px)}
/* ปุ่ม/ลิงก์ที่กดแล้วกำลังรอ server (data-busy ใน app.js) — กดซ้ำไม่ได้ ไอคอนเป็นวงหมุน */
.is-busy{pointer-events:none;opacity:.72;cursor:progress}
.swatch{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.swatch input[type=color]{width:44px;height:32px;border:1px solid var(--line);border-radius:var(--pill);background:none;padding:2px;flex:none}
.swatch .sp{flex:1;min-width:0;font-weight:600;margin:0;cursor:pointer}
.swatch .hexbox{width:104px;flex:none;padding:5px 12px;min-height:32px;font-size:13px;text-transform:uppercase}
.swatch .hexbox.bad{border-color:var(--danger);background:#FDF3F1}
@media (max-width:520px){
.swatch{flex-wrap:wrap}
.swatch .sp{flex:1 0 100%;order:-1}
}
.diff{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:12.5px}
.diff>div{border:1px solid var(--line);border-radius:16px;padding:10px}
.diff .del{background:#F9E7E3} .diff .add{background:var(--success-soft)}
.diff dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.diff dt{color:var(--ink-muted);font-weight:600}
.diff dd{word-break:break-word}
.tree{font-size:13.5px;line-height:1.9}
.tree ul{list-style:none;padding-left:19px;border-left:1px dashed var(--line);margin-left:5px}
.tree li::before{content:"└ ";color:var(--line)}
.tree .rt{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);margin-left:6px}
.rolegrid{overflow:auto}
.rolegrid td{text-align:center}
.rolegrid td:first-child,.rolegrid th:first-child{text-align:left;white-space:normal;min-width:190px}
.yes{color:var(--success);font-weight:700} .no{color:#C9BDBD}
/* หน้ารายละเอียดสินค้าที่สิ้นสุดการวางขาย — กล่องเทาบนสุด ให้ CS เห็นก่อนตอบลูกค้า */
.sellend{display:flex;align-items:center;gap:12px;background:#E9E7E7;border:1px solid #CBC6C6;color:#3F3B3B;
border-radius:var(--radius);padding:12px 15px;margin-bottom:14px}
.sellend > i{font-size:20px;color:#6E6868}
.sellend b{display:block;font-size:15px}
.sellend span{font-size:13px;color:#5E5A5A}
.pchip.is-ended{background:#E2DFDF;border-color:#CBC6C6;color:#4A4545;font-weight:700}
.sellcell{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
.sellcell small{font-size:11.5px;color:var(--ink-muted)}
.note{background:var(--blush);border:1px solid var(--blush-deep);color:var(--ink);border-radius:var(--radius);padding:11px 13px;font-size:13px;margin-bottom:14px}
/* แถบแหล่งข้อมูลบนสุดของหน้า (11 ต.ค. 2569 ตามลูกค้า) — ซิงก์/นำเข้า แยกจากปุ่มเครื่องมือหัวหน้า
ใช้ร่วม: ข้อมูลสินค้า (Google Sheet) · ตารางสายส่ง (Google Sheet) · สาขา (web-order)
ปกติ = พื้นชมพูอ่อน · .is-on = กำลังดูชุดที่กรองจากแถบนี้ (เขียว) · .is-alert = มีเรื่องต้องจัดการ (เหลือง) */
.srcstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 16px;padding:8px 10px 8px 14px;border-radius:12px;
background:var(--surface-alt);border:1px solid var(--blush);font-size:13px;color:var(--ink-muted)}
.srcstrip form{margin:0}
.srcstrip-txt{flex:1;min-width:220px}
.srcstrip-txt b{color:var(--ink)}
.srcstrip-ok{color:#1E6B3A;font-weight:600;white-space:nowrap}
.srcstrip-err{color:#A12828;font-weight:600;white-space:nowrap}
.srcstrip.is-on{background:#E7F6EC;border-color:#BFE3CB;color:#1E6B3A;font-size:13.5px}
.srcstrip.is-on .srcstrip-txt b{color:#14532B}
.srcstrip.is-alert{background:#FFF3D6;border-color:#F1D9A0;color:#8A5A00;font-size:13.5px}
.srcstrip.is-alert .srcstrip-txt b{color:#6B4500}
/* ---------- ทดสอบวาง (Paste Lab) ---------- */
.plab{position:fixed;right:18px;bottom:18px;width:370px;max-width:calc(100vw - 24px);z-index:350;
background:var(--surface);border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);
overflow:hidden;display:none}
.plab.on{display:block}
.plab-hd{display:flex;align-items:center;gap:9px;padding:10px 14px;background:var(--blush);
border-bottom:1px solid var(--blush-deep);font-family:var(--font-display);font-weight:700;font-size:14.5px}
.plab-hd .sp{flex:1}
.plab-hd button{width:28px;height:28px;border-radius:var(--pill);display:grid;place-items:center;font-size:12px;color:var(--ink)}
.plab-hd button:hover{background:var(--hover-bg);color:var(--hover-ink)}
.plab-bd{padding:12px 14px;max-height:56vh;overflow:auto}
.plab.min .plab-bd,.plab.min .plab-ft{display:none}
.plab-drop{border:1.5px dashed #CFC2C2;border-radius:16px;min-height:88px;padding:10px 12px;font-size:14px;
outline:none;line-height:1.6;word-break:break-word}
.plab-drop:focus{border-style:solid;border-color:var(--ink)}
.plab-drop:empty::before{content:attr(data-ph);color:var(--ink-muted);font-weight:500;white-space:pre-line}
.plab-drop img{max-width:100%;border-radius:12px;margin:5px 0;display:block}
.plab-lb{font-size:11.5px;font-weight:700;letter-spacing:.03em;color:var(--ink-muted);
font-family:var(--font-display);margin:12px 0 5px;display:flex;align-items:center;gap:6px}
.chatbg{background:#EFEAE6;border-radius:16px;padding:11px;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.bubble{background:#fff;border:1px solid rgba(0,0,0,.05);border-radius:16px 16px 4px 16px;padding:9px 12px;
font-size:14px;white-space:pre-wrap;word-break:break-word;max-width:92%;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.bubble img{max-width:100%;border-radius:10px;display:block;margin:4px 0}
.bubble.empty{color:var(--ink-muted);background:transparent;border:1px dashed #CFC2C2;box-shadow:none;padding:9px 12px}
.plab-stats{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.plab-stats span{background:var(--surface-alt);border-radius:var(--pill);padding:2px 10px;font-size:12px;font-weight:600}
.plab-stats span b{font-family:var(--font-mono)}
.plab-warn{margin-top:9px;background:#FBEFD5;border:1px solid #E7D28E;border-radius:14px;padding:8px 11px;font-size:12.5px;font-weight:600;color:#7A4E00}
.plab-ft{display:flex;gap:7px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
/* ============================================================
Responsive — Desktop 1440 / iPad 820 / Mobile 390 / ต่ำสุด 360
============================================================ */
/* จอแคบ: ซ่อนป้ายปุ่ม เหลือไอคอน แล้วซ่อน kbd เป็นลำดับถัดไป */
@media (max-width:1080px){.topbar .btn .lbl{display:none}}
@media (max-width:820px){.searchbtn kbd{display:none}}
@media (max-width:900px){
.shell{grid-template-columns:1fr}
aside{display:none}
.detail{grid-template-columns:1fr}
.cols2{grid-template-columns:1fr}
.page{padding:14px 12px 92px}
.botnav{display:grid;position:sticky;bottom:0;z-index:55;grid-template-columns:repeat(5,1fr);
background:var(--surface);border-top:1px solid var(--line);
padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.formgrid{grid-template-columns:1fr}
.gallery{grid-template-columns:repeat(3,1fr)}
.diff{grid-template-columns:1fr}
/* CopyRail กลายเป็นแถบล่างติดหน้าจอ */
.rail.desk{display:none}
/* ⚠ ต้องเกาะ "เหนือ" แถบเมนูล่าง ไม่ใช่ bottom:0 เพราะ .botnav ก็ sticky bottom:0 (z สูงกว่า)
ถ้าตั้งเป็น 0 แถบคัดลอกจะถูกเมนูล่างทับจนกดไม่ได้เลยบนมือถือ */
.mobilerail{display:flex;position:sticky;bottom:calc(69px + env(safe-area-inset-bottom));gap:6px;
overflow-x:auto;background:var(--surface);border-top:1px solid var(--line);
border-bottom:1px solid var(--line);padding:8px 10px;margin:0 -12px -92px;z-index:50}
.mobilerail .copychip{width:auto;flex:none}
}
@media (max-width:640px){
.topbar{padding:9px 12px;gap:8px}
.cattab{padding:7px 13px;font-size:13.5px;min-height:40px}
.sortpick>span{display:none}
.speclist{grid-template-columns:118px 1fr;font-size:13px}
.usermenu .who{display:none}
.page-head h1{font-size:20px}
}
@media (max-width:560px){.searchbtn .txt .full{display:none}.searchbtn .txt .short{display:inline}}
@media (max-width:520px){
.plab{right:10px;left:10px;bottom:10px;width:auto}
.gallery{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- ผังระบบ (/sitemap) ----------
หน้าอธิบายระบบสำหรับผู้บริหาร — เน้นอ่านง่ายและพิมพ์ออกกระดาษได้
ทุกน้ำหนักตัวอักษรไม่เกิน 700 ตามข้อกำหนดของงาน */
.smhero{background:var(--surface-alt)}
.smlead{margin:0 0 16px;max-width:80ch;font-size:16.5px;line-height:1.8}
.smlead b{font-weight:700}
.smvalue{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:12px}
.smv{display:flex;gap:11px;align-items:flex-start;min-width:0;
padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.smv .ic{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
background:var(--accent-soft);color:var(--accent);font-size:15px}
.smv b{display:block;font-weight:700;font-size:14.5px;margin-bottom:3px}
.smv span{display:block;font-size:13.5px;line-height:1.65;color:var(--ink-muted)}
.smflow{list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px}
.smflow li{position:relative;min-width:0;padding:18px 15px 15px;
border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-alt)}
.smflow .step{position:absolute;top:-11px;left:15px;width:26px;height:26px;border-radius:var(--pill);
background:var(--accent);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center}
.smflow .ic{display:block;margin:4px 0 9px;font-size:19px;color:var(--accent)}
.smflow b{display:block;font-weight:700;font-size:15px;margin-bottom:5px}
.smflow p{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-muted)}
.smgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(282px,1fr));gap:12px}
.smitem{display:flex;flex-direction:column;gap:8px;min-width:0;padding:13px 14px;
border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.smitem .hd{display:flex;align-items:center;gap:10px;min-width:0;color:inherit;text-decoration:none}
.smitem .hd .ic{flex:none;width:31px;height:31px;border-radius:11px;display:grid;place-items:center;
background:var(--accent-soft);color:var(--accent);font-size:14px}
.smitem .hd b{min-width:0;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.smitem .hd .go{margin-left:auto;flex:none;color:var(--accent);opacity:0;transition:opacity .15s}
a.hd:hover b{color:var(--accent)}
a.hd:hover .go{opacity:1}
.smitem .what{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink-muted)}
.smitem .mrow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:2px}
.smitem .who{display:inline-flex;align-items:center;gap:5px;min-width:0;font-size:12.5px;color:var(--ink-muted)}
.smme td{background:var(--accent-soft)}
.smchips{display:flex;flex-wrap:wrap;gap:8px}
.smchip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;font-size:13.5px;
border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);
color:inherit;text-decoration:none}
.smchip:hover{background:var(--hover-bg);color:var(--hover-ink);border-color:var(--hover-bg)}
/* ---------- รวมคำถามตอบ (FAQ) ----------
แถวหนึ่ง = หนึ่งคำถาม กวาดตาลงมาทีเดียวเจอ ไม่ต้องกางทุกข้อเพื่อดูว่าใช่ไหม
ปุ่มคัดลอกอยู่ในแถวเลย เพราะงานจริงคือ "เจอ → คัดลอก → วางในแชต" ไม่ใช่ "เจอ → อ่าน" */
.faqbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 12px}
.faqcats{display:flex;flex-wrap:wrap;gap:7px}
.faqcat{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;font-size:13.5px;font-weight:600;
border:1px solid var(--line);border-radius:var(--pill);background:var(--surface);color:inherit;text-decoration:none}
.faqcat span{font-size:12px;font-weight:700;color:var(--ink-muted);font-family:var(--font-mono)}
.faqcat:hover{background:var(--hover-bg);color:var(--hover-ink);border-color:var(--hover-bg)}
.faqcat:hover span{color:rgba(255,255,255,.8)}
.faqcat.on{background:var(--blush);border-color:var(--blush-deep)}
.faqcat.on span{color:var(--ink)}
/* ข้อความสำเร็จรูป (layout reply · 28 ก.ย. 2569) — ชิปขั้นตอนใช้ .faqcat · การ์ดข้อความกดที่ข้อความ = คัดลอก */
.qrno{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--pill);background:var(--ink);color:#fff;
font-size:11.5px;font-weight:700;font-family:var(--font-mono)}
.faqcat .qrno{min-width:18px;height:18px;font-size:10.5px}
/* hover = พื้นดำ (11 ต.ค. 2569 ลูกค้าแจ้ง) — วงเลขขั้นตอนกลับเป็นพื้นขาว · ตัวเลขจำนวนของแท็บที่เลือกอยู่ต้องสว่างด้วย ไม่งั้นดำกลืนพื้น */
.faqcat:hover .qrno{background:#fff;color:var(--ink)}
.faqcat.on:hover span{color:rgba(255,255,255,.8)}
.qrgroup{margin-top:18px}
.qrhead{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 10px}
.qrhead span{font-size:12.5px;font-weight:600;color:var(--ink-muted)}
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.qrcard{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);padding:12px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow);min-width:0}
.qrtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.qrtop b{font-family:var(--font-display);font-size:14.5px}
.qrtext{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;background:var(--surface-alt);border:1px solid var(--line);border-radius:12px;
padding:10px 12px;font-size:14px;line-height:1.7;color:var(--ink);flex:1}
.qrtext .t{white-space:pre-wrap;word-break:break-word}
/* ข้อความสำเร็จรูปแบบ HTML (12 ต.ค. 2569 · ตัวแก้ไข + ลิงก์) — ย่อหน้าละบรรทัดเหมือนข้อความล้วนเดิม ไม่มีช่องไฟ
*/
.qrtext .qrhtml{white-space:normal}
.qrhtml p{margin:0}
.qrhtml ul,.qrhtml ol{margin:0;padding-left:20px}
.qrhtml a{color:var(--accent);text-decoration:underline;overflow-wrap:anywhere}
.qrimgs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.qrimg{position:relative;display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-alt)}
.qrimg img{width:100%;height:100%;object-fit:cover;display:block}
.qrimg .more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.45);color:#fff;font-weight:700}
.qrfoot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.qrdate{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.qrfoot .copychip.qrcopy{width:auto;min-height:36px;padding:6px 14px;font-size:13px}
/* หมวดหมู่ที่จัดการได้ (ฟอร์ม + หน้าจัดการ · 28 ก.ย. 2569) */
.catpick{display:flex;gap:8px;align-items:center}
.catpick select{flex:1;min-width:0}
.catadd{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.catadd .inp{flex:1;min-width:220px}
.catlist{list-style:none;margin:14px 0 0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.catlist li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.catlist li:first-child{border-top:none}
.catlist .nm{font-weight:700;flex:1;min-width:0}
.catlist .ct{font-size:12.5px;color:var(--ink-muted);white-space:nowrap}
.catlist .acts{display:flex;gap:4px}
.catlist .acts form{margin:0}
.catlist .copyicon:disabled{opacity:.35;cursor:not-allowed}
.catlist .catdel:not(:disabled){color:var(--danger)}
/* ⚠ ห้ามใช้ flex กับบรรทัดนี้ — จะกลายเป็น flex item แล้วตัวเลขจะหลุดไปคนละบรรทัดกับข้อความบนจอแคบ */
.faqcount{margin:0;font-size:13px;line-height:1.7;color:var(--ink-muted)}
.faqcount b{color:var(--ink)}
.faqcount > i{margin-right:5px}
/* แถบบอกว่า "ค้นไม่เจอทั้งคำ ระบบถอยไปหาแบบนี้ให้" — ขึ้นเฉพาะตอนที่ถอยจริงเท่านั้น */
.faqfallback{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:10px 14px;
border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--radius-sm);
background:var(--surface-alt);font-size:13px;line-height:1.8;color:var(--ink)}
.faqfallback.srnote{margin:8px 10px;font-size:13px} /* ในกล่องผลค้นหาด่วน (Ctrl K / ช่องบนสุด) */
.faqfallback > i{color:var(--warn);margin-top:4px;flex:none}
.faqfallback .ft{display:inline-block;background:var(--blush);border-radius:var(--pill);
padding:1px 10px;font-weight:700;margin:0 3px}
.faqlist{display:flex;flex-direction:column}
.faqrow{border-bottom:1px solid var(--line)}
.faqrow:last-child{border-bottom:none}
.faqrow > summary{display:flex;align-items:center;gap:11px;padding:12px 14px;cursor:pointer;list-style:none}
.faqrow > summary::-webkit-details-marker{display:none}
.faqrow > summary:hover{background:var(--surface-alt)}
.faqrow[open] > summary{background:var(--surface-alt)}
.faqrow > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.faqrow .qic{flex:none;width:22px;text-align:center;color:var(--accent)}
.faqrow .qmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.faqrow .qmain b{font-size:14.5px;font-weight:700;line-height:1.5}
/* คำตอบย่อจำกัด 2 บรรทัด ทุกแถวจะได้สูงเท่ากันและกวาดตาลงมาเป็นจังหวะเดียว */
.faqrow .qpeek{font-size:13px;color:var(--ink-muted);line-height:1.6;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* กางแล้วคำตอบเต็มอยู่ข้างล่างแล้ว ไม่ต้องโชว์ตัวย่อซ้ำ */
.faqrow[open] .qpeek{display:none}
.faqrow .qcat{flex:none;font-size:12px;font-weight:600;color:var(--ink-muted);
border:1px solid var(--line);border-radius:var(--pill);padding:3px 10px;white-space:nowrap}
.faqrow .qcaret{flex:none;width:18px;text-align:center;color:var(--ink-muted);transition:transform .18s ease}
.faqrow[open] .qcaret{transform:rotate(180deg)}
.faqrow .qcopy{flex:none;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
border:1px solid var(--blush-deep);background:var(--blush);border-radius:var(--pill);
padding:7px 14px;min-height:38px;font-size:13px;font-weight:700;
transition:transform .18s ease,background .18s ease,border-color .18s ease}
.faqrow .qcopy:hover{background:var(--hover-bg);color:var(--hover-ink);border-color:var(--hover-bg)}
.faqrow .qcopy.done,.faqrow .qcopy.done:hover{background:var(--success-soft);border-color:var(--success);color:var(--ink);transform:scale(1.04)}
.faqrow .qcopy.busy{opacity:.6;pointer-events:none}
.faqa{padding:2px 14px 14px 47px}
.faqtext{font-size:14px;line-height:1.8;white-space:normal}
.faqtext a{color:var(--accent)}
/* ---------- เอกสาร (layout doc) — เกี่ยวกับการบริการ (28 ก.ย. 2569) ----------
หนึ่งรายการ = หนึ่งกล่อง อ่าน/คัดลอกได้เลย · รูปซ้าย (ทั้งใบ ไม่ครอป) เนื้อหาขวา · จอแคบเรียงบนลงล่าง */
.svclist{display:flex;flex-direction:column;gap:16px}
.svcdoc{margin:0}
.svchead{flex-wrap:wrap;row-gap:10px;align-items:center}
.svcic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--blush);color:var(--ink);font-size:16px}
.svctitle{min-width:0}
.svctitle h3{font-family:'Sarabun',var(--font-body);font-weight:700;font-size:17px;line-height:1.35;margin:0}
.svctitle p{margin:2px 0 0;font-size:13px;color:var(--ink-muted)}
.svccopy{display:flex;gap:8px;flex-wrap:wrap}
.svccopy .copychip{width:auto;min-height:38px;padding:7px 15px}
.svccopy .copychip .sub{margin-left:4px}
.svcbody{display:grid;gap:18px}
.svcbody.has-both{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start}
.svcimgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.svcimgs.is-one{grid-template-columns:minmax(0,420px)}
.svcbody:not(.has-both) .svcimgs{grid-template-columns:repeat(auto-fill,minmax(220px,300px))}
.svcimg{margin:0;display:flex;flex-direction:column;gap:6px}
.svcimg a{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--surface-alt);cursor:zoom-in}
.svcimg img{display:block;width:100%;height:auto}
.svcimg figcaption{display:flex;align-items:center;gap:8px}
.svcimg figcaption .n{font-size:12.5px;color:var(--ink-muted);font-weight:600}
.svcimg figcaption .copyicon{margin-left:auto;width:32px;height:32px;font-size:13px}
.svctext{min-width:0}
/* ตารางขนาดเค้กเป็นรูป — หน้าขนาดสินค้า (28 ก.ย. 2569) */
.szacts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.szacts .copychip{width:auto;min-height:36px;padding:6px 14px;font-size:13px}
.szbody{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:20px;align-items:start}
.szprev{display:grid;place-items:center;min-height:140px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface-alt);cursor:zoom-in}
.szprev img{display:block;width:100%;height:auto}
.szhelp{font-size:13.5px;line-height:1.7;color:var(--ink)}
.szhelp p{margin:0 0 6px}
.szhelp ul{margin:0;padding-left:20px;color:var(--ink-muted)}
@media (max-width:640px){.szbody{grid-template-columns:minmax(0,1fr)}.szprev{max-width:300px}}
/* มากกว่า 2 รูป = carousel (28 ก.ย. 2569) — กรอบ 4/5 รูปเต็มใบ · รูปย่อเห็นหัวรูป (หัวข้อขั้นตอนอยู่บนสุด) + เลขรูป */
.svcgal{display:flex;flex-direction:column;gap:0;min-width:0}
.svcgal .carousel{border-radius:14px;border:1px solid var(--line)}
.svcgal .carousel .nav{opacity:.9;width:34px;height:34px;margin-top:-17px}
.svcthumbs button{width:58px}
.svcthumbs button img{object-position:center top}
.thumbno{position:absolute;right:3px;bottom:3px;z-index:1;min-width:18px;height:18px;padding:0 5px;border-radius:var(--pill);
background:rgba(40,36,36,.78);color:#fff;font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
.svcthumbs button.on .thumbno{background:var(--ink)}
.svcgal .copychip.svccur{width:auto;align-self:flex-start;min-height:36px;padding:6px 14px;font-size:13px;margin-top:4px}
.svcfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--line)}
@media (max-width:760px){
.svcbody.has-both{grid-template-columns:minmax(0,1fr)}
.svccopy{width:100%}
.svcimgs,.svcbody:not(.has-both) .svcimgs{grid-template-columns:repeat(2,minmax(0,1fr))}
.svcimgs.is-one{grid-template-columns:minmax(0,1fr)}
.svcgal .copychip.svccur{align-self:stretch}
}
.faqimglink{position:relative;display:inline-block;max-width:720px;width:100%;margin-top:10px;text-decoration:none}
.faqimg{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius-sm)}
.faqimglink .zoom{position:absolute;right:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;
background:rgba(0,0,0,.72);color:#fff;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--pill);
opacity:0;transition:opacity .18s ease}
.faqimglink:hover .zoom,.faqimglink:focus-visible .zoom{opacity:1}
.faqacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.faqrow mark{background:var(--blush);color:inherit;border-radius:3px;padding:0 2px;font-weight:700}
@media (max-width:720px){
/* จอแคบ: ตัดป้ายคำและหมวดออก เหลือไอคอนคัดลอกที่ยังกดง่ายด้วยนิ้ว */
.faqrow .qcopy .lb,.faqrow .qcat{display:none}
.faqrow .qcopy{padding:9px 12px;min-width:44px;justify-content:center}
.faqa{padding-left:14px}
}
/* ผู้บริหารมักขอเป็นกระดาษหรือ PDF — ตัดเมนูและปุ่มออกให้เหลือแต่เนื้อหา */
@media print{
aside,.topbar,.botnav,.skip,.toast,.plab,.page-head .btn{display:none!important}
.shell{display:block}
.page{padding:0}
.panel{box-shadow:none;break-inside:avoid}
.smitem,.smv,.smflow li,.stat{break-inside:avoid}
.smitem .hd .go{display:none}
}
/* ============================================================
E-Learning
============================================================ */
/* ---------- การ์ดวิดีโอในหน้ารายการ ---------- */
/* ---------- E-Learning: ตารางวิดีโอ (อ้างอิงหน้ารายการของ YouTube) ----------
ลำดับที่ลอกมา: ปกกินพื้นที่หลัก → ชื่อสองบรรทัด → คนอัปโหลด/หมวด → ยอด/เวลา
ที่ตั้งใจไม่ลอก: ยอดวิวแบบย่อ ("4.5 แสน") — ของเราหลักสิบ ย่อแล้วเสียความแม่นยำ
⚠ ห้ามใส่กรอบ/เงาให้ .ycard — ที่ YouTube ปกคือขอบเขตของการ์ด การใส่กรอบซ้อน
ทำให้ระยะห่างระหว่างใบดูแน่นและปกเล็กลงโดยไม่ได้อะไรกลับมา */
.vgrid{display:grid;gap:26px 16px;grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
@media (max-width:560px){.vgrid{grid-template-columns:minmax(0,1fr);gap:20px}}
.ycard{display:flex;flex-direction:column;min-width:0}
/* --- ปก --- */
.ythumb{position:relative;display:block;aspect-ratio:16/9;background:#171012;
border-radius:14px;overflow:hidden;text-decoration:none}
.ythumb img,.ythumb .vposter{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;display:block;transition:transform .35s ease}
/* วิดีโอที่ใช้แทนรูปปกต้องไม่รับคลิก ไม่งั้นกดที่ปกแล้วไปโดนตัวเล่นแทนที่จะเข้าหน้าวิดีโอ */
.ythumb .vposter{pointer-events:none;background:#000}
.ythumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#C99AA3}
.ycard:hover .ythumb img,.ycard:hover .ythumb .vposter{transform:scale(1.045)}
/* ปุ่มเล่นขึ้นตอนชี้เท่านั้น — YouTube ไม่แปะปุ่มค้างไว้บนปก
ปกที่โล่งทำให้ภาพจริงอ่านออกตั้งแต่ยังไม่ชี้ ซึ่งคือเหตุผลที่มีปกตั้งแต่แรก */
.yhover{position:absolute;inset:0;display:grid;place-items:center;
background:rgba(23,16,18,.40);opacity:0;transition:opacity .18s ease}
.yhover > i{width:54px;height:54px;border-radius:var(--pill);background:rgba(0,0,0,.62);
color:#fff;font-size:18px;display:grid;place-items:center;padding-left:3px}
.ycard:hover .yhover,.ythumb:focus-visible .yhover{opacity:1}
.yflags{position:absolute;left:8px;top:8px;display:flex;flex-direction:column;
align-items:flex-start;gap:5px;max-width:calc(100% - 16px)}
.yflag{display:inline-flex;align-items:center;gap:5px;background:rgba(23,16,18,.84);
color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;line-height:1.55}
.yflag.warn{background:#7E1B14;color:#FFE4E0}
.ydur{position:absolute;right:8px;bottom:8px;background:rgba(23,16,18,.86);color:#fff;
font-size:12px;font-weight:700;padding:2px 7px;border-radius:6px;line-height:1.6}
/* แถบใต้ปก = ดูจบแล้ว (ที่ YouTube คือแถบความคืบหน้า)
ของเราเก็บแค่ "จบ/ยังไม่จบ" จึงมีสองสถานะคือเต็มแถบหรือไม่มีเลย
⚠ ห้ามให้แถบนี้เป็นตัวบอกเพียงลำพัง ต้องมีป้าย "คุณดูจบแล้ว" กำกับเสมอ
สีอย่างเดียวสื่อความหมายไม่ได้ (WCAG 1.4.1) */
.yseen{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--accent)}
/* --- ข้อมูลใต้ปก --- */
.ymeta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;
margin-top:11px;align-items:start}
.ymeta > .avatar{margin-top:2px}
.ytext{min-width:0;display:flex;flex-direction:column;gap:2px}
.ytitle{font-size:15.5px;font-weight:700;line-height:1.45;margin:0}
.ytitle a{color:var(--ink);text-decoration:none;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ytitle a:hover{color:var(--accent)}
.yline{margin:0;font-size:12.5px;color:var(--ink-muted);line-height:1.75;
display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px}
.yline b{color:var(--ink);font-weight:700}
.yline .dot{opacity:.5}
.ycat{display:inline-flex;align-items:center;gap:4px;background:var(--surface-alt);
border:1px solid var(--line);color:var(--ink);font-size:11.5px;font-weight:700;
padding:0 8px;border-radius:var(--pill);text-decoration:none;line-height:1.85}
.ycat:hover{background:var(--blush);border-color:var(--blush-deep)}
.ysnip{margin:3px 0 0;font-size:12.5px;line-height:1.65;color:var(--ink-muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.yextra{margin:5px 0 0;font-size:11.5px;color:var(--ink-muted);line-height:1.7;
display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.yextra .badge{font-size:11px;padding:2px 8px}
/* ⋮ — โผล่ตอนชี้การ์ดหรือตอนโฟกัสด้วยคีย์บอร์ด */
.ykebab{position:relative;flex:none}
.ykebab > button{width:32px;height:32px;border-radius:var(--pill);display:grid;place-items:center;
color:var(--ink-muted);font-size:15px;opacity:0;transition:opacity .15s ease}
.ycard:hover .ykebab > button,.ykebab > button:focus-visible,.ykebab.open > button{opacity:1}
.ykebab > button:hover{background:var(--hover-bg);color:var(--hover-ink)}
/* จอสัมผัสไม่มีสถานะ "ชี้" — ถ้าซ่อนไว้ก็ไม่มีทางเปิดเมนูได้เลย */
@media (hover:none){.ykebab > button{opacity:1}}
.ykebab .drop{position:absolute;right:0;top:calc(100% + 6px);min-width:190px;
background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);
box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:120}
.ykebab.open .drop{display:block}
.ykebab .drop a,.ykebab .drop button{display:flex;align-items:center;gap:9px;width:100%;
text-align:left;padding:8px 12px;border-radius:var(--pill);font-size:13px;font-weight:600;
color:var(--ink);text-decoration:none}
.ykebab .drop a:hover,.ykebab .drop button:hover{background:var(--hover-bg);color:var(--hover-ink)}
.ykebab .drop .danger{color:var(--danger)}
/* --- ปกเล็กในมุมมองตาราง --- */
.vthumb{position:relative;display:block;aspect-ratio:16/9;background:var(--surface-alt);
overflow:hidden;text-decoration:none}
.vthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.vthumb .vposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
display:block;pointer-events:none;background:#000}
.vthumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:#B98A93}
.vthumb.sm{width:88px;aspect-ratio:16/9;border-radius:8px}
.vthumb.sm .ph{font-size:18px}
@media (prefers-reduced-motion:reduce){
.ythumb img,.ythumb .vposter,.yhover,.ykebab > button{transition:none}
.ycard:hover .ythumb img,.ycard:hover .ythumb .vposter{transform:none}
}
/* ---------- ข่าวประกาศ ----------
อ้างอิงงานวิจัยการอ่านข่าวภายในองค์กร:
· คอลัมน์อ่าน 50–75 ตัวอักษรต่อบรรทัด ยาวกว่านี้ตาหาบรรทัดถัดไปไม่เจอ
· ตัวอักษรอย่างน้อย 16px และระยะบรรทัดกว้าง — ภาษาไทยมีสระบนล่างต้องการที่มากกว่าอังกฤษ
· ที่ว่างรอบข้อความคือส่วนหนึ่งของการอ่าน ไม่ใช่พื้นที่เหลือ
------------------------------------------------------------------ */
/* --- หน้ารายการ: กระดานข่าว --- */
.nlist{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius);
box-shadow:var(--shadow);overflow:hidden}
.npost{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;
border-top:1px solid var(--line);transition:background .15s ease}
.nlist > .npost:first-child{border-top:0}
.npost:hover{background:var(--surface-alt)}
/* ⚠⚠ รูปต้องอยู่ "ขวา" ของข้อความ ห้ามย้ายกลับไปซ้าย
รายการนี้ปนกันระหว่างประกาศที่มีรูปกับไม่มีรูป
ถ้ารูปอยู่ซ้าย หัวข้อของแถวที่มีรูปจะเยื้องเข้ามา ส่วนแถวที่ไม่มีรูปจะชิดขอบ
ขอบซ้ายของข้อความเลยขยับไปมาทุกแถว สายตาต้องหาจุดเริ่มใหม่ตลอด
(research เรียกอาการนี้ว่า alternating layout — ทำให้กวาดสายตาสะดุด)
วางไว้ขวาแล้วข้อความทุกแถวเริ่มที่ x เดียวกันเสมอ ไม่ว่าจะมีรูปหรือไม่
⚠ กรอบรูปอยู่ในเงื่อนไข ไม่ใช่คอลัมน์ตายตัวของ grid
ประกาศที่ไม่มีรูปต้องไม่เหลือช่องว่างค้างไว้ — flex จึงเหมาะกว่า grid ตรงนี้ */
.nthumb{flex:none;order:2;width:124px;aspect-ratio:3/2;border-radius:10px;overflow:hidden;
background:var(--surface-alt);display:block}
.nthumb img{width:100%;height:100%;object-fit:cover;display:block}
.nbody{flex:1;order:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.nmeta{margin:0;font-size:12.5px;color:var(--ink-muted);display:flex;flex-wrap:wrap;
align-items:center;gap:6px 10px;line-height:1.7}
.nmeta time{display:inline-flex;align-items:center;gap:5px}
.ntitle{margin:0;font-size:17px;font-weight:700;line-height:1.5}
.ntitle a{color:var(--ink);text-decoration:none}
.ntitle a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.nlead{margin:2px 0 0;font-size:13.5px;line-height:1.75;color:var(--ink-muted);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nfoot{margin:6px 0 0;font-size:12.5px;color:var(--ink-muted);display:flex;flex-wrap:wrap;
align-items:center;gap:4px 14px;line-height:1.7}
.nfoot a{color:var(--ink-muted);font-weight:600;text-decoration:none}
.nfoot a:hover{color:var(--accent);text-decoration:underline}
.nfoot .nedit{margin-left:auto}
/* ป้าย "ใหม่" — นับจากวันที่ประกาศ ไม่ใช่ "ฉันอ่านแล้วหรือยัง" (ระบบไม่ได้เก็บว่าใครอ่านอะไร) */
.nnew{background:var(--accent);color:#fff;font-size:11px;font-weight:700;
padding:1px 9px;border-radius:var(--pill);line-height:1.8;letter-spacing:.3px}
/* หมุดเล็กในแถวปกติ — ใช้ตอนค้นหาเจอของที่ปักหมุดไว้ ซึ่งไม่ได้อยู่ในส่วนหมุดแล้ว */
.npin{color:var(--accent);font-size:11px}
/* --- ส่วนที่ปักหมุด --- */
.npinned{margin-bottom:4px}
.npinned .nlist{border-color:var(--blush-deep);background:var(--accent-soft)}
.npinned .npost{border-top-color:var(--blush-deep)}
.npinned .npost:hover{background:#FCD8E1}
/* แถบหมุดด้านซ้าย — เป็นตัวบอกซ้ำจากหัวข้อ "ปักหมุดไว้" ไม่ได้สื่อความหมายลำพัง */
.npinned .npost{border-left:3px solid var(--accent)}
/* แถวเด่น (ของที่ปักหมุด) — ใหญ่ขึ้นพอให้ต่างจากแถวปกติ แต่ไม่ถึงกับเป็นการ์ดคนละแบบ */
.npost.big{padding:18px}
.npost.big .ntitle{font-size:19px}
.npost.big .nlead{-webkit-line-clamp:3}
.npost.big .nthumb{width:150px}
/* --- หัวข้อคั่นกลุ่ม --- */
.nsplit{display:flex;align-items:center;gap:9px;margin:22px 2px 10px;
font-size:13px;font-weight:700;color:var(--ink-muted)}
.nsplit b{background:var(--surface-alt);border:1px solid var(--line);
border-radius:var(--pill);padding:0 9px;font-size:12px;line-height:1.9}
.nsplit::after{content:"";flex:1;height:1px;background:var(--line)}
.nsplit.pin{color:var(--accent);margin-top:4px}
.nsplit.pin b{background:var(--accent);border-color:var(--accent);color:#fff}
.nsplit.pin::after{background:var(--blush-deep)}
/* --- ช่องติ๊กปักหมุดในฟอร์ม --- */
.pinbox{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-top:4px;
border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;
background:var(--surface);transition:border-color .15s ease,background .15s ease}
.pinbox:hover{border-color:var(--blush-deep)}
.pinbox:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.pinbox:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.pinbox input{margin-top:3px;flex:none;width:18px;height:18px;accent-color:var(--accent)}
.pinmark{flex:none;width:32px;height:32px;border-radius:var(--pill);display:grid;place-items:center;
background:var(--surface-alt);color:var(--ink-muted);font-size:14px}
.pinbox:has(input:checked) .pinmark{background:var(--accent);color:#fff}
.pintext{min-width:0;display:flex;flex-direction:column;gap:3px}
.pintext b{font-size:14px}
.pintext > span{font-size:12px;color:var(--ink-muted);line-height:1.7}
/* ประกาศที่สิ้นสุดแล้ว — ลดน้ำหนักสายตา แต่ห้ามจางจนอ่านไม่ออก
⚠ ห้ามใช้ opacity กับทั้งแถว เพราะจะลากค่าคอนทราสต์ของตัวอักษรลงไปด้วย
ลดเฉพาะรูป แล้วเปลี่ยน "สี" ของหัวข้อแทน คอนทราสต์จึงยังคุมได้ */
.npost.done .nthumb{opacity:.55}
.npost.done .ntitle a{color:var(--ink-muted);font-weight:600}
/* --- หน้าอ่าน --- */
.nended{max-width:44rem;margin:0 auto 16px;display:flex;align-items:flex-start;gap:10px;
background:var(--surface-alt);border:1.5px solid var(--line);border-left:4px solid var(--ink-muted);
border-radius:var(--radius-sm);padding:11px 14px;font-size:13.5px;line-height:1.7;color:var(--ink)}
.nended.draft{border-left-color:var(--accent);background:var(--accent-soft)}
.nread{max-width:44rem;margin:0 auto;background:var(--surface);
border:1.5px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
padding:26px 28px 22px}
.nread.done{background:var(--surface-alt)}
.nread-head{display:flex;flex-direction:column;gap:10px}
.nread-date{margin:0;font-size:13px;color:var(--ink-muted);display:flex;flex-wrap:wrap;
align-items:center;gap:8px}
.nread-date b{color:var(--ink)}
.nread h1{font-size:27px;line-height:1.45;font-weight:700;margin:0;text-wrap:balance}
.nread-by{margin:2px 0 0;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-muted)}
.nread-by b{display:block;color:var(--ink);font-size:13.5px}
.nread-img{margin:20px 0 0}
.nread-img img{width:100%;height:auto;display:block;border-radius:var(--radius-sm)}
/* เนื้อข่าว — ที่นี่คือจุดเดียวในระบบที่คนต้องอ่านยาวๆ จริงๆ จึงตั้งขนาดใหญ่กว่าที่อื่น */
.nread-body{margin-top:20px;font-size:16.5px;line-height:2}
.nread-body > *:first-child{margin-top:0}
.nread-body h2{font-size:20px;line-height:1.5;margin:26px 0 8px}
.nread-body h3{font-size:17.5px;line-height:1.5;margin:22px 0 6px}
.nread-body p{margin:0 0 14px}
.nread-body ul,.nread-body ol{margin:0 0 14px;padding-left:26px}
.nread-body li{margin-bottom:6px}
.nread-body a{color:var(--accent)}
.nread-body blockquote{margin:0 0 14px;padding:2px 0 2px 16px;
border-left:3px solid var(--blush-deep);color:var(--ink-muted)}
.nread-body hr{border:0;border-top:1px solid var(--line);margin:22px 0}
/* ตารางในข่าวต้องเลื่อนในกรอบตัวเอง ห้ามดันหน้าให้เลื่อนข้าง */
.nread-body table{border-collapse:collapse;margin:0 0 14px;font-size:15px;
white-space:normal;display:block;overflow-x:auto;max-width:100%}
.nread-body th,.nread-body td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.nread-body th{background:var(--surface-alt);font-weight:700}
.nread-foot{margin-top:22px;padding-top:14px;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-muted)}
/* กล่องความเห็นต้องกว้างเท่าคอลัมน์อ่าน ไม่งั้นสายตาต้องรีเซ็ตตำแหน่งใหม่ */
.nread-talk{max-width:44rem;margin:16px auto 0}
@media (max-width:640px){
.npost{padding:14px;gap:11px}
.nthumb{width:96px}
.ntitle{font-size:15.5px}
.nfoot .nedit{margin-left:0}
.nread{padding:20px 16px 18px;border-radius:var(--radius-sm)}
.nread h1{font-size:22px}
.nread-body{font-size:16px;line-height:1.95}
}
/* --- ตัวเลือกสถานะในฟอร์ม --- */
.statuspick{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.statusopt{display:flex;flex-direction:column;gap:2px;cursor:pointer;
border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:9px 12px;
background:var(--surface);transition:border-color .15s ease,background .15s ease}
.statusopt:hover{border-color:var(--blush-deep)}
/* .on มาจาก PHP ตอนโหลดหน้า ส่วน :has() ทำให้ไฮไลต์ขยับตามตอนคลิกโดยไม่ต้องใช้ JS */
.statusopt.on,.statusopt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.statusopt:not(:has(input:checked)){border-color:var(--line);background:var(--surface)}
.statusopt:focus-within{outline:3px solid var(--accent);outline-offset:2px}
/* ซ่อน radio จริงแต่ยังโฟกัสได้ — ห้ามใช้ display:none เพราะคีย์บอร์ดจะเข้าไม่ถึง */
.statusopt input{position:absolute;opacity:0;width:0;height:0}
.statustop{display:flex;align-items:center;gap:8px}
.statusnote{font-size:12px;color:var(--ink-muted);line-height:1.6}
/* ---------- หน้าดูวิดีโอ ---------- */
.vlayout{display:grid;gap:16px;align-items:start}
@media (min-width:1080px){.vlayout{grid-template-columns:minmax(0,1fr) 340px}}
.vlayout > *{min-width:0}
.vstage{border-radius:var(--radius);overflow:hidden;background:#000;box-shadow:var(--shadow)}
.vplayer,.vframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}
/* ข้อความสำรองตอนเบราว์เซอร์เล่นไม่ได้ อยู่บนพื้นดำ ต้องกำหนดสีเอง ไม่งั้นดำบนดำ */
.vplayer{color:#F3E4E6}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vmissing{display:grid;place-items:center;gap:10px;color:#E8B7B7;background:var(--surface-alt);
align-content:center;font-size:15px}
.vmissing i{font-size:34px}
/* แถบสถานะการดู — เต็มแถบเมื่อดูจบแล้ว */
.vprogress{margin-top:12px}
.vpbar{height:6px;border-radius:var(--pill);background:var(--surface-alt);overflow:hidden}
.vpbar > i{display:block;height:100%;background:var(--accent);border-radius:var(--pill);
transition:width .35s ease}
.vpmsg{margin:8px 0 0;font-size:13.5px;color:var(--ink-muted);display:flex;align-items:center;gap:7px}
.vpmsg.done{color:var(--success);font-weight:600}
.vdesc{font-size:15px;line-height:1.8;white-space:normal}
/* ---------- คอลัมน์ขวา ---------- */
.vbig{display:flex;align-items:baseline;gap:9px;margin-bottom:10px}
.vbig b{font-size:34px;line-height:1;letter-spacing:-.02em}
.vbig span{font-size:13.5px;color:var(--ink-muted)}
.vmeta{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin-top:16px;font-size:14px}
.vmeta dt{color:var(--ink-muted);white-space:nowrap}
.vmeta dd{margin:0;min-width:0;overflow-wrap:anywhere}
.wrow{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.wrow:last-child{border-bottom:none}
.wname{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.wname b{font-size:13.5px}
.wname span{font-size:12px;color:var(--ink-muted)}
.wtime{font-size:12px;color:var(--ink-muted);white-space:nowrap}
/* ---------- คอมเมนต์ ---------- */
.cavatar{width:36px;height:36px;border-radius:var(--pill);background:var(--blush);color:var(--ink);
display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.cavatar.sm{width:28px;height:28px;font-size:11px}
.cform{display:flex;gap:10px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cform .grow{flex:1;min-width:0}
.cform textarea{resize:vertical;min-height:44px}
.creplyform{border-bottom:none;padding:12px 0 0;margin-left:0}
/* ⚠ ต้องมีบรรทัดนี้ ไม่งั้น display:flex ด้านบนชนะ [hidden] แล้วฟอร์มตอบกลับโผล่ค้างทุกอัน
ตั้งแต่เปิดหน้า ทั้งที่ JS ตั้ง hidden ไว้ถูกแล้ว (กับดักเดียวกับ .setqueue[hidden]) */
.cform[hidden]{display:none}
.citem{display:flex;gap:10px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.citem:last-child{border-bottom:none}
.cbody{flex:1;min-width:0}
.chead{display:flex;gap:9px;align-items:baseline;flex-wrap:wrap;margin-bottom:3px;font-size:13.5px}
.chead b{font-size:14px}
.crole{font-size:11.5px;background:var(--surface-alt);border-radius:var(--pill);padding:1px 9px;color:var(--ink-muted)}
.ctime{font-size:12px;color:var(--ink-muted)}
.ctext{font-size:14.5px;line-height:1.75;overflow-wrap:anywhere}
.cacts{display:flex;gap:14px;align-items:center;margin-top:7px}
.cacts form{display:inline}
.clink{font-size:12.5px;font-weight:600;color:var(--ink-muted);display:inline-flex;align-items:center;gap:5px}
.clink:hover{color:var(--accent);text-decoration:underline}
.clink.danger:hover{color:var(--danger)}
.creply{padding:14px 0 0;border-bottom:none;margin-top:6px;
border-left:2px solid var(--line);padding-left:14px}
/* ---------- ช่องรูปปกในฟอร์ม ---------- */
.posterrow{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.posterbox{width:220px;aspect-ratio:16/9;flex:none;border-radius:var(--radius-sm);
overflow:hidden;background:var(--surface-alt);border:1px solid var(--line);
display:grid;place-items:center}
.posterbox img{width:100%;height:100%;object-fit:cover;display:block}
.posterbox .ph{font-size:30px;color:#B98A93}
.postertxt{flex:1;min-width:240px}
/* ---------- ฟอร์มอัปโหลด ---------- */
.row2{display:grid;gap:0 16px}
@media (min-width:620px){.row2{grid-template-columns:1fr 1fr}}
.row2 > *{min-width:0}
/* ปุ่มเลือกแหล่งวิดีโอ — ใช้ radio จริงเพื่อให้ใช้คีย์บอร์ดได้ */
.srcpick{margin-bottom:16px}
.srcpick label{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;cursor:pointer;
font-weight:600;font-size:14px}
.srcpick input{position:absolute;opacity:0;width:1px;height:1px}
.srcpick label.on{background:var(--blush);color:var(--ink)}
.srcpick label:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:-3px}
.note-ok{background:var(--success-soft);border-radius:var(--radius-sm);padding:13px 16px;
font-size:14px;line-height:1.7;margin-top:4px}
.note-ok > i{color:var(--success);margin-right:6px}
.checks-sm{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;line-height:1.65}
.checks-sm li{position:relative;padding-left:20px}
.checks-sm li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;
border-radius:2px;background:var(--blush)}
/* แถวที่กำลังเลือกอยู่ในหน้ารายงาน */
tr.rowon > td{background:var(--accent-soft)}
/* ---------- สถานะการอัปโหลดวิดีโอ ---------- */
.upstate[hidden]{display:none}
.uploading,.updone,.upfail{
border-radius:var(--radius-sm);padding:16px 18px;
display:flex;flex-direction:column;gap:12px;
}
.uploading{background:var(--accent-soft)}
.updone{background:var(--success-soft)}
.upfail{background:#F8DFDB}
.uphead{display:flex;align-items:flex-start;gap:12px}
.uphead > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.uphead b{font-size:15px;line-height:1.4}
.upname{font-size:13px;color:var(--ink-muted);overflow-wrap:anywhere}
.upspin,.upok,.uperr{
width:34px;height:34px;border-radius:var(--pill);display:grid;place-items:center;
font-size:15px;flex:none;
}
.upspin{background:var(--accent);color:#fff;animation:upfloat 1.4s ease-in-out infinite}
.upok{background:var(--success);color:#fff;font-size:17px}
.uperr{background:var(--danger);color:#fff}
@keyframes upfloat{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.upspin{animation:none}}
/* แถบบอกเปอร์เซ็นต์จริง ไม่ใช่วงกลมหมุน — ไฟล์ใหญ่ใช้เวลาเกิน 10 วินาที
คนดูต้องประเมินได้ว่าควรนั่งรอหรือไปทำอย่างอื่นก่อน */
/* 20px หนา = "ข้อความขนาดใหญ่" ตามเกณฑ์คอนทราสต์ ใช้สี accent บนพื้น accent-soft ได้
⚠ ถ้าย่อให้เล็กกว่านี้ต้องเปลี่ยนสีด้วย ไม่งั้นคอนทราสต์ตก */
.uppct{font-size:20px;font-weight:700;color:var(--accent);flex:none;line-height:1.2}
.upbar{height:10px;border-radius:var(--pill);background:#fff;overflow:hidden;
box-shadow:inset 0 0 0 1px var(--line)}
.upbar > i{display:block;height:100%;background:var(--accent);border-radius:var(--pill);
transition:width .2s linear}
.upmeta{display:flex;gap:10px;font-size:12.5px;color:var(--ink-muted);
font-variant-numeric:tabular-nums}
.uploading .btn{align-self:flex-start}
/* ---------- แถวปุ่มบันทึกใต้ช่องเลือกไฟล์ ---------- */
.formfoot{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:16px 20px;border-top:1px solid var(--line);background:var(--surface-alt);
}
.savehint{font-size:13px;color:var(--ink-muted);display:inline-flex;align-items:center;gap:6px}
.formfoot .btn-primary{min-width:170px}
/* (.layoutnote เดิมของแถบตัวกรองเลิกใช้ 28 ก.ย. 2569 — ทุกช่องค้นหาใช้ .faqfallback ผ่าน components/searchnote) */
/* ============================================================
ลูกศรของ dropdown
⚠ ลูกศรที่เบราว์เซอร์วาดเองจะชิดขอบขวาเสมอ ซึ่งพอกรอบเป็นทรงแคปซูล (radius 999px)
ลูกศรจะไปเบียดอยู่ตรงส่วนโค้ง ดูไม่ได้สัดส่วน — ต้องปิดของเบราว์เซอร์แล้ววาดเอง
⚠ วาดด้วย gradient ไม่ใช่รูป SVG เพราะ currentColor ทำให้สีลูกศรตามสีตัวอักษรของธีม
ซึ่งผู้ใช้ตั้งเองได้ในหน้าตั้งค่า ถ้าฝังสีไว้ในรูป เปลี่ยนธีมแล้วลูกศรจะสีเพี้ยน
⚠