/* ============================================================
   YTAutoTrade - Neon Red / White
   พื้นดำ ตัวหนังสือขาว ไฮไลต์ด้วยแดงนีออนที่เรืองแสง

   ไฟล์นี้เขียนกฎของแต่ละองค์ประกอบไว้ "ที่เดียว" ทั้งสีพื้นและแสงนีออน
   (เดิมแยกเป็นสองท่อนแล้วเขียนทับกันทีหลัง ทำให้ตามแก้ยาก ขนาดไฟล์บวม
   และบางจุดสีขัดกันเองจนต้องเดาว่ากฎไหนชนะ)

   ระยะห่างและขนาดทั้งหมดหยิบจากบันไดค่าชุดเดียวด้านล่าง กรอบทุกใบจึงเท่ากัน
   และเรียงตรงกันทุกหน้า โดยไม่มีอะไรถูกบังหรือหลุดขอบจอ

   สีแดงไม่ได้ใช้เดี่ยว ๆ อีกแล้ว - ตรงไหนที่เป็นจุดเด่น (ปุ่ม ไอคอน หลอดสถานะ)
   ใช้ --grad-hot ไล่จากส้มไปแดงไปชมพู กล่องและช่องกรอกได้เงาสองชั้นกับเส้นแสง
   ที่ขอบบน เพื่อให้พื้นดำมีความลึกแทนที่จะเป็นสี่เหลี่ยมแบน ๆ ซ้อนกัน
   ============================================================ */

:root{
  /* ---- สี ---- */
  --red:#FF2246;
  --red-dark:#D8002B;
  --red-bright:#FF4D6A;
  --red-soft:rgba(255,34,70,.14);
  --red-ring:rgba(255,34,70,.45);
  /* สีคู่ของแดง - ใช้เฉพาะตอนไล่เฉด ทำให้ปุ่มและป้ายมีมิติแทนที่จะแบนสีเดียว */
  --magenta:#FF3D8F;
  --ember:#FF6B3D;
  --grad-hot:linear-gradient(135deg,var(--ember) 0%,var(--red) 46%,var(--magenta) 100%);
  --glow:0 0 16px rgba(255,34,70,.52);
  --glow-soft:0 0 20px rgba(255,34,70,.20);
  --glow-text:0 0 11px rgba(255,34,70,.6);

  --bg:#06060A;
  --bg-2:#101018;
  --card:#0D0D14;
  --field:#15151E;
  --text:#F7F8FA;
  --muted:#9BA0AC;
  --line:rgba(255,255,255,.09);
  --line-hot:rgba(255,34,70,.38);
  --fill:rgba(255,255,255,.045);
  --fill-2:rgba(255,255,255,.06);
  /* เงาสองชั้น: ชั้นคมไว้ตัดขอบ ชั้นฟุ้งไว้ยกกล่องให้ลอยขึ้นจากพื้น */
  --shadow:0 1px 2px rgba(0,0,0,.55), 0 10px 30px -12px rgba(0,0,0,.85);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 28px 60px -22px rgba(0,0,0,.95);
  --nav-bg:rgba(9,9,15,.72);

  /* จังหวะการเคลื่อนไหว - ออกตัวเร็วแล้วค่อย ๆ หยุด ให้ความรู้สึกลื่นกว่า ease เปล่า */
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---- บันไดระยะห่าง (ใช้ค่าจากชุดนี้เท่านั้น หน้าจึงสมมาตร) ---- */
  --s1:4px;  --s2:6px;  --s3:8px;  --s4:10px;
  --s5:12px; --s6:16px; --s7:20px; --s8:26px;

  /* ---- ความโค้งและความสูงมาตรฐาน ---- */
  --r-sm:9px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:24px;
  --nav-h:54px;
  --h-field:40px;      /* ความสูงของช่องกรอกและปุ่ม - เท่ากันเสมอ จะได้เรียงตรงกัน */
  --h-sm:30px;

  /* ---- ขนาดตัวอักษร ---- */
  --t-xs:11px;
  --t-sm:12px;
  --t-md:13px;
  --t-base:14px;
  --t-lg:16px;

  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  /* แสงออโรราสามกอง + เส้นตารางจาง ๆ ทำให้พื้นดำมีความลึกแทนที่จะเป็นดำตาย */
  background:
    radial-gradient(1100px 620px at 6% -12%, rgba(255,34,70,.20), transparent 60%),
    radial-gradient(900px 520px at 100% -2%, rgba(255,61,143,.13), transparent 58%),
    radial-gradient(760px 620px at 50% 118%, rgba(255,107,61,.08), transparent 62%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 0 0/100% 44px,
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:"Inter","IBM Plex Sans Thai",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable","Segoe UI","Noto Sans Thai","Sarabun",Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:"cv11","ss01";
  font-size:var(--t-base);
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  /* ภาษาไทยเขียนติดกันไม่มีเว้นวรรค เบราว์เซอร์จึงมองทั้งประโยคเป็น "คำเดียว"
     และไม่ยอมตัดบรรทัดให้ หัวข้อข่าวยาว ๆ เลยทะลุออกนอกจอบนมือถือ
     สั่งให้ตัดได้เมื่อจำเป็นไว้ที่ body ครั้งเดียว มีผลกับทุกกล่องในเว็บ */
  overflow-wrap:break-word;
  word-break:break-word;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3{letter-spacing:-.03em;line-height:1.2;margin:0}
h1{font-size:clamp(23px,3.6vw,33px);font-weight:750}
h2{font-size:var(--t-lg);font-weight:650}
h3{font-size:14.5px;font-weight:650}
p{margin:0}
small{font-size:var(--t-sm)}
.muted{color:var(--muted)}
.center{text-align:center}
.accent{color:var(--red);text-shadow:var(--glow-text)}
.wrap{width:min(1080px,100% - 32px);margin-inline:auto}

/* ============================================================
   แถบบนสุด
   ============================================================ */
.topbar{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 30px -18px rgba(0,0,0,.95);
}
/* เส้นแดงใต้แถบบน - ไล่จางที่ปลายทั้งสองข้าง ดูเบากว่าขีดแดงยาวเต็มจอ */
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,34,70,.55) 30%,rgba(255,61,143,.4) 70%,transparent);
}
.topbar-inner{height:100%;padding:0 var(--s6);display:flex;align-items:center;gap:var(--s4)}
.brand{
  display:flex;align-items:center;gap:var(--s3);
  font-weight:650;font-size:15px;white-space:nowrap;min-width:0;
  text-shadow:0 0 14px rgba(255,255,255,.14);
}
.brand .dot{
  width:22px;height:22px;border-radius:7px;flex:none;
  background:var(--grad-hot);
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.45);
  display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.brand:hover .dot{transform:rotate(-8deg) scale(1.06);box-shadow:0 0 22px rgba(255,34,70,.75), inset 0 1px 0 rgba(255,255,255,.5)}
/* ชื่อเว็บยาว ๆ ต้องหดได้ ไม่ใช่ดันชิปด้านขวาหลุดจอ */
.brand{overflow:hidden;text-overflow:ellipsis}
.top-right{margin-left:auto;display:flex;align-items:center;gap:var(--s2);min-width:0}

/* กรอบจำนวนสมาชิก/ออนไลน์บนแถบบน - ไม่นับแอดมิน (จอแคบซ่อนคำ เหลือไอคอน+ตัวเลข) */
.top-stats{display:flex;align-items:center;gap:var(--s2);flex:none}
.top-stats .stat-b{
  display:inline-flex;align-items:center;gap:6px;height:var(--h-sm);
  padding:0 11px;border-radius:999px;white-space:nowrap;
  background:var(--fill);border:1px solid var(--line);
  font-size:var(--t-sm);color:var(--muted);
}
.top-stats b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.top-stats .stat-b.on{border-color:var(--line-hot);background:rgba(255,34,70,.08);color:var(--red-bright)}
.top-stats .stat-b.on b{color:var(--red-bright)}
.top-stats .live{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--red);box-shadow:0 0 0 3px rgba(255,34,70,.16), var(--glow);
  animation:pulse 1.8s ease-in-out infinite;
}
@media (max-width:640px){
  .top-stats .tx{display:none}
  .top-stats .stat-b{padding:0 9px}
}
.toplink{
  padding:5px 11px;border-radius:999px;font-size:var(--t-md);font-weight:500;color:var(--muted);
  white-space:nowrap;transition:color .15s ease,background .15s ease;
}
.toplink:hover{color:var(--text);background:var(--fill)}
.toplink.active{color:var(--red);background:var(--red-soft);font-weight:600}
.toplink.cta{
  color:#fff;font-weight:600;
  background:var(--grad-hot);
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.28);
  transition:box-shadow .2s var(--ease),transform .15s var(--ease);
}
.toplink.cta:hover{box-shadow:0 0 26px rgba(255,34,70,.8), inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-1px)}

.chip{
  display:inline-flex;align-items:center;gap:var(--s2);min-width:0;
  height:var(--h-sm);padding:0 12px;border-radius:999px;
  background:var(--fill);border:1px solid var(--line);
  font-size:var(--t-md);font-weight:600;white-space:nowrap;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease);
}
.chip:active{transform:scale(.97)}
.chip:hover{border-color:var(--line-hot);background:rgba(255,34,70,.12);box-shadow:var(--glow-soft)}
.chip .ic{color:var(--red);font-weight:700;text-shadow:var(--glow-text);flex:none}
.chip.user{padding-left:3px;gap:var(--s1)}
/* ชื่อผู้ใช้ต้องยังอ่านออกเสมอ - จอแคบก็แค่ตัดด้วย ... ไม่ใช่ซ่อนตัวหนังสือทิ้ง
   (เดิมตั้ง font-size:0 บนจอเล็ก ชื่อจึงหายไปทั้งก้อน) */
.chip.user{max-width:min(42vw,190px);overflow:hidden}
.chip.user > .avatar{flex:none}
.avatar.sm{width:22px;height:22px;border-radius:50%;font-size:11px}

.burger{
  width:32px;height:32px;border-radius:9px;flex:none;
  border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:0;
}
.burger i{display:block;width:15px;height:1.7px;background:var(--text);border-radius:2px}

/* ============================================================
   โครงหน้า Dashboard
   ============================================================ */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - var(--nav-h))}
.side{
  position:sticky;top:var(--nav-h);flex:none;
  width:204px;height:calc(100vh - var(--nav-h));overflow-y:auto;
  padding:var(--s6) var(--s5) var(--s7);
  border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,34,70,.045),transparent 220px),rgba(8,8,13,.55);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.side-group{margin-bottom:var(--s6)}
.side-group:last-child{margin-bottom:0}
.side-title{
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding:0 var(--s4);margin-bottom:var(--s2);
}
.side-link{
  position:relative;
  display:flex;align-items:center;gap:var(--s4);width:100%;
  padding:8px var(--s4);border-radius:var(--r-md);margin-bottom:3px;
  font-size:var(--t-md);font-weight:500;color:var(--muted);
  border:0;background:transparent;cursor:pointer;font-family:inherit;text-align:left;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.side-link:hover{background:var(--fill-2);color:var(--text)}
/* ขีดแดงหน้าเมนูที่เลือกอยู่ - ยืดออกมาแทนที่จะโผล่มาทั้งแท่ง */
.side-link::before{
  content:"";position:absolute;left:0;top:50%;width:3px;height:0;border-radius:0 3px 3px 0;
  background:var(--red);box-shadow:var(--glow);
  transform:translateY(-50%);transition:height .25s var(--ease);
}
.side-link.active::before{height:60%}
.side-link.active{
  background:linear-gradient(90deg,rgba(255,34,70,.20),rgba(255,34,70,.02));
  color:#fff;font-weight:650;
}
.side-link .ic{
  width:24px;height:24px;flex:none;border-radius:8px;
  display:grid;place-items:center;font-size:12px;
  background:var(--fill-2);color:var(--muted);
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease);
}
.side-link:hover .ic{color:var(--text)}
.side-link.active .ic{background:var(--grad-hot);color:#fff;box-shadow:var(--glow)}
.side-link .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.side-link .badge{
  flex:none;background:var(--red);color:#fff;border-radius:999px;
  font-size:10px;font-weight:700;padding:1px 6px;box-shadow:var(--glow);
}
.side-scrim{display:none}

.content{flex:1;min-width:0;padding:var(--s6) var(--s7) 40px}
.content-inner{width:min(1180px,100%);margin-inline:auto}
main.guest{padding:var(--s8) 0 48px;min-height:calc(100vh - var(--nav-h) - 56px)}

.page-head{margin-bottom:var(--s6)}
.page-head p{color:var(--muted);margin-top:var(--s1)}
.dash-head{margin-bottom:var(--s5)}
.dash-head h1{font-size:clamp(19px,2.6vw,24px)}
.dash-head p{color:var(--muted);margin-top:3px;font-size:var(--t-md)}
.dash-alert{
  display:block;border-radius:var(--r-md);padding:var(--s5) var(--s6);margin-bottom:var(--s5);
  font-size:var(--t-md);font-weight:600;
  background:linear-gradient(90deg,rgba(255,34,70,.18),rgba(255,61,143,.08));
  border:1px solid var(--line-hot);
  color:var(--red-bright);box-shadow:var(--glow-soft);
  transition:box-shadow .2s var(--ease),border-color .2s var(--ease);
}
.dash-alert:hover{border-color:var(--red);box-shadow:var(--glow)}

@media (max-width:900px){
  .burger{display:flex}
  .content{padding:var(--s5) var(--s5) 36px}
  .side{
    position:fixed;top:var(--nav-h);left:0;bottom:0;height:auto;z-index:55;
    width:210px;transform:translateX(-100%);transition:transform .22s ease;
    background:var(--bg-2);
    box-shadow:0 10px 40px rgba(0,0,0,.7), 0 0 30px rgba(255,34,70,.12);
  }
  .side.open{transform:none}
  .side-scrim.show{
    display:block;position:fixed;inset:var(--nav-h) 0 0 0;z-index:54;
    background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
}

/* ============================================================
   การ์ดและกริด
   ============================================================ */
.card{
  position:relative;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.012)),var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s7);box-shadow:var(--shadow);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
/* เส้นแสงบาง ๆ ที่ขอบบน - เลียนแบบแสงตกกระทบขอบกระจก กล่องจึงดูมีความหนา */
.card::before{
  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.card:hover{border-color:var(--line-hot);box-shadow:var(--shadow-lg), var(--glow-soft)}
/* ยกเฉพาะการ์ดที่เป็น "ของให้เลือก/ให้ดู" การ์ดที่มีฟอร์มหรือตารางอยู่ข้างในไม่ยก
   เพราะเนื้อหาจะขยับหนีมือตอนกำลังกรอกหรือกำลังไล่อ่านทีละแถว */
.feature:hover,.service-card:hover,.chart-card:hover,.stat:hover{transform:translateY(-3px)}
@media (max-width:560px){.card{padding:var(--s6)}}
.card + .card{margin-top:var(--s5)}
.card-head{margin-bottom:var(--s5)}
.card-head p{color:var(--muted);font-size:var(--t-md);margin-top:3px}
.narrow{width:min(390px,100%);margin-inline:auto}

.grid{display:grid;gap:var(--s5)}
/* ลูกทุกตัวของกริดต้องหดได้ ไม่งั้นตารางหรือข้อความยาว ๆ จะดันกริดจนล้นออกนอกจอ */
.grid > *{min-width:0}
.grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* ในกริด ระยะห่างมาจาก gap อยู่แล้ว ถ้าปล่อย margin ติดมาด้วย
   การ์ดใบที่ 2 เป็นต้นไปจะถูกดันลงจนขอบบนไม่ตรงกัน */
.grid > .card + .card{margin-top:0}
.grid > .card{height:100%}
@media (max-width:860px){.grid.c3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid.c2,.grid.c3{grid-template-columns:1fr}}

/* ============================================================
   หน้าแรกก่อนล็อกอิน
   ============================================================ */
.hero{position:relative;padding:64px 0 40px;text-align:center}
/* แสงฟุ้งหลังหัวเรื่อง - ทำให้ชื่อเว็บเป็นจุดสนใจโดยไม่ต้องเพิ่มกรอบอะไรอีก */
.hero::before{
  content:"";position:absolute;left:50%;top:0;z-index:-1;pointer-events:none;
  width:min(700px,120%);height:360px;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(255,34,70,.22),rgba(255,61,143,.08) 55%,transparent 72%);
  filter:blur(24px);
}
.pill{
  display:inline-flex;align-items:center;gap:var(--s3);
  padding:5px var(--s5);border-radius:999px;margin-bottom:var(--s6);
  background:rgba(255,34,70,.12);color:var(--red-bright);
  border:1px solid var(--line-hot);box-shadow:var(--glow-soft);
  font-size:var(--t-sm);font-weight:600;letter-spacing:.01em;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
/* จุดสถานะกะพริบในป้ายเหนือหัวเรื่อง - บอกว่าระบบยังเดินอยู่จริง ๆ
   (ใช้ keyframes pulse ชุดเดียวกับไฟสถานะในศูนย์ทำงาน) */
.pill .live{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--red);box-shadow:0 0 0 3px rgba(255,34,70,.16), var(--glow);
  animation:pulse 1.8s ease-in-out infinite;
}
/* หัวเรื่องไล่เฉดขาว->เทา นุ่มตากว่าขาวล้วน และใช้ drop-shadow แทน text-shadow
   เพราะตัวอักษรถูกตัดเป็นรูปพื้นหลังไปแล้ว text-shadow จะไม่ขึ้น */
.hero h1{
  font-size:clamp(32px,6.4vw,56px);font-weight:800;letter-spacing:-.04em;line-height:1.06;
  background:linear-gradient(178deg,#FFFFFF 28%,#AEB4C2 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 34px rgba(255,34,70,.38));
}
.hero p.lead{color:var(--muted);font-size:clamp(14.5px,2vw,17px);line-height:1.65;margin:var(--s6) auto 0;max-width:540px}
.hero .actions{display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap;margin-top:var(--s8)}

.feature{display:flex;flex-direction:column}
.feature .ico{
  width:42px;height:42px;border-radius:13px;margin-bottom:var(--s5);
  background:linear-gradient(150deg,rgba(255,107,61,.22),rgba(255,34,70,.16) 55%,rgba(255,61,143,.18));
  border:1px solid var(--line-hot);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 8px 22px -12px rgba(255,34,70,.9);
  display:grid;place-items:center;font-size:19px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.feature:hover .ico{transform:translateY(-1px) scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 12px 26px -12px rgba(255,34,70,1)}
.feature p{color:var(--muted);font-size:var(--t-md);margin-top:var(--s1)}

/* ============================================================
   ปุ่ม
   ============================================================ */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s3);
  height:var(--h-field);padding:0 var(--s7);border-radius:var(--r-md);
  font-family:inherit;font-size:var(--t-base);font-weight:650;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;white-space:nowrap;
  background:var(--grad-hot);color:#fff;
  box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow:0 1px 6px rgba(0,0,0,.45);
  transition:transform .18s var(--ease),box-shadow .2s var(--ease),opacity .15s ease,filter .2s ease;
}
/* แสงวิ่งผ่านหน้าปุ่มตอนเอาเมาส์ชี้ - บอกว่ากดได้ โดยไม่ต้องเปลี่ยนสีปุ่มทั้งใบ */
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.30) 48%,transparent 62%);
  transform:translateX(-130%);
}
.btn:hover::after{transform:translateX(130%);transition:transform .65s var(--ease)}
.btn.ghost::after,.btn.danger::after{display:none}
.btn:hover{
  filter:saturate(1.12) brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 0 26px rgba(255,34,70,.75), 0 10px 24px -12px rgba(255,34,70,.9), inset 0 1px 0 rgba(255,255,255,.34);
}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--red-ring), var(--glow)}
.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed;transform:none}
.btn.block{width:100%}
.btn.sm{height:var(--h-sm);padding:0 var(--s4);font-size:var(--t-sm);border-radius:var(--r-sm)}
.btn.ghost{
  background:var(--fill);color:var(--text);border-color:var(--line);
  box-shadow:none;text-shadow:none;
}
.btn.ghost:hover{
  background:rgba(255,34,70,.10);border-color:var(--line-hot);color:var(--text);
  box-shadow:var(--glow-soft);
}
.btn.danger{
  background:transparent;color:var(--red);border-color:var(--line-hot);
  box-shadow:none;text-shadow:none;
}
.btn.danger:hover{background:rgba(255,34,70,.12);color:var(--red-bright);box-shadow:var(--glow-soft)}

/* ปุ่มกลม ๆ เลือกจำนวนวัน */
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.chips button{
  border:1px solid var(--line);background:var(--fill);color:var(--text);
  font-family:inherit;font-size:var(--t-md);font-weight:600;
  padding:5px var(--s5);border-radius:999px;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .12s ease;
}
.chips button:hover{
  background:rgba(255,34,70,.14);border-color:var(--red);color:var(--red-bright);
  box-shadow:var(--glow-soft);transform:translateY(-1px);
}
.chips button:active{transform:scale(.96)}

/* ============================================================
   ฟอร์ม
   ============================================================ */
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--t-sm);font-weight:600;margin-bottom:var(--s1)}
.input,select.input,textarea.input{
  width:100%;height:var(--h-field);padding:0 var(--s5);
  background:var(--field);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-md);
  color:var(--text);font-family:inherit;font-size:var(--t-base);outline:none;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease);
}
.input:hover:not(:focus){border-color:rgba(255,255,255,.16)}
textarea.input{height:auto;padding:var(--s4) var(--s5);line-height:1.5;resize:vertical}
select.input{
  -webkit-appearance:none;appearance:none;padding-right:32px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.input:focus{
  border-color:var(--red);background:#12121B;
  box-shadow:0 0 0 3px var(--red-ring), var(--glow-soft), inset 0 1px 2px rgba(0,0,0,.35);
}
.input::placeholder{color:var(--muted);opacity:.75}
.hint{font-size:var(--t-xs);color:var(--muted);margin-top:var(--s1);line-height:1.55}
.form-foot{margin-top:var(--s6);display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.alt{margin-top:var(--s5);text-align:center;font-size:var(--t-md);color:var(--muted)}
.alt a{color:var(--red);font-weight:600}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;background:rgba(255,34,70,.12);color:var(--red-bright);
  padding:1px 6px;border-radius:6px;
}

/* สวิตช์แบบ iOS */
.switch{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);padding:3px 0}
.switch .txt{min-width:0}
.switch .txt strong{display:block;font-size:var(--t-md)}
.switch .txt span{font-size:var(--t-sm);color:var(--muted)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  width:42px;height:25px;border-radius:999px;flex:none;cursor:pointer;
  background:rgba(255,255,255,.14);position:relative;transition:background .2s ease;
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);
  transition:transform .22s cubic-bezier(.3,1.2,.5,1);
}
.switch input:checked + .track{background:var(--red);box-shadow:var(--glow)}
.switch input:checked + .track::after{transform:translateX(17px)}
.switch input:focus-visible + .track{box-shadow:0 0 0 3px var(--red-ring)}

/* ============================================================
   ข้อความแจ้งเตือน / ป้ายสถานะ
   ============================================================ */
.flash{
  display:flex;align-items:center;gap:var(--s4);
  border-radius:var(--r-md);padding:var(--s5) var(--s6);margin-bottom:var(--s5);
  font-size:var(--t-md);font-weight:500;
  background:var(--fill);border:1px solid var(--line);box-shadow:var(--glow-soft);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  animation:rise .4s var(--ease) backwards;
}
.flash span{flex:none;font-weight:700}
.flash.ok{background:rgba(255,34,70,.12);border-color:var(--line-hot);color:var(--red-bright)}
.flash.err{background:rgba(255,34,70,.14);border-color:var(--red);color:var(--red-bright)}
.notice{
  border:1px solid var(--line);background:rgba(255,255,255,.035);
  border-radius:var(--r-lg);padding:var(--s6) var(--s7);
}
/* การ์ดที่ต้องสะดุดตา เช่น ซองอั่งเปาค้างในหน้าแอดมิน */
.card.alert-card{border-color:var(--red)}
.notice h3{margin-bottom:3px}
.notice p{color:var(--muted);font-size:var(--t-md)}
.tag{
  display:inline-block;padding:2px var(--s4);border-radius:999px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.01em;
  background:rgba(255,255,255,.07);color:var(--muted);border:1px solid var(--line);
}
.tag.red{
  background:rgba(255,34,70,.16);color:var(--red-bright);
  border-color:var(--line-hot);box-shadow:0 0 10px rgba(255,34,70,.28);
}

/* ============================================================
   ตัวเลขเด่นและกล่องแต้ม
   ============================================================ */
.stat .n,.total-box .n,.service-price,.ct-credits,.order-total strong,.chart-now .v{
  color:var(--red);text-shadow:var(--glow-text);
}
.stat{padding:var(--s6) var(--s7)}
.stat .n{font-size:26px;font-weight:750;letter-spacing:-.035em;line-height:1.15;
  font-variant-numeric:tabular-nums}
.stat .l{font-size:var(--t-sm);color:var(--muted);margin-top:3px}

.balance-card{
  border-radius:var(--r-lg);padding:var(--s6) var(--s7);
  background:
    radial-gradient(130% 170% at 0% 0%, rgba(255,34,70,.32), transparent 58%),
    radial-gradient(90% 140% at 100% 100%, rgba(255,61,143,.16), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),
    var(--card);
  border:1px solid var(--line-hot);
  box-shadow:var(--shadow), var(--glow-soft);
}
.balance-card .l{font-size:var(--t-sm);font-weight:500;color:var(--muted)}
.balance-card .n{
  font-size:clamp(22px,4.4vw,29px);font-weight:700;letter-spacing:-.03em;
  margin:2px 0 3px;color:var(--text);text-shadow:0 0 20px rgba(255,34,70,.75);
}
.balance-card .s{font-size:var(--t-sm);color:var(--muted)}
/* กล่องแต้มแบบสั้นในหน้างาน - กว้างเท่าเนื้อหา ไม่กินเต็มแถว */
.balance-card.slim.compact{
  display:inline-flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  width:auto;max-width:100%;padding:var(--s4) var(--s6);border-radius:var(--r-md);
}
.balance-card.slim.compact .n{font-size:21px;margin:0;line-height:1.15}
.balance-card.slim.compact .s{padding-left:var(--s5);border-left:1px solid var(--line)}
@media (max-width:520px){
  .balance-card.slim.compact{display:flex;width:100%}
  .balance-card.slim.compact .s{padding-left:0;border-left:0}
}

/* ============================================================
   ตาราง
   ============================================================ */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:var(--t-md);min-width:560px}
th{
  text-align:left;font-size:10.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
  padding:0 var(--s3) var(--s2);border-bottom:1px solid var(--line);
}
td{padding:var(--s4) var(--s3);border-bottom:1px solid rgba(255,255,255,.055);vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .18s var(--ease),box-shadow .18s var(--ease)}
tbody tr:hover{background:rgba(255,34,70,.06);box-shadow:inset 2px 0 0 var(--red)}
.who{display:flex;align-items:center;gap:var(--s3);min-width:0}
.who small{display:block;color:var(--muted);font-size:var(--t-xs)}
.avatar{
  width:30px;height:30px;border-radius:10px;flex:none;
  background:linear-gradient(150deg,rgba(255,107,61,.26),rgba(255,34,70,.18) 55%,rgba(255,61,143,.22));
  color:#fff;border:1px solid var(--line-hot);
  box-shadow:0 0 12px rgba(255,34,70,.22), inset 0 1px 0 rgba(255,255,255,.16);
  display:grid;place-items:center;font-weight:700;font-size:var(--t-md);
}
.row-actions{display:flex;gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
.row-actions form{display:inline}

.list-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.list-row:last-child{border-bottom:0}
.list-row .k{font-size:var(--t-md);color:var(--muted);flex:none}
.list-row .v{font-weight:600;font-size:var(--t-md);text-align:right;min-width:0;overflow-wrap:anywhere}

/* ============================================================
   หน้าภาพรวม - กราฟ 4 ใบเรียง 2 แถว
   ============================================================ */
.chart-card{padding:var(--s5) var(--s6)}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5)}
.chart-head h2{font-size:14.5px}
.chart-head p{font-size:var(--t-xs);margin-top:2px}
.chart-now{text-align:right;white-space:nowrap}
.chart-now .v{display:block;font-size:19px;font-weight:750;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums}
/* วันที่ตัวเลขติดลบ ไม่ต้องเรืองแดง จะได้อ่านออกว่าคนละความหมาย */
.chart-now .v.down{color:var(--muted);text-shadow:none}
.chart-now .d{font-size:var(--t-xs);color:var(--muted)}
.chart-now .d.up{color:var(--red);text-shadow:0 0 9px rgba(255,34,70,.45)}
.chart{margin-top:var(--s3);color:var(--text)}
.chart svg{display:block;width:100%;height:72px;overflow:visible}

.totals{margin-top:var(--s5)}
.totals-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.total-box{
  background:var(--fill);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:2px;
}
.total-box .l{font-size:var(--t-xs);color:var(--muted)}
.total-box .n{font-size:19px;font-weight:750;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@media (max-width:560px){.totals-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================================================
   ข่าวสาร - บัตรย่อ 3 ใบต่อแถว + ป๊อปอัปอ่านฉบับเต็ม
   ============================================================ */
.news-list{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);align-items:stretch;
}
.news-list > *{min-width:0}
.news-empty{grid-column:1 / -1}
.news-item{
  padding:0;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;
}
.news-item + .news-item{margin-top:0}
.news-item:hover{border-color:var(--line-hot);box-shadow:var(--shadow), var(--glow-soft)}
.news-item:focus-visible{outline:none;border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring)}
/* ปกบนบัตรย่อ: ล็อกสัดส่วน 16:9 ที่ตัวรูปโดยตรง - ถ้าล็อกที่กล่องเฉย ๆ
   รูปแนวตั้งจะดันกล่องยืดตามความสูงจริงของรูป (automatic minimum size ของ flex) */
.news-cover{background:rgba(255,255,255,.04);flex:none}
.news-cover img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.news-body{display:flex;flex-direction:column;flex:1;padding:var(--s5) var(--s6) var(--s6)}
.news-top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.news-top h2{font-size:15.5px}
.news-meta{color:var(--muted);font-size:var(--t-sm);margin:3px 0 var(--s3)}
.news-excerpt{
  font-size:var(--t-md);line-height:1.55;color:var(--muted);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.news-more{
  margin-top:auto;padding-top:var(--s4);
  color:var(--red);font-size:var(--t-sm);font-weight:600;
}
@media (max-width:1080px){.news-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.news-list{grid-template-columns:1fr}}

/* ป๊อปอัปอ่านข่าวเต็ม */
.news-modal{
  position:fixed;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;padding:var(--s6);
}
/* display:flex ด้านบนแรงกว่ากฎ [hidden] ของเบราว์เซอร์ - ต้องย้ำเอง ไม่งั้นฉากหลัง
   โปร่งใสจะลอยบังทั้งหน้าแล้วกินคลิกทุกจุดตั้งแต่ยังไม่เปิดป๊อปอัป */
.news-modal[hidden]{display:none}
.news-modal-backdrop{
  position:absolute;inset:0;background:rgba(4,4,9,.66);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .24s ease;
}
.news-modal-card{
  position:relative;width:min(680px,100%);max-height:min(82vh,760px);overflow-y:auto;
  background:var(--card);border:1px solid var(--line-hot);border-radius:var(--r-lg);
  box-shadow:var(--shadow), var(--glow-soft);
  padding:var(--s7);
  opacity:0;transform:translateY(30px) scale(.9);
}
/* เข้าแบบสปริง (เด้งเกินนิดแล้วคืนตัว) ออกแบบหุบลงเร็ว ๆ */
.news-modal.show .news-modal-backdrop{opacity:1}
.news-modal.show .news-modal-card{
  animation:news-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes news-pop{
  from{opacity:0;transform:translateY(30px) scale(.9)}
  to{opacity:1;transform:none}
}
.news-modal.hide .news-modal-backdrop{opacity:0}
.news-modal.hide .news-modal-card{animation:news-drop .2s ease forwards}
@keyframes news-drop{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(16px) scale(.94)}
}
.news-modal-close{
  position:sticky;top:0;float:right;margin:-6px -6px 0 var(--s4);
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--text);
  font-family:inherit;font-size:14px;line-height:1;
  transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.news-modal-close:hover{
  background:rgba(255,34,70,.16);border-color:var(--line-hot);color:var(--red-bright);
}
.news-modal-close:active{transform:scale(.94)}
.news-modal-content h2{font-size:19px}
.news-modal-content p{
  font-size:var(--t-base);line-height:1.65;overflow-wrap:anywhere;margin-top:var(--s4);
}
/* ในป๊อปอัปโชว์รูปเต็มไม่ครอป - จำกัดความสูงไว้ให้เนื้อหาข่าวยังโผล่โดยไม่ต้องเลื่อนไกล */
.news-full-cover{
  width:100%;height:auto;max-height:min(56vh,520px);object-fit:contain;display:block;
  background:rgba(255,255,255,.03);
  border-radius:var(--r-md);margin-bottom:var(--s5);border:1px solid var(--line);
}

/* ============================================================
   หน้าแรก (ผู้เยี่ยมชม) - การ์ดย่อของงานทั้ง 4 + ป๊อปอัปรายละเอียด
   ยืมโครงป๊อปอัปข่าว (news-modal/news-item/news-full) มาใช้ทั้งชุด
   ============================================================ */
.jobinfo-head{margin:38px 0 16px;text-align:center}
.jobinfo-head h2{font-size:clamp(20px,3vw,26px);letter-spacing:-.02em}
.jobinfo-head p{color:var(--muted);margin-top:4px;font-size:var(--t-md)}
.jobinfo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}
.jobinfo-grid > *{min-width:0}
/* .news-item ตั้ง padding:0 ไว้สำหรับบัตรข่าวมีรูปปก - บัตรงานไม่มีปกจึงคืนระยะขอบ */
.jobinfo-card{padding:var(--s6)}
.jobinfo-card h3{margin-top:var(--s4)}
.jobinfo-card .news-more{margin-top:auto;padding-top:var(--s4)}
/* การ์ดความน่าเชื่อถือ - ขนาดเท่าการ์ดงาน วางกลางแถวของตัวเอง
   ตัวหนังสือจัดกลาง + แสงออร่ากะพริบช้า ๆ ให้สะดุดตากว่าการ์ดงาน */
.jobinfo-trust{
  grid-column:1 / -1;justify-self:center;text-align:center;
  width:min(100%, calc((100% - 3*var(--s5)) / 4));
  border-color:var(--line-hot);
  animation:rise .5s var(--ease) backwards, trust-aura 2.8s ease-in-out 0.5s infinite;
}
.jobinfo-trust .ico{margin-inline:auto}
@keyframes trust-aura{
  0%,100%{box-shadow:var(--shadow), 0 0 16px rgba(255,34,70,.28)}
  50%{box-shadow:var(--shadow), 0 0 32px rgba(255,34,70,.55)}
}
@media (max-width:1080px){
  .jobinfo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jobinfo-trust{width:min(100%, calc((100% - var(--s5)) / 2))}
}
@media (max-width:640px){
  .jobinfo-grid{grid-template-columns:1fr}
  .jobinfo-trust{width:100%}
}

/* ---- โหมดกระชับของหน้าแรก: เป้าหมายคือเห็นครบในจอเดียวโดยไม่ต้องเลื่อน ----
   ลดช่องไฟและขนาดตัวอักษรเฉพาะในตัวห่อ .home-compact หน้าอื่นไม่กระทบ */
main.guest:has(.home-compact){padding:var(--s4) 0 4px;min-height:0}
.home-compact .hero{padding:2px 0 2px}
.home-compact .hero .pill{margin-bottom:var(--s3)}
.home-compact .hero h1{font-size:clamp(24px,3.8vw,34px)}
.home-compact .hero p.lead{font-size:var(--t-base);margin-top:var(--s2);max-width:620px}
.home-compact .hero .actions{margin-top:var(--s4)}
.home-compact .hero .actions .btn{height:32px;padding:0 var(--s6);font-size:var(--t-md)}
.home-compact .jobinfo-head{margin:var(--s4) 0 var(--s3)}
.home-compact .jobinfo-head h2{font-size:17px}
.home-compact .jobinfo-head p{font-size:var(--t-sm);margin-top:2px}
.home-compact .jobinfo-card{padding:var(--s4) var(--s5)}
.home-compact .jobinfo-card .ico{width:32px;height:32px;font-size:15px;border-radius:10px;margin-bottom:var(--s3)}
.home-compact .jobinfo-card h3{margin-top:var(--s2);font-size:var(--t-base)}
.home-compact .jobinfo-card p{font-size:var(--t-sm)}
.home-compact .jobinfo-card .news-more{padding-top:var(--s3);font-size:var(--t-xs)}

/* ข้อดีของเว็บ 6 ข้อแบบแถบย่อ */
.perk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.perk{
  display:flex;gap:var(--s4);align-items:flex-start;
  padding:var(--s3) var(--s4);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
}
.perk .ico{font-size:15px;flex:none;line-height:1.5}
.perk strong{display:block;font-size:var(--t-md)}
.perk small{display:block;color:var(--muted);font-size:var(--t-xs);line-height:1.5;margin-top:1px}
@media (max-width:1080px){.perk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.perk-grid{grid-template-columns:1fr}}

/* เนื้อหาในป๊อปอัป - สคริปต์คัดลอกเฉพาะไส้ใน .news-full คลาสบนตัวห่อจึงไม่ตามมา
   ต้องยึดกับกล่องเนื้อหาป๊อปอัปแทน */
.news-modal-content ul{margin:var(--s3) 0 0;padding-left:1.25em;display:grid;gap:7px}
.news-modal-content li{font-size:var(--t-base);line-height:1.65;color:var(--text)}
.jobinfo-warn{
  margin-top:var(--s6);padding:var(--s5) var(--s6);
  background:rgba(255,34,70,.07);border:1px solid var(--line-hot);border-radius:var(--r-md);
}
.jobinfo-warn h3{color:var(--red-bright);font-size:var(--t-base)}
.jobinfo-warn li{color:var(--muted)}
.jobinfo-warn li strong{color:var(--text)}

/* แถบโควตา YouTube API ในหน้าตั้งค่าระบบ */
.quota-bar{height:6px;border-radius:999px;background:var(--fill);overflow:hidden;margin:8px 0 4px}
.quota-bar i{display:block;height:100%;min-width:2px;background:var(--grad-hot);border-radius:999px}

/* หน้าแอดมินข่าว - รูปหน้าปก */
.news-row-title{display:flex;align-items:center;gap:var(--s3);min-width:0}
.news-thumb{
  width:54px;height:32px;object-fit:cover;flex:none;
  border-radius:7px;border:1px solid var(--line);
}
.input[type="file"]{padding:10px var(--s5);height:auto;cursor:pointer}
.input[type="file"]::file-selector-button{
  border:1px solid var(--line);background:var(--fill);color:var(--text);
  font-family:inherit;font-size:var(--t-sm);font-weight:600;
  padding:5px 12px;border-radius:999px;margin-right:12px;cursor:pointer;
}
.news-image-preview{
  display:flex;align-items:center;gap:var(--s4);margin-top:var(--s3);
}
.news-image-preview img{
  width:150px;aspect-ratio:16/9;object-fit:cover;
  border-radius:var(--r-md);border:1px solid var(--line-hot);
}

/* ============================================================
   หน้างาน - บัตรงานแบบสวิตช์เปิด/ปิดในตัว
   ============================================================ */
.svc-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s4);margin-top:var(--s6);
}
.svc-grid > *{min-width:0}
.svc-grid > .card{height:100%;padding:var(--s5)}
.svc-grid > .card + .card{margin-top:0}
.service-card{display:flex;flex-direction:column}
.service-card h3{font-size:var(--t-md)}
.service-card p{font-size:var(--t-sm);margin-top:3px;line-height:1.45;color:var(--muted)}
.service-price{
  font-size:15px;font-weight:700;letter-spacing:-.02em;padding-top:var(--s3);
}
.service-price span{font-size:var(--t-xs);font-weight:500;color:var(--muted);letter-spacing:0}
.service-price.free{color:var(--text);text-shadow:none}
.svc-grid .hint{font-size:var(--t-xs);margin-top:3px}
/* บัตรงานทั้ง 4 เรียงแถวเดียวบนจอกว้าง - หน้าจะได้จบโดยไม่ต้องเลื่อนไกล
   จอแคบลงค่อยหุบเป็น 2 และ 1 คอลัมน์ตามลำดับ */
.svc-grid.job-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
@media (max-width:1080px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1180px){.svc-grid.job-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .svc-grid,.svc-grid.job-cards{grid-template-columns:1fr}
}

/* ---- โหมดกระชับของหน้างาน: รวมกรอบเล็กไว้แถวเดียวกัน + ลดช่องไฟในบัตร ---- */
.jobs-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap}
.jobs-head .balance-card{flex:none}
.jobs-row{display:flex;gap:var(--s4);align-items:stretch;margin-top:var(--s4)}
.jobs-row .notice{
  flex:1;min-width:250px;
  padding:var(--s5) var(--s6);
  display:flex;flex-direction:column;justify-content:center;
}
.jobs-row .worker{flex:2;margin-top:0;padding:var(--s5) var(--s6)}
.jobs-row .worker .card-head{margin-bottom:var(--s3)}
.jobs-row .worker .card-head p{font-size:var(--t-sm)}
@media (max-width:900px){.jobs-row{flex-direction:column}.jobs-row .notice{min-width:0}}
.jobs-compact .svc-grid{margin-top:var(--s4)}
.jobs-compact .job-cards .input{height:32px}
.jobs-compact .job-cards .field{margin:var(--s3) 0 0}
.jobs-compact .job-cards .field label{margin-bottom:2px}
.jobs-compact .job-cards .chips{margin-top:var(--s2)}
.jobs-compact .job-cards .order-total{padding:var(--s3) var(--s5);margin-top:var(--s3)}
.jobs-compact .job-cards .order-total strong{font-size:14px}

.job-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4)}
.job-card-top .switch{padding:0;flex:none}
.job-card .field{margin:var(--s4) 0 0}
.job-card .order-total{margin-top:var(--s4)}
.job-card .job-live{margin-top:var(--s3)}
.job-card .job-live .v{font-size:var(--t-sm)}
.job-err{color:var(--red-bright)}
/* งานที่เปิดอยู่เด่นขึ้นนิด ให้กวาดตาแล้วรู้ทันทีว่าใบไหนกำลังเดิน */
.job-card[data-running="1"]{border-color:var(--line-hot);box-shadow:var(--shadow), var(--glow-soft)}
.order-total{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  background:linear-gradient(90deg,rgba(255,34,70,.10),rgba(255,255,255,.03));
  border:1px solid var(--line-hot);border-radius:var(--r-md);
  padding:var(--s5) var(--s6);margin-top:var(--s1);font-size:var(--t-md);
}
.order-total strong{font-size:16px;letter-spacing:-.02em}
.order-total small{display:block;font-size:var(--t-xs);font-weight:400}

/* ============================================================
   ศูนย์ทำงาน (คู่แลก)
   ============================================================ */
.worker{border-color:var(--line-hot);box-shadow:var(--shadow), var(--glow-soft)}
.worker-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5)}
.worker-stat{
  display:flex;align-items:center;gap:var(--s2);flex:none;
  font-size:var(--t-sm);color:var(--muted);white-space:nowrap;
}
.worker-idle{font-size:var(--t-md);color:var(--muted)}
.worker-idle a{color:var(--red);font-weight:600}
.dot-live{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.25);flex:none}
.dot-live.on{
  background:var(--red);
  box-shadow:0 0 0 4px rgba(255,34,70,.18), var(--glow);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px rgba(255,34,70,.18), 0 0 12px rgba(255,34,70,.5)}
  50%{box-shadow:0 0 0 7px rgba(255,34,70,.06), 0 0 24px rgba(255,34,70,.85)}
}
@media (prefers-reduced-motion:reduce){
  .dot-live.on{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ---- การเคลื่อนไหวตอนเปิดหน้า ----
   ใช้ fill-mode "backwards" ไม่ใช่ "both" - both จะค้าง transform:none ไว้หลังจบ
   แล้วไปทับ transform ตอน hover ของการ์ด ทำให้เอฟเฟกต์ยกการ์ดไม่ทำงาน */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero,.card,.news-item{animation:rise .5s var(--ease) backwards}
/* ไล่ขึ้นทีละใบ กวาดสายตาจากซ้ายไปขวาแทนที่จะโผล่พร้อมกันทั้งแถว */
.grid > *:nth-child(2),.svc-grid > *:nth-child(2){animation-delay:.05s}
.grid > *:nth-child(3),.svc-grid > *:nth-child(3){animation-delay:.1s}
.grid > *:nth-child(4),.svc-grid > *:nth-child(4){animation-delay:.15s}
.svc-grid > *:nth-child(n+5){animation-delay:.2s}
.task-top{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.task-top strong{font-size:14.5px}
.task-partner{
  background:var(--fill);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);font-weight:600;font-size:var(--t-base);overflow-wrap:anywhere;
}
.task-partner small{display:block;font-weight:400;font-size:var(--t-xs);margin-top:2px}
.task-actions{display:flex;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4)}
.worker-note{margin-top:var(--s3);font-size:var(--t-md);color:var(--muted);min-height:19px}
.worker-note.ok,.worker-note.err{color:var(--red-bright);font-weight:600}

/* ห้องดูคลิปพร้อมกัน */
.watch-box{
  position:relative;width:100%;aspect-ratio:16/9;margin-top:var(--s5);
  border-radius:var(--r-md);overflow:hidden;background:#000;
}
.watch-box iframe,.watch-box > div{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-progress{margin-top:var(--s5)}
.watch-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.4)}
.watch-bar span{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--ember),var(--red) 55%,var(--magenta));
  box-shadow:0 0 12px rgba(255,34,70,.7);transition:width .4s linear;
}
.watch-meta{
  display:flex;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;
  margin-top:var(--s3);font-size:var(--t-sm);color:var(--muted);
}

/* ============================================================
   หน้าช่องของฉัน
   ============================================================ */
.ch-row{display:flex;align-items:center;gap:var(--s5);margin-bottom:var(--s5);flex-wrap:wrap}
.ch-thumb{width:42px;height:42px;border-radius:50%;flex:none;object-fit:cover}
.ch-thumb.ph{
  background:rgba(255,34,70,.16);color:var(--red-bright);box-shadow:var(--glow-soft);
  display:grid;place-items:center;font-weight:700;font-size:17px;
}
.steps{margin:var(--s5) 0 0;padding-left:var(--s7);font-size:var(--t-md);line-height:1.75}
.steps li{margin-bottom:3px}
.steps a{color:var(--red);font-weight:600}
.phrase-box{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  background:var(--fill);border:1px dashed var(--line-hot);border-radius:var(--r-md);
  padding:var(--s5);font-size:15px;font-weight:600;line-height:1.5;
}
.phrase-box span{flex:1;min-width:170px;overflow-wrap:anywhere}
.copied{color:var(--red);font-weight:600}

/* ============================================================
   หน้าเติมเงิน - การ์ดอั่งเปาและหลอดเลื่อนคำนวณแต้ม
   ============================================================ */
.card.angpao{margin-top:var(--s5);border-color:var(--red);box-shadow:var(--shadow), var(--glow-soft)}
.angpao-form{display:flex;gap:var(--s4)}
.angpao-form .input{flex:1;min-width:0}
.angpao-form .btn{flex:none}
@media (max-width:560px){
  .angpao-form{flex-direction:column}
  .angpao-form .btn{width:100%}
}

.custom-topup{margin-top:var(--s5)}
.ct-top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s6)}
.ct-info{min-width:0}
.ct-info h2{font-size:15.5px}
.ct-sub{color:var(--muted);font-size:var(--t-sm);margin-top:3px;overflow-wrap:anywhere}
.ct-credits{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  font-size:20px;font-weight:700;letter-spacing:-.02em;margin-top:var(--s3);
}
.ct-bonus{
  font-size:var(--t-xs);font-weight:600;letter-spacing:0;
  background:var(--red-soft);color:var(--red);padding:3px var(--s4);border-radius:999px;
  text-shadow:none;
}
.ct-top .btn{flex:none}
@media (max-width:560px){
  .ct-top{flex-direction:column;align-items:stretch}
  .ct-top .btn{width:100%}
}

.ruler{position:relative;height:42px;margin-top:var(--s5)}
.ruler-ticks{
  position:absolute;left:2px;right:2px;top:4px;height:19px;pointer-events:none;opacity:.5;
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 12px);
  background-size:100% 19px,100% 10px;
  background-repeat:no-repeat;
}
.ruler input[type=range]{
  -webkit-appearance:none;appearance:none;
  position:absolute;left:0;right:0;bottom:5px;width:100%;height:28px;
  background:transparent;margin:0;cursor:pointer;
}
.ruler input[type=range]:focus{outline:none}
.ruler input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--red) 0 var(--pct,10%),rgba(255,255,255,.12) var(--pct,10%) 100%);
  box-shadow:0 0 10px rgba(255,34,70,.45);
}
.ruler input[type=range]::-moz-range-track{
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--red) 0 var(--pct,10%),rgba(255,255,255,.12) var(--pct,10%) 100%);
}
.ruler input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:44px;height:26px;margin-top:-11.5px;
  border-radius:999px;background-color:#14141D;border:1px solid var(--line-hot);
  box-shadow:0 0 14px rgba(255,34,70,.6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8 6 12l4 4M14 8l4 4-4 4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:19px;
}
.ruler input[type=range]::-moz-range-thumb{
  width:40px;height:24px;border-radius:999px;
  background-color:#14141D;border:1px solid var(--line-hot);
  box-shadow:0 0 14px rgba(255,34,70,.6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 8 6 12l4 4M14 8l4 4-4 4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:19px;
}
.ruler input[type=range]:focus-visible::-webkit-slider-thumb{
  border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring);
}
.ruler-scale{
  display:flex;justify-content:space-between;
  color:var(--muted);font-size:var(--t-xs);margin-top:-2px;
}

/* ============================================================
   หน้าแอดมิน - ตั้งค่างานหลัก (เปิด/ปิด + ราคาต่อวัน)
   ============================================================ */
.feature-row{
  display:grid;grid-template-columns:minmax(130px,1fr) minmax(0,1.6fr) 140px;
  gap:var(--s5);align-items:center;
  padding:var(--s5) 0;border-bottom:1px solid var(--line);
}
.feature-row:first-of-type{padding-top:0}
.feature-row:last-of-type{border-bottom:0}
.feature-name{min-width:0}
.feature-name strong{display:block;font-size:var(--t-base)}
.feature-name small{display:block;font-size:var(--t-xs);color:var(--muted)}
.feature-switch{padding:0}
.feature-price label{
  display:block;font-size:var(--t-xs);font-weight:600;color:var(--muted);margin-bottom:3px;
}
@media (max-width:820px){
  .feature-row{grid-template-columns:1fr;gap:var(--s4);padding:var(--s6) 0}
  .feature-price .input{max-width:190px}
}

/* หน้าแอดมิน - ระดับโบนัสเติมเงิน */
.tier-list{display:flex;flex-direction:column}
.tier-row{
  display:grid;grid-template-columns:minmax(110px,1fr) 100px minmax(170px,1.5fr) auto;
  gap:var(--s5);align-items:end;
  padding:var(--s4) 0;border-bottom:1px solid var(--line);
}
.tier-row:first-child{padding-top:0}
.tier-row:last-child{border-bottom:0;padding-bottom:0}
.tier-cell{display:block;margin:0;min-width:0}
.tier-cell > span{
  display:block;font-size:var(--t-xs);font-weight:600;color:var(--muted);margin-bottom:var(--s1);
}
.tier-range{
  font-size:var(--t-sm);line-height:1.45;padding-bottom:var(--s3);
  color:var(--muted);min-width:0;overflow-wrap:anywhere;
}
.tier-range.ok{color:var(--text)}
.tier-range.bad{color:var(--red)}
.tier-del{margin-bottom:1px}
.tier-row.blank .tier-cell > span{opacity:.6}
.tier-foot{
  display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}
.tier-foot .hint{margin-top:0}
@media (max-width:760px){
  .tier-row{grid-template-columns:1fr 100px;gap:var(--s4);padding:var(--s5) 0}
  .tier-range{grid-column:1 / -1;padding-bottom:0}
  .tier-del{grid-column:2;justify-self:end}
}

/* ============================================================
   แถบเลื่อนและการเลือกข้อความ
   ============================================================ */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:rgba(255,34,70,.28);border-radius:99px;border:3px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(255,34,70,.55);background-clip:padding-box}
html{scrollbar-color:rgba(255,34,70,.35) transparent;scrollbar-width:thin}
::selection{background:rgba(255,34,70,.4);color:#fff}