/* ══════════════════════════════════════════════════════════════════
   styles-v3.css — Redesign v3 (งานที่ 28)
   งานที่ 28: Landing / สร้างดีล / ตามหา
   งานที่ 29: ขยายธีมมืดไปทุกหน้าที่เหลือ (ดูหมวด 10 ท้ายไฟล์)
   ══════════════════════════════════════════════════════════════════
   ⚠️ ไฟล์นี้โหลด "หลัง" styles.css และ tamha.css เสมอ (index.html)
   และทุก selector ต้องมีจุดยึดเป็น #page-* ตัวใดตัวหนึ่ง หรือ body.v3-dark
   เสมอ — ดูรายการเต็มใน tests/policy/test-v3-css-scope.mjs
   ห้ามเขียน selector ที่ไม่มีคลาสพวกนี้นำหน้า และห้ามประกาศตัวแปรที่
   :root เพราะจะไปชนกับตัวแปรชุดเดิมของทั้งเว็บ

   body.v3-dark  = ธีมมืด + navbar ใหม่ (งานที่ 29: ติดอยู่ทุกหน้าแล้ว)
   body.v3-lock  = อยู่หน้า landing (ล็อกไม่ให้ scroll ทั้งหน้า)
   body.v3-flat  = navbar ทึบ (ทุกหน้ายกเว้น landing)
   ทั้งสามคลาสถูกสลับใน v3ApplyShell() ของ app.js และตั้งค่าเริ่มต้นไว้ที่ <body>
   ══════════════════════════════════════════════════════════════════ */


/* ══ 1. DESIGN TOKENS ══════════════════════════════════════════════ */
.v3-landing,
.v3-deal,
.v3-tamha,
body.v3-dark {
  --v3-bg:          #0B0B0C;
  --v3-text:        #FFFFFF;
  --v3-text-2:      rgba(255,255,255,.70);
  --v3-text-3:      rgba(255,255,255,.50);
  --v3-gold:        #E3C06A;

  --v3-glass-bg:        rgba(255,255,255,.08);
  --v3-glass-bg-weak:   rgba(255,255,255,.05);
  --v3-glass-bg-strong: rgba(255,255,255,.16);
  --v3-glass-border:    rgba(255,255,255,.16);
  --v3-glass-blur:      blur(22px) saturate(1.2);
  --v3-glass-shadow:    0 40px 80px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.18);
  /* ใช้แทนพื้นกระจกเมื่อเบราว์เซอร์ไม่รองรับ backdrop-filter (ดูบล็อก @supports ท้ายหมวด) */
  --v3-solid:           rgba(20,20,23,.9);

  --v3-line-green:  #06C755;
  --v3-ok:          #A8DDB0;
  --v3-ok-bg:       rgba(120,200,130,.12);
  --v3-warn:        #F0A08C;
  --v3-warn-bg:     rgba(240,160,140,.12);

  --v3-paper:       #ECEAE5;
  --v3-ink:         #2E2E2E;
  --v3-ink-2:       #6B5D48;
  --v3-ink-3:       #A2957E;
  --v3-ink-gold:    #9A7632;
  --v3-ink-gold-2:  #D0A34B;

  --v3-ease-pop:    cubic-bezier(.34,1.56,.64,1);

  --v3-r-pill:   999px;
  --v3-r-panel:  30px;
  --v3-r-card:   26px;
  --v3-r-box:    22px;
  --v3-r-input:  14px;
  --v3-r-paper:  4px;

}

/* ── ขนาด navbar ใหม่ ────────────────────────────────────────────────
   navbar เดิมสูงตายตัว 68px และมีอีกสองที่ที่อ้างเลขนั้น
   (.page{padding-top:68px} กับ #line-profile-bar{top:68px})
   v3 ให้ navbar สูงตามจอ จึงต้องคิดเป็นตัวแปรแล้วส่งไปทั้งสามที่
   ไม่งั้นแถบโปรไฟล์ LINE จะทับ navbar เวลาจอสูง

   ⚠️ ตัวแปรชุดนี้ประกาศที่ <body> เท่านั้น ห้ามย้ายไปไว้ในบล็อก token ข้างบน
   เพราะ .v3-tamha / .v3-deal / .v3-landing อยู่ที่ตัว .page เอง ถ้าประกาศซ้ำ
   ตรงนั้นด้วย ค่าที่ .page จะทับค่าที่สืบทอดมาจาก body แล้ว --v3-barh จะกลับ
   เป็น 0 ตอนล็อกอินอยู่ → แถบโปรไฟล์ LINE ทับปุ่มแถวบนของหน้า (เจอมาแล้ว) */
body.v3-dark {
  --v3-navpad: clamp(10px, 2svh, 18px);
  --v3-logoh:  clamp(40px, 6svh, 54px);
  --v3-navh:   calc(max(var(--v3-logoh), 46px) + var(--v3-navpad) * 2);
  --v3-barh:   0px;
}
/* แถบโปรไฟล์ LINE โผล่เฉพาะตอนล็อกอินแล้ว — ความสูงคงที่ 48px ใต้ธีม v3 */
body.v3-dark.has-profile { --v3-barh: 48px; }

/* svh ไม่รองรับ (เบราว์เซอร์ก่อนปี 2022) — ถอยไปใช้ vh ซึ่งผลต่างกันแค่
   ตอนแถบ URL ของมือถือยุบ/ยืด ไม่ได้ทำให้หน้าพัง */
@supports not (height: 1svh) {
  body.v3-dark {
    --v3-navpad: clamp(10px, 2vh, 18px);
    --v3-logoh:  clamp(40px, 6vh, 54px);
  }
}

/* จอเตี้ย (h < 680) — ย่อ navbar ให้เหลือที่ให้เนื้อหา */
@media (max-height: 679px) {
  body.v3-dark {
    --v3-navpad: 8px;
    --v3-logoh:  36px;
  }
}
@media (max-width: 767px) {
  body.v3-dark {
    --v3-navpad: 12px;
    --v3-logoh:  40px;
  }
}
@media (max-width: 767px) and (max-height: 679px) {
  body.v3-dark {
    --v3-navpad: 8px;
    --v3-logoh:  36px;
  }
}

/* focus ring ทองตามสเปก — ใช้กับทุก element ที่โฟกัสด้วยคีย์บอร์ดในสามหน้านี้ */
:is(.v3-landing, .v3-deal, .v3-tamha) :focus-visible,
body.v3-dark nav :focus-visible {
  outline: 2px solid var(--v3-gold);
  outline-offset: 3px;
}


/* ══ 2. เปลือกหน้าจอ: body / navbar / แถบโปรไฟล์ ═══════════════════ */

body.v3-dark { background: var(--v3-bg); }

/* ล็อกไม่ให้ scroll เฉพาะตอนอยู่หน้า landing */
body.v3-lock { overflow: hidden; overscroll-behavior: none; }
html:has(body.v3-lock) { overflow: hidden; overscroll-behavior: none; }

/* .page เดิมเผื่อที่ให้ navbar 68px ตายตัว — v3 ใช้ความสูงจริงของ navbar */
body.v3-dark .page { padding-top: var(--v3-navh); }
body.v3-dark.has-profile .page { padding-top: calc(var(--v3-navh) + var(--v3-barh)); }

/* navbar: โปร่งใสลอยบนวิดีโอ ไม่มีเส้นคั่น */
body.v3-dark nav {
  height: var(--v3-navh);
  padding: 0 clamp(16px, 3vw, 36px);
  gap: 16px;
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* หน้าสร้างดีล/ตามหา ไม่มีวิดีโอ — ใส่พื้นทึบกันตัวหนังสือวิ่งทะลุ navbar */
body.v3-dark.v3-flat nav {
  background: rgba(11,11,12,.72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

body.v3-dark #line-profile-bar {
  top: var(--v3-navh);
  height: var(--v3-barh);
  padding: 0 clamp(16px, 3vw, 36px);
  background: rgba(255,255,255,.06);
  border-bottom: 1px solid var(--v3-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.v3-dark .lpb-name   { color: var(--v3-text); }
body.v3-dark .lpb-badge  { color: var(--v3-ok); background: var(--v3-ok-bg); border-color: rgba(168,221,176,.35); }
body.v3-dark .lpb-logout { color: var(--v3-text-2); }
body.v3-dark .lpb-logout:hover { color: var(--v3-text); }

/* ── โลโก้ ─────────────────────────────────────────────────────────
   โลโก้เดิมสองรูป (ตรา + wordmark) ซ่อนไว้เฉย ๆ ไม่ได้ลบ
   หน้าอื่นที่ไม่มีคลาส v3-dark ยังเห็นของเดิมครบ */
body.v3-dark .nav-logo-img,
body.v3-dark .nav-wordmark-img { display: none; }
.v3-navlogo { display: none; }
body.v3-dark .v3-navlogo {
  display: block;
  height: var(--v3-logoh);
  width: auto;
}

/* ── เมนู pill กลาง (เดสก์ท็อป) ───────────────────────────────── */
.v3-nav-pill, .v3-nav-burger, .v3-nav-menu, .v3-cta-arrow { display: none; }

body.v3-dark .v3-nav-pill {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  border-radius: var(--v3-r-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
body.v3-dark .v3-nav-pill button {
  font-family: 'Kanit', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  padding: 9px 18px;
  border: none;
  border-radius: var(--v3-r-pill);
  background: transparent;
  color: rgba(255,255,255,.85);
  cursor: pointer;
  transition: background .2s, color .2s;
}
body.v3-dark .v3-nav-pill button:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── ปุ่ม + สร้างดีล บน navbar ─────────────────────────────────── */
body.v3-dark .nav-btn.nav-teal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 6px 0 20px;
  border-radius: var(--v3-r-pill);
  background: #FFFFFF;
  color: var(--v3-bg);
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  box-shadow: none;
}
body.v3-dark .nav-btn.nav-teal:hover { background: #fff; transform: none; }
body.v3-dark .v3-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--v3-bg);
  color: #fff;
  transition: transform .2s;
}
body.v3-dark .nav-btn.nav-teal:hover .v3-cta-arrow { transform: rotate(45deg); }

/* ── avatar ───────────────────────────────────────────────────────
   เนื้อในของ .nav-avatar ถูก applyLineProfile() เขียนทับเป็น <img> ตอน
   ล็อกอิน จึงห้ามใส่ไอคอนเป็น element ลูก — ใช้ background-image แล้ว
   ปิดทิ้งเมื่อมี <img> อยู่ข้างใน */
body.v3-dark .nav-avatar {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.25);
  background: linear-gradient(150deg,#3A3A3F,#1A1A1D);
  font-size: 0;
  color: transparent;
}
body.v3-dark .nav-avatar:not(:has(img)) {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='8.5' r='3.6' stroke='%23E3C06A' stroke-width='1.7'/%3E%3Cpath d='M5 19.5c.7-3.4 3.5-5.3 7-5.3s6.3 1.9 7 5.3' stroke='%23E3C06A' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(150deg,#3A3A3F,#1A1A1D);
  background-repeat: no-repeat;
  background-position: center;
}
body.v3-dark .nav-deal-badge { border-color: var(--v3-bg); }

/* ── hamburger + dropdown (มือถือ) ─────────────────────────────── */
@media (max-width: 767px) {
  body.v3-dark .v3-nav-pill { display: none; }
  body.v3-dark .nav-btn.nav-teal { display: none; }
  body.v3-dark .v3-nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.10);
    color: #fff;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  body.v3-dark .v3-nav-menu.v3-open {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    top: calc(var(--v3-navh) + 4px);
    left: 16px;
    right: 16px;
    padding: 8px;
    border-radius: var(--v3-r-box);
    background: rgba(20,20,22,.86);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  body.v3-dark .v3-nav-menu button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 52px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    background: transparent;
    color: rgba(255,255,255,.85);
    font-family: 'Kanit', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
  }
  body.v3-dark .v3-nav-menu button.v3-menu-cta {
    justify-content: space-between;
    background: #fff;
    color: var(--v3-bg);
    font-weight: 600;
  }
}


/* ══ 3. ระบบปุ่มใหม่ ═══════════════════════════════════════════════ */
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-primary,
body.v3-dark nav .v3-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 0 6px 0 20px;
  border: none;
  border-radius: var(--v3-r-pill);
  background: #FFFFFF;
  color: var(--v3-bg);
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-primary .v3-btn-dot {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--v3-bg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s;
}
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-primary:hover .v3-btn-dot { transform: rotate(45deg); }
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-primary:disabled {
  background: rgba(255,255,255,.08);
  color: var(--v3-text-3);
  cursor: not-allowed;
}
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-primary:disabled .v3-btn-dot { display: none; }

:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--v3-r-pill);
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--v3-text);
  font-family: 'Kanit', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-glass:hover { background: var(--v3-glass-bg-strong); }

:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-line {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 0 22px 0 7px;
  border: none;
  border-radius: var(--v3-r-pill);
  background: var(--v3-line-green);
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-line:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(6,199,85,.9);
}
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-line .lp2b-lbadge,
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-line .v3-lbadge {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: var(--v3-line-green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}
:is(.v3-landing, .v3-deal, .v3-tamha) .v3-btn-line .v3-btn-label { flex: 1; text-align: left; }


/* ══ 4. หน้า LANDING ═══════════════════════════════════════════════ */

#page-home.v3-landing {
  box-sizing: border-box;
  height: 100svh;
  min-height: 0;
  padding-top: calc(var(--v3-navh) + var(--v3-barh));
  overflow: hidden;
  background: var(--v3-bg);
  color: var(--v3-text);
  font-family: 'Kanit', sans-serif;
}
#page-home.v3-landing.active { display: flex; flex-direction: column; }
@supports not (height: 1svh) { #page-home.v3-landing { height: 100vh; } }
#page-home.v3-landing *,
#page-home.v3-landing *::before,
#page-home.v3-landing *::after { box-sizing: border-box; }

/* ── วิดีโอพื้นหลัง ───────────────────────────────────────────── */
#page-home.v3-landing .v3-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--v3-bg);
  pointer-events: none;
}
#page-home.v3-landing .v3-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--v3-bg);
}
#page-home.v3-landing .v3-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 75%),
    linear-gradient(0deg, rgba(11,11,12,.92) 0%, rgba(0,0,0,.5) 26%, rgba(0,0,0,0) 55%);
}

/* ── intro reveal ─────────────────────────────────────────────────
   เริ่มซ่อนทุกชิ้น แล้ว app.js เติมคลาส v3-shown ให้ตอนวิดีโอถึงวินาทีที่ 2
   (หรือ 3.5 วินาทีถ้าวิดีโอไม่เล่น) --v3-d คือ delay ของแต่ละชิ้น */
#page-home.v3-landing .v3-rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease var(--v3-d, 0s),
              transform .7s var(--v3-ease-pop) var(--v3-d, 0s);
}
#page-home.v3-landing .v3-rv-big   { transform: translateY(48px); }
#page-home.v3-landing .v3-rv-panel { transform: translateY(48px) scale(.94); }
#page-home.v3-landing.v3-shown .v3-rv { opacity: 1; transform: none; }

/* ── main ─────────────────────────────────────────────────────── */
#page-home.v3-landing .v3-main {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: clamp(8px, 2svh, 22px);
}
#page-home.v3-landing .v3-text {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(12px, 2.4svh, 22px);
}
#page-home.v3-landing .v3-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px;
  border-radius: var(--v3-r-pill);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}
#page-home.v3-landing .v3-bdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v3-gold);
  box-shadow: 0 0 10px var(--v3-gold);
}
#page-home.v3-landing .v3-h1 {
  margin: 0;
  font-weight: 800;
  font-size: clamp(34px, min(7.2vw, 7.2svh), 88px);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #fff;
}
#page-home.v3-landing .v3-sub {
  flex: 0 0 auto;
  margin: -4px 0 0;
  font-size: clamp(15px, 2.2svh, 20px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--v3-text-2);
}

/* ── แผงกระจก ─────────────────────────────────────────────────── */
#page-home.v3-landing .v3-panel-wrap {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
#page-home.v3-landing .v3-panel {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
  padding: 12px;
  border-radius: var(--v3-r-panel);
  background: var(--v3-glass-bg);
  border: 1px solid var(--v3-glass-border);
  backdrop-filter: var(--v3-glass-blur);
  -webkit-backdrop-filter: var(--v3-glass-blur);
  box-shadow: var(--v3-glass-shadow);
  outline: none;
  touch-action: none;
}
@media (max-width: 767px), (max-height: 679px) {
  #page-home.v3-landing .v3-panel { padding: 10px; }
}

/* viewport ของรายการ — การ์ดวาง absolute อยู่ข้างใน จุดกลางคือ top:50% */
#page-home.v3-landing #lp2-stage {
  /* กล่องนี้ยังมีคลาส .lp2b-rail ติดอยู่ (ของเดิมเป็นแถวแนวนอน) — ต้องล้าง
     display/padding/max-width ของมันทิ้ง ไม่งั้นแถวรายการ v3 เพี้ยนทั้งแผง */
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
  flex: 0 1 170px;
  min-height: 58px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
#page-home.v3-landing .v3-item {
  /* ยังมีคลาส .lp2b-card ติดอยู่เพื่อให้ lp2SetHover() หาเจอ — ล้าง flex-direction
     กับ flex ของการ์ดเดิมทิ้ง ไม่งั้นเนื้อในเรียงเป็นแนวตั้งและความกว้างยุบ */
  flex: none;
  flex-direction: row;
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--v3-r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: 'Kanit', sans-serif;
  text-align: left;
  transition: transform .45s cubic-bezier(.34,1.4,.64,1),
              opacity .35s,
              background .3s, height .35s, margin-top .35s,
              left .35s, right .35s, color .3s;
}
#page-home.v3-landing .v3-item-ico {
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .35s;
}
#page-home.v3-landing .v3-item-mid {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#page-home.v3-landing .v3-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}
#page-home.v3-landing .v3-item-desc {
  font-family: 'Sarabun', sans-serif;
  font-size: 9px;
  line-height: 1.4;
  color: rgba(11,11,12,.62);
  text-wrap: pretty;
}
#page-home.v3-landing .v3-item-soon {
  font-size: 7.6px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--v3-r-pill);
  white-space: nowrap;
}
#page-home.v3-landing .v3-item-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  transition: transform .2s;
}
#page-home.v3-landing .v3-item.v3-on:hover .v3-item-arrow { transform: rotate(45deg); }

/* แถวตัวนับ + ปุ่ม ▲▼ — ปุ่มคงขนาดจริง 44px ตามเกณฑ์ tap target */
#page-home.v3-landing .v3-counter {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 6px 6px 6px 18px;
  border-radius: var(--v3-r-pill);
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.12);
}
#page-home.v3-landing .v3-counter-t {
  font-size: 13px;
  color: var(--v3-text-2);
  letter-spacing: .5px;
}
#page-home.v3-landing .v3-counter-btns { display: flex; gap: 6px; }
#page-home.v3-landing .v3-circle-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
#page-home.v3-landing .v3-circle-btn:hover { background: var(--v3-glass-bg-strong); }
/* จอเตี้ย: ซ่อนแถวตัวนับ และย่อปุ่ม LINE ลงเหลือ 48 */
@media (max-height: 679px) {
  #page-home.v3-landing .v3-counter { display: none; }
  #page-home.v3-landing .v3-btn-line { height: 48px; }
}
#page-home.v3-landing .v3-btn-line { margin-top: 8px; }

/* ── แถบ flow ล่างสุด ─────────────────────────────────────────── */
#page-home.v3-landing .v3-flow {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(10px, 2svh, 22px) clamp(16px, 3vw, 36px);
  display: flex;
  justify-content: center;
}
#page-home.v3-landing .v3-flow-inner {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: calc(var(--v3-flow-ico) + 26px);
  --v3-flow-ico: 48px;
}
@media (max-width: 767px), (max-height: 759px) {
  #page-home.v3-landing .v3-flow-inner { --v3-flow-ico: 40px; }
}
@media (max-height: 619px) {
  #page-home.v3-landing .v3-flow-inner { --v3-flow-ico: 34px; }
}
#page-home.v3-landing .v3-flow-lines {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--v3-flow-ico);
}
#page-home.v3-landing .v3-flow-dash {
  stroke: rgba(255,255,255,.3);
  stroke-width: 1.5;
  stroke-dasharray: 6 6;
  animation: v3DashMove 1.2s linear infinite;
}
#page-home.v3-landing .v3-flow-node {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#page-home.v3-landing .v3-flow-buyer  { left: 8%; }
#page-home.v3-landing .v3-flow-vault  { left: 50%; }
#page-home.v3-landing .v3-flow-seller { left: 92%; }
#page-home.v3-landing .v3-flow-ico {
  width: var(--v3-flow-ico);
  height: var(--v3-flow-ico);
  border-radius: 50%;
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-home.v3-landing .v3-flow-vault .v3-flow-ico {
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(227,192,106,.55);
  box-shadow: 0 0 30px -6px rgba(227,192,106,.45);
}
#page-home.v3-landing .v3-flow-lbl {
  font-size: 12.5px;
  color: var(--v3-text-2);
  white-space: nowrap;
}
#page-home.v3-landing .v3-flow-vault .v3-flow-lbl { color: #fff; font-weight: 500; }
#page-home.v3-landing .v3-flow-coin {
  position: absolute;
  top: calc(var(--v3-flow-ico) / 2);
  left: 8%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #F3DC9A, #C9A24E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #3A2A08;
  box-shadow: 0 6px 18px -4px rgba(227,192,106,.7);
  animation: v3CoinFlow 5s ease-in-out infinite;
  z-index: 3;
}

@keyframes v3CoinFlow {
  0%        { left: 8%;  opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  8%        { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  38%, 55%  { left: 50%; opacity: 1; }
  92%       { left: 92%; opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100%      { left: 92%; opacity: 0; transform: translate(-50%,-50%) scale(.7); }
}
@keyframes v3DashMove { to { stroke-dashoffset: -22; } }

/* มือถือ: h1 เล็กลง และ badge เล็กลง */
@media (max-width: 767px) {
  #page-home.v3-landing .v3-h1 { font-size: clamp(28px, min(11vw, 5.2svh), 46px); }
  #page-home.v3-landing .v3-badge { font-size: 12px; }
  #page-home.v3-landing .v3-sub { font-size: 14px; }
  #page-home.v3-landing .v3-text { gap: clamp(8px, 1.4svh, 14px); }
  #page-home.v3-landing .v3-flow { padding: 10px clamp(16px, 3vw, 36px); }
}
@media (max-height: 679px) {
  #page-home.v3-landing .v3-sub { font-size: 14px; }
  #page-home.v3-landing .v3-flow { padding: 6px clamp(16px, 3vw, 36px); }
}


/* ══ 5. หน้าสร้างดีล ═══════════════════════════════════════════════ */

#page-create.v3-deal {
  background: var(--v3-bg);
  color: var(--v3-text);
}
/* ก้อนเบลอทองของธีมเดิม — ไม่ได้ลบ element ทิ้ง แค่ไม่แสดงในธีม v3 */
#page-create.v3-deal .cr2b-blob { display: none; }

#page-create.v3-deal .cr2b-backhome {
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--v3-text);
  border-radius: var(--v3-r-pill);
  padding: 0 18px;
  min-height: 44px;
  font-size: 14px;
  box-shadow: none;
}
#page-create.v3-deal .cr2b-backhome:hover { background: var(--v3-glass-bg-strong); border-color: rgba(255,255,255,.3); }
#page-create.v3-deal .cr2b-status {
  background: var(--v3-glass-bg);
  border: 1px solid var(--v3-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--v3-text-2);
  min-height: 44px;
  padding: 0 18px;
}
#page-create.v3-deal .cr2b-status-dot { background: var(--v3-gold); }

/* ── เวทีรอบกระดาษ ───────────────────────────────────────────── */
#page-create.v3-deal .cr2b-stage {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--v3-r-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 40px 80px -30px rgba(0,0,0,.6);
}
#page-create.v3-deal .cr2b-stage-wash { background: none; }

/* ── กระดาษ A4 — หมึกยังเข้มเหมือนเดิม ลายน้ำคงเดิม ───────────── */
#page-create.v3-deal .cr2b-paper {
  background: var(--v3-paper);
  border-radius: var(--v3-r-paper);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.06);
}
/* โลโก้บนหัวสัญญาเป็น PNG ใหม่ — ย้อมดำให้เข้ากับหมึกบนกระดาษ */
/* โลโก้บนกระดาษใช้ไฟล์ logo-new-dark.png ซึ่งเป็นหมึกเข้มมาแต่ต้น
   ไม่ต้องใช้ filter: brightness(0) ทับให้กลายเป็นดำสนิทอีก */
#page-create.v3-deal .cr2b-ct-logo { opacity: .9; }

/* ── แถบควบคุมนอกกระดาษ = แผงกระจก ───────────────────────────── */
#page-create.v3-deal .cr2b-ctrl {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 28px;
  background: var(--v3-glass-bg-weak);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
#page-create.v3-deal .cr2b-counter {
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--v3-text);
}
#page-create.v3-deal .cr2b-counter-dot { background: var(--v3-gold); }
#page-create.v3-deal .cr2b-steptitle { color: var(--v3-text); }
#page-create.v3-deal .cr2b-stephint  { color: var(--v3-text-2); }
#page-create.v3-deal .cr2b-scrollhint { color: var(--v3-text-3); }
#page-create.v3-deal .cr2b-scrollhint svg path { stroke: rgba(255,255,255,.5); }

#page-create.v3-deal .cr2b-pip      { background: rgba(255,255,255,.14); }
#page-create.v3-deal .cr2b-pip.done { background: rgba(227,192,106,.55); }
#page-create.v3-deal .cr2b-pip.curr { background: var(--v3-gold); }

/* ปุ่มหลัก = pill ขาว · ปุ่มรอง = pill กระจก · ปุ่มอันตราย = ตัวหนังสือส้ม */
#page-create.v3-deal .cr2b-btn-next {
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--v3-r-pill);
  background: #FFFFFF;
  color: var(--v3-bg);
  box-shadow: none;
}
#page-create.v3-deal .cr2b-btn-next:hover:not(:disabled) { transform: translateY(-1px); }
#page-create.v3-deal .cr2b-btn-next:disabled {
  background: rgba(255,255,255,.08);
  color: var(--v3-text-3);
}
#page-create.v3-deal .cr2b-btn-ghost {
  min-height: 48px;
  padding: 0 20px;
  border-radius: var(--v3-r-pill);
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--v3-text);
}
#page-create.v3-deal .cr2b-btn-ghost:hover { background: var(--v3-glass-bg-strong); border-color: rgba(255,255,255,.3); color: #fff; }
#page-create.v3-deal .cr2b-btn-why { color: var(--v3-warn); }

/* ── auth row + slider นอกกระดาษ ─────────────────────────────── */
#page-create.v3-deal .cr2b-authrow .cr2-auth-lock { color: var(--v3-warn); }
#page-create.v3-deal .cr2b-authrow .cr2-auth-ok {
  color: var(--v3-ok);
  background: var(--v3-ok-bg);
  border: 1px solid rgba(168,221,176,.4);
}
#page-create.v3-deal .cr2b-authrow .cr2-auth-ok .check { background: var(--v3-ok); color: #0B0B0C; }

/* ── ในกระดาษ: หมึกบนพื้น #ECEAE5 — ชิปที่เลือกเป็นโทนทอง ────── */
#page-create.v3-deal .cr2b-typepill { background: rgba(255,255,255,.55); }
#page-create.v3-deal .cr2b-typepill.sel {
  background: rgba(208,163,75,.2);
  border: 2px solid var(--v3-ink-gold-2);
  color: #3A2E12;
}
#page-create.v3-deal .cr2b-party { background: rgba(255,255,255,.45); }
#page-create.v3-deal .cr2b-feerow:first-child { background: rgba(255,255,255,.5); }
#page-create.v3-deal .cr2b-blank { background: rgba(208,163,75,.07); }
#page-create.v3-deal .cr2b-blank:focus {
  background: rgba(208,163,75,.16);
  border-bottom-color: var(--v3-ink-gold-2);
}
#page-create.v3-deal .cr2b-sigwrap { background: rgba(208,163,75,.05); }
#page-create.v3-deal .cr2b-btn-clear {
  color: var(--v3-warn);
  background: rgba(240,160,140,.1);
  border-color: rgba(240,160,140,.45);
}


/* ══ 6. หน้าตามหา ══════════════════════════════════════════════════ */

#page-tamha.v3-tamha { background: var(--v3-bg); }
/* ฉากหลังวัดของธีมเดิม — ไม่ได้ลบ element แค่ไม่แสดงในธีม v3 */
#page-tamha.v3-tamha .tm-bg { display: none; }
#page-tamha.v3-tamha .tm-root { color: var(--v3-text); }

#page-tamha.v3-tamha .tm-back,
#page-tamha.v3-tamha .tm-chipstate {
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--v3-text);
  border-radius: var(--v3-r-pill);
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: none;
}
#page-tamha.v3-tamha .tm-back:hover { background: var(--v3-glass-bg-strong); }
#page-tamha.v3-tamha .tm-back svg path,
#page-tamha.v3-tamha .tm-back svg { stroke: currentColor; }
#page-tamha.v3-tamha .tm-dot { background: var(--v3-gold); }

#page-tamha.v3-tamha .tm-head h1 {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: clamp(34px, 5.4vw, 56px);
  color: #fff;
}
#page-tamha.v3-tamha .tm-head p { color: var(--v3-text-2); }

/* ── ค้นหา + เรียงลำดับ ───────────────────────────────────────── */
#page-tamha.v3-tamha .tm-search {
  min-height: 50px;
  border-radius: var(--v3-r-pill);
  background: var(--v3-glass-bg);
  border: 1px solid var(--v3-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--v3-text-2);
  box-shadow: none;
}
#page-tamha.v3-tamha .tm-in { color: var(--v3-text); background: transparent; }
#page-tamha.v3-tamha .tm-in::placeholder { color: var(--v3-text-3); }
#page-tamha.v3-tamha .tm-qclear { color: var(--v3-text-2); background: rgba(255,255,255,.12); }

#page-tamha.v3-tamha .tm-sortbtn {
  min-height: 50px;
  border-radius: var(--v3-r-pill);
  background: var(--v3-glass-bg);
  border: 1px solid var(--v3-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--v3-text);
  box-shadow: none;
}
#page-tamha.v3-tamha .tm-sortwrap.tm-open .tm-sortbtn { background: #fff; color: var(--v3-bg); border-color: #fff; }
#page-tamha.v3-tamha .tm-sortmenu {
  background: rgba(22,22,26,.88);
  border: 1px solid var(--v3-glass-border);
  border-radius: var(--v3-r-box);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.8);
}
#page-tamha.v3-tamha .tm-sortopt { color: var(--v3-text-2); border-radius: var(--v3-r-pill); }
#page-tamha.v3-tamha .tm-sortopt:hover { background: rgba(255,255,255,.08); color: #fff; }
#page-tamha.v3-tamha .tm-sortopt.tm-on { background: #fff; color: var(--v3-bg); }

/* ── แท็บหมวด + ชิปหมวดย่อย ───────────────────────────────────── */
#page-tamha.v3-tamha .tm-cat,
#page-tamha.v3-tamha .tm-sub,
#page-tamha.v3-tamha .tm-fcat {
  background: var(--v3-glass-bg);
  border: 1px solid var(--v3-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--v3-text-2);
  box-shadow: none;
}
#page-tamha.v3-tamha .tm-cat.tm-on,
#page-tamha.v3-tamha .tm-sub.tm-on,
#page-tamha.v3-tamha .tm-fcat.tm-on {
  background: #FFFFFF;
  color: var(--v3-bg);
  border-color: #fff;
  box-shadow: none;
}
#page-tamha.v3-tamha .tm-count { background: rgba(255,255,255,.12); color: var(--v3-text-2); }
#page-tamha.v3-tamha .tm-cat.tm-on .tm-count,
#page-tamha.v3-tamha .tm-sub.tm-on .tm-count { background: rgba(11,11,12,.1); color: var(--v3-bg); }
#page-tamha.v3-tamha .tm-fade-l { background: linear-gradient(90deg, var(--v3-bg), rgba(11,11,12,0)); }
#page-tamha.v3-tamha .tm-fade-r { background: linear-gradient(270deg, var(--v3-bg), rgba(11,11,12,0)); }
#page-tamha.v3-tamha .tm-subbox {
  background: rgba(22,22,26,.88);
  border: 1px solid var(--v3-glass-border);
  border-radius: var(--v3-r-box);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
#page-tamha.v3-tamha .tm-subhead { color: var(--v3-text-2); }
#page-tamha.v3-tamha .tm-x { color: var(--v3-text-2); background: rgba(255,255,255,.08); border-color: var(--v3-glass-border); }
#page-tamha.v3-tamha .tm-lbl { color: var(--v3-ink-2); }

/* ── การ์ดประกาศ ──────────────────────────────────────────────── */
#page-tamha.v3-tamha .tm-card {
  border-radius: var(--v3-r-card);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
  color: var(--v3-text);
}
#page-tamha.v3-tamha .tm-card.tm-closed { background: rgba(255,255,255,.03); box-shadow: none; }
#page-tamha.v3-tamha .tm-card-title { color: #fff; }
#page-tamha.v3-tamha .tm-budget { color: var(--v3-gold); }
#page-tamha.v3-tamha .tm-meta,
#page-tamha.v3-tamha .tm-card-foot { color: var(--v3-text-3); }
#page-tamha.v3-tamha .tm-card-foot { border-top-color: rgba(255,255,255,.1); }
#page-tamha.v3-tamha .tm-thumb { background: rgba(255,255,255,.06); }
#page-tamha.v3-tamha .tm-mine { color: var(--v3-ok); background: var(--v3-ok-bg); border-color: rgba(168,221,176,.35); }
#page-tamha.v3-tamha .tm-demo { color: var(--v3-text-3); background: rgba(255,255,255,.08); }
#page-tamha.v3-tamha .tm-badge { background: rgba(255,255,255,.1); color: var(--v3-text-2); }
#page-tamha.v3-tamha .tm-blank { color: var(--v3-text-2); }
#page-tamha.v3-tamha .tm-blank h3 { color: #fff; }
#page-tamha.v3-tamha .tm-blank-ico { background: rgba(255,255,255,.06); border-color: var(--v3-glass-border); }
#page-tamha.v3-tamha .tm-more {
  border-radius: var(--v3-r-pill);
  min-height: 48px;
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--v3-text);
}

/* ── ปุ่มลอย ลงประกาศ ─────────────────────────────────────────── */
#page-tamha.v3-tamha .tm-fab {
  height: 58px;
  padding: 0 6px 0 24px;
  gap: 14px;
  background: #FFFFFF;
  color: var(--v3-bg);
  border: none;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.8);
}
#page-tamha.v3-tamha .tm-fab svg {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  background: var(--v3-bg);
  color: #fff;
  order: 2;
}

/* ── ปุ่มที่ใช้ซ้ำในแผ่นรายละเอียด ───────────────────────────── */
#page-tamha.v3-tamha .tm-btn { border-radius: var(--v3-r-pill); min-height: 48px; padding: 0 20px; }
#page-tamha.v3-tamha .tm-btn-gold { background: #FFFFFF; color: var(--v3-bg); box-shadow: none; }
#page-tamha.v3-tamha .tm-btn-ghost {
  background: var(--v3-glass-bg);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--v3-text);
}
#page-tamha.v3-tamha .tm-btn-soon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--v3-text-3); }
#page-tamha.v3-tamha .tm-hint { color: var(--v3-text-3); }

/* ── แผ่นรายละเอียด ───────────────────────────────────────────── */
#page-tamha.v3-tamha .tm-scrim { background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#page-tamha.v3-tamha .tm-sheet {
  background: rgba(20,20,23,.82);
  border: 1px solid var(--v3-glass-border);
  border-bottom: none;
  border-radius: 30px 30px 0 0;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 -30px 70px -24px rgba(0,0,0,.85);
}
#page-tamha.v3-tamha .tm-sheet-grip > div { background: rgba(255,255,255,.3); }
#page-tamha.v3-tamha .tm-sheet-bar { border-bottom-color: rgba(255,255,255,.12); }
#page-tamha.v3-tamha .tm-sheet-tag {
  color: var(--v3-gold);
  background: rgba(227,192,106,.14);
  border-color: rgba(227,192,106,.4);
}
#page-tamha.v3-tamha .tm-sheet-body h2 { color: #fff; }
#page-tamha.v3-tamha .tm-sheet-budget { color: var(--v3-gold); }
#page-tamha.v3-tamha .tm-sheet-meta,
#page-tamha.v3-tamha .tm-sheet-desc { color: var(--v3-text-2); }
#page-tamha.v3-tamha .tm-steps {
  background: var(--v3-glass-bg-weak);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--v3-r-box);
}
#page-tamha.v3-tamha .tm-steps-h { color: var(--v3-text-2); }
#page-tamha.v3-tamha .tm-step-n { background: rgba(255,255,255,.1); color: var(--v3-text); }
#page-tamha.v3-tamha .tm-step-t { color: #fff; }
#page-tamha.v3-tamha .tm-step-d { color: var(--v3-text-3); }
#page-tamha.v3-tamha .tm-warn {
  color: var(--v3-warn);
  background: var(--v3-warn-bg);
  border: 1px solid rgba(240,160,140,.35);
  border-radius: var(--v3-r-box);
}

/* ── ฟอร์มลงประกาศ: ยังเป็นกระดาษ แต่เป็นกระดาษสี #ECEAE5 ───── */
#page-tamha.v3-tamha .tm-paper {
  background: var(--v3-paper);
  border-radius: var(--v3-r-paper);
  border: none;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.75), 0 0 0 1px rgba(0,0,0,.06);
}
#page-tamha.v3-tamha .tm-paper-logo { opacity: .9; }
#page-tamha.v3-tamha .tm-submit {
  background: #FFFFFF;
  color: var(--v3-bg);
  border-radius: var(--v3-r-pill);
  box-shadow: none;
}


/* ══ 7. ไม่มี backdrop-filter → ใช้พื้นทึบแทน ══════════════════════ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #page-home.v3-landing .v3-panel,
  #page-home.v3-landing .v3-badge,
  #page-home.v3-landing .v3-flow-ico,
  body.v3-dark .v3-nav-pill,
  body.v3-dark .v3-nav-burger,
  body.v3-dark .v3-nav-menu.v3-open,
  body.v3-dark #line-profile-bar,
  body.v3-dark.v3-flat nav,
  #page-create.v3-deal .cr2b-backhome,
  #page-create.v3-deal .cr2b-status,
  #page-create.v3-deal .cr2b-ctrl,
  #page-create.v3-deal .cr2b-btn-ghost,
  #page-tamha.v3-tamha .tm-back,
  #page-tamha.v3-tamha .tm-chipstate,
  #page-tamha.v3-tamha .tm-search,
  #page-tamha.v3-tamha .tm-sortbtn,
  #page-tamha.v3-tamha .tm-sortmenu,
  #page-tamha.v3-tamha .tm-subbox,
  #page-tamha.v3-tamha .tm-cat,
  #page-tamha.v3-tamha .tm-sub,
  #page-tamha.v3-tamha .tm-fcat,
  #page-tamha.v3-tamha .tm-card,
  #page-tamha.v3-tamha .tm-sheet,
  #page-tamha.v3-tamha .tm-btn-ghost {
    background: var(--v3-solid);
  }
  #page-tamha.v3-tamha .tm-cat.tm-on,
  #page-tamha.v3-tamha .tm-sub.tm-on,
  #page-tamha.v3-tamha .tm-fcat.tm-on,
  #page-tamha.v3-tamha .tm-sortwrap.tm-open .tm-sortbtn { background: #fff; }
  #page-tamha.v3-tamha .tm-scrim { background: rgba(0,0,0,.75); }
}


/* ══ 8. View Transitions + prefers-reduced-motion ══════════════════ */
/* เว็บนี้เป็น SPA หน้าเดียว — การสลับหน้าเกิดใน go() ของ app.js
   ซึ่งห่อด้วย document.startViewTransition() ไว้แล้ว ที่นี่ตั้งแค่เวลา */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  #page-home.v3-landing .v3-rv { transition: none; opacity: 1; transform: none; }
  #page-home.v3-landing .v3-flow-coin,
  #page-home.v3-landing .v3-flow-dash { animation: none; }
  #page-home.v3-landing .v3-item { transition: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}


/* ══ 9. เก็บตก ════════════════════════════════════════════════════ */
/* <picture> ของโลโก้ v3 — ซ่อนทั้งกล่องเมื่อไม่ได้อยู่ใน 3 หน้านี้
   ไม่งั้นมันยังเป็น flex item ขนาด 0 แล้วกิน gap ของ .logo ไปเปล่า ๆ */
.v3-navlogo-pic { display: none; }
body.v3-dark .v3-navlogo-pic { display: block; }

/* ── แถบสถานะลอยกับ toast — ของเดิมเป็นโทนครีม อ่านไม่ออกบนพื้นมืด ────
   สองตัวนี้อยู่นอก .page (ลอยทั้งเว็บ) จึง scope ด้วย body.v3-dark */
body.v3-dark #tg-auth-status {
  color: var(--v3-text);
  background: rgba(22,22,26,.88);
  border: 1px solid var(--v3-glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 40px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
}
body.v3-dark #tg-auth-status.tgauth-warn {
  color: var(--v3-warn);
  background: rgba(40,26,22,.9);
  border-color: rgba(240,160,140,.35);
}
body.v3-dark .toast {
  background: rgba(22,22,26,.92);
  border: 1px solid var(--v3-glass-border);
  color: var(--v3-text);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.9);
}

/* ══ 10. ธีมมืด v3 สำหรับหน้าที่เหลือทั้งเว็บ ═══════════════════════
   สรุปดีล · ประวัติ · ชำระเงิน · โปรไฟล์ · กระเป๋าเงิน

   ⚠️ อ่านก่อนแก้: ห้ามไล่ทับทีละ rule
   ธีมครีมเดิมถูกสร้างบนตัวแปร 3 ตระกูล --cr-* / --pf2-* / --wl-*
   (styles.css บรรทัด 1354, 672, 1711) ซึ่งครอบคลุมสีเกือบทั้งหมดของ
   ห้าหน้านี้อยู่แล้ว การประกาศค่าใหม่ทับที่เดียวจึงพลิกทั้งหมดพร้อมกัน
   เหลือแค่สีที่ฮาร์ดโค้ดไว้ซึ่งไล่ทับไว้ในหมวด 10ค ข้างล่าง

   ที่ยังเป็นโทนสว่างโดยตั้งใจ: กระดาษสัญญา (#page-summary .tk-page)
   และ QR ธนาคาร — กระดาษต้องเหมือนหน้าสร้างดีลซึ่งเป็นกระดาษจริงบนพื้นมืด
   ส่วน QR ต้องอยู่บนพื้นขาวล้วนไม่งั้นกล้องธนาคารอ่านไม่ออก
   ══════════════════════════════════════════════════════════════════ */

/* ── 10ก. remap --cr-* เป็นค่ามืด ─────────────────────────────────
   selector ชุดเดียวกับที่ styles.css ประกาศไว้ แต่เติม body.v3-dark
   นำหน้าเพื่อให้ specificity สูงกว่าเสมอ ไม่ต้องพึ่งลำดับไฟล์อย่างเดียว */
body.v3-dark :is(#page-home, #page-create, #page-profile, #page-summary,
                 #page-history, #page-payment, #page-wallet,
                 nav, #line-profile-bar, .toast, .modal, .cam-modal, #liff-loading) {
  --cr-bg1: #0B0B0C;
  --cr-bg2: #0B0B0C;
  --cr-bg3: #121214;

  --cr-surface:  rgba(255,255,255,.08);
  --cr-surface2: rgba(255,255,255,.05);
  --cr-inset:    rgba(255,255,255,.05);
  --cr-paper:    var(--v3-paper);

  --cr-line:      rgba(255,255,255,.16);
  --cr-line-soft: rgba(255,255,255,.09);

  --cr-shadow:    0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
  --cr-shadow-sm: 0 18px 36px -20px rgba(0,0,0,.8);

  --cr-ink:  var(--v3-text);
  --cr-ink2: rgba(255,255,255,.82);
  --cr-mut:  var(--v3-text-2);
  --cr-dim:  var(--v3-text-3);

  /* --cr-gold-d เดิมเป็นทองเข้ม (#785C27) สำหรับวางบนพื้นครีม
     บนพื้นมืดต้องกลับด้านเป็นทองสว่าง ไม่งั้นอ่านไม่ออกเลย */
  --cr-gold:      var(--v3-gold);
  --cr-gold-d:    var(--v3-gold);
  --cr-gold-soft: #EBCE83;
  --cr-gold-lg:   var(--v3-gold);
  --cr-grad:      linear-gradient(135deg, #E3C06A, #D0A34B);
  --cr-card:      linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  --cr-on-gold:   #241B06;

  /* สถานะ: เฉดเดิมมืดเกินไปบนพื้นดำ ใช้ชุดสว่างของ v3 แทน */
  --cr-success: var(--v3-ok);
  --cr-warn:    #F0CE8C;
  --cr-danger:  #F09A94;
  --cr-orange:  var(--v3-warn);

  --cr-disabled-bg: rgba(255,255,255,.07);
  --cr-disabled-fg: rgba(255,255,255,.38);
}

/* ── 10ข. remap --pf2-* (โปรไฟล์) และ --wl-* (กระเป๋าเงิน) ───────
   สองชุดนี้เป็นค่าเดียวกันทุกประการ ต่างแค่ชื่อ เพราะ styles.css
   ประกาศ --pf2-* ไว้ใต้ #page-profile จึงใช้ข้ามหน้าไม่ได้ */
body.v3-dark #page-profile {
  --pf2-gold: var(--v3-gold); --pf2-gold-d: var(--v3-gold);
  --pf2-ink:  var(--v3-text); --pf2-ink2: rgba(255,255,255,.82);
  --pf2-mut:  var(--v3-text-2); --pf2-dim: var(--v3-text-3);
  --pf2-line: rgba(255,255,255,.12); --pf2-line2: rgba(255,255,255,.16);
  --pf2-grad: linear-gradient(135deg, #E3C06A, #D0A34B);
  --pf2-card: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  --pf2-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
}
body.v3-dark #page-wallet {
  --wl-gold: var(--v3-gold); --wl-gold-d: var(--v3-gold);
  --wl-ink:  var(--v3-text); --wl-ink2: rgba(255,255,255,.82);
  --wl-mut:  var(--v3-text-2); --wl-dim: var(--v3-text-3);
  --wl-line: rgba(255,255,255,.12); --wl-line2: rgba(255,255,255,.16);
  --wl-grad: linear-gradient(135deg, #E3C06A, #D0A34B);
  --wl-card: linear-gradient(150deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  --wl-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ── 10ค. พื้นหลังหน้า ────────────────────────────────────────────
   ของเดิมเป็น gradient ครีม ส่วนโปรไฟล์กับกระเป๋าเงินมีภาพวัด
   (assets/temple-bg.webp) ซ้อนอยู่ด้วย — ต้องล้าง background ทั้ง
   shorthand ไม่ใช่แค่ background-color ไม่งั้นภาพวัดยังค้างอยู่ */
body.v3-dark :is(#page-summary, #page-history, #page-payment,
                 #page-profile, #page-wallet) {
  background: var(--v3-bg);
  background-color: var(--v3-bg);
  color: var(--v3-text);
}
/* blob เรืองแสงสีทองของสองหน้านี้ — บนพื้นมืดกลายเป็นคราบเหลือง ลดลงให้เป็นแค่ไอ */
body.v3-dark :is(#page-profile .pf2-blob1, #page-wallet .wl-blob1) {
  background: radial-gradient(circle, rgba(227,192,106,.10), transparent 62%);
}
body.v3-dark :is(#page-profile .pf2-blob2, #page-wallet .wl-blob2) {
  background: radial-gradient(circle, rgba(227,192,106,.06), transparent 62%);
}

/* ── 10ง. สแปลชตอนบูต (#liff-loading) ─────────────────────────────
   นี่คือจอที่ผู้ใช้เห็นเป็นอย่างแรกราว 1 วินาทีก่อนวิดีโอจับมือจะขึ้น
   ของเดิมเป็นพื้นครีมกับอิโมจิ 🤝 บนวงกลมทอง จึงกระพริบเป็นสีเหลือง
   ตัดเข้าพื้นดำ ตอนนี้เป็นพื้นดำชุดเดียวกับ landing รอยต่อจึงไม่เห็น

   ⚠️ ห้ามลบกล่องนี้ออกจาก DOM: afterLiff() ใน tamha.js:1170 รอจังหวะ
   ด้วยการ poll el.style.display === 'none' ของกล่องนี้ ถ้าไม่มีกล่อง
   หน้าตามหาจะไม่เริ่ม render เลย */
body.v3-dark #liff-loading {
  background: var(--v3-bg);
  gap: 18px;
}
/* วงกลมไล่สีทองของเดิมออก เหลือแค่ตัวโลโก้ลอยบนพื้นดำ */
body.v3-dark #liff-loading .liff-logo {
  width: auto;
  height: 54px;
  border-radius: 0;
  background: none;
  animation: v3SplashBreathe 1.8s ease-in-out infinite;
}
body.v3-dark #liff-loading .liff-logo img {
  height: 54px;
  width: auto;
  display: block;
}
@keyframes v3SplashBreathe {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.04); }
}
body.v3-dark #liff-loading .liff-loading-text { color: var(--v3-text-3); font-size: 14px; }
body.v3-dark #liff-loading .liff-dots span { background: var(--v3-gold); }

@media (prefers-reduced-motion: reduce) {
  body.v3-dark #liff-loading .liff-logo { animation: none; opacity: 1; }
}

/* ── 10จ. ข้างในกระดาษ A4 ของหน้าสรุปดีล = โทเคนชุดสว่างเหมือนเดิม ──
   หน้าสรุปดีลคือ "กระดาษสว่างวางบนพื้นมืด" ตามภาษา v3 เดียวกับหน้า
   สร้างดีล ตัวกระดาษ (.tk-page / #sum-sheet) จึงยังขาวนวลอยู่

   ปัญหาที่เจอ: หมวด 10ก ทำให้ --cr-ink/--cr-mut กลายเป็นสีขาว ซึ่งถูก
   สำหรับพื้นมืด แต่ลูกหลานที่อยู่ในกระดาษ (.ev-hint .ev-drop-text
   .ev-count ฯลฯ) สืบทอดค่าพวกนี้ไปด้วย เลยกลายเป็นขาวบนขาว อ่านไม่ออก
   จึงต้องประกาศค่าชุดครีมเดิมกลับเข้าไปที่กระดาษ ไม่ใช่ไล่แก้ทีละคลาส

   ค่าทั้งหมดคัดลอกตรงจาก styles.css บรรทัด 1355 ห้ามแก้ให้ต่างออกไป
   ไม่งั้นกระดาษในหน้าสรุปจะเพี้ยนจากกระดาษในหน้าสร้างดีล */
body.v3-dark #page-summary :is(.tk-page, #sum-sheet) {
  --cr-surface:  #FFFCF4;
  --cr-surface2: #F3E9D4;
  --cr-inset:    #F7F0DF;
  --cr-paper:    #FFFDF7;

  --cr-line:      rgba(154,118,50,.28);
  --cr-line-soft: rgba(154,118,50,.16);

  --cr-ink:  #2E2E2E;
  --cr-ink2: #4A4034;
  --cr-mut:  #6B5D48;
  --cr-dim:  #696152;

  --cr-gold:      #D0A34B;
  --cr-gold-d:    #785C27;
  --cr-gold-soft: #E3C06A;
  --cr-gold-lg:   #977431;
  --cr-card:      linear-gradient(150deg, #FFFCF4, #F3E9D4);
  --cr-on-gold:   #3A2E12;

  --cr-success: #137136;
  --cr-warn:    #895500;
  --cr-danger:  #B8282E;
  --cr-orange:  #C2410C;

  --cr-disabled-bg: #E0D6C2;
  --cr-disabled-fg: #696152;

  --cr-shadow:    12px 14px 34px rgba(120,95,45,.28), -8px -8px 20px #ffffff;
  --cr-shadow-sm: 0 8px 20px -10px rgba(90,70,30,.4);
}

/* ── 10ฉ. พื้นผิวสีครีมที่ฮาร์ดโค้ดไว้ ไม่ได้ผ่านตัวแปร ─────────────
   กลุ่มนี้คือที่เหลือหลัง remap โทเคน: styles.css เขียนค่าสีลงไปตรง ๆ
   (rgba(255,252,245,.8) สำหรับปุ่ม ghost, #E0D6C2 สำหรับปุ่มที่ disabled,
   #F3ECDC สำหรับกล่อง uid) ตัวอักษรบนนั้นกลายเป็นขาวตาม --pf2-/--wl-
   ที่ remap ไปแล้ว จึงเป็นขาวบนครีม อ่านไม่ออก ต้องทับพื้นด้วย */

/* ปุ่ม ghost / ปุ่มย้อนกลับ / แท็บเลือก — เปลี่ยนเป็นกระจกโปร่ง */
body.v3-dark :is(#page-profile .pf2-backhome, #page-profile .pf2-btn-ghost,
                 #page-profile .pf2-seg-btn,
                 #page-wallet .wl-backhome,  #page-wallet .wl-btn-ghost) {
  background: var(--v3-glass-bg);
  border-color: var(--v3-glass-border);
}
body.v3-dark :is(#page-profile .pf2-backhome:hover, #page-profile .pf2-btn-ghost:hover,
                 #page-wallet .wl-backhome:hover,  #page-wallet .wl-btn-ghost:hover) {
  background: var(--v3-glass-bg-strong);
  border-color: rgba(227,192,106,.55);
}
/* แท็บที่ถูกเลือกต้องเด่นกว่าตัวที่ไม่ได้เลือก ไม่งั้นแยกไม่ออกบนพื้นมืด */
body.v3-dark #page-profile .pf2-seg-btn.on {
  background: var(--v3-glass-bg-strong);
  color: var(--v3-text);
}

/* ปุ่มที่กดไม่ได้ — ของเดิมเป็นครีมทึบ #E0D6C2 */
body.v3-dark :is(#page-profile .pf2-btn-gold:disabled,
                 #page-profile #kyc-section .btn.btn-p:disabled,
                 #page-wallet .wl-btn-gold:disabled) {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.38);
}

/* กล่องประจำตัวผู้ใช้ (เส้นประ) */
body.v3-dark #page-profile .pf2-uid-box {
  background: var(--v3-glass-bg-weak);
  border-color: rgba(255,255,255,.22);
}

/* แถบเตือน "ยังถอนเงินไม่ได้" ในกระเป๋าเงิน — ครีมทึบเต็มแถบ */
body.v3-dark #page-wallet .wl-alert {
  background: var(--v3-warn-bg);
  border-color: rgba(240,160,140,.35);
}

/* ป้าย "อัปโหลดแล้ว" บนสลิป — เขียวอ่อนของ v3 ต้องใช้ตัวอักษรสีเข้ม */
body.v3-dark #page-payment .slip-ok-badge { color: #0C2C12; }

/* ── 10ช. ตัวแปรชุดเก่าในกระดาษ A4 ────────────────────────────────
   ⚠️ จุดที่พลาดง่ายที่สุดของงานนี้ อ่านให้จบก่อนลบ

   styles.css:1372 ประกาศ --muted:var(--cr-mut) ไว้ที่ #page-summary
   var() ถูกแทนค่า ณ "element ที่ประกาศ" ไม่ใช่ element ที่เอาไปใช้
   ดังนั้น --muted ถูกคำนวณเป็นสีขาวตั้งแต่ที่ #page-summary แล้วไหลลง
   มาในกระดาษทั้งที่หมวด 10จ ประกาศ --cr-mut ชุดสว่างไว้แล้ว
   (เคสจริง: ไอคอน 📷 ใน .ev-drop ขาวบนกระดาษขาว)

   จึงต้องประกาศ alias ชุดเดิมซ้ำ "ในบล็อกเดียวกับ" ที่ประกาศ --cr-*
   ชุดสว่าง ค่าถึงจะ resolve กับชุดสว่างนั้น */
body.v3-dark #page-summary :is(.tk-page, #sum-sheet) {
  --navy-800: #EFDFC3; --navy-700: #FFFCF4;
  --navy-600: #F7F0DF; --navy-500: #F3E9D4;
  --white:  #2E2E2E;  --muted: #6B5D48;  --border: rgba(154,118,50,.28);
  --teal-700: #B8912F; --teal-500: #D0A34B; --teal-300: #785C27;
  --teal-100: rgba(208,163,75,.14);
  --gold-500: #C2410C; --gold-300: #895500; --gold-100: rgba(194,65,12,.10);
  --success: #137136; --danger: #B8282E;
}

/* ปุ่มเลือกยอดด่วนในโมดัลถอนเงิน — ครีมทึบที่ตกสำรวจรอบแรก */
body.v3-dark #page-wallet .wl-quick-btn {
  background: var(--v3-glass-bg);
  border-color: var(--v3-glass-border);
}
body.v3-dark #page-wallet .wl-quick-btn:hover {
  background: var(--v3-glass-bg-strong);
  border-color: rgba(227,192,106,.7);
}

/* ══ 11. ปรับหน้า landing บนมือถือ (งานที่ 30) ═════════════════════
   จากการดูของจริงบนจอ 375×812 — วิดีโอถูกครอปจนเห็นแค่มือ และแผง
   กระจกกว้างเกือบเต็มจอจนดูเป็นแผ่นทึบมากกว่าการ์ดลอย
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── วิดีโอ: เห็นเฟรมเต็ม แล้วค่อย ๆ จางหายลงไปจนสุดจอ ─────────
     งานที่ 32 — เปลี่ยนไฟล์ของมือถือเป็น hero-handshake-mobile-wide.mp4
     (854×480 เฟรมเต็ม ย่อมาจากไฟล์เดสก์ท็อป)

     ⚠️ ไฟล์เดิม hero-handshake-mobile.mp4 เป็น 404×720 คือถูกครอป
     ข้างซ้ายขวาทิ้งไปตั้งแต่ตอนสร้างไฟล์ เหลือแค่ 32% ของภาพจริง
     ส่วนที่เป็นแขนไม่ได้อยู่ในไฟล์ ไม่ว่าจะตั้ง CSS ยังไงก็เรียกกลับ
     มาไม่ได้ ไฟล์นั้นยังอยู่ในโปรเจกต์ แต่ไม่มีใครเรียกใช้แล้ว

     กฎเหล็กของหน้านี้: จอมือถือเป็นแนวตั้ง วิดีโอเป็นแนวนอน 16:9
     "เห็นภาพกว้างขึ้น" กับ "วิดีโอสูงเต็มจอ" เป็นของที่แลกกัน เลือก
     ได้อย่างเดียว เพราะ object-fit:cover ครอปตามสัดส่วนของกรอบเสมอ
       กรอบสูง 100% → เห็นภาพ 32%   (เห็นแค่มือ)
       กรอบสูง  62% → เห็นภาพ 42%   ← ที่เลือกใช้
       กรอบสูง  49% → เห็นภาพ 53%
       กรอบสูง  26% → เห็นภาพ 100%  (กลายเป็นแถบบางกลางจอ)

     - <video> สูง 62% แต่กรอบนอกกินเต็มความสูงหน้า เพื่อให้ mask มี
       ที่ไล่จางลงไปต่อ ไม่ใช่จบห้วน ๆ เป็นเส้นตัดดำแบบเดิม
     - object-position 45% เพราะจุดที่มือจับกันอยู่ค่อนไปทางซ้ายของ
       เฟรมเล็กน้อย ถ้าปล่อย center มือจะเบี้ยวไปทางซ้ายของจอ
     - ต้องมี -webkit-mask-image คู่กับ mask-image เสมอ Safari บน iOS
       ยังต้องใช้ prefix และผู้ใช้กลุ่มหลักของเว็บนี้เปิดผ่าน LINE */
  #page-home.v3-landing .v3-video-wrap {
    bottom: auto;
    height: 100%;
  }
  #page-home.v3-landing .v3-hero-video {
    height: 62%;
    object-fit: cover;
    object-position: 45% center;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0, #000 58%, transparent 100%);
  }
  /* ม่านต้องเบาลงกว่าเดิม เพราะหน้าที่กลบรอยตัดย้ายไปอยู่ที่ mask แล้ว
     ถ้ายังทึบสนิทที่ก้นกรอบเหมือนเดิม มันจะไปกลบช่วงที่ภาพกำลังจาง
     ซึ่งเป็นช่วงที่เราตั้งใจให้เห็น */
  #page-home.v3-landing .v3-hero-scrim {
    background: linear-gradient(0deg,
      rgba(11,11,12,.9)  0%,
      rgba(11,11,12,.35) 20%,
      rgba(0,0,0,.05)    48%,
      rgba(0,0,0,.35)   100%);
  }

  /* ── แผงกระจก: แคบลงให้เป็นการ์ดลอย ไม่ใช่แผ่นเต็มจอ ──────────
     250px คือจุดที่คำอธิบายใน "สร้างดีล" ยังอยู่สองบรรทัด
     แคบกว่านี้มันจะตกเป็นสามบรรทัด แล้วการ์ดสูงขึ้นแทนที่จะเล็กลง */
  #page-home.v3-landing .v3-panel {
    max-width: 250px;
    padding: 8px;
  }

  /* ── แถว 02/03: สลิมลง ไม่ต้องเด่นแข่งกับปุ่ม LINE ────────────
     ⚠️ ปุ่ม ▲▼ ต้องเป็น 44×44 เสมอ มีด่าน e2e เฝ้าอยู่และเป็นเกณฑ์
     tap target ของ README จึงทำให้ "ดูเล็กลง" ด้วยการวาดวงกลม 30px
     ผ่าน ::before แทน ส่วนตัวปุ่มยังเป็น 44px เท่าเดิมทั้งก้อน
     ห้ามแก้เป็น width/height:30px เด็ดขาด */
  #page-home.v3-landing .v3-counter {
    background: none;
    border: none;
    padding: 0 2px 0 10px;
    margin-top: 6px;
    gap: 8px;
  }
  #page-home.v3-landing .v3-counter-t {
    font-size: 11.5px;
    color: var(--v3-text-3);
  }
  #page-home.v3-landing .v3-counter-btns { gap: 2px; }
  #page-home.v3-landing .v3-circle-btn {
    border: none;
    background: none;
    position: relative;
  }
  #page-home.v3-landing .v3-circle-btn::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
  }
  #page-home.v3-landing .v3-circle-btn:hover::before {
    background: var(--v3-glass-bg-strong);
  }
}

/* ══ 12. หน้าสร้างดีล: วิดีโอเปิดตัว + พื้นหลังห้องทำงาน (งานที่ 31) ══ */

/* ── พื้นหลังห้องทำงาน ────────────────────────────────────────────
   สองชั้นแยกกันเพราะ filter: blur() มีผลกับลูกทุกตัว ถ้ารวมม่านเข้ม
   ไว้ในชั้นเดียวกับภาพ ม่านจะโดนเบลอไปด้วยจนขอบเพี้ยน

   inset:-24px ไม่ใช่ค่าสุ่ม — blur(5px) ทำให้ขอบภาพผสมกับความว่าง
   กลายเป็นกรอบจางรอบจอ ต้องดันภาพเลยขอบออกไปให้มากกว่ารัศมีเบลอ
   ถ้าเพิ่มค่า blur ต้องเพิ่ม inset ตามด้วย */
#page-create.v3-deal .v3-deal-bg {
  position: fixed;
  inset: -24px;
  z-index: 0;
  pointer-events: none;
  background-image: url('assets/office-bg.jpg');
  background-image: -webkit-image-set(url('assets/office-bg.webp') type('image/webp'),
                                      url('assets/office-bg.jpg')  type('image/jpeg'));
  background-image: image-set(url('assets/office-bg.webp') type('image/webp'),
                              url('assets/office-bg.jpg')  type('image/jpeg'));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(5px) saturate(1.05);
}
#page-create.v3-deal .v3-deal-bg-tint {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,.35), rgba(11,11,12,.6));
}
/* เนื้อหาต้องลอยเหนือพื้นหลังทั้งสองชั้น */
#page-create.v3-deal .cr2b-wrap {
  position: relative;
  z-index: 4;
}
/* กันสกรอลล์แนวนอนชั่วคราวตอน stage ถูก scale(1.18) ระหว่าง crossfade */
#page-create.v3-deal { overflow-x: hidden; }

/* ── วิดีโอเปิดตัว ────────────────────────────────────────────────
   z-index 100 ต้องสูงกว่า navbar เพราะช่วงเปิดตัวต้องเต็มจอจริง ๆ */
#page-create.v3-deal .v3-deal-intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--v3-bg);
}
#page-create.v3-deal .v3-deal-intro__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#page-create.v3-deal .v3-deal-intro__skip {
  position: absolute;
  right: 22px;
  bottom: 22px;
  font-family: 'Kanit', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--v3-r-pill);
  min-height: 44px;
  padding: 10px 20px;
  cursor: pointer;
}
#page-create.v3-deal .v3-deal-intro__skip:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}
/* ซ่อนไว้ก่อน แล้ว deal-intro.js เปิดเฉพาะตอนที่จะเล่นจริง — ถ้าปล่อยให้
   แสดงตั้งแต่ต้น คนที่ปิด autoplay หรือตั้ง reduced-motion จะเจอจอดำค้าง */
#page-create.v3-deal .v3-deal-intro { display: none; }
#page-create.v3-deal.v3-intro-on .v3-deal-intro { display: block; }