/* ============================================================
   NTP Movie — design tokens (dark only)
   โทน neutral + สีรอง เหลือง/ส้ม (amber/orange)
   ฟอนต์: Roboto Flex (อังกฤษ/ตัวเลข) + Noto Sans Thai (ไทย)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,300..700&family=Noto+Sans+Thai:wght@300..700&display=swap');

:root, .dark {
  /* พื้นผิวทึบ neutral (ไม่โปร่งใส) */
  --background: 0.145 0 0;
  --foreground: 0.965 0 0;
  --card: 0.196 0 0;
  --card-foreground: 0.965 0 0;
  --popover: 0.205 0 0;
  --popover-foreground: 0.965 0 0;

  /* primary = ส้ม/เหลือง (สีรอง) */
  --primary: 0.769 0.158 64;
  --primary-foreground: 0.18 0.03 60;

  --secondary: 0.255 0 0;
  --secondary-foreground: 0.965 0 0;
  --muted: 0.235 0 0;
  --muted-foreground: 0.66 0 0;
  --accent: 0.275 0 0;
  --accent-foreground: 0.965 0 0;
  --destructive: 0.62 0.21 25;

  --border: 0.275 0 0;
  --input: 0.305 0 0;
  --ring: 0.769 0.158 64;
  --radius: 0.75rem;
}

html { color-scheme: dark; }

* {
  font-family: "Roboto Flex", "Noto Sans Thai", system-ui, sans-serif;
  font-optical-sizing: auto;
}
html, body {
  font-family: "Roboto Flex", "Noto Sans Thai", system-ui, sans-serif;
}

body {
  background: oklch(var(--background));
  color: oklch(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.005em;
}

/* ตัวเลข/อังกฤษ ให้ใช้ tabular + ฟอนต์ Flex เด่นชัด */
.font-num { font-variant-numeric: tabular-nums; }

/* ซ่อน scrollbar แถบเลื่อนแนวนอน */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

.line-clamp-1 {
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.line-clamp-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Skeleton ระหว่างโหลดรูป */
.skeleton { position: relative; overflow: hidden; background: oklch(var(--muted)); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, oklch(var(--foreground) / 0.06), transparent);
  animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer { 100% { transform: translateX(100%); } }
img.is-loaded { background: transparent !important; }

/* scrollbar หลักของหน้า — โทน neutral */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: oklch(var(--background)); }
::-webkit-scrollbar-thumb { background: oklch(var(--border)); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--muted-foreground)); }

/* เส้นไฮไลต์หัวข้อ (เหลือง→ส้ม) */
.accent-bar {
  width: 0.25rem; border-radius: 9999px;
  background: linear-gradient(to bottom, #fbbf24, #f97316);
}

/* การ์ดเลื่อนขึ้นเล็กน้อยตอน hover */
@media (hover: hover) {
  .card-rise { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .card-rise:hover { transform: translateY(-4px); }
}