/* ============================================================
   ตรวจหวยออนไลน์ — styles.css
   ส่วนที่ 1: หน้าเว็บ (front)  |  ส่วนที่ 2: แดชบอร์ด (/db)
   ============================================================ */

/* ========================= FRONT ========================= */
:root{--navy:#0e7c4a;--navy-d:#0a5638;--sky:#e9f6ef;--gold:#c19327;--gold-d:#8a6916;--gold-soft:#f7eed5;
  --green:#0e7c4a;--green-d:#0a5638;--green-soft:#e9f6ef;--green-line:#cfe7da;--green-mut:#447059;
  --ink:#11271c;--muted:#557064;--line:#d6e8de;--bg:#f1f8f4;--panel:#fff;
  --maxw:1240px;--font:'Noto Sans Thai',system-ui,sans-serif;--disp:'Kanit',var(--font);--num:'Montserrat',var(--font)}
*{box-sizing:border-box;margin:0;padding:0}
/* คุมไม่ให้มือถือ "ขยายตัวอักษรอัตโนมัติ" (Chrome Android font-boosting / iOS auto-adjust)
   ทำให้ทุกเครื่องเห็นขนาดเท่ากันตามที่กำหนด ไม่ใหญ่เกินจนตกบรรทัด — ยังซูมด้วยนิ้วได้ปกติ */
html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-weight:500;
  background-image:radial-gradient(1000px 380px at 50% -220px,#e4f5ec,transparent 70%)}
a{color:var(--navy);text-decoration:none}
.num{font-family:var(--num);font-feature-settings:"tnum" 1}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:66px;gap:14px}
.brand{display:flex;align-items:center;gap:11px}
.seal{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font:700 20px var(--num);background:linear-gradient(160deg,#15a06a,var(--navy-d))}
.brand-logo{width:40px;height:40px;border-radius:11px;object-fit:cover;display:block;flex:none;box-shadow:0 2px 8px -2px rgba(10,86,56,.35)}
.bword{display:flex;flex-direction:column;line-height:1.06}
.bword small{font-size:10px;color:var(--muted);letter-spacing:.13em;text-transform:uppercase}
.bword b{font:700 18px var(--disp);color:var(--navy)}
.site nav{display:flex;gap:6px}
.site nav a{padding:8px 15px;border-radius:10px;font-weight:600;font-size:15px;color:var(--ink)}
.site nav a:hover{background:var(--sky)}.site nav a.on{background:var(--navy);color:#fff}
main{padding:30px 0 60px}
.hero{text-align:center;padding:6px 0 22px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 12px var(--font);letter-spacing:.05em;background:var(--gold-soft);color:#7a5c12;border:1px solid #ecdcae;padding:5px 13px;border-radius:999px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.hero h1{font:700 clamp(28px,4.4vw,44px) var(--disp);color:var(--navy);margin:14px 0 6px;line-height:1.16}
.hero .sub{color:var(--muted);font-size:clamp(15px,1.7vw,17px)}
.checker{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px clamp(18px,3vw,32px);box-shadow:0 18px 40px -30px rgba(10,86,56,.45);max-width:680px;margin:6px auto 0;text-align:center}
.ck-head{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.ck-head b{font:700 clamp(21px,3vw,25px) var(--disp);color:var(--navy)}.ck-head span{font-size:16px;font-weight:600;color:var(--navy)}
.ck-row{display:flex;gap:10px;max-width:460px;margin:0 auto}
.ck-in{flex:1;min-width:0;font:700 22px var(--num);letter-spacing:.16em;text-align:center;padding:13px 12px;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--navy);outline:none}
.ck-in:focus{border-color:var(--navy);box-shadow:0 0 0 4px var(--sky)}
.ck-btn{border:none;cursor:pointer;font:700 18px var(--disp);color:#fff;padding:0 26px;border-radius:12px;background:linear-gradient(160deg,#15a06a,var(--navy-d));white-space:nowrap}
.ck-res{margin-top:14px;text-align:left}.ck-res:not(.show){display:none}
.ck-res.note,.ck-res.lose{text-align:center;font-size:14px;color:var(--muted);background:var(--sky);border:1px solid var(--line);border-radius:12px;padding:12px}
.ck-res.win{background:#eefaf3;border:1px solid #bfe6d2;border-radius:14px;padding:14px 16px}
.ck-t{display:flex;align-items:center;gap:8px;justify-content:center;font:700 16px var(--disp);color:#0f7a4d;margin-bottom:8px}
.ck-t i{width:22px;height:22px;border-radius:50%;background:#0f7a4d;color:#fff;display:grid;place-items:center;font-size:13px;font-style:normal}
.ckp{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:4px 0}
.ck-tot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-top:10px;border-top:1px dashed #bfe6d2;font:700 15px var(--disp);color:#0f7a4d}
.ck-tot b{font-family:var(--num)}

/* popup ผลตรวจหวย (เด้งแสดงผลถูก/ไม่ถูก) */
.ckmodal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px}
.ckmodal[hidden]{display:none}
.ckmodal-bg{position:absolute;inset:0;background:rgba(7,40,28,.55);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ckmodal-card{position:relative;z-index:1;width:100%;max-width:380px;background:#fff;border-radius:20px;padding:26px 22px 22px;text-align:center;box-shadow:0 30px 70px -28px rgba(10,86,56,.6);animation:ckpop .22s ease}
@keyframes ckpop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.ckmodal-x{position:absolute;top:12px;right:14px;width:30px;height:30px;border:none;border-radius:50%;background:var(--sky);color:var(--green-d);font-size:14px;cursor:pointer;line-height:1}
.ckmodal-x:hover{background:var(--green-line)}
.ckm-emoji{font-size:52px;line-height:1;margin:4px 0 8px}
.ckm-title{font:700 21px var(--disp);margin:0 0 12px}
.ckmodal.win .ckm-title{color:#0f7a4d}
.ckmodal.lose .ckm-title{color:var(--green-d)}
.ckm-body{text-align:left}
.ckm-num{text-align:center;font-size:14px;color:var(--muted);margin-bottom:12px}
.ckm-num b{font-family:var(--num);color:var(--navy);letter-spacing:.12em;font-size:18px}
.ckm-msg{text-align:center;font-size:15px;color:var(--muted);line-height:1.7;margin:6px 0 2px}
.ckm-ok{margin-top:18px;width:100%;border:none;cursor:pointer;font:700 15px var(--disp);color:#fff;padding:13px;border-radius:12px;background:linear-gradient(160deg,#15a06a,var(--navy-d))}
.ckm-ok:hover{filter:brightness(1.05)}.ckm-ok:active{transform:translateY(1px)}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:34px 0 16px}
.sechead h2{font:700 clamp(20px,2.5vw,26px) var(--disp);color:var(--navy)}
.sechead a{font-weight:600;font-size:14px;color:var(--navy);white-space:nowrap}.sechead a:hover{text-decoration:underline}
.result{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 20px 44px -32px rgba(10,86,56,.45)}
.stub{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px clamp(18px,3vw,26px);color:#eafaf2;background:linear-gradient(108deg,var(--navy-d),var(--navy) 70%)}
.stub-title{font:700 clamp(16px,2.2vw,19px) var(--disp)}
.rbody{padding:clamp(20px,3vw,30px)}
.ddwrap{text-align:center;margin-bottom:18px}
.drawdate{display:inline-flex;align-items:center;gap:8px;font:700 clamp(14.5px,1.9vw,16.5px) var(--disp);color:#4a3608;background:linear-gradient(160deg,#ecc856,var(--gold));border-radius:999px;padding:9px 18px;box-shadow:0 7px 16px -8px rgba(150,110,20,.45)}
.drawdate svg{flex:none}
.first{display:flex;flex-direction:column;align-items:center;gap:13px;padding-bottom:18px;margin-bottom:8px}
.first .lbl{font-size:13.5px;color:var(--muted);font-weight:600}
.slots{display:flex;gap:clamp(7px,1.4vw,11px);flex-wrap:wrap;justify-content:center}
.slot{width:clamp(46px,8vw,64px);height:clamp(62px,11vw,84px);border-radius:13px;display:grid;place-items:center;font:700 clamp(30px,5.6vw,44px) var(--num);color:var(--navy);background:linear-gradient(180deg,#fff,#eef8f1);border:1.5px solid var(--line);box-shadow:inset 0 -3px 0 rgba(10,86,56,.06)}
.near{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:2px;padding:8px 14px;border:1px dashed var(--line);border-radius:999px;background:var(--sky)}
.near .nl{font-size:12.5px;color:var(--muted);font-weight:600}
.near .nv{font:700 17px var(--num);color:var(--navy);letter-spacing:.05em}
.run3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.cell{text-align:center;background:var(--sky);border:1px solid var(--line);border-radius:14px;padding:15px 12px}
.cell .lbl{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:7px}
.cell .v{font:700 clamp(24px,4vw,32px) var(--num);color:var(--navy);letter-spacing:.06em}
.tierhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:26px 0 14px}
.tierhead .tier-title{font:700 17px var(--disp);color:var(--navy)}
.tgl{border:none;background:var(--green);color:#fff;font:600 13.5px var(--font);cursor:pointer;padding:9px 18px;border-radius:999px;display:inline-flex;align-items:center;gap:6px}
.tgl:hover{background:var(--green-d)}.tgl::before{content:"▾";font-size:18px;line-height:1;transition:transform .15s ease}
.tierwrap{display:flex;flex-direction:column;gap:14px}
.tier{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.tlbl{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;background:var(--sky);border-bottom:1px solid var(--line)}
.tn{font:700 15px var(--disp);color:var(--navy)}.tn em{font-style:normal;font-weight:600;color:var(--muted);font-size:12.5px}
.ta{font-size:12.5px;color:var(--muted);text-align:right}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:15px 16px}
.chip{font:600 16px var(--num);letter-spacing:.05em;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:6px 12px;min-width:62px;text-align:center}
.lao-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.poll{display:none}
.lcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 16px 36px -32px rgba(10,86,56,.45)}
.lstub{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;color:#eafaf2;background:linear-gradient(108deg,var(--navy-d),var(--navy))}
.ls-title{font:700 clamp(16px,2.2vw,19px) var(--disp)}
.flag{font:700 12px var(--font);color:var(--navy-d);background:linear-gradient(160deg,#f1d987,var(--gold));padding:5px 12px;border-radius:999px}
.lbody{padding:20px 18px}
.lfirst{display:flex;flex-direction:column;align-items:center;gap:11px;padding-bottom:16px;margin-bottom:14px;border-bottom:1px dashed var(--line)}
.lfirst .lbl{font-size:13px;color:var(--muted);font-weight:600}
.lao3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;font-size:12.5px;color:var(--muted)}
.lfoot a{color:var(--navy);font-weight:600}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:2px 0 16px}
.crumb a{color:var(--navy);font-weight:600}.crumb a:hover{text-decoration:underline}
.crumb .sep{color:#a7bcb0}.crumb .cur{color:var(--ink);font-weight:600}
.pghero{padding:2px 0 6px}
.pghero h1{font:700 clamp(24px,3.6vw,36px) var(--disp);color:var(--navy);margin-bottom:6px}
.pghero .sub{color:var(--muted);font-size:15px}
.bloglist{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.brow{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px;transition:.15s;box-shadow:0 10px 26px -24px rgba(10,86,56,.4)}
.brow:hover{border-color:#aedcc6;transform:translateY(-1px);box-shadow:0 16px 32px -24px rgba(10,86,56,.5)}
.bl-date{font:700 17px var(--disp);color:var(--ink)}
.bl-sub{font-size:13px;color:var(--muted);margin-top:3px}
.bl-sub b{font-family:var(--num);color:var(--navy);font-weight:600}
.bl-right{display:flex;flex-direction:column;align-items:flex-end;gap:1px;text-align:right;flex:none}
.bl-lbl{font-size:11.5px;color:var(--muted);font-weight:600}
.bl-num{font:700 clamp(24px,4vw,32px) var(--num);color:var(--navy);letter-spacing:.06em}
.bl-go{font-size:12px;color:var(--navy);font-weight:600;margin-top:2px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px}
.pager a{font-size:14px;font-weight:600;color:var(--navy);padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.pager a:hover{background:var(--sky)}
.pager .off{font-size:14px;font-weight:600;color:#a7bcb0;padding:9px 16px;border:1px solid var(--line);border-radius:10px;opacity:.6}
.pager .pg{font-size:14px;font-weight:600;color:var(--muted)}
.subhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 0 14px}
.subhead h3{font:700 18px var(--disp);color:var(--navy)}
.subhead a{font-weight:600;font-size:14px;color:var(--navy);white-space:nowrap}.subhead a:hover{text-decoration:underline}
.tgl.open::before{transform:rotate(180deg)}
.secdiv{display:flex;align-items:center;gap:16px;margin:50px 0 6px}
.secdiv::before,.secdiv::after{content:"";flex:1;height:1px;background:var(--line)}
.secdiv span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:700 16px var(--num);color:var(--navy-d);background:linear-gradient(160deg,#f1d987,var(--gold));box-shadow:0 0 0 1px var(--line),inset 0 0 0 2px #fff;flex:none}
.disc{display:flex;gap:11px;align-items:flex-start;background:var(--sky);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-top:16px}
.disc i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-weight:700;font-size:12px;display:grid;place-items:center;margin-top:1px}
.disc p{font-size:12.5px;color:var(--muted);line-height:1.6}.disc b{color:var(--navy)}
.lrecent{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.lrh{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);margin-bottom:8px}
.lrow:last-child{margin-bottom:0}.lrow:hover{background:var(--sky);border-color:#aedcc6}
.lrd{font-size:14px;font-weight:700;color:var(--ink)}
.lrn{font:700 16px var(--num);color:var(--navy);letter-spacing:.04em}
.lrn em{font:600 11.5px var(--font);font-style:normal;color:var(--muted);letter-spacing:0}
footer{background:var(--navy-d);color:#bcd6c8;margin-top:50px}
.fwrap{padding:38px 0 26px}
.fbrand{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.fseal{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font:700 20px var(--num);background:linear-gradient(160deg,#15a06a,#0a3a26)}
.fbrand b{font:700 18px var(--disp);color:#fff;display:block;line-height:1.1}
.fbrand small{display:block;font-size:11px;color:#a9c8b7;letter-spacing:.1em;text-transform:uppercase;margin-top:2px}
.fabout h2{font:700 15px var(--disp);color:#fff;margin-bottom:9px}
.fabout p{font-size:13px;line-height:1.78;color:#bcd6c8;max-width:780px;margin-bottom:11px}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.13);font-size:12.5px;color:#a9c8b7}
@media(max-width:820px){.lao-grid{grid-template-columns:1fr}.sechead{margin-top:28px}}
@media(max-width:560px){
  .nav{height:60px}.bword b{font-size:16px}.site nav a{padding:7px 11px;font-size:14px}
  .run3{grid-template-columns:1fr}.tierhead{flex-direction:column;align-items:stretch;gap:10px}.tgl{justify-content:center}
  .lao3{grid-template-columns:1fr 1fr}.ck-row{flex-direction:column}
  /* ปุ่มตรวจผล: ตัวหนังสือใหญ่ขึ้น + เต็มความกว้าง กดง่ายบนมือถือ */
  .ck-btn{padding:15px;font-size:19px}
  .ck-in{font-size:21px;letter-spacing:.12em;padding:14px 12px}
  /* เลขรางวัล 6 หลัก: บีบช่องให้พอดีจอ คงไว้แถวเดียว ไม่ตกบรรทัด */
  .slots{gap:4px;flex-wrap:nowrap}
  .slot{width:clamp(32px,11vw,54px);height:clamp(46px,15.5vw,72px);font-size:clamp(23px,7.6vw,42px);border-radius:10px}
  /* หัวข้อ section/subhead: แยกหัวข้อกับลิงก์คนละบรรทัด ไม่ให้เบียดจนตกบรรทัด */
  .sechead{flex-direction:column;align-items:flex-start;gap:6px;margin:26px 0 14px}
  .subhead{flex-direction:column;align-items:flex-start;gap:6px}
  .brow{padding:14px 16px}.bl-num{font-size:24px}
  .fwrap{padding:28px 20px 20px}
  .fbar{flex-direction:column;align-items:flex-start;gap:6px;font-size:12px}
}
.lstub{background:linear-gradient(108deg,var(--green-d),var(--green) 70%);color:#eafaf2}
.flag{color:var(--green-d);background:#eafaf2}
.lcard .slot{color:var(--green-d);background:linear-gradient(180deg,#fff,#e9f7f0);border-color:var(--green-line)}
.lcard .lfirst{border-bottom-color:var(--green-line)}
.lcard .cell{background:var(--green-soft);border-color:var(--green-line)}
.lcard .cell .v{color:var(--green-d)}
.lcard .cell .lbl{color:var(--green-mut)}
.lcard .lrecent{border-top-color:var(--green-line)}
.lcard .lfoot + .lrecent{margin-top:14px}
.lcard .lrow{background:#f1f9f5;border-color:var(--green-line)}
.lcard .lrow:hover{background:var(--green-soft);border-color:#a9d8c2}
.lcard .lrn{color:var(--green-d)}
.lcard .lfoot a{color:var(--green-d)}
.sechead.lao h2{color:var(--green-d)}.sechead.lao a{color:var(--green-d)}
.hero .sub,.pghero .sub,.disc p,.bl-sub,.lfoot,.crumb,.fabout p,.ta,.fbar,.ck-res.note,.ck-res.lose{font-weight:500}
body{line-height:1.64}

/* ===== ปรับฟอนต์ (รอบแก้): ใหญ่ขึ้น/หนาขึ้น/คมขึ้น — แก้ตัวบาง เล็ก และแตก ===== */
body{font-size:16.5px}
/* เนื้อหา/ย่อหน้าที่เคยเล็กเกินไป */
.hero .sub{font-size:clamp(16px,1.8vw,18px)}
.pghero .sub{font-size:16px}
.disc p{font-size:13.5px;line-height:1.72}
.seo p{font-size:15px}
.fabout p{font-size:14px}
.pgnote p{font-size:15.5px}
.ckm-num,.ck-res.note,.ck-res.lose{font-size:15px}
/* ป้ายกำกับรางวัล/แถวย้อนหลัง — ขยาย + เพิ่มน้ำหนักให้อ่านชัด */
.first .lbl,.near .nl,.cell .lbl,.lfirst .lbl,.lcard .cell .lbl{font-size:13.5px;font-weight:700}
.tn em{font-size:13px}
.bl-lbl{font-size:13px;font-weight:700}
.bl-go{font-size:13px}
.bl-sub{font-size:13.5px}
.lrn em{font-size:12.5px}
.crumb{font-size:14px}
/* ลิงก์/เพจเจอร์ทั่วไป คมขึ้นเล็กน้อย */
.sechead a,.subhead a,.pager a,.pager .off,.pager .pg{font-size:14.5px}

/* ===== dashboard aliases (เพิ่ม var ที่ฝั่งแดชบอร์ดใช้) ===== */
:root{--green-2:#15a06a;--mint:var(--sky);--mint-2:#dff1e8}

/* ======================= DASHBOARD ======================= */
/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:
  radial-gradient(700px 320px at 50% -160px,var(--mint),transparent 70%)}
.login-card{width:100%;max-width:390px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px 28px;box-shadow:0 30px 60px -36px rgba(10,86,56,.5)}
.login-top{display:none}
.login-foot{display:none}
.login-card label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin:0 0 6px}
.login-card input{width:100%;font-size:15px;padding:12px 14px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);outline:none}
.login-card input:focus{border-color:var(--green-2);box-shadow:0 0 0 4px var(--mint)}
.login-card .err{background:#fdecea;border:1px solid #f3c9c3;color:#b3201f;font-size:13px;padding:10px 12px;border-radius:10px;margin-bottom:6px}
.login-card button{width:100%;margin-top:18px;border:none;cursor:pointer;font:700 15px var(--disp);color:#fff;padding:13px;border-radius:11px;background:linear-gradient(160deg,var(--green-2),var(--green-d))}
.login-foot{text-align:center;font-size:12px;color:var(--muted);margin-top:14px}
/* dash layout */
.dash{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}
.side{background:linear-gradient(180deg,var(--green-d),#063a25);color:#cdeadd;padding:20px 16px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0}
.side-brand{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.side-brand .seal{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#063a25;font:700 18px var(--num);background:linear-gradient(160deg,#f1d987,var(--gold))}
.side-brand b{font:700 17px var(--disp);color:#fff}
.side-lbl{font-size:11px;font-weight:700;letter-spacing:.1em;color:#84b6a0;text-transform:uppercase;margin:6px 4px 8px}
.menu{display:flex;flex-direction:column;gap:5px}
.menu a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px;border-radius:11px;color:#dcefe4;font-weight:600;font-size:14.5px;cursor:pointer}
.menu a:hover{background:rgba(255,255,255,.08)}
.menu a.on{background:#fff;color:var(--green-d)}
.m-tag{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.16);color:#dcefe4}
.menu a.on .m-tag{background:var(--mint);color:var(--green-d)}
.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:10px}
.profile{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:9px 11px;cursor:pointer;text-align:left;color:#dcefe4;font-family:var(--font)}
.profile:hover{background:rgba(255,255,255,.12)}
.avatar{width:38px;height:38px;border-radius:50%;flex:none;background:rgba(255,255,255,.15) center/cover no-repeat;display:grid;place-items:center;overflow:hidden}
.avatar svg{width:20px;height:20px}
.pinfo{display:flex;flex-direction:column;line-height:1.18}
.pinfo b{color:#fff;font-size:14px}.pinfo small{color:#9fd3bd;font-size:11px}
.logout{display:flex;align-items:center;justify-content:center;gap:7px;color:#cdeadd;font-weight:600;font-size:13px;border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:10px;background:transparent;cursor:pointer;font-family:var(--font)}
.logout:hover{background:rgba(255,255,255,.08)}
.dpager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px}
.dpager button{border:1px solid var(--line);background:#fff;color:var(--green-d);font:600 13px var(--font);padding:8px 14px;border-radius:9px;cursor:pointer}
.dpager button:hover:not(:disabled){background:var(--mint)}
.dpager button:disabled{opacity:.45;cursor:default}
.dpager .pg{font-size:13px;color:var(--muted);font-weight:600;padding:0 6px}
.dmain{padding:26px clamp(24px,4vw,48px);overflow-y:auto;min-height:0}
.dmain>.dhead,.dmain>.dstat,.dmain>.dsec,.dmain>.flash,.dmain>.muted{max-width:1080px;margin-left:auto;margin-right:auto}
.flash{border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:18px}
.flash.ok{background:var(--mint);border:1px solid var(--mint-2);color:var(--green-d)}
.flash.err{background:#fdecea;border:1px solid #f3c9c3;color:#b3201f}
.dhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.dhead h1{font:700 clamp(22px,3vw,28px) var(--disp);color:var(--green-d)}
.badge{font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.badge.api{background:var(--mint);color:var(--green-d)}
.badge.man{background:var(--gold-soft);color:var(--gold-d)}
.badge.none{background:#eef1ef;color:#8a978f}
.dstat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.sc{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px}
.sc-k{font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:5px}
.sc-v{font:700 18px var(--disp);color:var(--ink)}
.sc-v.up{color:var(--green)}.sc-v.down{color:#b3201f}
.dsec{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px clamp(16px,2.5vw,22px);margin-bottom:18px}
.dsec h2{font:700 17px var(--disp);color:var(--green-d);margin-bottom:14px}
.dsec h2 small{font-weight:400;font-size:12.5px;color:var(--muted)}
.dlist{display:flex;flex-direction:column;gap:9px}
.drow{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 15px;background:var(--bg)}
.dr-date{font:700 15px var(--disp);color:var(--ink)}
.dr-num{font:700 17px var(--num);color:var(--green-d);letter-spacing:.04em;margin-top:2px}
.dr-num .na{font:400 12.5px var(--font);color:#9aa8a0}
.dr-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mini{border:1px solid var(--line);background:#fff;color:var(--green-d);font:600 12.5px var(--font);cursor:pointer;padding:7px 13px;border-radius:9px}
.mini:hover{background:var(--mint)}
.mini.ghost{color:var(--muted)}
.mform{display:flex;flex-direction:column;gap:4px}
.mform label{font-size:13px;font-weight:600;color:var(--ink);margin:10px 0 5px}
.mform input,.mform select{width:100%;font-size:15px;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);outline:none}
.mform input.num{font-family:var(--num);letter-spacing:.08em}
.mform input:focus,.mform select:focus{border-color:var(--green-2);box-shadow:0 0 0 4px var(--mint)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.frow.f3{grid-template-columns:1fr 1fr 1fr}
.save{margin-top:16px;border:none;cursor:pointer;font:700 15px var(--disp);color:#fff;padding:13px;border-radius:11px;background:linear-gradient(160deg,var(--green-2),var(--green-d))}
.save.ghost-save{background:#fff;color:var(--green-d);border:1.5px solid var(--green-line,var(--line))}
.days{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.day{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;cursor:pointer;font-size:14px;background:#fff}
.day input{width:auto;accent-color:var(--green)}
.muted{font-size:13px;color:var(--muted);line-height:1.6}
.muted code{background:var(--mint);color:var(--green-d);padding:2px 7px;border-radius:6px;font-size:12.5px}
@media(max-width:820px){.dstat{grid-template-columns:1fr 1fr}}
@media(max-width:640px){
  .dash{grid-template-columns:1fr;height:auto;overflow:visible}
  .side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px;height:auto;overflow:visible}
  .dmain{height:auto;overflow:visible}
  .side-brand{margin-bottom:0}.side-lbl{display:none}
  .menu{flex-direction:row;flex-wrap:wrap;flex:1}
  .menu a{padding:8px 11px;font-size:13px}.m-tag{display:none}
  .side-foot{margin:0;padding:0;border:0;width:100%;flex-direction:row;align-items:center;gap:8px}
  .profile{flex:1}.logout{white-space:nowrap}
  .dstat{grid-template-columns:1fr}.frow,.frow.f3{grid-template-columns:1fr 1fr}
}
.sc-s{font-size:11.5px;color:var(--muted);margin-top:4px}
.sc-v .u{font-size:13px;font-weight:600;color:var(--muted)}
.badge.wait{background:#fbf0d9;color:#946b10}
.dr-num.wait{color:#a7b3ab;letter-spacing:.16em}
.mini.solid{background:linear-gradient(160deg,var(--green-2),var(--green-d));color:#fff;border:none}
.mini.solid:hover{filter:brightness(1.06)}
.catbars{display:flex;flex-direction:column;gap:13px;padding:0 clamp(12px,3vw,32px)}
.catbar{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:12px}
.catbar .cb-n{font-weight:600;font-size:14px;color:var(--ink)}
.catbar .cb-t{height:10px;border-radius:999px;background:var(--mint-2);overflow:hidden}
.catbar .cb-f{height:100%;background:linear-gradient(90deg,var(--green-2),var(--green));border-radius:999px}
.catbar .cb-c{font:700 15px var(--num);color:var(--green-d);min-width:64px;text-align:right}
.quicklinks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ql{display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:var(--bg)}
.ql:hover{border-color:#aedcc6;background:var(--mint)}
.ql b{font:700 15px var(--disp);color:var(--green-d)}.ql span{font-size:12px;color:var(--muted)}
.sc-btn{margin-top:11px;width:100%}
.sec-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sec-row h2{margin-bottom:0}
@media(max-width:640px){.catbar{grid-template-columns:90px 1fr auto}.quicklinks{grid-template-columns:1fr}}

/* ===== เสริมสำหรับหน้าเนื้อหา (pages.php) ===== */
.lao-grid.single{grid-template-columns:1fr;max-width:560px}
.seo{margin-top:30px;padding-top:22px;border-top:1px solid var(--line)}
.seo h2{font:700 18px var(--disp);color:var(--green-d);margin-bottom:8px}
.seo p{font-size:14px;color:var(--muted);line-height:1.85}
.seo p+p{margin-top:10px}
.pgnote{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:28px 24px;text-align:center;margin-top:8px;box-shadow:0 16px 36px -32px rgba(10,86,56,.45)}
.pgnote h1{font:700 23px var(--disp);color:var(--green-d);margin-bottom:10px}
.pgnote p{color:var(--muted);font-size:14.5px;margin-bottom:6px}
.pgnote a{color:var(--green-d);font-weight:600}

/* ===== catswitch (สลับหมวดหวยลาว) + drawsearch (ค้นหางวด) ===== */
.catswitch{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.catswitch a,.catswitch .on{font-size:14px;font-weight:700;padding:10px 18px;border-radius:10px;border:1px solid var(--green-line);text-decoration:none;transition:.15s}
.catswitch a{color:var(--green-d);background:var(--green-soft)}
.catswitch a:hover{background:var(--green);color:#fff;border-color:var(--green)}
.catswitch .on{color:#fff;background:var(--green);border-color:var(--green);cursor:default}

.drawsearch{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:0 0 22px;box-shadow:0 1px 3px rgba(14,124,74,.04)}
.drawsearch>label{display:block;font-size:13px;font-weight:700;color:var(--green-mut);margin-bottom:10px;letter-spacing:.02em}
.drawsearch .ds-row{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch}
.drawsearch .ds-sel{flex:1;min-width:84px;font-family:var(--font);font-size:15px;font-weight:600;color:var(--ink);padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234f7d68' d='M3 4.5L6 7.5L9 4.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.drawsearch .ds-sel:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
.drawsearch .ds-btn{flex:0 0 auto;font-family:var(--font);font-size:15px;font-weight:700;color:#fff;background:var(--green);border:1px solid var(--green);border-radius:10px;padding:11px 24px;cursor:pointer;transition:.15s}
.drawsearch .ds-btn:hover{background:var(--green-d);border-color:var(--green-d)}
@media(max-width:520px){.drawsearch .ds-btn{flex:1 1 100%;margin-top:4px}}

/* ============================================================
   รอบปรับปรุง: shadow เด่นขึ้น + lao5 + animal + share + modal + import
   ============================================================ */

/* ---- shadow การ์ดหลักให้ลอยเด่นขึ้น (ลด negative spread) ---- */
.result,.lcard,.checker{box-shadow:0 14px 30px -16px rgba(10,86,56,.30),0 4px 10px -6px rgba(10,86,56,.18)!important}
.brow{box-shadow:0 6px 16px -12px rgba(10,86,56,.28)}
.brow:hover{box-shadow:0 12px 26px -14px rgba(10,86,56,.34)}
.drawsearch{box-shadow:0 8px 22px -16px rgba(10,86,56,.26)!important}
.catswitch a,.catswitch .on{box-shadow:0 4px 12px -8px rgba(10,86,56,.30)}

/* ---- หวยลาว: ชื่อนามสัตว์ ---- */
.lanimal{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 4px;padding:10px 16px;background:var(--green-soft);border:1px solid var(--green-line);border-radius:12px}
.lanimal span{font-size:13px;font-weight:600;color:var(--green-mut)}
.lanimal b{font-family:var(--disp);font-size:20px;font-weight:700;color:var(--green-d)}
.lao3.two{grid-template-columns:1fr 1fr}

/* ---- หวยลาวพัฒนา: 5 ช่อง ---- */
.lao5-wrap{display:flex;flex-direction:column;align-items:center;gap:clamp(7px,1.4vw,11px)}
/* แต่ละช่องบรรจุเลข 2 หลัก → ขยายความกว้าง + เพิ่มช่องว่างซ้าย-ขวา กันเลขชิดขอบ
   (ค่าต่ำสุดเล็กพอให้จอมือถือเรียง 5 ช่องในแถวเดียวได้โดยไม่ล้นกรอบ) */
.lao5-wrap .slot{width:auto;min-width:clamp(50px,13vw,82px);padding:0 clamp(8px,2vw,16px);font-size:clamp(24px,4.8vw,40px);letter-spacing:.04em}
@media(max-width:560px){.lao5-wrap{flex-direction:row;flex-wrap:nowrap;justify-content:center;gap:clamp(7px,1.4vw,11px)}.lao5-wrap .slots{flex-wrap:nowrap}}

/* ---- ปุ่มแชร์ผล (แบบ A) ---- */
.sharerow{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;justify-content:space-between;margin:16px 0 0;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px -16px rgba(10,86,56,.26)}
.sharerow .sh-lbl{font-size:14px;font-weight:700;color:var(--green-mut);white-space:nowrap}
.sh-btns{display:flex;flex-wrap:nowrap;gap:8px;flex:1 1 auto;min-width:0;justify-content:flex-end}
.sh-btn{font-family:var(--font);font-size:14px;font-weight:700;padding:9px 16px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:.15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
@media(max-width:600px){.sharerow{flex-direction:column;align-items:stretch;gap:10px}.sh-btns{justify-content:stretch}.sh-btn{flex:1 1 0;min-width:0;padding:9px 6px;font-size:12.5px}}
.sh-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -10px rgba(10,86,56,.3)}
.sh-btn.line{background:#018235;border-color:#018235;color:#fff}
.sh-btn.fb{background:#1064d0;border-color:#1064d0;color:#fff}
.sh-btn.copy{background:var(--green-soft);border-color:var(--green-line);color:var(--green-d)}
.sh-btn.native{background:var(--green);border-color:var(--green);color:#fff}

/* ---- inline expand row (dashboard กรอกผล) ---- */
.ditem{display:flex;flex-direction:column}
.ditem .drow{transition:border-color .15s}
.mini.editing{background:linear-gradient(160deg,var(--green-2),var(--green-d));color:#fff;border:none}
.erow{margin:2px 0 10px;padding:18px clamp(14px,2.5vw,20px);background:var(--green-soft);border:1.5px solid var(--green-line);border-radius:14px;animation:erowin .18s ease}
@keyframes erowin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.p5row{display:flex;gap:8px}
.p5row .p5{flex:1;min-width:0;text-align:center;font-size:20px;font-weight:700}
.tier-sec{margin-top:18px;padding-top:16px;border-top:1px dashed var(--green-line)}
.tier-head{font:700 15px var(--disp);color:var(--green-d);margin-bottom:4px}
.tier-head small{font-weight:500;font-size:12.5px;color:var(--muted)}
.mform textarea.tnum{width:100%;font-family:var(--num,monospace);font-size:14px;line-height:1.7;letter-spacing:.04em;padding:11px 13px;border:1.5px solid var(--line);border-radius:10px;background:#fff;resize:vertical;box-sizing:border-box}
.mform textarea.tnum:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 4px var(--mint)}

/* ---- หน้าจัดการบัญชี / เปลี่ยนรหัสผ่าน (dashboard) ---- */
.acctform label{display:block;font-size:13px;font-weight:600;color:var(--green-d);margin:14px 0 6px}
.acctform label small{font-weight:400;color:var(--muted)}
.acctform input{width:100%;box-sizing:border-box;font-size:15px;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);outline:none}
.acctform input:focus{border-color:var(--green-2);box-shadow:0 0 0 4px var(--mint)}
.acctform button.solid{background:linear-gradient(160deg,var(--green-2),var(--green-d));color:#fff;border:none;border-radius:11px;padding:12px 22px;font:600 15px var(--disp,inherit);cursor:pointer}
.acctform button.solid:hover{filter:brightness(1.06)}