/* ════════════════════════════════════════════════════════════
   ที่ว่างว่าง — หน้าแรก
   สี/ฟอนต์ตาม Brand Guideline Vol.1 (2025)
   ════════════════════════════════════════════════════════════ */

:root {
  --yellow:   #F5CE1B;
  --red:      #D22E2C;
  --blue:     #1E56A8;
  --green:    #2E6B2E;
  --charcoal: #3B3B3B;
  --cream:    #F3F0E7;

  /* พื้นหลังของภาพเรนเดอร์คือ #1F232B — ใช้เป็นพื้นหน้าเว็บให้ขอบภาพกลืนสนิท */
  --ink:      #1F232B;
  --ink-2:    #12161C;
  --line:     #333943;
  --text:     #F3F0E7;
  --text-dim: #CFD4DB;
  --text-mut: #A8B0BB;
  --text-far: #6F7885;

  --f-display: 'Mitr', system-ui, sans-serif;
  --f-num:     'Anton', system-ui, sans-serif;
  --f-label:   'Archivo', system-ui, sans-serif;
  --f-body:    'Noto Sans Thai', system-ui, sans-serif;

  --pad: clamp(20px, 4vw, 64px);
  /* ขอบซ้าย-ขวาที่ทำให้เนื้อหาอยู่ในกรอบ 1440px จัดกลางจอ */
  --gut: max(var(--pad), calc((100% - 1440px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-body);
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: var(--yellow); text-decoration: none; }
a:hover { color: #fff; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--yellow); color: var(--charcoal);
  padding: 12px 18px; font-family: var(--f-display); font-weight: 600;
}
.skip:focus { left: 0; }

/* ── header ───────────────────────────────────────────── */
.hdr {
  display: flex; align-items: center; gap: 13px;
  padding: 16px var(--gut);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 13px; color: inherit; }
.brand:hover { color: inherit; }
.brand-badge { width: 38px; height: 38px; border-radius: 50%; }
.brand-name { font-family: var(--f-display); font-weight: 600; font-size: 18px; color: #fff; }
.brand-bars { display: flex; gap: 4px; align-self: flex-end; margin-bottom: 6px; }
.brand-bars i { width: 16px; height: 4px; display: block; }
.brand-bars i:nth-child(1) { background: var(--yellow); }
.brand-bars i:nth-child(2) { background: var(--red); }
.brand-bars i:nth-child(3) { background: var(--blue); }

.nav { margin-left: auto; display: flex; gap: clamp(16px, 3vw, 24px); }
.nav a { font-size: 14px; color: var(--text-mut); }
.nav a:hover { color: #fff; }

/* ── hero ─────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--ink); }

/* กรอบภาพล็อกอัตราส่วนเท่าไฟล์จริง (1672:941) แล้ววางชิดขวา
   ที่ว่างทางซ้ายเป็นสีเดียวกับพื้นหลังในภาพพอดี จึงกลืนสนิท และภาพไม่เคยถูกครอป */
.hero-art {
  position: absolute; top: 50%;
  /* ตัวหนังสืออยู่ในกรอบ 1440 แต่ภาพทะลุขอบขวาจอ — งานแบบ editorial
     ขอบขวาจึงไม่มีที่ว่าง และชั้นข้อมูลอ่านได้ว่าทอดยาวออกไปนอกจอ */
  right: 0;
  transform: translateY(-50%);
  width: min(100%, var(--art-w, 1120px));
  aspect-ratio: 1672 / 941;
}

/* ห้าแถบใช้ภาพเดียวกัน ตำแหน่งเดียวกัน ตัดด้วย clip-path ตามแนวระนาบ
   ตอนอยู่นิ่งจึงประกบกลับเป็นภาพต้นฉบับพอดี ไม่มีรอยต่อ */
.band { position: absolute; inset: 0; }
.band-img {
  position: absolute; inset: 0; display: block;
  background-image: url('../assets/cover-1280.jpg');
  background-image: -webkit-image-set(url('../assets/cover-1280.webp') 1x);
  background-image: image-set(url('../assets/cover-1280.webp') type('image/webp'),
                              url('../assets/cover-1280.jpg')  type('image/jpeg'));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
@media (min-width: 1400px) {
  .band-img {
    background-image: image-set(url('../assets/cover-1920.webp') type('image/webp'),
                                url('../assets/cover-1920.jpg')  type('image/jpeg'));
  }
}

.b1 { clip-path: polygon(0% -5%,   100% -5%,   100% 2.3%,  0% 55.8%); }
.b2 { clip-path: polygon(0% 55.3%, 100% 2.3%,  100% 11.5%, 0% 65.0%); }
.b3 { clip-path: polygon(0% 64.5%, 100% 11.5%, 100% 23.5%, 0% 77.0%); }
.b4 { clip-path: polygon(0% 76.5%, 100% 23.5%, 100% 38.1%, 0% 91.6%); }
.b5 { clip-path: polygon(0% 91.1%, 100% 38.1%, 100% 105%,  0% 105%); }

.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(96deg,
    var(--ink) 30%, rgba(31,35,43,.92) 42%, rgba(31,35,43,.34) 54%, rgba(31,35,43,0) 66%);
}

.sheen-clip { position: absolute; inset: 0 0 0 46%; overflow: hidden; pointer-events: none; }
.sheen {
  position: absolute; top: -20%; bottom: -20%; width: 160px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.13), rgba(255,255,255,0));
}

.dot { position: absolute; width: 11px; height: 11px; border-radius: 50%; }
.d1 { left: 61.6%; top: 38.3%; background: var(--yellow); }
.d2 { left: 76.6%; top: 43.2%; background: var(--red); }
.d3 { left: 89.8%; top: 48.2%; background: var(--blue); }

.hero-copy {
  position: relative;
  padding: clamp(36px, 6vw, 52px) var(--pad) clamp(44px, 7vw, 64px);
  padding-left: var(--gut);
}
/* จำกัดความยาวบรรทัดที่ลูก ไม่ใช่ที่ตัวคอลัมน์ — เพราะ % ใน padding คิดจากกล่องแม่ */
.hero-copy > * { max-width: 600px; }

.eyebrow {
  font-family: var(--f-label); font-weight: 800; letter-spacing: .14em;
  font-size: 12px; color: var(--yellow); margin: 0;
}

.hero-copy h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(40px, 8.2vw, 76px);
  line-height: 1.04; color: #fff;
  margin: 20px 0 0; text-wrap: pretty;
}

.lede {
  position: relative;
  border-left: 7px solid var(--blue);
  padding-left: 13px;
  font-size: clamp(15px, 1.9vw, 17px);
  line-height: 1.7; color: var(--text-dim);
  margin: 28px 0 0;
}
.lede-red { border-left-color: var(--red); }

.btn {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(16px, 2vw, 18px);
  padding: 15px 30px; margin-top: 34px;
  min-height: 48px;
  align-self: flex-start;   /* กันไม่ให้ยืดเต็มความกว้างใน .hero-copy ที่เป็น flex column */
  transition: transform .15s ease, background-color .15s ease;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--yellow); color: var(--charcoal); }
.btn-primary svg { stroke: var(--charcoal); }
.btn-primary:hover { background: #ffdc45; color: var(--charcoal); }

.btn-ghost { border: 1.5px solid var(--text-far); color: var(--text); font-weight: 500; padding: 13px 26px; }
.btn-ghost svg { stroke: var(--yellow); }
.btn-ghost:hover { border-color: var(--yellow); color: #fff; }

.stat {
  display: flex; align-items: center; gap: 16px;
  border-left: 7px solid var(--yellow);
  padding: 6px 0 6px 17px; margin: 34px 0 0;
}
.stat-num {
  font-family: var(--f-num); letter-spacing: .04em;
  font-size: clamp(28px, 4.4vw, 38px); line-height: 1; color: #fff;
  min-width: 5.9ch; font-variant-numeric: tabular-nums;
}
.stat-lbl { font-size: 13px; line-height: 1.5; color: var(--text-mut); }

/* ── blue divider ─────────────────────────────────────── */
.bluebar {
  background: var(--blue); color: #fff;
  padding: 12px var(--gut);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
}
.bluebar-th { font-family: var(--f-display); font-weight: 600; font-size: clamp(15px, 2vw, 18px); }
.bluebar-en { font-family: var(--f-label); font-weight: 800; letter-spacing: .14em; font-size: 13px; color: #CFE0FF; }

/* ── feas ─────────────────────────────────────────────── */
.feas {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(24px, 4vw, 44px); align-items: center;
  padding: clamp(34px, 5vw, 46px) var(--gut) clamp(30px, 4vw, 40px);
}
.feas-copy h2 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(26px, 4.4vw, 40px); line-height: 1.18; color: #fff;
  margin: 0; text-wrap: pretty;
}
.feas-copy h2 mark { background: var(--yellow); color: var(--charcoal); padding: 0 9px; }
.feas-copy .lede { margin-top: 22px; }
.feas-copy .btn { margin-top: 28px; }

.feas-card { background: var(--ink-2); padding: 22px 24px; }
.card-kicker {
  font-family: var(--f-label); font-weight: 800; letter-spacing: .14em;
  font-size: 11px; color: #8F97A3; margin: 0 0 14px;
}
.rows { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 3px 9px; }
.row dt, .row dd { margin: 0; font-family: var(--f-label); font-weight: 700; font-size: 13px; color: #E7EBF0; }
.row dt { font-weight: 700; }
.row-hi { background: rgba(46,107,46,.32); padding: 6px 9px; }
.v-plain { font-weight: 800; color: #fff; }
.v-box { border: 2px solid var(--red); padding: 0 7px; font-weight: 800; color: var(--yellow); white-space: nowrap; }

.magic {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 0;
  font-family: var(--f-display); font-weight: 700; font-size: 15px; color: var(--yellow);
}
.magic-bar { width: 90px; height: 5px; background: var(--blue); flex: 0 0 auto; }
.magic-note { font-size: 12px; line-height: 1.55; color: var(--text-mut); margin: 8px 0 0; }
.card-fine { font-size: 11px; color: var(--text-far); margin: 14px 0 0; }

/* ── ticker ───────────────────────────────────────────── */
.ticker-wrap { display: flex; align-items: stretch; background: var(--yellow); overflow: hidden; }
.ticker-label {
  background: var(--charcoal); color: var(--yellow);
  font-family: var(--f-label); font-weight: 800; letter-spacing: .14em; font-size: 12px;
  padding: 13px 22px; display: flex; align-items: center; flex: 0 0 auto;
}
.ticker-view { overflow: hidden; flex: 1 1 auto; display: flex; align-items: center; }
.ticker {
  display: flex; align-items: center; margin: 0; padding: 0; list-style: none;
  white-space: nowrap; will-change: transform;
}
.ticker li {
  font-family: var(--f-display); font-weight: 500; font-size: 15px;
  color: var(--charcoal); padding: 0 20px;
  display: flex; align-items: center; gap: 20px;
}
.ticker li::after {
  content: ''; width: 6px; height: 6px; background: var(--charcoal);
  transform: rotate(45deg); flex: 0 0 auto;
}

/* ── footer ───────────────────────────────────────────── */
.ftr {
  border-top: 1px solid var(--line);
  padding: 22px var(--gut);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  flex-wrap: wrap;
}
.src { font-size: 12px; line-height: 1.6; color: var(--text-far); margin: 0; }
.ftr .brand-bars { align-self: center; margin: 0; }
.ftr .brand-bars i { width: 20px; height: 5px; }

/* ════════ ขนาดจอ ════════ */

/* เดสก์ท็อป: ภาพอยู่หลังตัวหนังสือ */
@media (min-width: 861px) {
  .hero { min-height: 640px; }
  .hero-copy { min-height: 640px; display: flex; flex-direction: column; justify-content: center; }
}

/* มือถือ/แท็บเล็ตแคบ: ตัวหนังสือก่อน แล้วภาพเต็มกว้างอยู่ใต้ — ไม่ให้ตัวหนังสือทับภาพ */
@media (max-width: 860px) {
  .hero { display: flex; flex-direction: column-reverse; }
  .hero-art { position: relative; right: auto; top: auto; transform: none; width: 100%; aspect-ratio: 5 / 4; }
  /* --art-w ใช้เฉพาะจอกว้าง — มือถือกินเต็มความกว้างเสมอ */
  .band-img { background-position: 76% 50%; }
  .dot { display: none; }   /* ตำแหน่งจุดอิงครอปเดสก์ท็อป พอครอปใหม่จะไม่ตรงสถานี */
  .scrim {
    background: linear-gradient(180deg, rgba(31,35,43,.55) 0%, rgba(31,35,43,0) 28%, rgba(31,35,43,0) 78%, var(--ink) 100%);
  }
  .sheen-clip { inset: 0; }
  .hero-copy { max-width: none; padding-bottom: clamp(28px, 6vw, 40px); }
  .feas { grid-template-columns: 1fr; }
  .ticker li { font-size: 14px; padding: 0 15px; gap: 15px; }
  .ticker-label { padding: 11px 16px; font-size: 11px; }
}

@media (max-width: 520px) {
  .stat { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stat-num { font-size: 34px; min-width: 0; }
  .btn { width: 100%; justify-content: space-between; }
  .nav a { font-size: 13px; }
  .brand-name { font-size: 17px; }
  .bluebar-en { display: none; }
}

/* ════════ การเคลื่อนไหว ════════ */
@keyframes twwSettle {
  from { opacity: 0; transform: translate3d(var(--sx, 0), var(--sy, 0), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes twwBreathe {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(var(--bx, 0), var(--by, 0), 0); }
}
@keyframes twwSheen {
  0%   { transform: translateX(-30%) skewX(-14deg); opacity: 0; }
  12%  { opacity: .5; }
  55%  { opacity: .5; }
  100% { transform: translateX(130%) skewX(-14deg); opacity: 0; }
}
@keyframes twwPulse {
  0%, 100% { opacity: .25; transform: scale(1); }
  50%      { opacity: .9;  transform: scale(1.5); }
}
@keyframes twwTicker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.band     { animation: twwSettle 1.15s cubic-bezier(.16,.84,.28,1) both; }
.band-img { animation: twwBreathe 11s ease-in-out 1.5s infinite; }

.b1 { --sx: -13px; --sy: -56px; animation-delay: .32s; }
.b2 { --sx:  -7px; --sy: -27px; animation-delay: .24s; }
.b3 { --sx:   0px; --sy:   0px; animation-delay: .16s; }
.b4 { --sx:   7px; --sy:  27px; animation-delay: .08s; }
.b5 { --sx:  13px; --sy:  56px; animation-delay: 0s;   }

.b1 .band-img { --bx: -2px; --by: -6px; }
.b2 .band-img { --bx: -1px; --by: -3px; }
.b3 .band-img { --bx:  0px; --by:  0px; }
.b4 .band-img { --bx:  1px; --by:  3px; }
.b5 .band-img { --bx:  2px; --by:  6px; }

.sheen { animation: twwSheen 9s ease-in-out infinite; }
.dot   { animation: twwPulse 3.4s ease-in-out infinite; }
.d2    { animation-delay: 1.1s; }
.d3    { animation-delay: 2.2s; }

.ticker { animation: twwTicker 42s linear infinite; }
.ticker-wrap:hover .ticker { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .band, .band-img, .sheen, .dot, .ticker { animation: none !important; }
  .band { opacity: 1; }
  .sheen-clip { display: none; }
  .ticker-view { overflow-x: auto; }
}