:root {
  --brand-red: #cc0000;
  --brand-red2: #ff0000;
  --brand-dark: #0b0b0d;
  --panel: #141416;
}

html, body
{ 
  height: 100%; 
  min-height: 100%;
  color-scheme: dark;
}
body 
{ 
  font-family: "Prompt", ui-sans-serif, system-ui; 
}
body.page-bg {
  position: relative;             /* ให้ ::before/::after อ้างอิงได้ */
  background: #0b0b0d;            /* สี fallback ตอนรูปยังไม่โหลด */
  overflow-x: hidden;             /* กันเลื่อนแกน X */
}

/* รูปพื้นหลังเต็มหน้าจอ (ติดหน้าจอ) */
body.page-bg::before {
  content: "";
  position: fixed;                /* <<< ติดหน้าจอ */
  inset: 0;
  z-index: -2;                    /* อยู่หลังคอนเทนต์ทั้งหมด */
  background-image: url("/assets/img/Infestation.jpg"); /* เปลี่ยน path ตามไฟล์คุณ */
  background-size: cover;         /* <<< พอดีจอ */
  background-position: center center;
  background-repeat: no-repeat;
  /* iOS Safari ชอบไม่ยอม fixed → ช่วยด้วย transform */
  transform: translateZ(0);
  will-change: transform;
  filter: saturate(1.02) contrast(1.02);
}

/* Overlay ไล่เฉดแดงและมืดลงให้ตัวหนังสืออ่านง่าย */
body.page-bg::after {
  content: "";
  position: fixed;                /* <<< overlay ติดหน้าจอ */
  inset: 0;
  z-index: -1;                    /* อยู่หน้ารูป แต่หลังคอนเทนต์ */
  /* background:
    radial-gradient(1200px 600px at 20% 20%, rgba(255,0,0,.28), rgba(255,0,0,0) 60%),
    radial-gradient(900px 500px at 80% 0%,  rgba(204,0,0,.24), rgba(204,0,0,0) 55%),
    linear-gradient(to bottom, rgba(11,11,13,.70), rgba(11,11,13,.92)); */
  background:linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.8));
  pointer-events: none;
}

body.page-bg::before,
body.page-bg::after { pointer-events: none; }

.swal2-container { position: fixed !important; z-index: 10050 !important; }

/* Utility buttons that pair with Tailwind classes */
.btn-primary {
  @apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium bg-[color:var(--brand-red)] hover:bg-[color:var(--brand-red2)] shadow-lg shadow-red-500/10 transition;
}
.btn-ghost {
  @apply inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium border border-white/10 hover:bg-white/5 transition;
}
.btn-xl-primary { @apply btn-primary text-base px-5 py-3; }
.btn-xl-ghost { @apply btn-ghost text-base px-5 py-3; }

/* Dropdown menu items */
.dd-item { @apply flex items-center gap-3 px-4 py-3 text-sm hover:bg-white/5 transition; }
.dd-item i { @apply text-white/70 w-4 text-center; }
.dd-item span { @apply text-white/90; }

/* Stats */
.stat { @apply rounded-2xl border border-white/10 bg-white/5 p-4; }
.stat-title { @apply text-[11px] uppercase tracking-wide text-white/60; }
.stat-value { @apply mt-1 text-xl font-semibold; }

/* Card links */
.card-link { @apply block rounded-2xl border border-white/10 bg-white/[0.04] p-4 hover:bg-white/[0.06] transition; }
.card-link-title { @apply flex items-center gap-2 text-sm font-medium; }
.card-link-title i { @apply text-white/70; }
.card-link-desc { @apply mt-1 text-white/60 text-xs; }

/* Selection */
::selection { background: var(--brand-red2); color: #fff; }

/* Inputs defaults — enforce project rule: no browser autofill/history */
input, select, textarea {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  autocomplete: off;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px rgba(255,255,255,0) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Smooth drop */
[x-cloak] { display: none !important; }

/* =============== HERO BACKGROUND =============== */
.hero-bg-img{
  position:absolute; inset:0;
  background:url('/assets/img/Infestation.jpg') center/cover no-repeat;
  filter:saturate(1.02) contrast(1.02);
}
.hero-bg-overlay{
  position:absolute; inset:0;
  /* ไล่เฉดแดง + ลงเข้มล่าง */
  background:
    radial-gradient(circle at 20% 20%, rgba(255,0,0,.35) 0%, rgba(255,0,0,0) 45%),
    radial-gradient(circle at 80% 0%, rgba(204,0,0,.35) 0%, rgba(204,0,0,0) 40%),
    linear-gradient(to bottom, rgba(11,11,13,.75), rgba(11,11,13,.92));
}

/* =============== SLIDER (ใช้ร่วมในหน้าได้) =============== */
.wz-slider{ position:relative; border-radius:22px; overflow:hidden; isolation:isolate; }
.wz-slider__viewport{ position:relative; aspect-ratio:16/9; background:rgba(20,20,22,.6); backdrop-filter:blur(2px); }
.wz-slider__frame{ position:absolute; inset:0; border-radius:22px; pointer-events:none; box-shadow:0 24px 60px rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.06); }

.wz-slide{ position:absolute; inset:0; opacity:0; transform:scale(1.02); transition:opacity .6s ease, transform .6s ease; }
.wz-slide.is-active{ opacity:1; transform:scale(1); z-index:2; }
.wz-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(1.05) contrast(1.02); }

.wz-slide::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42%;
  background:linear-gradient(180deg, rgba(20,20,22,0) 0%, rgba(10,10,12,.75) 65%, rgba(10,10,12,.95) 100%);
}
.wz-slide figcaption{ position:absolute; left:18px; right:18px; bottom:16px; z-index:3; color:#fff; }
.wz-slide .title{ font-weight:700; font-size:18px; line-height:1.25; margin-bottom:4px; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.wz-slide .desc{  font-size:13px; color:rgba(255,255,255,.85); text-shadow:0 1px 8px rgba(0,0,0,.35); }

/* Controls */
.wz-slider__ctrl{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.16);
  background:rgba(11,11,13,.6); color:#fff; font-size:18px; line-height:1;
  display:grid; place-items:center; cursor:pointer; z-index:5;
  transition:background .2s, border-color .2s, transform .2s;
}
.wz-slider__ctrl:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); }
.wz-prev{ left:10px } .wz-next{ right:10px }

/* Dots */
.wz-dots{ position:absolute; left:0; right:0; bottom:10px; z-index:6; display:flex; justify-content:center; gap:8px; }
.wz-dots button{ width:7px; height:7px; border-radius:999px; border:0; cursor:pointer; background:rgba(255,255,255,.35); transition:transform .2s, background .2s; }
.wz-dots button.is-active{ background:#ff3b3b; transform:scale(1.2); }

/* Responsive */
@media (max-width:1024px){ .wz-slider__viewport{ aspect-ratio:4/3; } }
@media (max-width:640px){
  .wz-slider__viewport{ aspect-ratio:1/1; }
  .wz-slide .title{ font-size:16px } .wz-slide .desc{ font-size:12px }
}

/* ปุ่มใหญ่ตามธีม (ใช้เดิมได้) */
.btn-xl-primary{
  display:inline-block; padding:12px 18px; border-radius:14px; font-weight:700;
  background:#cc0000; color:#fff; text-decoration:none; box-shadow:0 10px 30px rgba(204,0,0,.25);
}
.btn-xl-primary:hover{ background:#e11111 }
.btn-xl-ghost{
  display:inline-block; padding:12px 18px; border-radius:14px; font-weight:700;
  border:1px solid rgba(255,255,255,.15); color:#fff; text-decoration:none;
}
.btn-xl-ghost:hover{ background:rgba(255,255,255,.06) }

/* กรอบการ์ด/แผง */
.panel { background:#141416; border:1px solid #242428; border-radius:14px; }
.panel-body { padding:16px; }
.divider { border-color:#242428; }

/* แถบแท็บสไตล์ภาพตัวอย่าง (เส้นแดงล่าง) */
.tabbar { display:flex; gap:22px; padding:10px 16px 0; border-bottom:1px solid #242428; }
.tab { position:relative; padding:12px 2px 10px; font-weight:700; color:#c9c9c9; }
.tab:hover { color:#cc0000; }
.tab-active { color:#ff0000; }
.tab-active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:#cc0000; border-radius:2px; }

/* ปุ่มจำนวนเงิน (2 คอลัมน์) */
.amount-btn { padding:16px; border-radius:12px; border:1px solid #2b2b2f; background:#1a1b1e; color:#fff; font-weight:700; text-align:center; cursor:pointer; }
.amount-btn.active { outline:2px solid #cc0000; background:#1d1e22; }

/* อินพุต */
.input { width:100%; background:#0f1012; border:1px solid #2b2b2f; color:#fff; padding:12px 14px; border-radius:10px; }

/* ช่อง QR ขวา */
.qr-box { display:grid; place-items:center; width:260px; height:260px; border-radius:18px; border:1px dashed #2e2e32; background:#0f1012; color:#9aa0a6; }

/* ปุ่มหลัก */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 16px; border-radius:12px; border:1px solid #2b2b2f; background:#202124; color:#fff; cursor:pointer; }
.btn-primary { background:#cc0000; border-color:#cc0000; }
.btn-block { width:100%; }

/* container */
.wrap { max-width: 1250px; margin: 24px auto; padding: 0 16px; }

.panel {
    background: #141416;
    border: 1px solid #242428;
    border-radius: 14px
}

.panel-body {
    padding: 16px
}

.divider {
    border-color: #242428
}

.tabbar {
    display: flex;
    gap: 22px;
    padding: 10px 16px 0;
    border-bottom: 1px solid #242428
}

.amount-btn {
    padding: 16px;
    border-radius: 12px;
    border: 1px solid #2b2b2f;
    background: #1a1b1e;
    color: #fff;
    font-weight: 700;
    text-align: center;
    cursor: pointer
}

.amount-btn.active {
    outline: 2px solid var(--brand-red);
    background: #1d1e22
}

.input {
    width: 100%;
    background: #0f1012;
    border: 1px solid #2b2b2f;
    color: #fff;
    padding: 12px 14px;
    border-radius: 10px
}

.btn-primary {
    background: var(--brand-red);
    border-color: var(--brand-red)
}

.btn-block {
    width: 100%
}

.qr-box {
    display: grid;
    place-items: center;
    width: 260px;
    height: 260px;
    border-radius: 18px;
    border: 1px dashed #2e2e32;
    background: #0f1012;
    color: #9aa0a6
}

.wrap {
    max-width: 1250px;
    margin: 24px auto;
    padding: 0 16px
}

.countdown {
    font-variant-numeric: tabular-nums
}

.card-header {
    padding: 16px 18px;
    border-bottom: 1px solid #242428;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700
}

.card-body {
    padding: 18px
}

.input,
.select,
.textarea {
    width: 100%;
    border-radius: 12px;
    background: #0f1114;
    border: 1px solid #2b2d31;
    padding: 12px 14px;
    color: #fff;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: #cc0000;
    box-shadow: 0 0 0 3px rgba(204, 0, 0, .25)
}

.help {
    font-size: 12px;
    color: #a9b0bb
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 700
}

.btn-primary {
    background: #cc0000
}

.btn-ghost {
    border: 1px solid #2b2d31;
    background: #1a1c20
}

.switch {
    appearance: none;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: #2b2d31;
    position: relative;
    cursor: pointer;
    outline: none;
    border: 1px solid #35373c
}

.switch:checked {
    background: #cc0000;
    border-color: #cc0000
}

.switch::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    translate: 0 -50%;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    transition: transform .2s
}

.switch:checked::after {
    transform: translate(18px, -50%)
}

.section-title {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #aab2bf
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

@media (max-width: 1023px) {
    .grid-2 {
        grid-template-columns: 1fr
    }
}

/* ===== Modal (frontend) ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;             /* กันชิดขอบบนจอเล็ก */
}
.modal.hidden{ display:none; }

.modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
}

.modal__panel{
  position: relative;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;          /* ไม่ให้เกินจอ */
  background: #141416;
  border: 1px solid #242428;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;    /* header/body/footer เรียงแนวตั้ง */
  overflow: hidden;          /* ซ่อนส่วนเกินของกรอบ */
}

.modal__header,
.modal__footer{
  flex-shrink: 0;
  padding: 14px 16px;
  border-color: #242428;
}
.modal__header{
  border-bottom: 1px solid #242428;
  display:flex; align-items:center; justify-content:space-between;
}
.modal__footer{
  border-top: 1px solid #242428;
  display:flex; gap:10px; justify-content:flex-end;
}
.modal__body{
  flex: 1 1 auto;
  overflow: auto;            /* เนื้อหาด้านในสกรอลได้ */
  padding: 16px;
}

.modal__close{
  background: transparent; border: 0; color:#cfcfcf;
  font-size: 22px; line-height: 1; cursor: pointer;
}

@media (max-width: 640px){
  .modal{ padding: 10px; }
  .modal__panel{ max-height: 94vh; border-radius: 14px; }
}

/* ระงับการสกรอลพื้นหลังขณะเปิด modal */
body.no-scroll{ overflow: hidden; }

.page-bg {
    background: #0f0f11;
}

.panel {
    background: #141416;
    border: 1px solid #242428;
    border-radius: 16px;
}

.panel-body {
    padding: 16px;
}

.tabbar {
    display: flex;
    gap: .5rem;
    padding: 10px;
    border-bottom: 1px solid #242428;
}

.card{
  background: linear-gradient(180deg,#17171b,#121214);
  border: 1px solid #222228;
  border-radius: 18px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(204,0,0,.15) inset;
  border-color: var(--brand-red);                /* ขอบแดงเมื่อ hover */
}
.card .card-title{
  transition: color .18s ease, text-shadow .18s ease;
}
.card:hover .card-title{
  color: var(--brand-red2);                      /* ชื่อรายการเป็นแดงเมื่อ hover */
  text-shadow: 0 2px 8px rgba(255,0,0,.15);
}

.buy-btn{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background: linear-gradient(90deg, var(--brand-red), var(--brand-red2));
  color:#fff; border-radius:12px; padding:10px 12px; font-weight:700;
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
.buy-btn:hover{ transform: translateY(-1px) scale(1.02); box-shadow:0 8px 18px rgba(204,0,0,.25); }
.buy-btn:active{ transform: translateY(0) scale(.99); }

.badge {
    border: 1px solid #2a2a30;
    background: #19191d;
    color: #cfcfd6;
    border-radius: 9999px;
    padding: 3px 8px;
    font-size: .75rem;
    font-family: "Prompt", ui-sans-serif, system-ui; 
}

.imgwrap {
    aspect-ratio: 4/3;
    background: #0c0c0e;
    display: flex;
    align-items: center;
    justify-content: center;
}

img.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ปรับ input ให้เข้าธีม */
input,
select {
    background: #0e0e10;
    border: 1px solid #242428;
    border-radius: 10px;
    padding: 10px;
    color: #fff;
}

.card:hover{ border-color: var(--brand-red); }
.card:hover .card-title{ color: var(--brand-red2); }
.buy-btn{ background: linear-gradient(90deg, var(--brand-red), var(--brand-red2)); }

.wz-modal.swal2-popup{
  background:#141416 !important;
  color:#e9e9ef !important;
  border:1px solid #242428 !important;
  border-radius:18px !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.5) !important;
}
.wz-modal .swal2-title{ color:#ffffff !important; font-weight:800 !important; }
.wz-modal .swal2-html-container{ color:#d6d6df !important; }

/* ฟอร์มในโมดอล */
.wz-modal input[type="text"],
.wz-modal input[type="number"],
.wz-modal input[type="email"],
.wz-modal input[type="password"],
.wz-modal textarea,
.wz-modal select{
  background:#0e0e10 !important;
  color:#ffffff !important;
  border:1px solid #242428 !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  outline:none !important;
  width:100%;
}
.wz-modal input:focus,
.wz-modal textarea:focus,
.wz-modal select:focus{
  border-color:#3a0c10 !important;
  box-shadow:0 0 0 3px rgba(204,0,0,.25) !important;
}
.wz-modal ::placeholder{ color:#8e8e95 !important; opacity:1; }

/* ปุ่ม */
.wz-modal .swal2-styled.swal2-confirm{
  background:linear-gradient(90deg,#cc0000,#ff0000) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:12px !important;
  font-weight:800 !important;
}
.wz-modal .swal2-styled.swal2-cancel{
  background:#20242b !important;
  color:#eaeaf0 !important;
  border:1px solid #343a44 !important;
  border-radius:12px !important;
}

/* ปิดสีเหลือง autofill */
.wz-modal input:-webkit-autofill,
.wz-modal input:-webkit-autofill:hover,
.wz-modal input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0px 1000px #0e0e10 inset !important;
  transition:background-color 9999s ease-out 0s !important;
}

/* กล่องหลัก */
.swal2-popup{
  background:#141416 !important;
  color:#e9e9ef !important;
  border:1px solid #242428 !important;
  border-radius:18px !important;
  box-shadow:0 20px 40px rgba(0,0,0,.5) !important;
}
/* หัวเรื่องและเนื้อหา */
.swal2-title{ color:#ffffff !important; font-weight:800 !important; }
.swal2-html-container{ color:#d6d6df !important; }

/* ฟอร์มภายในโมดอล (input/select/textarea) */
.swal2-popup input[type="text"],
.swal2-popup input[type="number"],
.swal2-popup input[type="email"],
.swal2-popup input[type="password"],
.swal2-popup textarea,
.swal2-popup select{
  background:#0e0e10 !important;
  color:#ffffff !important;
  border:1px solid #242428 !important;
  border-radius:10px !important;
  padding:10px 12px !important;
  outline:none !important;
  width:100%;
}
.swal2-popup input:focus,
.swal2-popup textarea:focus,
.swal2-popup select:focus{
  border-color:#3a0c10 !important;
  box-shadow:0 0 0 3px rgba(204,0,0,.25) !important;
}
.swal2-popup ::placeholder{ color:#8e8e95 !important; opacity:1; }

/* ปุ่มในโมดอล */
.swal2-styled.swal2-confirm{
  background:linear-gradient(90deg,#cc0000,#ff0000) !important;
  color:#fff !important; border:0 !important; border-radius:12px !important; font-weight:800 !important;
}
.swal2-styled.swal2-cancel{
  background:#20242b !important;
  color:#eaeaf0 !important; border:1px solid #343a44 !important; border-radius:12px !important;
}

/* กัน autofill เหลือง */
.swal2-popup input:-webkit-autofill,
.swal2-popup input:-webkit-autofill:hover,
.swal2-popup input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff !important;
  -webkit-box-shadow:0 0 0px 1000px #0e0e10 inset !important;
  transition:background-color 9999s ease-out 0s !important;
}