/* ============================================================
   HUAY TV — UI ใหม่ ☀ โทน GLO: ฟ้าสด + พื้นขาว + ส้ม/เขียว accent
   ฟอนต์ Baloo Thai 2 + Fredoka | หลายสีตามหมวด
   ============================================================ */
:root{
  --blue:#1f6fe5; --blue-2:#2a8af0; --blue-deep:#1556c4; --blue-soft:#eaf2ff;
  --orange:#ff7a2f; --orange-soft:#fff1e8; --green:#19a84f;
  --ink:#16213e; --ink-2:#34425f; --muted:#6f7e9c;
  --card:#ffffff; --paper:#ffffff; --surface:#ffffff;
  --bd:#e6edf7; --bd-strong:#d3e0f2;
  --shadow:0 10px 30px -16px rgba(31,111,229,.35);
  --radius:18px; --hero-ink:#ffffff;
  --num:"Fredoka",ui-rounded,system-ui,sans-serif;

  /* สีประจำหมวด */
  --c-laos:#16a34a; --c-hanoi:#ef4444; --c-stock:#1f6fe5;
  --c-stock_vip:#7c3aed; --c-dowjones:#3949c4; --c-special:#ff7a2f;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Baloo Thai 2","Noto Sans Thai",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(80% 55% at 50% -8%, color-mix(in srgb, var(--blue) 16%, var(--paper)), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, var(--paper)), color-mix(in srgb, var(--blue) 13%, var(--paper)));
  min-height:100vh; position:relative; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ออร่าตามโทนสีพรีเซต */
.bg-aura{position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 45% at 10% 0%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 60%),
    radial-gradient(60% 55% at 90% 100%, color-mix(in srgb, var(--blue-deep) 24%, transparent), transparent 60%);
  opacity:.8}
@keyframes auraPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ---------- Topbar ---------- */
.topbar{position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--blue) 9%, var(--paper));
  border-bottom:1px solid color-mix(in srgb, var(--blue) 16%, var(--bd)); box-shadow:0 2px 14px -12px color-mix(in srgb, var(--blue) 60%, transparent)}
.topbar-inner{width:95%; max-width:1180px; margin:auto;
  display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 0}
.brand{display:flex; flex-direction:column; line-height:1}
.brand-mark{font-family:"Fredoka",sans-serif; font-weight:700; font-size:25px; letter-spacing:.4px; color:var(--blue)}
.brand-mark b{color:var(--orange)}
.brand-sub{font-size:11px; color:var(--muted); letter-spacing:3px; margin-top:3px; text-transform:uppercase}
.status{display:flex; align-items:center; gap:10px;
  background:var(--blue-soft); border:1px solid var(--bd); border-radius:999px; padding:8px 14px}
.status-dot{width:10px; height:10px; border-radius:50%; background:var(--green);
  box-shadow:0 0 10px rgba(25,168,79,.7); animation:blink 1.4s infinite}
.status.is-off .status-dot{background:var(--orange); box-shadow:0 0 10px rgba(255,122,47,.7)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.status-text{display:flex; flex-direction:column; line-height:1.15}
.status-text b{font-size:13px; font-weight:700; color:var(--ink)}
.status-text small{font-size:10.5px; color:var(--muted)}

/* ---------- Page ---------- */
.page{width:95%; max-width:1180px; margin:auto; padding:22px 0 60px; position:relative; z-index:1}

/* ---------- Banner ---------- */
.banner{position:relative; overflow:hidden; border-radius:24px; margin-bottom:18px;
  border:1px solid var(--bd); box-shadow:0 16px 40px -22px rgba(31,111,229,.6); line-height:0}
.banner img{width:100%; height:auto; display:block; border-radius:24px}
.banner-shine{position:absolute; top:-30%; left:-60%; width:28%; height:170%;
  background:rgba(255,255,255,.28); transform:rotate(22deg); filter:blur(14px);
  pointer-events:none; animation:shine 4.5s linear infinite}
@keyframes shine{0%{left:-60%}100%{left:160%}}

/* ---------- Hero (การ์ดฟ้าแบบ GLO ตัวอักษรขาว) ---------- */
.hero{position:relative; overflow:hidden; color:var(--hero-ink);
  background:linear-gradient(135deg,var(--blue-2),var(--blue) 65%,var(--blue-deep));
  border-radius:26px; padding:26px 28px; margin-bottom:22px;
  box-shadow:0 20px 50px -22px rgba(31,111,229,.8)}
.hero::before{content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  border-radius:50%; background:rgba(255,255,255,.12)}
.hero::after{content:""; position:absolute; right:30px; bottom:-30px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,122,47,.30)}
.hero-eyebrow{display:inline-block; color:#fff; font-weight:700; letter-spacing:1px; font-size:12px;
  background:var(--orange); padding:4px 12px; border-radius:999px; position:relative; z-index:1}
.hero-title{font-family:"Fredoka",sans-serif; font-weight:700; font-size:clamp(30px,6vw,48px);
  line-height:1.05; margin:10px 0; color:var(--hero-ink); position:relative; z-index:1}
.hero-desc{color:color-mix(in srgb, var(--hero-ink) 82%, transparent); font-size:14.5px; max-width:660px; line-height:1.6; position:relative; z-index:1}
.line-cta{display:inline-flex; align-items:center; gap:8px; margin-top:16px; position:relative; z-index:1;
  background:var(--green); color:#fff; font-weight:700; font-size:14px;
  padding:11px 22px; border-radius:14px; text-decoration:none;
  box-shadow:0 10px 24px -10px rgba(25,168,79,.9); transition:transform .15s}
.line-cta:hover{transform:translateY(-2px)}

/* ---------- Toolbar (sticky) ---------- */
.toolbar{position:sticky; top:64px; z-index:40;
  display:flex; flex-direction:column; gap:12px; padding:12px; margin-bottom:18px;
  background:color-mix(in srgb, var(--blue) 9%, var(--paper));
  border:1px solid color-mix(in srgb, var(--blue) 16%, var(--bd)); border-radius:20px; box-shadow:var(--shadow)}
.search-wrap{position:relative; display:flex; align-items:center}
.search-ic{position:absolute; left:16px; color:var(--muted)}
.search-wrap input{width:100%; padding:13px 16px 13px 44px; font-size:15px; font-family:inherit;
  color:var(--ink); background:color-mix(in srgb, var(--blue) 5%, var(--paper)); border:1px solid var(--bd); border-radius:14px; outline:none; transition:.15s}
.search-wrap input::placeholder{color:#9aa9c6}
.search-wrap input:focus{border-color:var(--blue); background:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent)}
.chips{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; cursor:pointer; white-space:nowrap; font-family:inherit;
  padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600;
  color:var(--ink-2); background:color-mix(in srgb, var(--blue) 8%, var(--paper)); border:1px solid var(--bd); transition:.18s}
.chip:hover{background:color-mix(in srgb, var(--blue) 14%, var(--paper))}
.chip.is-active{color:#fff; border-color:transparent; box-shadow:0 8px 18px -8px rgba(0,0,0,.28)}
.chip[data-filter="all"].is-active{background:linear-gradient(135deg,var(--blue-2),var(--blue))}
.chip[data-filter="laos"].is-active{background:linear-gradient(135deg,#16a34a,#22c55e)}
.chip[data-filter="hanoi"].is-active{background:linear-gradient(135deg,#ef4444,#fb7185)}
.chip[data-filter="stock"].is-active{background:linear-gradient(135deg,#1f6fe5,#2a8af0)}
.chip[data-filter="stock_vip"].is-active{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.chip[data-filter="dowjones"].is-active{background:linear-gradient(135deg,#3949c4,#5566e0)}
.chip[data-filter="special"].is-active{background:linear-gradient(135deg,#ff7a2f,#ff9a5b)}

/* ---------- Sections (สีประจำหมวด) ---------- */
.section{margin-bottom:22px; content-visibility:auto; contain-intrinsic-size:auto 520px; opacity:0; transform:translateY(8px); animation:rise .35s forwards; --cat:var(--blue)}
.section[data-cat="laos"]{--cat:var(--c-laos)}
.section[data-cat="hanoi"]{--cat:var(--c-hanoi)}
.section[data-cat="stock"]{--cat:var(--c-stock)}
.section[data-cat="stock_vip"]{--cat:var(--c-stock_vip)}
.section[data-cat="dowjones"]{--cat:var(--c-dowjones)}
.section[data-cat="special"]{--cat:var(--c-special)}
@keyframes rise{to{opacity:1; transform:none}}
.section-head{display:flex; align-items:center; gap:11px; margin-bottom:12px; padding:11px 16px;
  border-radius:14px; border-left:5px solid var(--cat);
  background:linear-gradient(90deg, color-mix(in srgb, var(--blue) 16%, var(--paper)), color-mix(in srgb, var(--blue) 6%, var(--paper)));
  border-top:1px solid color-mix(in srgb, var(--blue) 18%, var(--paper));
  border-right:1px solid color-mix(in srgb, var(--blue) 18%, var(--paper));
  border-bottom:1px solid color-mix(in srgb, var(--blue) 18%, var(--paper));
  box-shadow:0 6px 16px -14px color-mix(in srgb, var(--blue) 70%, transparent)}
.section-flag{width:26px; height:26px; border-radius:50%; object-fit:cover; border:1px solid var(--bd-strong)}
.section-emoji{font-size:22px}
.section-title{font-family:"Fredoka",sans-serif; font-weight:700; font-size:21px; letter-spacing:.3px; color:var(--cat)}
.section-count{margin-left:auto; font-size:12px; font-weight:700; color:var(--cat);
  background:color-mix(in srgb, var(--cat) 12%, var(--paper)); border:1px solid color-mix(in srgb, var(--cat) 28%, var(--paper));
  padding:3px 11px; border-radius:999px}

.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:10px}

.card{position:relative; display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:10px;
  padding:12px 14px 12px 18px; border-radius:var(--radius);
  background:linear-gradient(180deg, color-mix(in srgb, var(--blue) 9%, var(--paper)), color-mix(in srgb, var(--blue) 4%, var(--paper)));
  border:1px solid color-mix(in srgb, var(--blue) 18%, var(--bd));
  box-shadow:0 6px 16px -14px color-mix(in srgb, var(--blue) 70%, transparent);
  transition:transform .15s, box-shadow .15s, border-color .15s; --cat:var(--blue); content-visibility:auto; contain-intrinsic-size:auto 64px}
.card[data-cat="laos"]{--cat:var(--c-laos)}
.card[data-cat="hanoi"]{--cat:var(--c-hanoi)}
.card[data-cat="stock"]{--cat:var(--c-stock)}
.card[data-cat="stock_vip"]{--cat:var(--c-stock_vip)}
.card[data-cat="dowjones"]{--cat:var(--c-dowjones)}
.card[data-cat="special"]{--cat:var(--c-special)}
.card::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:4px;
  border-radius:0 4px 4px 0; background:var(--cat); opacity:.9}
.card:hover{transform:translateY(-2px); border-color:color-mix(in srgb, var(--cat) 45%, var(--paper));
  box-shadow:0 14px 28px -16px color-mix(in srgb, var(--cat) 55%, transparent)}

.c-name{display:flex; align-items:center; gap:10px; min-width:0}
.c-flag{width:30px; height:30px; border-radius:50%; object-fit:cover; border:1px solid var(--bd-strong); flex:0 0 auto}
.c-name-text{min-width:0}
.c-title{font-size:16.5px; font-weight:700; line-height:1.2; cursor:pointer; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s}
.c-title:hover{color:var(--cat)}
.c-time{font-size:12px; color:var(--muted); margin-top:1px}

/* ปุ่มสถิติย้อนหลังในการ์ด */
.c-stats{display:inline-flex; flex-direction:column; align-items:center; gap:1px; cursor:pointer;
  font-family:inherit; font-size:10px; font-weight:700; line-height:1;
  color:var(--cat); background:color-mix(in srgb, var(--cat) 9%, var(--paper));
  border:1px solid color-mix(in srgb, var(--cat) 30%, var(--paper)); border-radius:12px;
  padding:7px 9px; transition:.15s; min-width:48px}
.c-stats svg{display:block}
.c-stats:hover{background:var(--cat); color:#fff; transform:translateY(-1px);
  box-shadow:0 6px 14px -6px color-mix(in srgb, var(--cat) 70%, transparent)}

.num{display:flex; flex-direction:column; align-items:center; min-width:64px}
.num-label{font-size:9.5px; color:var(--muted); font-weight:600; letter-spacing:.4px; margin-bottom:2px}
.num-val{font-family:var(--num); font-size:25px; font-weight:700; letter-spacing:1px; line-height:1}
.num-val.top{color:var(--ink)}
.num-val.bottom{color:var(--cat)}
.num-val.flash{animation:popFlash .65s ease}
@keyframes popFlash{0%{transform:scale(1.35); filter:brightness(1.3)}60%{transform:scale(1.05)}100%{transform:scale(1)}}

/* LIVE / pills */
.live{display:inline-flex; align-items:center; gap:5px; padding:5px 11px; border-radius:999px;
  font-family:"Fredoka",sans-serif; font-size:11px; font-weight:600; letter-spacing:.5px; color:#d35400;
  background:var(--orange-soft); border:1px solid #ffd0ac; animation:pulse 1.3s infinite}
.live-dot{width:6px; height:6px; border-radius:50%; background:var(--orange); box-shadow:0 0 6px var(--orange)}
.muted-pill{font-size:11px; color:var(--muted); font-weight:600;
  padding:5px 10px; border-radius:999px; background:color-mix(in srgb, var(--ink) 12%, transparent); border:1px solid var(--bd)}
@keyframes pulse{0%,100%{box-shadow:0 0 6px rgba(255,122,47,.3)}50%{box-shadow:0 0 16px rgba(255,122,47,.6)}}

.empty-state{text-align:center; padding:50px 20px; color:var(--muted)}
.empty-state .big{font-size:40px; margin-bottom:10px}

.skeleton-wrap{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:10px}
.skel{height:64px; border-radius:var(--radius);
  background:linear-gradient(100deg,#eef4fd,#dfeafb,#eef4fd); background-size:200% 100%; animation:shimmer 1.2s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.foot-note{text-align:center; color:#9aa9c6; font-size:12px; margin-top:30px; line-height:1.6}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  padding:18px; background:rgba(20,36,79,.4); backdrop-filter:blur(5px)}
.modal.open{display:flex; animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal-card{width:100%; max-width:560px; max-height:86vh; overflow:auto; position:relative;
  background:var(--surface); border:1px solid var(--bd-strong); border-radius:24px; padding:26px 22px;
  box-shadow:0 30px 80px -20px rgba(31,111,229,.5); animation:pop .22s}
@keyframes pop{from{transform:translateY(14px) scale(.98); opacity:0}to{transform:none; opacity:1}}
.modal-close{position:absolute; right:14px; top:14px; width:38px; height:38px; border:none;
  border-radius:50%; background:linear-gradient(135deg,var(--blue-2),var(--blue)); color:#fff;
  font-size:22px; cursor:pointer; transition:transform .15s}
.modal-close:hover{transform:rotate(90deg)}
.h-title{display:flex; align-items:center; gap:10px; font-family:"Fredoka",sans-serif;
  font-size:23px; font-weight:700; margin-bottom:4px; color:var(--ink)}
.h-title img{width:30px; height:30px; border-radius:50%; border:1px solid var(--bd-strong)}
.h-sub{color:var(--muted); font-size:13px; margin-bottom:18px}
.h-head,.h-row{display:grid; grid-template-columns:1.1fr .7fr .7fr; align-items:center}
.h-head{font-size:11px; color:var(--muted); font-weight:600; padding:0 14px 8px; letter-spacing:.4px}
.h-row{padding:11px 14px; border-radius:14px; margin-bottom:8px; background:color-mix(in srgb, var(--blue) 8%, var(--surface)); border:1px solid var(--bd)}
.h-row:nth-child(odd){background:color-mix(in srgb, var(--blue) 14%, var(--surface))}
.h-date{font-size:14px; font-weight:500; color:var(--ink-2)}
.h-num{font-family:var(--num); font-size:19px; font-weight:700; text-align:center}
.h-num.top{color:var(--ink)}
.h-num.bottom{color:var(--blue)}
.h-empty{text-align:center; color:var(--muted); padding:24px; font-size:14px}
.h-loading{text-align:center; color:var(--muted); padding:30px}

/* ---------- โหมดกระชับ (ui-compact) ---------- */
body.ui-compact .cards{grid-template-columns:1fr; gap:6px}
body.ui-compact .card{padding:8px 12px 8px 14px; border-radius:12px}
body.ui-compact .card::before{top:8px; bottom:8px}
body.ui-compact .num-val{font-size:20px}
body.ui-compact .num{min-width:52px}
body.ui-compact .c-title{font-size:15px}
body.ui-compact .c-time{font-size:11px}
body.ui-compact .c-flag{width:26px; height:26px}
body.ui-compact .c-stats span{display:none}
body.ui-compact .c-stats{min-width:0; padding:7px}


/* ===== โหมดหรู (Luxury): โลหะทองมันวาว + ประกายวิ่ง ===== */
@keyframes shineText{0%{background-position:0% center}100%{background-position:200% center}}
.lux .brand-mark,.lux .hero-title{
  background:linear-gradient(100deg,var(--blue-deep),var(--blue) 28%,#fff7d6 48%,var(--blue) 64%,var(--blue-deep) 90%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:shineText 3.4s linear infinite}
/* ป้าย LIVE/งดออก ในเซลล์ตัวเลข ต้องไม่โดน text-fill transparent */
.lux .num-val .live,.lux .num-val .live *,.lux .num-val .muted-pill{-webkit-text-fill-color:currentColor}
.lux .section-title,.lux .num-val.top,.lux .num-val.bottom{
  background:linear-gradient(115deg,var(--blue-deep),var(--blue) 32%,#fff7d6 50%,var(--blue) 68%,var(--blue-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.lux .hero-eyebrow{box-shadow:0 0 16px color-mix(in srgb,var(--blue) 55%,transparent)}
.lux .card{border-color:color-mix(in srgb,var(--blue) 32%,var(--bd));
  box-shadow:0 8px 24px -14px color-mix(in srgb,var(--blue) 85%,transparent),inset 0 1px 0 color-mix(in srgb,var(--blue) 22%,transparent)}
.lux .card::before{box-shadow:0 0 12px color-mix(in srgb,var(--blue) 75%,transparent)}
.lux .section-count{border-color:color-mix(in srgb,var(--blue) 42%,var(--bd));color:var(--blue)}
.lux .status{box-shadow:0 0 16px -4px color-mix(in srgb,var(--blue) 50%,transparent)}
.lux .c-flag,.lux .section-flag{box-shadow:0 0 0 1px color-mix(in srgb,var(--blue) 45%,transparent)}
body.lux{background-image:
  repeating-linear-gradient(135deg, color-mix(in srgb,var(--blue) 6%,transparent) 0 1px, transparent 1px 24px),
  radial-gradient(80% 55% at 50% -8%, color-mix(in srgb, var(--blue) 18%, var(--paper)), transparent 70%),
  linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, var(--paper)), color-mix(in srgb, var(--blue) 14%, var(--paper)))}

/* ---------- Responsive ---------- */
@media (max-width:560px){
  .cards,.skeleton-wrap{grid-template-columns:1fr}
  .card{gap:7px; padding-left:16px}
  .hero{padding:22px 20px}
  .toolbar{top:60px}
  .num{min-width:46px}
  .num-val{font-size:21px}
  .num-label{font-size:9px}
  .c-title{font-size:15px}
  .c-stats{min-width:0; padding:7px}
  .c-stats span{display:none}
  .section-head{padding:9px 13px}
  .brand-sub{display:none}
  .status-text small{display:none}
}