/* ==========================================================================
   TrustJai — Liquid Glass layer (4 ต.ค. 2569 · บอสสั่ง: ทำทุกหน้าเป็น Liquid Glass แบบ iPhone)
   - โหลดเป็นไฟล์ CSS สุดท้ายของ index / deal / rules / contact (หลังบ้าน admin/report ไม่ใช้)
   - แต่งหน้าตาอย่างเดียว ไม่แตะระบบ · อยากกลับเป็นแบบเดิม = ลบบรรทัด <link ... liquid-glass.css> ออก
   - กล่อง QR (.qrbox) ตั้งใจให้ขาวทึบเหมือนเดิม เพื่อให้แอปธนาคารสแกนติดชัวร์
   ========================================================================== */

html body.tj-system {
  --lg-fill: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,.08));
  --lg-fill-strong: linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.6));
  --lg-blur: blur(14px) saturate(190%) brightness(1.05);
  --lg-edge: rgba(255,255,255,.62);
  --lg-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 2px rgba(255,255,255,.28), 0 12px 36px rgba(20,44,100,.10), 0 2px 6px rgba(20,44,100,.05);
  --lg-shadow-hover: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 2px rgba(255,255,255,.28), 0 22px 56px rgba(20,44,100,.16), 0 4px 10px rgba(20,44,100,.07);
  --lg-spring: cubic-bezier(.3,1.45,.45,1);
  --lg-smooth: cubic-bezier(.2,.9,.25,1);
  background: #e7eefb !important;
  background-image: none !important;
}

/* ---------- ฉากหลัง: ก้อนสีลอยช้า ๆ ให้กระจกมีอะไรหักเห ---------- */
html body.tj-system::before,
html body.tj-system::after {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}
html body.tj-system::before {
  background:
    radial-gradient(34vmax 34vmax at 18% 14%, rgba(84,140,255,.62), transparent 70%),
    radial-gradient(30vmax 30vmax at 86% 30%, rgba(40,210,200,.50), transparent 70%),
    radial-gradient(28vmax 28vmax at 30% 86%, rgba(255,160,130,.42), transparent 70%);
  animation: tjlg-drift-a 28s ease-in-out infinite alternate;
}
html body.tj-system::after {
  background:
    radial-gradient(30vmax 30vmax at 78% 82%, rgba(176,140,255,.42), transparent 70%),
    radial-gradient(24vmax 24vmax at 55% 45%, rgba(90,190,255,.30), transparent 70%);
  animation: tjlg-drift-b 34s ease-in-out infinite alternate;
}
@keyframes tjlg-drift-a { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4vmax,3vmax,0) scale(1.08); } 100% { transform: translate3d(-3vmax,6vmax,0) scale(.96); } }
@keyframes tjlg-drift-b { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-5vmax,-2vmax,0) scale(1.1); } 100% { transform: translate3d(3vmax,-5vmax,0) scale(.95); } }

/* ---------- แถบหัวเว็บ: กระจกใสลอย ---------- */
html body.tj-system header.top {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.14)) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border-bottom: 1px solid var(--lg-edge) !important;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.35), 0 8px 30px rgba(20,44,100,.08) !important;
}

/* ---------- พื้นผิวกระจก ---------- */
html body.tj-system .card,
html body.tj-system .deal,
html body.tj-system details.fold,
html body.tj-system .rowtable,
html body.tj-system .invite-link-box,
html body.tj-system .shareapps-all .shapp,
html body.tj-system .bank-pill,
html body.tj-system .bank-picker-trigger,
html body.tj-system .wallet-paycard,
html body.tj-system #dPoints,
html body.tj-system #myPoints,
html body.tj-deal .deal-action,
html body.tj-deal .deal-completed-summary-card,
html body.tj-deal #dMoney,
html body.tj-deal #needAuth,
html body.tj-info .info-side,
html body.home.tj-system .pagehero.welcome,
html body.tj-system #secHome .welcome,
html body.home.tj-system #secHome .my-deals-card,
html body.home.tj-system #secNew > .card,
html body.home.tj-system .hero-contacts-box,
html body.home.tj-system .hero-contact-btn,
html body.home.tj-system .perk-item,
html body.home.tj-system .welcome-badge,
html body.home.tj-system .hero-secondary,
html body.home.tj-system .trust-badge,
html body.home.tj-system .flowmap,
html body.home.tj-system .statbar,
html body.home.tj-system .howlist li,
html body.home.tj-system .service-card,
html body.home.tj-system .pricecard,
html body.home.tj-system .promo-highlight-card,
html body.home.tj-system .deal-preview,
html body.home.tj-system .learn-more,
html body.home.tj-system .ctaband,
html body.home.tj-system .float-btn,
html body.tj-system .deal-summary-wrap {
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow) !important;
  border-radius: 28px !important;
}

/* กล่องคำนวณด้านใน deal-preview ต้องไม่มีกรอบสี่เหลี่ยมซ้อน (บอสสั่ง: ให้มันมนสวยงาม) */
html body.home.tj-system .deal-preview .calc {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 24px !important;
}

/* พื้นรายการขั้นตอนต้องใส ให้การ์ดลอยบนฉากหลังได้ */
html body.home.tj-system .howlist { background: transparent !important; box-shadow: none !important; border: 0 !important; }
html body.tj-info .info-side { border-radius: 22px !important; padding: 10px !important; }

html body.tj-system footer {
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08)) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border-top: 1px solid var(--lg-edge) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6) !important;
}

/* การ์ดใหญ่: มุมมนขึ้นแบบ iOS + ลอยขึ้นนุ่ม ๆ ตอนชี้ */
html body.tj-system .card,
html body.home.tj-system .pagehero.welcome { border-radius: 28px !important; }
html body.tj-system .card,
html body.tj-system .deal,
html body.home.tj-system .service-card,
html body.home.tj-system .pricecard,
html body.home.tj-system .howlist li,
html body.home.tj-system .perk-item,
html body.home.tj-system .hero-contact-btn {
  transition: transform .6s var(--lg-smooth), box-shadow .6s var(--lg-smooth), background .4s ease !important;
}
html body.tj-system .deal:hover,
html body.home.tj-system .service-card:hover,
html body.home.tj-system .pricecard:hover,
html body.home.tj-system .howlist li:hover,
html body.home.tj-system .perk-item:hover,
html body.home.tj-system .hero-contact-btn:hover {
  transform: translateY(-3px) scale(1.01) !important;
  box-shadow: var(--lg-shadow-hover) !important;
}

/* เมนูดรอปดาวน์ / หน้าต่างแชทลอย ต้องอ่านง่าย → กระจกทึบขึ้น */
html body.tj-system .bank-picker-menu,
html body.tj-deal .chat-card.chat-pop,
html body.home.tj-system .mobile-menu nav {
  background: var(--lg-fill-strong) !important;
  -webkit-backdrop-filter: blur(22px) saturate(190%) !important;
  backdrop-filter: blur(22px) saturate(190%) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow-hover) !important;
}

/* QR ต้องขาวทึบ สแกนติดแน่นอน */
html body.tj-system .qrbox { background: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- ปุ่ม ---------- */
html body.tj-system .btn {
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -2px 6px rgba(0,40,110,.25), 0 8px 24px rgba(2,110,200,.30) !important;
  transition: transform .5s var(--lg-spring), box-shadow .4s ease, background .3s ease, filter .3s ease !important;
}
html body.tj-system .btn:hover:not(:disabled) { transform: scale(1.035) !important; }
html body.tj-system .btn:active:not(:disabled) { transform: scale(.95) !important; transition-duration: .15s !important; }
html body.tj-system .btn.plain,
html body.tj-system .btn.ghost {
  background: var(--lg-fill) !important;
  -webkit-backdrop-filter: var(--lg-blur) !important;
  backdrop-filter: var(--lg-blur) !important;
  border: 1px solid var(--lg-edge) !important;
  box-shadow: var(--lg-shadow) !important;
}
html body.tj-system .btn.danger { box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 8px 24px rgba(220,38,38,.25) !important; }

/* ---------- ช่องกรอก ---------- */
html body.tj-system input:not([type=checkbox]):not([type=radio]):not([type=range]),
html body.tj-system select,
html body.tj-system textarea {
  background: rgba(255,255,255,.34) !important;
  border: 1px solid rgba(255,255,255,.75) !important;
  box-shadow: inset 0 2px 6px rgba(20,44,100,.07) !important;
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  backdrop-filter: blur(10px) saturate(180%);
  transition: background .3s ease, box-shadow .3s ease !important;
}
html body.tj-system input:not([type=checkbox]):not([type=radio]):focus,
html body.tj-system select:focus,
html body.tj-system textarea:focus {
  background: rgba(255,255,255,.7) !important;
  box-shadow: inset 0 2px 6px rgba(20,44,100,.05), 0 0 0 4px rgba(2,132,199,.22) !important;
}

/* ---------- เมนูบน: แคปซูลกระจกไหลตามนิ้ว (js/liquid-glass.js สร้าง .tjlg-lens) ---------- */
html body.tj-system .tjlg-nav { position: relative; isolation: isolate; }
html body.tj-system .tjlg-nav > a { position: relative; z-index: 1; background: transparent !important; }
html body.home.tj-system .topnav a:hover { background: transparent !important; }
html body.tj-info .info-side.tjlg-ready a:hover,
html body.tj-info .info-side.tjlg-ready a[aria-current] { background: transparent !important; color: #075985; }
.tjlg-lens {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: transform .7s var(--lg-spring), width .7s var(--lg-spring), height .7s var(--lg-spring), opacity .35s ease;
}
.tjlg-lens > i {
  display: block;
  width: 100%; height: 100%;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(255,255,255,.22));
  -webkit-backdrop-filter: blur(8px) saturate(200%) brightness(1.08);
  backdrop-filter: blur(8px) saturate(200%) brightness(1.08);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 1px #fff, inset 0 -1px 2px rgba(255,255,255,.4), 0 6px 18px rgba(20,44,100,.14);
}
html body.tj-info .info-side .tjlg-lens > i { border-radius: 12px; }
.tjlg-lens.tjlg-squish > i { animation: tjlg-squish .55s var(--lg-spring); }
@keyframes tjlg-squish { 0% { transform: scale(1.18, .84); } 55% { transform: scale(.96, 1.05); } 100% { transform: scale(1); } }

/* ---------- เปิดหน้าใหม่: เนื้อหาค่อย ๆ ลอยขึ้น ---------- */
html body.tj-system header.top { animation: tjlg-nav-in .8s var(--lg-smooth) both; }
html body.tj-system main > section:not(.hide),
html body.tj-system main > .card,
html body.tj-system main > .info-head,
html body.tj-system main > .info-layout { animation: tjlg-rise .9s var(--lg-smooth) both; }
@keyframes tjlg-nav-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes tjlg-rise { from { opacity: 0; transform: translateY(18px) scale(.99); } to { opacity: 1; transform: none; } }

html { scroll-behavior: smooth; }

/* เครื่องที่ตั้งค่าลดการเคลื่อนไหว → ปิดแอนิเมชันทั้งหมด */
@media (prefers-reduced-motion: reduce) {
  html body.tj-system::before, html body.tj-system::after,
  html body.tj-system header.top, html body.tj-system main > *,
  .tjlg-lens, .tjlg-lens > i { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* เบราว์เซอร์ที่ไม่รองรับกระจกเบลอ → ใช้พื้นขาวโปร่งพอให้อ่านออก */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html body.tj-system .card, html body.tj-system .deal, html body.tj-system details.fold,
  html body.tj-system header.top, html body.home.tj-system .service-card,
  html body.home.tj-system .pagehero.welcome { background: rgba(255,255,255,.88) !important; }
}