/* ==== css/00-base-login-shell.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */

/* ============================================================
   RESET & THEME TOKENS
   ============================================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --bg: #060b13;
  --bg2: #0c1524;
  --bg3: #111d2e;
  --blue: #38bdf8;
  --blue2: #0284c7;
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;
  --text: #f1f5f9;
  --muted: #64748b;
  --sub: #94a3b8;
  --border: rgba(255, 255, 255, 0.07);
  --card: rgba(255, 255, 255, 0.03);
}

body {
  font-family: 'TH Sarabun New', 'THSarabunNew', 'TH Sarabun PSK', 'THSarabunPSK', 'Sarabun', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

#pastList.expanded .past-extra { display: block !important; }
.expanded .hist-extra { display: block !important; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
#loginPage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(6, 11, 19, .8), rgba(6, 11, 19, .95)),
    url('../assets/optimized/forest-900.webp') center/cover no-repeat;
}
#loginPage.hidden { display: none; }

/* ============================================================
   LOADING SCREEN — โลโก้กลม + จุดแสงโคจร (ไม่มีเส้นวงกลม)
   ============================================================ */
#loadingScreen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    linear-gradient(180deg, rgba(6, 11, 19, .48), rgba(6, 11, 19, .68)),
    url('../assets/optimized/IMG_4023-900.webp') center/cover no-repeat;
}
#loadingScreen.show { display: flex; }
.loading-ring-wrap {
  position: relative;
  width: 124px;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-ring {
  display: none;
}
.loading-ring-outer {
  inset: 1px;
  border: 1px solid rgba(56, 189, 248, .16);
  border-top-color: rgba(103, 232, 249, .88);
  border-right-color: rgba(45, 212, 191, .42);
  box-shadow: 0 0 18px rgba(34, 211, 238, .08);
  animation: loadingSpin 3.2s linear infinite;
}
.loading-ring-inner {
  inset: 11px;
  border: 1px dashed rgba(45, 212, 191, .22);
  border-left-color: rgba(153, 246, 228, .66);
  animation: loadingSpinReverse 4.8s linear infinite;
}
.loading-orbit-dot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.loading-orbit-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 13px rgba(103, 232, 249, .9);
}
.loading-dot-a { animation: loadingSpin 3.2s linear infinite; }
.loading-dot-b {
  inset: 11px;
  animation: loadingSpinReverse 4.8s linear infinite;
}
.loading-dot-b::after {
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  background: #5eead4;
  box-shadow: 0 0 11px rgba(94, 234, 212, .72);
}
.loading-logo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(153, 246, 228, .48);
  box-shadow: 0 0 22px rgba(45, 212, 191, .25), 0 8px 26px rgba(0, 0, 0, .28);
  transform-origin: 50% 64%;
  animation: loadingLogoBreathe 2.8s ease-in-out infinite;
}
@keyframes loadingSpin { to { transform: rotate(360deg); } }
@keyframes loadingSpinReverse { to { transform: rotate(-360deg); } }
@keyframes loadingLogoBreathe {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); filter: brightness(.96); }
  25% { transform: translateX(-3px) rotate(-2deg) scale(1.022); filter: brightness(1.01); }
  50% { transform: translateX(0) rotate(0deg) scale(1.038); filter: brightness(1.06); }
  75% { transform: translateX(3px) rotate(2deg) scale(1.022); filter: brightness(1.01); }
}
.loading-text { font-size: 13px; color: var(--sub); font-weight: 600; letter-spacing: .3px; animation: loadingPulse 1.4s ease-in-out infinite; }
@keyframes loadingPulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

.loading-retry-btn{
  margin-top:12px;padding:9px 20px;border-radius:999px;
  border:1px solid rgba(56,189,248,.4);background:rgba(56,189,248,.12);
  color:#7dd3fc;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;
  animation:none!important;
}
.loading-retry-btn:active{transform:scale(.96)}

@media (prefers-reduced-motion: reduce) {
  .loading-ring,
  .loading-orbit-dot,
  .loading-logo,
  .loading-text { animation: none !important; }
}

.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  box-shadow: 0 0 28px rgba(56, 189, 248, .35);
  object-fit: cover;
  display: block;
  margin: 0 auto 14px;
}
.login-logo h1 { font-size: 30px; font-weight: 800; color: var(--blue); }
.login-logo p { font-size: 13px; color: var(--sub); margin-top: 4px; }

.login-card {
  width: 100%;
  max-width: 360px;
  background: rgba(8, 18, 15, .4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(45, 212, 191, .18);
  border-radius: 24px;
  padding: 28px 22px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.login-card .inp-wrap { width: 100%; max-width: 100%; }
.login-card .btn-login { width: 100%; }
.login-card h2 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; }
.login-desc { font-size: 13px; color: var(--sub); margin-bottom: 26px; line-height: 1.6; }

.inp-wrap { position: relative; margin-bottom: 14px; }
.inp-pre { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 15px; pointer-events: none; }
.inp {
  width: 100%;
  height: 50px;
  background: var(--bg3);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  outline: none;
  transition: .2s;
  padding: 0 14px 0 46px;
}
.inp:focus { border-color: var(--blue); }
.inp::placeholder { color: var(--muted); }

.btn-login {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(2, 132, 199, .3);
  margin-top: 4px;
}
.btn-login:disabled { background: #1e293b; color: #475569; box-shadow: none; cursor: not-allowed; }
.login-note { font-size: 11px; color: var(--muted); text-align: center; margin-top: 14px; }

/* LINE login page polish */
.login-logo img { animation: loginLogoIn .5s cubic-bezier(.2,.8,.2,1); }
@keyframes loginLogoIn { from { opacity: 0; transform: scale(.8) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.login-card { animation: fadeUp .4s ease .1s both; }
#lineLoginStep h2, #phoneStep h2 { letter-spacing: .2px; }
.btn-login[style*="06C755"]:active { transform: scale(.98); }
.line-profile-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(6, 199, 85, .08);
  border: 1px solid rgba(6, 199, 85, .28);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 22px;
  width: 100%;
  animation: fadeUp .35s ease;
}
.line-profile-card img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid #06C755; flex-shrink: 0; }
.line-profile-card .name { font-size: 14px; color: #fff; font-weight: 700; }
.line-profile-card .status { font-size: 11px; color: var(--green); margin-top: 2px; display: flex; align-items: center; gap: 4px; }

/* Welcome card polish */
.login-card {
  position: relative;
  overflow: hidden;
  padding-top: 34px;
}
.login-card::before {
  content: '';
  position: absolute;
  top: 0; left: 18%; right: 18%;
  height: 3px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(90deg, transparent, #2dd4bf, transparent);
  opacity: .8;
}
#lineLoginStep h2 {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 10px;
}
.wave-emoji {
  display: inline-block;
  animation: waveHand 2.2s ease-in-out infinite;
  transform-origin: 70% 70%;
}
@keyframes waveHand {
  0%, 55%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(14deg); }
  40% { transform: rotate(-4deg); }
}
.login-desc { font-size: 13.5px; line-height: 1.7; }
.login-note-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: 999px;
  margin-top: 18px;
  font-size: 11px;
  color: var(--muted);
}

/* ปุ่มปิดหน้าล็อกอิน (โผล่เฉพาะตอนถูกเรียกขึ้นมาระหว่างเยี่ยมชมแบบไม่ล็อกอิน — ให้กลับไปดูทริปต่อได้) */
#loginCloseBtn {
  display: none;
  position: absolute;
  top: 18px;
  left: 18px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  border: none;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  backdrop-filter: blur(6px);
}

/* ============================================================
   APP SHELL / HEADER / BOTTOM NAV
   ============================================================ */
#appShell { display: block; }

.hdr {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-bottom: 53px;
  margin-bottom: 2px;
}
/* หน้าอื่นนอกจากหน้าแรกไม่มีกล่องทักทาย เลยไม่ต้องเผื่อระยะด้านล่างเยอะขนาดนั้น */
.hdr.no-greet { padding-bottom: 0; }
.hdr-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.hdr-brand img { width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--blue); object-fit: cover; }
.hdr-brand h1 { font-size: 16px; font-weight: 800; color: var(--blue); }
.hdr-brand span { font-size: 8px; color: #fff; opacity: .7; display: block; }
.hdr-btn {
  background: var(--card);
  border: 1px solid var(--border);
  color: #fff;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.bnav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(6, 11, 19, .94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 500;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 0 12px; cursor: pointer; gap: 4px; }
.bnav-item .ico { font-size: 22px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.bnav-item .ico svg { width: 23px; height: 23px; display: block; }
.bnav-item .lbl { font-size: 10px; font-weight: 600; color: var(--muted); }
.bnav-item.active .lbl { color: var(--blue); }
.bnav-item.active .ico { color: var(--blue); filter: drop-shadow(0 0 6px rgba(56, 189, 248, .6)); }
.nav-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; display: none; border: 1.5px solid var(--muted); }
.bnav-item.active .nav-avatar { border-color: var(--blue); }

/* ============================================================
   PAGE / LAYOUT UTILITIES
   ============================================================ */
.view-page { display: none; }
.view-page.active-page { display: block; animation: fadeUp .3s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.main { max-width: 480px; margin: 0 auto; padding: 16px 16px 100px; }
.divider { height: 1px; background: var(--border); margin: 20px 0; }

/* โหมดสมาชิกเท่านั้น: ซ่อนเนื้อหาเว็บไว้หลังหน้าล็อกอิน */
body.tnh-members-gate #loginCloseBtn{display:none!important}
body.tnh-members-gate #appShell,body.tnh-members-gate .desk-landing,body.tnh-members-gate #desktopApp{visibility:hidden!important}
.members-gate-note{margin-top:14px;font-size:12.5px;line-height:1.6;color:#94a3b8;text-align:center}
/* ==== css/10-home.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   HOME TAB
   ============================================================ */
.home-banner {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  cursor: pointer;
}
.home-banner img { width: 100%; height: auto; display: block; }
.home-banner-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(180deg, rgba(6, 11, 19, 0) 0%, var(--bg) 94%);
  pointer-events: none;
}
.home-banner-actions {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  display: flex;
  gap: 8px;
}
.home-banner-actions .hdr-btn {
  display: flex; align-items: center; gap: 5px;
  border: none; cursor: pointer; font-family: inherit; white-space: nowrap;
  padding: 7px 12px; border-radius: 999px; font-size: 11px; font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.home-banner-actions .hdr-btn-info { background: rgba(6, 11, 19, .55); border: 1px solid rgba(56, 189, 248, .4); color: var(--blue); }
.home-banner-actions .hdr-btn-contact { background: linear-gradient(135deg, var(--blue2), var(--blue)); color: #fff; box-shadow: 0 3px 10px rgba(2, 132, 199, .35); }
.hdr-greet {
  position: absolute;
  left: 50%; bottom: -64px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 32px);
  max-width: 440px;
  background: rgba(6, 11, 19, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.hdr-greet img {
  width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(56, 189, 248, .5);
  flex-shrink: 0;
}
.hdr-greet h2 { font-size: 13.5px; font-weight: 700; color: #fff; }
.hdr-greet p { font-size: 11px; color: #cbd5e1; margin-top: 2px; }

/* ============================================================
   HOME BOOKING STEPS + GREETING SEARCH
   ============================================================ */
.hdr-greet .home-greet-copy{min-width:0;flex:1;}
.home-greet-search{
  position:relative;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
}
.home-greet-search-btn{
  appearance:none;border:1px solid rgba(56,189,248,.30);outline:0;
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(12,29,45,.96),rgba(8,18,30,.98));
  color:#7dd3fc;font-size:20px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 7px 20px rgba(0,0,0,.22);
  transition:transform .16s ease,border-color .18s ease,box-shadow .18s ease;
}
.home-greet-search-btn:active{transform:scale(.92)}
.home-greet-search.open .home-greet-search-btn{
  border-color:rgba(56,189,248,.62);
  box-shadow:0 0 0 3px rgba(56,189,248,.08),0 7px 20px rgba(0,0,0,.22);
}
.home-greet-search-box{
  position:absolute;right:0;top:calc(100% + 9px);z-index:40;
  width:min(285px,calc(100vw - 54px));
  padding:8px;
  display:flex;align-items:center;gap:7px;
  background:rgba(6,14,24,.98);
  border:1px solid rgba(56,189,248,.28);
  border-radius:15px;
  box-shadow:0 16px 38px rgba(0,0,0,.42);
  opacity:0;visibility:hidden;transform:translateY(-7px) scale(.97);
  transform-origin:top right;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
}
.home-greet-search.open .home-greet-search-box{opacity:1;visibility:visible;transform:none}
.home-greet-search-box .search-ico{font-size:16px;opacity:.75;padding-left:4px}
#homeSearchInput{
  min-width:0;flex:1;border:0;outline:0;background:transparent;
  color:#f8fafc;font:inherit;font-size:12px;
}
#homeSearchInput::placeholder{color:#64748b}
.home-search-clear{
  appearance:none;border:0;background:transparent;color:#64748b;
  width:28px;height:28px;border-radius:9px;font-size:16px;cursor:pointer;
}

/* แถบขั้นตอนการจอง — วางเหนือ 3 กล่องหน้า Home */
.home-booking-steps{
  position:absolute;
  left:auto;
  right:18px;
  bottom:22px;
  transform:none;
  z-index:3;

  /* จำกัดความกว้างให้อยู่เฉพาะพื้นที่ว่างด้านขวาของรูป */
  width:min(230px,54%);
  max-width:230px;

  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr 10px 1fr 10px 1fr 10px 1fr;
  align-items:start;

  /* ลอยทับบนรูป Header โดยตรง — ไม่มีกรอบ/พื้นหลัง */
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
  pointer-events:none;
}
.home-step{min-width:0;text-align:center;position:relative}
.home-step-icon{
  width:30px;height:30px;margin:0 auto 5px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(100,116,139,.30);
  background:rgba(5,13,23,.68);
  color:#718096;font-size:13px;
  box-shadow:0 4px 13px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.home-step-label{
  font-size:7.4px;font-weight:800;line-height:1.15;color:#64748b;white-space:nowrap;
}
.home-step-line{
  height:2px;border-radius:99px;margin-top:14px;
  background:rgba(100,116,139,.20);position:relative;overflow:hidden;
}
.home-step .home-step-icon{
  transition:
    color .20s ease,
    border-color .20s ease,
    background .20s ease,
    box-shadow .20s ease,
    transform .20s ease;
}
.home-step .home-step-label{
  transition:color .20s ease,text-shadow .20s ease;
}
.home-step-line{
  transition:background .22s ease,box-shadow .22s ease;
}

/* วงที่ผ่านแล้วจะติดสีฟ้าค้างไว้ */
.home-step.sequence-on .home-step-icon{
  color:#06111c;
  border-color:rgba(125,211,252,.94);
  background:linear-gradient(135deg,#9ce4ff,#38bdf8);
  box-shadow:
    0 0 0 5px rgba(56,189,248,.09),
    0 0 21px rgba(56,189,248,.38),
    0 6px 16px rgba(0,0,0,.24);
}
.home-step.sequence-on .home-step-label{
  color:#dff6ff;
  text-shadow:0 0 9px rgba(56,189,248,.30);
}

/* เฉพาะวงที่เพิ่งติด: ขยายขึ้นแล้วหดกลับเป็นปกติ */
.home-step.sequence-hit .home-step-icon{
  animation:tnhStepArrive .54s cubic-bezier(.18,.9,.22,1);
}
@keyframes tnhStepArrive{
  0%{transform:scale(1)}
  42%{
    transform:scale(1.23);
    box-shadow:
      0 0 0 8px rgba(56,189,248,.13),
      0 0 32px rgba(56,189,248,.60),
      0 8px 20px rgba(0,0,0,.25);
  }
  72%{transform:scale(.97)}
  100%{transform:scale(1)}
}

/* เส้นจะติดสีฟ้าค้างตามวงที่เดินถึง */
.home-step-line.sequence-on{
  background:linear-gradient(90deg,rgba(56,189,248,.28),#7dd3fc,rgba(56,189,248,.32));
  box-shadow:0 0 8px rgba(56,189,248,.28);
}
.home-step-line.sequence-hit{
  animation:tnhStepLineArrive .45s ease;
}
@keyframes tnhStepLineArrive{
  0%{filter:brightness(1)}
  45%{filter:brightness(1.9)}
  100%{filter:brightness(1)}
}

/* ไอคอน "เลือกทริป" — เครื่องหมายถูกขยายเล็ก/ใหญ่ในวงกลม */
.step-check-mark{
  display:inline-block;
  font-size:17px;
  font-weight:1000;
  line-height:1;
  transform-origin:center;
  animation:tnhStepCheckBeat 1.35s ease-in-out infinite;
}
@keyframes tnhStepCheckBeat{
  0%,100%{transform:scale(.78)}
  45%{transform:scale(1.18)}
  62%{transform:scale(1.02)}
}

/* ไอคอน "กรอกข้อมูล" — ดินสอขยับเหมือนกำลังเขียน */
.step-pencil-wrap{
  position:relative;
  width:21px;
  height:19px;
  display:block;
}
.step-pencil{
  position:absolute;
  left:2px;
  top:0;
  display:block;
  font-size:17px;
  line-height:1;
  transform-origin:75% 75%;
  animation:tnhPencilWrite 1.65s ease-in-out infinite;
}
.step-pencil-line{
  position:absolute;
  left:3px;
  bottom:1px;
  width:15px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  opacity:.75;
  overflow:hidden;
}
.step-pencil-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.72);
  transform-origin:right center;
  animation:tnhPencilLine 1.65s ease-in-out infinite;
}
@keyframes tnhPencilWrite{
  0%,100%{transform:translate(0,0) rotate(-16deg)}
  22%{transform:translate(3px,1px) rotate(-9deg)}
  44%{transform:translate(6px,0) rotate(-17deg)}
  66%{transform:translate(9px,1px) rotate(-8deg)}
  82%{transform:translate(5px,0) rotate(-14deg)}
}
@keyframes tnhPencilLine{
  0%{transform:scaleX(1)}
  65%{transform:scaleX(.08)}
  82%,100%{transform:scaleX(1)}
}

@media (max-width:380px){
  .step-check-mark{font-size:15px}
  .step-pencil-wrap{transform:scale(.88)}
}
@media (prefers-reduced-motion:reduce){
  .step-check-mark,.step-pencil,.step-pencil-line::after{animation:none}
}

@media (max-width:380px){
  .home-booking-steps{
    right:12px;
    bottom:18px;
    width:min(205px,56%);
    max-width:205px;
    grid-template-columns:1fr 7px 1fr 7px 1fr 7px 1fr;
  }
  .home-step-icon{width:27px;height:27px;font-size:12px}
  .home-step-label{font-size:6.7px}
  .home-step-line{height:2px;margin-top:13px}
}
@media (prefers-reduced-motion:reduce){
  .home-step.sequence-hit .home-step-icon,.home-step-line.sequence-hit{animation:none}
}

.home-quick-actions { display: flex; gap: 10px; margin-bottom: 16px; margin-top: 16px; }
.home-quick-actions .qa-mini { flex: 1; width: auto; height: 62px; }
.qa-mini {
  width: 66px;
  height: 66px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  animation: qaBeat 1.8s ease-in-out infinite;
  transition: transform .15s;
}
.qa-mini:active { transform: scale(.92); }
.qa-mini .qa-mini-ico { font-size: 27px; }
.qa-mini .qa-mini-label { font-size: 9.5px; font-weight: 800; color: rgba(0, 0, 0, .75); line-height: 1; }
.qa-trip-mini { background: linear-gradient(145deg, #ffe066, #ffc400); box-shadow: 0 5px 14px rgba(255, 196, 0, .4); }
.qa-rent-mini { background: linear-gradient(145deg, #34e89e, #0bb96f); box-shadow: 0 5px 14px rgba(11, 185, 111, .4); }
.qa-mytrips-mini { background: linear-gradient(145deg, #7dd3fc, #0284c7); box-shadow: 0 5px 14px rgba(2, 132, 199, .4); }
.qa-mytrips-mini .qa-mini-label { color: rgba(255, 255, 255, .95); }
@keyframes qaBeat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.sec-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sec-hdr h3 { font-size: 16px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }

/* กล่องแยกทริปตามเดือน ในหน้า "ทริปทั้งหมด" — การ์ดรูปสวยๆ เหมือนการ์ดทริป */
.month-group { margin-bottom: 22px; }
.month-photo-card {
  position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
  min-height: 190px; box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.month-photo-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.month-photo-card .month-fade-img { opacity: 0; will-change: opacity; }
.month-photo-card .month-fade-img:first-child { opacity: 1; }

.month-photo-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6,11,19,.9) 0%, rgba(6,11,19,.6) 45%, rgba(6,11,19,.2) 100%);
}
.month-photo-card-overlay { position: relative; z-index: 1; padding: 16px 18px 14px; display: flex; flex-direction: column; min-height: 190px; justify-content: flex-start; }
.month-photo-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.month-photo-card-title { font-size: 18px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
.month-group-count { font-size: 11.5px; font-weight: 700; color: #7dd3fc; background: rgba(56,189,248,.2); border: 1px solid rgba(125,211,252,.3); border-radius: 10px; padding: 3px 10px; backdrop-filter: blur(4px); }
.month-group-arrow { display: inline-block; font-size: 16px; color: #fff; font-weight: 900; transition: transform .2s; }
.month-trip-names { display: flex; flex-direction: column; gap: 5px; }
.month-trip-name-item { font-size: 13px; font-weight: 400; color: #f1f5f9; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

#upcomingList::-webkit-scrollbar { display: none; }
#upcomingList { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
#upcomingList .trip-hcard2 { flex: 0 0 100%; min-height: auto; scroll-snap-align: start; scroll-snap-stop: always; }

.stat-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, rgba(56, 189, 248, .08), rgba(16, 185, 129, .05));
  border: 1px solid rgba(56, 189, 248, .12);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 20px;
}
.stat-bar .ico { font-size: 24px; }
.stat-bar .txt h4 { font-size: 13px; color: #fff; font-weight: 700; }
.stat-bar .txt p { font-size: 11px; color: var(--sub); margin-top: 2px; }

/* ============================================================
   TRIP CARD — "Expedition Ticket" premium design
   ============================================================ */
.trip-list { display: flex; flex-direction: column; gap: 16px; }

/* การ์ดทริปวนโชว์ทีละใบ (จะเปิดจองเร็วๆนี้ / ทริปที่ผ่านมา) — จางเข้า/จางออกตอนสลับใบ */
.trip-cycle-slide { animation: tripCycleFadeIn .5s ease; background: transparent; }
.trip-cycle-slide.fade-out { animation: tripCycleFadeOut .5s ease forwards; }
@keyframes tripCycleFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tripCycleFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Safari แยกชั้น filter ของการ์ดล็อกออกจาก parent บางจังหวะ
   เฟดผิวการ์ดโดยตรงด้วย เพื่อไม่ให้เหลือกล่องทึบระหว่างเปลี่ยนใบ */
#closedList .trip-cycle-slide.fade-out .trip-hcard2,
#closedList .trip-cycle-slide.fade-out .thc-photo {
  animation: closedTripSurfaceFadeOut .5s ease forwards;
}
@keyframes closedTripSurfaceFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.trip-hcard {
  position: relative;
  display: block;
  background: linear-gradient(165deg, #18140d, #0e0c08);
  border: 1px solid rgba(212, 175, 55, .22);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .04);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.trip-hcard:hover { transform: translateY(-3px); border-color: rgba(212, 175, 55, .55); box-shadow: 0 16px 36px rgba(0, 0, 0, .55); }
.trip-hcard:active { transform: scale(.985); }

.lux-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #0e0c08; }
.lux-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.trip-hcard:hover .lux-photo img { transform: scale(1.05); }
.lux-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 8, 0) 42%, rgba(14, 12, 8, .95) 100%); }

.lux-status {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 12px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .2px;
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.lux-status.open { background: rgba(16, 185, 129, .88); color: #04150e; }
.lux-status.almost { background: linear-gradient(135deg, #f4d160, #c9971f); color: #241800; animation: hb .9s infinite; }
.lux-status.full { background: rgba(239, 68, 68, .9); color: #fff; }
.lux-status.soon { background: rgba(255, 255, 255, .14); color: #f1d488; border-color: rgba(241, 212, 136, .5); }
.lux-status.done { background: rgba(255, 255, 255, .12); color: #d8cdae; }

.lux-price {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: linear-gradient(135deg, #f6e2a0, #c9971f);
  color: #241800; font-weight: 800; font-size: 14px;
  padding: 6px 13px; border-radius: 13px 13px 13px 4px;
  box-shadow: 0 5px 12px rgba(201, 151, 31, .4);
}

.lux-locked-ov {
  position: absolute; inset: 0; z-index: 3;
  background: rgba(10, 8, 5, .62);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex; align-items: center; justify-content: center; font-size: 30px;
}

/* เบลอทั้งรูปและข้อความของการ์ด "เร็วๆ นี้"
   เพื่อให้เอฟเฟกต์ต่อเนื่องตลอดการเปลี่ยนใบ รวมถึงบน Safari */
.trip-hcard2.is-locked .thc-photo {
  -webkit-filter: blur(2.2px);
  filter: blur(2.2px);
  transform: translateZ(0) scale(1.025);
  will-change: filter, opacity;
}

/* ============================================================
   TRIP CARD V2 — สไตล์รูปเต็มการ์ด + ข้อความซ้อนบนรูป (ตามแบบอ้างอิง)
   ============================================================ */
.trip-hcard2 {
  position: relative;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: #0d1420;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
  transition: transform .18s ease;
}

/* การ์ดที่ยังไม่เปิดจองมีรูปเต็มพื้นที่อยู่แล้ว ไม่ต้องมีสีรองพื้นทึบ
   เมื่อรูปและข้อความกำลังเฟดจึงมองทะลุเห็นพื้นหลังป่า ไม่เหลือกล่องสี่เหลี่ยม */
.trip-hcard2.is-locked {
  background: transparent;
}
.trip-hcard2:active { transform: scale(.98); }

.thc-photo { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; }
.thc-photo img { width: 100%; height: 100%; object-fit: cover; }
.thc-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, .82) 100%); }

.thc-status-pill {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: rgba(6, 11, 19, .42); color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .1px;
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}
.thc-status-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #34e89e; box-shadow: 0 0 6px #34e89e; }
.thc-status-pill.full::before { background: #ef6a6a; box-shadow: 0 0 6px #ef6a6a; }
.thc-status-pill.almost::before { background: #f4d160; box-shadow: 0 0 6px #f4d160; }
.thc-status-pill.soon::before { background: #94a3b8; box-shadow: none; }
.thc-status-pill.done::before { background: #94a3b8; box-shadow: none; }

.thc-pickup-pill {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  background: rgba(6, 11, 19, .42); color: #f1f5f9;
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 6px 13px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1px;
  backdrop-filter: blur(8px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
  max-width: 62%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* การ์ดรวมหลายรอบ (สถานที่เดียวกัน ออกหลายวันที่) — กดได้ทั้งการ์ดเหมือนทริปทั่วไป เปิดป็อบอัพเลือกรอบแทนปุ่มเรียงยาว */
.thc-arrow-hint { font-size: 12.5px; font-weight: 700; color: #7dd3fc; }

.thc-overlay { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.thc-title { font-size: 21px; font-weight: 800; color: #fff; line-height: 1.28; margin-bottom: 10px; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); }
.thc-meta-row { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #e5e7eb; margin-bottom: 16px; }
.thc-meta-row span { display: flex; align-items: center; gap: 5px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

.thc-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.thc-price strong { font-size: 26px; font-weight: 900; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.thc-price span { font-size: 12.5px; color: #cbd5e1; margin-left: 4px; }
.thc-seats-pill {
  display: flex; align-items: center; gap: 6px; flex-shrink: 0;
  background: rgba(16, 185, 129, .16); border: 1px solid rgba(16, 185, 129, .45); color: #7fe3b4;
  backdrop-filter: blur(6px);
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.thc-seats-pill.low { background: rgba(245, 158, 11, .16); border-color: rgba(245, 158, 11, .45); color: #f6cd6e; }
.thc-seats-pill.full { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .45); color: #f3a0a0; }

.trip-hcard2.compact .thc-photo { aspect-ratio: 16 / 9; }
.trip-hcard2.compact .thc-title { font-size: 16px; margin-bottom: 6px; }
.trip-hcard2.compact .thc-meta-row { font-size: 11px; gap: 12px; margin-bottom: 10px; }
.trip-hcard2.compact .thc-price strong { font-size: 19px; }
.trip-hcard2.compact .thc-seats-pill { font-size: 11px; padding: 6px 12px; }

/* ============================================================
   ประวัติความบ้า (โปรไฟล์) — การ์ดรูปพื้นหลังเต็ม แทนรายการเล็กเดิม
   ============================================================ */
.hist-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.hist-card img { width: 100%; height: 100%; object-fit: cover; }
.hist-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .88) 100%); }
.hist-card-overlay { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; }
.hist-card-overlay h4 { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 5px; text-shadow: 0 2px 8px rgba(0, 0, 0, .55); }
.hist-card-overlay p { font-size: 11.5px; color: #e2e8f0; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
/* ปุ่ม "ชำระส่วนที่เหลือ" เต้นจังหวะหัวใจ ดึงดูดความสนใจให้คนสังเกตเห็นง่ายขึ้น */
@keyframes remainPayPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(217, 119, 6, .4); }
  50% { transform: scale(1.06); box-shadow: 0 4px 18px rgba(217, 119, 6, .7); }
}
.remain-pay-btn { animation: remainPayPulse 1.4s ease-in-out infinite; }

/* ป้ายเรืองแสงสีเขียว โชว์ตอนจ่ายค่าทริปครบ 100% แล้ว */
@keyframes paidGlow {
  0%, 100% { box-shadow: 0 0 8px rgba(34, 197, 94, .5), 0 0 2px rgba(34, 197, 94, .8) inset; }
  50% { box-shadow: 0 0 18px rgba(34, 197, 94, .85), 0 0 4px rgba(34, 197, 94, 1) inset; }
}
.paid-full-badge {
  position: absolute; right: 12px; bottom: 12px; z-index: 3;
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 10px;
  padding: 7px 12px; font-size: 11.5px; font-weight: 700;
  animation: paidGlow 1.8s ease-in-out infinite;
}
.paid-check-mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1px solid rgba(255,255,255,.56);
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.hist-card-seat {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  min-width: 50px; padding: 5px 10px;
  border-radius: 12px;
  background: linear-gradient(160deg, #1a2233, #0d131f);
  border: 1px solid rgba(212, 175, 55, .45);
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.hist-card-seat .mini-seat-label { display: block; font-size: 7px; font-weight: 800; letter-spacing: .5px; color: rgba(246, 226, 160, .6); }
.hist-card-seat .mini-seat-num { display: block; font-size: 14px; font-weight: 900; color: #f6e2a0; line-height: 1.2; }

/* เส้นปรุตั๋ว — องค์ประกอบซิกเนเจอร์ของการ์ด ให้ความรู้สึกเหมือนตั๋วเดินทางใบพรีเมียม */
.lux-stub { position: relative; border-top: 1.5px dashed rgba(212, 175, 55, .35); }
.lux-stub::before, .lux-stub::after {
  content: ''; position: absolute; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg);
}
.lux-stub::before { left: -8px; }
.lux-stub::after { right: -8px; }

.lux-body { padding: 16px 16px 14px; }
.lux-title { font-size: 17.5px; font-weight: 800; color: #f6efe0; line-height: 1.35; letter-spacing: .2px; margin-bottom: 6px; }
.lux-loc { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: #b8ab8c; margin-bottom: 12px; }
.lux-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(212, 175, 55, .14); flex-wrap: wrap; }
.lux-meta-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.lux-date { font-size: 11px; color: #cbbf9e; display: flex; align-items: center; gap: 5px; }
.lux-days { font-size: 10.5px; color: #8d8168; display: flex; align-items: center; gap: 5px; }
.lux-seats { font-size: 13px; font-weight: 800; }
.lux-seats.ok { color: #5fd1a0; }
.lux-seats.low { color: #f1c14a; }
.lux-seats.full { color: #ef6a6a; }
.lux-cta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #f1d488; }

/* การ์ดขนาดย่อ — ใช้ในหน้า "ทริปทั้งหมด"/ผลค้นหา ที่มีรายการเยอะ ให้ไล่ดูได้ไวขึ้น */
.trip-hcard.compact .lux-photo { aspect-ratio: 16 / 7; }
.trip-hcard.compact .lux-status { font-size: 10px; padding: 4px 10px; top: 10px; left: 10px; }
.trip-hcard.compact .lux-price { font-size: 12px; padding: 5px 10px; right: 10px; bottom: 10px; }
.trip-hcard.compact .lux-body { padding: 12px 14px 11px; }
.trip-hcard.compact .lux-title { font-size: 15px; margin-bottom: 4px; }
.trip-hcard.compact .lux-loc { font-size: 11px; margin-bottom: 8px; }
.trip-hcard.compact .lux-meta-row { padding-top: 8px; }
.trip-hcard.compact .lux-meta-row2 { margin-top: 5px; }
.trip-hcard.compact .lux-days { font-size: 10px; }
.trip-hcard.compact .lux-seats { font-size: 12px; }
.trip-hcard.compact .lux-cta { font-size: 11px; }

/* ============================================================
   PAST TRIPS GRID
   ============================================================ */
.past-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

/* ============================================================
   TOP TRAVELERS PODIUM — "สายลุยตัวจริง" 3 อันดับที่เดินทางบ่อยสุด
   ============================================================ */
.podium-row { position: relative; isolation: isolate; display: flex; align-items: flex-end; justify-content: center; gap: 10px; padding: 24px 4px 0; overflow: hidden; border-radius: 22px; }
/* พลุด้านหลังแท่น — CSS ล้วน ไม่เพิ่มโหลดรูป/ไลบรารี */
.podium-row::before,
.podium-row::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 5px; height: 5px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: #fff4b0;
  box-shadow:
    0 -42px 0 #ffe17a, 18px -36px 0 #67e8f9, 34px -22px 0 #f9a8d4,
    42px 0 0 #fde68a, 34px 22px 0 #7dd3fc, 18px 36px 0 #f0abfc,
    0 42px 0 #fde047, -18px 36px 0 #67e8f9, -34px 22px 0 #f9a8d4,
    -42px 0 0 #fde68a, -34px -22px 0 #7dd3fc, -18px -36px 0 #f0abfc;
  animation: podiumFirework 3.4s ease-out infinite;
}
.podium-row::before { left: 24%; top: 38%; }
.podium-row::after { right: 22%; top: 27%; animation-delay: 1.65s; transform: scale(.82); }
@keyframes podiumFirework {
  0%, 30% { opacity: 0; transform: scale(.12); filter: blur(1px); }
  38% { opacity: .95; }
  58% { opacity: .72; transform: scale(1); filter: blur(0); }
  78%, 100% { opacity: 0; transform: scale(1.35); filter: blur(1px); }
}

.podium-slot { flex: 1; max-width: 130px; display: flex; flex-direction: column; align-items: center; }
.podium-avatar {
  position: relative;
  border-radius: 50%;
  overflow: visible;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  color: #fff; font-weight: 800;
  margin-bottom: 8px;
}
.podium-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transform-origin: 50% 92%; animation: podiumAvatarSway 3.1s ease-in-out infinite; will-change: transform; }
.podium-2nd .podium-avatar img { animation-delay: -.65s; }
.podium-3rd .podium-avatar img { animation-delay: -1.25s; }
@keyframes podiumAvatarSway {
  0%, 100% { transform: rotate(-3deg) translateX(-1px); }
  50% { transform: rotate(3deg) translateX(1px); }
}
@media (prefers-reduced-motion: reduce) {
  .podium-avatar img, .podium-row::before, .podium-row::after { animation: none !important; }
}
.podium-avatar span { font-size: 20px; }
.podium-medal { position: absolute; bottom: -4px; right: -4px; font-size: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.podium-name { font-size: 12.5px; font-weight: 700; color: #fff; text-align: center; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-count { font-size: 10.5px; color: var(--sub); margin-top: 2px; margin-bottom: 10px; }
.podium-stand {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px;
  font-weight: 900;
  color: rgba(0, 0, 0, .55);
}

.podium-1st .podium-avatar { width: 84px; height: 84px; border: 3px solid #f6e2a0; box-shadow: 0 0 22px rgba(246, 226, 160, .45); }
.podium-1st .podium-stand { height: 84px; background: linear-gradient(180deg, #f6e2a0, #c9971f); font-size: 26px; }
.podium-1st .podium-name { font-size: 14px; }

.podium-2nd .podium-avatar { width: 66px; height: 66px; border: 3px solid #cbd5e1; box-shadow: 0 0 16px rgba(203, 213, 225, .35); }
.podium-2nd .podium-stand { height: 58px; background: linear-gradient(180deg, #cbd5e1, #94a3b8); font-size: 22px; }

.podium-3rd .podium-avatar { width: 66px; height: 66px; border: 3px solid #d9a066; box-shadow: 0 0 16px rgba(217, 160, 102, .35); }
.podium-3rd .podium-stand { height: 42px; background: linear-gradient(180deg, #e3a86b, #b9793f); font-size: 22px; }
.past-card { border-radius: 14px; overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 3 / 4; }
.past-card img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.65); }
.past-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 8px; background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent); }
.past-card-info h5 { font-size: 10px; font-weight: 700; color: #fff; line-height: 1.3; }
.past-card-info p { font-size: 9px; color: var(--sub); }
.past-card-rating { position: absolute; top: 6px; right: 6px; font-size: 9px; background: rgba(0, 0, 0, .6); color: #fbbf24; padding: 2px 5px; border-radius: 5px; font-weight: 700; }

/* ============================================================
   SEARCH
   ============================================================ */
.search-wrap { position: relative; margin-bottom: 18px; }
.search-wrap input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 44px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: .2s;
}
.search-wrap input:focus { border-color: var(--blue); }
.s-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--muted); }

/* ================================================================
   CONTACT POPUP — BACKGROUND ONLY
   เปลี่ยนเฉพาะพื้นหลังเท่านั้น ห้ามกระทบ layout/position/size/function
   ================================================================ */
#adminPopup > div {
  background:
    linear-gradient(180deg, rgba(3,10,17,.76), rgba(3,10,17,.88)),
    url('/ximg.php?f=1448375240586-882707db888b-1200.jpg') center/cover no-repeat !important;
}

/* ================================================================
   หน้าหลัก: ปฏิทินทริป + ตำแหน่งรถตู้ เป็น 2 กล่องแถวเดียวกัน (2026-09-28)
   ================================================================ */
.home-duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.home-duo .home-duo-card{margin-top:0;min-height:0;aspect-ratio:1/1;border-radius:20px}
.home-duo .home-duo-card::after{background:linear-gradient(180deg,rgba(6,11,19,.15) 0%,rgba(6,11,19,.55) 45%,rgba(6,11,19,.92) 100%)}
.home-duo-body{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;padding:13px 13px 14px}
.home-duo-icon{position:absolute;top:12px;left:12px;width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:rgba(6,11,19,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:21px;border:1px solid rgba(255,255,255,.12)}
.home-duo-title{font-size:16px;font-weight:800;color:#fff;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.home-duo-sub{margin-top:2px;font-size:11.5px;color:#cbd5e1;line-height:1.35;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.home-duo-card::before{content:'›';position:absolute;z-index:2;top:12px;right:14px;font-size:22px;font-weight:900;color:rgba(255,255,255,.85)}
.home-learning:empty{display:none}
.home-learning .ann-learning{margin:14px 0 4px}

/* การ์ดศูนย์การเรียนรู้นักเดินป่า — พื้นหลังป่าแบบเดียวกับป๊อบอัพ (ไม่ทึบ เห็นภาพป่า) */
.home-learning .ann-learning{
  border-color:rgba(105,170,151,.28);
  background:
    radial-gradient(circle at 88% 0%,rgba(52,211,153,.18),transparent 45%),
    linear-gradient(180deg,rgba(3,12,18,.50) 0%,rgba(3,12,18,.72) 55%,rgba(2,10,15,.90) 100%),
    var(--tnh-forest-photo,url('/ximg.php?f=1448375240586-882707db888b-900.jpg')) center/cover no-repeat;
  box-shadow:0 16px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
}
.home-learning .ann-learning:before{background:rgba(52,211,153,.10)}
.home-learning .ann-learning h3{text-shadow:0 2px 8px rgba(0,0,0,.6)}
.home-learning .ann-learning p{color:#c3d6cf}
/* ==== css/20-my-trips-profile-v8.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   MY TRIPS TAB
   ============================================================ */
.my-profile {
  position: relative;
  background:
    linear-gradient(180deg, rgba(3, 12, 18, .84), rgba(2, 10, 15, .92)),
    var(--tnh-forest-photo, url('/ximg.php?f=1448375240586-882707db888b-900.jpg')) center/cover no-repeat;
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.my-profile-edit-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(125, 211, 252, .25);
  border-radius: 10px;
  background: rgba(5, 16, 26, .62);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  color: #a5e4ff;
  font-family: inherit;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.my-profile-edit-btn:active { transform: scale(.96); }
.my-profile-edit-form {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 14px;
  overflow: hidden;
  text-align: left;
}
.my-profile-edit-label {
  display: block;
  margin: 11px 2px 6px;
  color: #b8c7d2;
  font-size: 10px;
  font-weight: 800;
}
.my-profile-edit-control {
  box-sizing: border-box!important;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 12px;
  outline: none;
  background: rgba(3,12,20,.76);
  color: #f1f5f9;
  font-family: inherit;
  font-size: 13px;
  font-weight: 650;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.my-profile-edit-control:focus {
  border-color: rgba(56,189,248,.58);
  box-shadow: 0 0 0 3px rgba(56,189,248,.09);
}
.my-profile-edit-control.is-locked { color: #8293a6; opacity: .82; }
.my-profile-edit-help {
  margin: 8px 2px 0;
  color: #7f91a3;
  font-size: 9px;
  line-height: 1.55;
}
.my-profile-edit-help.is-safe { color: #6ee7b7; }
.my-profile-edit-section {
  margin: 2px 0 8px;
  padding: 9px 11px;
  border: 1px solid rgba(56,189,248,.15);
  border-radius: 11px;
  background: rgba(14,165,233,.07);
  color: #b8eaff;
  font-size: 10px;
  font-weight: 850;
}
.my-profile-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.my-profile-edit-grid > div { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.my-profile-edit-grid .my-profile-edit-control { min-width: 0; max-width: 100%; }
.my-profile-edit-control[type="date"] {
  width: 100%!important;
  min-width: 0!important;
  max-width: 100%!important;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 12px!important;
  color-scheme: dark;
}
.my-profile-birth-grid > div:last-child .my-profile-edit-control {
  min-height: 40px;
  background: rgba(14, 31, 43, .82);
  color: #9fb2c1;
}
.my-profile-edit-privacy {
  margin: 12px 2px 0;
  padding: 9px 10px;
  border-left: 3px solid rgba(45,212,191,.55);
  border-radius: 0 9px 9px 0;
  background: rgba(13,148,136,.07);
  color: #92a9b7;
  font-size: 9px;
  line-height: 1.55;
}
.my-insurance-trip-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.my-insurance-trip-summary strong { color: #e8f7ff; font-size: 12px; }
.my-insurance-trip-summary span { color: #86a5b7; font-size: 9px; }
.my-insurance-trip-list { display: grid; gap: 9px; margin-top: 12px; }
.my-insurance-picker-html { margin-left: 0!important; margin-right: 0!important; }
.my-insurance-picker-popup .my-insurance-trip-list {
  max-height: 52vh;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.swal2-popup.my-insurance-picker-popup button.my-insurance-trip-choice {
  width: 100%;
  display: flex!important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(56,189,248,.18);
  border-radius: 13px;
  background: linear-gradient(135deg,rgba(9,28,41,.94),rgba(4,13,22,.96))!important;
  color: #f1f5f9!important;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.my-insurance-autofill-note {
  margin: 8px 0 3px;
  padding: 9px 11px;
  border: 1px solid rgba(245,158,11,.18);
  border-radius: 11px;
  background: rgba(120,70,8,.09);
  color: #aab8c5;
  font-size: 9px;
  line-height: 1.55;
  text-align: left;
}
.my-insurance-autofill-note.is-ready {
  border-color: rgba(16,185,129,.2);
  background: rgba(16,185,129,.07);
  color: #83d7b8;
}
.my-insurance-trip-choice span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.my-insurance-trip-choice strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.my-insurance-trip-choice small { color: #8196a8; font-size: 8.5px; }
.my-insurance-trip-choice b { color: #38bdf8; font-size: 20px; }
.trip-insurance-card-badge {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 4;
  display: inline-flex;
  width: auto;
  max-width: 120px;
  min-height: 35px;
  align-items: center;
  gap: 7px;
  padding: 5px 9px 5px 6px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.20);
  background: linear-gradient(135deg,rgba(2,12,17,.24),rgba(3,20,25,.16));
  backdrop-filter: blur(12px) saturate(125%);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  color: #fff;
  font-family: inherit;
  text-align: left;
  box-shadow: 0 5px 16px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.10);
  cursor: pointer;
}
.trip-insurance-card-badge.is-saved {
  border-color: rgba(110,231,183,.42);
  background: linear-gradient(135deg,rgba(3,31,28,.28),rgba(2,18,22,.16));
}
.trip-insurance-card-badge.is-pending {
  border-color: rgba(251,191,36,.38);
  background: linear-gradient(135deg,rgba(45,29,4,.26),rgba(10,17,20,.15));
}
.trip-insurance-card-badge.is-loading {
  pointer-events: none;
  border-color: rgba(56,189,248,.30);
  background: linear-gradient(135deg,rgba(3,25,38,.28),rgba(2,18,22,.16));
}
.trip-insurance-card-badge.is-error {
  border-color: rgba(148,163,184,.34);
  background: linear-gradient(135deg,rgba(20,29,39,.30),rgba(2,18,22,.16));
}
.trip-insurance-card-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  border-radius: 50%;
  background: rgba(245,158,11,.88);
  color: #fbbf24;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 13px rgba(245,158,11,.24);
}
.trip-insurance-card-badge.is-pending .trip-insurance-card-icon { color: #fff7dd; }
.trip-insurance-card-badge.is-saved .trip-insurance-card-icon {
  background: #10b981;
  color: #fff;
  box-shadow: 0 0 13px rgba(16,185,129,.30);
}
.trip-insurance-card-badge.is-loading .trip-insurance-card-icon {
  background: rgba(14,165,233,.18);
  box-shadow: 0 0 12px rgba(56,189,248,.22);
}
.trip-insurance-card-badge.is-error .trip-insurance-card-icon {
  background: rgba(100,116,139,.42);
  color: #dbeafe;
  box-shadow: none;
}
.trip-insurance-mini-spinner {
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid rgba(224,242,254,.28);
  border-top-color: #7dd3fc;
  border-radius: 50%;
  animation: tripInsuranceMiniSpin .72s linear infinite;
}
@keyframes tripInsuranceMiniSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .trip-insurance-mini-spinner { animation-duration: 1.5s; }
}
.trip-insurance-card-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
  line-height: 1;
}
.trip-insurance-card-copy small {
  overflow: hidden;
  color: #fff;
  font-size: 7px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.trip-insurance-card-copy strong {
  color: #fff;
  font-size: 9px;
  line-height: 1.2;
  white-space: nowrap;
}

/* ป๊อปอัพโหลดข้อมูลประกัน — โลโก้วงกลมหายใจเบา ๆ + จุดแสงโคจร */
.trip-insurance-load-container {
  position: fixed;
  inset: 0;
  z-index: 40000 !important;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 16px !important;
  place-items: center;
  background: rgba(1,7,13,.70) !important;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  overscroll-behavior: contain;
  touch-action: none;
}
.trip-insurance-load-swal {
  width: min(88vw,360px) !important;
  max-height: calc(100dvh - 32px);
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(56,189,248,.20) !important;
  background:
    linear-gradient(180deg,rgba(3,12,18,.84),rgba(2,10,15,.96)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat !important;
  color: #f1f5f9 !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.50),inset 0 1px 0 rgba(255,255,255,.04) !important;
  font-family: inherit !important;
  animation: tripInsurancePopupIn .22s ease-out both;
}
.trip-insurance-load-html { margin: 0 !important; padding: 0 !important; }
.trip-insurance-load-shell { padding: 23px 18px 24px; text-align: center; }
.trip-insurance-load-visual {
  position: relative;
  display: grid;
  width: 126px;
  height: 126px;
  margin: 0 auto 12px;
  place-items: center;
}
.trip-insurance-load-glow {
  position: absolute;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: rgba(56,189,248,.10);
  box-shadow: 0 0 30px rgba(56,189,248,.20);
  animation: tripInsuranceLoadGlow 1.8s ease-in-out infinite;
}
.trip-insurance-load-logo {
  position: relative;
  z-index: 3;
  display: block;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 2px solid rgba(224,242,254,.70);
  border-radius: 50%;
  background: #0b2430;
  box-shadow: 0 10px 28px rgba(0,0,0,.34),0 0 22px rgba(56,189,248,.24);
  animation: tripInsuranceLogoBreathe 1.75s ease-in-out infinite;
  transform-origin: center;
}
.trip-insurance-load-logo img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.trip-insurance-load-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
}
.trip-insurance-load-orbit.orbit-a {
  width: 116px;
  height: 116px;
  margin: -58px 0 0 -58px;
  animation: tripInsuranceOrbit 2.8s linear infinite;
}
.trip-insurance-load-orbit.orbit-b {
  width: 94px;
  height: 94px;
  margin: -47px 0 0 -47px;
  animation: tripInsuranceOrbit 2.15s linear infinite reverse;
}
.trip-insurance-load-dot {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: #7dd3fc;
  box-shadow: 0 0 8px rgba(125,211,252,.98),0 0 18px rgba(56,189,248,.55);
}
.trip-insurance-load-dot.dot-a { left: 0; top: 51px; width: 10px; height: 10px; }
.trip-insurance-load-dot.dot-b { right: 14px; top: 9px; width: 6px; height: 6px; opacity: .76; }
.trip-insurance-load-dot.dot-c { right: 0; top: 40px; width: 7px; height: 7px; }
.trip-insurance-load-shell h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}
.trip-insurance-load-shell p {
  margin: 6px 0 0;
  color: #a9bac7;
  font-size: 12px;
  line-height: 1.6;
}
.trip-insurance-load-track {
  display: block;
  width: 108px;
  height: 3px;
  margin: 16px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148,163,184,.13);
}
.trip-insurance-load-track i {
  display: block;
  width: 42%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,rgba(56,189,248,.10),#38bdf8,rgba(125,211,252,.12));
  animation: tripInsuranceLoadTrack 1.08s ease-in-out infinite;
}
@keyframes tripInsuranceOrbit { to { transform: rotate(360deg); } }
@keyframes tripInsuranceLogoBreathe {
  0%,100% { transform: scale(.97); }
  50% { transform: scale(1.035); }
}
@keyframes tripInsuranceLoadGlow {
  0%,100% { opacity: .52; transform: scale(.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes tripInsuranceLoadTrack {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(70%); }
  100% { transform: translateX(240%); }
}
@keyframes tripInsurancePopupIn {
  from { opacity: 0; transform: translateY(7px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .trip-insurance-load-orbit,
  .trip-insurance-load-logo,
  .trip-insurance-load-glow,
  .trip-insurance-load-track i { animation-duration: 3.6s; }
  .trip-insurance-load-swal { animation: none; }
}
.my-ava-col { display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.my-ava {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(56, 189, 248, .35);
}
.my-ava-hint { font-size: 9px; color: var(--blue); text-align: center; line-height: 1.3; max-width: 76px; }
.my-info h3 { font-size: 17px; font-weight: 700; color: #fff; }
.my-info p { font-size: 12px; color: #e2e8f0; margin-top: 3px; }
.my-stats { display: flex; align-items: flex-start; gap: 18px; margin-top: 10px; }
.my-stat h4 { font-size: 20px; font-weight: 800; color: var(--blue); height: 26px; line-height: 26px; position: relative; }
.rank-stars-plain { line-height: 26px; font-size: 15px; letter-spacing: -1px; }
.rank-shield-wrap {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 72px;
  height: 82px;
}
.rank-shield-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: shieldGlow 1.8s ease-in-out infinite;
}
@keyframes shieldGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(247, 181, 0, .5)); }
  50% { filter: drop-shadow(0 0 13px rgba(247, 181, 0, .95)); }
}
.my-stat p { font-size: 10px; color: var(--sub); }


/* ============================================================
   PROFILE PAYMENT FILTER — ตัวกรองสถานะการชำระใต้กล่องโปรไฟล์
   ============================================================ */
.my-payment-filter {
  margin: -6px 0 24px;
  padding: 5px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: rgba(10, 20, 32, .72);
  border: 1px solid rgba(148, 163, 184, .12);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.14);
}
.my-payment-filter::-webkit-scrollbar { display: none; }

.my-payment-filter-btn {
  appearance: none;
  border: 1px solid transparent;
  outline: none;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 11px;
  background: transparent;
  color: #7f8da1;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .14s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.my-payment-filter-btn:active { transform: scale(.96); }

.my-payment-filter-btn.active {
  color: #f8fbff;
  background: linear-gradient(135deg, rgba(2,132,199,.92), rgba(14,165,233,.82));
  border-color: rgba(125,211,252,.34);
  box-shadow: 0 5px 14px rgba(2,132,199,.22), inset 0 1px 0 rgba(255,255,255,.16);
}
.my-payment-filter-btn[data-filter="deposit"].active {
  background: linear-gradient(135deg, rgba(217,119,6,.96), rgba(245,158,11,.88));
  border-color: rgba(251,191,36,.34);
  box-shadow: 0 5px 14px rgba(217,119,6,.20), inset 0 1px 0 rgba(255,255,255,.16);
}
.my-payment-filter-btn[data-filter="full"].active {
  background: linear-gradient(135deg, rgba(5,150,105,.96), rgba(16,185,129,.88));
  border-color: rgba(52,211,153,.34);
  box-shadow: 0 5px 14px rgba(5,150,105,.20), inset 0 1px 0 rgba(255,255,255,.16);
}
.my-payment-filter-btn[data-filter="unpaid"].active {
  background: linear-gradient(135deg, rgba(190,24,93,.92), rgba(239,68,68,.86));
  border-color: rgba(251,113,133,.32);
  box-shadow: 0 5px 14px rgba(190,24,93,.18), inset 0 1px 0 rgba(255,255,255,.14);
}

.my-payment-filter-empty {
  padding: 34px 18px;
  margin: 2px 0 12px;
  text-align: center;
  border: 1px dashed rgba(148,163,184,.18);
  border-radius: 18px;
  background: rgba(15,23,42,.28);
  color: #718096;
  font-size: 12px;
  line-height: 1.7;
}

.h-item { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s, transform .15s; }
.h-item:hover { border-color: var(--blue); transform: translateY(-1px); }
.h-item:active { transform: scale(.99); }
.h-item img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.h-item .hi { flex: 1; }
.h-item .hi h4 { font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.h-item .hi p { font-size: 11px; color: var(--sub); }
.h-seat { text-align: right; flex-shrink: 0; }
.h-seat .snum { font-size: 18px; font-weight: 800; color: var(--blue); }
.h-seat p { font-size: 10px; color: var(--muted); }

/* mini-seat: ป้ายเบาะสไตล์ boarding-pass โทนทองเข้าธีมเดียวกับป้ายราคาการ์ดทริป */
.mini-seat {
  position: relative;
  min-width: 56px;
  height: 54px;
  padding: 0 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, #1a2233, #0d131f);
  border: 1px solid rgba(212, 175, 55, .4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.mini-seat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #f6e2a0, #c9971f, transparent);
}
.mini-seat .mini-seat-label { font-size: 7px; font-weight: 800; letter-spacing: .5px; color: rgba(246, 226, 160, .6); margin-bottom: 2px; }
.mini-seat .mini-seat-num {
  font-size: 16px;
  font-weight: 900;
  color: #f6e2a0;
  line-height: 1.1;
  max-width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 0 14px rgba(246, 226, 160, .35);
}

.hist-group-title { font-size: 13px; font-weight: 700; color: var(--sub); margin: 18px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hist-group-title:first-child { margin-top: 0; }
.h-arr { color: var(--blue); font-size: 18px; flex-shrink: 0; padding-left: 2px; }

.pickup-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--sub);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 1px dashed var(--border);
  border-radius: 0 0 18px 18px;
  padding: 8px 14px 10px;
  margin: -10px 0 10px;
}
.pickup-note strong { color: #e2e8f0; font-weight: 700; }


.empty-st { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty-st .ico { font-size: 48px; margin-bottom: 12px; }

.btn-logout {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
}
.btn-logout:hover { background: rgba(239, 68, 68, .1); color: var(--red); border-color: rgba(239, 68, 68, .3); }

/* ================================================================
   PROFILE — PICKUP UI
   กล่องดำโปร่งแสง + ปุ่มแก้ไขเหลืองอมส้ม
   ================================================================ */
.pickup-manage-box{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:11px;
  margin:-1px 0 13px;
  padding:12px 13px;
  border:1px solid rgba(148,163,184,.14);
  border-top:0;
  border-radius:0 0 18px 18px;
  background:
    linear-gradient(135deg,rgba(2,7,12,.91),rgba(5,12,18,.86)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat;
  box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035);
}
.pickup-manage-copy{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.pickup-manage-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,rgba(24,35,45,.86),rgba(8,16,23,.88));
  border:1px solid rgba(148,163,184,.17);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 5px 14px rgba(0,0,0,.16);
  font-size:17px;
}
.pickup-manage-copy > div{min-width:0}
.pickup-manage-copy small{
  display:block;
  margin-bottom:3px;
  color:#8192a5;
  font-size:9.5px;
  font-weight:700;
}
.pickup-manage-copy strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#eef4f8;
  font-size:11.5px;
  font-weight:800;
}
.pickup-manage-btn{
  min-height:36px;
  padding:0 11px;
  border-radius:11px;
  border:1px solid rgba(251,146,60,.38);
  background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(234,88,12,.18));
  color:#ffd38a;
  box-shadow:inset 0 1px 0 rgba(255,237,213,.10),0 6px 16px rgba(194,65,12,.10);
  font-family:inherit;
  font-size:9.5px;
  font-weight:900;
  cursor:pointer;
  transition:transform .15s ease,background .15s ease;
}
.pickup-manage-btn.add{
  border-color:rgba(251,146,60,.38);
  background:linear-gradient(135deg,rgba(245,158,11,.24),rgba(234,88,12,.18));
  color:#ffd38a;
}
.pickup-manage-btn.edit{
  border-color:rgba(56,189,248,.42);
  background:linear-gradient(135deg,rgba(7,27,38,.78),rgba(3,17,25,.68));
  color:#bcecff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 0 0 1px rgba(45,212,191,.06),
    0 0 15px rgba(56,189,248,.15);
  text-shadow:0 0 9px rgba(125,211,252,.22);
}
.pickup-manage-btn.edit:hover{
  border-color:rgba(94,234,212,.52);
  background:linear-gradient(135deg,rgba(8,34,43,.84),rgba(3,21,29,.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(45,212,191,.08),
    0 0 18px rgba(45,212,191,.18);
}
.pickup-manage-btn:active{transform:scale(.97)}

/* ---------- popup ---------- */
.profile-pickup-swal-container{
  padding:16px!important;
  background:rgba(2,8,15,.66)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.profile-pickup-swal{
  position:relative!important;
  width:min(390px,calc(100vw - 26px))!important;
  max-height:82dvh!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:23px!important;
  border:1px solid rgba(125,211,252,.12)!important;
  background:
    linear-gradient(180deg,rgba(7,16,27,.90),rgba(5,12,21,.98)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat!important;
  box-shadow:0 26px 72px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.profile-pickup-swal::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 12% 0%,rgba(56,189,248,.07),transparent 30%),
    linear-gradient(180deg,rgba(5,12,22,.10),rgba(3,9,16,.44));
}
.profile-pickup-swal-html{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  padding:17px 16px 8px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  touch-action:pan-y!important;
  color:#eaf4fb!important;
}
.profile-pickup-close{
  position:absolute;
  z-index:5;
  top:11px;
  right:11px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(10,18,29,.88);
  color:#d9e5ef;
  font:500 23px/1 Arial,sans-serif;
  cursor:pointer;
}
.profile-pickup-close:active{transform:scale(.93)}
.profile-pickup-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin:2px 42px 13px 0;
  text-align:left;
}
.profile-pickup-head-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(56,189,248,.08);
  border:1px solid rgba(56,189,248,.13);
  font-size:21px;
}
.profile-pickup-head small{
  display:block;
  color:#78a8c2;
  font-size:9px;
  font-weight:800;
  margin-bottom:2px;
}
.profile-pickup-head h3{
  margin:0;
  color:#f3f8fc;
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}
.profile-pickup-head p{
  margin:4px 0 0;
  color:#71869b;
  font-size:10px;
}
.profile-pickup-trip{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:14px;
  padding:10px 11px;
  border-radius:13px;
  background:rgba(8,18,30,.58);
  border:1px solid rgba(148,163,184,.08);
  text-align:left;
}
.profile-pickup-trip-icon{font-size:16px}
.profile-pickup-trip strong{
  display:block;
  color:#eaf5fb;
  font-size:11px;
  font-weight:850;
}
.profile-pickup-trip small{
  display:block;
  margin-top:3px;
  color:#74889b;
  font-size:9px;
}
.profile-pickup-select-wrap{
  position:relative;
  padding:12px;
  border-radius:15px;
  background:rgba(8,18,30,.58);
  border:1px solid rgba(148,163,184,.08);
}
.profile-pickup-select-label{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 1px 7px;
  color:#9eb2c2;
  font-size:9.5px;
  font-weight:800;
  text-align:left;
}
.profile-pickup-select-label .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 10px rgba(56,189,248,.45);
}
.profile-pickup-select{
  width:100%;
  height:44px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(56,189,248,.15);
  border-radius:12px;
  outline:none;
  padding:0 38px 0 12px;
  background:linear-gradient(180deg,rgba(13,26,42,.94),rgba(9,20,33,.94));
  color:#eef7fc;
  font-family:inherit;
  font-size:11px;
  font-weight:750;
}
.profile-pickup-select:focus{
  border-color:rgba(56,189,248,.34);
  box-shadow:0 0 0 3px rgba(56,189,248,.055);
}
.profile-pickup-select-arrow{
  position:absolute;
  right:25px;
  top:50px;
  color:#7492a7;
  font-size:15px;
  pointer-events:none;
}
.profile-pickup-other-wrap{
  display:none;
  margin-top:10px;
  text-align:left;
}
.profile-pickup-other-wrap.show{display:block}
.profile-pickup-other-wrap label{
  display:block;
  margin:0 1px 5px;
  color:#8299aa;
  font-size:9px;
  font-weight:750;
}
.profile-pickup-other{
  width:100%;
  height:42px;
  border:1px solid rgba(56,189,248,.13);
  border-radius:11px;
  outline:none;
  padding:0 11px;
  background:rgba(5,14,24,.82);
  color:#eef7fc;
  font-family:inherit;
  font-size:10.5px;
}
.profile-pickup-other::placeholder{color:#566b7d}
.profile-pickup-preview{
  display:none;
  align-items:center;
  gap:9px;
  margin-top:10px;
  padding:9px 10px;
  border-radius:11px;
  background:rgba(56,189,248,.055);
  border:1px solid rgba(56,189,248,.09);
  text-align:left;
}
.profile-pickup-preview.show{display:flex}
.profile-pickup-preview > span{font-size:14px}
.profile-pickup-preview small{
  display:block;
  color:#6f8ca0;
  font-size:8px;
}
.profile-pickup-preview strong{
  display:block;
  margin-top:2px;
  color:#cfefff;
  font-size:10px;
}
.profile-pickup-note{
  display:flex;
  gap:7px;
  margin:10px 1px 1px;
  padding:8px 9px;
  border-radius:10px;
  background:rgba(8,18,30,.42);
  border:1px solid rgba(148,163,184,.055);
  text-align:left;
}
.profile-pickup-note span{font-size:10px}
.profile-pickup-note p{
  margin:0;
  color:#657b8e;
  font-size:8.3px;
  line-height:1.45;
}
.profile-pickup-actions{
  position:relative!important;
  z-index:2!important;
  display:grid!important;
  grid-template-columns:1fr 1.2fr!important;
  gap:8px!important;
  width:100%!important;
  margin:0!important;
  padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;
  background:linear-gradient(180deg,rgba(5,12,21,.62),rgba(5,12,21,.97))!important;
  border-top:1px solid rgba(148,163,184,.07)!important;
}
.profile-pickup-confirm,
.profile-pickup-cancel{
  min-height:41px;
  border-radius:12px;
  font-family:inherit;
  font-size:9.5px;
  font-weight:900;
  cursor:pointer;
}
.profile-pickup-confirm{
  border:1px solid rgba(56,189,248,.22);
  background:linear-gradient(135deg,#0369a1,#0284c7);
  color:#f2fbff;
  box-shadow:0 8px 20px rgba(2,132,199,.14);
}
.profile-pickup-cancel{
  border:1px solid rgba(148,163,184,.11);
  background:rgba(15,23,42,.80);
  color:#a7b5c1;
}
.profile-pickup-confirm:active,
.profile-pickup-cancel:active{transform:scale(.97)}
.profile-pickup-swal .swal2-validation-message{
  margin:7px 16px 0!important;
  padding:7px 9px!important;
  border-radius:9px!important;
  background:rgba(127,29,29,.52)!important;
  color:#fecaca!important;
  font-size:9px!important;
}

@media(max-width:430px){
  .pickup-manage-box{
    grid-template-columns:1fr;
  }
  .pickup-manage-btn{
    width:100%;
  }
  .profile-pickup-swal{
    width:calc(100vw - 22px)!important;
    max-height:80dvh!important;
  }
}


/* ================================================================
   PICKUP SAVE STATUS POPUPS — compact / forest / wow animation
   กระทบเฉพาะ popup กำลังบันทึก + บันทึกสำเร็จ
   ================================================================ */
.pickup-save-swal-container{
  padding:18px!important;
  background:rgba(3,8,14,.68)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
}
.pickup-save-swal{
  position:relative!important;
  width:min(340px,calc(100vw - 44px))!important;
  margin:auto!important;
  padding:0!important;
  overflow:hidden!important;
  border-radius:24px!important;
  border:1px solid rgba(125,211,252,.13)!important;
  color:#eef8ff!important;
  background:
    linear-gradient(180deg,rgba(7,16,27,.87),rgba(4,11,19,.97)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat!important;
  box-shadow:
    0 26px 74px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
  animation:pickupSavePopupIn .38s cubic-bezier(.18,.82,.22,1) both!important;
}
.pickup-save-swal::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 5%,rgba(56,189,248,.08),transparent 31%),
    linear-gradient(180deg,rgba(4,12,21,.08),rgba(3,9,16,.50));
}
.pickup-save-swal-html{
  position:relative!important;
  z-index:1!important;
  margin:0!important;
  padding:25px 20px 22px!important;
  color:#edf7fd!important;
}
.pickup-save-state{
  text-align:center;
}
.pickup-save-state small{
  display:block;
  margin-top:14px;
  color:#79a6bf;
  font-size:9px;
  font-weight:800;
  letter-spacing:.35px;
}
.pickup-save-state h3{
  margin:4px 0 0;
  color:#f5fbff;
  font-size:18px;
  line-height:1.18;
  font-weight:900;
}
.pickup-save-state > p{
  margin:7px 0 0;
  color:#8094a7;
  font-size:10px;
  line-height:1.45;
}

/* loading */
.pickup-save-orbit{
  position:relative;
  width:92px;
  height:92px;
  margin:0 auto 2px;
  display:grid;
  place-items:center;
}
.pickup-save-orbit::before,
.pickup-save-orbit::after{
  content:'';
  position:absolute;
  border-radius:50%;
}
.pickup-save-orbit::before{
  inset:3px;
  border:1px solid rgba(56,189,248,.13);
  animation:pickupOrbitPulse 2.1s ease-in-out infinite;
}
.pickup-save-orbit::after{
  inset:13px;
  border:1px dashed rgba(125,211,252,.18);
  animation:pickupOrbitSpin 5s linear infinite;
}
.pickup-save-core{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(3,105,161,.30),rgba(8,47,73,.36));
  border:1px solid rgba(125,211,252,.18);
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    0 0 28px rgba(56,189,248,.08),
    inset 0 1px 0 rgba(255,255,255,.06);
  font-size:24px;
  animation:pickupCoreFloat 1.8s ease-in-out infinite;
}
.orbit-dot{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:0 0 12px rgba(125,211,252,.65);
}
.dot-a{animation:pickupDotA 2.3s linear infinite}
.dot-b{animation:pickupDotB 2.9s linear infinite reverse}
.dot-c{
  width:4px;
  height:4px;
  opacity:.7;
  animation:pickupDotC 3.7s linear infinite;
}
.pickup-save-progress{
  position:relative;
  height:4px;
  margin:17px 16px 0;
  overflow:hidden;
  border-radius:999px;
  background:rgba(148,163,184,.09);
}
.pickup-save-progress i{
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  border-radius:inherit;
  background:linear-gradient(90deg,transparent,#38bdf8,#bae6fd,transparent);
  filter:drop-shadow(0 0 5px rgba(56,189,248,.45));
  animation:pickupSaveProgress 1.2s ease-in-out infinite;
}

/* success */
.pickup-success-burst{
  position:relative;
  width:102px;
  height:102px;
  margin:0 auto 3px;
  display:grid;
  place-items:center;
}
.pickup-success-ring{
  position:relative;
  width:67px;
  height:67px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(125,211,252,.25);
  background:radial-gradient(circle,rgba(56,189,248,.14),rgba(2,132,199,.05));
  box-shadow:
    0 0 0 10px rgba(56,189,248,.025),
    0 0 36px rgba(56,189,248,.11);
  animation:pickupSuccessRing .58s cubic-bezier(.2,.9,.2,1) both;
}
.pickup-success-ring::before{
  content:'';
  position:absolute;
  inset:-9px;
  border-radius:50%;
  border:1px solid rgba(125,211,252,.11);
  animation:pickupSuccessWave 1.45s ease-out infinite;
}
.pickup-success-check{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#e0f2fe,#7dd3fc);
  color:#062233;
  font-size:22px;
  font-weight:1000;
  box-shadow:0 7px 18px rgba(2,132,199,.20);
  animation:pickupCheckWow .48s .12s cubic-bezier(.15,1.2,.3,1) both;
}
.burst{
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  margin:-2px;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:0 0 9px rgba(125,211,252,.52);
  opacity:0;
}
.b1{animation:pickupBurst1 .9s .14s ease-out both}
.b2{animation:pickupBurst2 .9s .18s ease-out both}
.b3{animation:pickupBurst3 .9s .22s ease-out both}
.b4{animation:pickupBurst4 .9s .26s ease-out both}
.pickup-success-location{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  max-width:260px;
  margin:12px auto 0;
  padding:8px 11px;
  border-radius:11px;
  background:rgba(56,189,248,.055);
  border:1px solid rgba(56,189,248,.09);
}
.pickup-success-location span{font-size:13px}
.pickup-success-location strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#cfefff;
  font-size:10.5px;
  font-weight:850;
}
.pickup-save-swal .swal2-timer-progress-bar{
  height:2px!important;
  background:linear-gradient(90deg,#0ea5e9,#7dd3fc)!important;
  box-shadow:0 0 8px rgba(56,189,248,.35);
}

/* error only */
.pickup-save-swal-error{
  padding:12px 0 16px!important;
}
.pickup-save-swal-error .swal2-title{
  color:#f8fafc!important;
  font-family:inherit!important;
  font-size:17px!important;
}
.pickup-save-swal-error .swal2-html-container{
  color:#94a3b8!important;
  font-family:inherit!important;
  font-size:11px!important;
}

/* animations */
@keyframes pickupSavePopupIn{
  from{opacity:0;transform:translateY(14px) scale(.94)}
  70%{transform:translateY(-2px) scale(1.012)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes pickupOrbitPulse{
  0%,100%{transform:scale(.92);opacity:.35}
  50%{transform:scale(1.06);opacity:.9}
}
@keyframes pickupOrbitSpin{
  to{transform:rotate(360deg)}
}
@keyframes pickupCoreFloat{
  0%,100%{transform:translateY(2px) rotate(-2deg)}
  50%{transform:translateY(-4px) rotate(2deg)}
}
@keyframes pickupDotA{
  0%{transform:rotate(0deg) translateX(42px) rotate(0deg)}
  100%{transform:rotate(360deg) translateX(42px) rotate(-360deg)}
}
@keyframes pickupDotB{
  0%{transform:rotate(80deg) translateX(34px) rotate(-80deg)}
  100%{transform:rotate(440deg) translateX(34px) rotate(-440deg)}
}
@keyframes pickupDotC{
  0%{transform:rotate(200deg) translateX(46px) rotate(-200deg)}
  100%{transform:rotate(560deg) translateX(46px) rotate(-560deg)}
}
@keyframes pickupSaveProgress{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(340%)}
}
@keyframes pickupSuccessRing{
  from{opacity:0;transform:scale(.55) rotate(-8deg)}
  70%{transform:scale(1.08) rotate(2deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes pickupSuccessWave{
  0%{opacity:.55;transform:scale(.72)}
  100%{opacity:0;transform:scale(1.45)}
}
@keyframes pickupCheckWow{
  from{opacity:0;transform:scale(.3) rotate(-18deg)}
  75%{transform:scale(1.18) rotate(3deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes pickupBurst1{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(42px,-34px)}
}
@keyframes pickupBurst2{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(-44px,-25px)}
}
@keyframes pickupBurst3{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(38px,34px)}
}
@keyframes pickupBurst4{
  from{opacity:1;transform:translate(0,0)}
  to{opacity:0;transform:translate(-38px,37px)}
}

@media(max-width:430px){
  .pickup-save-swal{
    width:min(330px,calc(100vw - 38px))!important;
    border-radius:22px!important;
  }
  .pickup-save-swal-html{
    padding:23px 18px 20px!important;
  }
}


/* ================================================================
   PICKUP SUCCESS POPUP — ปุ่มออกชัดเจน
   ================================================================ */
.pickup-save-swal-success{
  position:relative!important;
}
.pickup-success-close{
  position:absolute;
  z-index:10;
  top:11px;
  right:11px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(148,163,184,.16);
  background:rgba(7,15,25,.86);
  color:#dceaf3;
  font:500 23px/1 Arial,sans-serif;
  cursor:pointer;
  box-shadow:0 7px 20px rgba(0,0,0,.28);
  transition:transform .15s ease,background .15s ease;
}
.pickup-success-close:active{
  transform:scale(.92);
  background:rgba(14,27,43,.96);
}
.pickup-success-done{
  width:100%;
  min-height:42px;
  margin-top:16px;
  border-radius:12px;
  border:1px solid rgba(56,189,248,.22);
  background:linear-gradient(135deg,#0369a1,#0284c7);
  color:#f2fbff;
  font-family:inherit;
  font-size:10.5px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(2,132,199,.14);
  transition:transform .15s ease,filter .15s ease;
}
.pickup-success-done:active{
  transform:scale(.97);
  filter:brightness(.96);
}


/* ================================================================
   PICKUP SUCCESS — ปุ่มกลับหน้าโปรไฟล์
   ================================================================ */
.pickup-success-close{
  display:none!important;
}
.pickup-success-done{
  display:none!important;
}
.pickup-success-profile-btn{
  width:100%;
  min-height:44px;
  margin-top:16px;
  border-radius:13px;
  border:1px solid rgba(74,222,128,.30);
  background:linear-gradient(135deg,#15803d,#16a34a);
  color:#f0fff4;
  font-family:inherit;
  font-size:10.8px;
  font-weight:900;
  letter-spacing:.1px;
  cursor:pointer;
  box-shadow:
    0 10px 24px rgba(22,163,74,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;
  animation:pickupProfileBtnGlow 2.4s ease-in-out infinite;
}
.pickup-success-profile-btn:active{
  transform:scale(.97);
  filter:brightness(.96);
}
@keyframes pickupProfileBtnGlow{
  0%,100%{
    box-shadow:
      0 10px 24px rgba(22,163,74,.18),
      0 0 0 0 rgba(74,222,128,.08),
      inset 0 1px 0 rgba(255,255,255,.14);
  }
  50%{
    box-shadow:
      0 12px 28px rgba(22,163,74,.27),
      0 0 0 5px rgba(74,222,128,.035),
      inset 0 1px 0 rgba(255,255,255,.16);
  }
}


/* ================================================================
   PROFILE > ของที่เช่า
   ================================================================ */
.my-equip-section{margin:20px 0 22px}
.my-equip-section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#f8fafc;font-size:17px;font-weight:900}
.my-equip-count{font-size:10px;color:#8fa3b8;border:1px solid rgba(56,189,248,.18);background:rgba(15,23,42,.7);padding:5px 9px;border-radius:999px}
.my-equip-summary-card{
  width:100%;min-height:86px;border-radius:22px;padding:14px;
  display:flex;align-items:center;gap:13px;text-align:left;
  border:1px solid rgba(56,189,248,.4);
  background:linear-gradient(145deg,rgba(11,30,41,.98),rgba(5,13,22,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04);
  color:#fff;font-family:inherit;
}
.my-equip-summary-card:active{transform:scale(.985)}
.my-equip-summary-icon{width:54px;height:54px;flex:0 0 54px;border-radius:17px;display:grid;place-items:center;font-size:28px;background:#0c2230;border:1px solid rgba(56,189,248,.3)}
.my-equip-summary-copy{min-width:0;flex:1}
.my-equip-summary-copy strong{display:block;font-size:14px;font-weight:900;margin-bottom:5px}
.my-equip-summary-copy span{display:block;font-size:10.5px;color:#8fa3b8}
.my-equip-summary-arrow{font-size:30px;color:#38bdf8}

.my-equip-swal{
  width:min(92vw,430px)!important;padding:0!important;border-radius:28px!important;
  background:
    linear-gradient(180deg,rgba(3,10,17,.74),rgba(3,10,17,.90)),
    url('/ximg.php?f=1448375240586-882707db888b-1200.jpg') center/cover no-repeat!important;
  border:1px solid rgba(56,189,248,.22)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.68),inset 0 1px 0 rgba(255,255,255,.04)!important;
  overflow:hidden!important;
}
.my-equip-swal-html{margin:0!important;padding:0!important}
.my-equip-popup-shell{padding:22px 16px 4px;color:#eef6f8;text-align:center}
.my-equip-popup-shell h3{margin:5px 0 2px;font-size:20px;font-weight:950}
.my-equip-popup-shell>p{margin:0 0 14px;font-size:10.5px;color:#8296a8}
.my-equip-popup-orbit{position:relative;width:78px;height:78px;margin:0 auto 8px;display:grid;place-items:center}
.my-equip-orbit-ring{position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(56,189,248,.26);border-top-color:#38bdf8;animation:myEquipOrbit 2.8s linear infinite}
.my-equip-orbit-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#38bdf8;box-shadow:0 0 14px #38bdf8}
.my-equip-orbit-dot.dot-a{top:4px;left:36px}
.my-equip-orbit-dot.dot-b{bottom:9px;right:9px;width:5px;height:5px;opacity:.65}
.my-equip-popup-core{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;font-size:26px;background:linear-gradient(145deg,#12303a,#08171e);border:1px solid rgba(56,189,248,.34);animation:myEquipPulse 2s ease-in-out infinite}
.my-equip-popup-scroll{max-height:min(52vh,430px);overflow:auto;-webkit-overflow-scrolling:touch;text-align:left;scrollbar-width:none}
.my-equip-popup-scroll::-webkit-scrollbar{display:none}
.my-equip-popup-trip{border:1px solid rgba(148,163,184,.14);border-radius:18px;background:rgba(9,20,28,.78);padding:11px;margin-bottom:10px}
.my-equip-popup-trip-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.my-equip-popup-trip-head>div{min-width:0}
.my-equip-popup-trip-head strong{display:block;font-size:12px;color:#fff;font-weight:900}
.my-equip-popup-trip-head span{font-size:9px;color:#8194a6}
.my-equip-popup-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed rgba(148,163,184,.12)}
.my-equip-popup-row-main{min-width:0}
.my-equip-popup-row-main strong{display:block;font-size:10.5px;color:#dce7ed}
.my-equip-popup-row-main span{display:block;margin-top:3px;font-size:10px;color:#7dd3fc;font-weight:800}
.my-equip-pay{display:inline-flex;white-space:nowrap;border-radius:999px;padding:4px 7px;font-size:8.5px;font-weight:900;border:1px solid transparent}
.my-equip-pay.paid{color:#86efac;background:rgba(34,197,94,.11);border-color:rgba(34,197,94,.24)}
.my-equip-pay.checking{color:#fde68a;background:rgba(245,158,11,.11);border-color:rgba(245,158,11,.24)}
.my-equip-pay.unpaid{color:#fca5a5;background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.22)}
.my-equip-swal-back{width:calc(100% - 32px)!important;margin:7px 16px 16px!important;border:0!important;border-radius:14px!important;padding:11px 14px!important;background:linear-gradient(135deg,#0f766e,#15803d)!important;color:#fff!important;font-family:inherit!important;font-size:12px!important;font-weight:900!important}
@keyframes myEquipOrbit{to{transform:rotate(360deg)}}
@keyframes myEquipPulse{50%{transform:scale(1.055)}}

/* ================================================================
   PROFILE > ไปแล้ว — fade
   การ์ดข้างในเป็น markup เดิม 100%
   ================================================================ */
#bookingHistoryList.my-past-fade-list > *{display:none}
#bookingHistoryList.my-past-fade-list > .my-past-show{display:block;animation:myPastFadeIn .5s ease}
#bookingHistoryList.my-past-fade-list > .my-past-show.my-past-out{animation:myPastFadeOut .5s ease forwards}
@keyframes myPastFadeIn{from{opacity:0}to{opacity:1}}
@keyframes myPastFadeOut{from{opacity:1}to{opacity:0}}


/* ================================================================
   PROFILE — รีดีไซน์เฉพาะหัวข้อ
   ประวัติความบ้า / กำลังจะไป / ของที่เช่า / ไปแล้ว
   ไม่แตะการ์ดหรือการทำงานใด ๆ
   ================================================================ */

/* หัวใหญ่ "ประวัติความบ้า" */
#tab-mytrips .history-section > .sec-hdr:first-child,
#tab-mytrips .history-wrap > .sec-hdr:first-child{
  position:relative;
  margin:24px 0 17px!important;
  padding:0 0 13px 14px!important;
  border-bottom:1px solid rgba(56,189,248,.12);
}
#tab-mytrips .history-section > .sec-hdr:first-child::before,
#tab-mytrips .history-wrap > .sec-hdr:first-child::before{
  content:"";
  position:absolute;
  left:0;bottom:-1px;
  width:72px;height:2px;
  border-radius:99px;
  background:linear-gradient(90deg,#38bdf8,rgba(56,189,248,0));
  box-shadow:0 0 12px rgba(56,189,248,.28);
}

/* หัวกลุ่ม กำลังจะไป / ไปแล้ว */
#tab-mytrips .hist-group-title{
  position:relative;
  min-height:44px;
  margin:10px 0 10px!important;
  padding:0 2px 0 12px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#tab-mytrips .hist-group-title::before{
  content:"";
  position:absolute;
  left:0;top:10px;bottom:10px;
  width:3px;
  border-radius:99px;
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  box-shadow:0 0 10px rgba(56,189,248,.26);
}
#tab-mytrips .hist-group-title > span:first-child{
  font-size:15px!important;
  font-weight:900!important;
  letter-spacing:.1px;
  color:#e7edf5!important;
}
#tab-mytrips .hist-group-title > span:last-child:not(:first-child){
  padding:6px 10px;
  border-radius:999px;
  background:rgba(14,165,233,.07);
  border:1px solid rgba(56,189,248,.13);
}

/* หัว "ของที่เช่า" */
#tab-mytrips .my-equip-section-title{
  position:relative;
  min-height:48px;
  margin:10px 0 10px!important;
  padding:0 2px 0 12px!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
#tab-mytrips .my-equip-section-title::before{
  content:"";
  position:absolute;
  left:0;top:11px;bottom:11px;
  width:3px;
  border-radius:99px;
  background:linear-gradient(180deg,#38bdf8,#0ea5e9);
  box-shadow:0 0 10px rgba(56,189,248,.26);
}
#tab-mytrips .my-equip-section-title > span:first-child{
  font-size:17px!important;
  font-weight:900!important;
  color:#f4f7fb!important;
}
#tab-mytrips .my-equip-section-title .my-equip-count{
  padding:6px 10px!important;
  border-radius:999px!important;
  background:rgba(14,165,233,.07)!important;
  border:1px solid rgba(56,189,248,.15)!important;
  color:#a9b8c8!important;
  font-size:10px!important;
  font-weight:800!important;
}

/* เส้นแบ่งเบา ๆ ก่อนหมวดของที่เช่าและไปแล้ว */
#tab-mytrips .my-equip-section{
  position:relative;
  padding-top:5px;
}
#tab-mytrips .my-equip-section::before{
  content:"";
  position:absolute;
  left:0;right:0;top:-5px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.12),transparent);
  pointer-events:none;
}


/* PROFILE > ของที่เช่า — ปุ่มชำระรายการเก่าก่อนมีระบบชำระเงิน */
.my-equip-pay.legacy-pay{
  appearance:none;
  border:1px solid rgba(250,204,21,.75);
  background:linear-gradient(135deg,#facc15,#f59e0b);
  color:#17130a;
  cursor:pointer;
  font-family:inherit;
  font-weight:900;
  box-shadow:
    0 0 14px rgba(250,204,21,.25),
    inset 0 1px 0 rgba(255,255,255,.30);
}

.my-equip-pay.legacy-pay:active{
  transform:scale(.97);
}
/* ==== css/101-profile-v2.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* TNH Profile V2 — compact member dashboard */
body:has(#tab-mytrips.active-page) .hdr{display:none!important}
body:has(#tab-mytrips.active-page) #tab-mytrips{padding-top:max(10px,env(safe-area-inset-top))}
#tab-mytrips .main{padding-top:14px!important}
.profile-v2-hero{position:relative;overflow:hidden;margin:0 0 12px;padding:18px;border:1px solid rgba(82,210,240,.18);border-radius:26px;background:linear-gradient(180deg,rgba(6,11,19,.62),rgba(6,11,19,.86)),url('../assets/optimized/IMG_4023-900.webp') center/cover no-repeat;box-shadow:0 18px 45px rgba(0,0,0,.28)}
.profile-v2-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 8%,rgba(56,189,248,.17),transparent 34%),radial-gradient(circle at 10% 100%,rgba(16,185,129,.12),transparent 38%);pointer-events:none}
.profile-v2-topline,.profile-v2-identity,.profile-v2-stats{position:relative;z-index:1}
.profile-v2-topline{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.profile-v2-kicker{display:block;color:#38bdf8;font-size:9px;font-weight:900;letter-spacing:1.8px;margin-bottom:3px}.profile-v2-topline h2{margin:0;color:#fff;font-size:22px;line-height:1.15}
.profile-v2-settings{width:38px;height:38px;border:1px solid rgba(148,163,184,.2);border-radius:13px;background:rgba(255,255,255,.045);color:#d9f5ff;font-size:16px}
.profile-v2-identity{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center}
.profile-v2-avatar-wrap{position:relative;width:64px;height:64px}.profile-v2-avatar{width:64px;height:64px;border-radius:21px;object-fit:cover;border:2px solid rgba(90,218,245,.7);box-shadow:0 8px 22px rgba(0,0,0,.3)}.profile-v2-online{position:absolute;right:-2px;bottom:3px;width:13px;height:13px;border-radius:50%;background:#34d399;border:3px solid #0a1b20}
.profile-v2-name{min-width:0}.profile-v2-name h3{margin:0 0 4px;color:#fff;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-v2-name p{margin:0;color:#7892a0;font-size:11px}
.profile-v2-rank{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px}.profile-v2-rank .rank-shield-wrap{width:58px!important;height:58px!important;margin:0!important}.profile-v2-rank .rank-shield-wrap img{width:100%!important;height:100%!important;object-fit:contain}.profile-v2-rank .rank-stars-plain{font-size:13px;white-space:nowrap}.profile-v2-rank>span:last-child{margin-top:2px;color:#f5c86a;font-size:8px;font-weight:800;white-space:nowrap}
.profile-v2-stats{display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;align-items:center;margin-top:17px;padding:13px 4px 2px;border-top:1px solid rgba(148,163,184,.12)}.profile-v2-stats i{width:1px;height:30px;background:rgba(148,163,184,.14)}.profile-v2-stats div{text-align:center}.profile-v2-stats strong{display:block;color:#e8fbff;font-size:21px;line-height:1}.profile-v2-stats span{display:block;margin-top:5px;color:#738b98;font-size:9px}
.profile-v2-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0 0 18px}.profile-v2-actions button{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:9px;text-align:left;padding:12px;border:1px solid rgba(148,163,184,.13);border-radius:18px;background:rgba(9,25,30,.78);color:#fff}.profile-v2-actions button>span{grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(56,189,248,.1);font-size:16px}.profile-v2-actions b{font-size:11px}.profile-v2-actions small{margin-top:2px;color:#718995;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-v2-history-head{display:flex;align-items:flex-end;justify-content:space-between;margin:4px 2px 10px}.profile-v2-history-head span{display:block;color:#38bdf8;font-size:8px;font-weight:900;letter-spacing:1.5px}.profile-v2-history-head h3{margin:2px 0 0;color:#fff;font-size:19px}.profile-v2-history-head>strong{color:#718995;font-size:10px;font-weight:600}
#tab-mytrips .profile-v2-filter{margin:0 0 16px;padding:4px;background:rgba(7,20,25,.82);border:1px solid rgba(148,163,184,.12);border-radius:15px;gap:3px}#tab-mytrips .profile-v2-filter .my-payment-filter-btn{min-width:0;flex:1;padding:10px 7px;border-radius:11px;font-size:9px;background:transparent;border:0;box-shadow:none}#tab-mytrips .profile-v2-filter .my-payment-filter-btn.active{background:linear-gradient(135deg,#0ea5e9,#0891b2);color:#fff;box-shadow:0 6px 16px rgba(14,165,233,.2)}
#tab-mytrips .hist-group-title{margin-top:12px;padding:0 3px 8px}#tab-mytrips .hist-card{border-radius:20px!important;min-height:170px;overflow:hidden;border:1px solid rgba(148,163,184,.12);box-shadow:0 12px 28px rgba(0,0,0,.24)}#tab-mytrips .pickup-manage-box{border-radius:0 0 18px 18px!important}
@media(max-width:380px){.profile-v2-identity{grid-template-columns:56px minmax(0,1fr) 64px;gap:9px}.profile-v2-avatar-wrap,.profile-v2-avatar{width:56px;height:56px}.profile-v2-rank .rank-shield-wrap{width:50px!important;height:50px!important}.profile-v2-name h3{font-size:17px}.profile-v2-actions{grid-template-columns:1fr}}

/* Profile identity refinements 2026-09-24 */
.profile-v2-topline{padding-right:0}
.profile-v2-name p.profile-v2-realname{margin:2px 0 0;color:#b7cbd3;font-size:9px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-v2-name p.profile-v2-phone{margin:2px 0 0;color:#6f8a96;font-size:9px;line-height:1.35;letter-spacing:.15px}
.profile-v2-rank>span:last-child{color:#f5c86a;font-size:8px;font-weight:900;letter-spacing:.2px}

/* 24 Sep 2026 — final profile rank placement + premium logout */
.profile-v2-topline{align-items:center}
.profile-v2-logout{
  position:relative;z-index:2;display:inline-grid;place-items:center;
  width:36px;height:36px;padding:0;border:1px solid rgba(251,113,133,.34);
  border-radius:13px;background:linear-gradient(145deg,rgba(91,24,35,.78),rgba(35,13,20,.9));
  color:#fb7185;font:inherit;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 7px 20px rgba(0,0,0,.22),0 0 0 1px rgba(244,63,94,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
.profile-v2-logout:hover,.profile-v2-logout:focus-visible{border-color:rgba(251,113,133,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 24px rgba(0,0,0,.28),0 0 18px rgba(244,63,94,.16);outline:none}
.profile-v2-logout:active{transform:scale(.94)}
.profile-v2-logout-icon{font-size:17px;line-height:1;filter:drop-shadow(0 0 5px rgba(251,113,133,.22))}
.profile-v2-logout>span:last-child{display:none!important}
.profile-v2-identity{grid-template-columns:64px minmax(0,1fr) 94px}
.profile-v2-rank{min-width:94px;min-height:82px;display:flex;align-items:center;justify-content:center}
.profile-v2-rank .rank-shield-wrap{width:82px!important;height:76px!important;margin:0!important;filter:drop-shadow(0 0 11px rgba(245,200,106,.30))}
.profile-v2-rank .rank-shield-wrap img{width:100%!important;height:100%!important;object-fit:contain}
.profile-v2-rank .rank-stars-plain{display:block;max-width:94px;font-size:15px;line-height:1.3;letter-spacing:-1px;text-align:center;white-space:normal;filter:drop-shadow(0 0 7px rgba(250,204,21,.30))}
.profile-v2-rank-label{display:none!important}
@media(max-width:380px){
  .profile-v2-identity{grid-template-columns:56px minmax(0,1fr) 80px}
  .profile-v2-rank{min-width:80px}
  .profile-v2-rank .rank-shield-wrap{width:70px!important;height:65px!important}
  .profile-v2-rank .rank-stars-plain{max-width:80px;font-size:13px}
  .profile-v2-logout{width:34px;height:34px;border-radius:12px}
}


/* 24 Sep 2026 — FINAL: badge above divider, aligned with Level column */
.profile-v2-identity{
  display:grid!important;
  grid-template-columns:2fr 1fr!important;
  gap:0!important;
  align-items:center!important;
  min-height:88px;
}
.profile-v2-person{
  min-width:0;
  display:flex;
  align-items:center;
  gap:12px;
  padding-right:10px;
}
.profile-v2-rank-above{
  min-width:0;
  min-height:84px;
  display:grid;
  place-items:center;
  align-self:center;
  justify-self:stretch;
  pointer-events:none;
}
.profile-v2-rank-above .rank-shield-wrap{
  width:88px!important;
  height:82px!important;
  margin:0!important;
  filter:drop-shadow(0 0 12px rgba(245,200,106,.34));
}
.profile-v2-rank-above .rank-shield-wrap img{
  width:100%!important;
  height:100%!important;
  object-fit:contain;
}
.profile-v2-rank-above .rank-stars-plain{
  display:block;
  max-width:96px;
  text-align:center;
  font-size:15px;
  line-height:1.25;
  letter-spacing:-1px;
  white-space:normal;
  filter:drop-shadow(0 0 7px rgba(250,204,21,.30));
}
.profile-v2-stats{
  margin-top:14px!important;
  padding-top:13px!important;
}
.profile-v2-stat-rank{
  padding-top:0!important;
  position:static!important;
}
.profile-v2-rank-badge{display:none!important}
@media(max-width:380px){
  .profile-v2-identity{grid-template-columns:2fr 1fr!important;min-height:78px}
  .profile-v2-person{gap:9px;padding-right:6px}
  .profile-v2-avatar-wrap,.profile-v2-avatar{width:56px;height:56px}
  .profile-v2-rank-above{min-height:74px}
  .profile-v2-rank-above .rank-shield-wrap{width:74px!important;height:70px!important}
  .profile-v2-rank-above .rank-stars-plain{max-width:78px;font-size:12px}
}

/* 24 Sep 2026 — FIX: badge occupies the TRUE third column above Level 6 */
.profile-v2-identity{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  column-gap:0!important;
}
.profile-v2-person{
  grid-column:1 / 3!important;
  min-width:0!important;
}
.profile-v2-rank-above{
  grid-column:3!important;
  width:100%!important;
  justify-self:stretch!important;
  place-items:center!important;
  transform:none!important;
  position:static!important;
}
@media(max-width:380px){
  .profile-v2-identity{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .profile-v2-person{grid-column:1 / 3!important}
  .profile-v2-rank-above{grid-column:3!important}
}

/* PROFILE: เปลี่ยนเบาะเอง */
.my-seat-change-note{font-size:13px;color:#9fb3c8;margin:-4px 0 14px}.my-seat-change-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.my-seat-change-cell{min-height:54px;border:1px solid rgba(94,234,212,.24);border-radius:14px;background:rgba(10,38,43,.78);color:#eafffb;font:800 15px/1.1 inherit;box-shadow:inset 0 0 18px rgba(45,212,191,.04)}.my-seat-change-cell small{display:block;font-size:8px;color:#a7f3d0;margin-top:4px}.my-seat-change-cell.is-mine{border-color:#fbbf24;background:rgba(120,72,8,.38);box-shadow:0 0 18px rgba(251,191,36,.12)}.my-seat-change-cell.is-busy{opacity:.38;background:rgba(80,22,30,.58);border-color:rgba(248,113,113,.2)}.my-seat-change-legend{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:15px;color:#8fa5b8;font-size:10px}.my-seat-change-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-left:5px}.my-seat-change-legend .mine{background:#fbbf24}.my-seat-change-legend .free{background:#2dd4bf}.my-seat-change-legend .busy{background:#ef4444}
/* ปุ่มเพจผู้จัดทริป (เต็มแถว เด่นด้วยสีทอง) */
.profile-v2-actions .pv2-partner{grid-column:1/-1;border-color:rgba(232,196,120,.55)!important;background:linear-gradient(135deg,rgba(232,196,120,.18),rgba(6,14,22,.6))!important}
.profile-v2-actions .pv2-partner b{color:#f3d48a}
/* ==== css/30-info-calendar.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   NOTIF / INFO TAB
   ============================================================ */
.notif-item { display: flex; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 16px; padding: 14px; margin-bottom: 10px; }
.notif-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-top: 4px; }
.notif-dot.read { background: var(--muted); }
.notif-info h4 { font-size: 13px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.notif-info p { font-size: 12px; color: var(--sub); line-height: 1.5; }
.notif-info .time { font-size: 10px; color: var(--muted); margin-top: 6px; }

.learning-page-intro {
  margin: 0 0 14px;
  padding: 15px 16px;
  border: 1px solid rgba(125, 211, 252, .15);
  border-radius: 19px;
  background: linear-gradient(180deg,rgba(3,12,18,.82),rgba(2,10,15,.95)),url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat;
  box-shadow: inset 0 1px rgba(255,255,255,.045), 0 10px 26px rgba(0,0,0,.16);
}
.learning-page-intro small { display:block; margin-bottom:4px; color:#fdba74; font-size:10px; font-weight:800; letter-spacing:.4px; }
.learning-page-intro h3 { margin:0; color:#fff; font-size:16px; font-weight:800; line-height:1.4; }
.learning-page-intro p { margin:5px 0 0; color:rgba(207,226,217,.72); font-size:10.5px; line-height:1.55; }
.learning-badge-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; flex-wrap:wrap; }
.learning-level-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:999px; padding:6px 14px; font-size:11.5px; font-weight:700; color:#f1f5f9; }
.learning-quiz-cta {
  display:inline-flex; align-items:center; gap:6px;
  background:linear-gradient(135deg, rgba(249,115,22,.22), rgba(245,158,11,.14));
  border:1px solid rgba(251,146,60,.5);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:999px; padding:7px 15px;
  font-family:inherit; font-size:11.5px; font-weight:800; color:#fed7aa;
  cursor:pointer;
  animation: learningQuizGlow 2.2s ease-in-out infinite;
}
@keyframes learningQuizGlow {
  0%, 100% { box-shadow:0 0 0 rgba(251,146,60,0); transform:scale(1); }
  50% { box-shadow:0 0 16px rgba(251,146,60,.55); transform:scale(1.035); }
}
@media (prefers-reduced-motion: reduce) { .learning-quiz-cta { animation:none; } }
.learning-topic-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin:0 1px 13px; }
.learning-topic-heading h3 { margin:0; color:#fff; font-size:15px; font-weight:800; line-height:1.35; }
.learning-topic-heading small { flex:0 0 auto; color:rgba(164,188,202,.68); font-size:9px; }

/* หัวข้อย่อในหน้า "เผื่อจำเป็น" — การ์ดสั้นๆ กดเพื่อเปิดดูรายละเอียดแทนที่จะโชว์ยาวเหยียดทั้งหมดพร้อมกัน */
.prep-item-card {
  position: relative;
  width: 100%;
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 10px 12px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: #fff;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(125, 211, 252, .14);
  border-radius: 18px;
  background:
    linear-gradient(105deg, rgba(13, 30, 42, .58), rgba(7, 18, 28, .34));
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .035);
  backdrop-filter: blur(12px) saturate(118%);
  -webkit-backdrop-filter: blur(12px) saturate(118%);
  transition: transform .16s ease, border-color .18s ease, background .18s ease;
}
.prep-item-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  bottom: 17px;
  width: 2px;
  border-radius: 0 99px 99px 0;
  background: linear-gradient(180deg, transparent, rgba(56, 189, 248, .82), transparent);
  opacity: .72;
}
.prep-item-card:active {
  transform: scale(.975);
  border-color: rgba(125, 211, 252, .28);
  background: linear-gradient(105deg, rgba(18, 42, 57, .66), rgba(8, 23, 34, .43));
}
.prep-item-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  font-size: 21px;
  line-height: 1;
  background: linear-gradient(145deg, rgba(125, 211, 252, .13), rgba(255, 255, 255, .035));
  border: 1px solid rgba(125, 211, 252, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.prep-item-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.prep-item-title { font-size: 14px; line-height: 1.35; font-weight: 750; color: #f4f8fb; }
.prep-item-copy small { font-size: 10.5px; line-height: 1.3; font-weight: 400; color: rgba(164, 188, 202, .72); }
.prep-item-arrow {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
  color: rgba(186, 222, 239, .76);
  background: rgba(56, 189, 248, .055);
  border: 1px solid rgba(125, 211, 252, .10);
}

/* ป็อบอัพรายละเอียด — ลอยกลางจอ พื้นหลังเป็นเฉดสีเขียวเข้มทึบให้ความรู้สึกป่า (ไม่ใช้รูปจริง กันปัญหาหารูปไม่ได้/ไฟล์ผิด) */
.learning-summary-card { position:relative; display:grid; grid-template-columns:1fr 66px; align-items:center; gap:8px 14px; margin:0 0 14px; padding:15px 16px; overflow:hidden; border:1px solid rgba(251,146,60,.25); border-radius:19px; color:#fff; background:linear-gradient(120deg,rgba(58,31,13,.42),rgba(8,22,25,.62)); box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(12px); }
.learning-load-retry{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;padding:9px 12px;border-radius:12px;
  background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.35);
}
.learning-load-retry span{font-size:10.5px;color:#fde68a;line-height:1.5}
.learning-load-retry button{
  flex-shrink:0;background:rgba(251,191,36,.18);border:1px solid rgba(251,191,36,.5);
  color:#fef3c7;font-size:10.5px;font-weight:800;padding:6px 12px;border-radius:999px;
  cursor:pointer;font-family:inherit;
}
.learning-load-retry button:active{transform:scale(.96)}
.learning-summary-copy { display:flex; flex-direction:column; gap:3px; }
.learning-summary-copy small { color:#fed7aa; font-size:11px; }
.learning-summary-copy strong { font-size:19px; color:#fff; }
.learning-score-ring { width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#fb923c var(--learning-score),rgba(255,255,255,.09) 0);position:relative; }
.learning-score-ring::after { content:'';position:absolute;inset:5px;border-radius:50%;background:#0a1516; }
.learning-score-ring span { position:relative;z-index:1;font-size:12px;font-weight:800; }
.learning-progress-track { grid-column:1/-1;height:5px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden; }
.learning-progress-track i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fdba74,#f97316);box-shadow:0 0 12px rgba(251,146,60,.55);transition:width .35s ease; }
.learning-summary-card p { grid-column:1/-1;margin:0;color:rgba(255,255,255,.7);font-size:10.5px;line-height:1.6; }
.prep-item-card.is-topic-complete { border-color:rgba(251,146,60,.42);box-shadow:0 0 18px rgba(249,115,22,.09),inset 0 1px rgba(255,255,255,.05); }
.prep-item-card.is-topic-complete::before { background:linear-gradient(180deg,transparent,#fb923c,transparent); }
.prep-item-card.is-topic-complete .prep-item-icon { border-color:rgba(251,146,60,.34);background:rgba(124,45,18,.22); }

.prep-detail-modal { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.74); backdrop-filter: blur(7px); padding: 18px; }
.prep-detail-modal.show { display: flex; animation: prepFadeIn .25s ease; }
@keyframes prepFadeIn { from { opacity: 0; } to { opacity: 1; } }
.prep-detail-box {
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(6,14,10,.55) 0%, rgba(6,12,9,.82) 55%, rgba(5,10,8,.94) 100%),
    url('/ximg.php?f=1760772481955-dcb947cb2d3f-900.jpg') center/cover,
    #0a1810;
  border-radius: 26px; padding: 30px 24px 34px; position: relative;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px rgba(74,222,128,.12);
  animation: prepPopIn .28s cubic-bezier(.34,1.4,.64,1);
  border: 1px solid rgba(148, 220, 176, .16);
}
@keyframes prepPopIn { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.prep-detail-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; font-size: 15px; cursor: pointer; backdrop-filter: blur(6px); }
.prep-detail-box h2 { font-size: 20px; font-weight: 800; color: #fff; margin: 0 0 12px; padding-right: 36px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.prep-detail-progress { display:flex;align-items:center;gap:10px;margin:0 0 17px;color:#fed7aa;font-size:11px;font-weight:700; }
.prep-detail-progress i { flex:1;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden; }
.prep-detail-progress b { display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fdba74,#f97316);box-shadow:0 0 10px rgba(251,146,60,.55);transition:width .3s ease; }
.prep-detail-body { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;font-size:13px;color:#fff;line-height:1.6; }
.prep-detail-subhead { grid-column:1/-1;font-size:12px;font-weight:800;color:#fed7aa;margin:8px 0 0;letter-spacing:.2px; }
.learning-row { position:relative;min-height:78px;padding:0 42px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.11);border-radius:15px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025));backdrop-filter:blur(10px);transition:border-color .25s,box-shadow .25s,background .25s; }
.learning-row-main { width:100%;min-height:76px;padding:12px 8px 12px 13px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;border:0;background:none;color:#fff;text-align:left;font-family:inherit; }
.learning-row-title { font-size:12.5px;font-weight:700;line-height:1.45;color:#fff; }
.learning-row-more {
  min-height:27px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid rgba(251,146,60,.3);
  border-radius:999px;
  color:#fed7aa;
  background:rgba(124,45,18,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.04);
  font-size:9.5px;
  font-weight:750;
  line-height:1;
}
.learning-row-more b { color:#fb923c; font-size:14px; font-weight:500; line-height:.8; transition:transform .2s ease; }
.learning-row-lesson { display:none;padding:0 12px 13px;color:rgba(255,255,255,.82);font-size:11px;line-height:1.65; }
.learning-row-lesson p { margin:0 0 6px; }
.learning-row-lesson small { color:#fed7aa;font-size:9.5px; }
.learning-row.is-reading { grid-column:1/-1;padding-right:48px; }
.learning-row.is-reading .learning-row-main { min-height:52px; }
.learning-row.is-reading .learning-row-more b { transform:rotate(90deg); }
.learning-row.is-reading .learning-row-lesson { display:block;animation:prepFadeIn .25s ease; }
.learning-row.is-unlocked .learning-row-more { color:#fff;border-color:rgba(251,146,60,.5);background:rgba(194,65,12,.24);box-shadow:0 0 12px rgba(249,115,22,.11); }
.learning-check-btn { position:absolute;right:9px;top:50%;transform:translateY(-50%);width:30px;height:30px;padding:5px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:rgba(255,255,255,.42); }
.learning-check-btn svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.learning-row.is-unlocked .learning-check-btn { color:#fdba74;border-color:rgba(251,146,60,.38);background:rgba(124,45,18,.2);box-shadow:0 0 10px rgba(251,146,60,.1); }
.learning-row.is-saving { opacity:.65; }
.learning-row.is-complete { border-color:rgba(251,146,60,.54);background:linear-gradient(135deg,rgba(194,65,12,.24),rgba(69,26,3,.15));box-shadow:0 0 17px rgba(251,146,60,.16),inset 0 1px rgba(255,255,255,.06); }
.learning-row.is-complete .learning-check-btn { color:#fff;border-color:#fb923c;background:linear-gradient(145deg,#fb923c,#ea580c);box-shadow:0 0 14px rgba(251,146,60,.5);animation:learningCheckBreathe 2.6s ease-in-out infinite; }
.learning-row.is-complete .learning-row-more { color:#fff;border-color:rgba(251,146,60,.5);background:rgba(194,65,12,.25); }
@keyframes learningCheckBreathe { 0%,100%{transform:translateY(-50%) scale(1);box-shadow:0 0 9px rgba(251,146,60,.28)} 50%{transform:translateY(-50%) scale(1.08);box-shadow:0 0 19px rgba(251,146,60,.62)} }
@media(max-width:390px){.prep-detail-body{grid-template-columns:1fr}.learning-row.is-reading{grid-column:auto}}

/* ============================================================
   TRIP CALENDAR MODAL
   ============================================================ */
.trip-calendar-modal { position: fixed; inset: 0; z-index: 9999; display: none; background: #070c14; overflow-y: auto; }
.trip-calendar-modal.show { display: block; }
.calendar-bg-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; }
.calendar-bg-layer img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease; }
.calendar-bg-layer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,12,20,.65) 0%, rgba(7,12,20,.88) 45%, #070c14 82%);
}
.trip-calendar-box { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 20px 16px 40px; }
.trip-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.trip-calendar-header h2 { font-size: 19px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.trip-calendar-close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 15px; cursor: pointer; }
.trip-calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.trip-calendar-nav button { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.1); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); color: #7dd3fc; font-size: 20px; font-weight: 900; cursor: pointer; }
.trip-calendar-nav button:active { transform: scale(.92); }
#calendarMonthLabel { font-size: 17px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.trip-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; font-weight: 700; color: #cbd5e1; margin-bottom: 8px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.trip-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-day {
  aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.06); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 13px; font-weight: 700; color: #f1f5f9; cursor: pointer; position: relative;
}
.cal-day.empty { background: transparent; border: none; backdrop-filter: none; cursor: default; }
.cal-day.today { border: 1.5px solid #38bdf8; }
.cal-day.holiday { color: #fca5a5; }
.cal-day.has-trip { background: linear-gradient(135deg, rgba(56,189,248,.28), rgba(2,132,199,.14)); border-color: rgba(125,211,252,.5); }
.cal-day.selected { background: linear-gradient(135deg, #0284c7, #38bdf8); color: #fff; border-color: transparent; }
.cal-day .dot-row { display: flex; gap: 2px; position: absolute; bottom: 5px; z-index: 2; }
/* วันที่มีทริป: รูปทริปเป็นพื้นหลัง */
.cal-day.has-img { background: var(--cal-img) center/cover no-repeat, #0b2a3a; border-color: rgba(125,211,252,.55); overflow: hidden; }
.cal-day.has-img::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,10,15,.10) 0%, rgba(2,10,15,.55) 100%); }
.cal-day.has-img .cal-num { position: relative; z-index: 1; color: #fff; font-size: 14px; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.9), 0 0 8px rgba(0,0,0,.6); }
.cal-day.has-img.holiday .cal-num { color: #fecaca; }
.cal-day.has-img.today { border: 2px solid #38bdf8; }
.cal-day.has-img.selected { background: var(--cal-img) center/cover no-repeat, #0284c7; border: 2px solid #fff; box-shadow: 0 0 0 2px #38bdf8, 0 6px 16px rgba(2,132,199,.5); }
.cal-day.has-img.selected::before { background: linear-gradient(180deg, rgba(2,132,199,.15), rgba(2,132,199,.45)); }
.cal-more { position: absolute; top: 3px; right: 3px; z-index: 2; padding: 0 4px; border-radius: 6px; background: rgba(2,10,15,.75); color: #7dd3fc; font-size: 9px; font-weight: 800; line-height: 14px; }
.cal-day .dot-row .dot { width: 4px; height: 4px; border-radius: 50%; }
.cal-day .dot-row .dot.trip { background: #38bdf8; }
.cal-day .dot-row .dot.holiday { background: #f87171; }
.trip-calendar-legend { display: flex; gap: 18px; justify-content: center; margin: 16px 0 8px; font-size: 11.5px; color: #cbd5e1; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.trip-calendar-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.trip-calendar-legend .dot.trip { background: #38bdf8; }
.trip-calendar-legend .dot.holiday { background: #f87171; }
.calendar-day-detail { margin-top: 8px; }
.calendar-month-triplist-hdr { font-size: 13.5px; font-weight: 800; color: #fff; margin: 18px 0 10px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.calendar-month-triplist { display: flex; flex-direction: column; gap: 9px; margin-bottom: 8px; }
.calendar-month-triplist-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer;
  background: linear-gradient(135deg, rgba(56,189,248,.14), rgba(2,132,199,.04));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(125,211,252,.28); border-radius: 15px; padding: 13px 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.calendar-month-triplist-item:active { transform: scale(.98); }
.calendar-month-triplist-name { font-size: 13px; font-weight: 700; color: #f1f5f9; }
.calendar-month-triplist-date { font-size: 11.5px; color: #7dd3fc; font-weight: 800; flex-shrink: 0; }
.calendar-day-detail-title { font-size: 14px; font-weight: 800; color: #fff; margin-bottom: 10px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
/* ==== css/31-learning-lessons-2-3.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* TNH Learning lessons 2–3 */
.learning-back-btn{display:inline-flex;align-items:center;gap:6px;margin:0 0 14px;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:9px 13px;background:rgba(255,255,255,.06);color:#d9e7e5;font:700 12px/1 inherit;cursor:pointer}
.learning-hub-hero{position:relative;overflow:hidden;margin:0 0 16px;padding:24px 20px;border:1px solid rgba(88,220,188,.18);border-radius:25px;background:radial-gradient(circle at 92% 0,rgba(56,189,248,.15),transparent 38%),linear-gradient(145deg,rgba(10,35,31,.96),rgba(5,18,20,.96));box-shadow:0 18px 45px rgba(0,0,0,.24)}
.learning-hub-hero small{display:block;color:#6ee7c5;font-size:10px;font-weight:900;letter-spacing:1.8px}.learning-hub-hero h2{margin:5px 0 5px;color:#fff;font-size:28px}.learning-hub-hero p{margin:0;max-width:430px;color:#9db0ad;font-size:12.5px;line-height:1.65}
.learning-summary-all{margin-bottom:18px!important}.learning-course-heading{display:flex;justify-content:space-between;align-items:end;margin:20px 2px 11px}.learning-course-heading small{display:block;color:#6ee7c5;font-size:10px;font-weight:800}.learning-course-heading h3{margin:3px 0 0;color:#fff;font-size:18px}.learning-course-heading>span{color:#8ea4a1;font-size:11px;font-weight:800}
.learning-course-list{display:grid;gap:11px}.learning-course-card{position:relative;width:100%;display:grid;grid-template-columns:50px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;padding:17px 14px;border:1px solid rgba(255,255,255,.09);border-radius:21px;background:linear-gradient(145deg,rgba(12,31,29,.86),rgba(6,19,20,.94));color:#fff;box-shadow:0 11px 30px rgba(0,0,0,.18);cursor:pointer}.learning-course-card.is-done{border-color:rgba(52,211,153,.3)}.learning-course-no{position:absolute;top:8px;right:12px;color:#718a86;font-size:9px;font-weight:900;text-transform:uppercase}.learning-course-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:rgba(255,255,255,.06);font-size:24px}.learning-course-copy{display:block;min-width:0}.learning-course-copy strong{display:block;padding-right:42px;font-size:15px}.learning-course-copy small{display:block;margin-top:3px;color:#8fa5a1;font-size:10.5px;line-height:1.45}.learning-course-score{display:inline-flex;margin-top:7px;padding:3px 7px;border-radius:99px;background:rgba(56,189,248,.08);color:#8bdbff;font-size:9.5px!important;font-weight:800}.learning-course-track{display:block;height:4px;margin-top:9px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}.learning-course-track b{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#5eead4)}.learning-course-copy em{display:block;margin-top:4px;color:#79908c;font:700 9.5px/1.3 inherit}.learning-course-arrow{color:#5eead4;font-size:27px}
.learning-lesson-head{margin:0 0 15px;padding:21px 18px;border:1px solid rgba(56,189,248,.18);border-radius:23px;background:linear-gradient(145deg,rgba(8,35,42,.92),rgba(7,22,24,.96));color:#fff}.learning-lesson-head.is-l2{border-color:rgba(56,189,248,.25)}.learning-lesson-head.is-l3{border-color:rgba(52,211,153,.25);background:linear-gradient(145deg,rgba(8,39,31,.92),rgba(7,22,24,.96))}.learning-lesson-head>span{color:#7dd3fc;font-size:10px;font-weight:900;letter-spacing:.8px}.learning-lesson-head h2{margin:5px 0 5px;font-size:22px}.learning-lesson-head p{margin:0;color:#99aca9;font-size:11.5px;line-height:1.6}.learning-lesson-head>div{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;margin-top:13px}.learning-lesson-head>div b,.learning-lesson-head>div strong{font-size:10.5px;color:#d9f5ef}.learning-lesson-head>div i{height:5px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}.learning-lesson-head>div i em{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#38bdf8,#5eead4)}
.learning-quiz-card{margin:0 0 12px;padding:15px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(8,25,28,.9);box-shadow:0 10px 26px rgba(0,0,0,.15)}.learning-quiz-card.is-correct{border-color:rgba(52,211,153,.28)}.learning-quiz-card.is-wrong{border-color:rgba(251,191,36,.25)}.learning-quiz-card header{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:start}.learning-quiz-card header>span{display:grid;place-items:center;min-width:36px;height:24px;border-radius:99px;background:rgba(56,189,248,.1);color:#7dd3fc;font-size:9px;font-weight:900}.learning-quiz-card header strong{color:#f4fbfa;font-size:13px;line-height:1.55}.learning-quiz-card header em{grid-column:2;color:#6ee7b7;font-size:10px;font-weight:800}.learning-quiz-choices{display:grid;gap:7px;margin-top:12px}.learning-quiz-choices button{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;width:100%;padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.035);color:#cbd9d6;text-align:left;font:600 11px/1.45 inherit;cursor:pointer}.learning-quiz-choices button:disabled{opacity:.58;cursor:default}.learning-quiz-choices button span{width:27px;height:27px;display:grid;place-items:center;border-radius:9px;background:rgba(255,255,255,.06);color:#7dd3fc;font-weight:900}.learning-quiz-explain{margin-top:11px;padding:11px;border-radius:13px;background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.12)}.learning-quiz-explain b{color:#86efac;font-size:10px}.learning-quiz-explain p{margin:4px 0 0;color:#9fb3af;font-size:10.5px;line-height:1.6}
.learning-scenario-note{margin:0 0 12px;padding:10px 12px;border:1px solid rgba(250,204,21,.13);border-radius:14px;background:rgba(250,204,21,.055);color:#c8bc80;font-size:9.5px;line-height:1.55}.learning-scenario-card{margin:0 0 13px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:21px;background:linear-gradient(145deg,rgba(9,30,26,.92),rgba(7,21,22,.96));box-shadow:0 10px 28px rgba(0,0,0,.16)}.learning-scenario-card.is-done{border-color:rgba(52,211,153,.23)}.learning-scenario-card header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 8px}.learning-scenario-card header span{grid-column:1/-1;color:#6ee7b7;font-size:9px;font-weight:900;letter-spacing:.6px}.learning-scenario-card header h3{margin:0;color:#fff;font-size:16px}.learning-scenario-card header b{padding:5px 8px;border-radius:99px;background:rgba(52,211,153,.1);color:#86efac;font-size:10px}.learning-scenario-prompt{margin:9px 0 13px;color:#a9bbb7;font-size:11px;line-height:1.65}.learning-scenario-input span{display:block;margin-bottom:6px;color:#dff7f0;font-size:10px;font-weight:800}.learning-scenario-input textarea{width:100%;resize:vertical;min-height:120px;padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;outline:0;background:rgba(0,0,0,.16);color:#fff;font:500 12px/1.6 inherit}.learning-scenario-input textarea:focus{border-color:rgba(94,234,212,.35);box-shadow:0 0 0 3px rgba(94,234,212,.06)}.learning-scenario-input small{display:block;margin-top:5px;color:#718681;font-size:9px}.learning-scenario-submit{width:100%;margin-top:11px;padding:11px 12px;border:0;border-radius:13px;background:linear-gradient(135deg,#34d399,#22d3ee);color:#05201b;font:900 11px/1 inherit;cursor:pointer}.learning-scenario-answer{margin-top:8px;padding:11px;border-radius:13px;background:rgba(255,255,255,.035)}.learning-scenario-answer small{color:#6ee7b7;font-size:9px;font-weight:800}.learning-scenario-answer p{margin:5px 0 0;color:#d0ddda;font-size:11px;line-height:1.6;white-space:pre-wrap}.learning-scenario-guide{margin-top:9px;padding:11px;border-radius:13px;background:rgba(52,211,153,.06);border:1px solid rgba(52,211,153,.1)}.learning-scenario-guide strong{color:#86efac;font-size:10px}.learning-scenario-guide ul{margin:6px 0 0;padding-left:17px;color:#9fb3af;font-size:10px;line-height:1.65}
@media(max-width:390px){.learning-course-card{grid-template-columns:44px minmax(0,1fr) auto;padding:15px 12px}.learning-course-no{display:none}.learning-course-icon{width:42px;height:42px;font-size:21px}.learning-course-copy strong{padding-right:0}.learning-quiz-card{padding:13px}.learning-lesson-head{padding:18px 15px}}

/* ส่วนหัวศูนย์การเรียนรู้นักเดินป่า — พื้นหลังป่าแบบเดียวกับป๊อบอัพ */
.learning-hub-hero{
  border-color:rgba(105,170,151,.28);
  background:
    radial-gradient(circle at 92% 0,rgba(52,211,153,.16),transparent 40%),
    linear-gradient(180deg,rgba(3,12,18,.45) 0%,rgba(3,12,18,.70) 60%,rgba(2,10,15,.90) 100%),
    var(--tnh-forest-photo,url('/ximg.php?f=1448375240586-882707db888b-1200.jpg')) center/cover no-repeat!important;
}
.learning-hub-hero h2{text-shadow:0 2px 10px rgba(0,0,0,.6)}
.learning-hub-hero p{color:#c3d6cf}

/* ================================================================
   ป๊อบอัพศูนย์การเรียนรู้นักเดินป่า — ธีมป่าทึบแบบป๊อบอัพอื่น
   (ต่ำกว่า prepDetailModal z-index 9999 เพื่อให้หน้ารายละเอียดหัวข้อเปิดทับได้)
   ================================================================ */
.learn-pop{display:none;position:fixed;inset:0;z-index:9000;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;color:#f1f5f9;
  background:
    radial-gradient(circle at 92% 2%,rgba(31,122,105,.14),transparent 30%),
    radial-gradient(circle at 0 78%,rgba(22,90,72,.10),transparent 27%),
    linear-gradient(180deg,rgba(3,12,18,.80),rgba(2,10,15,.95)),
    var(--tnh-forest-photo,url('/ximg.php?f=1448375240586-882707db888b-1800.jpg')) center top/cover no-repeat fixed;
  background-color:var(--tnh-forest-base,#030b0d)}
.learn-pop.open{display:block;animation:learnPopIn .22s ease-out}
@keyframes learnPopIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.learn-lock,html.learn-lock body{overflow:hidden}
.learn-pop-head{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:8px;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 10px;background:linear-gradient(180deg,rgba(3,11,13,.96),rgba(3,11,13,.84));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(105,170,151,.16)}
.learn-pop-head div{text-align:center;min-width:0}
.learn-pop-head b{display:block;font-size:16px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learn-pop-head small{display:block;font-size:10.5px;color:#94ada5;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.learn-pop-btn{height:40px;border:1px solid rgba(105,170,151,.30);border-radius:13px;background:rgba(4,14,18,.8);color:#d1fae5;font-size:21px;line-height:1;cursor:pointer;font-family:inherit}
.learn-pop-body{max-width:720px;margin:0 auto;padding:14px 14px calc(env(safe-area-inset-bottom,0px) + 32px)}
.learn-pop-body .learning-hub-hero h2{font-size:24px}
/* ==== css/40-van-location-checkin-v2.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   VAN LOCATION FEATURE
   ============================================================ */
/* ============================================================
   VAN LOCATION FEATURE — ปรับดีไซน์เฉพาะส่วนนี้
   ============================================================ */
#vanLocationModal {
  background:
    linear-gradient(180deg, rgba(3,8,14,.72), rgba(3,8,14,.90)),
    url('/ximg.php?f=1448375240586-882707db888b-1200.jpg') center/cover no-repeat;
}

#vanLocationModal .trip-calendar-header {
  padding: 11px 13px;
  border-radius: 19px;
  background: rgba(7,17,29,.76);
  border: 1px solid rgba(125,211,252,.16);
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}

.van-loc-title-wrap { display:flex; align-items:center; gap:10px; min-width:0; }
.van-loc-brand-logo {
  width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;
  border:1px solid rgba(125,211,252,.55);
  box-shadow:0 0 15px rgba(56,189,248,.20);
}
#vanLocationModal .trip-calendar-close,
#vanLocationModal .van-loc-back {
  background:rgba(7,17,29,.82);
  border:1px solid rgba(148,163,184,.18);
  color:#e2e8f0;
}

#vanLocationModal .van-loc-select,
#vanLocationModal .van-number-btn,
#vanLocationModal .van-driver-form,
#vanLocationModal .van-loc-map-box {
  background:linear-gradient(145deg, rgba(9,22,37,.84), rgba(5,13,23,.78));
  border-color:rgba(125,211,252,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035);
}

#vanLocationModal .van-number-btn {
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
#vanLocationModal .van-number-btn:active {
  transform:scale(.97);
  border-color:rgba(56,189,248,.52);
  box-shadow:0 0 18px rgba(56,189,248,.10);
}

.van-number-logo {
  width:25px; height:25px; border-radius:50%; object-fit:cover;
  vertical-align:middle; margin-right:7px;
  border:1px solid rgba(125,211,252,.45);
}

#vanLocationModal .van-form-group input[type="text"],
#vanLocationModal .van-form-group input[type="tel"],
#vanLocationModal .van-photo-drop,
#vanLocationModal .van-chat-input-row input {
  background:rgba(10,23,39,.88);
  border-color:rgba(125,211,252,.14);
}
#vanLocationModal .van-form-group input:focus,
#vanLocationModal .van-chat-input-row input:focus {
  border-color:#38bdf8;
}

#vanLocationModal .van-premium-card {
  background:
    linear-gradient(120deg, rgba(4,12,22,.92), rgba(5,18,31,.62)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover;
  border-color:rgba(125,211,252,.20);
  box-shadow:0 12px 28px rgba(0,0,0,.26);
}

#vanLocationModal .van-parking-photos-section {
  background:linear-gradient(180deg, rgba(56,189,248,.055), rgba(3,10,18,.30));
  border-color:rgba(125,211,252,.14);
}

/* แชทคงไฟวิ่งสีฟ้าตามดีไซน์เดิม */
#vanLocationModal .van-chat-section::before {
  background:conic-gradient(from 0deg, transparent 0%, transparent 78%, #bae6fd 87%, #38bdf8 92%, transparent 96%);
}
#vanLocationModal .van-chat-section::after {
  background:linear-gradient(160deg,#0b192a,#07111e);
}
#vanLocationModal .van-chat-msg-bubble { background:#101e31; }
#vanLocationModal .van-chat-msg.own .van-chat-msg-bubble {
  background:linear-gradient(135deg,rgba(2,132,199,.36),rgba(56,189,248,.18));
}
#vanLocationModal .van-chat-send-btn {
  background:linear-gradient(135deg,#0369a1,#38bdf8);
  box-shadow:0 0 15px rgba(56,189,248,.20);
}

/* QR CHECK-IN — ปุ่มสร้าง QR สำหรับแอดมิน + หน้าตา QR ยืนยันตัวตน */
#vanLocationModal .van-checkin-admin-card {
  position: relative;
  overflow: hidden;
  margin: 0 0 14px;
  padding: 14px 15px;
  border-radius: 18px;
  border: 1px solid rgba(56,189,248,.18);
  background: linear-gradient(145deg, rgba(8,18,31,.92), rgba(6,11,19,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
#vanLocationModal .van-checkin-admin-card::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(110deg, transparent 28%, rgba(56,189,248,.08) 48%, transparent 68%);
  transform: translateX(-120%);
  animation: vanCheckinSheen 4.4s ease-in-out infinite;
}
@keyframes vanCheckinSheen {
  0%,60% { transform:translateX(-120%); }
  82%,100% { transform:translateX(120%); }
}
#vanLocationModal .van-checkin-admin-row {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
}
#vanLocationModal .van-checkin-admin-icon {
  width:42px;
  height:42px;
  border-radius:13px;
  flex:0 0 42px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:21px;
  background:rgba(56,189,248,.09);
  border:1px solid rgba(56,189,248,.2);
}
#vanLocationModal .van-checkin-admin-copy { min-width:0; flex:1; }
#vanLocationModal .van-checkin-admin-title {
  font-size:13.5px;
  font-weight:800;
  color:#f8fafc;
}
#vanLocationModal .van-checkin-admin-sub {
  margin-top:2px;
  font-size:10.5px;
  line-height:1.45;
  color:#94a3b8;
}
#vanLocationModal .van-checkin-admin-btn {
  border:0;
  min-height:40px;
  padding:0 13px;
  border-radius:12px;
  flex-shrink:0;
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:800;
  color:#eaf8ff;
  background:linear-gradient(135deg, rgba(2,132,199,.86), rgba(56,189,248,.7));
  box-shadow:0 5px 16px rgba(2,132,199,.18);
}
#vanLocationModal .van-checkin-admin-btn:active { transform:scale(.97); }

.tnh-checkin-qr-wrap {
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:13px;
  padding:4px 0 2px;
}
.tnh-checkin-qr-box {
  width:246px;
  height:246px;
  padding:10px;
  border-radius:22px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(56,189,248,.16);
}
.tnh-checkin-qr-box img,
.tnh-checkin-qr-box canvas { border-radius:10px; display:block; }
.tnh-checkin-qr-trip {
  font-size:13px;
  font-weight:800;
  color:#fff;
  text-align:center;
  line-height:1.45;
}
.tnh-checkin-qr-meta {
  font-size:11px;
  color:#94a3b8;
  text-align:center;
  line-height:1.5;
}


/* ป็อปอัปเลือกบทบาท */
.van-role-popup {
  border-radius:24px !important;
  border:1px solid rgba(125,211,252,.20) !important;
  background:
    linear-gradient(145deg,rgba(5,14,25,.94),rgba(3,9,17,.96)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover !important;
  box-shadow:0 22px 60px rgba(0,0,0,.56) !important;
}
.van-role-logo {
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(125,211,252,.55);
  box-shadow:0 0 22px rgba(56,189,248,.18);
  margin:0 auto 15px;
}
.van-role-actions { display:flex; gap:12px; }
.van-role-btn {
  flex:1; min-width:0; padding:19px 10px; border-radius:17px;
  background:linear-gradient(145deg,rgba(12,30,49,.82),rgba(5,14,25,.78));
  border:1px solid rgba(125,211,252,.20);
  color:#fff; cursor:pointer; font-family:inherit;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 9px 22px rgba(0,0,0,.18);
  transition:transform .16s ease,border-color .16s ease;
}
.van-role-btn:active { transform:scale(.97); border-color:rgba(56,189,248,.55); }
.van-role-btn .role-ico { display:block; font-size:29px; margin-bottom:7px; }
.van-role-btn .role-label { display:block; font-size:12.5px; font-weight:800; }


/* ===== VAN LOCATION UI REFRESH 6 ก.ย. 69 — เฉพาะหน้าเลือกบทบาท/เลือกทริป/เลือกคัน ===== */
@keyframes vanRoleLogoSway {
  0%,100% { transform:translateY(0) rotate(-5deg) scale(1); }
  25% { transform:translateY(-3px) rotate(4deg) scale(1.025); }
  50% { transform:translateY(-1px) rotate(-3deg) scale(1.015); }
  75% { transform:translateY(-4px) rotate(5deg) scale(1.03); }
}
@keyframes vanRoleCardFloatA {
  0%,100% { transform:translateY(0) rotate(-.35deg); }
  50% { transform:translateY(-4px) rotate(.45deg); }
}
@keyframes vanRoleCardFloatB {
  0%,100% { transform:translateY(-2px) rotate(.35deg); }
  50% { transform:translateY(2px) rotate(-.45deg); }
}
@keyframes vanRoleGlowBreath {
  0%,100% { box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 24px rgba(0,0,0,.22),0 0 0 rgba(56,189,248,0); }
  50% { box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 30px rgba(0,0,0,.28),0 0 20px rgba(56,189,248,.10); }
}
.van-role-logo {
  animation:vanRoleLogoSway 3.1s ease-in-out infinite;
  transform-origin:50% 85%;
  will-change:transform;
}
.van-role-btn { position:relative; overflow:hidden; }
.van-role-btn::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.08) 42%,transparent 68%);
  transform:translateX(-120%); animation:vanRoleShimmer 4.8s ease-in-out infinite;
}
.van-role-btn:nth-child(1) { animation:vanRoleCardFloatA 3.7s ease-in-out infinite,vanRoleGlowBreath 3.7s ease-in-out infinite; }
.van-role-btn:nth-child(2) { animation:vanRoleCardFloatB 4.1s ease-in-out infinite,vanRoleGlowBreath 4.1s ease-in-out infinite; animation-delay:.22s; }
@keyframes vanRoleShimmer { 0%,65%,100%{transform:translateX(-120%)} 78%{transform:translateX(120%)} }
.van-role-btn:active { animation:none; transform:scale(.97); }

/* STEP 2 — จัดหน้าเลือกทริปให้เป็น section ชัดขึ้น */
#vanLocStep2 { padding-top:10px; }
.van-trip-intro {
  position:relative; overflow:hidden; margin:12px 0 13px; padding:17px 16px 15px;
  border-radius:20px; text-align:left;
  background:linear-gradient(135deg,rgba(7,20,35,.93),rgba(8,28,47,.76));
  border:1px solid rgba(125,211,252,.18);
  box-shadow:0 14px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.04);
}
.van-trip-intro::after {
  content:''; position:absolute; width:140px; height:140px; right:-72px; top:-82px;
  border-radius:50%; background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%); pointer-events:none;
}
.van-trip-intro-kicker { font-size:10px; font-weight:800; letter-spacing:1.5px; color:#7dd3fc; text-transform:uppercase; margin-bottom:4px; }
.van-trip-intro-title { font-size:18px; line-height:1.25; font-weight:900; color:#f8fafc; }
.van-trip-intro-sub { font-size:11.5px; line-height:1.55; color:#94a3b8; margin-top:5px; }
.van-trip-select-card {
  padding:12px; border-radius:18px; background:rgba(4,13,24,.72);
  border:1px solid rgba(125,211,252,.14); box-shadow:0 10px 24px rgba(0,0,0,.20);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.van-trip-select-label { display:flex; align-items:center; gap:8px; margin:0 2px 9px; font-size:11px; font-weight:800; color:#cbd5e1; }
.van-trip-select-label .van-trip-select-dot { width:8px; height:8px; border-radius:50%; background:#38bdf8; box-shadow:0 0 12px rgba(56,189,248,.75); flex:0 0 auto; }
#vanLocationModal .van-loc-select {
  min-height:50px; padding:0 42px 0 14px; border-radius:15px;
  background-color:rgba(8,23,39,.94); color:#f8fafc; font-weight:700;
  border:1px solid rgba(125,211,252,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.van-choices-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:19px 2px 10px; }
.van-choices-heading strong { font-size:13px; color:#f8fafc; }
.van-choices-heading span { font-size:10.5px; color:#7dd3fc; }

/* STEP 2 — การ์ดเลือกคัน: รถตู้หน้ายาว + ไฟวิ่งรอบกรอบแบบกล่องแชท */
#vanLocationModal .van-number-choice-row {
  display:grid; grid-template-columns:1fr; gap:12px; width:100%;
}
#vanLocationModal .van-number-btn {
  --van-photo:url('https://i.ibb.co/bMtbZTCf/COMMUTER-Cover-2.jpg');
  position:relative; min-height:126px; width:100%; padding:0; border:0; border-radius:20px;
  overflow:hidden; isolation:isolate; text-align:left; color:#fff; cursor:pointer;
  background:#06101c; box-shadow:0 13px 30px rgba(0,0,0,.32); transform:none;
}
#vanLocationModal .van-number-btn::before {
  content:''; position:absolute; z-index:-2; top:50%; left:50%; width:220%; height:360%;
  background:conic-gradient(from 0deg,transparent 0%,transparent 75%,#bae6fd 84%,#38bdf8 89%,#2563eb 92%,transparent 97%);
  animation:vanChatBorderSpin 3.5s linear infinite;
}
#vanLocationModal .van-number-btn::after {
  content:''; position:absolute; z-index:-1; inset:2px; border-radius:18px;
  background:
    linear-gradient(90deg,rgba(3,10,18,.94) 0%,rgba(3,10,18,.78) 43%,rgba(3,10,18,.16) 74%,rgba(3,10,18,.28) 100%),
    linear-gradient(0deg,rgba(3,10,18,.76),transparent 55%),
    var(--van-photo) 66% 52%/cover no-repeat;
}
#vanLocationModal .van-number-btn:nth-child(2)::before { animation-delay:-1.1s; }
#vanLocationModal .van-number-btn:nth-child(3)::before { animation-delay:-2.2s; }
#vanLocationModal .van-number-btn:active { transform:scale(.985); }
#vanLocationModal .van-number-btn:hover { box-shadow:0 15px 36px rgba(0,0,0,.36),0 0 22px rgba(56,189,248,.10); }
.van-number-card-content {
  min-height:126px; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
  padding:18px 16px 15px; position:relative; z-index:1;
}
.van-number-index {
  display:inline-flex; align-items:center; gap:7px; padding:5px 9px; margin-bottom:auto;
  border-radius:999px; background:rgba(2,8,16,.62); border:1px solid rgba(186,230,253,.22);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:9.5px; font-weight:800; color:#bae6fd;
}
.van-number-index-dot { width:6px; height:6px; border-radius:50%; background:#22d3ee; box-shadow:0 0 10px #22d3ee; }
.van-number-title { font-size:20px; font-weight:900; line-height:1; text-shadow:0 2px 9px rgba(0,0,0,.7); }
.van-number-meta { display:flex; align-items:center; gap:7px; margin-top:7px; font-size:10.5px; font-weight:700; color:#cbd5e1; }
.van-number-arrow {
  position:absolute; right:14px; bottom:14px; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:17px; color:#e0f2fe;
  background:rgba(2,132,199,.30); border:1px solid rgba(125,211,252,.42); box-shadow:0 0 16px rgba(56,189,248,.16);
}
.van-number-photo-credit { margin:10px 2px 2px; font-size:8.5px; line-height:1.4; color:rgba(148,163,184,.58); text-align:center; }

@media (min-width:700px) {
  #vanLocationModal .van-number-choice-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #vanLocationModal .van-number-btn { min-height:170px; }
  .van-number-card-content { min-height:170px; }
}

.van-loc-back { background: var(--bg2); border: 1px solid var(--border); color: #94a3b8; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.van-loc-select { width: 100%; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; color: #fff; font-size: 13.5px; font-family: inherit; }
.van-number-choice-row { display: flex; gap: 10px; }
.van-number-btn {
  flex: 1; background: var(--bg2); border: 1px solid var(--border); border-radius: 14px; padding: 16px 8px;
  color: #f1f5f9; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.van-number-btn:active { transform: scale(.95); background: var(--bg3); }

.van-loc-map-box { width: 100%; height: 220px; border-radius: 16px; background: var(--bg2); border: 1px solid var(--border); padding: 20px; text-align: center; }
.van-loc-map-iframe { width: 100%; height: 240px; border: 0; border-radius: 16px; display: block; }

.van-chat-section {
  position: relative; margin-top: 18px; border-radius: 18px; padding: 14px;
  overflow: hidden; isolation: isolate;
}
.van-chat-section::before {
  content: ''; position: absolute; z-index: -2;
  top: 50%; left: 50%; width: 200%; height: 200%;
  background: conic-gradient(from 0deg, transparent 0%, transparent 78%, #7dd3fc 88%, #38bdf8 92%, transparent 96%);
  animation: vanChatBorderSpin 3.5s linear infinite;
}
@keyframes vanChatBorderSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
.van-chat-section::after {
  content: ''; position: absolute; inset: 2px; z-index: -1; border-radius: 16px;
  background: linear-gradient(160deg, #0e1b2c, #0c1524);
}

.van-chat-header { font-size: 12.5px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.van-chat-messages { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; padding-right: 2px; }
.van-chat-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 85%; }
.van-chat-msg.own { flex-direction: row-reverse; max-width: 85%; margin-left: auto; }
.van-chat-msg-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: linear-gradient(135deg, var(--blue2), var(--blue)); }
.van-chat-msg-bubble { background: var(--bg3); border-radius: 12px; padding: 8px 12px; flex: 1; min-width: 0; }
.van-chat-msg.own .van-chat-msg-bubble { background: linear-gradient(135deg, rgba(2,132,199,.35), rgba(56,189,248,.2)); }
.van-chat-msg.own .van-chat-msg-sender, .van-chat-msg.own .van-chat-msg-text { text-align: right; }
.van-chat-msg-sender { font-size: 11px; font-weight: 700; color: #7dd3fc; margin-bottom: 2px; }
.van-chat-msg-text { font-size: 13px; color: #f1f5f9; line-height: 1.5; overflow-wrap: anywhere; }
.van-chat-input-row { display: flex; gap: 8px; }
.van-chat-input-row input { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 10px 14px; color: #fff; font-size: 13px; font-family: inherit; }
.van-chat-input-row input:focus { outline: none; border-color: var(--blue); }
.van-chat-send-btn { background: linear-gradient(135deg, var(--blue2), var(--blue)); border: none; color: #fff; width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; }

.van-driver-form { background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 16px; margin-bottom: 14px; text-align: left; }
.van-form-group { margin-bottom: 14px; }
.van-form-group:last-child { margin-bottom: 0; }
.van-form-group label { display: block; font-size: 12px; font-weight: 700; color: #94a3b8; margin-bottom: 6px; }
.van-form-group input[type="text"], .van-form-group input[type="tel"] { width: 100%; background: var(--bg3); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px; color: #fff; font-size: 13.5px; font-family: inherit; }
.van-form-group input:focus { outline: none; border-color: var(--blue); }
.van-photo-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--bg3); border: 1.5px dashed var(--border); border-radius: 14px; padding: 18px; cursor: pointer; text-align: center; }
.van-photo-drop:active { transform: scale(.98); }
.van-photo-preview-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.van-photo-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.van-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.van-photo-thumb button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.65); color: #fff; border: none; font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.van-parking-photos-view { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 10px 0; padding: 0 6% 6px; justify-content: center; -ms-overflow-style: none; scrollbar-width: none; }
.van-parking-photos-view::-webkit-scrollbar { display: none; }
.van-parking-photos-view img { width: 88%; max-width: 340px; height: 220px; border-radius: 18px; object-fit: cover; flex-shrink: 0; cursor: pointer; scroll-snap-align: center; box-shadow: 0 10px 26px rgba(0,0,0,.35); }

/* การ์ดข้อมูลคนขับ + กล่องรูปจุดจอดรถ ในโหมดผู้โดยสาร — ดีไซน์หรูหรา ใช้รูปป่าจากเนตเป็นพื้นหลังแทนกล่องสีทึบธรรมดา */
.van-premium-card {
  position: relative; border-radius: 20px; overflow: hidden; padding: 16px 18px; margin-bottom: 14px; text-align: left;
  background:
    linear-gradient(115deg, rgba(6,14,10,.88) 20%, rgba(6,14,10,.55) 100%),
    url('/ximg.php?f=1760772481955-dcb947cb2d3f-600.jpg') center/cover;
  border: 1px solid rgba(52,232,158,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
}
.van-premium-card.blue-theme { border-color: rgba(56,189,248,.25); }
.van-parking-photos-section {
  border-radius: 20px; padding: 16px 0 18px; margin-top: 14px;
  background: linear-gradient(180deg, rgba(52,232,158,.07), transparent 60%);
  border: 1px solid rgba(52,232,158,.15);
}
.van-parking-photos-title { font-size: 12.5px; font-weight: 800; color: #fff; text-align: center; margin-bottom: 10px; }

.calendar-entry-card {
  position: relative; border-radius: 20px; overflow: hidden; cursor: pointer;
  min-height: 140px; margin-top: 16px; box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.calendar-entry-card:active { transform: scale(.98); }
.calendar-entry-card img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.calendar-entry-card::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(6,11,19,.88) 30%, rgba(6,11,19,.45) 100%);
}
.calendar-entry-overlay { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; min-height: 140px; padding: 16px 18px; }
.calendar-entry-icon { font-size: 30px; flex-shrink: 0; }
.calendar-entry-text { flex: 1; min-width: 0; }
.calendar-entry-title { font-size: 16px; font-weight: 800; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.calendar-entry-sub { font-size: 12px; color: #cbd5e1; margin-top: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.calendar-entry-arrow { font-size: 22px; color: #fff; font-weight: 900; flex-shrink: 0; }

.chip { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip-blue { background: rgba(56, 189, 248, .12); color: var(--blue); }
.chip-green { background: rgba(16, 185, 129, .12); color: var(--green); }
.chip-yellow { background: rgba(245, 158, 11, .12); color: var(--yellow); }


/* ============================================================
   QR CHECK-IN POPUPS — VISUAL ONLY
   รูปแบบเดียวกับ popup บันทึกจุดขึ้นรถ
   ไม่แตะ flow / fetch / token / confirm logic
   ============================================================ */
.checkin-save-swal-container{
  padding:16px !important;
  z-index:40000 !important;
}
.checkin-save-swal{
  width:min(88vw,360px) !important;
  padding:0 !important;
  border-radius:24px !important;
  overflow:hidden !important;
  border:1px solid rgba(56,189,248,.16) !important;
  background:
    linear-gradient(180deg,rgba(3,12,18,.82),rgba(2,10,15,.95)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  color:#f1f5f9 !important;
}
.checkin-save-swal-html{
  margin:0 !important;
  padding:0 !important;
}
.checkin-save-state{
  padding:28px 22px 24px;
  text-align:center;
}
.checkin-save-state small{
  display:block;
  color:#7f98aa;
  font-size:9px;
  font-weight:750;
  letter-spacing:.2px;
}
.checkin-save-state h3{
  margin:5px 0 0;
  color:#f7fbff;
  font-size:19px;
  line-height:1.3;
  font-weight:850;
}
.checkin-save-state>p{
  margin:8px auto 0;
  max-width:250px;
  color:#8197a8;
  font-size:10px;
  line-height:1.6;
}

/* loading orbit */
.checkin-save-orbit{
  width:126px;
  height:126px;
  margin:0 auto 18px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.checkin-save-orbit::before,
.checkin-save-orbit::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
}
.checkin-save-orbit::before{
  width:118px;
  height:118px;
  border:1px solid rgba(56,189,248,.18);
  box-shadow:0 0 24px rgba(56,189,248,.07);
}
.checkin-save-orbit::after{
  width:88px;
  height:88px;
  border:1px dashed rgba(125,211,252,.20);
}
.checkin-save-core{
  width:70px;
  height:70px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:linear-gradient(145deg,rgba(16,42,58,.94),rgba(6,21,31,.96));
  border:1px solid rgba(125,211,252,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.28),0 0 24px rgba(56,189,248,.08);
  font-size:30px;
  z-index:5;
  animation:checkinCorePulse 1.4s ease-in-out infinite;
}
.checkin-orbit-dot{
  position:absolute;
  display:block;
  border-radius:50%;
  background:#7dd3fc;
  box-shadow:0 0 10px rgba(125,211,252,.95),0 0 18px rgba(56,189,248,.42);
  z-index:4;
}
.checkin-orbit-dot.dot-a{
  width:11px;height:11px;left:3px;top:55px;
  animation:checkinOrbitA 2.65s linear infinite;
  transform-origin:60px 8px;
}
.checkin-orbit-dot.dot-b{
  width:7px;height:7px;right:13px;top:12px;opacity:.75;
  animation:checkinOrbitB 2.2s linear infinite reverse;
  transform-origin:-47px 50px;
}
.checkin-orbit-dot.dot-c{
  width:6px;height:6px;right:5px;top:58px;opacity:.9;
  animation:checkinOrbitC 1.85s linear infinite;
  transform-origin:-55px 5px;
}
.checkin-save-progress{
  width:126px;height:3px;
  margin:18px auto 0;
  border-radius:999px;
  overflow:hidden;
  background:rgba(148,163,184,.10);
}
.checkin-save-progress i{
  display:block;
  width:42%;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(56,189,248,.08),#38bdf8,rgba(125,211,252,.18));
  animation:checkinProgressMove 1.05s ease-in-out infinite;
}

/* success */
.checkin-success-burst{
  width:132px;
  height:132px;
  margin:0 auto 18px;
  position:relative;
  display:grid;
  place-items:center;
}
.checkin-success-ring{
  width:88px;
  height:88px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(16,185,129,.08);
  border:2px solid rgba(110,231,183,.34);
  box-shadow:0 0 28px rgba(16,185,129,.12);
  animation:checkinSuccessPop .55s cubic-bezier(.18,.85,.25,1) both;
}
.checkin-success-check{
  color:#86efac;
  font-size:48px;
  font-weight:500;
  line-height:1;
}
.checkin-success-burst .burst{
  position:absolute;
  width:6px;height:6px;border-radius:50%;
  background:#6ee7b7;
  box-shadow:0 0 12px rgba(110,231,183,.75);
  animation:checkinBurst 1.45s ease-in-out infinite;
}
.checkin-success-burst .b1{top:8px;left:62px;animation-delay:.0s}
.checkin-success-burst .b2{right:14px;top:42px;animation-delay:.18s}
.checkin-success-burst .b3{bottom:11px;left:48px;animation-delay:.34s}
.checkin-success-burst .b4{left:14px;top:46px;animation-delay:.5s}

.checkin-success-name{
  margin-top:14px;
  color:#fff;
  font-size:17px;
  font-weight:850;
}
.checkin-success-trip{
  margin:12px auto 0;
  padding:12px 13px;
  border-radius:14px;
  background:rgba(2,12,20,.40);
  border:1px solid rgba(148,163,184,.07);
}
.checkin-success-trip strong{
  display:block;
  color:#dcebf4;
  font-size:10px;
  font-weight:800;
}
.checkin-success-trip span{
  display:block;
  margin-top:5px;
  color:#8aa1b1;
  font-size:9px;
}
.checkin-success-status{
  margin-top:12px;
  color:#6ee7b7;
  font-size:10px;
  font-weight:850;
}
.checkin-save-swal .swal2-actions{
  margin:0 !important;
  padding:0 22px 24px !important;
  width:100% !important;
}
.checkin-success-confirm{
  width:100% !important;
  min-height:44px !important;
  margin:0 !important;
  border-radius:13px !important;
  border:1px solid rgba(52,211,153,.20) !important;
  background:linear-gradient(180deg,rgba(16,185,129,.90),rgba(5,150,105,.94)) !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:11px !important;
  box-shadow:0 10px 24px rgba(16,185,129,.14) !important;
}

/* failed / warning — ใช้ภาษาภาพเดียวกับ loading และ success */
.checkin-failure-visual{
  width:132px;
  height:132px;
  margin:0 auto 18px;
  position:relative;
  display:grid;
  place-items:center;
}
.checkin-failure-visual::before{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:50%;
  border:1px solid rgba(251,146,60,.13);
  box-shadow:0 0 28px rgba(249,115,22,.08);
}
.checkin-failure-ring{
  width:88px;
  height:88px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,rgba(124,45,18,.28),rgba(67,20,7,.15));
  border:2px solid rgba(251,146,60,.48);
  box-shadow:0 0 30px rgba(249,115,22,.12),inset 0 0 18px rgba(251,146,60,.05);
  animation:checkinFailurePop .5s cubic-bezier(.18,.85,.25,1) both;
}
.checkin-failure-mark{
  color:#fdba74;
  font-size:51px;
  font-weight:500;
  line-height:1;
  transform:translateY(-1px);
}
.checkin-failure-pulse{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fb923c;
  box-shadow:0 0 12px rgba(251,146,60,.72);
  animation:checkinFailureDot 1.6s ease-in-out infinite;
}
.checkin-failure-pulse.pulse-a{left:15px;top:55px}
.checkin-failure-pulse.pulse-b{right:17px;top:30px;animation-delay:.42s}
.checkin-save-failure small{color:#c8885d}
.checkin-failure-note{
  margin:14px auto 0;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(251,146,60,.09);
  background:rgba(80,30,10,.12);
  color:#a98772;
  font-size:8.5px;
  line-height:1.5;
}
.checkin-failure-confirm{
  width:100% !important;
  min-height:44px !important;
  margin:0 !important;
  border-radius:13px !important;
  border:1px solid rgba(251,146,60,.20) !important;
  background:linear-gradient(180deg,#f59e0b,#ea580c) !important;
  color:#fff !important;
  font-weight:850 !important;
  font-size:11px !important;
  box-shadow:0 10px 24px rgba(234,88,12,.15) !important;
}

@keyframes checkinCorePulse{
  0%,100%{transform:scale(.96)}
  50%{transform:scale(1.06)}
}
@keyframes checkinOrbitA{to{transform:rotate(360deg)}}
@keyframes checkinOrbitB{to{transform:rotate(360deg)}}
@keyframes checkinOrbitC{to{transform:rotate(360deg)}}
@keyframes checkinProgressMove{
  0%{transform:translateX(-150%)}
  100%{transform:translateX(280%)}
}
@keyframes checkinSuccessPop{
  0%{opacity:0;transform:scale(.72)}
  65%{opacity:1;transform:scale(1.08)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes checkinFailurePop{
  0%{opacity:0;transform:scale(.74) rotate(-8deg)}
  70%{opacity:1;transform:scale(1.06) rotate(2deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes checkinFailureDot{
  0%,100%{opacity:.22;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.35)}
}
@keyframes checkinBurst{
  0%,100%{opacity:.18;transform:scale(.7)}
  50%{opacity:1;transform:scale(1.35)}
}
/* ==== css/50-trip-detail-booking-payment.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   TRIP DETAIL MODAL (bottom sheet)
   ============================================================ */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-bg.show { display: flex; }
.modal-sheet {
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  background-color: var(--bg2);
  background-size: cover;
  background-position: center;
  border-radius: 28px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 32px;
  animation: fadeIn .3s ease;
  position: relative;
}
@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.close-pill { display: block; width: 40px; height: 4px; background: rgba(255, 255, 255, .2); border-radius: 4px; margin: 14px auto 0; }
.modal-img { width: 100%; height: 220px; object-fit: cover; display: block; border-radius: 28px 28px 0 0; }
.modal-body {
  padding: 18px;
  background: rgba(0,0,0,.60);
  margin-top: -24px;
  margin-bottom: -32px;
  border-radius: 0 0 28px 28px;
  position: relative;
  z-index: 5;
}
.modal-body h2 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px; margin-top: 26px; }
.modal-date { font-size: 13px; color: var(--blue); margin-bottom: 14px; }
.modal-price {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(16, 185, 129, .15), rgba(56, 189, 248, .1));
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.modal-payment { background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .2); border-radius: 14px; padding: 10px 14px; font-size: 12px; color: #fbbf24; margin-bottom: 16px; }
.modal-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; background: rgba(255, 255, 255, .025); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.modal-card { background: transparent; border: none; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 0; padding: 13px 15px; }
.modal-card:nth-child(2n) { border-right: none; }
.modal-card:nth-child(3), .modal-card:nth-child(4) { border-bottom: none; }
.modal-card span { display: block; font-size: 11px; color: var(--sub); margin-bottom: 6px; }
.modal-card strong { font-size: 14px; color: #fff; }
.modal-pickup { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.modal-pickup-item { display: inline-flex; align-items: center; gap: 6px; background: rgba(56, 189, 248, .08); border: 1px solid rgba(56, 189, 248, .2); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; color: #cbe9fb; font-weight: 600; }
.modal-hl {
  background: linear-gradient(180deg, rgba(56, 189, 248, .08), rgba(56, 189, 248, .03));
  border: 1px solid rgba(56, 189, 248, .12);
  border-radius: 16px;
  padding: 14px;
  font-size: 13px;
  line-height: 1.7;
  color: #e2e8f0;
  margin-bottom: 16px;
  white-space: pre-line;
}
.modal-seat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.avail { font-size: 13px; font-weight: 700; }
.avail.ok { color: var(--green); }
.avail.low { color: var(--yellow); }
.avail.full { color: var(--red); }

/* "จองที่นั่ง" CTA button — shared by the trip-detail modal (this is the
   effective/final style; it originally existed twice in the source and the
   later rule always won in the cascade, so it's merged into one here). */
.btn-book {
  display: block;
  width: 85%;
  max-width: 320px;
  height: 48px;
  margin: -24px auto 0 auto;
  border: none;
  border-radius: 12px;
  background: linear-gradient(145deg, #ff4747, #d91f2f);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 71, 71, 0.25);
  animation: hb 0.9s infinite;
  position: relative;
  z-index: 10;
}
.btn-book:disabled { background: #1e293b; color: #475569; box-shadow: none; cursor: not-allowed; animation: none; }

/* ============================================================
   BOOKING PAGE
   ============================================================ */
#bookingPage2 { position: fixed; inset: 0; z-index: 20000; background: var(--bg); overflow-y: auto; display: none; }
#bookingPage2.show { display: block; animation: fadeUp .25s ease; }
.bk-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(6, 11, 19, .92);
  backdrop-filter: blur(14px);
  z-index: 10;
}
.btn-back { background: none; border: none; color: var(--blue); font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.bk-body { max-width: 480px; margin: 0 auto; padding: 16px 16px 120px; }

.ig { margin-bottom: 16px; }
.ig label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--sub); font-weight: 500; margin-bottom: 8px; }
.ig input {
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  padding: 0 16px;
  outline: none;
  transition: all 0.3s ease;
}
.ig input:disabled { color: var(--muted); cursor: not-allowed; }
.ig input:focus { border-color: var(--blue); background: rgba(56, 189, 248, 0.05); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1); }

.form-sec { font-size: 14px; color: var(--blue); font-weight: 700; margin: 24px 0 16px; display: flex; align-items: center; gap: 8px; }

/* หัวข้อฟอร์มกรอกข้อมูลผู้จอง แบบใหม่ */
.form-sec-header { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; }
.form-sec-ico {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  box-shadow: 0 4px 14px rgba(2, 132, 199, .35);
}
.form-sec-title { font-size: 15px; font-weight: 800; color: #fff; }
.form-sec-sub { font-size: 11px; color: var(--sub); margin-top: 2px; }

/* การ์ดกรอกข้อมูลผู้โดยสารแยกตามเบาะ — จองหลายที่นั่งพร้อมกันได้ */
.seat-form-card {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 16px 4px;
  margin-bottom: 14px;
}
.seat-form-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.seat-form-badge {
  min-width: 46px;
  height: 30px;
  padding: 0 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--blue2), var(--blue));
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.seat-form-card-hdr span { font-size: 12.5px; color: var(--sub); font-weight: 600; }

/* เลือกจุดขึ้นรถ — ใช้ dropdown เพื่อรองรับตัวเลือกหลายจุดแบบไม่กินพื้นที่ */
.pickup-select {
  width: 100%;
  height: 48px;
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  padding: 0 40px 0 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.pickup-select:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1); }
.pickup-select option { background: var(--bg3); color: #fff; }
.pickup-other-input {
  width: 100%;
  height: 46px;
  margin-top: 10px;
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 12px;
  color: #fff;
  font-size: 13.5px;
  font-family: inherit;
  padding: 0 14px;
  outline: none;
}
.pickup-other-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1); }
#formFieldsBox2 {
  display: none;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 20px;
  backdrop-filter: blur(10px);
  margin-top: 10px;
}
#formFieldsBox2.show { display: block; animation: fadeUp .3s ease; }

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(6, 11, 19, .88);
  backdrop-filter: blur(16px);
  padding: 14px 16px 28px;
  border-top: 1px solid var(--border);
  z-index: 20;
  display: flex;
  justify-content: center;
}
.btn-confirm {
  width: 100%;
  max-width: 440px;
  height: 50px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  background: #131c2a;
  color: #334155;
  transition: .25s;
}
.btn-confirm.ready { background: linear-gradient(135deg, var(--blue2), var(--blue)); color: #fff; box-shadow: 0 6px 20px rgba(2, 132, 199, .3); }

/* ============================================================
   SEAT MAP / VAN GRID
   ============================================================ */
.van-block { margin-bottom: 20px; }
.van-block-title {
  font-size: 14px;
  color: var(--blue);
  margin-bottom: 8px;
  font-weight: 700;
  text-align: center;
  background: linear-gradient(180deg, rgba(10, 30, 50, .95), rgba(8, 20, 35, .98));
  padding: 12px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.van-grid-header { display: flex; justify-content: space-between; padding: 0 10px; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: var(--blue); opacity: .88; }
.van-grid-seats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(16, 28, 45, .98), rgba(10, 18, 32, .98));
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px rgba(0, 0, 0, .22);
  position: relative;
  overflow: hidden;
}
.van-grid-seats::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at top, rgba(56, 189, 248, .06), transparent 60%); pointer-events: none; }

.seat { aspect-ratio: 1 / 1; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; transition: .18s; transform: scale(.94); cursor: pointer; overflow: hidden; }
.seat span:first-child { font-size: 9px; margin-bottom: 2px; opacity: .95; }
.seat span:last-child { font-size: 15px; line-height: 1.1; }

.seat.driver { background: linear-gradient(145deg, #243247, #1a2435); color: #5f718b; border: 2px dashed rgba(255, 255, 255, .14); cursor: default; pointer-events: none; }
.seat.spacer { visibility: hidden; pointer-events: none; }
.seat.empty { background: linear-gradient(145deg, #19c37d, #13a86c); color: #fff; box-shadow: 0 5px 0 #0d7f52, 0 8px 14px rgba(25, 195, 125, .14); }
.seat.booked { background: linear-gradient(145deg, #ff4747, #d91f2f); color: #fff; box-shadow: 0 5px 0 #a91320, 0 8px 14px rgba(255, 71, 71, .14); cursor: not-allowed; }
.seat.selected { background: linear-gradient(145deg, #ffd84d, #f7b500); color: #000; transform: scale(.98); box-shadow: 0 0 12px rgba(255, 216, 77, .45), 0 5px 0 #b57b00; animation: hb .9s infinite; }
.seat.hidden-seat { background: linear-gradient(145deg, rgba(18, 28, 40, .96), rgba(8, 12, 20, .98)); color: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .03); pointer-events: none; }

/* สวิตช์เปิด/ปิดตู้ 3 แบบ pill ทันสมัย (แทนที่ checkbox ธรรมดา) */
.van3-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex-shrink: 0; }
.van3-switch input { opacity: 0; width: 0; height: 0; }
.van3-switch-slider { position: absolute; inset: 0; background: #475569; transition: background .25s ease; border-radius: 20px; cursor: pointer; }
.van3-switch-slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; bottom: 3px; background: #fff; transition: transform .25s ease; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.van3-switch input:checked + .van3-switch-slider { background: #19c37d; }
.van3-switch input:checked + .van3-switch-slider::before { transform: translateX(16px); }

/* เบาะที่ "มีคนอื่นกำลังเลือกอยู่" (locked ชั่วคราวโดยยังไม่จองจริง) — สีส้ม */
.seat.locking {
  background: linear-gradient(145deg, #fb923c, #ea580c);
  color: #fff;
  box-shadow: 0 5px 0 #9a3412, 0 8px 14px rgba(249, 115, 22, .22);
  cursor: not-allowed;
  pointer-events: none;
  animation: lockingPulse 1.2s infinite;
}
@keyframes lockingPulse {
  0%, 100% { transform: scale(.94); }
  50% { transform: scale(.98); box-shadow: 0 5px 0 #9a3412, 0 0 17px rgba(249, 115, 22, .5); }
}

@keyframes hb { 0%, 100% { transform: scale(.98); } 50% { transform: scale(1.02); } }

/* ไฮไลต์เบาะเมื่อกดเข้ามาดูจากประวัติการจอง ให้หาที่นั่งตัวเองเจอไว */
.seat.seat-highlight-pulse {
  box-shadow: 0 0 0 3px #38bdf8, 0 0 20px rgba(56, 189, 248, .8);
  animation: seatHighlightPulse 1s ease-in-out infinite;
  z-index: 2;
}
@keyframes seatHighlightPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.seat-legend { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 20px; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, rgba(12, 21, 36, .95), rgba(6, 11, 19, .98)); border: 1px solid var(--border); flex-wrap: wrap; }

/* หน้างาน — สำหรับคนไปเอง ไม่ใช้ที่นั่งรถตู้ ไม่มีสถานะว่าง/เต็ม แยกจากระบบเบาะทั้งหมด */
.onsite-note { text-align: center; font-size: 11px; color: var(--muted); margin: -4px 0 10px; line-height: 1.5; }
.onsite-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(16, 28, 45, .98), rgba(10, 18, 32, .98));
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .03);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px rgba(0, 0, 0, .22);
}
.onsite-slot {
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
  transform: scale(.94);
  transition: .18s;
  background: linear-gradient(145deg, #2b3a55, #1c2637);
  color: #cbd5e1;
  box-shadow: 0 5px 0 #101825, 0 8px 14px rgba(0, 0, 0, .18);
}
.onsite-slot span:first-child { font-size: 8.5px; margin-bottom: 2px; opacity: .8; }
.onsite-slot span:last-child { font-size: 16px; line-height: 1.1; }
.onsite-slot.selected {
  background: linear-gradient(145deg, #ffd84d, #f7b500);
  color: #000;
  transform: scale(.98);
  box-shadow: 0 0 12px rgba(255, 216, 77, .45), 0 5px 0 #b57b00;
  animation: hb .9s infinite;
}
.onsite-slot.booked { background: linear-gradient(145deg, #ff4747, #d91f2f); color: #fff; box-shadow: 0 5px 0 #a91320, 0 8px 14px rgba(255, 71, 71, .14); cursor: not-allowed; }
.onsite-slot.locking {
  background: linear-gradient(145deg, #fb923c, #ea580c);
  color: #fff;
  box-shadow: 0 5px 0 #9a3412, 0 8px 14px rgba(249, 115, 22, .22);
  cursor: not-allowed;
  pointer-events: none;
  animation: lockingPulse 1.2s infinite;
}
.leg-item { font-size: 12px; font-weight: 600; color: #e2e8f0; }
.seat-map-img { width: 100%; border-radius: 12px; margin-bottom: 8px; border: 1px solid var(--border); }

/* ============================================================
   SEAT LOCK COUNTDOWN (5-นาที ก่อนถูกปลดล็อกอัตโนมัติ)
   ============================================================ */
.seat-lock-timer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 16px;
  padding: 13px 15px;
  border-radius: 15px;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .28);
}
.seat-lock-timer strong { display: block; color: #fbbf24; font-size: 13px; }
.seat-lock-timer p { color: var(--sub); font-size: 10px; margin-top: 3px; }
.seat-lock-time { min-width: 68px; padding: 7px 9px; border-radius: 10px; background: rgba(245, 158, 11, .14); color: #fbbf24; font-size: 20px; font-weight: 800; text-align: center; }
.seat-lock-time.warning { color: #fff; background: rgba(239, 68, 68, .8); animation: lockWarning .8s infinite; }
@keyframes lockWarning { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ============================================================
   PAYMENT MODAL
   ============================================================ */
.pay-modal {
  display: none;
  position: fixed;
  z-index: 21000;
  inset: 0;
  background: rgba(4, 7, 12, .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 16px;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.pay-modal.show { display: flex; }
.pay-box {
  background: var(--bg2);
  width: 100%;
  max-width: 360px;
  border-radius: 20px;
  padding: 24px 20px;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
  position: relative;
  margin: auto;
  height: auto;
  max-height: none;
}
.pay-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: none; color: #fff; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pay-box h3 { font-size: 22px; color: var(--yellow); margin-bottom: 4px; }
.pay-box .sub { font-size: 13px; color: var(--red); }
.qr-img { width: 180px; border-radius: 12px; border: 4px solid #fff; margin: 16px auto; display: block; box-shadow: 0 6px 15px rgba(0, 0, 0, .3); }
.deposit-summary-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, .14), rgba(56, 189, 248, .06));
  border: 1.5px dashed rgba(16, 185, 129, .5);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 0 0 16px;
  text-align: center;
}
.deposit-summary-box .ds-label { font-size: 11px; color: var(--sub); font-weight: 600; letter-spacing: .3px; margin-bottom: 4px; }
.deposit-summary-box .ds-calc { font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
.deposit-summary-box .ds-total { font-size: 26px; font-weight: 900; color: #34e89e; line-height: 1.2; }

/* ทางลัดชำระเงิน — ใช้เฉพาะหน้าชำระค่ามัดจำ */
#payModal .payment-main-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin-top: 22px;
  white-space: nowrap;
}
#payModal .payment-main-title > span:first-child {
  flex: 0 0 auto;
  font-size: .92em;
  line-height: 1;
}
#payModal .payment-main-title > span:last-child {
  min-width: 0;
  line-height: 1.3;
}
.bank-shortcut-box {
  margin: 0 0 16px;
  padding: 13px 12px 11px;
  border: 1px solid rgba(56, 189, 248, .26);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(7, 28, 42, .88), rgba(8, 19, 32, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 0 18px rgba(14, 165, 233, .07);
  text-align: left;
  overflow: hidden;
}
.bank-shortcut-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
}
.bank-shortcut-heading > div { min-width: 0; }
.bank-shortcut-heading strong {
  display: block;
  color: #fff;
  font-size: 12.5px;
  line-height: 1.45;
}
.bank-shortcut-heading span {
  display: block;
  color: #94a3b8;
  font-size: 9.5px;
  line-height: 1.45;
  margin-top: 2px;
}
.save-payment-qr {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(52, 211, 153, .48);
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  font: 700 10.5px/1 inherit;
  cursor: pointer;
  box-shadow: 0 0 12px rgba(16, 185, 129, .09);
}
.save-payment-qr:active { transform: scale(.96); }
.bank-shortcut-list {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1px 1px 5px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.bank-shortcut-list::-webkit-scrollbar { display: none; }
.bank-shortcut-item {
  flex: 0 0 55px;
  width: 55px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #e2e8f0;
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
}
.bank-shortcut-item .bank-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 5px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 15px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .24), 0 0 0 rgba(56, 189, 248, 0);
  transition: transform .16s ease, box-shadow .16s ease;
}
.bank-shortcut-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.bank-shortcut-item small {
  display: block;
  overflow: hidden;
  color: #cbd5e1;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bank-shortcut-item:active .bank-logo {
  transform: scale(.92);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28), 0 0 14px rgba(56, 189, 248, .24);
}
@media (max-width: 370px) {
  #payModal .payment-main-title { gap: 6px !important; font-size: 19px !important; }
  .bank-shortcut-heading { align-items: flex-start; }
  .save-payment-qr { padding: 0 9px; }
}
.chk-row { display: flex; align-items: flex-start; gap: 10px; text-align: left; color: #cbd5e1; font-size: 12px; margin: 16px 0; background: rgba(255, 255, 255, .02); padding: 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .04); }
.chk-row input { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.btn-pay-ok { width: 100%; height: 48px; border-radius: 10px; border: none; background: var(--green); color: #fff; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; }
.btn-pay-ok:disabled { background: #1e293b; color: #475569; cursor: not-allowed; }

/* Slip upload */
.slip-upload { margin: 14px 0 16px; text-align: left; }
.slip-title { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.slip-title .req { color: var(--red); }
.slip-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px;
  background: var(--bg3);
  border: 1.5px dashed rgba(255, 255, 255, .14);
  border-radius: 14px;
  cursor: pointer;
  transition: .2s;
}
.slip-drop.has-file { border-style: solid; border-color: rgba(16, 185, 129, .5); background: rgba(16, 185, 129, .07); }
.slip-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.slip-ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(56, 189, 248, .12); display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; }
.slip-drop.has-file .slip-ico { background: rgba(16, 185, 129, .15); }
.slip-txt { flex: 1; min-width: 0; }
.slip-name { color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slip-sub { color: var(--muted); font-size: 10px; margin-top: 3px; }
.slip-preview { display: none; width: 100%; max-height: 200px; object-fit: contain; margin-top: 10px; border-radius: 12px; border: 1px solid var(--border); background: #05080e; }
.slip-preview.show { display: block; }

/* ============================================================
   SUCCESS PAGE
   ============================================================ */
#successPage2 {
  position: fixed; inset: 0; z-index: 20000; display: none; overflow-y: auto;
  background:
    linear-gradient(180deg, rgba(6, 11, 19, .88), rgba(6, 11, 19, .97)),
    url('/ximg.php?f=1441974231531-c6227db76b6e-900.jpg') center/cover no-repeat;
}
#successPage2.show { display: block; animation: fadeUp .3s ease; }
.succ-body { max-width: 440px; margin: 0 auto; padding: 18px 20px calc(90px + env(safe-area-inset-bottom)); text-align: center; }
.succ-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(6, 11, 19, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  z-index: 1200;
  display: flex;
  justify-content: center;
}
.succ-line-btn {
  width: 100%;
  max-width: 400px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #06C755;
  color: #fff;
  padding: 13px;
  border-radius: 12px;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(6, 199, 85, .35);
}
.succ-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--green); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; margin: 0 auto 10px; box-shadow: 0 0 18px rgba(16, 185, 129, .45); }
.receipt {
  position: relative;
  background: linear-gradient(180deg, #fffdf7, #fbf5e6);
  color: #1e293b;
  border-radius: 20px;
  padding: 16px 18px 14px;
  text-align: left;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .4), 0 0 0 1px rgba(212, 175, 55, .3);
  margin: 10px 0;
  overflow: hidden;
}
.receipt::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f6e2a0, #c9971f, #f6e2a0);
}
.r-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding-bottom: 7px; font-size: 12.5px; font-weight: 500; border-bottom: 1px dashed #e5ddc4; }
.r-row:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.r-row span { color: #9a8a68; font-weight: 400; min-width: 60px; }
.r-seat-box {
  background: linear-gradient(160deg, #fffcf2, #faf1d8);
  border: 1.5px dashed #c9971f;
  padding: 10px 12px 8px;
  border-radius: 14px;
  text-align: center;
  margin-top: 10px;
}
.r-seat-box > p { font-size: 10px; color: #a16207; font-weight: 700; letter-spacing: .4px; margin-bottom: 6px; text-transform: uppercase; }
.r-seat-split { display: flex; align-items: center; justify-content: center; gap: 20px; }
.r-seat-split.single { gap: 0; }
.r-seat-part { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.r-seat-label { font-size: 10.5px; color: #92795a; font-weight: 700; letter-spacing: .2px; }
.r-seat-value { font-size: 26px; font-weight: 900; color: #15803d; line-height: 1; }
.r-seat-divider { width: 1px; height: 34px; background: linear-gradient(180deg, transparent, #c9971f, transparent); }
.btn-home { width: 100%; height: 46px; border-radius: 12px; border: none; background: linear-gradient(135deg, var(--blue2), var(--blue)); color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: 6px; }

/* SweetAlert2 ใช้ z-index เริ่มต้นแค่ ~1060 ซึ่งต่ำกว่าป็อบอัพกำหนดเองของเรา (ปฏิทิน/ตำแหน่งรถตู้/ทริปเดือนนี้ ที่ 9999)
   ทำให้ป็อบอัพ Swal ที่เปิดซ้อนจากข้างในป็อบอัพเหล่านั้น (เช่น เลือกรอบทริป) ไปโผล่อยู่ข้างหลังแทน ต้องบังคับให้สูงกว่าเสมอ */
.swal2-container { z-index: 40000 !important; }

/* ป๊อปอัพยืนยันเลือกที่นั่ง (SweetAlert) — ให้ดูพรีเมียมเข้าธีมแอป */
.seat-confirm-popup {
  border-radius: 26px !important;
  border: 1px solid rgba(56, 189, 248, .25) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(2, 132, 199, .12) !important;
}

/* ================================================================
   PAYMENT CHOICE MODAL — REDESIGN ONLY
   เปลี่ยนเฉพาะหน้าตา ไม่แตะ logic / onclick / amount / payment flow
   ================================================================ */
#paymentChoiceModal{
  background:rgba(2,8,15,.72)!important;
  backdrop-filter:blur(9px)!important;
  -webkit-backdrop-filter:blur(9px)!important;
  padding:18px!important;
  align-items:center!important;
}

#paymentChoiceModal .pay-box{
  position:relative!important;
  overflow:hidden!important;
  width:min(350px,calc(100vw - 36px))!important;
  max-width:350px!important;
  padding:26px 18px 18px!important;
  border-radius:24px!important;
  border:1px solid rgba(125,211,252,.13)!important;
  background:
    linear-gradient(180deg,rgba(7,16,27,.88),rgba(4,11,19,.97)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg') center/cover no-repeat!important;
  box-shadow:
    0 26px 74px rgba(0,0,0,.58),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
  animation:payChoicePopupIn .38s cubic-bezier(.18,.82,.22,1) both!important;
}

#paymentChoiceModal .pay-box::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(56,189,248,.08),transparent 31%),
    linear-gradient(180deg,rgba(4,12,21,.06),rgba(3,9,16,.48))!important;
}

#paymentChoiceModal .pay-x{
  z-index:5!important;
  top:11px!important;
  right:11px!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  border:1px solid rgba(148,163,184,.14)!important;
  background:rgba(10,18,29,.88)!important;
  color:#dce8f1!important;
  font-size:16px!important;
  box-shadow:0 7px 20px rgba(0,0,0,.28)!important;
  transition:transform .15s ease,background .15s ease!important;
}
#paymentChoiceModal .pay-x:active{
  transform:scale(.92)!important;
  background:rgba(16,28,43,.96)!important;
}

#paymentChoiceModal .pay-box h3{
  position:relative!important;
  z-index:1!important;
  margin:12px 32px 2px!important;
  color:#f5fbff!important;
  font-size:19px!important;
  line-height:1.2!important;
  font-weight:900!important;
}

#paymentChoiceModal .pay-box h3::before{
  content:'💳'!important;
  display:grid!important;
  place-items:center!important;
  width:58px!important;
  height:58px!important;
  margin:0 auto 12px!important;
  border-radius:19px!important;
  border:1px solid rgba(125,211,252,.16)!important;
  background:radial-gradient(circle,rgba(56,189,248,.13),rgba(8,47,73,.05))!important;
  box-shadow:
    0 0 0 9px rgba(56,189,248,.022),
    0 0 30px rgba(56,189,248,.08)!important;
  font-size:25px!important;
  animation:payChoiceIconFloat 2.1s ease-in-out infinite!important;
}

#paymentChoiceModal .pay-box .sub{
  position:relative!important;
  z-index:1!important;
  max-width:275px!important;
  margin:5px auto 15px!important;
  color:#7f93a7!important;
  font-size:10px!important;
  line-height:1.45!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"]{
  position:relative!important;
  z-index:1!important;
  gap:9px!important;
  margin-top:12px!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button{
  position:relative!important;
  overflow:hidden!important;
  min-height:104px!important;
  padding:13px 14px!important;
  border-radius:16px!important;
  border:1px solid rgba(148,163,184,.10)!important;
  background:linear-gradient(145deg,rgba(8,20,33,.82),rgba(5,15,25,.78))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  transition:transform .16s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
  animation:payChoiceCardIn .44s cubic-bezier(.2,.82,.2,1) both!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button:nth-child(2){
  animation-delay:.07s!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button::after{
  content:'›'!important;
  position:absolute!important;
  right:13px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(125,211,252,.12)!important;
  background:rgba(56,189,248,.05)!important;
  color:#7dd3fc!important;
  font-size:17px!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button:first-child{
  border-color:rgba(56,189,248,.17)!important;
  background:linear-gradient(145deg,rgba(5,37,59,.60),rgba(7,20,33,.82))!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button:last-child{
  border-color:rgba(34,197,94,.16)!important;
  background:linear-gradient(145deg,rgba(5,46,31,.42),rgba(7,20,33,.82))!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button:active{
  transform:scale(.985)!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button > div:first-child{
  margin-right:34px!important;
  margin-bottom:5px!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.1px!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button:first-child > div:first-child{
  color:#7dd3fc!important;
}
#paymentChoiceModal .pay-box > div[style*="display:flex"] > button:last-child > div:first-child{
  color:#4ade80!important;
}

#paymentChoiceModal #pcDepositAmount,
#paymentChoiceModal #pcFullAmount{
  margin-right:34px!important;
  color:#f4f8fb!important;
  font-size:23px!important;
  line-height:1.15!important;
  font-weight:950!important;
  letter-spacing:-.3px!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button > div:last-child{
  max-width:240px!important;
  margin-top:5px!important;
  margin-right:34px!important;
  color:#75899b!important;
  font-size:9px!important;
  line-height:1.4!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button::before{
  content:''!important;
  position:absolute!important;
  inset:auto 13px 0 13px!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.22),transparent)!important;
}

#paymentChoiceModal .pay-box > div[style*="display:flex"] > button:last-child::before{
  background:linear-gradient(90deg,transparent,rgba(74,222,128,.22),transparent)!important;
}

@keyframes payChoicePopupIn{
  from{opacity:0;transform:translateY(14px) scale(.95)}
  70%{transform:translateY(-2px) scale(1.01)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@keyframes payChoiceIconFloat{
  0%,100%{transform:translateY(1px) rotate(-2deg)}
  50%{transform:translateY(-4px) rotate(2deg)}
}

@keyframes payChoiceCardIn{
  from{opacity:0;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:430px){
  #paymentChoiceModal{
    padding:14px!important;
  }

  #paymentChoiceModal .pay-box{
    width:min(340px,calc(100vw - 28px))!important;
    max-width:340px!important;
    border-radius:22px!important;
    padding:24px 16px 16px!important;
  }

  #paymentChoiceModal .pay-box h3{
    font-size:18px!important;
  }

  #paymentChoiceModal .pay-box h3::before{
    width:54px!important;
    height:54px!important;
    border-radius:18px!important;
    font-size:23px!important;
  }

  #paymentChoiceModal .pay-box > div[style*="display:flex"] > button{
    min-height:98px!important;
  }
}

/* ================================================================
   PAYMENT PAGES — FOREST GLASS VISUAL ONLY
   ครอบเฉพาะ:
   - #payModal = มัดจำ / จ่ายเต็มจำนวน
   - #remainingPayModal = ชำระส่วนที่เหลือ
   ไม่แตะ logic / JS / onclick / upload / timer / API
   ================================================================ */
#payModal,
#remainingPayModal{
  background:
    linear-gradient(180deg,rgba(3,8,13,.72),rgba(3,8,13,.88)),
    url('/ximg.php?f=1448375240586-882707db888b-1200.jpg') center/cover fixed no-repeat!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

#payModal .pay-box,
#remainingPayModal .pay-box{
  background:
    linear-gradient(145deg,rgba(8,20,31,.82),rgba(6,15,25,.88)),
    url('/ximg.php?f=1448375240586-882707db888b-1200.jpg') center/cover no-repeat!important;
  border:1px solid rgba(125,211,252,.14)!important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.045)!important;
  backdrop-filter:blur(12px)!important;
  -webkit-backdrop-filter:blur(12px)!important;
}

#payModal .pay-box::before,
#remainingPayModal .pay-box::before{
  content:''!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  border-radius:inherit!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(56,189,248,.07),transparent 30%),
    linear-gradient(180deg,rgba(5,12,21,.10),rgba(3,9,16,.28))!important;
}

#payModal .pay-box > *,
#remainingPayModal .pay-box > *{
  position:relative!important;
  z-index:1!important;
}

/* กล่องยอดเงิน — โปร่งแสงแต่ยังอ่านชัด */
#payModal .deposit-summary-box,
#remainingPayModal .deposit-summary-box{
  background:linear-gradient(135deg,rgba(7,30,35,.64),rgba(8,26,38,.58))!important;
  border:1px solid rgba(52,211,153,.26)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* เวลาล็อกเบาะ / ข้อความแจ้งเตือน */
#payModal .chk-row,
#remainingPayModal .chk-row{
  background:rgba(7,17,28,.62)!important;
  border:1px solid rgba(148,163,184,.10)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}

/* แนบสลิป */
#payModal .slip-drop,
#remainingPayModal .slip-drop{
  background:rgba(8,20,32,.66)!important;
  border-color:rgba(148,163,184,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

#payModal .slip-drop.has-file,
#remainingPayModal .slip-drop.has-file{
  background:rgba(8,42,32,.54)!important;
  border-color:rgba(52,211,153,.34)!important;
}

/* QR ยังต้องขาวชัดเพื่อสแกนได้ดี */
#payModal .qr-img,
#remainingPayModal .qr-img{
  background:#fff!important;
  box-shadow:
    0 12px 30px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,255,255,.15)!important;
}

/* ปุ่มปิดให้เข้าธีม */
#payModal .pay-x,
#remainingPayModal .pay-x{
  background:rgba(7,16,27,.72)!important;
  border:1px solid rgba(148,163,184,.13)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

@media(max-width:430px){
  #payModal,
  #remainingPayModal{
    background:
      linear-gradient(180deg,rgba(3,8,13,.76),rgba(3,8,13,.90)),
      url('/ximg.php?f=1448375240586-882707db888b-1200.jpg') center/cover no-repeat!important;
  }
}

/* ================================================================
   QR PAYMENT HEADER ALIGNMENT — VISUAL ONLY
   แก้เฉพาะตำแหน่งส่วนหัวของหน้าชำระเงิน
   ================================================================ */

/* ให้กล่องเป็น reference สำหรับ absolute header controls */
#payModal .pay-box,
#remainingPayModal .pay-box{
  position:relative!important;
  padding-top:72px!important;
}

/* ขั้นตอนที่ 3: จัดกึ่งกลางบนสุด */
#payModal .pay-box > .chip{
  position:absolute!important;
  top:16px!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  z-index:6!important;
  white-space:nowrap!important;
  font-size:10.5px!important;
  line-height:1!important;
  padding:8px 12px!important;
  border-radius:999px!important;
  background:rgba(5,94,83,.72)!important;
  border:1px solid rgba(45,212,191,.16)!important;
  color:#6ee7c7!important;
  box-shadow:0 6px 18px rgba(0,0,0,.18)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}

/* ปุ่มปิด: มุมขวาบนเสมอ */
#payModal .pay-x,
#remainingPayModal .pay-x{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  margin:0!important;
  z-index:8!important;
  width:36px!important;
  height:36px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
}

/* ขยับหัวข้อขึ้นและจัด center */
#payModal .pay-box > h3,
#remainingPayModal .pay-box > h3{
  margin:0 42px 5px!important;
  text-align:center!important;
  line-height:1.22!important;
}

/* subtitle ไม่ให้กินพื้นที่บนมากเกิน */
#payModal .pay-box > .sub,
#remainingPayModal .pay-box > .sub{
  margin:0 auto 14px!important;
  text-align:center!important;
  max-width:300px!important;
  line-height:1.35!important;
}

/* QR ขยับขึ้นเล็กน้อยให้ composition กระชับ */
#payModal .qr-img,
#remainingPayModal .qr-img{
  margin-top:4px!important;
}

/* remaining ไม่มี step chip จึงไม่ต้องเว้นสูงเท่า pay modal */
#remainingPayModal .pay-box{
  padding-top:58px!important;
}

@media(max-width:430px){
  #payModal .pay-box{
    padding-top:68px!important;
  }

  #remainingPayModal .pay-box{
    padding-top:54px!important;
  }

  #payModal .pay-box > .chip{
    top:14px!important;
    font-size:10px!important;
    padding:7px 11px!important;
  }

  #payModal .pay-x,
  #remainingPayModal .pay-x{
    top:12px!important;
    right:12px!important;
    width:34px!important;
    height:34px!important;
  }

  #payModal .pay-box > h3,
  #remainingPayModal .pay-box > h3{
    margin-left:32px!important;
    margin-right:32px!important;
  }
}
/* ==== css/60-advice-equipment-review-floatadmin.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   DRAWER (สาระแนะนำ)
   ============================================================ */
.drawer {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  width: min(92vw, 430px);
  max-width: 430px;
  height: auto;
  max-height: 78vh;
  z-index: 600;

  padding: 0;
  overflow: hidden;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, -46%) scale(.94);

  border: 1px solid rgba(125, 211, 252, .20);
  border-radius: 24px;

  background:
    linear-gradient(180deg, rgba(4, 12, 19, .78), rgba(3, 10, 16, .94)),
    url('/ximg.php?f=1448375240586-882707db888b-1200.jpg')
      center center / cover no-repeat;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, .62),
    inset 0 1px 0 rgba(255, 255, 255, .04);

  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(.2,.85,.2,1),
    visibility 0s linear .24s;
}
.drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity .18s ease,
    transform .24s cubic-bezier(.2,.85,.2,1);
}

/* ชั้นทึบด้านหลัง popup */
.ov {
  position: fixed;
  inset: 0;
  z-index: 599;
  display: none;
  background: rgba(1, 5, 10, .76);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ov.show {
  display: block;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: tnhOvFadeIn .18s ease both;
}
@keyframes tnhOvFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* หัว popup สาระแนะนำ */
.drawer-popup-head {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 62px;
  display: flex;
  align-items: center;
  padding: 16px 62px 14px 17px;
  border-bottom: 1px solid rgba(148,163,184,.11);
  background: linear-gradient(180deg, rgba(3,10,17,.96), rgba(4,13,21,.82));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.drawer-popup-head h3 {
  margin: 0 !important;
  color: #fbbf24 !important;
  font-size: 15px !important;
  line-height: 1.3;
}
.drawer-popup-close {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(148,163,184,.20);
  border-radius: 13px;
  background: rgba(8,18,30,.82);
  color: #e5edf7;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.26);
  transition: transform .14s ease, background .18s ease, border-color .18s ease;
}
.drawer-popup-close:active { transform: scale(.90); }
.drawer-popup-close:hover {
  border-color: rgba(125,211,252,.38);
  background: rgba(11,27,43,.94);
}
.drawer-popup-body {
  max-height: calc(78vh - 62px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 15px 15px 20px;
  background: linear-gradient(180deg, rgba(4,12,19,.16), rgba(3,10,16,.42));
}
.drawer-popup-body::-webkit-scrollbar { width: 5px; }
.drawer-popup-body::-webkit-scrollbar-thumb {
  background: rgba(125,211,252,.22);
  border-radius: 99px;
}
@media (max-width: 480px) {
  .drawer {
    width: calc(100vw - 28px);
    max-height: 80vh;
    border-radius: 22px;
  }
  .drawer-popup-body { max-height: calc(80vh - 62px); }
}
.info-block { background: rgba(255, 255, 255, .02); padding: 12px; border-radius: 10px; margin-bottom: 8px; border-left: 3px solid var(--yellow); font-size: 12px; line-height: 1.5; }
.mem-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
.mem-grid img { width: 100%; border-radius: 12px; border: 1px solid var(--border); }

/* ============================================================
   EQUIPMENT RENTAL PAGE (เช่าอุปกรณ์)
   ============================================================ */
#equipPage { position: fixed; inset: 0; z-index: 950; background: var(--bg); overflow-y: auto; display: none; }
#equipPage.show { display: block; animation: fadeUp .25s ease; }

.eq-sec-title { font-size: 14px; color: var(--blue); font-weight: 700; margin: 22px 0 12px; display: flex; align-items: center; gap: 8px; }

.eq-trip-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: .15s;
}
.eq-trip-card.selected { border-color: var(--blue); background: rgba(56, 189, 248, .08); }
.eq-trip-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--muted); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.eq-trip-card.selected .eq-trip-radio { border-color: var(--blue); }
.eq-trip-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); display: none; }
.eq-trip-card.selected .eq-trip-radio::after { display: block; }
.eq-trip-info h4 { font-size: 13px; color: #fff; font-weight: 700; }
.eq-trip-info p { font-size: 11px; color: var(--sub); margin-top: 2px; }

.eq-item-card { display: flex; gap: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 12px; margin-bottom: 12px; }
.eq-item-img { width: 74px; height: 74px; border-radius: 14px; overflow: hidden; flex-shrink: 0; background: #fff; display: flex; align-items: center; justify-content: center; }
.eq-item-img img { width: 100%; height: 100%; object-fit: contain; }
.eq-item-info { flex: 1; min-width: 0; }
.eq-item-info h4 { font-size: 14px; color: #fff; font-weight: 700; }
.eq-item-info p.model { font-size: 11px; color: var(--sub); margin-top: 2px; }
.eq-item-info p.price { font-size: 12px; color: var(--blue); font-weight: 700; margin-top: 4px; }
.eq-stepper { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.eq-step-btn { width: 30px; height: 30px; border-radius: 10px; border: none; background: var(--bg3); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.eq-step-val { min-width: 22px; text-align: center; font-size: 15px; font-weight: 800; color: #fff; }

.eq-summary-card {
  background: linear-gradient(180deg, rgba(56, 189, 248, .1), rgba(56, 189, 248, .03));
  border: 1px solid rgba(56, 189, 248, .18);
  border-radius: 18px;
  padding: 14px 16px;
  margin: 18px 0 100px;
}
.eq-summary-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--sub); padding: 4px 0; }
.eq-summary-row.total { font-size: 15px; font-weight: 800; color: #fff; border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; }
.eq-summary-row.total span:last-child { color: var(--blue); }

.eq-note { font-size: 11px; color: #fbbf24; background: rgba(245, 158, 11, .08); border: 1px solid rgba(245, 158, 11, .25); border-radius: 12px; padding: 10px 12px; margin-top: 10px; line-height: 1.6; }

/* ใบเสร็จค่าเช่าอุปกรณ์ */
#equipReceiptPage { position: fixed; inset: 0; z-index: 1150; background: var(--bg); display: none; overflow-y: auto; }
#equipReceiptPage.show { display: block; animation: fadeUp .3s ease; }
.r-item-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed #e2e8f0; color: #334155; }
.r-item-row:last-of-type { border-bottom: none; }
.r-total-row { display: flex; justify-content: space-between; font-size: 16px; font-weight: 800; color: #15803d; padding-top: 10px; margin-top: 6px; }

/* ============================================================
   REVIEW PAGE (รีวิว & แชร์ทริป)
   ============================================================ */
#reviewPage { position: fixed; inset: 0; z-index: 960; background: var(--bg); overflow-y: auto; display: none; }
#reviewPage.show { display: block; animation: fadeUp .25s ease; }

.review-summary-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(245, 158, 11, .14), rgba(245, 158, 11, .04));
  border: 1px solid rgba(245, 158, 11, .28);
  border-radius: 20px;
  padding: 22px;
  margin-bottom: 18px;
}
.review-summary-card .avg { font-size: 42px; font-weight: 900; color: #f7b500; line-height: 1; }
.review-summary-card .stars { font-size: 20px; margin: 6px 0; letter-spacing: 2px; color: #f7b500; }
.review-summary-card .count { font-size: 12px; color: var(--sub); }

.star-picker { text-align: center; font-size: 36px; letter-spacing: 8px; margin: 12px 0 6px; }
.star-picker span { cursor: pointer; color: #475569; transition: color .15s, transform .1s; display: inline-block; }
.star-picker span:active { transform: scale(1.15); }

.review-card { background: var(--bg2); border: 1px solid var(--border); border-radius: 18px; padding: 14px; margin-bottom: 12px; }
.review-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 8px; }
.review-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--blue2), var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-name { font-size: 13px; font-weight: 700; color: #fff; }
.review-date { font-size: 10px; color: var(--muted); }
.review-stars { color: #f7b500; font-size: 14px; flex-shrink: 0; white-space: nowrap; }
.review-comment { font-size: 13px; color: #e2e8f0; line-height: 1.65; }
.review-photo { width: 100%; border-radius: 12px; max-height: 280px; object-fit: cover; margin-top: 10px; }

.review-actions { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.review-action-btn { display: flex; align-items: center; gap: 5px; background: transparent; border: none; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 10px; cursor: pointer; transition: .15s; }
.review-action-btn:active { transform: scale(.94); }
.review-action-btn.liked { color: #f43f5e; }
.review-action-btn.liked .review-like-ico { animation: reviewLikePop .35s ease; }
.review-action-btn.funny { color: #f59e0b; }
.review-action-btn.funny .review-like-ico { animation: reviewLikePop .35s ease; }
@keyframes reviewLikePop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.review-comments-box { display: none; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.review-comments-box.show { display: block; }
.review-comment-item { display: flex; gap: 8px; margin-bottom: 10px; }
.review-comment-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--blue2), var(--blue)); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.review-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-comment-bubble { background: rgba(255,255,255,.04); border-radius: 12px; padding: 8px 12px; flex: 1; min-width: 0; }
.review-comment-bubble .rc-name { font-size: 11.5px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.review-comment-bubble .rc-text { font-size: 12.5px; color: #cbd5e1; line-height: 1.5; overflow-wrap: anywhere; }
.review-comment-input-row { display: flex; gap: 8px; margin-top: 4px; }
.review-comment-input-row input { flex: 1; background: var(--bg3); border: 1px solid var(--border); border-radius: 20px; padding: 9px 14px; color: #fff; font-size: 12.5px; font-family: inherit; }
.review-comment-input-row input:focus { outline: none; border-color: var(--blue); }
.review-comment-send-btn { background: linear-gradient(135deg, var(--blue2), var(--blue)); border: none; color: #fff; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; }
.review-comment-send-btn:disabled { opacity: .5; cursor: default; }

/* ============================================================
   FLOATING ADMIN TAB — แถบลอยจางๆ ริมจอ กดแล้วค่อยกางเป็นปุ่ม
   ============================================================ */
.admin-tab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 9px;
  background: rgba(56, 189, 248, .1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(56, 189, 248, .18);
  border-right: none;
  border-radius: 16px 0 0 16px;
  cursor: pointer;
  opacity: .6;
  transition: opacity .25s ease, padding .25s ease, background .25s ease;
  overflow: hidden;
  white-space: nowrap;
}
.admin-tab:active { opacity: .8; }
.admin-tab .admin-tab-dots { font-size: 13px; color: var(--blue); letter-spacing: -1px; flex-shrink: 0; }
.admin-tab .admin-tab-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--blue);
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width .25s ease, opacity .2s ease .05s;
}
.admin-tab.expanded {
  opacity: 1;
  padding: 0 14px 0 10px;
  background: rgba(56, 189, 248, .16);
  border-color: rgba(56, 189, 248, .35);
  box-shadow: -4px 0 16px rgba(2, 132, 199, .25);
}
.admin-tab.expanded .admin-tab-label { max-width: 120px; opacity: 1; }
/* ==== css/70-desktop.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   DESKTOP SIGNATURE UI — 2026 refresh
   กฎทั้งหมดอยู่ใน min-width:1024px เท่านั้น จึงไม่เปลี่ยนหน้าตามือถือ
   ============================================================ */
@media (min-width: 1024px) {
  body {
    background:
      radial-gradient(circle at 78% -10%, rgba(56,189,248,.13), transparent 32%),
      radial-gradient(circle at 18% 82%, rgba(16,185,129,.08), transparent 28%),
      #060b13;
  }

  /* Desktop navigation */
  #appShell { padding-left: 260px; min-height: 100vh; }
  .bnav {
    width: 260px;
    padding: 28px 18px 24px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(10,20,34,.98), rgba(5,11,19,.98));
    border-right: 1px solid rgba(148,163,184,.12);
    box-shadow: 18px 0 50px rgba(0,0,0,.22);
  }
  .bnav::before {
    width: 70px;
    height: 70px;
    margin: 0 auto 34px;
    border: 3px solid rgba(56,189,248,.62);
    box-shadow: 0 0 0 7px rgba(56,189,248,.06), 0 14px 35px rgba(0,0,0,.42);
  }
  .bnav::after {
    content: 'เที่ยวนี่เหอะ  •  TRAVEL CLUB';
    order: -1;
    display: block;
    margin: 84px 0 -20px;
    color: #e2e8f0;
    text-align: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .35px;
    white-space: nowrap;
  }
  .bnav-item {
    min-height: 58px;
    margin: 0;
    padding: 0 16px;
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 17px;
  }
  .bnav-item .ico { width: 28px; height: 28px; font-size: 25px; flex: 0 0 28px; }
  .bnav-item .ico svg { width: 25px; height: 25px; }
  .bnav-item .lbl { font-size: 14px; color: #94a3b8; text-align: left; }
  .bnav-item:hover { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.06); }
  .bnav-item.active {
    background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(45,212,191,.08));
    border-color: rgba(56,189,248,.24);
    box-shadow: inset 3px 0 0 #38bdf8, 0 10px 24px rgba(0,0,0,.14);
  }
  .bnav-item.active .lbl { color: #e0f2fe; }
  .nav-avatar { width: 27px; height: 27px; }

  /* Hero header */
  .hdr {
    padding: 24px 34px 62px;
    margin: 0;
    background: transparent;
    border: 0;
  }
  .hdr.no-greet { padding-bottom: 24px; }
  .home-banner {
    width: 100%;
    max-width: 1400px;
    height: clamp(340px, 36vw, 520px);
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 28px 70px rgba(0,0,0,.42);
    isolation: isolate;
  }
  .home-banner img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .home-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(3,8,15,.48), transparent 48%), linear-gradient(0deg, rgba(3,8,15,.82), transparent 55%);
  }
  .home-banner-fade { z-index: 1; height: 62%; background: linear-gradient(180deg, transparent, rgba(6,11,19,.82)); }
  .home-banner-actions { top: 24px; right: 24px; z-index: 3; gap: 10px; }
  .home-booking-steps {
    right:42px;
    bottom:34px;
    width:300px;
    max-width:300px;
    grid-template-columns:1fr 14px 1fr 14px 1fr 14px 1fr;
  }
  .home-step-icon { width:38px; height:38px; font-size:16px; }
  .home-step-label { font-size:9px; }
  .home-step-line { height:2px; margin-top:18px; }
  .home-banner-actions .hdr-btn { padding: 11px 18px; font-size: 13px; border-radius: 14px; }
  .hdr-greet {
    left: 34px;
    right: auto;
    bottom: 28px;
    transform: none;
    width: min(560px, calc(100% - 68px));
    max-width: none;
    z-index: 3;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(4,10,18,.56);
    border-color: rgba(255,255,255,.16);
    box-shadow: 0 18px 38px rgba(0,0,0,.28);
  }
  .hdr-greet img { width: 54px; height: 54px; }
  .hdr-greet h2 { font-size: 18px; }
  .hdr-greet p { font-size: 13px; }

  /* Main content */
  .main { width: 100%; max-width: 1400px; padding: 26px 34px 80px; }
  #tab-home .main { padding-top: 18px; }
  .home-quick-actions { max-width: none; gap: 14px; margin: 2px 0 34px; }
  .home-quick-actions .qa-mini {
    height: 84px;
    flex-direction: row;
    gap: 12px;
    border-radius: 20px;
    animation: none;
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
  }
  .qa-mini .qa-mini-ico { font-size: 32px; }
  .qa-mini .qa-mini-label { font-size: 14px; }
  .home-quick-actions .qa-mini:hover { transform: translateY(-5px) scale(1.01); filter: saturate(1.08); }
  .sec-hdr { margin: 4px 0 20px; }
  .sec-hdr h3 { font-size: 22px; letter-spacing: -.2px; }
  .sec-hdr > *:last-child { font-size: 13px; }

  #upcomingList,
  .trip-list {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
  .trip-hcard2 { border-radius: 24px; border: 1px solid rgba(255,255,255,.08); }
  .trip-hcard2:hover { transform: translateY(-7px); box-shadow: 0 25px 55px rgba(0,0,0,.5); border-color: rgba(56,189,248,.3); }
  .trip-hcard2:hover .thc-bg { transform: scale(1.045); }
  .thc-bg { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
  .stat-bar { padding: 20px 22px; border-radius: 20px; margin-top: 30px; }
  .stat-bar .ico { font-size: 30px; }
  .stat-bar .txt h4 { font-size: 15px; }
  .stat-bar .txt p { font-size: 13px; }
  .past-grid { grid-template-columns: repeat(8, minmax(0,1fr)); gap: 16px; }
  .search-wrap { max-width: 600px; margin-bottom: 26px; }
  .search-wrap input { height: 56px; border-radius: 17px; font-size: 15px; }
  .my-profile { max-width: 820px; }

  /* Desktop overlays and work pages */
  .modal-bg { align-items: center; padding: 34px; }
  .modal-sheet {
    width: min(940px, calc(100vw - 100px));
    max-width: 940px;
    max-height: calc(100vh - 68px);
    border-radius: 30px;
    overflow-y: auto;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 35px 100px rgba(0,0,0,.66);
  }
  .modal-img { height: 360px; object-fit: cover; }
  .modal-body { padding: 26px 32px 34px; }
  .modal-grid { grid-template-columns: repeat(4, 1fr); }
  .bk-hdr { padding-left: max(28px, calc((100vw - 1240px) / 2)); padding-right: max(28px, calc((100vw - 1240px) / 2)); }
  .bk-body { max-width: 820px; padding-top: 34px; }
  #bookingPage2 .bk-body { max-width: 1240px; }
  .van-blocks-row { gap: 22px; }
  .van-blocks-row .van-block { border-radius: 22px; box-shadow: 0 16px 34px rgba(0,0,0,.2); }
  #eqItemList { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .mem-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .drawer { max-width: 520px; padding: 34px 30px; }
  #adminPopup > div { width: min(620px, calc(100vw - 80px)) !important; max-width: 620px !important; }
  .admin-tab { right: 24px; bottom: 24px; }

  /* Login becomes a polished desktop split screen */
  #loginPage {
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 440px);
    gap: clamp(32px, 4vw, 64px);
    justify-content: center;
    align-items: center;
    align-content: center;
    align-content: safe center;
    max-width: 1080px;
    margin: 0 auto;
    padding: 48px clamp(24px, 4vw, 64px);
    overflow-y: auto;
    background:
      radial-gradient(circle at 20% 30%, rgba(45,212,191,.28), transparent 42%),
      radial-gradient(circle at 82% 15%, rgba(56,189,248,.24), transparent 40%),
      radial-gradient(circle at 60% 90%, rgba(2,132,199,.18), transparent 45%),
      #060b13;
  }
  /* เส้น/จุดตกแต่งเบาๆ เติมพื้นที่ว่างรอบข้าง ไม่ให้ดูเป็นความมืดเปล่าๆ
     ใช้ position:absolute (ไม่ใช่ fixed) เพราะ #loginPage เดิมเป็น position:fixed อยู่แล้ว
     ทำหน้าที่เป็น containing block ให้ชั้นนี้ครอบคลุมเต็มพื้นที่ได้เองโดยไม่ต้องแก้ position ของ #loginPage เอง
     (ห้ามตั้ง position:relative ให้ #loginPage เด็ดขาด เพราะจะไปทับ position:fixed ของมือถือ ทำให้จอล็อกอินไม่เต็มจอ) */
  #loginPage::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 20%, transparent 75%);
    pointer-events: none;
    z-index: 0;
  }
  #loginPage .login-logo, #loginPage .login-card { position: relative; z-index: 1; }
  #loginPage .login-logo { grid-column: 1; grid-row: 1; min-height: 0; min-width: 0; margin: 0; }
  #loginPage .login-logo img { width: 150px; height: 150px; margin-bottom: 24px; }
  #loginPage .login-logo h1 { font-size: clamp(30px, 2.8vw, 42px); line-height: 1.35; }
  #loginPage .login-logo p { font-size: 16px; line-height: 1.6; margin-top: 12px; }
  #loginPage .login-logo::after {
    display: block;
    content: 'ออกเดินทาง • พบเพื่อนใหม่ • เก็บความทรงจำ\A 🚐 จองที่นั่งเรียลไทม์   📸 แนบสลิปในตัว   🏕️ เช่าอุปกรณ์ครบจบ';
    white-space: pre-line;
    color: #64748b;
    margin-top: 20px;
    font-size: 13px;
    line-height: 2.4;
    letter-spacing: .3px;
  }
  #loginPage .login-card {
    grid-column: 2; grid-row: 1; min-width: 0; width: 100%; max-width: 440px;
    border-radius: 30px; border-color: rgba(56,189,248,.28);
    box-shadow: 0 0 0 1px rgba(56,189,248,.08), 0 45px 110px rgba(0,0,0,.55), 0 0 90px rgba(56,189,248,.1);
    padding: 44px 38px;
  }

  /* ปุ่มปิดหน้าล็อกอิน — ย้ายไปมุมขวาบนแบบสากล ให้ดูเนียนเป็นส่วนหนึ่งของหน้า ไม่ใช่ลอยเดี่ยวๆ มุมซ้าย */
  #loginCloseBtn {
    top: 28px; left: auto; right: 28px;
    width: 42px; height: 42px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    transition: background .15s ease, transform .15s ease;
  }
  #loginCloseBtn:hover { background: rgba(255,255,255,.14); transform: scale(1.05); }

  /* ตัวหนังสือ/ช่องกรอก/ปุ่มภายในการ์ดล็อกอิน — เดิมกล่องขยายแล้วแต่ตัวอักษรข้างในยังเป็นไซซ์มือถือ ดูเล็กไม่สมส่วน */
  #loginPage .login-card h2,
  #loginPage #lineLoginStep h2,
  #loginPage #phoneStep h2 { font-size: 25px; margin-bottom: 14px; }
  #loginPage .login-desc { font-size: 16px; line-height: 1.75; margin-bottom: 30px; }
  #loginPage .inp-wrap { margin-bottom: 18px; }
  #loginPage .inp-pre { font-size: 18px; }
  #loginPage .inp { font-size: 17px; height: 56px; padding-left: 50px; border-radius: 16px; }
  #loginPage .btn-login { font-size: 17px; height: 56px; border-radius: 16px; }
  #loginPage .login-note { font-size: 13px; margin-top: 18px; }
  #loginPage .login-note-pill { font-size: 13px; padding: 10px 20px; }
  #loginPage .line-profile-card { padding: 16px 18px; margin-bottom: 26px; }
  #loginPage .line-profile-card img { width: 54px; height: 54px; }
  #loginPage .line-profile-card .name { font-size: 17px; }
  #loginPage .line-profile-card .status { font-size: 13px; }
}

/* Laptop ที่พื้นที่แคบ: ยังคงเป็น desktop แต่ลด sidebar/กริดให้พอดี */
@media (min-width: 1024px) and (max-width: 1199px) {
  #appShell { padding-left: 220px; }
  .bnav { width: 220px; padding-left: 14px; padding-right: 14px; }
  .bnav::after { font-size: 10.5px; }
  .hdr { padding-left: 24px; padding-right: 24px; }
  .main { padding-left: 24px; padding-right: 24px; }
  #upcomingList, .trip-list { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .past-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  #eqItemList { grid-template-columns: repeat(2, 1fr); }
}

/* PC INTERIOR ONLY: light travel catalog; login and mobile stay unchanged. */
.pc-only { display: none; }
@media (min-width: 1024px) {
  #appShell { --bg:#fff; --bg2:#f6f8fa; --bg3:#eef2f5; --blue:#087e8b; --blue2:#086575; --green:#16805d; --sub:#536878; --muted:#72828f; --border:#e4eaee; color:#172f3d; background:#fff; padding:0; min-height:100vh; display:flex; flex-direction:column; }
  #appShell > .hdr, #appShell .pc-top { display:none; }
  #appShell > .view-page { order:2; }
  #appShell .bnav { order:0; position:sticky; top:0; bottom:auto; left:auto; width:100%; height:auto; min-height:78px; padding:16px max(32px,calc((100vw - 1400px)/2 + 36px)); gap:6px; flex-direction:row; align-items:center; justify-content:flex-start; border:0; border-bottom:1px solid #edf0f2; box-shadow:none; background:rgba(255,255,255,.96); }
  #appShell .bnav::before, #appShell .bnav::after { display:none; }
  #appShell .pc-brand { display:flex; order:0; flex-direction:row; align-items:center; gap:11px; margin-right:auto; padding:0 28px 0 0; white-space:nowrap; }
  #appShell .pc-brand img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
  #appShell .pc-brand strong { font-size:21px; letter-spacing:-.5px; color:#102f3c; }
  #appShell .pc-brand small { display:none; }
  #appShell .bnav-item { order:1; flex:none; min-height:42px; padding:11px 18px; margin:0; flex-direction:row; gap:0; border:0; border-radius:999px; background:transparent; }
  #appShell .bnav-item .ico { display:none; }
  #appShell .bnav-item .lbl { font-size:14px; font-weight:600; color:#647582; }
  #appShell .bnav-item.active { background:#eaf6f5; box-shadow:none; }
  #appShell .bnav-item.active .lbl { color:#087b79; }
  #appShell .bnav-item:hover { background:#f0f4f6; }
  #appShell .pc-nav-contact { display:inline-flex; order:2; align-items:center; justify-content:center; margin-left:18px; border:0; border-radius:999px; padding:12px 21px; font:inherit; font-size:14px; font-weight:600; color:#fff; background:#112f40; cursor:pointer; white-space:nowrap; }
  #appShell .pc-nav-contact:hover { background:#086c78; }
  #appShell .main { width:100%; max-width:1400px; margin:auto; padding:32px 36px 72px; }
  #appShell #homeContent { padding-top:32px; }
  #appShell .pc-layout { display:flex; flex-direction:column; gap:0; }
  #appShell .pc-main { width:100%; min-width:0; }
  #appShell .pc-intro { display:flex; justify-content:space-between; align-items:center; gap:32px; margin-bottom:26px; padding:0; border:0; border-radius:0; background:none; min-height:106px; }
  #appShell .pc-intro-copy { padding:0; }
  #appShell .pc-intro-copy small { display:block; color:#087d87; font-size:12px; font-weight:600; margin-bottom:8px; letter-spacing:.2px; }
  #appShell .pc-intro h2 { color:#17303f; font-size:clamp(32px,3.1vw,44px); letter-spacing:-1.2px; font-weight:700; line-height:1.25; margin:0 0 10px; }
  #appShell .pc-intro p { color:#697d8b; font-size:16px; line-height:1.6; }
  #appShell .pc-welcome { display:flex; align-items:center; flex-wrap:wrap; gap:12px; max-width:360px; padding:0; background:none; border:0; }
  #appShell .pc-welcome > img { width:38px; height:38px; object-fit:cover; border-radius:50%; border:2px solid #e7efee; }
  #appShell .pc-welcome > div[style*="width:42px"] { display:none; }
  #appShell .pc-welcome h2 { font-size:14px; color:#34505c; line-height:1.55; margin:0; letter-spacing:0; font-weight:600; }
  #appShell .pc-welcome p { font-size:12px; color:#7b8b93; line-height:1.7; margin:3px 0 0; }
  #appShell .pc-welcome button { border-radius:999px; font-size:13px; padding:10px 16px; }
  #appShell .pc-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; padding:0 0 24px; border-bottom:1px solid #e7edef; }
  #appShell .home-quick-actions { display:flex; flex-direction:row; gap:10px; margin:0; padding:0; max-width:none; border:0; background:none; }
  #appShell .home-quick-actions .qa-mini { flex:none; width:auto; min-width:124px; min-height:44px; height:auto; flex-direction:row; gap:11px; padding:12px 19px; border:1px solid #e1e8ec; border-radius:999px; background:#fff; box-shadow:none; animation:none; }
  #appShell .home-quick-actions .qa-trip-mini { background:#173b48; border-color:#173b48; }
  #appShell .home-quick-actions .qa-mini:hover { transform:translateY(-2px); border-color:#7fb8bd; box-shadow:0 4px 12px #132d3910; }
  #appShell .qa-mini .qa-mini-ico { display:none; }
  #appShell .qa-mini .qa-mini-label { color:#425e6c; font-size:14px; font-weight:600; }
  #appShell .qa-trip-mini .qa-mini-label { color:#fff; }
  #appShell .qa-mini::after { content:'↗'; color:#6b8995; font-size:15px; }
  #appShell .qa-trip-mini::after { color:#bde7e6; }
  #appShell .sec-hdr { margin:0 0 20px; gap:16px; }
  #appShell .sec-hdr h3 { font-size:23px; font-weight:700; letter-spacing:-.4px; color:#213b48; }
  #appShell .sec-hdr > span { color:#087d8b !important; font-size:13px !important; font-weight:600; }
  #appShell .divider { height:1px; background:#edf0f3; margin:36px 0; }
  #appShell #upcomingList, #appShell .trip-list { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:24px !important; overflow:visible !important; scroll-snap-type:none; }
  #appShell #tripListFull { display:block !important; }
  #appShell .trip-hcard2 { height:100%; background:#fff; border:0; border-radius:0; box-shadow:none; overflow:visible; transition:transform .2s; }
  #appShell .trip-hcard2:hover { transform:translateY(-3px); box-shadow:none; }
  #appShell .trip-hcard2 .thc-photo { display:flex; flex-direction:column; aspect-ratio:auto; overflow:visible; height:100%; }
  #appShell .trip-hcard2 .thc-photo > img { width:100%; height:190px; flex:none; object-fit:cover; display:block; border-radius:18px; background:#eef2f5; }
  #appShell .thc-photo::after { display:none; }
  #appShell .trip-hcard2 .thc-overlay { position:static; flex:1; display:flex; flex-direction:column; padding:15px 2px 3px; }
  #appShell .trip-hcard2 .thc-title { color:#203744; font-size:20px; font-weight:700; line-height:1.4; margin-bottom:9px; text-shadow:none; overflow-wrap:anywhere; }
  #appShell .trip-hcard2 .thc-meta-row { color:#7b8b94; font-size:12px; flex-wrap:wrap; gap:5px 10px; margin-bottom:14px; }
  #appShell .thc-meta-row span { text-shadow:none; }
  #appShell .thc-bottom-row { margin-top:auto; padding-top:12px; border-top:1px solid #edf1f3; gap:8px; flex-wrap:wrap; }
  #appShell .trip-hcard2 .thc-price strong { color:#173746; font-size:25px; font-weight:800; text-shadow:none; }
  #appShell .trip-hcard2 .thc-price > span { color:#8a979e; font-size:11px; }
  #appShell .trip-hcard2 .thc-seats-pill { font-size:11px; border:0; padding:5px 8px; border-radius:6px; background:#eaf6f0; color:#29805c; }
  #appShell .trip-hcard2 .thc-seats-pill.low { color:#97641f; background:#fff5df; }
  #appShell .trip-hcard2 .thc-seats-pill.full { color:#9b6363; background:#fbefef; }
  #appShell .thc-status-pill { top:12px; left:12px; padding:6px 10px; border:0; border-radius:999px; background:rgba(255,255,255,.95); color:#30534a; font-size:11px; font-weight:600; box-shadow:0 2px 8px #102f3810; }
  #appShell .thc-status-pill.full { color:#9d5353; }
  #appShell .thc-status-pill.almost { color:#885c22; }
  #appShell .thc-status-pill.soon, #appShell .thc-status-pill.done { color:#647782; }
  #appShell .thc-status-pill::before { display:none; }
  #appShell .trip-hcard2 .lux-locked-ov { height:190px; bottom:auto; border-radius:18px; background:#0c253c35; backdrop-filter:blur(1px); }
  #appShell .pc-card-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#70848e; font-size:11px; margin-bottom:8px; }
  #appShell .pc-card-caption > span:last-child { color:#0b8890; font-size:11px; white-space:nowrap; }
  #appShell .past-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }
  #appShell .past-card { border-radius:16px; }
  #appShell .past-card-info h5 { font-size:14px; }
  #appShell .past-card-info p { color:#d6e5e9; font-size:11px; }
  #appShell .past-card-rating { font-size:11px; padding:4px 7px; }
  #appShell .pc-support { width:100%; display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; padding:28px 0 0; margin-top:36px; border-top:1px solid #e5ecef; }
  #appShell .stat-bar { margin:0; padding:20px; background:#f4f8f9; border:0; border-radius:14px; }
  #appShell .stat-bar .ico { font-size:26px; }
  #appShell .stat-bar .txt h4 { font-size:16px; color:#2c4855; line-height:1.55; }
  #appShell .stat-bar .txt p { font-size:12px; color:#81929c; line-height:1.7; }
  #appShell .pc-support > a { margin:0 !important; padding:20px !important; background:#f4f8f9 !important; border:0 !important; box-shadow:none !important; border-radius:14px !important; color:#294b57 !important; }
  #appShell .pc-support > a [style*="color:#fff"] { color:#294b57 !important; }
  #appShell .pc-support > a > div:first-child > div:first-child { display:none !important; }
  #appShell .pc-support > a > div:last-child { background:#e0eff0 !important; color:#317f85 !important; }
  #appShell .pc-footer { margin-top:12px; }
  #appShell .search-wrap { max-width:650px; margin:0 0 32px; }
  #appShell .search-wrap input { height:54px; background:#f4f7f9; border:1px solid #e0e8ee; border-radius:999px; font-size:16px; color:#23404e; }
  #appShell .my-profile { max-width:none; background:#f2f8f8; border:1px solid #e1eded; border-radius:20px; padding:30px; margin-bottom:32px; }
  #appShell .my-info h3 { color:#1b3c4a; font-size:25px; }
  #appShell .my-info p { color:#718895; font-size:14px; }
  #appShell .my-stats { gap:42px; margin-top:18px; }
  #appShell .my-stat h4 { font-size:27px; }
  #appShell .my-stat p { font-size:12px; }
  #appShell #bookingUpcomingList, #appShell #bookingHistoryList { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  #appShell .hist-card-overlay h4 { font-size:18px; }
  #appShell .hist-card-overlay p { font-size:13px; }
  #appShell .h-item .hi h4 { color:#203e4b; }
  #appShell .pickup-note { color:#647d88; }
  #appShell .pickup-note strong { color:#24495a; }
  #appShell #notifContent { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  #appShell #notifContent > div:not(.notif-item) { grid-column:1 / -1; }
  #appShell #notifContent h3 { color:#243f4d !important; }
  #appShell .notif-item { margin:0; padding:25px; border:1px solid #e5edef; border-radius:18px; background:#fafcfc; }
  #appShell .notif-info h4 { font-size:17px; color:#2d4a56; margin-bottom:12px; }
  #appShell .notif-info p { font-size:14px; line-height:1.85; color:#718590; }
  #appShell #gearSlider > div { flex-basis:24% !important; }
  #appShell :is(button,[tabindex="0"],a):focus-visible { outline:3px solid #169eab; outline-offset:5px; }
  #modalBg { --blue:#087e8b; --green:#16805d; --yellow:#a36b18; --red:#b94c4c; --sub:#647b88; --border:#e5ecef; }
  #modalBg .modal-sheet { display:grid; grid-template-columns:43% 57%; max-width:1080px; border-radius:24px; padding-bottom:0; background:#fff; color:#203d4b; }
  #modalBg .modal-img { grid-column:1; grid-row:1 / 3; height:100%; min-height:460px; object-fit:cover; }
  #modalBg .modal-body { grid-column:2; grid-row:1; padding:32px; }
  #modalBg .modal-body h2 { color:#193a47; font-size:29px; }
  #modalBg .modal-price { color:#1c665d; background:#edf8f4; border:0; }
  #modalBg .modal-payment { color:#916415; background:#fff7e6; border-color:#f5e8c8; }
  #modalBg .modal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #modalBg .modal-card { background:#f6f9fa; border:0; }
  #modalBg .modal-card strong { color:#2d4e5d; }
  #modalBg .modal-hl { color:#516c79; background:#f5f9fa; border:0; }
  #modalBg .modal-sheet > .btn-book { grid-column:2; grid-row:2; position:static; margin:0 32px 30px; width:auto; max-width:none; background:#087d89; border-radius:999px; box-shadow:none; animation:none; font-size:16px; }
  #modalBg .modal-sheet > .btn-book:disabled { background:#e5eaed; color:#91a0a8; cursor:not-allowed; }
}
@media (min-width:1024px) and (max-width:1199px) {
  #appShell .bnav { padding:15px 26px; gap:2px; }
  #appShell .pc-brand { padding-right:18px; gap:9px; }
  #appShell .pc-brand strong { font-size:19px; }
  #appShell .bnav-item { padding:10px 13px; }
  #appShell .pc-nav-contact { margin-left:10px; padding:11px 16px; }
  #appShell .main { padding-left:28px; padding-right:28px; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #appShell .trip-hcard2 .thc-photo > img, #appShell .trip-hcard2 .lux-locked-ov { height:180px; }
  #appShell .pc-welcome { max-width:280px; }
  #appShell .past-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #appShell #notifContent { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #appShell *, #appShell *::before, #appShell *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* READABILITY: laptop-first typography. Never scale/zoom the document. */
@media (min-width:1024px) {
  #appShell { font-size:18px; line-height:1.6; --sub:#405a69; --muted:#576e7b; }
  #appShell .bnav { min-height:72px; padding-top:12px; padding-bottom:12px; }
  #appShell .bnav-item .lbl { font-size:18px; color:#405b6b; }
  #appShell .pc-brand strong { font-size:24px; }
  #appShell .pc-nav-contact { font-size:18px; }
  #appShell .main { padding-top:18px; }
  #appShell #homeContent { padding-top:18px; }
  #appShell .pc-intro { min-height:80px; margin-bottom:16px; gap:24px; }
  #appShell .pc-intro-copy small { font-size:16px; margin-bottom:4px; }
  #appShell .pc-intro h2 { font-size:40px; margin-bottom:6px; line-height:1.2; }
  #appShell .pc-intro p { font-size:18px; color:#526e7e; }
  #appShell .pc-welcome { max-width:400px; }
  #appShell .pc-welcome h2 { font-size:18px; color:#2d4b5a; }
  #appShell .pc-welcome p { font-size:16px; color:#536f7b; }
  #appShell .pc-welcome button { font-size:18px !important; }
  #appShell .pc-toolbar { margin-bottom:22px; padding-bottom:16px; }
  #appShell .home-quick-actions .qa-mini { min-height:46px; padding:10px 21px; }
  #appShell .qa-mini .qa-mini-label { font-size:18px; }
  #appShell .qa-mini::after { font-size:18px; }
  #appShell .sec-hdr { margin-bottom:16px; }
  #appShell .sec-hdr h3 { font-size:27px; }
  #appShell .sec-hdr > span { font-size:18px !important; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:28px !important; }
  #appShell .trip-hcard2 .thc-photo > img, #appShell .trip-hcard2 .lux-locked-ov { height:220px; }
  #appShell .trip-hcard2 .thc-overlay { padding:16px 2px 6px; }
  #appShell .trip-hcard2 .thc-title { font-size:27px; line-height:1.4; margin-bottom:10px; }
  #appShell .trip-hcard2 .thc-meta-row { font-size:18px; color:#506c7b; line-height:1.6; margin-bottom:14px; gap:6px 18px; }
  #appShell .trip-hcard2 .thc-price strong { font-size:32px; }
  #appShell .trip-hcard2 .thc-price > span { font-size:17px; color:#536d7b; }
  #appShell .trip-hcard2 .thc-seats-pill { font-size:16px; padding:7px 11px; }
  #appShell .thc-status-pill { font-size:16px; padding:7px 13px; }
  #appShell .pc-card-caption { font-size:17px; color:#4b6878; flex-wrap:wrap; line-height:1.6; margin-bottom:9px; }
  #appShell .pc-card-caption > span:last-child { font-size:17px; }
  #appShell .thc-bottom-row { padding-top:14px; }
  #appShell #pastList, #appShell #tripListFull > .trip-list { opacity:1 !important; }
  #appShell .past-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  #appShell .past-card-info h5 { font-size:18px; }
  #appShell .past-card-info p, #appShell .past-card-rating { font-size:16px; }
  #appShell .stat-bar .txt h4 { font-size:20px; }
  #appShell .stat-bar .txt p { font-size:17px; color:#516d7b; }
  #appShell .pc-support { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appShell .pc-support .stat-bar { grid-column:1 / -1; }
  #appShell .pc-support > a [style*="font-size"] { font-size:18px !important; }
  #appShell .pc-footer :is(p,span) { font-size:16px !important; }
  #appShell .search-wrap input { font-size:19px; height:58px; }
  #appShell .my-info h3 { font-size:29px; }
  #appShell .my-info p, #appShell .my-stat p { font-size:17px; }
  #appShell .hist-group-title { font-size:20px; }
  #appShell .hist-group-title > span { font-size:18px !important; }
  #appShell #bookingUpcomingList, #appShell #bookingHistoryList { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appShell .hist-card-overlay h4 { font-size:23px; }
  #appShell .hist-card-overlay p { font-size:18px; }
  #appShell .h-item .hi h4 { font-size:21px; }
  #appShell .h-item .hi p, #appShell .pickup-note { font-size:17px; }
  #appShell #notifContent { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #appShell #notifContent h3 { font-size:26px !important; }
  #appShell .notif-info h4 { font-size:22px; }
  #appShell .notif-info p { font-size:18px; color:#496878; }
  #modalBg .modal-date, #modalBg .modal-price { font-size:18px; }
  #modalBg .modal-card span, #modalBg .modal-card strong { font-size:17px; }
  #modalBg .modal-payment, #modalBg .modal-hl { font-size:17px; }
  #modalBg .avail { font-size:19px; }
  #modalBg .modal-sheet > .btn-book { font-size:19px; height:54px; }
}
@media (min-width:1024px) and (max-width:1199px) {
  #appShell .bnav { flex-wrap:wrap; gap:4px; }
  #appShell .pc-brand strong { font-size:22px; }
  #appShell .bnav-item { padding:10px 12px; }
  #appShell .pc-welcome { max-width:300px; }
}
@media (min-width:1440px) {
  #appShell .main { max-width:1560px; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  #appShell #bookingUpcomingList, #appShell #bookingHistoryList, #appShell #notifContent { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #appShell .past-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media (min-width:1920px) {
  #appShell .main { max-width:1840px; }
  #appShell #upcomingList, #appShell .trip-list { grid-template-columns:repeat(4,minmax(0,1fr)) !important; }
  #appShell .past-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
/* DARK DESKTOP + ORIGINAL MOBILE HEADER IMAGE. All layout/font sizes stay intact. */
@media (min-width:1024px) {
  #appShell { --bg:#060b13; --bg2:#0c1524; --bg3:#111d2e; --blue:#38bdf8; --blue2:#0284c7; --green:#10b981; --red:#ef4444; --yellow:#f59e0b; --text:#f1f5f9; --sub:#b5c3d6; --muted:#94a3b8; --border:rgba(255,255,255,.09); --card:rgba(255,255,255,.03); background:var(--bg); color:var(--text); }
  #appShell .bnav { background:rgba(6,11,19,.96); border-bottom-color:var(--border); }
  #appShell .pc-brand strong { color:var(--text); }
  #appShell .bnav-item .lbl { color:#bac8da; }
  #appShell .bnav-item.active { background:rgba(56,189,248,.12); }
  #appShell .bnav-item.active .lbl { color:var(--blue); }
  #appShell .bnav-item:hover { background:var(--bg3); }
  #appShell .pc-nav-contact { background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff; }
  #appShell .pc-nav-contact:hover { background:#0284c7; }
  /* Reuse the existing image element and source. No crop, stretching or substitute. */
  #appShell > .hdr { display:block; order:1; padding:0; margin:0; background:var(--bg); border:0; }
  #appShell > .hdr.no-greet { padding:0; }
  #appShell .home-banner { width:100%; max-width:1400px; height:auto; margin:0 auto; border:0; border-radius:0; background:var(--bg); box-shadow:none; overflow:visible; }
  #appShell .home-banner > img { width:100%; height:auto; max-height:none; display:block; object-fit:contain; border-radius:0; }
  #appShell .home-banner::after, #appShell .home-banner-fade { display:none; }
  #appShell .home-banner-actions { top:20px; right:36px; gap:12px; }
  #appShell .home-banner-actions .hdr-btn { font-size:18px; padding:11px 18px; border-radius:999px; }
  #appShell .home-banner-actions .hdr-btn-info { background:rgba(6,11,19,.8); border:1px solid rgba(56,189,248,.4); color:#7dd3fc; }
  #appShell .home-banner-actions .hdr-btn-contact { background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff; }
  #appShell .home-banner .hdr-greet { position:static; left:auto; right:auto; bottom:auto; transform:none; width:auto; max-width:none; margin:12px 36px 0; padding:14px 18px; border:1px solid var(--border); border-radius:16px; background:var(--bg2); box-shadow:none; gap:14px; }
  #appShell .hdr-greet h2 { color:var(--text); font-size:20px; }
  #appShell .hdr-greet p { color:var(--sub); font-size:18px; }
  #appShell .hdr-greet img { width:48px; height:48px; }
  #appShell .hdr-greet button { font-size:18px; padding:11px 18px; }
  /* The image is now the header; remove the former text-only introduction. */
  #appShell .pc-intro { display:none; }
  #appShell .pc-toolbar { border-bottom-color:var(--border); }
  #appShell .home-quick-actions .qa-mini { background:var(--bg2); border-color:#27374b; }
  #appShell .home-quick-actions .qa-trip-mini { background:linear-gradient(135deg,var(--blue2),var(--blue)); border-color:transparent; }
  #appShell .home-quick-actions .qa-mini:hover { border-color:var(--blue); box-shadow:0 4px 18px rgba(0,0,0,.2); }
  #appShell .qa-mini .qa-mini-label { color:#dce7f5; }
  #appShell .qa-trip-mini .qa-mini-label, #appShell .qa-trip-mini::after { color:#fff; }
  #appShell .qa-mini::after { color:var(--blue); }
  #appShell .sec-hdr h3 { color:var(--text); }
  #appShell .sec-hdr > span { color:var(--blue) !important; }
  #appShell .divider { background:var(--border); }
  #appShell .trip-hcard2 { background:transparent; }
  #appShell .trip-hcard2 .thc-photo > img { background:var(--bg3); }
  #appShell .trip-hcard2 .thc-title { color:#f1f5f9; }
  #appShell .trip-hcard2 .thc-meta-row { color:#b5c5d9; }
  #appShell .trip-hcard2 .thc-price strong { color:#f1f5f9; }
  #appShell .trip-hcard2 .thc-price > span { color:#b0c0d4; }
  #appShell .trip-hcard2 .thc-seats-pill { color:#80e4b5; background:rgba(16,185,129,.14); }
  #appShell .trip-hcard2 .thc-seats-pill.low { color:#f7d383; background:rgba(245,158,11,.14); }
  #appShell .trip-hcard2 .thc-seats-pill.full { color:#f3b0b0; background:rgba(239,68,68,.13); }
  #appShell .thc-status-pill { background:rgba(6,11,19,.85); color:#a4ecc9; box-shadow:none; }
  #appShell .thc-status-pill.full { color:#f8b4b4; }
  #appShell .thc-status-pill.almost { color:#fde09c; }
  #appShell .thc-status-pill.soon, #appShell .thc-status-pill.done { color:#d0ddeb; }
  #appShell .pc-card-caption { color:#b0c3d7; }
  #appShell .pc-card-caption > span:last-child { color:#7dd3fc; }
  #appShell .thc-bottom-row { border-top-color:var(--border); }
  #appShell .pc-support { border-top-color:var(--border); }
  #appShell .stat-bar { background:var(--bg2); border:1px solid var(--border); }
  #appShell .stat-bar .txt h4 { color:var(--text); }
  #appShell .stat-bar .txt p { color:var(--sub); }
  #appShell .pc-support > a { background:var(--bg2) !important; border:1px solid var(--border) !important; color:#d7e5f5 !important; }
  #appShell .pc-support > a [style*="color:#fff"] { color:#f1f5f9 !important; }
  #appShell .pc-support > a > div:last-child { background:rgba(56,189,248,.12) !important; color:#7dd3fc !important; }
  #appShell .search-wrap input { background:var(--bg2); border-color:#304056; color:#edf4ff; }
  #appShell .my-profile { background:var(--bg2); border-color:#283b52; }
  #appShell .my-info h3 { color:var(--text); }
  #appShell .my-info p { color:var(--sub); }
  #appShell .h-item .hi h4 { color:var(--text); }
  #appShell .pickup-note { color:var(--sub); }
  #appShell .pickup-note strong { color:#d6e6fb; }
  #appShell #notifContent h3 { color:var(--text) !important; }
  #appShell .notif-item { background:var(--bg2); border-color:var(--border); }
  #appShell .notif-info h4 { color:#e3edf9; }
  #appShell .notif-info p { color:#b8c9de; }
  #appShell :is(button,[tabindex="0"],a):focus-visible { outline-color:#7dd3fc; }
  #modalBg { --blue:#38bdf8; --green:#10b981; --yellow:#f59e0b; --red:#ef4444; --sub:#b5c3d6; --border:rgba(255,255,255,.09); }
  #modalBg .modal-sheet { background:#0c1524; color:#f1f5f9; }
  #modalBg .modal-body h2 { color:#f1f5f9; }
  #modalBg .modal-price { color:#c4f4df; background:rgba(16,185,129,.13); }
  #modalBg .modal-payment { color:#f6d084; background:rgba(245,158,11,.1); border-color:rgba(245,158,11,.22); }
  #modalBg .modal-card { background:#111d2e; }
  #modalBg .modal-card strong { color:#edf4ff; }
  #modalBg .modal-hl { color:#c3d3e6; background:#111d2e; }
  #modalBg .modal-sheet > .btn-book { color:#fff; background:linear-gradient(135deg,#0284c7,#38bdf8); }
  #modalBg .modal-sheet > .btn-book:disabled { background:#1e293b; color:#94a3b8; }
}
/* COMPACT PC: side navigation + bounded image header. Mobile/login are untouched. */
@media (min-width:1024px) {
  #appShell { --pc-rail:232px; padding-left:var(--pc-rail); }
  #appShell .bnav {
    position:fixed; inset:0 auto 0 0; order:0;
    width:var(--pc-rail); height:100vh; height:100dvh;
    min-height:0; padding:20px 16px; margin:0;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    justify-content:flex-start; gap:8px; overflow-y:auto;
    border:0; border-right:1px solid rgba(140,170,208,.13);
    background:linear-gradient(180deg,#0b1523,#07101b);
    box-shadow:8px 0 28px rgba(0,0,0,.12);
  }
  #appShell .pc-brand { flex:none; padding:0 5px 22px; margin:0 0 4px; gap:10px; border-bottom:1px solid var(--border); }
  #appShell .pc-brand img { width:42px; height:42px; }
  #appShell .pc-brand strong { font-size:22px; }
  #appShell .bnav-item {
    flex:none; width:100%; min-height:48px; padding:12px 14px;
    flex-direction:row; justify-content:flex-start; gap:12px;
    border:1px solid transparent; border-radius:12px;
  }
  #appShell .bnav-item .ico { display:flex; width:24px; height:24px; flex:0 0 24px; color:#8fa5bf; }
  #appShell .bnav-item .ico svg { width:23px; height:23px; }
  #appShell .bnav-item .lbl { font-size:18px; line-height:1.3; text-align:left; }
  #appShell .bnav-item.active { background:linear-gradient(100deg,rgba(56,189,248,.16),rgba(56,189,248,.05)); border-color:rgba(56,189,248,.24); box-shadow:inset 3px 0 0 #38bdf8; }
  #appShell .bnav-item.active .ico { color:#7dd3fc; filter:none; }
  #appShell .pc-side-services { display:flex; order:2; flex:none; flex-direction:column; gap:6px; margin-top:10px; padding-top:14px; border-top:1px solid var(--border); }
  #appShell .pc-side-services button { width:100%; padding:11px 14px; border:0; border-radius:10px; background:transparent; color:#bacde3; font:inherit; font-size:18px; text-align:left; cursor:pointer; }
  #appShell .pc-side-services button:hover { background:#122337; color:#7dd3fc; }
  #appShell .pc-nav-contact { order:3; width:100%; flex:none; margin:12px 0 0; padding:12px 14px; border-radius:12px; font-size:18px; }
  /* Remove the duplicate top/over-image actions on desktop only. */
  #appShell .home-banner-actions, #appShell .pc-toolbar { display:none; }
  #appShell > .hdr { padding:16px 24px 0; }
  #appShell > .hdr.no-greet { display:none; }
  #appShell .home-banner {
    display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,1fr);
    align-items:center; gap:18px; max-width:1400px; margin:0 auto;
    padding:12px; height:auto; overflow:hidden; border-radius:18px;
    background:linear-gradient(125deg,#0b1726,#0b1420);
    border:1px solid rgba(140,170,208,.12); box-shadow:none;
  }
  #appShell .home-banner > img {
    grid-column:1; grid-row:1; width:100%;
    height:clamp(150px,25vh,220px); max-height:220px;
    object-fit:contain; object-position:center; border-radius:10px;
    background:#060b13;
  }
  #appShell .home-banner .hdr-greet {
    grid-column:2; grid-row:1; position:static; transform:none;
    width:100%; max-width:none; margin:0; padding:14px;
    flex-wrap:wrap; gap:12px; border:0; border-radius:0;
    background:transparent; box-shadow:none; backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
  #appShell .hdr-greet h2 { font-size:20px; line-height:1.5; }
  #appShell .hdr-greet p { font-size:18px; line-height:1.6; }
  #appShell .hdr-greet img { width:46px; height:46px; }
  #appShell .hdr-greet button { font-size:18px; width:100%; }
  #appShell .main, #appShell #homeContent { padding:20px 24px 64px; }
  #appShell .sec-hdr { margin-bottom:16px; }
  #appShell #upcomingList, #appShell .trip-list { gap:24px !important; }
  #appShell .trip-hcard2 .thc-photo > img,
  #appShell .trip-hcard2 .lux-locked-ov { height:clamp(150px,26vh,220px); }
  #appShell .trip-hcard2 .thc-overlay { padding-top:12px; }
}
@media (min-width:1024px) and (max-width:1199px) {
  #appShell { --pc-rail:206px; }
  #appShell .bnav { padding:16px 12px; gap:6px; }
  #appShell .pc-brand { padding-bottom:18px; }
  #appShell .pc-brand strong { font-size:20px; }
  #appShell .home-banner { grid-template-columns:minmax(0,1fr) minmax(240px,.8fr); gap:10px; }
  #appShell .home-banner .hdr-greet { padding:10px; }
  #appShell .main, #appShell #homeContent { padding-left:20px; padding-right:20px; }
  #appShell > .hdr { padding-left:20px; padding-right:20px; }
}
@media (min-width:1024px) and (max-height:650px) {
  #appShell .bnav { padding-top:14px; padding-bottom:14px; gap:5px; }
  #appShell .pc-brand { padding-bottom:14px; }
  #appShell .bnav-item { min-height:44px; padding-top:10px; padding-bottom:10px; }
  #appShell .pc-side-services { padding-top:10px; margin-top:6px; gap:2px; }
  #appShell .pc-side-services button { padding-top:9px; padding-bottom:9px; }
}
/* DESKTOP INTERIOR V9: component layouts only; mobile and login unchanged. */
@media (min-width:1024px) {
  #appShell .home-banner { padding:0; gap:0; overflow:hidden; }
  #appShell .home-banner > img { object-fit:cover; object-position:center; border-radius:0; height:clamp(160px,25vh,220px); }
  #appShell .hdr-greet { padding:20px 24px; }

  /* Full photograph, independently scrollable reading pane, always-visible CTA. */
  #modalBg { padding:24px; }
  #modalBg .modal-sheet {
    width:100%; max-width:1180px; height:min(760px,calc(100dvh - 48px));
    max-height:calc(100dvh - 48px); display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    grid-template-rows:minmax(0,1fr) auto; overflow:hidden;
    border:1px solid #293a50; border-radius:22px;
  }
  #modalBg .modal-img {
    grid-column:1; grid-row:1 / 3; display:block; width:100%; height:100%;
    min-height:0; max-height:100%; object-fit:contain; object-position:center;
    background:#050a12; border-radius:0; margin:0; padding:12px;
  }
  #modalBg .modal-body {
    grid-column:2; grid-row:1; min-width:0; min-height:0; overflow-y:auto;
    overscroll-behavior:contain; scrollbar-gutter:stable; padding:28px 28px 18px;
    font-size:20px; line-height:1.65;
  }
  #modalBg .modal-body h2 { font-size:32px; line-height:1.3; padding-right:32px; margin-bottom:12px; }
  #modalBg .modal-date { font-size:20px; margin-bottom:14px; }
  #modalBg .modal-price { font-size:26px; padding:12px 16px; border-radius:12px; }
  #modalBg .modal-payment { font-size:19px; line-height:1.55; padding:12px 16px; }
  #modalBg .modal-grid { gap:10px; margin:18px 0; }
  #modalBg .modal-card { padding:12px 16px; border:1px solid #26354a; border-radius:12px; }
  #modalBg .modal-card span { font-size:18px; color:#b5c3d6; }
  #modalBg .modal-card strong { font-size:21px; line-height:1.5; }
  #modalBg .modal-hl { font-size:20px; line-height:1.75; padding:16px; overflow-wrap:anywhere; }
  #modalBg .modal-seat-row { margin-top:18px; padding-top:16px; border-top:1px solid #26354a; }
  #modalBg .modal-seat-row p, #modalBg .chip { font-size:18px !important; }
  #modalBg .modal-sheet > .btn-book {
    grid-column:2; grid-row:2; position:static; transform:none;
    width:auto; min-height:54px; height:auto; margin:14px 28px 22px;
    padding:12px 20px; font-size:22px; line-height:1.3; border-radius:12px;
  }
  #modalBg .modal-x { top:12px; right:12px; width:40px; height:40px; z-index:5; background:#1e3046; }

  /* Consistent full-page workspace and readable form controls. */
  :is(#bookingPage2,#equipPage,#reviewPage) { background:#060b13; --sub:#b5c3d6; --muted:#9aabc0; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-hdr {
    padding:12px max(24px,calc((100% - 1160px)/2)); min-height:66px;
    background:rgba(12,21,36,.97); border-bottom:1px solid #243348;
  }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body { width:100%; max-width:1208px; padding:24px 24px 116px; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body > div:first-child { text-align:left !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body > div:first-child h2 { font-size:30px !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) .bk-body > div:first-child p { font-size:19px !important; color:#b5c3d6 !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.btn-back,.chip) { font-size:18px !important; }
  :is(#bookingPage2,#equipPage,#reviewPage) .ig label { font-size:19px; color:#c7d4e5; }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.ig input,.ig select,.ig textarea) {
    font-size:20px !important; line-height:1.5; min-height:48px; border-radius:10px;
  }
  :is(#bookingPage2,#equipPage) .sticky-bar { padding:12px 24px; border-top:1px solid #293a50; background:rgba(12,21,36,.97); }
  :is(#bookingPage2,#equipPage,#reviewPage) .btn-confirm { max-width:560px; min-height:52px; height:auto; padding:12px 20px; font-size:21px; border-radius:12px; }
  :is(#bookingPage2,#equipPage,#reviewPage) .form-sec-title { font-size:24px; }
  :is(#bookingPage2,#equipPage,#reviewPage) .form-sec-sub { font-size:18px; }

  /* Keep actual seat positions/order and booking-state colors untouched. */
  #bookingPage2 .bk-body { display:grid; grid-template-columns:1fr 1fr; column-gap:20px; }
  #bookingPage2 .bk-body > * { grid-column:1 / -1; min-width:0; }
  #bookingPage2 .bk-body > .ig { grid-column:auto; }
  #bookingPage2 .bk-body > label { font-size:21px !important; margin:4px 0 12px; }
  #bookingPage2 .seat-map-img { width:100%; max-width:520px; max-height:180px; object-fit:contain; justify-self:center; margin:0 auto 10px; }
  #bookingPage2 .seat-legend { justify-content:flex-start; margin:10px 0 18px; gap:20px; padding:12px 16px; }
  #bookingPage2 .leg-item { font-size:18px; }
  #bookingPage2 .van-blocks-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-bottom:22px; }
  #bookingPage2 .van-block { min-width:0; padding:14px; border:1px solid #26384e; border-radius:16px; background:#0c1524; }
  #bookingPage2 .van-block-title { font-size:22px; text-align:left; background:none; box-shadow:none; padding:0 0 8px; border-radius:0; }
  #bookingPage2 .van-grid-header { font-size:16px; padding:0; margin-bottom:10px; }
  #bookingPage2 .van-grid-seats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0 0 6px; background:none; border:0; border-radius:0; box-shadow:none; }
  #bookingPage2 .seat { aspect-ratio:auto; height:66px; min-width:0; border-radius:10px; }
  #bookingPage2 .seat span:first-child { font-size:16px; line-height:1.1; }
  #bookingPage2 .seat span:last-child { font-size:21px; }
  #bookingPage2 .onsite-note { font-size:18px; text-align:left; color:#b5c3d6; margin:0 0 14px; }
  #bookingPage2 .onsite-grid { grid-template-columns:repeat(auto-fill,minmax(86px,100px)); gap:10px; justify-content:start; padding:0 0 6px; border:0; border-radius:0; box-shadow:none; background:none; }
  #bookingPage2 .onsite-slot { width:100%; height:62px; aspect-ratio:auto; border-radius:10px; }
  #bookingPage2 .onsite-slot span:first-child { font-size:16px; }
  #bookingPage2 .onsite-slot span:last-child { font-size:21px; }
  #bookingPage2 #formFieldsBox2 { scroll-margin-top:86px; padding:24px; border-radius:18px; }
  #bookingPage2 #seatFormsContainer { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  #bookingPage2 .seat-form-card { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0 0 18px; padding:20px; }
  #bookingPage2 .seat-form-card-hdr { grid-column:1 / -1; }
  #bookingPage2 .seat-form-card-hdr span { font-size:18px; }
  #bookingPage2 .seat-form-badge { min-width:48px; height:40px; font-size:22px; }
  #bookingPage2 .seat-form-card .ig { min-width:0; margin:0; }
  #bookingPage2 #formFieldsBox2 > .ig { max-width:640px; }

  /* Payment: QR and amount at left; timer/upload/action at right. */
  #payModal { padding:24px; align-items:flex-start; }
  #payModal .pay-box { max-width:960px; padding:28px; display:grid; grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr); gap:12px 28px; border-radius:22px; }
  #payModal .pay-box > .chip { position:static !important; grid-column:1 / -1; justify-self:start; font-size:17px !important; }
  #payModal .pay-box > h3 { grid-column:1 / -1; margin:0 !important; text-align:left; font-size:28px; }
  #payModal .pay-box > .sub { grid-column:1; grid-row:3; font-size:18px; color:#b5c3d6; }
  #payModal .qr-img { grid-column:1; grid-row:4 / 6; width:240px; max-width:100%; height:auto; object-fit:contain; margin:4px auto; align-self:start; }
  #payModal #depositSummaryBox { grid-column:1; grid-row:6; margin:0; }
  #payModal #seatLockTimerBox { grid-column:2; grid-row:3; margin:0; }
  #payModal .slip-upload { grid-column:2; grid-row:4 / 7; margin:0; min-width:0; }
  #payModal .btn-pay-ok { grid-column:2; grid-row:7; height:52px; font-size:21px; }
  #payModal .pay-box > p:last-child { grid-column:1 / -1; font-size:18px !important; margin:0 !important; }
  #payModal :is(.ds-label,.ds-calc,.slip-title,.slip-name,.seat-lock-timer strong) { font-size:19px; }
  #payModal :is(.slip-sub,.seat-lock-timer p) { font-size:17px; color:#b5c3d6; }
  #payModal .ds-total { font-size:34px; }
  #payModal .slip-preview { max-height:230px; }
  #payModal .pay-x { width:40px; height:40px; }

  /* Rental catalog and reviews get their own desktop grids. */
  #equipPage :is(#eqTripList,#eqItemList) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  #equipPage .eq-sec-title { font-size:24px; margin:24px 0 14px; }
  #equipPage .eq-item-card { padding:20px; gap:18px; border-radius:16px; margin:0; }
  #equipPage .eq-item-img { width:112px; height:112px; }
  #equipPage .eq-item-info h4 { font-size:24px; }
  #equipPage .eq-item-info p.model { font-size:18px; }
  #equipPage .eq-item-info p.price { font-size:21px; }
  #equipPage :is(.eq-trip-card,.eq-summary-card) { padding:20px; border-radius:16px; }
  #equipPage :is(.eq-note,.eq-summary-row) { font-size:19px; line-height:1.6; }
  #equipPage .eq-step-btn { width:40px; height:40px; font-size:22px; }
  #equipPage .eq-step-val { font-size:22px; }
  #equipPage .eq-trip-info h4 { font-size:22px; }
  #equipPage .eq-trip-info p { font-size:18px; }
  #equipPage #eqSummaryBox { max-width:720px; margin:24px 0 0 auto; }
  #reviewPage #reviewSummary { max-width:560px; }
  #reviewPage .review-summary-card { padding:22px; }
  #reviewPage .review-summary-card .count { font-size:19px; }
  #reviewPage .bk-body > .btn-login { width:240px; font-size:21px; }
  #reviewPage #writeReviewBox { max-width:780px; padding:24px !important; scroll-margin-top:90px; }
  #reviewPage #reviewList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:20px; }
  #reviewPage .review-card { padding:24px; margin:0; }
  #reviewPage .review-avatar { width:46px; height:46px; font-size:22px; }
  #reviewPage .review-name { font-size:22px; }
  #reviewPage .review-date { font-size:17px; color:#aabbd0; }
  #reviewPage .review-stars { font-size:20px; }
  #reviewPage .review-comment { font-size:20px; line-height:1.75; overflow-wrap:anywhere; }
  #reviewPage .review-photo { max-height:360px; object-fit:contain; background:#050a12; }

  /* Profile, trip history, notices, receipts and information surfaces. */
  #appShell #myContent { max-width:1400px; margin:0 auto; }
  #appShell :is(#bookingUpcomingList,#bookingHistoryList) { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  #appShell .my-profile { padding:24px; border-radius:18px; }
  #appShell .my-ava-hint { font-size:16px; max-width:110px; }
  #appShell .my-info h3 { font-size:28px; }
  #appShell .my-info p { font-size:20px; }
  #appShell .my-stat p { font-size:18px; }
  #appShell #notifContent { max-width:1280px; margin:auto; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  #appShell .notif-item { padding:22px; }
  #appShell .notif-info h4 { font-size:24px; }
  #appShell .notif-info p { font-size:20px; line-height:1.7; }
  :is(#successPage2,#equipReceiptPage) .succ-body { max-width:800px; padding:28px 24px 112px; }
  :is(#successPage2,#equipReceiptPage) .succ-body > h2 { font-size:30px !important; margin-bottom:18px !important; }
  :is(#successPage2,#equipReceiptPage) .receipt { padding:24px 28px; border-radius:16px; }
  :is(#successPage2,#equipReceiptPage) .r-row { font-size:21px; padding-bottom:12px; margin-bottom:12px; align-items:flex-start; }
  :is(#successPage2,#equipReceiptPage) .r-row strong { overflow-wrap:anywhere; }
  :is(#successPage2,#equipReceiptPage) .r-row span { color:#655c47; min-width:84px; }
  :is(#successPage2,#equipReceiptPage) .succ-body > p,
  :is(#successPage2,#equipReceiptPage) .succ-body > p span,
  :is(#successPage2,#equipReceiptPage) .succ-body > span { font-size:19px !important; line-height:1.6 !important; }
  #successPage2 .succ-line-btn { max-width:520px; font-size:21px; }
  #successPage2 .r-seat-label, #successPage2 .r-seat-box > p { font-size:18px; color:#655c47; }
  #successPage2 .r-seat-split { flex-wrap:wrap; }
  #modalBg .avail { font-size:22px; }
  #equipReceiptPage .r-item-row { font-size:20px; padding:12px 0; }
  #equipReceiptPage .r-total-row { font-size:26px; }
  #equipReceiptPage .btn-home { max-width:520px; font-size:21px; }
  #drawer { width:560px; max-width:560px; padding:28px; }
  #drawer h3 { font-size:24px !important; }
  #drawer :is(.info-block,p) { font-size:20px !important; line-height:1.75 !important; }
  #adminPopup > div { max-width:800px !important; padding:28px !important; border-radius:20px !important; }
  #adminPopup h3 { font-size:26px !important; }
  #adminPopup p, #adminPopup a { font-size:20px !important; }
  #adminPopup img[src="team.jpg"] { max-height:280px; object-fit:contain; background:#050a12; }
  :is(#modalBg,#bookingPage2,#payModal,#equipPage,#reviewPage,#successPage2,#equipReceiptPage,#drawer,#adminPopup) :is(button,a,input,select,textarea):focus-visible { outline:3px solid #7dd3fc; outline-offset:3px; }
}
@media (min-width:1024px) and (max-height:650px) {
  #modalBg { padding:14px; }
  #modalBg .modal-sheet { height:calc(100dvh - 28px); max-height:calc(100dvh - 28px); }
  #modalBg .modal-body { padding-top:20px; }
  #modalBg .modal-sheet > .btn-book { margin-top:10px; margin-bottom:14px; }
}
/* DESKTOP PREMIUM V10 — scoped visual refinement, no mobile/business-logic changes. */
@media (min-width:1024px) {
  #appShell {
    --border:rgba(161,184,214,.13);
    background:radial-gradient(ellipse at 82% 0,rgba(37,82,117,.12),transparent 52%),#070d16;
  }
  #appShell .bnav {
    background:linear-gradient(180deg,#0d1725,#080f1a 75%);
    border-right:1px solid rgba(159,182,212,.12); box-shadow:8px 0 32px rgba(0,0,0,.15);
  }
  #appShell .pc-brand { padding-bottom:22px; }
  #appShell .pc-brand img { width:46px; height:46px; box-shadow:0 0 0 4px rgba(125,211,252,.06); }
  #appShell .bnav-item { border-radius:13px; transition:background .18s,border-color .18s; }
  #appShell .bnav-item.active {
    background:linear-gradient(100deg,rgba(56,189,248,.13),rgba(56,189,248,.035));
    border-color:rgba(125,211,252,.19); box-shadow:inset 2px 0 #7dd3fc;
  }
  #appShell .bnav-item:hover { background-color:rgba(148,184,221,.06); }
  #appShell .bnav-item .lbl { font-size:19px; }
  #appShell .pc-side-services button { color:#b7c6da; border-radius:12px; }
  #appShell .pc-nav-contact {
    background:linear-gradient(120deg,#0369a1,#149bd2); color:#fff;
    border:1px solid rgba(125,211,252,.24); box-shadow:0 6px 20px rgba(2,132,199,.15);
    min-height:48px; font-weight:700;
  }
  /* Taller, not full-screen: expose more of the original banner artwork. */
  #appShell .home-banner {
    grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr); gap:0;
    border-radius:22px; border:1px solid rgba(165,191,220,.16);
    background:linear-gradient(135deg,#102033,#0c1522);
    box-shadow:0 12px 38px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);
  }
  #appShell .home-banner > img {
    height:clamp(190px,30vh,280px); max-height:280px;
    object-fit:cover; object-position:center; border-radius:0;
  }
  #appShell .home-banner .hdr-greet { padding:24px; gap:14px; }
  #appShell .hdr-greet h2 { font-size:23px; line-height:1.4; }
  #appShell .hdr-greet p { font-size:19px; line-height:1.55; color:#b7c8dc; }
  #appShell .hdr-greet img { width:52px; height:52px; border:2px solid rgba(125,211,252,.35); }
  #appShell .sec-hdr { margin-top:4px; margin-bottom:18px; }
  #appShell .sec-hdr h3 { font-size:28px; letter-spacing:0; font-weight:700; }
  #appShell .trip-hcard2 {
    background:linear-gradient(150deg,#101d2d,#0c1522);
    border:1px solid rgba(155,182,214,.15); border-radius:20px; overflow:hidden;
    box-shadow:0 8px 28px rgba(0,0,0,.15);
    transition:transform .2s,border-color .2s,box-shadow .2s;
  }
  #appShell .trip-hcard2:hover {
    transform:translateY(-3px); border-color:rgba(125,211,252,.36);
    box-shadow:0 16px 36px rgba(0,0,0,.24);
  }
  #appShell .trip-hcard2 .thc-photo > img,
  #appShell .trip-hcard2 .lux-locked-ov {
    height:clamp(180px,29vh,260px); border-radius:0;
  }
  #appShell .trip-hcard2 .thc-photo > img { object-fit:cover; object-position:center; }
  #appShell .trip-hcard2 .thc-overlay { padding:18px 20px 20px; gap:0; }
  #appShell .trip-hcard2 .thc-title { font-size:27px; line-height:1.4; margin-bottom:10px; }
  #appShell .trip-hcard2 .thc-meta-row { font-size:19px; color:#b3c3d7; margin-bottom:18px; }
  #appShell .trip-hcard2 .thc-bottom-row { padding-top:16px; border-top:1px solid rgba(162,189,223,.13); }
  #appShell .trip-hcard2 .thc-price strong { font-size:32px; color:#f3f7fc; letter-spacing:.2px; }
  #appShell .trip-hcard2 .thc-price > span { color:#aebfd4; font-size:18px; }
  #appShell .trip-hcard2 .thc-seats-pill { border-radius:9px; padding:7px 11px; box-shadow:none; }
  #appShell .thc-status-pill { border-radius:9px; box-shadow:0 3px 12px rgba(0,0,0,.15); animation:none; }
  #appShell .pc-card-caption { margin-bottom:12px; color:#aebfd3; font-size:17px; }
  #appShell .pc-card-caption > span:last-child { color:#8ed8f9; font-size:17px; }
  #appShell :is(.my-profile,.notif-item,.stat-bar,.hist-card,.past-card) {
    border:1px solid rgba(159,185,216,.14); box-shadow:0 8px 24px rgba(0,0,0,.13);
  }
  #appShell .notif-item { background:linear-gradient(135deg,#101c2c,#0c1522); border-radius:18px; }
  #appShell .past-card { overflow:hidden; }
  /* Detail image gets more horizontal room and no crop. */
  #modalBg .modal-sheet {
    max-width:1240px; grid-template-columns:minmax(0,1.05fr) minmax(0,1.1fr);
    border-color:rgba(168,194,223,.2); border-radius:24px;
    box-shadow:0 30px 90px rgba(0,0,0,.48);
    background:linear-gradient(145deg,#102033,#0c1524 60%);
  }
  #modalBg .modal-img { padding:8px; object-fit:contain; background:#080f19; }
  #modalBg .modal-body { padding:30px 28px 20px; }
  #modalBg .modal-card {
    background:rgba(160,190,222,.045); border-color:rgba(159,185,216,.12);
    border-radius:14px; box-shadow:inset 0 1px rgba(255,255,255,.025);
  }
  #modalBg .modal-hl { background:rgba(160,190,222,.035); border:1px solid rgba(159,185,216,.09); border-radius:14px; }
  #modalBg .modal-price { border:1px solid rgba(52,211,153,.18); }
  #modalBg .modal-sheet > .btn-book {
    background:linear-gradient(120deg,#0369a1,#179bd2);
    border:1px solid rgba(125,211,252,.25); border-radius:13px;
    box-shadow:0 6px 20px rgba(2,132,199,.15); font-weight:700;
  }
  #modalBg .modal-sheet > .btn-book:disabled { background:#1e293b; border-color:#334155; color:#94a3b8; box-shadow:none; }
  :is(#bookingPage2,#equipPage,#reviewPage) {
    background:radial-gradient(ellipse at 80% 0,rgba(37,82,117,.12),transparent 55%),#070d16;
  }
  #bookingPage2 .van-block, #bookingPage2 .seat-form-card,
  #equipPage .eq-item-card, #reviewPage .review-card {
    background:linear-gradient(145deg,#111f30,#0c1523);
    border:1px solid rgba(160,186,218,.15); border-radius:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
  }
  #bookingPage2 .van-block-title { color:#d5e9f8; }
  #bookingPage2 .van-grid-header { color:#98afc9; }
  #bookingPage2 .seat.empty { background:linear-gradient(145deg,#19845f,#116749); box-shadow:0 2px 0 #094c36; }
  #bookingPage2 .seat.booked { background:linear-gradient(145deg,#bf4451,#98313e); box-shadow:0 2px 0 #6c2330; }
  #bookingPage2 :is(.seat.selected,.onsite-slot.selected) { background:linear-gradient(145deg,#f1d275,#e4b647); color:#241b06; animation:none; box-shadow:0 0 0 2px rgba(255,228,141,.6); transform:scale(.98); }
  #bookingPage2 .onsite-slot:not(.selected):not(.booked):not(.locking) { background:#162438; border:1px solid #30435c; box-shadow:0 2px 0 #0b1422; }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.ig input,.ig select,.ig textarea) {
    background:#0b1422; border:1px solid #2a3c53; color:#edf3fb;
    transition:border-color .18s,box-shadow .18s;
  }
  :is(#bookingPage2,#equipPage,#reviewPage) :is(.ig input,.ig select,.ig textarea):focus {
    border-color:#64bfe8; box-shadow:0 0 0 3px rgba(56,189,248,.09);
  }
  :is(#bookingPage2,#equipPage,#reviewPage) .ig input:disabled { color:#bdcde0; opacity:1; background:#101d2c; }
  :is(#bookingPage2,#equipPage,#reviewPage) .btn-confirm.ready,
  #payModal .btn-pay-ok:not(:disabled) {
    background:linear-gradient(120deg,#0369a1,#179bd2); color:#fff;
    border:1px solid rgba(125,211,252,.25); box-shadow:0 6px 20px rgba(2,132,199,.16);
  }
  #equipPage .eq-trip-card { transition:border-color .18s,background .18s; }
  #equipPage .eq-trip-card.selected { border-color:#69c4eb; background:#102b3d; box-shadow:inset 3px 0 #69c4eb; }
  #equipPage .eq-step-btn { background:#1a2d43; border:1px solid #324962; border-radius:11px; }
  #payModal .pay-box { background:linear-gradient(145deg,#102033,#0c1524); border:1px solid #2b4057; box-shadow:0 30px 90px rgba(0,0,0,.45); }
  #payModal .deposit-summary-box { border-style:solid; border-width:1px; }
  #payModal .slip-drop { background:#101e30; border-color:#405570; }
  #drawer { background:linear-gradient(160deg,#101c2d,#090f1a); border-left-color:#293c53; }
  #drawer .info-block { background:rgba(166,192,221,.04); border-radius:12px; padding:18px; }
  #adminPopup > div { border-color:rgba(162,188,218,.2) !important; box-shadow:0 30px 90px rgba(0,0,0,.45); }
}
@media (min-width:1024px) and (max-height:650px) {
  #appShell .home-banner > img { height:190px; max-height:190px; }
  #appShell .home-banner .hdr-greet { padding:18px; }
  #appShell .trip-hcard2 .thc-photo > img, #appShell .trip-hcard2 .lux-locked-ov { height:180px; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #appShell .trip-hcard2, #appShell .bnav-item { transition:none; }
  #appShell .trip-hcard2:hover { transform:none; }
  #bookingPage2 :is(.seat,.onsite-slot) { animation:none; transition:none; }
}
/* DESKTOP ENTRANCE V11: existing header artwork, no mobile changes. */
@media (min-width:1024px) {
  #appShell.pc-entry-active { padding-left:0; }
  #appShell.pc-entry-active > :not(#pcEntry) { display:none !important; }
  #appShell #pcEntry {
    position:relative; isolation:isolate; display:flex; flex-direction:column;
    width:100%; min-height:640px; min-height:max(640px,100dvh); overflow:hidden;
    padding:28px clamp(28px,5vw,88px) 22px; background:#060b13; color:#f1f5f9;
  }
  #pcEntry .pc-entry-art { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:center 35%; z-index:-3; }
  #pcEntry::before { content:""; position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg,rgba(6,11,19,.2),transparent 25%,transparent 52%,rgba(6,11,19,.75) 82%,#060b13); pointer-events:none; }
  #pcEntry .pc-entry-top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
  #pcEntry .pc-entry-brand { display:flex; align-items:center; gap:12px; font-size:25px; font-weight:700; }
  #pcEntry .pc-entry-brand img { width:48px; height:48px; object-fit:contain; border-radius:50%; }
  #pcEntry .pc-entry-tag { font-size:19px; color:#c4d3e4; }
  #pcEntry .pc-entry-space { flex:1; min-height:320px; }
  #pcEntry .pc-entry-menu { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; width:100%; max-width:1440px; margin:0 auto; }
  #pcEntry .pc-entry-button {
    position:relative; min-width:0; min-height:156px; padding:24px; text-align:left;
    color:#f1f5f9; font:inherit; cursor:pointer; border:1px solid rgba(186,208,233,.28); border-radius:20px;
    background:linear-gradient(135deg,rgba(18,34,53,.92),rgba(9,20,35,.9));
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    box-shadow:0 12px 34px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
    transition:transform .2s,border-color .2s,background .2s;
  }
  #pcEntry .pc-entry-button.primary { background:linear-gradient(130deg,rgba(3,93,146,.9),rgba(12,39,66,.94)); border-color:rgba(87,202,251,.8); }
  #pcEntry .pc-entry-button svg { display:block; width:32px; height:32px; margin-bottom:16px; stroke:#bfe9fc; fill:none; stroke-width:1.6; }
  #pcEntry .pc-entry-button strong { display:block; font-size:26px; line-height:1.3; margin-bottom:6px; }
  #pcEntry .pc-entry-button small { display:block; font-size:18px; line-height:1.4; color:#b7c9dc; }
  #pcEntry .pc-entry-button::after { content:"↗"; position:absolute; top:22px; right:24px; font-size:26px; color:#d5eafa; }
  #pcEntry .pc-entry-button:hover { transform:translateY(-4px); border-color:#7dd3fc; }
  #pcEntry .pc-entry-button:focus-visible, #appShell .pc-entry-return:focus-visible { outline:3px solid #bae6fd; outline-offset:5px; }
  #pcEntry .pc-entry-footer { display:flex; justify-content:space-between; gap:20px; font-size:17px; color:#9bb0c9; padding-top:22px; }
  #appShell .pc-entry-return { order:4; margin-top:8px; padding:12px; width:100%; border:1px solid #2a4058; border-radius:12px; color:#bdd3e8; background:transparent; font:inherit; font-size:18px; cursor:pointer; }
}
@media (min-width:1024px) and (max-height:700px) {
  #appShell #pcEntry { min-height:max(560px,100dvh); padding-top:18px; }
  #pcEntry .pc-entry-space { min-height:260px; }
  #pcEntry .pc-entry-button { min-height:134px; padding:18px; }
  #pcEntry .pc-entry-button svg { width:28px; height:28px; margin-bottom:10px; }
  #pcEntry .pc-entry-button strong { font-size:24px; }
  #pcEntry .pc-entry-button small { font-size:17px; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #pcEntry .pc-entry-button { transition:none; }
  #pcEntry .pc-entry-button:hover { transform:none; }
}
/* DESKTOP ENTRANCE V12: artwork and menu occupy separate normal-flow rows. */
@media (min-width:1024px) {
  #appShell #pcEntry {
    min-height:100vh; min-height:100dvh; padding:0;
    overflow:visible; background:#03060a;
  }
  #pcEntry::before { content:none; }
  #pcEntry .pc-entry-top {
    order:0; flex-shrink:0; padding:18px clamp(28px,5vw,88px);
    background:#060b13;
  }
  #pcEntry .pc-entry-art {
    order:1; position:static; inset:auto; z-index:auto; display:block; flex:none;
    width:100%; height:clamp(280px,calc(100dvh - 300px),680px);
    object-fit:contain; object-position:center; background:#060b13;
  }
  #pcEntry .pc-entry-space { display:none; }
  #pcEntry .pc-entry-menu {
    order:2; flex-shrink:0; position:relative; max-width:none; margin:0;
    padding:28px clamp(28px,5vw,88px) 20px;
    background:linear-gradient(180deg,#060b13 0%,#07101a 25%,#03060a 100%);
  }
  #pcEntry .pc-entry-button { min-height:140px; padding:20px; }
  #pcEntry .pc-entry-button svg { margin-bottom:12px; }
  #pcEntry .pc-entry-footer {
    order:3; flex:1; align-items:flex-end; flex-wrap:wrap; margin:0;
    padding:8px clamp(28px,5vw,88px) 22px; background:#03060a;
  }
}
/* DESKTOP ENTRANCE V13: full-bleed artwork and compact right-hand actions. */
@media (min-width:1024px) {
  #appShell #pcEntry {
    min-height:max(560px,100dvh); padding:0; overflow:hidden;
    background:#060b13; display:flex; flex-direction:column;
  }
  #pcEntry .pc-entry-art {
    position:absolute; inset:0; z-index:-3; width:100%; height:100%;
    object-fit:cover; object-position:center; margin:0;
  }
  #pcEntry::before {
    content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
    background:linear-gradient(180deg,rgba(6,11,19,.25),transparent 22%,transparent 62%,rgba(6,11,19,.48) 100%);
  }
  #pcEntry .pc-entry-top {
    background:transparent; padding:18px 5vw; min-height:76px;
  }
  #pcEntry .pc-entry-space {
    display:block; flex:1; min-height:calc(65dvh - 76px);
  }
  #pcEntry .pc-entry-menu {
    flex:none; width:51%; max-width:740px; margin:0 5% 0 44%;
    padding:0; background:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  }
  #pcEntry .pc-entry-button {
    display:flex; align-items:center; gap:12px;
    min-height:56px; padding:12px 36px 12px 16px; border-radius:13px;
    background:rgba(10,24,40,.84); box-shadow:0 6px 20px rgba(0,0,0,.18);
  }
  #pcEntry .pc-entry-button svg { flex:0 0 23px; width:23px; height:23px; margin:0; }
  #pcEntry .pc-entry-button strong { font-size:21px; line-height:1.35; margin:0; }
  #pcEntry .pc-entry-button small { display:none; }
  #pcEntry .pc-entry-button::after { top:50%; right:13px; transform:translateY(-50%); font-size:20px; }
  #pcEntry .pc-entry-button.primary { background:linear-gradient(120deg,rgba(3,105,161,.94),rgba(11,63,98,.92)); }
  #pcEntry .pc-entry-footer {
    flex:none; padding:20px 5vw 16px; background:transparent; font-size:16px;
  }
}
/* DESKTOP ENTRANCE V14: raised button surfaces; approved layout unchanged. */
@media (min-width:1024px) {
  #pcEntry .pc-entry-button {
    isolation:isolate; overflow:hidden;
    border:1px solid rgba(149,184,219,.38);
    border-top-color:rgba(211,233,253,.55);
    border-bottom-color:rgba(31,62,94,.9);
    background:linear-gradient(170deg,rgba(48,72,100,.97) 0%,rgba(25,46,71,.96) 48%,rgba(14,30,51,.97) 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.19),inset 0 -1px 0 rgba(0,0,0,.32),0 4px 0 #081423,0 9px 18px rgba(0,0,0,.36);
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
  }
  #pcEntry .pc-entry-button::before {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(110deg,rgba(255,255,255,.1),transparent 38%,transparent 70%,rgba(145,205,255,.04));
  }
  #pcEntry .pc-entry-button svg {
    color:#d4efff; stroke:currentColor; border-radius:6px;
    background:rgba(114,176,230,.1); box-shadow:0 0 0 5px rgba(114,176,230,.1);
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
  }
  #pcEntry .pc-entry-button strong { color:#f5f9ff; font-weight:700; }
  #pcEntry .pc-entry-button::after { color:#bcd9ef; text-shadow:0 1px 2px #06111c; }
  #pcEntry .pc-entry-button.primary {
    border-color:rgba(106,211,255,.7); border-top-color:#abe8ff; border-bottom-color:#086190;
    background:linear-gradient(165deg,#209ed6 0%,#087fb9 44%,#075581 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.2),0 4px 0 #033a59,0 9px 22px rgba(0,57,95,.45);
  }
  #pcEntry .pc-entry-button.primary svg { background:rgba(215,245,255,.12); box-shadow:0 0 0 5px rgba(215,245,255,.12); }
  #pcEntry .pc-entry-button:hover {
    transform:translateY(-2px); filter:brightness(1.1); border-top-color:#c7ecff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.25),0 6px 0 #081423,0 13px 24px rgba(0,0,0,.4);
  }
  #pcEntry .pc-entry-button.primary:hover {
    box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 0 #033a59,0 13px 26px rgba(0,57,95,.5);
  }
  #pcEntry .pc-entry-button:active {
    transform:translateY(3px); filter:brightness(.98);
    box-shadow:inset 0 2px 5px rgba(0,0,0,.23),0 1px 0 #081423,0 3px 8px rgba(0,0,0,.25);
  }
  #pcEntry .pc-entry-button:focus-visible { outline:3px solid #c6eeff; outline-offset:5px; }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #pcEntry .pc-entry-button { transition:none; }
  #pcEntry .pc-entry-button:hover, #pcEntry .pc-entry-button:active { transform:none; }
}
/* DESKTOP BOOKING V15: trip/date stacked left, reference diagram right. */
@media (min-width:1024px) {
  #bookingPage2 .bk-body > div:first-child { grid-column:1 / -1; grid-row:1; }
  #bookingPage2 .bk-body > .ig:nth-child(2) {
    grid-column:1; grid-row:2; align-self:start; margin:0 0 14px;
  }
  #bookingPage2 .bk-body > .ig:nth-child(3) {
    grid-column:1; grid-row:3; align-self:start; margin:0 0 16px;
  }
  #bookingPage2 .bk-body > .seat-map-img {
    grid-column:2; grid-row:2 / 4; align-self:center; justify-self:center;
    display:block; width:100%; max-width:520px; height:190px; max-height:190px;
    object-fit:contain; margin:0 0 16px; padding:8px;
    background:rgba(12,21,36,.7); border:1px solid rgba(159,185,216,.16); border-radius:16px;
  }
  #bookingPage2 .bk-body > label { grid-column:1 / -1; grid-row:4; }
}
/* DESKTOP V16: enlarge the actual reference image, not only its frame. */
@media (min-width:1024px) {
  #bookingPage2 .bk-body { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  #bookingPage2 .bk-body > .seat-map-img {
    width:100%; max-width:none; height:340px; max-height:340px;
    padding:4px; object-fit:contain;
  }
}
/* DESKTOP V17: compact booking metadata + unified premium interior surfaces. */
@media (min-width:1024px) {
  /* Extra image height belongs to a spare row, never between trip and date. */
  #bookingPage2 .bk-body { grid-template-rows:auto max-content max-content minmax(0,1fr) auto; }
  #bookingPage2 .bk-body > .ig:nth-child(2) { grid-row:2; margin-bottom:12px; }
  #bookingPage2 .bk-body > .ig:nth-child(3) { grid-row:3; margin-bottom:0; }
  #bookingPage2 .bk-body > .seat-map-img { grid-row:2 / 5; align-self:start; }
  #bookingPage2 .bk-body > label { grid-row:5; margin-top:18px; }

  /* Inset photography, satin navy frame, clear editorial hierarchy. */
  #appShell .trip-hcard2 {
    padding:10px; border-radius:24px;
    border:1px solid rgba(169,193,224,.23); border-top-color:rgba(211,229,250,.35);
    background:linear-gradient(145deg,#1b2a3e 0%,#101c2c 42%,#0b1522 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 0 rgba(3,9,17,.55),0 18px 35px rgba(0,0,0,.22);
  }
  #appShell .trip-hcard2:hover {
    border-color:rgba(139,206,237,.55); transform:translateY(-3px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 5px 0 rgba(3,9,17,.5),0 24px 44px rgba(0,0,0,.3);
  }
  #appShell .trip-hcard2 .thc-photo > img,
  #appShell .trip-hcard2 .lux-locked-ov { border-radius:16px; }
  #appShell .trip-hcard2 .thc-overlay { padding:18px 12px 12px; }
  #appShell .trip-hcard2 .thc-title { font-size:28px; line-height:1.4; font-weight:700; color:#f4f7fc; }
  #appShell .pc-card-caption { align-items:center; margin-bottom:14px; }
  #appShell .pc-card-caption > span:first-child { color:#c1d0e2; }
  #appShell .pc-card-caption > span:last-child {
    padding:5px 10px; border:1px solid rgba(133,201,235,.22); border-radius:8px;
    background:rgba(111,184,225,.07); color:#b6e6fb;
  }
  #appShell .trip-hcard2 .thc-bottom-row {
    margin-top:auto; padding:14px 12px; border:1px solid rgba(160,190,222,.1);
    border-radius:13px; background:linear-gradient(120deg,rgba(1,8,16,.3),rgba(105,167,213,.06));
  }
  #appShell .trip-hcard2 .thc-price strong { color:#f1dfb7; font-size:32px; }
  #appShell .thc-status-pill {
    border:1px solid rgba(222,236,252,.2); box-shadow:0 3px 12px rgba(0,0,0,.28);
  }

  /* Detail remains readable and scrollable, with a separate visible CTA. */
  #modalBg .modal-sheet {
    border:1px solid rgba(177,201,228,.3); border-top-color:rgba(219,234,253,.45);
    background:linear-gradient(135deg,#192a40,#0d1726 65%);
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 32px 90px rgba(0,0,0,.6);
  }
  #modalBg .modal-img {
    padding:18px; object-fit:contain;
    background:radial-gradient(ellipse at center,#17283a,#080f1a 75%);
    border-right:1px solid rgba(169,195,226,.12);
  }
  #modalBg .modal-body h2 { font-size:34px; font-weight:700; line-height:1.35; }
  #modalBg .modal-date { color:#a5dff8; }
  #modalBg .modal-price {
    display:flex; padding:16px 18px; border-radius:14px; font-size:28px;
    color:#f1dfb7; background:linear-gradient(120deg,rgba(189,155,93,.14),rgba(189,155,93,.03));
    border:1px solid rgba(213,185,132,.25);
  }
  #modalBg .modal-payment { border-radius:12px; background:rgba(245,158,11,.06); }
  #modalBg .modal-card {
    background:linear-gradient(145deg,rgba(134,172,214,.09),rgba(15,29,47,.45));
    border:1px solid rgba(172,195,224,.17); border-top-color:rgba(207,226,249,.24);
    box-shadow:inset 0 1px rgba(255,255,255,.04),0 4px 12px rgba(0,0,0,.12);
  }
  #modalBg .modal-card strong { font-size:23px; }
  #modalBg .modal-hl { border-left:2px solid #76b9d7; padding:18px 20px; }
  #modalBg .modal-seat-row { background:rgba(6,13,23,.35); border-color:rgba(167,193,222,.14); }
  #modalBg .modal-sheet > .btn-book:not(:disabled) {
    background:linear-gradient(165deg,#249fce,#0877a8 55%,#06517a);
    border-top-color:#a5e5ff;
    box-shadow:inset 0 1px rgba(255,255,255,.25),0 3px 0 #03334f,0 10px 22px rgba(0,35,60,.3);
  }

  /* The same frame treatment for every interior screen, not the entrance/login. */
  #appShell :is(.my-profile,.hist-card,.notif-item,.stat-bar),
  #bookingPage2 :is(.van-block,.seat-form-card),
  #equipPage :is(.eq-item-card,.eq-trip-card,.eq-summary-card),
  #reviewPage :is(.review-card,#writeReviewBox),
  #drawer .info-block {
    border:1px solid rgba(165,191,224,.19); border-top-color:rgba(206,226,247,.29);
    background:linear-gradient(145deg,#18283c,#0d1828 70%);
    box-shadow:inset 0 1px rgba(255,255,255,.05),0 10px 28px rgba(0,0,0,.17);
    border-radius:18px;
  }
  #equipPage .eq-trip-card.selected { border-color:#7dd3fc; background:linear-gradient(135deg,#123952,#102439); }
  #equipPage .eq-item-img { border:1px solid rgba(213,230,250,.3); border-radius:14px; }
  #reviewPage .review-photo { border-radius:14px; border:1px solid rgba(166,192,222,.16); }
  #payModal .pay-box, #adminPopup > div {
    border:1px solid rgba(178,203,232,.28) !important;
    background:linear-gradient(145deg,#192b41,#0c1625 65%) !important;
    box-shadow:inset 0 1px rgba(255,255,255,.08),0 28px 80px rgba(0,0,0,.5);
  }
  #payModal .slip-drop { border-radius:14px; background:#101e30; }
  #payModal .deposit-summary-box { border-radius:16px; background:linear-gradient(135deg,rgba(16,185,129,.14),rgba(56,189,248,.04)); }
  :is(#successPage2,#equipReceiptPage) .receipt {
    background:linear-gradient(135deg,#fffdf7,#f3eddf); border:1px solid #d7c49b;
    box-shadow:inset 0 1px #fff,0 5px 0 rgba(182,155,102,.25),0 20px 44px rgba(0,0,0,.3);
    border-radius:18px;
  }
  :is(#bookingPage2,#equipPage,#reviewPage) .btn-confirm.ready,
  #payModal .btn-pay-ok:not(:disabled) {
    background:linear-gradient(165deg,#249fce,#0877a8 55%,#06517a);
    border:1px solid rgba(142,216,249,.5); border-top-color:#a5e5ff;
    box-shadow:inset 0 1px rgba(255,255,255,.24),0 3px 0 #03334f,0 8px 20px rgba(0,35,60,.3);
  }
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce) {
  #appShell .trip-hcard2:hover { transform:none; }
}
/* DESKTOP V18: align reference diagram with the booking heading. */
@media (min-width:1024px) {
  #bookingPage2 .bk-body { grid-template-rows:max-content max-content max-content minmax(0,1fr) auto; }
  #bookingPage2 .bk-body > div:first-child { grid-column:1; grid-row:1; align-self:start; }
  #bookingPage2 .bk-body > .seat-map-img { grid-column:2; grid-row:1 / 5; align-self:start; object-position:center top; }
}

/* ============================================================
   PREMIUM DESKTOP REFINEMENT — ยกระดับความหรูหรา ลดความรู้สึก "กล่องแข็งๆ"
   เป็นชั้นสุดท้ายที่ทับทุกอย่างก่อนหน้า (ต่อท้าย <style> ทั้งหมด) ใช้เฉพาะจอกว้าง 1024px+
   เท่านั้น ไม่กระทบมือถือแม้แต่บรรทัดเดียว — เพิ่มโทนทอง/แชมเปญ, เงาหลายชั้นให้มีมิติจริง,
   ฟอนต์เสริมแบบหรูสำหรับหัวข้อสำคัญ, และทรานสิชันที่นุ่มนวลขึ้นทั่วทั้งระบบ
   ============================================================ */
@media (min-width: 1024px) {
  #appShell {
    --gold: #d4b06a;
    --gold-soft: rgba(212, 176, 106, .16);
    --gold-line: rgba(212, 176, 106, .35);
    --luxury-font: 'Cormorant Garamond', Georgia, serif;
    background:
      radial-gradient(ellipse 900px 500px at 12% -8%, rgba(212, 176, 106, .05), transparent 55%),
      radial-gradient(ellipse 800px 600px at 100% 15%, rgba(56, 189, 248, .06), transparent 50%),
      #060b13;
  }

  /* ---------- หัวข้อสำคัญ: ฟอนต์เสริมทรงหรู + letter-spacing ที่ดูมีระดับ ---------- */
  #appShell .dt-section-hdr h2,
  #appShell .sec-hdr h3,
  #pcEntry .pc-entry-brand,
  #appShell .dt-hero-overlay h1 {
    font-family: var(--luxury-font);
    font-weight: 600;
    letter-spacing: .3px;
  }
  #appShell .dt-hero-overlay h1 { font-size: 46px; font-weight: 700; }
  #appShell .dt-section-hdr h2 { font-size: 25px; }
  #appShell .sec-hdr h3 { font-size: 21px; }
  #pcEntry .pc-entry-brand { font-size: 29px; }
  #pcEntry .pc-entry-button strong { font-family: var(--luxury-font); font-size: 28px; font-weight: 600; letter-spacing: .2px; }

  /* ---------- การ์ด/แผงหลัก: จากพื้นแบนเรียบ → มีมิติจริงด้วยเงาหลายชั้น + ไล่เฉดผิว ---------- */
  #appShell .dt-stat-card,
  #appShell .dt-quick-tile,
  #appShell .modal-grid,
  #pcEntry .pc-entry-button {
    background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012) 45%, rgba(0, 0, 0, .1));
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .06) inset,
      0 4px 10px -4px rgba(0, 0, 0, .4),
      0 20px 44px -14px rgba(0, 0, 0, .6);
    border-radius: 22px;
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease;
  }
  #appShell .dt-stat-card:hover,
  #appShell .dt-quick-tile:hover,
  #pcEntry .pc-entry-button:hover {
    border-color: var(--gold-line);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, .08) inset,
      0 4px 10px -4px rgba(0, 0, 0, .4),
      0 28px 56px -14px rgba(0, 0, 0, .65),
      0 0 40px -8px rgba(212, 176, 106, .25);
    transform: translateY(-4px);
  }

  /* ---------- ไอคอนวงกลมในการ์ด: จากพื้นเรียบ → มีแสงทองสะท้อนนุ่มๆ ---------- */
  #appShell .dt-stat-ico,
  #appShell .dt-quick-ico {
    background: linear-gradient(150deg, rgba(212, 176, 106, .22), rgba(212, 176, 106, .04));
    border: 1px solid var(--gold-line);
    box-shadow: 0 8px 20px -6px rgba(212, 176, 106, .25), inset 0 1px rgba(255, 255, 255, .15);
  }

  /* ---------- ปุ่มหลัก: เส้นขอบทองบางๆ + เงานุ่มแทนเงาแบนทึบ ---------- */
  #appShell .dt-btn-primary {
    border: 1px solid rgba(212, 176, 106, .4);
    box-shadow: 0 12px 28px -8px rgba(2, 132, 199, .5), inset 0 1px rgba(255, 255, 255, .2);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
  }
  #appShell .dt-btn-primary:hover {
    box-shadow: 0 16px 36px -8px rgba(2, 132, 199, .6), 0 0 0 1px var(--gold-soft), inset 0 1px rgba(255, 255, 255, .25);
  }

  /* ---------- แถบเมนูข้าง: จากแผงทึบสีเดียว → กระจกฝ้าหลายชั้นดูมีระดับ ---------- */
  #appShell .bnav {
    background: linear-gradient(180deg, rgba(10, 16, 26, .94), rgba(6, 11, 19, .98));
    border-right: 1px solid rgba(212, 176, 106, .12);
    box-shadow: 4px 0 40px rgba(0, 0, 0, .4);
  }
  #appShell .bnav-item.active {
    background: linear-gradient(135deg, rgba(212, 176, 106, .14), rgba(56, 189, 248, .08));
    box-shadow: inset 0 0 0 1px var(--gold-line);
  }

  /* ---------- การ์ดทริป: มุมโค้งมนขึ้น + เงาหลายชั้น + เส้นทองบางๆ ตอน hover ---------- */
  #appShell .trip-hcard2 {
    border-radius: 26px;
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4), 0 20px 44px -14px rgba(0, 0, 0, .6);
  }
  #appShell .trip-hcard2:hover {
    box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4), 0 28px 56px -14px rgba(0, 0, 0, .65), 0 0 0 1px var(--gold-line);
  }

  /* ---------- แท่นสายลุยตัวจริง: แสงทองรอบอันดับ 1 ให้ดูพิเศษกว่าเดิม ---------- */
  #appShell .podium-1st .podium-avatar {
    border-color: var(--gold);
    box-shadow: 0 0 30px -4px rgba(212, 176, 106, .5), 0 8px 24px rgba(0, 0, 0, .4);
  }

  /* ---------- เส้นแบ่งเนื้อหา: จากเส้นตรงแบนทึบ → ไล่เฉดจางที่ปลายทั้งสองข้าง ---------- */
  #appShell .divider { height: 1px; border: none; background: linear-gradient(90deg, transparent, rgba(212, 176, 106, .28) 20%, rgba(212, 176, 106, .28) 80%, transparent); }

  /* ---------- ปุ่มเมนู 4 ช่องหน้าแรกเดสก์ท็อป (pc-entry-menu): ย่อให้เล็กลง + ดูมีระดับขึ้น ---------- */
  #pcEntry .pc-entry-menu {
    max-width: 760px;
    gap: 12px;
  }
  #pcEntry .pc-entry-button {
    min-height: 0 !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
  }
  #pcEntry .pc-entry-button svg {
    flex: none !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 8px !important;
    box-sizing: content-box !important;
    border-radius: 50% !important;
    background: linear-gradient(150deg, rgba(212, 176, 106, .22), rgba(212, 176, 106, .04)) !important;
    border: 1px solid var(--gold-line);
  }
  #pcEntry .pc-entry-button strong {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .1px;
    margin: 0 !important;
  }
  #pcEntry .pc-entry-button small { display: none !important; }
  #pcEntry .pc-entry-button::after {
    content: "↗" !important;
    position: static !important;
    margin-left: auto !important;
    font-size: 16px !important;
    color: rgba(241, 245, 249, .5) !important;
  }
  #pcEntry .pc-entry-button:hover svg { border-color: var(--gold); }

  /* ---------- ป็อบอัพชำระเงิน (เลือกมัดจำ/เต็มจำนวน + ชำระส่วนที่เหลือ) — เดิมไม่มีการปรับสำหรับจอกว้างเลย ---------- */
  #appShell .pay-box { max-width: 480px; padding: 36px 34px; border-radius: 24px; border: 1px solid var(--gold-line); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px var(--gold-soft); }
  #appShell .pay-box h3 { font-size: 22px; }
  #appShell .pay-box .sub { font-size: 14px; }
  #appShell .deposit-summary-box { padding: 18px 20px; }
  #appShell .ds-label { font-size: 13px; }
  #appShell .ds-calc { font-size: 13px; }
  #appShell .ds-total { font-size: 26px; }
  #appShell .slip-drop { padding: 22px; }
  #appShell .btn-confirm { height: 56px; font-size: 16px; }

  /* ---------- ถูกใจ + คอมเมนต์ใต้รีวิว ---------- */
  #appShell .review-action-btn { font-size: 13.5px; padding: 8px 14px; }
  #appShell .review-comment-bubble .rc-name { font-size: 13px; }
  #appShell .review-comment-bubble .rc-text { font-size: 14px; }
  #appShell .review-comment-input-row input { font-size: 14px; padding: 11px 16px; }

  /* ---------- หัวข้อ "เผื่อจำเป็น" — จัดเป็นกริดแทนเรียงคอลัมน์เดียวยาวๆ บนจอกว้าง ---------- */
  #appShell #notifContent .prep-item-card { grid-column: span 1; }
  #appShell #notifContent:has(.prep-item-card) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-content: start; }
  #appShell #notifContent:has(.prep-item-card) > h3,
  #appShell #notifContent:has(.prep-item-card) > div:not(.prep-item-card) { grid-column: 1 / -1; }
  #appShell .prep-item-card { padding: 20px 22px; border-radius: 18px; border-color: var(--gold-line); }
  #appShell .prep-item-title { font-size: 15px; }
  #appShell .prep-detail-box { max-width: 620px; border-radius: 28px; padding: 40px 38px 44px; }
  #appShell .prep-detail-box h2 { font-size: 24px; }
  #appShell .prep-detail-body { font-size: 15px; }
}

/* ===== หน้าเช่าอุปกรณ์: พื้นหลังป่า + กล่องโปร่งใส ===== */
#equipPage{
  background:
    linear-gradient(rgba(3,10,16,.88),rgba(3,10,16,.95)),
    url('/ximg.php?f=1448375240586-882707db888b-1200.jpg')
    center/cover no-repeat fixed;
}
#equipPage .bk-hdr{
  background:rgba(4,12,20,.68);
  border-bottom:1px solid rgba(148,163,184,.11);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
#equipPage .bk-body > div:first-child{
  padding:15px 14px;
  border:1px solid rgba(148,163,184,.12);
  border-radius:18px;
  background:rgba(6,17,27,.42);
  box-shadow:0 12px 28px rgba(0,0,0,.14);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#equipPage .eq-sec-title{color:#7dd3fc}

/* เลือกทริปแบบ dropdown เดียว */
#equipPage #eqTripList{
  display:block !important;
  grid-template-columns:none !important;
  gap:0 !important;
}
#equipPage .eq-trip-select-wrap{
  position:relative;
  padding:12px;
  border:1px solid rgba(148,163,184,.15);
  border-radius:18px;
  background:rgba(8,22,34,.48);
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:eqGlassIn .28s ease both;
}
#equipPage .eq-trip-select-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 8px 2px;
  color:#b9c9d8;
  font-size:10px;
  font-weight:700;
}
#equipPage .eq-trip-select-label .dot{
  width:7px;height:7px;border-radius:50%;
  background:#38bdf8;
  box-shadow:0 0 10px rgba(56,189,248,.55);
}
#equipPage .eq-trip-select{
  width:100%;
  height:50px;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(125,211,252,.18);
  border-radius:14px;
  outline:none;
  padding:0 42px 0 13px;
  background:linear-gradient(180deg,rgba(13,30,45,.78),rgba(8,21,33,.78));
  color:#eef7ff;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
}
#equipPage .eq-trip-select:focus{
  border-color:rgba(125,211,252,.58);
  box-shadow:0 0 0 3px rgba(56,189,248,.075);
}
#equipPage .eq-trip-select-arrow{
  position:absolute;
  right:28px;
  bottom:26px;
  width:9px;height:9px;
  border-right:2px solid #7dd3fc;
  border-bottom:2px solid #7dd3fc;
  transform:rotate(45deg);
  pointer-events:none;
  animation:eqArrowFloat 1.8s ease-in-out infinite;
}
@keyframes eqArrowFloat{
  0%,100%{transform:translateY(-2px) rotate(45deg)}
  50%{transform:translateY(2px) rotate(45deg)}
}
#equipPage .eq-trip-selected-preview{
  margin-top:9px;
  padding:9px 11px;
  border-radius:12px;
  border:1px solid rgba(125,211,252,.11);
  background:rgba(3,12,20,.34);
  color:#90a8bb;
  font-size:10px;
  line-height:1.45;
  animation:eqGlassIn .24s ease both;
}
#equipPage .eq-trip-selected-preview strong{color:#e9f7ff}

/* การ์ดอุปกรณ์เดิม แค่โปร่งใสขึ้น */
#equipPage .eq-item-card{
  background:linear-gradient(145deg,rgba(11,27,41,.58),rgba(7,19,30,.44));
  border:1px solid rgba(148,163,184,.13);
  box-shadow:0 10px 26px rgba(0,0,0,.13);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
#equipPage .eq-step-btn{
  background:rgba(23,43,63,.58);
  border:1px solid rgba(148,163,184,.12);
}
#equipPage .eq-summary-card{
  background:linear-gradient(180deg,rgba(18,54,74,.45),rgba(6,20,31,.40));
  border:1px solid rgba(125,211,252,.16);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
#equipPage .eq-note{
  background:rgba(245,158,11,.055);
  border-color:rgba(245,158,11,.18);
}
#equipPage .sticky-bar{
  background:linear-gradient(180deg,rgba(4,12,20,.08),rgba(4,12,20,.92) 34%);
  border-top:1px solid rgba(148,163,184,.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#equipPage .eq-empty-trip{
  padding:18px 14px;
  text-align:center;
  border:1px solid rgba(148,163,184,.14);
  border-radius:16px;
  background:rgba(8,22,34,.45);
  color:#8499ab;
  font-size:11px;
  line-height:1.6;
}
@keyframes eqGlassIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
@media (min-width:900px){
  #equipPage #eqTripList{display:block !important;max-width:760px}
  #equipPage .eq-trip-select{height:58px;font-size:18px;padding-left:16px}
  #equipPage .eq-trip-select-label{font-size:15px}
  #equipPage .eq-trip-selected-preview{font-size:15px}
}



/* เช่าของ: เลือกทริปแบบการ์ด (แทน <select> ที่บาง iPhone แตะเลือกไม่ได้) */
#equipPage .eq-trip-picks{display:flex;flex-direction:column;gap:8px}
#equipPage .eq-trip-pick{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px 9px 9px;border-radius:14px;text-align:left;cursor:pointer;
  font-family:inherit;color:#eef7ff;border:1.5px solid rgba(125,211,252,.18);background:linear-gradient(180deg,rgba(13,30,45,.78),rgba(8,21,33,.78));
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:border-color .15s,background .15s}
#equipPage .eq-trip-pick img,#equipPage .eq-trip-pick-ic{flex:none;width:46px;height:46px;border-radius:11px;object-fit:cover;display:grid;place-items:center;background:rgba(5,46,62,.7);font-size:20px}
#equipPage .eq-trip-pick-x{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#equipPage .eq-trip-pick-x b{font-size:13.5px;line-height:1.3}
#equipPage .eq-trip-pick-x small{font-size:11.5px;color:#9fb3c0}
#equipPage .eq-trip-pick-check{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:2px solid rgba(125,211,252,.35);font-size:13px;font-weight:900;color:#04212b}
#equipPage .eq-trip-pick.on{border-color:#38bdf8;background:linear-gradient(180deg,rgba(14,165,233,.22),rgba(8,47,73,.55));box-shadow:0 0 0 3px rgba(56,189,248,.12)}
#equipPage .eq-trip-pick.on .eq-trip-pick-check{background:#38bdf8;border-color:#38bdf8}
#equipPage .eq-trip-pick:active{transform:scale(.985)}
/* ==== css/80-admin-center.css ==== */
/*! © 2569 เที่ยวนี่เหอะ (tiaewneehur.com) สงวนลิขสิทธิ์ · ห้ามคัดลอก ดัดแปลง หรือนำไปใช้โดยไม่ได้รับอนุญาต · TNH-ECAEB7B82022 */
/* ============================================================
   ADMIN CENTER — integrated in main app
   ============================================================ */
:root{
  --adm-bg:#07111c;
  --adm-card:rgba(12,28,43,.70);
  --adm-card2:rgba(8,20,32,.78);
  --adm-line:rgba(148,163,184,.14);
  --adm-cyan:#55c8f4;
  --adm-cyan2:#8bdfff;
  --adm-green:#34d399;
  --adm-amber:#fbbf24;
  --adm-red:#fb7185;
}

/* Password gate */
#adminGate{
  position:fixed;inset:0;z-index:32000;
  display:none;align-items:center;justify-content:center;
  padding:18px;
  background:rgba(2,7,13,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
#adminGate.show{display:flex;animation:admFade .18s ease both}
.admin-gate-card{
  position:relative;
  width:min(100%,390px);
  overflow:hidden;
  padding:25px 20px 20px;
  border:1px solid rgba(125,211,252,.18);
  border-radius:25px;
  background:
    linear-gradient(rgba(4,13,21,.82),rgba(4,13,21,.94)),
    url('/ximg.php?f=1448375240586-882707db888b-900.jpg')
    center/cover no-repeat;
  box-shadow:0 28px 80px rgba(0,0,0,.55);
  animation:admGateIn .28s cubic-bezier(.2,.85,.2,1) both;
}
.admin-gate-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 85% 0,rgba(56,189,248,.13),transparent 34%);
}
.admin-gate-close{
  position:absolute;right:12px;top:12px;z-index:2;
  width:36px;height:36px;border-radius:12px;
  border:1px solid rgba(148,163,184,.15);
  background:rgba(6,16,26,.65);color:#dbeafe;font-size:20px;
}
.admin-gate-logo{
  position:relative;z-index:1;
  display:block;
  width:70px;height:70px;margin:4px auto 12px;
  border-radius:22px;object-fit:cover;
  box-shadow:0 0 0 5px rgba(56,189,248,.06),0 10px 25px rgba(0,0,0,.28);
}
.admin-gate-copy{position:relative;z-index:1;text-align:center}
.admin-gate-copy h2{font-size:21px;color:#fff;margin:0;font-weight:850}
.admin-gate-copy p{font-size:10.5px;color:#91a6b8;margin:5px 0 17px;line-height:1.5}
.admin-pass-wrap{position:relative;z-index:1}
.admin-pass-wrap input{
  width:100%;height:52px;
  padding:0 48px 0 14px;
  border:1px solid rgba(125,211,252,.17);
  border-radius:15px;outline:none;
  background:rgba(5,16,26,.72);color:#fff;
  font:inherit;font-size:14px;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.admin-pass-wrap input:focus{
  border-color:rgba(125,211,252,.55);
  box-shadow:0 0 0 3px rgba(56,189,248,.07);
}
.admin-pass-eye{
  position:absolute;right:7px;top:7px;width:38px;height:38px;
  border:0;border-radius:10px;background:transparent;color:#8da3b8;font-size:16px
}
.admin-login-btn{
  position:relative;z-index:1;
  width:100%;height:50px;margin-top:10px;border:0;border-radius:15px;
  background:linear-gradient(135deg,#0284c7,#38bdf8);
  color:#fff;font:inherit;font-size:13px;font-weight:850;
  box-shadow:0 10px 24px rgba(2,132,199,.20);
}
.admin-login-btn:disabled{opacity:.55}
.admin-login-error{
  position:relative;z-index:1;
  display:none;margin-top:9px;padding:8px 10px;border-radius:10px;
  background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.16);
  color:#fda4af;font-size:10px;text-align:center
}
.admin-login-error.show{display:block}

/* Main admin full page */
#adminCenter{
  position:fixed;inset:0;z-index:31000;
  display:none;overflow:hidden;
  background:
    radial-gradient(circle at 95% 0,rgba(37,129,173,.11),transparent 28%),
    radial-gradient(circle at 0 75%,rgba(18,81,52,.08),transparent 28%),
    #07111c;
  color:#eaf5ff;
}
#adminCenter.show{display:flex;flex-direction:column;animation:admFade .20s ease both}
@keyframes admFade{from{opacity:0}to{opacity:1}}
@keyframes admGateIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

.admin-topbar{
  flex:0 0 auto;
  min-height:66px;padding:10px 13px;
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--adm-line);
  background:rgba(5,14,23,.80);
  backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
}
.admin-brand{
  min-width:0;display:flex;align-items:center;gap:9px;flex:1
}
.admin-brand img{
  width:39px;height:39px;border-radius:12px;object-fit:cover;
  border:1px solid rgba(125,211,252,.18)
}
.admin-brand strong{display:block;font-size:12px;color:#fff}
.admin-brand small{
  display:flex;align-items:center;gap:5px;margin-top:2px;
  color:#6f879c;font-size:8px;letter-spacing:.45px
}
.admin-online-dot{
  width:6px;height:6px;border-radius:50%;background:#34d399;
  box-shadow:0 0 8px rgba(52,211,153,.65);
  animation:admOnline 1.8s ease-in-out infinite
}
@keyframes admOnline{50%{opacity:.45}}
.admin-top-actions{display:flex;gap:6px}
.admin-icon-btn{
  width:38px;height:38px;display:grid;place-items:center;
  border:1px solid var(--adm-line);border-radius:12px;
  background:rgba(11,26,40,.60);color:#b8c9d8;font-size:15px
}
.admin-icon-btn:active{transform:scale(.93)}
.admin-icon-btn.danger{color:#fb7185}

/* nav */
.admin-nav{
  flex:0 0 auto;
  display:flex;gap:5px;overflow-x:auto;
  padding:9px 10px 8px;
  border-bottom:1px solid rgba(148,163,184,.08);
  background:rgba(6,16,26,.72);
  scrollbar-width:none;
}
.admin-nav::-webkit-scrollbar{display:none}
.admin-nav-btn{
  flex:0 0 auto;
  min-width:70px;padding:8px 10px;
  border:1px solid transparent;border-radius:12px;
  background:transparent;color:#71889d;
  font:inherit;font-size:9.5px;font-weight:750;
  transition:.18s ease
}
.admin-nav-btn span{display:block;font-size:16px;margin-bottom:2px}
.admin-nav-btn.active{
  color:#dff6ff;
  background:rgba(56,189,248,.09);
  border-color:rgba(125,211,252,.14);
  box-shadow:inset 0 -2px 0 rgba(56,189,248,.55)
}

/* body */
.admin-body{
  flex:1;overflow-y:auto;
  padding:14px 12px calc(30px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling:touch
}
.admin-view{display:none;animation:admViewIn .22s ease both}
.admin-view.active{display:block}
@keyframes admViewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.admin-view-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px;
  margin:2px 1px 13px
}
.admin-view-head h2{font-size:18px;margin:0;color:#fff}
.admin-view-head p{font-size:9px;color:#71879a;margin:3px 0 0}
.admin-mini-action{
  flex:0 0 auto;padding:7px 9px;border:1px solid var(--adm-line);border-radius:10px;
  background:rgba(10,25,39,.58);color:#9fc5dc;font:inherit;font-size:9px
}

/* stats */
.admin-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:15px
}
.admin-stat{
  position:relative;overflow:hidden;
  min-height:91px;padding:13px;
  border:1px solid var(--adm-line);border-radius:17px;
  background:linear-gradient(145deg,rgba(13,31,47,.70),rgba(8,21,33,.56));
  box-shadow:0 9px 24px rgba(0,0,0,.12);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.admin-stat::after{
  content:"";position:absolute;width:70px;height:70px;border-radius:50%;
  right:-25px;top:-30px;background:var(--stat-glow,rgba(56,189,248,.08))
}
.admin-stat .ico{font-size:16px}
.admin-stat strong{display:block;font-size:24px;color:#fff;line-height:1;margin-top:9px}
.admin-stat small{display:block;color:#73899d;font-size:8.5px;margin-top:4px}
.admin-stat.blue{--stat-glow:rgba(56,189,248,.12)}
.admin-stat.amber{--stat-glow:rgba(251,191,36,.10)}
.admin-stat.green{--stat-glow:rgba(52,211,153,.10)}
.admin-stat.purple{--stat-glow:rgba(167,139,250,.10)}

/* generic glass panel */
.admin-panel{
  margin-bottom:11px;
  border:1px solid var(--adm-line);border-radius:18px;
  background:rgba(10,25,39,.54);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  overflow:hidden
}
.admin-panel-title{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px 13px;border-bottom:1px solid rgba(148,163,184,.09)
}
.admin-panel-title strong{font-size:11px;color:#eaf6ff}
.admin-panel-title small{font-size:8px;color:#667d91}

/* filters */
.admin-filterbar{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px
}
.admin-filterbar .wide{grid-column:1/-1}
.admin-field{
  width:100%;height:42px;padding:0 11px;
  border:1px solid var(--adm-line);border-radius:12px;outline:none;
  background:rgba(8,21,33,.72);color:#dceaf5;font:inherit;font-size:10px
}
.admin-field:focus{border-color:rgba(125,211,252,.45)}
.admin-field option{background:#0b1926}

/* list/card */
.admin-list{display:grid;gap:8px}
.admin-row-card{
  position:relative;
  padding:11px;
  border:1px solid rgba(148,163,184,.11);border-radius:15px;
  background:rgba(9,23,36,.55);
  transition:border-color .16s ease,transform .14s ease
}
.admin-row-card:active{transform:scale(.992)}
.admin-row-top{display:flex;align-items:flex-start;gap:9px}
.admin-avatar{
  width:38px;height:38px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  display:grid;place-items:center;background:#102236;border:1px solid rgba(148,163,184,.12);
  color:#6f879c;font-size:16px
}
.admin-avatar img{width:100%;height:100%;object-fit:cover}
.admin-row-main{min-width:0;flex:1}
.admin-row-main h4{
  margin:0;color:#f3f8fc;font-size:11.5px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.admin-row-main p{
  margin:3px 0 0;color:#7e94a8;font-size:8.8px;line-height:1.45
}
.admin-status{
  flex:0 0 auto;padding:5px 7px;border-radius:999px;
  font-size:7.5px;font-weight:850;border:1px solid rgba(148,163,184,.12);
  background:rgba(100,116,139,.08);color:#94a3b8
}
.admin-status.full{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.18);color:#6ee7b7}
.admin-status.deposit{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.18);color:#fcd34d}
.admin-status.bad{background:rgba(251,113,133,.08);border-color:rgba(251,113,133,.18);color:#fda4af}
.admin-row-meta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;
  margin-top:9px
}
.admin-meta{
  padding:7px 8px;border-radius:9px;background:rgba(3,12,20,.32);
  color:#8da3b5;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.admin-meta b{color:#cfe0ec;font-weight:700}
.admin-row-actions{display:flex;gap:6px;margin-top:8px}
.admin-action-btn{
  flex:1;min-height:34px;padding:7px 8px;
  border:1px solid var(--adm-line);border-radius:10px;
  background:rgba(12,31,47,.62);color:#a9bfd0;
  font:inherit;font-size:8.5px;font-weight:750
}
.admin-action-btn.primary{color:#bfeaff;border-color:rgba(125,211,252,.18);background:rgba(56,189,248,.07)}
.admin-action-btn:disabled{opacity:.35}

/* slip modal */
#adminSlipViewer{
  position:fixed;inset:0;z-index:33000;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(1,5,9,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
#adminSlipViewer.show{display:flex}
.admin-slip-box{
  position:relative;width:min(100%,500px);max-height:88vh;padding:13px;
  border:1px solid rgba(148,163,184,.16);border-radius:20px;
  background:#081522;box-shadow:0 30px 80px rgba(0,0,0,.6)
}
.admin-slip-box img{
  display:block;width:100%;max-height:72vh;object-fit:contain;border-radius:13px;background:#03080e
}
.admin-slip-close{
  position:absolute;right:20px;top:20px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(2,8,14,.80);color:#fff;font-size:20px
}

/* trip admin cards */
.admin-trip-grid{display:grid;gap:9px}
.admin-trip-card{
  position:relative;overflow:hidden;min-height:126px;border-radius:17px;
  border:1px solid rgba(148,163,184,.13);background:#0b1927
}
.admin-trip-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.48) saturate(.8)}
.admin-trip-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,17,.95),rgba(3,10,17,.52))}
.admin-trip-copy{position:relative;z-index:1;padding:14px;min-height:126px;display:flex;flex-direction:column;justify-content:flex-end}
.admin-trip-copy h4{margin:0;color:#fff;font-size:13px}
.admin-trip-copy p{margin:4px 0 0;color:#b0c0ce;font-size:8.5px}
.admin-trip-kpis{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.admin-trip-kpis span{padding:4px 6px;border-radius:8px;background:rgba(4,14,23,.58);border:1px solid rgba(255,255,255,.08);font-size:7.5px;color:#b9cbd9}

/* empty/loading */
.admin-empty{
  padding:28px 14px;text-align:center;color:#657d91;font-size:10px;line-height:1.6
}
.admin-loader{
  padding:40px 15px;text-align:center;color:#7890a5;font-size:10px
}
.admin-loader::before{
  content:"";display:block;width:30px;height:30px;margin:0 auto 10px;border-radius:50%;
  border:2px solid rgba(125,211,252,.12);border-top-color:#38bdf8;
  animation:admSpin .75s linear infinite
}
@keyframes admSpin{to{transform:rotate(360deg)}}

@media(min-width:900px){
  #adminCenter{flex-direction:row}
  .admin-topbar{
    width:240px;height:100%;min-height:0;flex-direction:column;align-items:stretch;
    padding:24px 16px;border-right:1px solid var(--adm-line);border-bottom:0
  }
  .admin-brand{flex:0 0 auto}
  .admin-brand img{width:52px;height:52px}
  .admin-brand strong{font-size:18px}
  .admin-brand small{font-size:11px}
  .admin-top-actions{margin-top:auto}
  .admin-icon-btn{flex:1;width:auto;height:44px}
  .admin-nav{
    position:absolute;left:16px;top:105px;width:208px;
    flex-direction:column;background:transparent;border:0;padding:0;overflow:visible
  }
  .admin-nav-btn{
    width:100%;min-width:0;padding:11px 12px;text-align:left;font-size:14px;
    display:flex;align-items:center;gap:10px
  }
  .admin-nav-btn span{display:inline;font-size:18px;margin:0}
  .admin-body{margin-left:0;padding:28px 34px;max-width:none}
  .admin-view{max-width:1250px;margin:0 auto}
  .admin-view-head h2{font-size:28px}
  .admin-view-head p{font-size:13px}
  .admin-stats{grid-template-columns:repeat(4,1fr);gap:12px}
  .admin-stat{min-height:120px;padding:18px}
  .admin-stat strong{font-size:34px}
  .admin-stat small{font-size:12px}
  .admin-filterbar{grid-template-columns:2fr 1fr 1fr}
  .admin-filterbar .wide{grid-column:auto}
  .admin-field{height:48px;font-size:14px}
  .admin-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .admin-row-card{padding:15px}
  .admin-row-main h4{font-size:16px}
  .admin-row-main p,.admin-meta,.admin-action-btn{font-size:12px}
  .admin-status{font-size:11px}
  .admin-trip-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .admin-trip-card,.admin-trip-copy{min-height:180px}
  .admin-trip-copy h4{font-size:18px}
  .admin-trip-copy p,.admin-trip-kpis span{font-size:12px}
}


/* ============================================================
   ADMIN > การจอง : PREMIUM PASSENGER CARD
   - ตัดปุ่มดูสลิป + วันส่งสลิปออกจากการ์ด
   - เน้น ชื่อ / เบาะ / วันเดินทาง / จุดขึ้นรถ / LINE / เช็คอิน
   ============================================================ */
.admin-passenger-card{
  overflow:hidden;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(125,211,252,.13);
  background:
    radial-gradient(circle at 92% 0%,rgba(56,189,248,.07),transparent 32%),
    linear-gradient(155deg,rgba(10,28,41,.86),rgba(5,17,27,.92));
  box-shadow:
    0 14px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
}
.admin-passenger-card.is-checked-in{
  border-color:rgba(52,211,153,.22);
  background:
    radial-gradient(circle at 92% 0%,rgba(52,211,153,.08),transparent 34%),
    linear-gradient(155deg,rgba(8,29,36,.88),rgba(5,18,27,.94));
}
.admin-passenger-head{align-items:center;gap:11px}
.admin-passenger-avatar{
  width:48px;height:48px;border-radius:15px;
  background:linear-gradient(145deg,#122b42,#0a1b2c);
  border:1px solid rgba(125,211,252,.14);
  box-shadow:0 8px 22px rgba(0,0,0,.18)
}
.admin-passenger-titleline{
  display:flex;align-items:center;gap:7px;min-width:0
}
.admin-passenger-titleline h4{
  min-width:0;flex:1;font-size:13px;line-height:1.35
}
.admin-passenger-seat{
  flex:0 0 auto;
  padding:4px 7px;border-radius:8px;
  background:rgba(251,146,60,.08);
  border:1px solid rgba(251,146,60,.14);
  color:#fdba74;font-size:8px;font-weight:850
}
.admin-passenger-main p{font-size:9.5px;color:#8197aa;margin-top:4px}
.admin-passenger-status-stack{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-end;gap:5px
}
.admin-checkin-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 8px;border-radius:999px;
  border:1px solid rgba(52,211,153,.25);
  background:rgba(16,185,129,.11);
  color:#6ee7b7;font-size:8px;font-weight:850;
  box-shadow:0 0 18px rgba(16,185,129,.05)
}
.admin-checkin-badge-btn{cursor:pointer;font-family:inherit}
.admin-checkin-badge-btn:active{transform:scale(.96)}
.admin-checkin-dot{
  width:6px;height:6px;border-radius:50%;
  background:#34d399;
  box-shadow:0 0 9px rgba(52,211,153,.85)
}
.admin-passenger-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;margin-top:12px
}
.admin-passenger-info{
  min-width:0;
  display:flex;align-items:center;gap:8px;
  min-height:54px;padding:9px 10px;
  border-radius:13px;
  background:rgba(2,12,20,.40);
  border:1px solid rgba(148,163,184,.07)
}
.admin-passenger-info-wide{grid-column:1/-1;min-height:48px}


/* กล่องสรุปสถานะที่นั่งทั้งคัน — เขียว=ว่าง เหลือง=รอเช็คอิน แดง=เช็คอินแล้ว */
.admin-van-seat-summary{
  margin:0 0 10px;padding:11px 12px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);
}
.admin-van-seat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.admin-van-seat-chip{
  aspect-ratio:1/1;width:100%;border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:0;padding:5px 3px;text-align:center;
  font-size:10px;font-weight:900;color:#04150e;overflow:hidden;
}
.admin-van-seat-chip strong{display:block;font-size:12px;line-height:1;font-weight:950}
.admin-van-seat-chip span{
  display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:8.5px;line-height:1.15;font-weight:900
}
.admin-van-seat-chip small{
  display:block;width:100%;overflow:hidden;white-space:normal;
  font-size:7px;line-height:1.05;font-weight:800;opacity:.82
}
.admin-van-seat-chip.is-empty{
  background:linear-gradient(150deg,#34d399,#10b981);
  box-shadow:0 0 10px rgba(16,185,129,.4);
}
.admin-van-seat-chip.is-waiting{
  background:linear-gradient(150deg,#fde047,#f7b500);
  box-shadow:0 0 10px rgba(247,181,0,.45);
}
.admin-van-seat-chip.is-checked{
  background:linear-gradient(150deg,#f87171,#ef4444);
  color:#fff;
  box-shadow:0 0 10px rgba(239,68,68,.45);
}
.admin-van-seat-chip.is-checked small{color:#fff;opacity:.9}
.admin-van-seat-legend{display:flex;gap:12px;margin-top:9px;flex-wrap:wrap}
.admin-van-seat-legend span{display:inline-flex;align-items:center;gap:5px;font-size:9px;color:#94a3b8;font-weight:700}
.admin-van-seat-dot{width:8px;height:8px;border-radius:3px;display:inline-block}
.admin-van-seat-dot.is-empty{background:#10b981;box-shadow:0 0 6px rgba(16,185,129,.6)}
.admin-van-seat-dot.is-waiting{background:#f7b500;box-shadow:0 0 6px rgba(247,181,0,.6)}
.admin-van-seat-dot.is-checked{background:#ef4444;box-shadow:0 0 6px rgba(239,68,68,.6)}
.admin-passenger-info-icon{
  width:28px;height:28px;flex:0 0 auto;
  display:grid;place-items:center;border-radius:9px;
  background:rgba(56,189,248,.055);
  font-size:13px
}
.admin-passenger-info div{min-width:0}
.admin-passenger-info small{
  display:block;margin-bottom:2px;
  color:#60788d;font-size:7.5px;font-weight:700
}
.admin-passenger-info strong{
  display:block;color:#dbe9f3;
  font-size:9px;font-weight:780;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.admin-passenger-actions{margin-top:9px;display:flex;gap:8px;flex-wrap:wrap}
.admin-passenger-actions>*{flex:1;min-width:120px}
.admin-call-btn{
  min-height:39px;border-radius:12px;
  color:#bfeaff;
  border-color:rgba(56,189,248,.16);
  background:linear-gradient(180deg,rgba(21,53,73,.50),rgba(8,29,44,.62));
  font-size:9.5px
}
.admin-manual-checkin-btn{
  min-height:39px;border-radius:12px;
  color:#a7f3d0;
  border:1px solid rgba(52,211,153,.28);
  background:linear-gradient(180deg,rgba(16,66,49,.55),rgba(6,32,24,.65));
  font-size:9.5px;cursor:pointer;font-family:inherit
}
.admin-manual-checkin-btn:active{transform:scale(.97)}

@media(max-width:520px){
  .admin-passenger-card{padding:13px}
  .admin-passenger-avatar{width:46px;height:46px}
  .admin-passenger-titleline h4{font-size:12px}
  .admin-passenger-status-stack .admin-status{font-size:7.5px}
}


/* ============================================================
   ADMIN BOOKING DETAIL — CHECK-IN SUMMARY
   ============================================================ */
.admin-checkin-summary{
  margin:12px 0;
  padding:15px;
  border-radius:20px;
  border:1px solid rgba(52,211,153,.15);
  background:
    radial-gradient(circle at 92% 0%,rgba(16,185,129,.09),transparent 34%),
    linear-gradient(155deg,rgba(7,28,31,.86),rgba(5,18,26,.93));
  box-shadow:0 14px 34px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.025)
}
.admin-checkin-summary-head,
.admin-pickup-premium-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.admin-checkin-summary-head small,
.admin-pickup-premium-head small{
  display:block;color:#68849a;font-size:8px;font-weight:750;margin-bottom:3px
}
.admin-checkin-summary-head h3,
.admin-pickup-premium-head h3{
  margin:0;color:#f1f7fb;font-size:14px;line-height:1.3
}
.admin-checkin-summary-total{
  flex:0 0 auto;padding:7px 10px;border-radius:11px;
  border:1px solid rgba(52,211,153,.16);
  background:rgba(16,185,129,.07);
  color:#6ee7b7;font-size:9px;font-weight:850
}
.admin-checkin-summary-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px
}
.admin-checkin-summary-card{
  min-width:0;display:flex;align-items:center;gap:9px;
  padding:11px;border-radius:14px;
  background:rgba(2,12,20,.38);
  border:1px solid rgba(148,163,184,.07)
}
.admin-checkin-summary-card.done{border-color:rgba(52,211,153,.13)}
.admin-checkin-summary-card.waiting{border-color:rgba(148,163,184,.08)}
.admin-checkin-summary-icon{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;
  border-radius:11px;font-size:14px;font-weight:900
}
.admin-checkin-summary-card.done .admin-checkin-summary-icon{
  color:#6ee7b7;background:rgba(16,185,129,.10)
}
.admin-checkin-summary-card.waiting .admin-checkin-summary-icon{
  color:#94a3b8;background:rgba(148,163,184,.07)
}
.admin-checkin-summary-card small{display:block;color:#71899c;font-size:7.5px}
.admin-checkin-summary-card strong{display:block;margin-top:1px;color:#f1f7fb;font-size:18px}
.admin-checkin-summary-card strong em{font-style:normal;font-size:8px;color:#7890a3}
.admin-checkin-progress{
  height:4px;margin-top:12px;border-radius:999px;overflow:hidden;
  background:rgba(148,163,184,.08)
}
.admin-checkin-progress>div{
  height:100%;border-radius:inherit;
  background:linear-gradient(90deg,#10b981,#6ee7b7);
  box-shadow:0 0 10px rgba(52,211,153,.25)
}
.admin-checkin-progress-label{
  margin-top:5px;text-align:right;color:#668094;font-size:7.5px
}

/* ============================================================
   ADMIN BOOKING DETAIL — PREMIUM PICKUP SUMMARY
   ============================================================ */
.admin-pickup-premium{
  margin:12px 0 15px;padding:15px;border-radius:21px;
  border:1px solid rgba(56,189,248,.14);
  background:
    radial-gradient(circle at 100% 0%,rgba(56,189,248,.08),transparent 34%),
    linear-gradient(155deg,rgba(8,26,39,.88),rgba(4,16,25,.94));
  box-shadow:0 16px 38px rgba(0,0,0,.17),inset 0 1px 0 rgba(255,255,255,.025)
}
.admin-pickup-premium-total{
  min-width:66px;padding:7px 10px;text-align:center;border-radius:12px;
  background:rgba(56,189,248,.055);
  border:1px solid rgba(56,189,248,.14)
}
.admin-pickup-premium-total strong{
  display:block;color:#e7f7ff;font-size:16px;line-height:1
}
.admin-pickup-premium-total span{
  display:block;margin-top:3px;color:#6f899c;font-size:7px
}
.admin-pickup-premium-stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:7px;margin-top:13px
}
.admin-pickup-premium-stats>div{
  padding:9px 7px;text-align:center;border-radius:12px;
  background:rgba(2,12,20,.36);
  border:1px solid rgba(148,163,184,.06)
}
.admin-pickup-premium-stats small{display:block;color:#647d90;font-size:7px}
.admin-pickup-premium-stats strong{display:block;margin-top:2px;color:#dff5ff;font-size:16px}
.admin-pickup-premium-stats .warn strong{color:#fbbf24}
.admin-pickup-premium-list{display:grid;gap:7px;margin-top:10px}
.admin-pickup-premium-item{
  display:grid;
  grid-template-columns:22px 26px 34px minmax(0,1fr) 28px auto;
  align-items:center;gap:8px;
  min-height:60px;padding:9px 10px;border-radius:14px;
  background:linear-gradient(90deg,rgba(5,20,31,.72),rgba(7,26,38,.52));
  border:1px solid rgba(56,189,248,.08);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.admin-pickup-order-help{
  margin-top:9px;padding:8px 10px;border-radius:11px;text-align:center;
  color:#89a8bb;font-size:7.5px;line-height:1.45;
  background:rgba(56,189,248,.045);border:1px solid rgba(56,189,248,.09)
}
.admin-pickup-premium-order{display:grid;grid-template-rows:1fr 1fr;gap:3px;width:28px}
.admin-pickup-premium-order button{
  width:28px;height:23px;padding:0;border-radius:7px;
  border:1px solid rgba(56,189,248,.22);background:rgba(56,189,248,.09);
  color:#9bdfff;font-size:9px;font-weight:900;line-height:1;cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent
}
.admin-pickup-premium-order button:active:not(:disabled){transform:scale(.92);background:rgba(56,189,248,.22)}
.admin-pickup-premium-order button:disabled{opacity:.22;cursor:default}
.admin-pickup-premium-item:active{transform:scale(.98)}

/* ติ๊กว่า "แวะรับแล้ว" ที่จุดนัดรับนี้ */
.admin-pickup-premium-check{display:flex;align-items:center;justify-content:center;width:22px;height:22px;cursor:pointer;position:relative}
.admin-pickup-premium-check input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;width:22px;height:22px}
.admin-pickup-premium-check span{
  width:20px;height:20px;border-radius:7px;border:2px solid rgba(148,163,184,.4);
  background:rgba(255,255,255,.03);display:block;position:relative;flex-shrink:0;
  transition:background .15s ease, border-color .15s ease;
}
.admin-pickup-premium-check input:checked + span{background:#22c55e;border-color:#22c55e}
.admin-pickup-premium-check input:checked + span::after{
  content:'';position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #04150e;border-width:0 2px 2px 0;transform:rotate(45deg);
}

/* กล่องจุดนัดรับที่ติ๊กว่าแวะรับแล้ว — เรืองแสงเขียววนเบาๆ */
.admin-pickup-premium-item.is-picked-up{
  border-color:rgba(34,197,94,.45);
  background:linear-gradient(90deg,rgba(6,32,20,.75),rgba(8,38,24,.55));
  animation:adminPickupGlow 2.4s ease-in-out infinite;
}
@keyframes adminPickupGlow{
  0%,100%{box-shadow:0 0 0 1px rgba(34,197,94,.22),0 0 10px rgba(34,197,94,.16)}
  50%{box-shadow:0 0 0 1px rgba(34,197,94,.4),0 0 22px rgba(34,197,94,.38)}
}
@media(prefers-reduced-motion:reduce){.admin-pickup-premium-item.is-picked-up{animation:none;box-shadow:0 0 0 1px rgba(34,197,94,.3)}}

/* กล่อง "ยังไม่เลือกจุดขึ้นรถ" ไม่มีช่องติ๊ก ใช้ spacer เว้นที่แทนให้ grid ตรงกับการ์ดอื่น */
.admin-pickup-premium-check-spacer{width:22px;height:22px}

/* หัวข้อกลุ่มคันรถ (A/B/C) ในลิสต์ผู้โดยสาร — กล่องสีส้มเรืองแสงอ่อนๆ */
.admin-van-group-heading{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:16px 0 8px;padding:9px 13px;border-radius:12px;
  background:rgba(251,146,60,.10);border:1px solid rgba(251,146,60,.32);
  box-shadow:0 0 14px rgba(251,146,60,.16);
}
.admin-van-group-heading:first-child{margin-top:0}
.admin-van-group-heading>span:first-child{font-size:12.5px;font-weight:900;color:#fed7aa}
.admin-van-group-count{font-size:10px;font-weight:700;color:#fdba74}

/* ป็อบอัพรายชื่อผู้โดยสารตามจุดนัดรับ */
.admin-pickup-popup-shell{text-align:left}
.admin-pickup-popup-head{margin-bottom:14px}
.admin-pickup-popup-head small{display:block;color:#7ca7bf;font-size:10px;font-weight:800;margin-bottom:3px}
.admin-pickup-popup-head h3{margin:0 0 4px;color:#f2f8fc;font-size:17px;font-weight:900}
.admin-pickup-popup-head>span{font-size:11.5px;color:#7dd3fc;font-weight:700}
.admin-pickup-popup-van-heading{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 0 8px;padding:9px 13px;border-radius:12px;
  background:rgba(251,146,60,.10);border:1px solid rgba(251,146,60,.32);
  box-shadow:0 0 14px rgba(251,146,60,.16);
  font-size:12px;font-weight:900;color:#fed7aa;
}
.admin-pickup-popup-van-heading:first-child{margin-top:0}
.admin-pickup-popup-van-heading span{color:#fdba74;font-weight:700;font-size:11px}
.admin-pickup-popup-list{display:flex;flex-direction:column;gap:7px}
.admin-pickup-popup-row{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;gap:10px;padding:9px 10px;border-radius:13px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
}
.admin-pickup-popup-avatar{
  width:38px;height:38px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:rgba(56,189,248,.12);font-size:16px;
}
.admin-pickup-popup-avatar img{width:100%;height:100%;object-fit:cover}
.admin-pickup-popup-info{min-width:0}
.admin-pickup-popup-info strong{display:block;color:#f1f5f9;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-pickup-popup-info small{display:block;color:#94a3b8;font-size:10px;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-pickup-popup-seat{
  flex-shrink:0;padding:5px 10px;border-radius:9px;
  background:rgba(251,146,60,.14);border:1px solid rgba(251,146,60,.3);
  color:#fed7aa;font-size:12px;font-weight:900;
}
.admin-pickup-premium-item.no-pickup{
  border-color:rgba(245,158,11,.14);
  background:linear-gradient(90deg,rgba(38,25,8,.32),rgba(28,21,10,.20))
}
.admin-pickup-premium-item.no-pickup{grid-template-columns:22px 26px 34px minmax(0,1fr) auto}
@media(max-width:380px){
  .admin-pickup-premium-item{grid-template-columns:22px 22px minmax(0,1fr) 28px auto;gap:6px}
  .admin-pickup-premium-item.no-pickup{grid-template-columns:22px 22px minmax(0,1fr) auto}
  .admin-pickup-premium-pin{display:none}
  .admin-pickup-premium-count{min-width:42px;padding:6px 5px}
  .admin-pickup-premium-copy small{font-size:6.5px}
}
.admin-pickup-premium-rank{
  color:#48677d;font-size:8px;font-weight:850;text-align:center
}
.admin-pickup-premium-pin{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius:11px;background:rgba(56,189,248,.055);font-size:14px
}
.admin-pickup-premium-item.no-pickup .admin-pickup-premium-pin{
  background:rgba(245,158,11,.07)
}
.admin-pickup-premium-copy{min-width:0}
.admin-pickup-premium-copy strong{
  display:block;color:#e1edf5;font-size:9px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.admin-pickup-premium-copy small{
  display:block;margin-top:3px;color:#5f788b;font-size:7px
}
.admin-pickup-premium-count{
  min-width:48px;padding:6px 8px;text-align:center;border-radius:10px;
  background:rgba(56,189,248,.055);border:1px solid rgba(56,189,248,.09)
}
.admin-pickup-premium-count b{color:#7dd3fc;font-size:17px;line-height:1}
.admin-pickup-premium-count span{margin-left:3px;color:#688196;font-size:7px}
.admin-pickup-premium-item.no-pickup .admin-pickup-premium-count b{color:#fbbf24}
.admin-pickup-premium-empty{
  padding:14px;text-align:center;border-radius:13px;
  color:#668094;font-size:8px;background:rgba(2,12,20,.28)
}

/* LINE + ตำแหน่งเบาะ วางต่อกัน 2 กล่อง */
.admin-passenger-seat-info strong{color:#fdba74}

/* ================================================================
   ADMIN ACTIVE USERS — identity / presence
   ================================================================ */
.admin-active-users{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto;scrollbar-width:none;max-width:52vw}
.admin-active-users::-webkit-scrollbar{display:none}
.admin-active-person{position:relative;display:flex;align-items:center;gap:7px;flex:0 0 auto;min-width:0;padding:5px 9px 5px 5px;border:1px solid rgba(125,211,252,.12);border-radius:15px;background:linear-gradient(135deg,rgba(15,34,49,.92),rgba(7,22,34,.82));box-shadow:0 8px 24px rgba(0,0,0,.16)}
.admin-active-person.is-me{border-color:rgba(52,211,153,.24);box-shadow:inset 0 0 0 1px rgba(52,211,153,.05),0 8px 24px rgba(0,0,0,.16)}
.admin-active-person>img,.admin-active-avatar-fallback{width:31px;height:31px;border-radius:11px;object-fit:cover;display:grid;place-items:center;background:#102638;font-size:16px;border:1px solid rgba(255,255,255,.08)}
.admin-active-presence{position:absolute;left:28px;bottom:5px;width:8px;height:8px;border-radius:50%;background:#34d399;border:2px solid #081521;box-shadow:0 0 8px rgba(52,211,153,.75)}
.admin-active-copy{min-width:0;line-height:1.05}.admin-active-copy b{display:block;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f5fbff;font-size:9.5px}.admin-active-copy small{display:block;max-width:120px;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7890a4;font-size:7.5px}
@media(max-width:720px){.admin-topbar{flex-wrap:wrap}.admin-brand{order:1}.admin-top-actions{order:2}.admin-active-users{order:3;flex-basis:100%;max-width:100%;padding-top:1px}.admin-active-person{padding-right:8px}.admin-active-copy b{max-width:105px}}

/* ================================================================
   TRIP EXPENSES — ค่าใช้จ่ายรายทริป
   ================================================================ */
.admin-trip-expense{margin:14px 0;padding:15px;border:1px solid rgba(251,191,36,.18);border-radius:21px;background:linear-gradient(145deg,rgba(32,24,8,.7),rgba(7,19,29,.96));box-shadow:0 14px 34px rgba(0,0,0,.2)}
.admin-trip-expense-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
.admin-trip-expense-head small{display:block;margin-bottom:3px;color:#b89b5c;font-size:8px;font-weight:800}
.admin-trip-expense-head h3{margin:0;color:#fff;font-size:15px;line-height:1.3}
.admin-trip-expense-head strong{flex:0 0 auto;padding:8px 10px;border:1px solid rgba(251,191,36,.2);border-radius:12px;background:rgba(251,191,36,.07);color:#fcd86d;font-size:10px}
.admin-trip-expense-rows{display:grid;gap:8px}
.admin-trip-expense-row{display:grid;grid-template-columns:minmax(0,1fr) 116px 34px;gap:7px;align-items:center}
.admin-trip-expense-row input{width:100%;height:43px;border:1px solid rgba(148,163,184,.14);border-radius:12px;outline:none;background:rgba(4,14,23,.82);color:#eef6fb;font-family:inherit;font-size:11px;padding:0 11px}
.admin-trip-expense-row input:focus{border-color:rgba(56,189,248,.5);box-shadow:0 0 0 3px rgba(56,189,248,.07)}
.admin-expense-amount-wrap{position:relative}
.admin-expense-amount-wrap input{padding-right:36px;text-align:right}
.admin-expense-amount-wrap span{position:absolute;right:9px;top:50%;transform:translateY(-50%);color:#71899b;font-size:8px;pointer-events:none}
.admin-expense-remove{width:34px;height:34px;border:1px solid rgba(248,113,113,.17);border-radius:11px;background:rgba(127,29,29,.16);color:#fda4af;font-size:18px}
.admin-trip-expense-actions{display:flex;justify-content:space-between;gap:9px;margin-top:12px}
.admin-expense-add,.admin-expense-save{min-height:42px;padding:0 14px;border-radius:13px;font-family:inherit;font-size:10px;font-weight:900}
.admin-expense-add{border:1px dashed rgba(125,211,252,.25);background:rgba(14,116,144,.08);color:#9edfff}
.admin-expense-save{border:0;background:linear-gradient(135deg,#d89b16,#f7c84b);color:#171104;box-shadow:0 8px 20px rgba(217,154,21,.2)}
.admin-expense-save:disabled{opacity:.55}
.admin-expense-loading,.admin-expense-error{padding:18px;text-align:center;border:1px dashed rgba(148,163,184,.13);border-radius:13px;color:#7990a2;font-size:9px}
.admin-expense-error{color:#fda4af;border-color:rgba(248,113,113,.15)}
@media(max-width:430px){.admin-trip-expense-row{grid-template-columns:minmax(0,1fr) 103px 32px}.admin-trip-expense{padding:13px}.admin-trip-expense-head{align-items:center}.admin-trip-expense-actions{display:grid;grid-template-columns:1fr 1fr}}
/* ============================================================
   ADMIN > การเรียนรู้ — scoped ทั้งหมด ไม่กระทบแท็บอื่น
   ============================================================ */
#adminView-learning { width:100%; min-width:0; }
#adminView-learning * { box-sizing:border-box; }
.admin-learning-dashboard {
  width:100%; max-width:1050px; min-width:0; margin:0 auto;
  color:#f8fafc;
}
.admin-learning-hero {
  position:relative; display:grid; grid-template-columns:48px minmax(0,1fr) 42px;
  align-items:center; gap:11px; min-width:0; margin:0 0 12px; padding:14px;
  overflow:hidden; border:1px solid rgba(251,146,60,.19); border-radius:20px;
  background:
    radial-gradient(circle at 90% 0,rgba(251,146,60,.13),transparent 37%),
    linear-gradient(135deg,rgba(24,43,42,.92),rgba(5,17,25,.9));
  box-shadow:0 15px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.045);
}
.admin-learning-hero::after { content:"";position:absolute;inset:auto -12% -55% 35%;height:90px;background:radial-gradient(ellipse,rgba(249,115,22,.1),transparent 66%);pointer-events:none; }
.admin-learning-hero-icon { width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(251,146,60,.25);border-radius:15px;background:linear-gradient(145deg,rgba(124,45,18,.29),rgba(255,255,255,.04));box-shadow:inset 0 1px rgba(255,255,255,.06),0 0 18px rgba(249,115,22,.08);font-size:23px; }
.admin-learning-hero-copy { min-width:0;position:relative;z-index:1; }
.admin-learning-hero-copy small { display:block;margin-bottom:2px;color:#fb923c;font-size:8px;font-weight:900;letter-spacing:1.15px; }
.admin-learning-hero-copy h2 { margin:0;color:#fff;font-size:19px;font-weight:850;line-height:1.2; }
.admin-learning-hero-copy p { margin:4px 0 0;color:#8da5b4;font-size:9.5px;line-height:1.45;white-space:normal; }
.admin-learning-refresh { position:relative;z-index:1;width:42px;height:42px;padding:10px;border:1px solid rgba(251,146,60,.22);border-radius:14px;background:rgba(124,45,18,.16);color:#fdba74;appearance:none;-webkit-appearance:none; }
.admin-learning-refresh svg { width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; }
.admin-learning-refresh:active { transform:scale(.92); }

.admin-learning-loading { min-height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.06);border-radius:20px;background:rgba(5,16,23,.36);color:#91a7b8; }
.admin-learning-loading i { width:37px;height:37px;margin-bottom:4px;border:3px solid rgba(251,146,60,.16);border-top-color:#fb923c;border-radius:50%;animation:adminLearnSpin .8s linear infinite; }
.admin-learning-loading strong { color:#eef6fb;font-size:12px; }
.admin-learning-loading span { color:#6f8798;font-size:9px; }
@keyframes adminLearnSpin{to{transform:rotate(360deg)}}

.admin-learning-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px; }
.admin-learning-stats article { position:relative;min-width:0;min-height:91px;padding:12px 11px;overflow:hidden;border:1px solid rgba(255,255,255,.075);border-radius:17px;background:linear-gradient(145deg,rgba(14,31,42,.86),rgba(6,18,26,.72));box-shadow:inset 0 1px rgba(255,255,255,.035); }
.admin-learning-stats article::before { content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:99px;background:#94a3b8;box-shadow:0 0 10px currentColor; }
.admin-learning-stats article.is-total::before { background:#38bdf8; }
.admin-learning-stats article.is-active::before { background:#fb923c; }
.admin-learning-stats article.is-complete::before { background:#34d399; }
.admin-learning-stats span { display:block;overflow:hidden;color:#8da2b1;font-size:8.5px;font-weight:700;white-space:nowrap;text-overflow:ellipsis; }
.admin-learning-stats strong { display:block;margin:4px 0 1px;color:#fff;font-size:23px;line-height:1;font-variant-numeric:tabular-nums; }
.admin-learning-stats article.is-total strong { color:#7dd3fc; }
.admin-learning-stats article.is-active strong { color:#fdba74; }
.admin-learning-stats article.is-complete strong { color:#6ee7b7; }
.admin-learning-stats small { display:block;overflow:hidden;color:#61798b;font-size:7.5px;white-space:nowrap;text-overflow:ellipsis; }

.admin-learning-tools { display:flex;flex-direction:column;gap:9px;margin:0 0 12px;padding:11px;border:1px solid rgba(125,211,252,.08);border-radius:18px;background:rgba(4,14,22,.5); }
.admin-learning-search { width:100%;height:45px;display:grid;grid-template-columns:19px minmax(0,1fr) auto;align-items:center;gap:8px;padding:0 11px;border:1px solid rgba(125,211,252,.13);border-radius:14px;background:rgba(2,11,18,.72);transition:border-color .18s,box-shadow .18s; }
.admin-learning-search:focus-within { border-color:rgba(251,146,60,.45);box-shadow:0 0 0 3px rgba(249,115,22,.07); }
.admin-learning-search svg { width:18px;height:18px;fill:none;stroke:#71899b;stroke-width:1.9;stroke-linecap:round; }
.admin-learning-search input { min-width:0;width:100%;height:100%;padding:0;border:0;outline:0;background:transparent;color:#fff;font:inherit;font-size:11px;-webkit-appearance:none;appearance:none; }
.admin-learning-search input::placeholder { color:#587083; }
.admin-learning-search>span { padding:4px 7px;border-radius:99px;background:rgba(255,255,255,.045);color:#8298a8;font-size:8px;white-space:nowrap; }
.admin-learning-filters { display:flex;gap:6px;max-width:100%;padding:0 0 1px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch; }
.admin-learning-filters::-webkit-scrollbar { display:none; }
.admin-learning-filter { min-height:34px;flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035);color:#8297a8;font:inherit;font-size:9px;font-weight:750;appearance:none;-webkit-appearance:none; }
.admin-learning-filter b { min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px;border-radius:99px;background:rgba(255,255,255,.055);color:#a8bac7;font-size:7.5px;font-variant-numeric:tabular-nums; }
.admin-learning-filter.active { color:#fff;border-color:rgba(251,146,60,.42);background:linear-gradient(135deg,rgba(194,65,12,.3),rgba(124,45,18,.2));box-shadow:0 0 14px rgba(249,115,22,.09),inset 0 1px rgba(255,255,255,.04); }
.admin-learning-filter.active b { background:#f97316;color:#fff; }

.admin-learning-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0; }
.admin-learning-card { position:relative;min-width:0;padding:13px;overflow:hidden;border:1px solid rgba(148,163,184,.1);border-radius:20px;outline:0;background:linear-gradient(142deg,rgba(13,31,41,.88),rgba(4,15,23,.82));box-shadow:0 12px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035);cursor:pointer;transition:transform .16s,border-color .18s,box-shadow .18s; }
.admin-learning-card::before { content:"";position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:99px;background:#64748b; }
.admin-learning-card.is-reading::before { background:#fb923c;box-shadow:0 0 11px rgba(249,115,22,.55); }
.admin-learning-card.is-done::before { background:#34d399;box-shadow:0 0 11px rgba(52,211,153,.55); }
.admin-learning-card:active { transform:scale(.985); }
.admin-learning-card:focus-visible { border-color:rgba(251,146,60,.52);box-shadow:0 0 0 3px rgba(249,115,22,.09); }
.admin-learning-person { display:grid;grid-template-columns:48px minmax(0,1fr) 54px;align-items:center;gap:10px;min-width:0; }
.admin-learning-avatar { position:relative;width:48px;height:48px;display:grid;place-items:center;overflow:visible;border:1px solid rgba(251,146,60,.24);border-radius:16px;background:rgba(255,255,255,.055);font-size:20px; }
.admin-learning-avatar img { display:block;width:100%!important;height:100%!important;max-width:48px!important;max-height:48px!important;margin:0!important;border:0!important;border-radius:15px!important;object-fit:cover!important; }
.admin-learning-avatar>span { width:100%;height:100%;display:grid;place-items:center;border-radius:15px;overflow:hidden; }
.admin-learning-avatar i { position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border:2px solid #0a1a24;border-radius:50%;background:#34d399;box-shadow:0 0 8px rgba(52,211,153,.55); }
.admin-learning-identity { min-width:0; }
.admin-learning-status { display:inline-flex;margin-bottom:3px;padding:3px 7px;border:1px solid rgba(148,163,184,.1);border-radius:99px;background:rgba(100,116,139,.1);color:#94a3b8;font-size:7px;font-weight:800; }
.admin-learning-card.is-reading .admin-learning-status { border-color:rgba(251,146,60,.2);background:rgba(194,65,12,.15);color:#fdba74; }
.admin-learning-card.is-done .admin-learning-status { border-color:rgba(52,211,153,.2);background:rgba(6,95,70,.17);color:#6ee7b7; }
.admin-learning-identity h4 { margin:0 0 3px;overflow:hidden;color:#fff;font-size:12.5px;font-weight:850;line-height:1.25;white-space:nowrap;text-overflow:ellipsis; }
.admin-learning-identity p { margin:1px 0;overflow:hidden;color:#768d9e;font-size:8px;line-height:1.35;white-space:nowrap;text-overflow:ellipsis; }
.admin-learning-identity p b { color:#9db0be;font-size:7px;letter-spacing:.3px; }
.admin-learning-score { position:relative;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#fb923c var(--adm-learn-score),rgba(255,255,255,.075) 0); }
.admin-learning-score::after { content:"";position:absolute;inset:5px;border-radius:50%;background:#0a1922; }
.admin-learning-score strong,.admin-learning-score small { position:relative;z-index:1; }
.admin-learning-score strong { margin-right:7px;color:#fff;font-size:14px;line-height:1;font-variant-numeric:tabular-nums; }
.admin-learning-score small { position:absolute;z-index:2;right:9px;top:21px;color:#8196a5;font-size:6px; }
.admin-learning-card.is-done .admin-learning-score { background:conic-gradient(#34d399 var(--adm-learn-score),rgba(255,255,255,.075) 0); }
.admin-learning-bar { height:6px;margin:12px 0 10px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.065); }
.admin-learning-bar i { display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fdba74,#f97316);box-shadow:0 0 11px rgba(249,115,22,.42);transition:width .35s ease; }
.admin-learning-card.is-done .admin-learning-bar i { background:linear-gradient(90deg,#6ee7b7,#10b981);box-shadow:0 0 11px rgba(16,185,129,.36); }
.admin-learning-meta { display:grid;grid-template-columns:.8fr .8fr 1.4fr;gap:6px;min-width:0; }
.admin-learning-meta>div { min-width:0;padding:7px 8px;border:1px solid rgba(255,255,255,.055);border-radius:11px;background:rgba(255,255,255,.025); }
.admin-learning-meta small { display:block;margin-bottom:2px;color:#61798a;font-size:7px;white-space:nowrap; }
.admin-learning-meta strong { display:block;overflow:hidden;color:#dbe7ee;font-size:9px;font-weight:800;line-height:1.25;white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums; }
.admin-learning-meta strong span { color:#6f8595;font-size:7.5px; }
.admin-learning-card-foot { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.055); }
.admin-learning-card-foot>span { min-width:0;overflow:hidden;color:#60798b;font-size:7.5px;white-space:nowrap;text-overflow:ellipsis; }
.admin-learning-card-foot>b { flex:0 0 auto;color:#fdba74;font-size:8.5px;font-weight:800; }
.admin-learning-card-foot>b i { display:inline-grid;width:17px;height:17px;margin-left:3px;place-items:center;border-radius:50%;background:rgba(249,115,22,.11);font-size:13px;font-style:normal;line-height:1; }

/* รายละเอียดผู้เรียนต้องลอยเหนือ Admin Center (Admin Center = z-index 31000)
   และต้องกำหนดที่ container ของ SweetAlert โดยตรง เพราะ z-index ของ popup อย่างเดียว
   ไม่สามารถยกทั้ง overlay ขึ้นเหนือ stacking context ของหน้า Admin ได้ */
.swal2-container.admin-learning-swal-container{
  z-index:40001!important;
}
.admin-learning-swal { width:min(620px,calc(100vw - 22px))!important; padding:14px!important; overflow:hidden!important; border:1px solid rgba(125,211,252,.14)!important; border-radius:22px!important; background:rgba(6,18,27,.96)!important; box-shadow:0 24px 70px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.035)!important; backdrop-filter:blur(18px)!important; -webkit-backdrop-filter:blur(18px)!important; }
.admin-learning-swal-html { margin:0!important;padding:0!important;overflow:visible!important; }
.admin-learning-swal .swal2-close { color:#8ca2b1!important;font-size:25px!important;top:2px!important;right:2px!important;z-index:20!important; }
.admin-learning-swal-confirm { min-width:150px!important;margin-top:12px!important;border-radius:13px!important;font-family:inherit!important;font-size:11px!important;font-weight:850!important; }
.admin-learning-detail-shell { width:100%;padding:10px 2px 2px;text-align:left; }
.admin-learning-detail-section-label { display:flex;align-items:end;justify-content:space-between;gap:10px;margin:0 0 8px;padding:0 2px; }
.admin-learning-detail-section-label span { color:#f8fafc;font-size:11px;font-weight:850; }
.admin-learning-detail-section-label small { color:#8fa6b5;font-size:7.5px; }
.admin-learning-detail-topic-head { margin-bottom:0!important; }
.admin-learning-detail-topic-title { min-width:0;display:flex;align-items:center;gap:8px; }
.admin-learning-detail-topic-no { flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;border:1px solid rgba(56,189,248,.2);border-radius:8px;background:rgba(56,189,248,.08);color:#7dd3fc;font-size:8px;font-weight:900; }
.admin-learning-detail-topic-actions { flex:0 0 auto;display:flex;align-items:center;gap:5px; }
.admin-learning-detail-more { display:inline-flex;align-items:center;gap:3px;padding:5px 7px;border:1px solid rgba(125,211,252,.13);border-radius:9px;background:rgba(255,255,255,.035);color:#7dd3fc;font:inherit;font-size:7.5px;font-weight:800;cursor:pointer; }
.admin-learning-detail-more i { font-size:11px;font-style:normal;line-height:1; }
.admin-learning-detail-more.is-open { border-color:rgba(251,146,60,.2);background:rgba(249,115,22,.06);color:#fdba74; }
.admin-learning-detail-topic-items[hidden] { display:none!important; }
.admin-learning-detail-topic-items { margin-top:8px;padding-top:3px;border-top:1px solid rgba(255,255,255,.055); }
.admin-learning-detail-profile { display:grid;grid-template-columns:52px minmax(0,1fr) 58px;align-items:center;gap:10px;margin:6px 0 11px;text-align:left; }
.admin-learning-detail-avatar { width:52px;height:52px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(251,146,60,.24);border-radius:16px;background:rgba(255,255,255,.05);font-size:21px; }
.admin-learning-detail-avatar img { width:100%!important;height:100%!important;max-width:52px!important;max-height:52px!important;margin:0!important;border-radius:15px!important;object-fit:cover!important; }
.admin-learning-detail-avatar>span { width:100%;height:100%;display:grid;place-items:center; }
.admin-learning-detail-profile>div:nth-child(2) { min-width:0; }
.admin-learning-detail-profile small { display:block;color:#fb923c;font-size:7.5px;font-weight:850;letter-spacing:.5px; }
.admin-learning-detail-profile h3 { margin:2px 0;color:#fff;font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.admin-learning-detail-profile p { margin:0;color:#748b9b;font-size:8.5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
.admin-learning-detail-score { width:56px;height:56px;display:grid;place-items:center;border-radius:50%;background:conic-gradient(#fb923c var(--adm-learn-score),rgba(255,255,255,.075) 0);position:relative; }
.admin-learning-detail-score::after { content:"";position:absolute;inset:5px;border-radius:50%;background:#091923; }
.admin-learning-detail-score b { position:relative;z-index:1;color:#fff;font-size:12px; }
.admin-learning-detail-summary { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 11px; }
.admin-learning-detail-summary>div { padding:9px 11px;border:1px solid rgba(251,146,60,.12);border-radius:13px;background:rgba(124,45,18,.1);text-align:left; }
.admin-learning-detail-summary small { display:block;color:#8a9eac;font-size:7.5px; }
.admin-learning-detail-summary strong { display:block;margin-top:2px;color:#fdba74;font-size:13px; }
.admin-learning-detail-list { max-height:51vh;padding-right:2px;overflow:auto;text-align:left;scrollbar-width:thin; }
.admin-learning-detail-topic { margin:0 0 9px;padding:10px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.025); }
.admin-learning-detail-topic-head { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px; }
.admin-learning-detail-topic h4 { min-width:0;margin:0;color:#fed7aa;font-size:10.5px;line-height:1.35; }
.admin-learning-detail-topic-head>span { flex:0 0 auto;padding:3px 7px;border-radius:99px;background:rgba(249,115,22,.1);color:#fb923c;font-size:7px; }
.admin-learning-detail-topic p { display:grid;grid-template-columns:21px minmax(0,1fr);gap:2px 7px;margin:6px 0;color:#fff;font-size:9.5px; }
.admin-learning-detail-topic p i { grid-row:1/3;width:20px;height:20px;display:grid;place-items:center;border:1px solid rgba(52,211,153,.2);border-radius:7px;background:rgba(6,95,70,.14);color:#6ee7b7; }
.admin-learning-detail-topic p i svg { width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round; }
.admin-learning-detail-topic p b { min-width:0;color:#edf5f8;font-size:9.5px;line-height:1.35; }
.admin-learning-detail-topic p small { grid-column:2;color:#607687;font-size:7.5px;line-height:1.35; }

@media(max-width:620px){
  .admin-learning-list{grid-template-columns:1fr}
}
@media(max-width:390px){
  .admin-learning-hero{grid-template-columns:44px minmax(0,1fr) 38px;padding:12px;gap:9px}
  .admin-learning-hero-icon{width:44px;height:44px;border-radius:14px;font-size:21px}
  .admin-learning-refresh{width:38px;height:38px;padding:9px;border-radius:12px}
  .admin-learning-hero-copy h2{font-size:17px}
  .admin-learning-hero-copy p{font-size:8.7px}
  .admin-learning-stats{gap:6px}
  .admin-learning-stats article{min-height:84px;padding:10px 8px}
  .admin-learning-stats span{font-size:7.5px}
  .admin-learning-stats strong{font-size:20px}
  .admin-learning-stats small{font-size:6.8px}
  .admin-learning-card{padding:12px 11px}
  .admin-learning-person{grid-template-columns:45px minmax(0,1fr) 50px;gap:8px}
  .admin-learning-avatar{width:45px;height:45px;border-radius:14px}
  .admin-learning-avatar img{max-width:45px!important;max-height:45px!important;border-radius:13px!important}
  .admin-learning-score{width:49px;height:49px}
  .admin-learning-meta{grid-template-columns:.8fr .8fr 1.3fr;gap:5px}
  .admin-learning-meta>div{padding:6px}
  .admin-learning-detail-list{max-height:48vh}
}

/* 24 Sep 2026 — Admin Learning 3 lessons */
.admin-learning-lessons{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:7px}
.admin-learning-lessons>span{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 7px;border:1px solid rgba(255,255,255,.055);border-radius:10px;background:rgba(255,255,255,.022);color:#718a99;font-size:7.5px}
.admin-learning-lessons b{color:#dceaf0;font-size:8.5px;font-variant-numeric:tabular-nums}


/* 26 Sep 2026 — Booking detail: van tabs + en-route orange + seat jump */
.admin-van-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  margin:2px 0 13px;position:sticky;top:0;z-index:4;
  padding:6px;border-radius:15px;background:rgba(2,10,17,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(56,189,248,.10)
}
.admin-van-tab{
  min-width:0;border:1px solid rgba(148,163,184,.13);border-radius:12px;
  background:rgba(7,20,31,.78);color:#7890a5;padding:9px 5px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit
}
.admin-van-tab strong{font-size:11px;font-weight:900;color:inherit;white-space:nowrap}
.admin-van-tab small{font-size:7.5px;font-weight:800;color:inherit;opacity:.72;white-space:nowrap}
.admin-van-tab.is-active{
  color:#e8f8ff;border-color:rgba(56,189,248,.72);
  background:linear-gradient(180deg,rgba(14,82,116,.70),rgba(7,38,57,.86));
  box-shadow:0 0 0 1px rgba(56,189,248,.10) inset,0 6px 18px rgba(14,165,233,.18)
}
.admin-van-seat-chip[role="button"]{cursor:pointer;transition:transform .15s ease,filter .15s ease}
.admin-van-seat-chip[role="button"]:active{transform:scale(.94);filter:brightness(1.08)}
.admin-van-seat-chip.is-enroute{
  background:linear-gradient(150deg,#fb923c,#f97316);color:#fff;
  box-shadow:0 0 10px rgba(249,115,22,.48)
}
.admin-van-seat-chip.is-enroute small{color:#fff;opacity:.94}
.admin-van-seat-dot.is-enroute{background:#f97316;box-shadow:0 0 6px rgba(249,115,22,.68)}
.admin-passenger-card.admin-passenger-jump-highlight{
  animation:adminPassengerJumpGlow 1.8s ease both;
}
@keyframes adminPassengerJumpGlow{
  0%,100%{box-shadow:inherit}
  18%,72%{box-shadow:0 0 0 2px rgba(56,189,248,.78),0 0 28px rgba(56,189,248,.28)}
}
.admin-extra-passengers-heading{margin-top:18px}
/* ยกเลิกเช็คอิน (ลูกค้ากดเล่น/กดลอง) */
.admin-uncheckin-btn{min-height:39px;border-radius:12px;border:1px solid rgba(248,113,113,.4);background:linear-gradient(180deg,rgba(80,20,24,.55),rgba(40,10,14,.65));color:#fca5a5;font-size:9.5px;font-family:inherit;cursor:pointer}
.admin-uncheckin-btn:active{transform:scale(.97)}
.admin-uncheckin-btn:disabled,.admin-manual-checkin-btn:disabled{opacity:.6}