/* ===== Base ===== */
:root {
            --accent: #4da3ff;
            --glass: rgba(20, 25, 35, 0.75);
            --border: rgba(255, 255, 255, 0.1);
        }
        body {
            margin: 0;
            color: #e6eef4;
            font-family: 'Kanit', sans-serif;
            min-height: 100vh;
        }

/* ================== VIDEO BACKGROUND ================== */
.hero-video{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:brightness(.35) saturate(1.1);
}



/* ================== TOP BAR ================== */

.brand{
  display:flex;
  gap:8px;
  align-items:center;
}
.brand-icon{
  width:30px; height:30px; border-radius:999px;
  background:radial-gradient(circle, #38bdf8 0%, rgba(56,189,248,0) 70%);
  box-shadow:0 0 16px rgba(56,189,248,.8);
}
.brand-text strong{
  display:block;
  font-size:13.5px;
  letter-spacing:.04em;
}
.brand-text small{
  display:block;
  font-size:10px;
  color:rgba(226,232,255,.4);
}

/* center menu */
.topbar-nav{
  flex:1;
  display:flex;
  justify-content:center;
  gap:14px;
}
.top-link{
  color:rgba(226,232,255,.7);
  text-decoration:none;
  font-size:13px;
  padding:7px 14px 6px;
  border-radius:999px;
  transition:.12s;
}
.top-link:hover{
  background:rgba(148,163,184,.1);
  color:#fff;
}
.top-link.active{
  background:linear-gradient(135deg,#38bdf8 0%, #1d4ed8 100%);
  color:#fff;
  box-shadow:0 6px 20px rgba(13,148,255,.28);
}
/* right */
.topbar-right{
  display:flex;
  gap:8px;
  align-items:center;
}
.user-pill{
  background:rgba(15,23,42,.5);
  border:1px solid rgba(255,255,255,.04);
  border-radius:999px;
  padding:3px 12px 4px;
  font-size:12px;
  display:flex;
  gap:5px;
  align-items:center;
}
.blue-btn{
  background:linear-gradient(135deg,#38bdf8 0%, #2563eb 100%);
  border:1px solid rgba(255,255,255,.08);
  padding:5px 12px 6px;
  border-radius:999px;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  display:inline-flex;
  gap:5px;
  align-items:center;
}
.blue-btn:hover{filter:brightness(1.02);}

/* ================== HERO ================== */
.hero{
  margin-top:58px;
  min-height:360px;
  background:
     radial-gradient(circle at 16% 20%, rgba(148,163,184,.18) 0%, rgba(2,6,23,0) 45%),
}
.hero-inner{
  width:min(1180px, 100%);
  margin:0 auto;
  padding:48px 14px 30px;
  display:flex;
  gap:26px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.hero-left{
  flex:1 1 460px;
}
.hero-title{
  font-size:30px;
  font-weight:800;
  letter-spacing:.03em;
}
.hero-sub{
  margin-top:6px;
  color:rgba(226,232,255,.68);
  max-width:520px;
  line-height:1.5;
}
.hero-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.btn-primary{
  background:linear-gradient(180deg,#3ba9ff 0%, #1f60ff 100%);
  border:0;
  border-radius:13px;
  padding:10px 18px 10px;
  font-weight:700;
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  gap:7px;
  align-items:center;
  box-shadow:0 14px 35px rgba(31,96,255,.35);
}
.btn-outline{
  background:rgba(2,6,23,.2);
  border:1px solid rgba(148,163,184,.2);
  border-radius:13px;
  padding:9px 16px 9px;
  color:#fff;
  text-decoration:none;
  display:inline-flex;
  gap:6px;
  font-weight:600;
}

/* right hero panel (server status) */
.hero-right{
  width:280px;
  background:rgba(2,6,23,.35);
  border:1px solid rgba(255,255,255,.02);
  border-radius:18px;
  padding:14px 14px 14px;
  box-shadow:0 18px 35px rgba(0,0,0,.35);
}
.status-title{
  font-weight:700;
  margin-bottom:5px;
}
.status-row{
  display:flex;
  justify-content:space-between;
  background:rgba(15,23,42,.35);
  border:1px solid rgba(255,255,255,.02);
  border-radius:12px;
  padding:7px 10px 7px;
  margin-bottom:7px;
}
.status-ok{
  color:#34d399;
  font-weight:600;
}
.status-off{
  color:#f97316;
  font-weight:600;
}

.top-link{
  color:rgba(239,246,255,.7);
  text-decoration:none;
  font-size:13px;
  padding:6px 12px 6px;
  border-radius:999px;
  transition:.12s ease-out;
}
.top-link:hover{
  background:rgba(148,163,184,.12);
  color:#fff;
}
.top-link.active{
  background:linear-gradient(135deg,#38bdf8 0%,#1d4ed8 100%);
  color:#fff;
  box-shadow:0 6px 18px rgba(30,64,175,.25);
}
.userbox{
  display:flex;
  align-items:center;
  gap:12px;
}
.user-point{
  text-align:right;
  line-height:1.1;
}
.user-name{
  display:block;
  color:#fff;
  font-weight:600;
  font-size:13px;
}
.user-balance{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(15,23,42,.35);
  border:1px solid rgba(148,163,184,.15);
  padding:2px 10px 3px;
  border-radius:999px;
  font-size:11.5px;
  color:#e2e8f0;
}
.logout-btn{
  background:rgba(248,113,113,.75);
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  padding:5px 12px 6px;
  font-size:12px;
  display:inline-flex;
  gap:5px;
  align-items:center;
  border:1px solid rgba(255,255,255,.05);
  transition:.12s;
}
.logout-btn:hover{
  filter:brightness(1.02);
  box-shadow:0 8px 18px rgba(248,113,113,.25);
}

/* ===== MAIN LAYOUT ===== */
.wrapper{
  width:1100px;
  margin:40px auto 50px;
  display:flex;
  gap:20px;
}

/* ===== LEFT: account + categories ===== */
.shop-side{
  width:250px;
}
.shop-card{
  background:radial-gradient(circle at 20% 0%, rgba(22,101,216,.35) 0%, rgba(9,14,24,1) 42%);
  border:1px solid rgba(255,255,255,.03);
  border-radius:18px;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
  padding:16px 15px 15px;
  color:#ecf5ff;
  backdrop-filter:blur(12px);
}
.shop-balance{
  background:rgba(3,105,161,.12);
  border:1px solid rgba(148,163,184,.12);
  border-radius:14px;
  padding:10px 11px 10px;
  margin-bottom:14px;
}
.shop-balance label{
  display:block;
  font-size:11px;
  color:rgba(236,245,255,.5);
}
.shop-balance strong{
  display:block;
  font-size:19px;
  margin-top:3px;
}
.shop-actions a,
.shop-cats a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(15,23,42,.08);
  border:1px solid rgba(255,255,255,.015);
  border-radius:13px;
  padding:7px 11px 7px 30px;
  color:#fff;
  text-decoration:none;
  font-size:13px;
  margin-bottom:7px;
  position:relative;
}
.shop-actions a:before,
.shop-cats a:before{
  content:"";
  position:absolute;
  left:10px;
  width:9px;
  height:9px;
  border-radius:999px;
  background:radial-gradient(circle,#38bdf8 0%,rgba(56,189,248,0) 72%);
  box-shadow:0 0 16px rgba(56,189,248,.8);
}
.shop-actions a:hover,
.shop-cats a:hover,
.shop-cats a.active{
  background:rgba(56,189,248,.15);
  border-color:rgba(148,163,184,.35);
}
.shop-cats-title{
  margin-top:12px;
  margin-bottom:6px;
  font-weight:700;
  font-size:12.5px;
}

/* ===== RIGHT: content ===== */
.content-area{
  flex:1;
  background:rgba(2,6,23,.45);
  border:1px solid rgba(255,255,255,.03);
  border-radius:18px;
  padding:20px;
  color:#fff;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
}
.itemmall-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
}
.itemmall-head h2{
  margin:0;
  font-size:20px;
  font-weight:700;
}
.itemmall-head small{
  color:#9ca3af;
  font-size:12px;
}
.itemmall-head select{
  background:#020617;
  border:1px solid rgba(255,255,255,.06);
  border-radius:999px;
  padding:6px 14px;
  color:#fff;
}

/* ===== GRID (5 คอลัมน์ตอนจอใหญ่) ===== */
.shop-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}
@media (max-width: 1400px){
  .shop-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px){
  .wrapper{ width:95%; }
  .shop-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .wrapper{ flex-direction:column; }
  .shop-side{ width:100%; }
  .shop-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .shop-grid{ grid-template-columns:1fr; }
}
/* --- Card Container (อ้างอิงจากโค้ดที่คุณให้มา) --- */
.shop-card-item {
  background: radial-gradient(circle at top, #061529 0%, #020617 60%);
  border: 1px solid rgba(143,186,255,.05);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  min-height: 280px; /* เพิ่มความสูงเล็กน้อยเพื่อให้มีพื้นที่หายใจ */
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* --- เนื้อหาชื่อไอเทมและราคา --- */
.shop-card-body {
  padding: 12px 15px 5px;
  flex-grow: 1; /* ดัน Footer ลงไปข้างล่างสุดเสมอ */
}

/* --- ส่วนท้าย Card ที่วางปุ่ม --- */
.shop-card-footer {
  padding: 0 15px 15px; /* เว้นระยะล่าง 15px ให้ปุ่มลอยสวยๆ */
  display: flex;
  justify-content: center;
}

/* --- ปรับแต่งปุ่ม Buy Item ให้เล็กลงและสมส่วน --- */
.btn-buy {
  width: 90%;            /* ไม่ให้ยาวเต็มขอบจนดูอึดอัด */
  padding: 7px 12px;     /* ลดความหนาของปุ่มลง */
  font-size: 13px;       /* ขนาดตัวอักษรที่พอดี */
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  
  background: linear-gradient(180deg, #3ba9ff 0%, #1f60ff 100%);
  color: #fff;
  border-radius: 10px;   /* มนกำลังดีเข้ากับ Card */
  border: none;
  cursor: pointer;
  
  box-shadow: 0 6px 15px rgba(31, 96, 255, 0.3);
  transition: 0.2s ease;
}

.btn-buy:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(31, 96, 255, 0.45);
}

/* --- Hover Effect บนตัว Card --- */
.shop-card-item:hover {
  border-color: rgba(56, 189, 248, 0.4);
  transform: translateY(-5px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.45);
}
.shop-card-body{ flex:1; padding:10px 12px 6px; }
.shop-card-title{ font-weight:700; font-size:13.5px; line-height:1.35; min-height:36px; }
.shop-card-qty{ font-size:12px; color:rgba(236,245,255,.65); margin-top:6px; }
.shop-card-price{ margin-top:6px; font-size:13px; }
.shop-card-price .old{ text-decoration:line-through; opacity:.6; margin-right:4px; }
/* ส่วนท้ายของ Card ที่บรรจุปุ่มซื้อ */
.shop-card-footer {
    padding: 0 12px 15px; /* เพิ่มระยะล่างเล็กน้อยให้ดูโปร่งขึ้น */
    margin-top: auto;      /* ดันฟุตเตอร์ลงไปล่างสุดเสมอแม้ชื่อไอเทมจะสั้นยาวต่างกัน */
}
.btn-buy {
    /* 1. ปรับขนาดปุ่มให้เล็กลง */
    width: 85%;            /* ไม่ให้ยาวเต็มขอบจนดูแน่นเกินไป */
    margin: 0 auto;        /* จัดให้อยู่กึ่งกลาง */
    padding: 6px 10px;     /* ลด Padding บน-ล่าง (เดิมอาจจะ 10-12px) */
    
    /* 2. ปรับตัวอักษรให้พอดี */
    font-size: 12.5px;     /* ลดขนาดตัวอักษรลงเล็กน้อย */
    font-weight: 600;      /* ความหนากำลังดี อ่านง่าย */
    
    /* 3. สไตล์เสริมให้ดูเนียน */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px;   /* มนกำลังดี ไม่กลมจนเกินไป */
    
    /* สี Gradient เดิมของคุณ */
    background: linear-gradient(180deg, #3ba9ff 0%, #1f60ff 100%);
    color: #fff;
    border: none;
    transition: 0.2s ease;
}

/* เอฟเฟกต์ตอน Hover ให้ดูมีมิติแต่ไม่กระโดด */
.btn-buy:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 5px 15px rgba(31, 96, 255, 0.3);
}

/* เอฟเฟกต์เมื่อคลิก (Active) */
.btn-buy:active {
    transform: translateY(0);
}


/* paging */
.itemmall-paging{
  text-align:center;
  margin-top:20px;
}
.page-link,
.page-link--active{
  display:inline-block;
  padding:5px 9px;
  background:rgba(2,6,23,.35);
  border:1px solid rgba(255,255,255,.02);
  border-radius:8px;
  color:#fff;
  text-decoration:none;
  margin:0 2px;
  font-size:12px;
}
.page-link--active{
  background:#38bdf8;
  color:#000;
  font-weight:bold;
}


/* ================== VIDEO BACKGROUND ================== */
.hero-video{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
  filter:brightness(.35) saturate(1.1);
}

/* overlay กันตัวหนังสือจมหาย */
.video-overlay{
  position:fixed;
  inset:0;
  background:linear-gradient(
      to bottom,
      rgba(2,6,23,.45),
      rgba(2,6,23,.65)
  );
  z-index:-1;
}

/* ===== SweetAlert Custom Shop Modal ===== */
.swal2-popup.shop-modal{
  background: rgba(10,15,30,.95);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  backdrop-filter: blur(16px);
  color:#fff;
  width:520px;
  padding:22px 24px;
}

.shop-body{
  display:flex;
  gap:22px;
}

.shop-left{
  width:180px;
  text-align:center;
}

.shop-left img{
  width:170px;
  height:170px;
  object-fit:contain;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  padding:10px;
  box-shadow:0 0 25px rgba(56,189,248,.4);
}

.shop-right{
  flex:1;
  font-size:14px;
}

.shop-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
  text-align:left;
}

.shop-row{
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
  opacity:.9;
}

.shop-divider{
  margin:12px 0;
  border-top:1px solid rgba(255,255,255,.08);
}

.shop-qty{
  display:flex;
  align-items:center;
  gap:10px;
}

.shop-qty input{
  width:60px;
  height:34px;
  text-align:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(15,23,42,.6);
  color:#fff;
}

.shop-total{
  font-weight:700;
  color:#38bdf8;
}

.swal2-confirm.shop-confirm{
  background:linear-gradient(135deg,#38bdf8,#2563eb)!important;
  border:none!important;
  border-radius:10px!important;
  padding:8px 20px!important;
  box-shadow:0 10px 25px rgba(37,99,235,.4)!important;
}

.swal2-cancel.shop-cancel{
  background:#374151!important;
  border:none!important;
  border-radius:10px!important;
  padding:8px 20px!important;
}

.vip-crown {
    height: 28px;
    animation: floatVip 1.5s ease-in-out infinite;
}

.vip-text {
    color: #ffd700;
    font-weight: bold;
    text-shadow: 0 0 6px gold;
}

@keyframes floatVip {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0px); }
}



/* ===== Shop Modal Only ===== */
.swal2-popup.shop-modal{
  background: rgba(10,15,30,.95);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  backdrop-filter: blur(14px);
  color:#fff;
  width:600px;
  padding:10px 14px;
}

.shop-wrap{
  text-align:left;
}

.shop-img{
  text-align:center;
  margin-bottom:12px;
}

.shop-img img{
  width:180px;
  height:180px;
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  padding:10px;
  box-shadow:0 0 25px rgba(56,189,248,.4);
}

.shop-title{
  text-align:center;
  font-size:14px;
  font-weight:400;
  margin-bottom:10px;
}

.shop-line{
  margin:4px 0;
  opacity:.9;
}

.shop-total{
  font-weight:700;
  color:#38bdf8;
}

.swal2-confirm.shop-confirm{
  background:linear-gradient(135deg,#38bdf8,#2563eb)!important;
  border:none!important;
  border-radius:10px!important;
  padding:8px 20px!important;
}

.swal2-cancel.shop-cancel{
  background:#374151!important;
  border:none!important;
  border-radius:10px!important;
  padding:8px 20px!important;
}

.item-modal{
    display:flex;
    gap:40px;
    padding:40px;
    background:linear-gradient(145deg,#0b1420,#0f1d2e);
    border-radius:20px;
    width:750px;
    box-shadow:0 0 40px rgba(0,180,255,0.15);
    color:#eaf6ff;
    font-family:'Segoe UI',sans-serif;
}

.item-left{
    width:180px;
    height:180px;
    background:#0c1826;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 0 25px rgba(0,150,255,0.25);
}

.item-left img{
    max-width:80%;
    max-height:80%;
}

.item-right h2{
    font-size:24px;
    margin-bottom:15px;
    color:#ffffff;
}

.item-description{
    color:#9ecbff;
    margin-bottom:20px;
    line-height:1.6;
}

.item-info div{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:14px;
}

.item-info span{
    color:#9aaec2;
}

.item-info b{
    color:#ffffff;
}

.cash{
    color:#00d0ff;
}

.buy-section{
    margin-top:20px;
}

.buy-section input{
    width:70px;
    padding:8px;
    border-radius:8px;
    border:1px solid #1e3a55;
    background:#0c1826;
    color:white;
    text-align:center;
}

.total-price{
    margin-top:20px;
    font-size:16px;
}

.total-price span{
    color:#00d0ff;
    font-weight:bold;
}

.modal-buttons{
    margin-top:25px;
    display:flex;
    gap:15px;
}

.btn-buy{
    flex:1;
    padding:12px;
    border-radius:12px;
    border:none;
    background:linear-gradient(90deg,#00c6ff,#0072ff);
    color:white;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.btn-buy:hover{
    transform:translateY(-2px);
    box-shadow:0 0 15px rgba(0,170,255,.6);
}

.btn-cancel{
    flex:1;
    padding:12px;
    border-radius:12px;
    border:none;
    background:#1a2635;
    color:#aaa;
    cursor:pointer;
}
/* ===============================
   SWEETALERT SHOP MODAL
================================= */

.shop-modal{
  background: radial-gradient(circle at top left, #0f1b2f, #070d18 60%);
  border: 1px solid rgba(0,200,255,.25);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0,200,255,.15),
    0 0 40px rgba(0,200,255,.15),
    0 20px 60px rgba(0,0,0,.8);
  padding: 30px;
  color: #d9f3ff;
  font-family: 'Segoe UI', sans-serif;
}

/* layout */
.shop-body{
  display:flex;
  gap:30px;
  align-items:flex-start;
}

/* LEFT IMAGE */
.shop-left{
  width:180px;
  height:180px;
  background: linear-gradient(145deg,#0a1627,#0d1e36);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,200,255,.15);
  box-shadow: inset 0 0 30px rgba(0,200,255,.08);
}

.shop-left img{
  max-width:180px;
  max-height:180px;
  filter: drop-shadow(0 0 15px rgba(0,200,255,.4));
  transition:.3s;
}

.shop-left img:hover{
  transform:scale(1.05);
}

/* RIGHT SIDE */
.shop-right{
  flex:1;
}

/* TITLE */
.shop-title{
  font-size:22px;
  font-weight:800;
  margin-bottom:15px;
  color:#ffffff;
  text-shadow:0 0 10px rgba(0,200,255,.6);
}

/* ROW */
.shop-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.04);
}

.shop-row span:first-child{
  color:#8ccfff;
}

.shop-row span:last-child{
  font-weight:600;
  color:#ffffff;
}

/* divider */
.shop-divider{
  height:1px;
  margin:18px 0;
  background:linear-gradient(to right,transparent,#00cfff,transparent);
  opacity:.4;
}

/* quantity */
.shop-qty{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.shop-qty input{
  width:70px;
  padding:6px;
  text-align:center;
  background:#0b1524;
  border:1px solid rgba(0,200,255,.3);
  border-radius:8px;
  color:#fff;
  font-weight:600;
  outline:none;
  transition:.2s;
}

.shop-qty input:focus{
  border-color:#00eaff;
  box-shadow:0 0 10px rgba(0,234,255,.4);
}

/* total price glow */
.shop-total{
  font-weight:800;
  color:#00eaff;
  text-shadow:0 0 8px rgba(0,234,255,.7);
  font-size:16px;
}

/* ===============================
   BUTTONS
================================= */

.shop-confirm{
  background: linear-gradient(135deg,#00cfff,#007bff);
  border:none;
  border-radius:10px;
  padding:10px 25px;
  font-weight:700;
  color:#fff;
  box-shadow:0 0 20px rgba(0,200,255,.4);
  transition:.2s;
}

.shop-confirm:hover{
  transform:translateY(-2px);
  box-shadow:0 0 30px rgba(0,200,255,.7);
}

.shop-cancel{
  background:#1a2435;
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:10px 25px;
  color:#aaa;
  transition:.2s;
}

.shop-cancel:hover{
  background:#222f47;
  color:#fff;
}

/* ===============================
   MOBILE RESPONSIVE
================================= */

@media(max-width:768px){

  .shop-body{
    flex-direction:column;
    align-items:center;
  }

  .shop-left{
    width:180px;
    height:180px;
  }

}
.qty-box{
  display:flex;
  align-items:center;
  gap:6px;
}

.qty-box input{
  width:60px;
  text-align:center;
  background:#0f1424;
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  font-weight:700;
  border-radius:6px;
  padding:6px;
}

.qty-btn{
  width:32px;
  height:32px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  font-weight:800;
  font-size:16px;
  color:#fff;
  background:linear-gradient(180deg,#1b2a4a,#0f162a);
  box-shadow:0 0 8px rgba(0,120,255,.3);
  transition:.2s;
}

.qty-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 0 12px rgba(0,160,255,.6);
}

.qty-btn:active{
  transform:scale(.95);
}


/* ===== SweetAlert Button Spacing ===== */

.shop-modal .swal2-actions {
  gap: 15px;               /* ระยะห่างระหว่างปุ่ม */
  margin-top: 25px;        /* เว้นระยะจากเนื้อหาด้านบน */
}

.shop-confirm,
.shop-cancel {
  min-width: 130px;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 600;
  transition: 0.2s ease;
}

/* ปุ่ม Purchase */
.shop-confirm {
  background: linear-gradient(135deg, #3a8bff, #1e60d6);
  color: #fff;
}

.shop-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(58,139,255,0.4);
}

/* ปุ่ม Cancel */
.shop-cancel {
  background: #2f3b4f;
  color: #ccc;
}

.shop-cancel:hover {
  background: #3d4c63;
}