@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;900&display=swap');

:root {
    --bg-color: #e8eaed; 
    --primary-color: #0984e3; 
    --primary-hover: #076ebc;
    --text-dark: #2d3436;
    --header-bg: #1c1e22; 
    --gold-main: #f1c40f; 
    --gold-dark: #d4af37; 
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Kanit', sans-serif; }

/* 🌟 แก้สีพื้นหลังสุดให้เป็นสีดำของ Footer กลบเกลื่อนรอยต่อเวลาเบราว์เซอร์กระตุกโหลด */
html { background-color: #0f1013; scroll-behavior: smooth; }
body { background-color: var(--bg-color); color: var(--text-dark); overflow-x: hidden; min-height: 100vh; position: relative; }

/* =========================================
   🌟 Header & Navbar (Sticky)
========================================= */
.main-header { 
    background-color: var(--header-bg); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    transition: box-shadow 0.3s ease; 
}
.top-bar { display: flex; justify-content: space-between; align-items: center; max-width: 1600px; margin: 0 auto; padding: 15px 20px; border-bottom: 1px solid #333; }
.logo { font-size: 1.8rem; font-weight: 700; color: #fff; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.logo span { color: var(--primary-color); }

.search-box { display: flex; background: #fff; border-radius: 4px; overflow: hidden; width: 450px; }
.search-box input { flex: 1; padding: 10px 15px; border: none; outline: none; font-family: 'Kanit'; }
.search-box button { background: var(--primary-color); color: white; border: none; padding: 0 15px; cursor: pointer; transition: 0.2s; }
.search-box button:hover { background: var(--primary-hover); }

.user-actions { display: flex; align-items: center; gap: 20px; }
.keypark-gift { color: #fff; text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; transition: 0.2s; }
.keypark-gift i { font-size: 1.1rem; color: var(--primary-color); }
.keypark-gift:hover { color: var(--primary-hover); transform: translateY(-2px); }

.btn-login { color: #fff; text-decoration: none; background: var(--primary-color); padding: 8px 18px; border-radius: 4px; font-weight: 500; transition: 0.2s; cursor: pointer; border: none; font-family: 'Kanit'; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.btn-login i { font-size: 1.1rem; }
.btn-login:hover { background: var(--primary-hover); }

.user-dropdown-wrap { position: relative; display: inline-block; }
.user-dropdown-wrap::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 20px; background: transparent; }

.user-profile-btn { background: #2b323b; color: #fff; border: none; padding: 8px 15px; border-radius: 4px; font-family: 'Kanit'; font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 500; transition: 0.2s; }
.user-profile-btn i.fa-user-circle { color: var(--primary-color); font-size: 1.2rem; }
.user-profile-btn:hover { background: #3a434d; }

.user-dropdown-menu { position: absolute; top: calc(100% + 10px); right: 0; background: #23262b; min-width: 200px; border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); display: none; flex-direction: column; overflow: hidden; z-index: 2000; border: 1px solid #333; animation: fadeInDropdown 0.2s ease; }
.user-dropdown-menu::before { content: ''; position: absolute; top: -6px; right: 20px; width: 12px; height: 12px; background: #23262b; border-top: 1px solid #333; border-left: 1px solid #333; transform: rotate(45deg); }
.user-dropdown-wrap:hover .user-dropdown-menu { display: flex; }
@keyframes fadeInDropdown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.user-dropdown-menu a { color: #ccc; text-decoration: none; padding: 12px 20px; font-size: 0.95rem; transition: 0.2s; border-bottom: 1px solid #2b2e33; display: flex; align-items: center; gap: 10px; position: relative; z-index: 2; }
.user-dropdown-menu a:last-child { border-bottom: none; }
.user-dropdown-menu a i { width: 20px; text-align: center; color: #888; transition: 0.2s; }
.user-dropdown-menu a:hover { background: #1c1e22; color: #fff; padding-left: 25px; border-left: 3px solid var(--primary-color); }
.user-dropdown-menu a:hover i { color: var(--primary-color); }
.user-dropdown-menu a.logout-link:hover i { color: #ff4757; }

/* --- Navbar Menu --- */
.nav-bar { max-width: 1600px; margin: 0 auto; padding: 10px 20px; display: flex; gap: 20px; align-items: center; }
.nav-bar a { color: #aaa; text-decoration: none; font-weight: 500; font-size: 0.95rem; text-transform: uppercase; transition: 0.2s; }
.nav-bar a:hover, .nav-bar a.active { color: #fff; } 
.btn-menu-trigger { background: var(--primary-color); color: #fff !important; padding: 8px 20px; border-radius: 4px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: 0.2s; }
.btn-menu-trigger:hover { background: var(--primary-hover); transform: translateY(-2px); }

.nav-bundle-tag { background-color: #fff !important; color: #000 !important; font-family: 'Kanit', sans-serif; font-weight: 600 !important; font-size: 0.9rem !important; padding: 4px 10px !important; border-radius: 4px; display: inline-flex; align-items: center; transition: 0.2s ease; }
.nav-bundle-tag:hover { background-color: var(--primary-color) !important; color: #fff !important; }

.nav-explore { margin-left: auto; color: #aaa !important; font-weight: 500; font-size: 0.95rem; transition: 0.2s; display: flex; align-items: center; gap: 6px; }
.nav-explore:hover { color: #fff !important; }
.nav-help-center { margin-left: 0; color: #aaa !important; font-weight: 500; font-size: 0.95rem; transition: 0.2s; }
.nav-help-center:hover { color: #fff !important; }

/* =========================================
   🌟 ระบบตะกร้าสินค้า (Cart Dropdown & Pop-up)
========================================= */
.btn-cart { position: relative; display: flex; align-items: center; gap: 5px; }

.cart-badge {
    position: absolute; top: -8px; right: -12px;
    background-color: var(--primary-color); color: #fff;
    font-size: 0.75rem; font-weight: 700; width: 20px; height: 20px;
    border-radius: 50%; display: flex; justify-content: center; align-items: center;
    border: 2px solid var(--header-bg);
    opacity: 0; transform: scale(0); transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cart-badge.active { opacity: 1; transform: scale(1); }

.cart-dropdown-wrap { position: relative; display: inline-block; }
.cart-dropdown-wrap::after { content: ''; position: absolute; top: 100%; right: 0; width: 100%; height: 20px; background: transparent; }

.cart-dropdown-menu {
    position: absolute; top: calc(100% + 15px); right: 0; 
    width: 320px; background: #23262b; border-radius: 8px; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.6); 
    display: flex; flex-direction: column; z-index: 2000; border: 1px solid #333; 
    cursor: default; font-family: 'Kanit';
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-15px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cart-dropdown-wrap:hover .cart-dropdown-menu { 
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

.cart-dropdown-menu.show-cart { 
    opacity: 1 !important; visibility: visible !important; 
    pointer-events: auto !important; transform: translateY(0) !important;
}

.cart-dropdown-menu::before {
    content: ''; position: absolute; top: -6px; right: 20px; 
    width: 12px; height: 12px; background: #23262b;
    border-top: 1px solid #333; border-left: 1px solid #333; transform: rotate(45deg);
}

.cart-header { padding: 15px; border-bottom: 1px solid #333; color: #fff; font-weight: 600; font-size: 1rem; }
.cart-items { padding: 10px 15px; max-height: 250px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.cart-items::-webkit-scrollbar { width: 5px; }
.cart-items::-webkit-scrollbar-thumb { background: #444; border-radius: 5px; }
.cart-empty-msg { color: #888; text-align: center; font-size: 0.9rem; padding: 20px 0; }

.cart-item-row { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #333; position: relative; }
.cart-item-row:last-child { border-bottom: none; padding-bottom: 0; }
.cart-item-img { width: 50px; height: 30px; object-fit: cover; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.cart-item-info { flex: 1; overflow: hidden; }
.cart-item-title { font-size: 0.85rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.cart-item-price { color: var(--gold-main); font-weight: 700; font-size: 0.9rem; }
.cart-item-remove { background: none; border: none; color: #666; font-size: 0.9rem; cursor: pointer; transition: 0.2s; padding: 5px; border-radius: 4px; }
.cart-item-remove:hover { color: #ff4757; background: rgba(255, 71, 87, 0.1); }

.cart-total-box { padding: 15px; border-top: 1px solid #333; display: flex; justify-content: space-between; align-items: center; color: #fff; font-weight: 700; font-size: 1.1rem; }
.cart-actions-row { display: flex; gap: 10px; padding: 0 15px 15px; }
.cart-btn-view { flex: 1; background: #3a3f47; color: #fff; text-align: center; padding: 10px; border-radius: 4px; text-decoration: none; font-weight: 500; transition: 0.2s; }
.cart-btn-view:hover { background: #4a515a; }
.cart-btn-checkout { flex: 1; margin: 0; width: auto; background: var(--primary-color); }
.cart-btn-checkout:hover { background: var(--primary-hover); transform: translateY(-2px); }

.cart-progress-container { background: #1c1e22; padding: 15px; border-top: 1px solid #333; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.cart-progress-title { font-size: 0.8rem; color: #aaa; margin-bottom: 15px; text-align: center; }
.cart-progress-title span { color: var(--gold-main); font-weight: bold; }
.cp-track-wrapper { position: relative; width: 100%; }
.cp-tiers { position: relative; display: flex; justify-content: space-between; z-index: 3; }
.cp-track { position: absolute; top: 50%; left: 0; right: 0; height: 6px; background: #333; transform: translateY(-50%); z-index: 1; border-radius: 3px; }
.cp-fill { position: absolute; top: 0; left: 0; height: 100%; background: linear-gradient(90deg, var(--primary-color), #0abde3); border-radius: 3px; z-index: 2; transition: width 0.5s ease; }
.cp-tier-dot { width: 18px; height: 18px; background: #333; border: 2px solid #1c1e22; border-radius: 50%; display: flex; justify-content: center; align-items: center; transition: 0.3s; }
.cp-tier-dot.active { background: var(--primary-color); box-shadow: 0 0 8px var(--primary-color); border-color: var(--primary-color); }
.cp-tier-dot.gift { background: var(--gold-main); box-shadow: 0 0 8px var(--gold-main); border-color: var(--gold-main); }
.cp-tier-dot i { font-size: 0.55rem; color: #fff; display: none; }
.cp-tier-dot.active i { display: block; }
.cp-tier-dot.gift i { display: block; color: #000; }

@keyframes cartBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); color: var(--primary-color); } }
.cart-bump { animation: cartBounce 0.4s ease; }

.cart-dropdown-wrap .cart-dropdown-menu.show-cart,
.cart-dropdown-menu.show-cart { 
    display: flex !important; 
    opacity: 1 !important; 
    visibility: visible !important;
    animation: popInCart 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
    transform-origin: top right;
}
@keyframes popInCart { 0% { opacity: 0; transform: scale(0.9) translateY(-15px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* =========================================
   🌟 Layout Container & General
========================================= */
.container { max-width: 1600px; margin: 30px auto; padding: 0 20px; }
.section-title { margin-bottom: 20px; font-size: 1.5rem; font-weight: 700; color: #2d3436; display: flex; justify-content: space-between; align-items: center; border-left: 5px solid var(--primary-color); padding-left: 15px; }

/* =========================================
   🌟 Banner Slider
========================================= */
.banner-slider { position: relative; width: 100%; margin: 0 auto 30px; height: 500px; overflow: hidden; display: flex; justify-content: center; align-items: center; background: var(--header-bg); }
.slide { position: absolute; width: 70vw; max-width: 1400px; height: 95%; border-radius: 12px; overflow: hidden; opacity: 0; pointer-events: none; transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.slide img { width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.slide.active { left: 50%; transform: translateX(-50%) scale(1); opacity: 1; z-index: 3; pointer-events: auto; }
.slide.prev { left: calc(50% - min(35vw, 700px) - 25px); transform: translateX(-100%) scale(0.85); transform-origin: right center; opacity: 0.4; z-index: 1; }
.slide.next { left: calc(50% + min(35vw, 700px) + 25px); transform: translateX(0) scale(0.85); transform-origin: left center; opacity: 0.4; z-index: 1; }

.slide-overlay { position: absolute; bottom: 0; left: 0; width: 100%; padding: 25px 40px; display: flex; justify-content: space-between; align-items: flex-end; background: linear-gradient(transparent, rgba(0,0,0,0.8)); z-index: 2; }
.slide-platform { background: rgba(0,0,0,0.7); color: #fff; padding: 6px 12px; border-radius: 4px; font-size: 0.9rem; font-weight: 600; backdrop-filter: blur(5px); }
.slide-buy-box { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.7); padding: 8px 10px 8px 20px; border-radius: 50px; backdrop-filter: blur(5px); }
.slide-price { color: #fff; font-size: 1.5rem; font-weight: 700; }
.btn-slide-buy { background: var(--primary-color); color: #fff; border: none; padding: 10px 30px; border-radius: 50px; font-weight: 600; font-size: 1.1rem; cursor: pointer; transition: 0.2s; text-decoration: none; }
.btn-slide-buy:hover { background: var(--primary-hover); transform: scale(1.05); }

.slide-center-box { position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; }
.btn-view-all { background: var(--gold-main); color: #2d3436; padding: 10px 40px; font-size: 1.1rem; font-weight: 700; border-radius: 50px; text-decoration: none; display: inline-block; transition: 0.3s; box-shadow: 0 4px 15px rgba(0,0,0,0.5); text-transform: uppercase; }
.btn-view-all:hover { transform: scale(1.05); background: var(--gold-dark); }

.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); color: var(--primary-color); width: 50px; height: 50px; border-radius: 50%; border: none; font-size: 1.3rem; cursor: pointer; z-index: 5; display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: 0.3s; }
.slider-btn:hover { transform: translateY(-50%) scale(1.1); color: var(--primary-hover); background: #fff; }
.slider-btn.prev { left: 3vw; } 
.slider-btn.next { right: 3vw; }
.slider-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.dot { width: 10px; height: 10px; background: rgba(255,255,255,0.4); border-radius: 50%; cursor: pointer; transition: 0.3s; }
.dot.active, .dot:hover { background: #fff; transform: scale(1.3); }

/* =========================================
   🌟 โซน Flash Sale & Event
========================================= */
.promo-section { display: grid; grid-template-columns: 3fr 1fr; gap: 20px; max-width: 1600px; margin: 0 auto 40px; padding: 0 20px; }
.fs-container { background: linear-gradient(145deg, #1f1b0c, #0a0800); border: 1px solid rgba(241, 196, 15, 0.3); border-radius: 12px; padding: 25px; box-shadow: 0 10px 30px rgba(241, 196, 15, 0.08), inset 0 0 20px rgba(241, 196, 15, 0.05); position: relative; overflow: hidden; }
.fs-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(241, 196, 15, 0.05) 0%, transparent 60%); pointer-events: none; }
.fs-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(241, 196, 15, 0.2); padding-bottom: 15px; margin-bottom: 20px; position: relative; z-index: 1; }
.fs-title { color: #fff; font-size: 1.6rem; font-weight: 700; display: flex; align-items: center; gap: 10px; text-shadow: 0 0 10px rgba(241, 196, 15, 0.3); }
.fs-title i { color: var(--gold-main); font-size: 1.8rem; filter: drop-shadow(0 0 8px rgba(241, 196, 15, 0.8)); }
.fs-timer-wrapper { display: flex; align-items: center; gap: 15px; }
.fs-timer { display: flex; align-items: center; gap: 6px; }
.fs-time-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fs-time-box { background: linear-gradient(180deg, rgba(241, 196, 15, 0.2), rgba(241, 196, 15, 0.05)); border: 1px solid rgba(241, 196, 15, 0.5); color: var(--gold-main); padding: 8px 10px; border-radius: 6px; font-weight: 700; font-family: monospace; font-size: 1.4rem; min-width: 45px; text-align: center; box-shadow: 0 0 10px rgba(241, 196, 15, 0.2); line-height: 1; }
.fs-time-label { font-size: 0.7rem; color: rgba(241, 196, 15, 0.8); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.fs-colon { color: var(--gold-main); font-size: 1.5rem; font-weight: bold; transform: translateY(-10px); animation: blink 1s infinite; text-shadow: 0 0 8px rgba(241, 196, 15, 0.6); }

.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 15px; position: relative; z-index: 1; }
.fs-card { background-color: #151515; border: 1px solid rgba(241, 196, 15, 0.4); border-radius: 8px; padding: 12px; text-decoration: none; color: #fff; transition: all 0.3s ease; position: relative; display: flex; flex-direction: column; }
.fs-card:hover { border-color: var(--gold-main); box-shadow: 0 8px 20px rgba(241, 196, 15, 0.3); }
.fs-card img { width: 100%; height: 160px; object-fit: cover; border-radius: 6px; margin-bottom: 10px; }
.fs-discount-tag { position: absolute; top: 18px; left: 18px; background: linear-gradient(45deg, #ff4757, #ff6b81); color: white; padding: 4px 8px; border-radius: 4px; font-weight: 800; font-size: 0.85rem; }
.fs-card-platform { display: flex; justify-content: space-between; align-items: center; color: #aaa; font-size: 0.8rem; margin-bottom: 5px; }
.fs-type-tag { background: #fff; color: #000; padding: 2px 6px; border-radius: 12px; font-weight: 700; font-size: 0.65rem; }
.fs-card h4 { font-size: 1.05rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 10px; color: #e0e0e0; }
.fs-card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.fs-card-price-box { display: flex; flex-direction: column; }
.fs-card .old-price { color: #888; text-decoration: line-through; font-size: 0.85rem; line-height: 1; }
.fs-card .price { color: var(--gold-main); font-size: 1.3rem; font-weight: 700; text-shadow: 0 0 5px rgba(241, 196, 15, 0.3); line-height: 1.2;}
.btn-fs-cart { background: linear-gradient(135deg, var(--gold-dark), var(--gold-main)); color: #000; border: none; padding: 8px 12px; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 10px rgba(241, 196, 15, 0.3); }
.btn-fs-cart:hover { transform: scale(1.1); box-shadow: 0 6px 15px rgba(241, 196, 15, 0.5); }
.fs-expired-badge { background: #ff4757; color: #fff; padding: 5px 12px; border-radius: 4px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.5px; }
.fs-card.expired { filter: grayscale(100%); opacity: 0.5; pointer-events: none; border-color: #333; }

.ue-container { background: linear-gradient(145deg, #16181b, #0f1013); border: 1px solid rgba(9, 132, 227, 0.2); border-radius: 12px; padding: 25px; box-shadow: 0 10px 30px rgba(9, 132, 227, 0.1), inset 0 0 20px rgba(9, 132, 227, 0.05); position: relative; overflow: hidden; display: flex; flex-direction: column; }
.ue-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(9,132,227,0.1) 0%, transparent 60%); pointer-events: none; }
.ue-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 15px; margin-bottom: 20px; position: relative; z-index: 1; }
.ue-title { color: #fff; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; gap: 8px; text-shadow: 0 0 10px rgba(9, 132, 227, 0.5); }
.ue-title i { color: var(--primary-color); font-size: 1.4rem; filter: drop-shadow(0 0 8px rgba(9, 132, 227, 0.8)); }
.ue-timer-wrapper { background: rgba(9, 132, 227, 0.1); border: 1px solid rgba(9, 132, 227, 0.3); border-radius: 8px; padding: 12px; display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 15px; position: relative; z-index: 1; box-shadow: 0 0 10px rgba(9, 132, 227, 0.15); }
.ue-timer-wrapper span { color: var(--primary-color); font-size: 0.9rem; font-weight: 600; text-transform: uppercase; }
.ue-timer { display: flex; gap: 5px; color: #fff; align-items: center; font-size: 0.95rem; }
.ue-time-box { color: #fff; font-weight: 700; font-family: monospace; font-size: 1.2rem; }
.ue-live-badge { background: #00e676; color: #000; padding: 6px 15px; border-radius: 6px; font-size: 0.95rem; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 0 15px rgba(0, 230, 118, 0.4); animation: pulseLive 2s infinite; }
@keyframes pulseLive { 0% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(0, 230, 118, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0); } }

.ue-card { border: 1px solid rgba(9, 132, 227, 0.2); border-radius: 8px; overflow: hidden; position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; background: #1c1e22; transition: 0.3s; text-decoration: none; }
.ue-card:hover { border-color: var(--primary-color); box-shadow: 0 8px 20px rgba(9, 132, 227, 0.25); }
.ue-card img { width: 100%; height: 150px; object-fit: cover; border-bottom: 1px solid #2b2e33; }
.ue-info { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.ue-badge { display: inline-block; align-self: flex-start; background: linear-gradient(45deg, var(--primary-color), #0abde3); color: white; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; margin-bottom: 10px; box-shadow: 0 4px 10px rgba(9, 132, 227, 0.3); }
.ue-info h4 { font-size: 1.1rem; color: #fff; margin-bottom: 8px; font-weight: 600; }
.ue-info p { font-size: 0.85rem; color: #aaa; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; }

/* =========================================
   🌟 โซนคูปองส่วนลด
========================================= */
.coupon-section { max-width: 1600px; margin: 0 auto 40px; padding: 0 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.coupon-card { background: linear-gradient(145deg, #1c1e22, #151619); border-radius: 12px; display: flex; overflow: hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.15); border: 1px solid #333; transition: 0.3s ease; position: relative; }
.coupon-card:hover { border-color: var(--primary-color); box-shadow: 0 15px 30px rgba(9, 132, 227, 0.15); }
.coupon-img-box { width: 40%; position: relative; }
.coupon-img-box img { width: 100%; height: 100%; object-fit: cover; }
.coupon-img-overlay { position: absolute; inset: 0; background: linear-gradient(to right, transparent, #1c1e22 95%); }
.coupon-content { width: 60%; padding: 20px; display: flex; flex-direction: column; justify-content: center; border-left: 2px dashed #444; position: relative; }
.coupon-content::before, .coupon-content::after { content: ''; position: absolute; left: -11px; width: 20px; height: 20px; background: var(--bg-color); border-radius: 50%; border: 1px solid #333; }
.coupon-content::before { top: -11px; border-bottom: none; border-left: none; transform: rotate(45deg); }
.coupon-content::after { bottom: -11px; border-top: none; border-left: none; transform: rotate(-45deg); }
.coupon-discount { color: var(--gold-main); font-size: 1.6rem; font-weight: 800; line-height: 1; margin-bottom: 5px; text-shadow: 0 0 10px rgba(241, 196, 15, 0.3); }
.coupon-title { color: #fff; font-size: 1rem; font-weight: 600; margin-bottom: 12px; }
.coupon-code-box { background: #000; border: 1px solid #444; padding: 8px 12px; border-radius: 6px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; position: relative; overflow: hidden; }
.coupon-code-text { color: var(--primary-color); font-family: monospace; font-weight: 700; font-size: 1.1rem; letter-spacing: 1px; }
.coupon-copy-btn { background: none; border: none; color: #888; cursor: pointer; transition: 0.2s; font-size: 1.1rem; display: flex; align-items: center; gap: 5px; }
.coupon-copy-btn:hover { color: #fff; }
.coupon-copy-btn.copied { color: #00e676; }
.coupon-expiry { color: #777; font-size: 0.8rem; display: flex; align-items: center; gap: 5px; }
.coupon-expiry i { color: #ff4757; }

/* =========================================
   🌟 การ์ดสินค้าหลัก (ภาพนิ่ง ไม่กระโดด)
========================================= */
.influencer-badge { position: absolute; top: 10px; left: 10px; background: linear-gradient(45deg, #8a2be2, #ff0055); color: white; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; z-index: 5; display: flex; align-items: center; gap: 5px; box-shadow: 0 4px 10px rgba(255, 0, 85, 0.4); animation: pulseBadge 2s infinite; }
@keyframes pulseBadge { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }
.product-card.mystery-box { border: 1px solid #8a2be2; box-shadow: 0 0 15px rgba(138, 43, 226, 0.3); }
.product-card.mystery-box .product-image-container::before, .product-card.mystery-box .product-image-container::after { content: '✨'; position: absolute; color: #f1c40f; font-size: 1.5rem; opacity: 0; z-index: 10; pointer-events: none; }
.product-card.mystery-box:hover .product-image-container::before { animation: floatMagic1 1.5s infinite ease-in-out; left: 20%; top: 70%; }
.product-card.mystery-box:hover .product-image-container::after { animation: floatMagic2 2s infinite ease-in-out; right: 25%; top: 80%; font-size: 1rem; }
@keyframes floatMagic1 { 0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 0; } 50% { transform: translateY(-30px) scale(1.2) rotate(15deg); opacity: 1; } 100% { transform: translateY(-60px) scale(0.5) rotate(30deg); opacity: 0; } }
@keyframes floatMagic2 { 0% { transform: translateY(0) scale(0.5) rotate(0deg); opacity: 0; } 50% { transform: translateY(-40px) scale(1) rotate(-15deg); opacity: 1; } 100% { transform: translateY(-80px) scale(0.5) rotate(-30deg); opacity: 0; } }

.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.product-card { 
    background-color: #1c1e22; border-radius: 6px; overflow: hidden; 
    position: relative; transition: all 0.2s ease; color: #fff; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    cursor: pointer;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
}
.product-card:hover { box-shadow: 0 8px 15px rgba(0,0,0,0.2); }
.product-image-container { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; background: #000; }
.product-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: 0.3s ease; }
.product-card:hover .product-image { filter: brightness(1.1); } 
.product-platform { background-color: #2b323b; padding: 5px 15px; text-align: center; font-size: 0.75rem; font-weight: 600; color: #e0e0e0; display: flex; justify-content: center; align-items: center; gap: 6px; position: relative; }
.product-platform i { font-size: 1rem; }
.product-type-badge { position: absolute; right: 10px; background-color: #fff; color: #000; padding: 2px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 700; }
.product-info { padding: 15px; background-color: #1c1e22; }
.price-container { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.discount-badge { background-color: #cc0000; color: white; padding: 3px 6px; font-weight: 700; border-radius: 3px; font-size: 1rem; }
.old-price { text-decoration: line-through; color: #888; font-size: 0.9rem; }
.current-price { font-size: 1.3rem; font-weight: 700; color: #fff; margin-left: auto; }
.card-actions { display: flex; gap: 2px; }
.btn-add-cart { flex: 1; background-color: #454a51; color: #fff; border: none; padding: 10px; border-radius: 4px 0 0 4px; cursor: pointer; font-weight: 600; font-family: 'Kanit'; transition: 0.2s; font-size: 0.95rem; }
.btn-wishlist { background-color: #454a51; color: #fff; border: none; width: 45px; border-radius: 0 4px 4px 0; cursor: pointer; transition: 0.2s; font-size: 1.1rem; }
.btn-add-cart:hover, .btn-wishlist:hover { background-color: var(--primary-color); }

/* =========================================
   🌟 ระบบ Hover Video Preview Pop-up
========================================= */
.game-hover-popup {
    position: absolute; width: 340px; background-color: #16181b; 
    border-radius: 12px; box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    border: 1px solid #333; z-index: 2500; opacity: 0; visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease; transform: translateY(10px);
    pointer-events: none; font-family: 'Kanit', sans-serif; overflow: hidden;
    top: 0; left: 0; will-change: transform, opacity;
}
.game-hover-popup.show { opacity: 1; visibility: visible; transform: translateY(0); }
.hp-video-box { width: 100%; aspect-ratio: 16/9; background: #000; position: relative; }
.hp-video-box video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-video-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; background: linear-gradient(to bottom, transparent, #16181b); }
.hp-content { padding: 15px 20px 20px; }
.hp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 5px; }
.hp-title { color: #fff; font-size: 1.2rem; font-weight: 600; line-height: 1.3; margin: 0; }
.hp-platforms { display: flex; gap: 8px; color: #888; font-size: 1.1rem; padding-top: 3px; }
.hp-platforms i { transition: 0.2s; }
.hp-platforms i:hover { color: #fff; }
.hp-date { color: #777; font-size: 0.85rem; margin-bottom: 15px; }
.hp-stats-container { display: flex; flex-direction: column; gap: 12px; margin-bottom: 15px; }
.hp-sales { display: flex; align-items: center; gap: 8px; color: #aaa; font-size: 0.9rem; }
.hp-sales i { color: var(--gold-main); font-size: 1rem; }
.hp-sales-count { color: #fff; font-weight: 600; }
.hp-reviews { display: flex; align-items: center; gap: 12px; background: #23262b; padding: 10px 12px; border-radius: 8px; border: 1px solid #2b2e33; }
.hp-avatars { display: flex; align-items: center; }
.hp-avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid #23262b; object-fit: cover; margin-left: -10px; }
.hp-avatar:first-child { margin-left: 0; }
.hp-review-text { display: flex; flex-direction: column; line-height: 1.2; }
.hp-review-status { color: #00e676; font-weight: 600; font-size: 0.9rem; }
.hp-review-count { color: #888; font-size: 0.75rem; }
.hp-tags-list { display: flex; flex-wrap: wrap; gap: 6px; }
.hp-tag { background-color: #2b323b; color: #ccc; padding: 4px 10px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; }

/* =========================================
   🌟 การ์ดสินค้ามาแรง (Trend Card)
========================================= */
.trend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 25px; margin-bottom: 40px; }
.trend-card { 
    position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; 
    text-decoration: none; display: block; box-shadow: 0 10px 25px rgba(0,0,0,0.15); transition: 0.3s; 
    -webkit-transform: translateZ(0); transform: translateZ(0); will-change: transform, box-shadow;
}
.trend-card:hover { box-shadow: 0 15px 35px rgba(0,0,0,0.3); }
.trend-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.trend-card:hover .trend-img { transform: scale(1.05); }
.trend-top-badge { position: absolute; top: 15px; right: 15px; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); color: #fff; padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.trend-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 50%, transparent 100%); padding: 35px 20px 20px; display: flex; flex-direction: column; justify-content: flex-end; height: 50%; }
.trend-title { color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.trend-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.trend-tag-pill { background: rgba(255,255,255,0.15); backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.1); color: #e0e0e0; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.5px; }

/* =========================================
   🌟 โซน Bestsellers & Most Wishlisted
========================================= */
.dual-list-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 60px; max-width: 1100px; margin-left: auto; margin-right: auto; padding: 0 20px; }
.list-col h2 { color: #fff; font-size: 1.25rem; text-transform: uppercase; margin-bottom: 15px; font-weight: 700; letter-spacing: 1px; border-bottom: none; padding-bottom: 0; text-align: left; }
.list-item { display: flex; align-items: center; background: #16181b; border-radius: 12px; margin-bottom: 10px; padding: 8px 12px; transition: 0.3s ease; border: 1px solid #2b2e33; cursor: pointer; text-decoration: none; height: 65px; }
.list-item:hover { background: #23262b; border-color: var(--primary-color); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.list-rank { width: 40px; height: 100%; display: flex; justify-content: center; align-items: center; background: #233240; font-size: 1.1rem; font-weight: 800; color: #66c0f4; transition: 0.2s; border-radius: 8px; margin-right: 15px; }
.list-item:hover .list-rank { background: #2a3d4f; color: #fff; }
.list-img { width: 50px; height: 50px; border-radius: 8px; object-fit: cover; margin-right: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.list-info { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.list-title { color: #fff; font-size: 0.95rem; font-weight: 600; line-height: 1.2; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.list-edition { color: #888; font-size: 0.75rem; font-weight: 400; }
.list-price-box { text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; padding-right: 5px; }
.list-old-price { color: #777; text-decoration: line-through; font-size: 0.7rem; line-height: 1; margin-bottom: 2px; }
.list-current-price { color: #fff; font-weight: 700; font-size: 1.05rem; line-height: 1; }
.list-discount { background: rgba(255, 71, 87, 0.1); color: #ff4757; border: 1px solid rgba(255, 71, 87, 0.3); padding: 3px 6px; border-radius: 6px; font-weight: 800; font-size: 0.85rem; margin-left: 10px; }

/* =========================================
   🌟 โซนรีวิว (Trustpilot Style)
========================================= */
.reviews-section { background-color: #1a1c20; padding: 60px 20px; border-top: 1px solid #2b2e33; border-bottom: 1px solid #2b2e33; }
.reviews-header { text-align: center; margin-bottom: 30px; }
.reviews-header h2 { color: #fff; font-size: 1.8rem; margin-bottom: 10px; }
.reviews-header p { color: #aaa; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 10px; }
.tp-star { color: #00b67a; font-size: 1.2rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1600px; margin: 0 auto; }
.review-card { background: #23262b; padding: 25px; border-radius: 8px; border: 1px solid #333; transition: 0.3s; }
.review-card:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.3); border-color: #00b67a; }
.review-stars { color: #00b67a; font-size: 1rem; margin-bottom: 12px; display: flex; gap: 2px; }
.review-title { color: #fff; font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; }
.review-text { color: #aaa; font-size: 0.9rem; line-height: 1.6; margin-bottom: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.review-author { display: flex; justify-content: space-between; color: #777; font-size: 0.85rem; font-weight: 600; border-top: 1px solid #333; padding-top: 15px; }

/* =========================================
   🌟 โซนทำไมต้องซื้อกับเรา 
========================================= */
.features-banner { background: linear-gradient(135deg, var(--primary-color), #055ba6); padding: 50px 20px; color: #fff; border: none; }
.features-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 40px; text-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.features-inner { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
.feature-box { display: flex; align-items: center; gap: 20px; }
.feature-icon { font-size: 3.5rem; color: rgba(255,255,255,0.9); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2)); transition: 0.3s; }
.feature-box:hover .feature-icon { transform: scale(1.1) rotate(5deg); color: var(--gold-main); }
.feature-text h4 { font-size: 1.2rem; font-weight: 700; margin-bottom: 5px; color: #fff; }
.feature-text p { font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.5; }

/* =========================================
   🌟 Footer & โลโก้ธนาคาร 
========================================= */
.main-footer { background-color: #0f1013; padding: 70px 20px 30px; color: #ccc; font-family: 'Kanit'; }
.footer-inner { max-width: 1600px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 50px; border-bottom: 1px solid #222; padding-bottom: 40px; margin-bottom: 30px; }
.footer-col h3 { color: #fff; font-size: 1.2rem; font-weight: 600; margin-bottom: 20px; position: relative; padding-bottom: 10px; }
.footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: var(--primary-color); border-radius: 2px; }
.footer-logo { font-size: 1.8rem; font-weight: 700; color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.footer-logo span { color: var(--primary-color); }
.footer-vision { font-size: 0.95rem; line-height: 1.7; color: #999; margin-bottom: 20px; }
.footer-stats { display: flex; gap: 15px; font-weight: 600; font-size: 0.9rem; color: #fff; }
.footer-stats span { color: var(--primary-color); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #999; text-decoration: none; transition: 0.2s; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.footer-links a:hover { color: var(--primary-color); transform: translateX(5px); }
.footer-links a i { font-size: 0.7rem; }
.payment-methods { display: flex; flex-direction: column; gap: 15px; }
.pay-method { display: flex; align-items: center; gap: 15px; background: #1c1e22; padding: 10px 15px; border-radius: 8px; border: 1px solid #2b2e33; }
.pay-method i { font-size: 1.8rem; }
.pay-method i.fa-qrcode { color: #00a8ff; } 
.pay-method i.fa-wallet { color: #ff9f43; } 
.pay-method i.fa-university { color: #10ac84; } 
.pay-details h4 { color: #fff; font-size: 0.95rem; font-weight: 600; }
.pay-details p { color: #777; font-size: 0.8rem; }
.bank-logos-container { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px; align-items: center; }
.bank-logo { width: 55px; height: 35px; background-color: #ffffff; border-radius: 6px; object-fit: contain; padding: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); border: 1px solid transparent; transition: 0.3s ease; }
.bank-logo:hover { transform: translateY(-3px); box-shadow: 0 5px 12px rgba(9, 132, 227, 0.4); border-color: var(--primary-color); }
.social-links { display: flex; gap: 15px; margin-top: 10px; }
.social-btn { width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; color: #fff; text-decoration: none; transition: 0.3s; background: #23262b; }
.social-btn.fb:hover { background: #1877f2; transform: translateY(-5px); }
.social-btn.line:hover { background: #00c300; transform: translateY(-5px); }
.social-btn.yt:hover { background: #ff0000; transform: translateY(-5px); }
.footer-bottom { max-width: 1600px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #666; }
.footer-bottom-links a { color: #666; text-decoration: none; margin-left: 15px; transition: 0.2s; }
.footer-bottom-links a:hover { color: #fff; }

/* =========================================
   🌟 ระบบ Popup Login/Register
========================================= */
.auth-modal { visibility: hidden; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 2000; display: flex; justify-content: center; align-items: center; backdrop-filter: blur(5px); transition: all 0.3s ease; }
.auth-modal.show { visibility: visible; opacity: 1; }
.auth-modal-content { background: #1c1e22; width: 100%; max-width: 420px; border-radius: 12px; position: relative; overflow: hidden; box-shadow: 0 15px 40px rgba(0,0,0,0.4); transform: scale(0.9) translateY(20px); opacity: 0; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.auth-modal.show .auth-modal-content { transform: scale(1) translateY(0); opacity: 1; }
.close-modal { position: absolute; top: 15px; right: 20px; color: #888; font-size: 1.5rem; cursor: pointer; transition: 0.2s; z-index: 10; }
.close-modal:hover { color: #fff; transform: scale(1.1); }
.auth-tabs { display: flex; border-bottom: 1px solid #333; }
.auth-tab { flex: 1; background: #23262b; color: #888; border: none; padding: 18px; font-size: 1.1rem; cursor: pointer; font-family: 'Kanit'; font-weight: 500; transition: 0.3s; }
.auth-tab.active { background: #1c1e22; color: #fff; border-bottom: 3px solid var(--primary-color); }
.auth-form-container { display: none; padding: 30px 40px; height: 520px; overflow-y: auto; animation: fadeInForm 0.3s ease; }
.auth-form-container.active { display: block; }
@keyframes fadeInForm { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.auth-form-container::-webkit-scrollbar { width: 5px; }
.auth-form-container::-webkit-scrollbar-thumb { background: #333; border-radius: 5px; }
.auth-form-group { margin-bottom: 18px; text-align: left; }
.auth-form-group label { display: block; margin-bottom: 8px; color: #ccc; font-size: 0.9rem; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper i { position: absolute; left: 15px; color: #888; font-size: 1.1rem; transition: 0.2s; }
.auth-form-group input { width: 100%; padding: 12px 15px 12px 45px; border: 1px solid #333; background: #2b2e33; color: #fff; border-radius: 6px; font-family: 'Kanit'; outline: none; transition: 0.2s; }
.auth-form-group input:focus { border-color: var(--primary-color); background: #33373d; box-shadow: 0 0 0 3px rgba(9, 132, 227, 0.1); }
.input-wrapper:focus-within i { color: var(--primary-color); }
.auth-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-size: 0.85rem; }
.auth-options label { display: flex; align-items: center; gap: 8px; color: #aaa; cursor: pointer; }
.auth-options a { color: var(--primary-color); text-decoration: none; font-weight: 500; transition: 0.2s; }
.auth-options a:hover { text-decoration: underline; color: #fff; }
.btn-auth-submit { width: 100%; background: var(--primary-color); color: #fff; border: none; padding: 14px; border-radius: 6px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: 0.2s; font-family: 'Kanit'; }
.btn-auth-submit:hover { background: var(--primary-hover); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(9, 132, 227, 0.3); }
.auth-divider { text-align: center; margin: 20px 0; color: #666; font-size: 0.85rem; position: relative; }
.auth-divider::before, .auth-divider::after { content: ''; position: absolute; top: 50%; width: 40%; height: 1px; background: #333; }
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.social-login-box { display: flex; gap: 10px; }
.btn-social { flex: 1; padding: 12px; border-radius: 6px; border: none; font-family: 'Kanit'; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; transition: 0.2s; font-size: 0.95rem; }
.btn-social.facebook { background: #1877f2; }
.btn-social.facebook:hover { background: #155bb5; }
.btn-social.google { background: #ea4335; }
.btn-social.google:hover { background: #c53023; }

/* =========================================
   🌟 ระบบ Mega Menu
========================================= */
.mega-menu-overlay { position: fixed; top: 130px; left: 0; width: 100%; height: calc(100vh - 130px); background: rgba(0,0,0,0.5); z-index: 1400; opacity: 0; visibility: hidden; transition: 0.3s ease; }
.mega-menu-overlay.show { opacity: 1; visibility: visible; }
.mega-menu-container { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1500; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.mega-menu-container.show { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-menu-inner { max-width: 1600px; margin: 0 auto; display: flex; min-height: 450px; max-height: 600px; background: #ffffff; box-shadow: 0 15px 30px rgba(0,0,0,0.15); border-top: 3px solid var(--primary-color); border-radius: 0 0 8px 8px; overflow: hidden; }
.mega-col-1 { width: 260px; background: #f8f9fa; border-right: 1px solid #eaeaea; padding: 0; overflow-y: auto; }
.mega-l1-btn { width: 100%; text-align: left; background: none; border: none; padding: 15px 25px; font-size: 1.05rem; font-weight: 600; color: #2d3436; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: 'Kanit'; transition: 0.2s; border-bottom: 1px solid #eaeaea; }
.mega-l1-btn:last-child { border-bottom: none; }
.mega-l1-btn i.icon { width: 25px; color: #888; font-size: 1.1rem; }
.mega-l1-btn:hover, .mega-l1-btn.active { background: #fff; color: var(--primary-color); box-shadow: -3px 0 0 var(--primary-color) inset; }
.mega-l1-btn:hover i.icon, .mega-l1-btn.active i.icon { color: var(--primary-color); }
.mega-col-2 { width: 240px; background: #ffffff; border-right: 1px solid #eaeaea; padding: 15px 0; overflow-y: auto; }
.mega-l2-btn { width: 100%; text-align: left; background: none; border: none; padding: 12px 25px; font-size: 1rem; font-weight: 500; color: #555; cursor: pointer; display: flex; align-items: center; justify-content: space-between; font-family: 'Kanit'; transition: 0.2s; border-bottom: 1px solid #f1f2f6; }
.mega-l2-btn:last-child { border-bottom: none; }
.mega-l2-btn:hover, .mega-l2-btn.active { color: var(--primary-color); font-weight: 600; background: #fdfdfd; }
.mega-l2-btn i.fa-chevron-right { font-size: 0.7rem; color: #ccc; }
.mega-col-3 { flex: 1; background: #ffffff; padding: 25px 40px; overflow-y: auto; }
.mega-col-3 h3 { font-size: 1.4rem; color: #2d3436; margin-bottom: 20px; border-bottom: 2px solid #f1f2f6; padding-bottom: 10px; }
.mega-l3-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }
.mega-l3-card { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border: 1px solid #eee; border-radius: 8px; text-decoration: none; color: #333; transition: 0.2s; background: #fff; }
.mega-l3-card:hover { border-color: var(--primary-color); box-shadow: 0 4px 10px rgba(9, 132, 227, 0.1); transform: translateY(-2px); color: var(--primary-color); }
.mega-l3-card i { font-size: 1.5rem; color: #555; width: 30px; text-align: center; }
.mega-l3-card:hover i { color: var(--primary-color); }
.mega-l3-card span { font-weight: 600; font-size: 0.95rem; }
.mega-col-1::-webkit-scrollbar, .mega-col-2::-webkit-scrollbar, .mega-col-3::-webkit-scrollbar { width: 6px; }
.mega-col-1::-webkit-scrollbar-thumb, .mega-col-2::-webkit-scrollbar-thumb, .mega-col-3::-webkit-scrollbar-thumb { background: #ddd; border-radius: 6px; }

/* =========================================
   🌟 ระบบ Live Chat Pop-up
========================================= */
.chat-widget-btn { position: fixed; bottom: 30px; right: 30px; width: 60px; height: 60px; background: var(--primary-color); border-radius: 50%; color: #fff; font-size: 1.8rem; display: flex; justify-content: center; align-items: center; cursor: pointer; box-shadow: 0 5px 15px rgba(9, 132, 227, 0.4); z-index: 9999; transition: 0.3s; border: none; }
.chat-widget-btn:hover { transform: scale(1.1); background: var(--primary-hover); }
.chat-box { position: fixed; bottom: 100px; right: 30px; width: 340px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); z-index: 9999; display: flex; flex-direction: column; overflow: hidden; transform: translateY(20px); opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.chat-box.show { transform: translateY(0); opacity: 1; visibility: visible; }
.chat-header { background: var(--primary-color); color: #fff; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; font-family: 'Kanit'; }
.chat-header-title { font-weight: 600; font-size: 1.1rem; }
.chat-status { font-size: 0.8rem; display: flex; align-items: center; gap: 6px; font-weight: 400; margin-top: 2px;}
.status-dot { width: 8px; height: 8px; background: #00e676; border-radius: 50%; box-shadow: 0 0 5px #00e676; }
.status-dot.offline { background: #ff4757; box-shadow: 0 0 5px #ff4757; }
.close-chat { cursor: pointer; font-size: 1.2rem; transition: 0.2s; }
.close-chat:hover { color: #ff4757; }
#onlineChatUI { display: flex; flex-direction: column; }
.chat-body { padding: 15px; height: 280px; overflow-y: auto; background: #f8f9fa; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 85%; padding: 10px 15px; border-radius: 15px; font-size: 0.9rem; font-family: 'Kanit'; line-height: 1.4; }
.msg-admin { background: #e1f0ff; align-self: flex-start; border-bottom-left-radius: 2px; color: #333; }
.msg-user { background: var(--primary-color); color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }
.chat-footer { padding: 15px; border-top: 1px solid #eee; background: #fff; }
.chat-input-group { display: flex; gap: 10px; }
.chat-input-group input { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 20px; outline: none; font-family: 'Kanit'; transition: 0.2s; }
.chat-input-group input:focus { border-color: var(--primary-color); }
.chat-input-group button { background: var(--primary-color); color: #fff; border: none; width: 42px; height: 40px; border-radius: 50%; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; }
.chat-input-group button:hover { background: var(--primary-hover); transform: scale(1.05); }

/* =========================================
   🌟 ปุ่ม Scroll to Top 
========================================= */
.scroll-top-btn { position: fixed; bottom: 100px; right: 35px; width: 45px; height: 45px; background: #333; color: #fff; border: none; border-radius: 50%; font-size: 1.2rem; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.scroll-top-btn.show { opacity: 1; visibility: visible; }
.scroll-top-btn:hover { background: var(--primary-color); transform: translateY(-5px); }

/* =========================================
   🌟 สำรวจโลก (Explore Page - Modern Blue/Slate Theme)
========================================= */

.explore-page-container {
    background-color: var(--bg-color); 
    padding-bottom: 80px;
    font-family: 'Kanit', sans-serif;
}

/* 🎯 โซนที่ 1: แบนเนอร์ภาพใหญ่สุด */
.ex-hero-banner {
    width: 100%;
    height: 65vh; 
    min-height: 500px;
    position: relative;
    background: #000;
    z-index: 50; 
}

.ex-hero-img-wrap {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    z-index: 1;
}

.ex-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.9;
    transition: transform 10s ease;
}

.ex-hero-banner:hover .ex-hero-img {
    transform: scale(1.05); 
}

.hotspot { 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    transform: translate(-50%, -50%); 
    cursor: pointer; 
    z-index: 150; 
}

/* 🌟 อัปเดต: เปลี่ยนปุ่มใน Hotspot ให้เป็นสีน้ำเงิน */
.hs-btn {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border: none !important;
    transition: 0.3s;
}
.hs-btn:hover {
    background: #2563eb !important;
}

/* 🎯 โซนที่ 2: แถบคั่น Discover Keypark */
.ex-discover-bar {
    background-color: #111111; 
    text-align: center;
    padding: 20px 0;
    border-bottom: 4px solid #000;
}

.ex-discover-bar h2 {
    color: #ffffff;
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.8);
    font-family: 'Kanit', sans-serif; 
}

/* 🎯 โซนที่ 3: ภาพ 3 ภาพแนวตั้ง */
.ex-vertical-section {
    background: linear-gradient(135deg, #1c1e22, #101215); 
    padding: 80px 20px;
    color: #fff;
    border-bottom: 1px solid #333;
}

.ex-vertical-inner {
    display: flex;
    align-items: center;
    gap: 50px;
}

.ex-vertical-content {
    flex: 1;
}

.ex-vertical-content h2 {
    font-size: 3rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px #000;
}

.ex-vertical-content p {
    font-size: 1.1rem;
    color: #ccc;
    margin-bottom: 30px;
    line-height: 1.6;
    max-width: 90%;
}

/* 🌟 อัปเดต: เปลี่ยนปุ่มสีเขียวเป็น "สีน้ำเงิน" สไตล์ Modern */
.btn-ex-green {
    background: #3b82f6; /* สีน้ำเงินสว่าง */
    color: #fff;
    text-decoration: none;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.2s;
    text-transform: uppercase;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); 
    border-radius: 6px; /* เพิ่มขอบมนนิดๆ ให้ดูทันสมัย */
}

.btn-ex-green:hover {
    background: #2563eb; /* สีน้ำเงินเข้มขึ้นเมื่อชี้ */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

/* คอนเทนเนอร์ 3 รูปแนวตั้ง */
.ex-vertical-cards {
    display: flex;
    gap: 20px;
}

.ex-v-card {
    width: 250px;
    aspect-ratio: 2 / 3; 
    border-radius: 8px; /* เพิ่มขอบมน */
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 3px solid transparent;
}

/* 🌟 อัปเดต: กรอบรูปตอนเอาเมาส์ชี้ เปลี่ยนเป็นสีเทาสว่างอมฟ้า */
.ex-v-card:hover {
    transform: translateY(-20px) scale(1.05); 
    border-color: #cbd5e1; 
    box-shadow: 0 10px 25px rgba(203, 213, 225, 0.2);
    z-index: 5;
}

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

/* 🎯 โซนที่ 4: ตารางแรงบันดาลใจ (Bento Grid) */
.ex-bento-section {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 25px;
}

.ex-card {
    background: #ffffff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: 0.3s ease;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    border-radius: 12px; /* เพิ่มขอบมน */
}

/* 🌟 อัปเดต: กรอบตอนเอาเมาส์ชี้ เปลี่ยนเป็นสีเทาสว่าง */
.ex-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(203, 213, 225, 0.15);
    border-color: #cbd5e1;
}

.ex-card-img {
    width: 100%;
    position: relative;
    background: #000;
    overflow: hidden;
}

.ex-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.ex-card:hover .ex-card-img img {
    opacity: 0.8;
    transform: scale(1.05);
}

.ex-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #3b82f6; /* 🌟 อัปเดต: ป้ายสัญลักษณ์สีน้ำเงิน */
    color: #fff;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 2;
    border-radius: 4px;
}

.ex-card-info {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ex-card-info h3 {
    color: #2d3436;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.ex-card-info p {
    color: #636e72;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1;
}

/* 🌟 อัปเดต: ข้อความ "ดูเพิ่มเติม" เป็นสีเทา */
.ex-read-more {
    color: #94a3b8; 
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

/* 🌟 อัปเดต: ข้อความตอนเอาเมาส์ชี้สว่างขึ้น */
.ex-card:hover .ex-read-more {
    color: #cbd5e1;
    gap: 12px; 
}

.ex-large-card { height: 100%; }
.ex-large-card .ex-card-img { height: 350px; }
.ex-grid-right { display: flex; flex-direction: column; gap: 25px; }
.ex-small-card .ex-card-img { height: 200px; }
.ex-grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.ex-grid-split .ex-small-card .ex-card-img { height: 150px; }
.ex-grid-split .ex-card-info h3 { font-size: 1.1rem; margin-bottom: 10px; }
.ex-grid-split .ex-card-info p { display: none; }

/* Responsive Mobile (เฉพาะหน้า Explore) */
@media (max-width: 1200px) {
    .ex-v-card { width: 200px; }
}
@media (max-width: 992px) {
    .ex-discover-bar h2 { font-size: 2rem; }
    .ex-vertical-inner { flex-direction: column; text-align: center; }
    .ex-vertical-content p { max-width: 100%; margin: 0 auto 30px; }
    .ex-vertical-cards { flex-wrap: wrap; justify-content: center; }
    .ex-bento-section { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ex-grid-split { grid-template-columns: 1fr; }
    .ex-vertical-content h2 { font-size: 2.2rem; }
}

/* =========================================
   🌟 ระบบ Hotspot (จุดกดสั่งซื้อบนรูปภาพ)
========================================= */
.hotspot { 
    position: absolute; 
    width: 30px; 
    height: 30px; 
    transform: translate(-50%, -50%); 
    cursor: pointer; 
    z-index: 15; 
}

.hotspot-dot { 
    width: 16px; 
    height: 16px; 
    background: #fff; 
    border-radius: 50%; /* วงกลมจุดกึ่งกลาง (ปล่อยกลมไว้จะสวยกว่าครับ) */
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    box-shadow: 0 0 10px rgba(0,0,0,0.5); 
}

.hotspot-pulse { 
    width: 30px; 
    height: 30px; 
    border: 2px solid #fff; 
    border-radius: 50%; /* คลื่นกระเพื่อมวงกลม */
    position: absolute; 
    top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    animation: pulseHotspot 1.5s infinite; 
}

@keyframes pulseHotspot { 
    0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; border-color: var(--primary-color); } 
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; border-width: 0; } 
}

/* 🌟 Pop-up ตะกร้าสินค้า: ดึงเปิดลงด้านล่าง ไม่โดน Navbar บัง */
.hotspot-tooltip { 
    position: absolute; 
    top: 40px; /* ย้ายจาก bottom มาเป็น top เพื่อให้เด้งลงล่าง */
    left: 50%; 
    transform: translateX(-50%) translateY(-10px); 
    width: 240px; 
    background: #16181b; 
    border: 1px solid #333; 
    border-radius: 0; /* ตัดขอบมนทิ้ง เป็นสี่เหลี่ยม */
    padding: 10px; 
    box-shadow: 0 15px 30px rgba(0,0,0,0.6); 
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    pointer-events: none; 
    z-index: 2500; /* ดันให้ลอยทับทุกอย่างบนเว็บ */
}

.hotspot:hover .hotspot-tooltip { 
    opacity: 1; 
    visibility: visible; 
    transform: translateX(-50%) translateY(0); 
    pointer-events: auto; 
}

/* 🌟 สามเหลี่ยมชี้เป้า: ย้ายไปชี้ขึ้นข้างบนแทน */
.hotspot-tooltip::after { 
    content: ''; 
    position: absolute; 
    top: -6px; /* ดึงขึ้นไปอยู่ขอบบนของ Pop-up */
    left: calc(50% - 6px); 
    width: 12px; 
    height: 12px; 
    background: #16181b; 
    border-top: 1px solid #333;  /* ตีเส้นขอบบน */
    border-left: 1px solid #333; /* ตีเส้นขอบซ้าย */
    transform: rotate(45deg); 
}

.hs-img { 
    width: 100%; 
    height: 110px; 
    object-fit: cover; 
    border-radius: 0; /* ตัดขอบมนทิ้ง */
    margin-bottom: 10px; 
    background: #000; 
}

.hs-title { 
    color: #fff; 
    font-size: 1rem; 
    font-weight: 600; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

.hs-price { 
    color: var(--gold-main); 
    font-weight: 700; 
    font-size: 1.15rem; 
    margin: 4px 0 12px; 
}

.hs-btn { 
    display: block; 
    width: 100%; 
    background: var(--primary-color); 
    color: #fff; 
    border: none; 
    padding: 10px; 
    border-radius: 0; /* ตัดขอบมนทิ้ง */
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.2s; 
    font-family: 'Kanit', sans-serif;
}

.hs-btn:hover { 
    background: var(--primary-hover); 
    transform: translateY(-2px); 
}

/* =========================================
   🌟 ระบบตะกร้าสินค้า (In-Cart Loading แบบ 3-Dash Style)
========================================= */
.added-success { background-color: #00b67a !important; color: #fff !important; pointer-events: none; box-shadow: 0 0 15px rgba(0, 182, 122, 0.4) !important; }

.cart-loader-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(28, 30, 34, 0.85); backdrop-filter: blur(5px); z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.cart-loader-overlay.show { opacity: 1; visibility: visible; }

/* ควบคุมขนาดและหมุนวงกลมภาพรวม */
.cart-spinner-svg {
    width: 50px;
    height: 50px;
    animation: spin3Dash 1.2s linear infinite;
    transform-origin: center center;
}

/* ควบคุมเส้นให้ขาดเป็น 3 ท่อนแบบเป๊ะๆ */
.spinner-path {
    fill: none;
    stroke: var(--primary-color); /* ใช้สีฟ้าเดิมของเว็บ */
    stroke-width: 4;
    stroke-linecap: round; /* ทำให้ขอบเส้นมนๆ สวยๆ */
    /* เคล็ดลับ: เส้นรอบวง = 125.6 แบ่ง 3 ส่วน -> วาดเส้นยาว 25 เว้นช่องว่าง 16.8 */
    stroke-dasharray: 25 16.8; 
}

/* แอนิเมชันสั่งให้หมุนรอบตัวเอง */
@keyframes spin3Dash {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =========================================
   🌟 ศูนย์ช่วยเหลือ (Help Page / FAQ - Ref Style)
========================================= */

.help-page-container {
    background-color: #f9fafb; /* พื้นหลังสีเทาสว่าง */
    /* 🌟 ลูกเล่นลายตาราง Grid จางๆ แบบในภาพเรฟเฟอเรนซ์ */
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center top;
    padding: 80px 20px 120px;
    font-family: 'Kanit', sans-serif;
    min-height: 80vh;
}

/* โซนข้อความด้านบน */
.help-hero {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px;
}

.help-star-icon {
    font-size: 2rem;
    color: #111827; 
    margin-bottom: 20px;
}

.help-hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.help-hero p {
    font-size: 1.1rem;
    color: #4b5563;
    line-height: 1.6;
}

.help-hero a {
    color: #111827;
    text-decoration: underline;
    font-weight: 600;
    transition: 0.2s;
}

.help-hero a:hover {
    color: var(--primary-color);
}

/* โซนตารางกล่องคำถาม */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.faq-item:hover {
    border-color: #d1d5db;
}

/* ปุ่มคำถาม */
.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    transition: color 0.2s;
}

.faq-q-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.faq-icon {
    font-size: 1.2rem;
    color: #6b7280;
    width: 24px;
    text-align: center;
}

.faq-chevron {
    color: #9ca3af;
    transition: transform 0.3s ease;
}

/* กล่องคำตอบ (พับซ่อนไว้ก่อน) */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* แอนิเมชันเปิดสมูทๆ */
    background: #ffffff;
}

.faq-answer p {
    padding: 0 24px 24px 64px; /* เยื้องข้อความให้ตรงกับคำถาม */
    margin: 0;
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
}

/* สถานะตอนเปิดกล่อง (Active) */
.faq-item.active {
    border-color: #d1d5db;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.faq-item.active .faq-chevron {
    transform: rotate(180deg); /* สั่งให้ลูกศรหมุนขึ้น */
}

/* Responsive มือถือ */
@media (max-width: 768px) {
    .help-hero h1 { font-size: 2.2rem; }
    .faq-answer p { padding: 0 20px 20px 20px; }
    .faq-question { padding: 20px; }
    .help-page-container { padding: 50px 15px 80px; }
}

/* =========================================
   🌟 เพิ่มเติม: สไตล์สำหรับรายการบทความย่อย (Help Article List)
========================================= */
.faq-answer {
    padding: 0; /* ลบ padding เดิมออก เพื่อให้ list ชิดขอบ */
}

.help-article-list {
    list-style: none;
    margin: 0;
    padding: 0 24px 20px 60px; /* เยื้องให้ตรงกับไอคอนหมวดหมู่หลัก */
}

.help-article-list li {
    border-bottom: 1px solid #f3f4f6;
}

.help-article-list li:last-child {
    border-bottom: none; /* เส้นบรรทัดสุดท้ายไม่ต้องมี */
}

.help-article-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    color: #4b5563;
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.help-article-link span {
    display: flex;
    align-items: center;
    gap: 12px;
}

.help-article-link span i {
    color: #9ca3af; /* สีไอคอนของบทความย่อย */
    font-size: 1.1rem;
}

.help-article-link .fa-arrow-right {
    font-size: 0.85rem;
    color: #d1d5db;
    transition: transform 0.2s ease, color 0.2s;
    opacity: 0;
    transform: translateX(-10px); /* ซ่อนลูกศรไว้และดันไปทางซ้าย */
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้บทความย่อย */
.help-article-link:hover {
    color: var(--primary-color);
    padding-left: 8px; /* ขยับข้อความไปทางขวานิดนึงให้ดูมีมิติ */
}

.help-article-link:hover span i {
    color: var(--primary-color);
}

.help-article-link:hover .fa-arrow-right {
    opacity: 1;
    color: var(--primary-color);
    transform: translateX(0); /* ให้ลูกศรเลื่อนโชว์ออกมา */
}

/* Responsive มือถือ */
@media (max-width: 768px) {
    .help-article-list { padding: 0 20px 20px 20px; }
}

/* =========================================
   🌟 หน้าบทความศูนย์ช่วยเหลือ (Help Article Detail)
========================================= */
.help-article-container {
    background-color: #f9fafb;
    /* พื้นหลังลายตาราง (Grid) ให้เข้ากับหน้า Help หลัก */
    background-image: 
        linear-gradient(to right, rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center top;
    padding: 40px 20px 80px;
    font-family: 'Kanit', sans-serif;
    min-height: 80vh;
}

.ha-top-nav {
    max-width: 800px;
    margin: 0 auto 20px auto;
}

.btn-back-help {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    text-decoration: none;
    font-weight: 600;
    transition: 0.2s;
}

.btn-back-help:hover {
    color: var(--primary-color);
    transform: translateX(-5px); /* ลูกเล่นขยับลูกศรตอนชี้ */
}

/* กล่องกระดาษอ่านบทความ */
.ha-content-box {
    max-width: 800px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 50px 60px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.ha-header {
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.ha-header h1 {
    font-size: 2.2rem;
    color: #111827;
    margin-bottom: 10px;
    font-weight: 700;
}

.ha-meta {
    color: #9ca3af;
    font-size: 0.95rem;
}

.ha-body h3 {
    font-size: 1.3rem;
    color: #111827;
    margin: 35px 0 15px 0;
}

.ha-body p {
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 15px;
    font-size: 1.05rem;
}

/* กล่องเตือน (Alert Box) */
.ha-alert-box {
    background: #eff6ff; /* พื้นหลังสีฟ้าอ่อน */
    border-left: 4px solid var(--primary-color);
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    margin: 25px 0;
}

.ha-alert-box i {
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-top: 3px;
}

.ha-alert-box strong {
    color: #1e3a8a;
}

.ha-alert-box div {
    color: #1e40af;
    line-height: 1.5;
}

/* ส่วนท้าย (Footer) ของบทความ */
.ha-footer {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #f3f4f6;
    text-align: center;
}

/* 🌟 กล่องเตรียมระบบ AI */
.ha-ai-support-box {
    background: #f8fafc;
    padding: 30px;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    transition: all 0.3s ease;
}

.ha-ai-support-box p {
    margin-bottom: 20px;
    color: #4b5563;
    font-weight: 500;
}

/* ปุ่มเรียก AI (เล่นสีไล่ระดับ Gradient ให้ดูล้ำๆ) */
.btn-ask-ai {
    background: linear-gradient(135deg, #4f46e5, #8b5cf6); /* โทนสีม่วง-ฟ้า AI */
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.05rem;
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-ask-ai:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

/* กล่องหน้าต่างแชท AI ที่จะเด้งขึ้นมาแบบ Inline */
.inline-ai-chat {
    margin-top: 25px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: left;
    animation: fadeInAiBox 0.3s ease-out forwards;
}

@keyframes fadeInAiBox {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ai-chat-header {
    background: #f9fafb;
    padding: 15px 20px;
    font-weight: 600;
    color: #111827;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e5e7eb;
}

.ai-chat-header i.fa-sparkles {
    color: #8b5cf6; /* ไอคอนประกายวิบวับ */
}

.close-ai {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 1.2rem;
    transition: 0.2s;
}

.close-ai:hover { color: #ef4444; }

.ai-chat-body {
    padding: 20px;
    min-height: 120px;
    max-height: 250px;
    overflow-y: auto;
    background: #ffffff;
}

.ai-msg {
    background: #eef2ff;
    color: #3730a3;
    padding: 12px 18px;
    border-radius: 12px 12px 12px 0; /* ทำมุมแหลมชี้ว่า AI เป็นคนพูด */
    font-size: 0.95rem;
    display: inline-block;
    max-width: 90%;
    line-height: 1.5;
}

.ai-chat-input {
    display: flex;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

.ai-chat-input input {
    flex: 1;
    padding: 15px 20px;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Kanit', sans-serif;
    color: #4b5563;
}

.ai-chat-input button {
    padding: 0 25px;
    background: transparent;
    border: none;
    border-left: 1px solid #e5e7eb;
    color: #8b5cf6;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.2s;
}

.ai-chat-input button:hover {
    color: #4f46e5;
    background: #eef2ff;
}

.ai-note {
    text-align: center;
    font-size: 0.8rem;
    color: #9ca3af;
    padding: 8px;
    background: #f3f4f6;
    border-top: 1px solid #e5e7eb;
}

/* =========================================
   🌟 สำรวจโลก: หน้าเจาะลึก (Explore Detail Page)
========================================= */
.explore-detail-container {
    background-color: var(--bg-color);
    padding-bottom: 80px;
}

/* ภาพเต็มจอ */
.ed-hero-section {
    position: relative;
    width: 100%;
    height: 80vh; /* ให้ภาพสูงๆ เต็มตา */
    min-height: 600px;
    background: #000;
}

.ed-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.95;
}

/* ปุ่มกดกลับหน้าหลัก Explore */
.btn-ed-back {
    position: absolute;
    top: 30px;
    left: 40px;
    background: rgba(22, 24, 27, 0.8);
    backdrop-filter: blur(5px);
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    z-index: 100;
    border: 1px solid rgba(255,255,255,0.1);
}

.btn-ed-back:hover {
    background: var(--primary-color);
    transform: translateX(-5px); /* ขยับลูกศรไปทางซ้ายนิดนึง */
}

/* ส่วนรายละเอียดด้านล่าง */
.ed-content-section {
    margin-top: -60px; /* ดึงเนื้อหาให้ทับภาพขอบล่างนิดนึง */
    position: relative;
    z-index: 10;
}

.ed-header-info {
    background: #fff;
    padding: 40px 50px;
    border: 1px solid #eaeaea;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    margin-bottom: 50px;
}

.ed-header-info h1 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #2d3436;
    margin-bottom: 15px;
}

.ed-header-info p {
    font-size: 1.15rem;
    color: #636e72;
    line-height: 1.6;
}

/* Shop the look Grid */
.ed-shop-the-look h2 {
    font-size: 1.8rem;
    color: #2d3436;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ed-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

/* Responsive */
@media (max-width: 768px) {
    .ed-hero-section { height: 60vh; }
    .btn-ed-back { top: 20px; left: 20px; padding: 10px 20px; }
    .ed-header-info { padding: 30px 20px; }
    .ed-header-info h1 { font-size: 2rem; }
}

/* =========================================
   🌟 หน้าแพ็ครวม (Mega Bundles - Full Update)
========================================= */

/* 🌟 Hero Section (แบนเนอร์ด้านบน) */
.bundle-hero-section {
    background-image: linear-gradient(to bottom, rgba(11, 26, 42, 0.4), rgba(11, 26, 42, 1)), 
                      url('https://images.unsplash.com/photo-1605901309584-818e25960b8f?q=80&w=2019');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
    padding: 60px 0;
    min-height: 60vh;
    border-bottom: none; 
    font-family: 'Kanit', sans-serif;
    overflow: hidden;
}

.bundle-hero-grid { display: grid; grid-template-columns: 1fr 2fr 1.5fr; gap: 40px; align-items: center; }

/* 🎴 คอลัมน์ซ้าย: 3D Flip Card (ปกแพ็ครวมใหญ่) */
.flip-card { background-color: transparent; width: 100%; aspect-ratio: 1 / 1.2; perspective: 1000px; }
.flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.8s; transform-style: preserve-3d; }
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
    position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 12px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.6);
}
.flip-card-front img { width: 100%; height: 100%; object-fit: cover; }
.flip-card-back {
    background: #0f172a; 
    color: white; 
    transform: rotateY(180deg); 
    padding: 20px; 
    text-align: left; 
    border: 3px solid #1e293b; /* 🌟 เปลี่ยนขอบเป็นสีเทาเข้มเหมือนการ์ดแพ็ครวมล่าง */
}
.flip-card-back h3 { font-size: 1.1rem; color: #fff; border-bottom: 1px solid #1e293b; padding-bottom: 10px; margin-bottom: 15px; }
.bundle-game-list { list-style: none; padding: 0; margin: 0; }
.bundle-game-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 0.85rem; }
.bundle-game-list li img { width: 40px; border-radius: 4px; }

/* 📊 คอลัมน์กลาง: ข้อมูล & ราคา (จัด Layout ใหม่ให้สมดุลหลังจากลบ EXP) */
.bundle-col-mid { 
    color: #fff; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; /* 🌟 ดันเนื้อหาให้อยู่กึ่งกลางแนวตั้งพอดี */
    gap: 20px; /* 🌟 เพิ่มระยะห่างให้หายใจได้มากขึ้น */
}

.bundle-tags-row { display: flex; gap: 8px; }
.b-tag { background: rgba(30, 58, 138, 0.8); color: #cbd5e1; padding: 4px 10px; font-size: 0.75rem; font-weight: 700; border-radius: 4px; border: 1px solid #3b82f6; }
.bundle-title {
    font-weight: 600; /* 👈 ลดความหนาลงมา (จากเดิมที่อาจจะเป็น 800 หรือ 900) ลองปรับเป็น 500 หรือ 600 ดูครับ */
    text-transform: none; /* 👈 ป้องกันไม่ให้โดนบังคับเป็นพิมพ์ใหญ่ */
    /* ... โค้ดสีหรือขนาดเดิม ปล่อยไว้เหมือนเดิมครับ ... */
}

.bundle-action-row { display: flex; align-items: center; gap: 20px; margin-top: 5px; }
.bundle-price-box { display: flex; gap: 20px; background: rgba(15, 23, 42, 0.7); padding: 10px 20px; border-radius: 8px; border: 1px solid #1e3a8a; backdrop-filter: blur(5px); }
.b-price-col { display: flex; flex-direction: column; }
.p-label { font-size: 0.7rem; color: #94a3b8; text-transform: uppercase; font-weight: 700; }
.price-old { color: #fff; text-decoration: line-through; font-size: 1.2rem; font-weight: 600; }
.price-new { color: #3b82f6; font-size: 1.8rem; font-weight: 900; } 

.bundle-arcade-btn { background: #3b82f6; color: #fff; border: none; padding: 15px 30px; font-size: 1rem; font-weight: 900; border-radius: 4px; cursor: pointer; text-transform: uppercase; transition: 0.2s; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4); font-family: 'Kanit', sans-serif;}
.bundle-arcade-btn:hover { background: #60a5fa; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6); }

/* แถวรูปเกมเล็กๆ (Thumbnails) */
.bundle-thumb-row { display: flex; gap: 12px; margin-top: 5px; }
.bundle-thumb-row img { width: 115px; height: 65px; object-fit: cover; border-radius: 6px; border: 2px solid transparent; transition: all 0.3s ease; cursor: pointer; opacity: 0.6; }
.bundle-thumb-row img:hover { opacity: 0.9; transform: translateY(-3px); }
.bundle-thumb-row img.active { 
    opacity: 1; 
    border-color: #3d4047; /* 🌟 เปลี่ยนขอบเป็นสีเทา */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* เปลี่ยนแสงเงาให้กลืนไปกับสีดำ/เทา */
    transform: translateY(-3px); 
}


/* 🌟 คอลัมน์ขวา: แอนิเมชันไพ่สไลด์แบบ Cover Flow */
.bundle-col-right {
    position: relative; height: 350px; display: flex; justify-content: center; align-items: center;
}

.bundle-cover-flow {
    position: relative; width: 220px; height: 310px;
}

.flow-card {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 12px; overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    border: 2px solid transparent;
}

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

/* ตำแหน่งไพ่ซ้าย กลาง ขวา */
.flow-card.center {
    z-index: 3; 
    transform: translateX(0) scale(1.05);
    border-color: #3d4047; /* 🌟 เปลี่ยนขอบเป็นสีเทา */
    opacity: 1; 
    filter: brightness(1);
}

.flow-card.left {
    z-index: 2; transform: translateX(-80px) scale(0.9) rotate(-8deg);
    opacity: 0.6; filter: brightness(0.5);
}

.flow-card.right {
    z-index: 1; transform: translateX(80px) scale(0.9) rotate(8deg);
    opacity: 0.6; filter: brightness(0.5);
}

.flow-card.left:hover, .flow-card.right:hover { opacity: 0.8; filter: brightness(0.8); }


/* =========================================
   🌟 โซนรายการแพ็ครวม (Compact UI + Modal Trigger)
========================================= */
.bundle-grid-section { padding: 60px 20px 40px; }
.section-heading { font-size: 1.8rem; font-weight: 800; margin-bottom: 30px; color: #ffffff; text-transform: uppercase; display: flex; align-items: center; gap: 15px; }

.gmg-bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; }

.gmg-card-wrapper {
    background: #101825; 
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gmg-card-wrapper:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.5); }

/* โซนภาพ */
.gmg-card-flip { width: 100%; height: 200px; perspective: 1000px; cursor: pointer; position: relative;}

.gmg-flip-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.8s ease; 
    transform-style: preserve-3d;
    border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* หมุนเมื่อเอาเมาส์ชี้ */
.gmg-card-wrapper:hover .gmg-flip-inner { 
    transform: rotateY(180deg); 
}

.gmg-front, .gmg-back {
    position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 8px; overflow: hidden;
}
.gmg-front { background: #1a1a1a; }
.gmg-front img { width: 100%; height: 100%; object-fit: cover; }

/* แสงสะท้อน */
.gmg-front::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); transition: all 0.6s ease; z-index: 10; pointer-events: none;
}
.gmg-card-wrapper:hover .gmg-front::after { left: 200%; } 

.gmg-discount { position: absolute; bottom: 10px; right: 10px; background: #e60000; color: #fff; font-weight: 900; font-size: 1.1rem; padding: 5px 10px; border-radius: 4px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); z-index: 5; }

/* 🌟 เลเยอร์ "คลิกเพื่อดูรายละเอียด" บนหน้าปก */
.click-to-view {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(11, 26, 42, 0.8);
    color: #3b82f6; font-size: 1.1rem; font-weight: 700;
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
    opacity: 0; transition: all 0.3s ease; z-index: 15;
}

/* โชว์เลเยอร์ตอนชี้เมาส์ */
.gmg-card-flip:hover .click-to-view { opacity: 1; backdrop-filter: blur(3px); }

/* ด้านหลัง (เผื่อไว้ซ่อนรูปเกม) */
.gmg-back { transform: rotateY(180deg); background: #111; border: 2px solid #333; display: flex; flex-direction: column; padding: 10px; }
.gmg-back-title { color: #fff; text-align: center; margin: 5px 0 10px 0; font-size: 0.85rem; letter-spacing: 1px; }
.gmg-games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1; overflow: hidden; }
.gmg-games-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; border: 1px solid #222; }

/* โซนข้อมูลคงที่ */
.gmg-card-static { display: flex; flex-direction: column; }
.gmg-tags { display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; }
.gmg-tags span { background: #1a2230; color: #a0aec0; font-size: 0.65rem; padding: 3px 8px; border-radius: 4px; font-weight: 700; border: 1px solid #2d3748; }

.gmg-card-static h4 { text-align: center; color: #fff; font-size: 1.1rem; margin-bottom: 8px; font-weight: 700; }

.gmg-price-row { display: flex; justify-content: center; gap: 15px; text-align: center; margin-bottom: 12px; }
.price-col { display: flex; flex-direction: column; align-items: center; }
.price-col .p-label { font-size: 0.65rem; color: #888; font-weight: 700; margin-bottom: 2px;}
.price-col .old-price { font-size: 1rem; color: #fff; font-weight: 700; }
.price-col .new-price { font-size: 1.1rem; color: #00e640; font-weight: 700; }
.price-divider { width: 1px; background: #2d3748; height: 25px; margin: auto 0; }

.gmg-buy-btn-gray {
    display: block; width: 100%; text-align: center; background: #3d4047; color: #fff; text-decoration: none;
    padding: 10px 0; font-weight: 600; font-size: 0.95rem; border-radius: 4px; transition: 0.2s; font-family: 'Kanit', sans-serif;
    margin-top: auto; 
}
.gmg-buy-btn-gray:hover { background: #55585f; }


/* =========================================
   🌟 Pop-up Modal สไตล์ GMG
========================================= */
.bundle-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: rgba(5, 10, 20, 0.85);
    display: none; justify-content: center; align-items: center;
    z-index: 9999; backdrop-filter: blur(8px);
    opacity: 0; transition: opacity 0.3s ease;
}

.bundle-modal-overlay.active { opacity: 1; }

.bundle-modal-content {
    background: #111827;
    width: 90%; max-width: 600px;
    border-radius: 12px; border: 2px solid #1e293b;
    padding: 30px; position: relative;
    transform: translateY(30px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    font-family: 'Kanit', sans-serif;
}

.bundle-modal-overlay.active .bundle-modal-content { transform: translateY(0); }

.bm-close {
    position: absolute; top: 15px; right: 15px;
    background: none; border: none; color: #64748b; font-size: 1.5rem;
    cursor: pointer; transition: 0.2s;
}
.bm-close:hover { color: #ef4444; transform: rotate(90deg); }

.bm-header h2 { color: #fff; font-size: 1.8rem; font-weight: 800; margin: 0 0 10px 0; }
.bm-header p { color: #94a3b8; font-size: 0.95rem; margin-bottom: 25px; line-height: 1.6; }

.bm-games { background: #0f172a; padding: 20px; border-radius: 8px; border: 1px solid #1e293b; margin-bottom: 25px; }
.bm-games-title { color: #3b82f6; text-align: center; margin: 0 0 15px 0; font-weight: 700; letter-spacing: 1px; font-size: 0.9rem;}
.bm-games-grid-modal { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bm-games-grid-modal img { width: 100%; border-radius: 6px; border: 1px solid #334155; object-fit: cover;}

.bm-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #1e293b; padding-top: 20px; }
.bm-prices { display: flex; gap: 20px; }
.bm-buy-btn {
    background: #00e640; color: #000; text-decoration: none; padding: 12px 30px; font-family: 'Kanit', sans-serif;
    border-radius: 6px; font-weight: 800; font-size: 1.1rem; transition: 0.2s; box-shadow: 0 4px 15px rgba(0,230,64,0.3);
}
.bm-buy-btn:hover { background: #00ff47; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,230,64,0.5); }

/* =========================================
   🌟 โซนสินค้าที่คุณอาจชื่นชอบ (Recommended)
========================================= */
.recommended-section { padding: 40px 20px 80px; }

.std-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

.std-game-card {
    background: #151f2e; 
    border-radius: 6px; overflow: hidden; display: flex; flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease; border: 1px solid #1e293b;
}
.std-game-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.5); }

.std-card-img { position: relative; width: 100%; height: 140px; }
.std-card-img img { width: 100%; height: 100%; object-fit: cover; }
.std-badge { position: absolute; top: 10px; left: 10px; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; color: #fff; z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.std-badge.streamer { background: linear-gradient(90deg, #d81b60, #8e24aa); }
.std-badge.new { background: #0078d7; width: calc(100% - 20px); text-align: center; } 

.std-card-platform { background: #0f172a; display: flex; justify-content: space-between; align-items: center; padding: 6px 15px; font-size: 0.7rem; color: #94a3b8; font-weight: 700; }
.key-type { background: #fff; color: #000; padding: 2px 6px; border-radius: 3px; font-size: 0.65rem; }

.std-card-body { padding: 15px; display: flex; flex-direction: column; gap: 15px; }
.std-price-row { display: flex; align-items: center; gap: 10px; }
.std-discount { background: #e60000; color: #fff; padding: 5px 8px; font-size: 1.1rem; font-weight: 900; border-radius: 2px; }
.std-prices { display: flex; flex-direction: column; }
.std-prices .old { color: #94a3b8; text-decoration: line-through; font-size: 0.8rem; line-height: 1; }
.std-prices .new { color: #fff; font-size: 1.2rem; font-weight: 800; line-height: 1; margin-top: 2px; }

.std-card-actions { display: flex; gap: 8px; }
.btn-cart { flex: 1; background: #334155; color: #fff; border: none; padding: 10px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.2s; font-family: 'Kanit', sans-serif; }
.btn-cart:hover { background: #475569; }
.btn-wishlist { background: #334155; color: #fff; border: none; width: 40px; border-radius: 4px; font-size: 1.1rem; cursor: pointer; transition: 0.2s; }
.btn-wishlist:hover { background: #e60000; color: #fff; }

/* =========================================
   🌟 อัปเดต: Responsive หน้าแพ็ครวม (Bundle Page) แนวตั้ง + แนวนอน
========================================= */

/* 📱 แท็บเล็ต และ มือถือแนวนอน (Landscape) */
@media (max-width: 992px) {
    .bundle-hero-grid { 
        grid-template-columns: 1fr 1.5fr !important; /* แบ่ง 2 คอลัมน์: รูปอยู่ซ้าย ข้อมูลอยู่ขวา */
        text-align: left; 
    }
    .bundle-tags-row, .bundle-action-row, .bundle-thumb-row { justify-content: flex-start; }
    .bundle-col-right { 
        grid-column: span 2; /* ดันโซน 3D Slider ลงไปอยู่ด้านล่างสุด แถวที่ 2 */
        margin-top: 30px; 
    }
    .flip-card { max-width: 320px; margin: 0 auto; }
    .bm-footer { flex-direction: row; justify-content: space-between; }
}

/* 📱 มือถือแนวตั้ง (Portrait) */
@media (max-width: 768px) {
    .bundle-hero-grid { 
        grid-template-columns: 1fr !important; /* บังคับให้เรียงแถวตอนลึก 1 คอลัมน์ */
        text-align: center; 
    }
    .bundle-tags-row, .bundle-action-row, .bundle-thumb-row { justify-content: center; }
    .bundle-col-right { grid-column: span 1; margin-top: 20px; }
    .flip-card { max-width: 260px; margin: 0 auto; }
    
    /* ปรับ Pop-up Modal ด้านล่างให้กดง่ายขึ้น */
    .bm-footer { flex-direction: column; gap: 15px; text-align: center; }
    .bm-buy-btn { width: 100%; }
    .bm-prices { justify-content: center; width: 100%; }
}

/* =========================================
   🌟 หน้ากิจกรรมแจกรางวัล (Reward Skill Tree)
========================================= */

.rw-hero-section { padding: 100px 0 20px; }
.rw-hero-text { margin-bottom: 40px; }
.rw-hero-text h1 { font-size: 3rem; font-weight: 900; margin: 15px 0 10px; text-transform: uppercase; color: #1a1c20;}
.rw-hero-text h1 span { color: #f59e0b; text-shadow: 0 0 15px rgba(245, 158, 11, 0.3); }
.rw-hero-text p { color: #555; font-size: 1.1rem; max-width: 600px; margin: 0 auto; }
.rw-badge { background: rgba(245, 158, 11, 0.1); color: #f59e0b; padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: 800; border: 1px solid #f59e0b; }

.rw-profile-container { background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border: 1px solid #e0e2e5; position: relative; margin-bottom: 20px; }
.rw-banner { width: 100%; height: 350px; background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; }
.rw-profile-bar { background: linear-gradient(90deg, #2b276b, #19163f, #2b276b); padding: 15px 40px; display: flex; justify-content: space-between; align-items: center; color: #fff; position: relative; min-height: 80px; }
.stat-group { width: 33%; display: flex; justify-content: center; }
.left-stat { justify-content: flex-start; padding-left: 5%; }
.right-stat { justify-content: flex-end; padding-right: 5%; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-label { font-size: 0.85rem; color: #a5b4fc; margin-bottom: 2px; font-weight: 600; text-transform: uppercase;}
.stat-val { font-size: 1.3rem; font-weight: 800; }
.rank-val { color: #fcd34d; }

.profile-center { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: flex; flex-direction: column; align-items: center; }
.avatar-wrapper { position: relative; width: 110px; height: 110px; border-radius: 12px; border: 4px solid #f59e0b; background: transparent; transform: translateY(-40px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }
.avatar-wrapper img { width: 100%; height: 100%; border-radius: 8px;}
.lvl-badge { position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); background: #19163f; color: #fff; border: 2px solid #f59e0b; padding: 3px 12px; border-radius: 15px; font-weight: 800; font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.5); }
.profile-name { font-size: 1.3rem; font-weight: 800; margin-top: -25px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

/* กระดานเควสต์ */
.rw-quest-section { padding: 40px 20px 20px; }
.rw-section-header { margin-bottom: 30px; }
.rw-section-header h2 { font-size: 1.8rem; font-weight: 800; color: #1a1c20; display: flex; align-items: center; gap: 10px; margin-bottom: 5px;}
.rw-section-header p { color: #555; font-size: 1rem; }
.rw-quest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.rw-quest-card { background: #ffffff; border: 1px solid #e0e2e5; border-radius: 12px; padding: 20px; display: flex; align-items: center; gap: 15px; transition: 0.3s; }
.rw-quest-card:hover { transform: translateY(-3px); border-color: #f59e0b; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.quest-icon { width: 50px; height: 50px; background: #f0f2f5; color: #777; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; }
.quest-info { flex: 1; }
.quest-info h4 { font-size: 1rem; font-weight: 700; color: #1a1c20; margin: 0 0 3px; }
.quest-info p { font-size: 0.8rem; color: #666; margin: 0; }
.quest-reward { font-weight: 800; color: #10b981; font-size: 1.1rem; }
.quest-btn { padding: 8px 15px; border-radius: 6px; font-weight: 700; font-size: 0.85rem; cursor: pointer; border: none; font-family: 'Kanit'; transition: 0.2s;}
.btn-claim { background: #10b981; color: #000; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); animation: pulseBtn 2s infinite; }
.btn-claim:hover { background: #34d399; }
.btn-action { background: #e0e2e5; color: #1a1c20; }
.btn-action:hover { background: #d1d3d8; }
.rw-quest-card.completed { opacity: 0.6; border-color: #f0f2f5; background: #f0f2f5; }
.rw-quest-card.completed .quest-icon { color: #10b981; }
.rw-quest-card.completed .quest-btn { background: #ccc; color: #777; cursor: not-allowed; }
@keyframes pulseBtn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ผังอัปสกิล */
.rw-tree-section { padding: 40px 20px 80px; }
.rw-skill-tree-container { display: flex; flex-direction: column; align-items: center; gap: 40px; background: #ffffff; border: 2px solid #e0e2e5; border-radius: 16px; padding: 60px 40px; margin-top: 30px; box-shadow: inset 0 0 50px rgba(0,0,0,0.05); overflow-x: auto; }
.rw-progress-bar-container { width: 100%; max-width: 1000px; position: relative; margin-bottom: 20px; }
.rw-progress-line { width: 100%; height: 10px; background: #e0e2e5; border-radius: 5px; overflow: hidden; position: relative; }
.rw-progress-fill { height: 100%; background: #fbbf24; border-radius: 5px; position: absolute; left: 0; top: 0; transition: width 0.5s ease; box-shadow: 0 0 10px rgba(251, 191, 36, 0.5); }
.rw-level-ticks { display: flex; width: 100%; position: absolute; top: -25px; left: 0; }
.rw-level-ticks .tick { position: absolute; transform: translateX(-50%); color: #777; font-size: 0.8rem; font-weight: 600; white-space: nowrap;}
.rw-level-ticks .tick.active { color: #1a1c20; font-weight: 700;}
.rw-level-ticks .tick::after { content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 2px; height: 10px; background: #e0e2e5;}
.rw-level-ticks .tick.active::after { background: #1a1c20;}

.rw-reward-nodes-container { display: flex; align-items: flex-start; justify-content: space-around; width: 100%; max-width: 1000px; gap: 15px; }
.rw-node { display: flex; flex-direction: column; align-items: center; text-align: center; width: calc(100% / 6 - 15px); transition: 0.3s; }
.rw-node .node-card { width: 100%; aspect-ratio: 1; border-radius: 12px; background: #f8f9fa; border: 2px solid #e0e2e5; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; padding: 15px; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.node-icon { font-size: 2.2rem; color: #777; transition: 0.3s; }
.node-details { display: flex; flex-direction: column; gap: 3px; }
.node-title { font-size: 0.85rem; font-weight: 700; color: #1a1c20; margin: 0; }
.node-exp { color: #666; font-size: 0.7rem; font-weight: 600; }

.rw-node.unlocked .node-card { border-color: #3b82f6; background: rgba(59, 130, 246, 0.05); box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); }
.rw-node.unlocked .node-icon { color: #3b82f6; }
.rw-node.ready-to-unlock { cursor: pointer; }
.rw-node.ready-to-unlock .node-card { border-color: #f59e0b; background: rgba(245, 158, 11, 0.05); animation: pulseReadyBorder 2s infinite; }
.rw-node.ready-to-unlock:hover .node-card { transform: scale(1.05); }
.rw-node.ready-to-unlock .node-icon { color: #f59e0b; }
@keyframes pulseReadyBorder { 0%, 100% { box-shadow: 0 0 10px rgba(245, 158, 11, 0.3); } 50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.6); } }

.rw-claim-all-rewards-container { width: 100%; margin-top: 20px; }
.btn-claim-all-rewards { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; border: none; padding: 12px 30px; border-radius: 8px; font-weight: 800; font-size: 1rem; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); font-family: 'Kanit', sans-serif; }
.btn-claim-all-rewards:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); transform: translateY(-3px); box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); }

/* Leaderboard */
.rw-leaderboard-section { padding: 40px 20px; background-color: #ffffff; border-radius: 12px; border: 1px solid #e0e2e5; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-top: 40px; }
.rw-leaderboard-section h2 { font-size: 1.8rem; font-weight: 800; color: #1a1c20; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }
.rw-leaderboard-table { width: 100%; border-collapse: collapse; font-family: 'Kanit'; }
.leaderboard-row { display: flex; align-items: center; padding: 15px 20px; border-bottom: 1px solid #e0e2e5; transition: 0.2s; }
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row:hover { background-color: #f8f9fa; }
.rw-leaderboard-table .leaderboard-header { background-color: #1a1c20; color: #fff; font-weight: 700; font-size: 0.9rem; text-transform: uppercase; border-bottom: none; }
.leaderboard-header div { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; }
.rank-column { width: 10%; font-weight: 800; font-size: 1.2rem; text-align: center; }
.rw-leaderboard-table .leaderboard-header .rank-column { font-size: 0.9rem; }
.player-column { width: 60%; display: flex; align-items: center; gap: 15px; }
.player-avatar-leaderboard { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.player-info-leaderboard { display: flex; flex-direction: column; gap: 2px; }
.player-name-leaderboard { font-weight: 700; color: #1a1c20; }
.player-rank-id { font-size: 0.8rem; color: #777; }
.point-column { width: 30%; font-weight: 800; color: #10b981; font-size: 1.1rem; text-align: center; }
.rw-leaderboard-table .leaderboard-header .point-column { font-size: 0.9rem; color: #fff; font-weight: 700; }
.rw-leaderboard-table .leaderboard-row:nth-child(2) { background-color: #fdf2e9; } 
.rw-leaderboard-table .leaderboard-row:nth-child(2) .rank-column { color: #f59e0b; }
.rw-leaderboard-table .leaderboard-row:nth-child(3) { background-color: #f4f6f9; } 
.rw-leaderboard-table .leaderboard-row:nth-child(3) .rank-column { color: #777; }
.rw-leaderboard-table .leaderboard-row:nth-child(4) { background-color: #fdf5ea; } 
.rw-leaderboard-table .leaderboard-row:nth-child(4) .rank-column { color: #b45309; }

/* Pop-up แจกรางวัล */
.reward-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(5, 10, 20, 0.85); display: none; justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.3s ease; }
.reward-popup-overlay.active { opacity: 1; }
.reward-popup-content { background: #ffffff; width: 90%; max-width: 500px; border-radius: 12px; border: 2px solid #e0e2e5; padding: 40px; position: relative; transform: translateY(30px); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 20px 50px rgba(0,0,0,0.15); font-family: 'Kanit', sans-serif; text-align: center; }
.reward-popup-overlay.active .reward-popup-content { transform: translateY(0); }
.popup-close-btn { position: absolute; top: 15px; right: 15px; background: none; border: none; color: #aaa; font-size: 1.5rem; cursor: pointer; transition: 0.2s; }
.popup-close-btn:hover { color: #ef4444; transform: rotate(90deg); }
.popup-header h2 { color: #f59e0b; font-size: 2.2rem; font-weight: 900; margin-bottom: 10px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3); }
.popup-header p { color: #1a1c20; font-size: 1.1rem; margin-bottom: 30px; }
.popup-reward-details { background: #f8f9fa; padding: 30px; border-radius: 8px; border: 1px solid #e0e2e5; margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 15px;}
.popup-reward-img i, .popup-reward-img img { font-size: 6rem; color: #fbbf24; animation: bounceChest 2s infinite; text-shadow: 0 10px 30px rgba(245, 158, 11, 0.6); }
.popup-reward-img img { width: 120px; height: 120px; border-radius: 8px;}
.popup-reward-name { color: #1a1c20; font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }
.btn-action-popup { background: linear-gradient(135deg, #f59e0b, #d97706); color: #000; border: none; padding: 15px 40px; font-family: 'Kanit', sans-serif; border-radius: 8px; font-weight: 900; font-size: 1.3rem; cursor: pointer; transition: 0.3s; box-shadow: 0 5px 20px rgba(245, 158, 11, 0.5); text-transform: uppercase; }
.btn-action-popup:hover { background: linear-gradient(135deg, #fbbf24, #f59e0b); transform: scale(1.05); }
@keyframes bounceChest { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

/* =========================================
   🌟 แก้ไข: จัดตำแหน่งหัวข้อและเนื้อหาให้ชิดซ้ายตรงกัน 
========================================= */
.rw-hero-text { 
    margin-top: 40px; 
    margin-bottom: 40px; 
    text-align: left; /* บังคับให้ข้อความชิดซ้าย */
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; /* บังคับให้กล่องลูกทั้งหมดชิดซ้าย */
}
.rw-hero-text h1 { font-size: 3rem; font-weight: 900; margin: 15px 0 10px; text-transform: uppercase; color: #1a1c20;}
.rw-hero-text h1 span { color: #a855f7; text-shadow: 0 0 15px rgba(168, 85, 247, 0.3); } /* ไฮไลท์สีม่วง */
.rw-hero-text p { color: #555; font-size: 1.1rem; max-width: 600px; margin: 0; } /* เอา margin: 0 auto ออกเพื่อให้ชิดซ้าย */

/* 🌟 เปลี่ยนสีป้าย Badge, อวาตาร์, และหลอดพลังเป็นสีม่วง */
.rw-badge { background: rgba(168, 85, 247, 0.1); color: #a855f7; padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; font-weight: 800; border: 1px solid #a855f7; }
.avatar-wrapper { border: 4px solid #a855f7; }
.lvl-badge { border: 2px solid #a855f7; }
.rw-progress-fill { background: #a855f7; box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }

/* 🌟 เปลี่ยนสีโหนดพร้อมปลดล็อกและ Pop-up เป็นสีม่วง */
.rw-node.ready-to-unlock .node-card { border-color: #a855f7; background: rgba(168, 85, 247, 0.05); animation: pulseReadyBorder 2s infinite; }
.rw-node.ready-to-unlock .node-icon { color: #a855f7; }
@keyframes pulseReadyBorder { 0%, 100% { box-shadow: 0 0 10px rgba(168, 85, 247, 0.3); } 50% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); } }

.popup-header h2 { color: #a855f7; text-shadow: 0 2px 10px rgba(168, 85, 247, 0.3); }
.popup-reward-img i, .popup-reward-img img { color: #a855f7; text-shadow: 0 10px 30px rgba(168, 85, 247, 0.6); }


/* =========================================
   🌟 ปุ่มกดดีไซน์ล้ำ สีม่วงเงา 3D (Glossy Purple Pill)
========================================= */
.btn-purple-glossy {
    background: linear-gradient(180deg, #a855f7 0%, #7e22ce 100%);
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: 'Kanit', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    position: relative;
    border-radius: 50px;
    
    /* เงา 3D โทนม่วง */
    box-shadow: 
        0 8px 15px rgba(126, 34, 206, 0.4), 
        inset 0 2px 3px rgba(255, 255, 255, 0.5), 
        inset 0 -4px 5px rgba(88, 28, 135, 0.7);
    transition: all 0.2s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-purple-glossy:hover {
    background: linear-gradient(180deg, #c084fc 0%, #a855f7 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 10px 20px rgba(126, 34, 206, 0.5), 
        inset 0 2px 4px rgba(255, 255, 255, 0.7), 
        inset 0 -4px 5px rgba(88, 28, 135, 0.7);
}

.btn-purple-glossy:active {
    transform: translateY(1px);
    box-shadow: 
        0 2px 8px rgba(126, 34, 206, 0.3), 
        inset 0 2px 5px rgba(88, 28, 135, 0.8), 
        inset 0 -2px 2px rgba(255, 255, 255, 0.2);
}

.btn-purple-glossy:disabled {
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
    color: #e5e7eb;
    cursor: not-allowed;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.2), 
        inset 0 -4px 5px rgba(55, 65, 81, 0.7);
    text-shadow: none;
}

/* ขนาดปุ่มสำหรับปุ่มใหญ่ (Claim my rewards) */
.btn-claim-large { padding: 15px 50px; font-size: 1.1rem; letter-spacing: 1px; }

/* ขนาดปุ่มสำหรับปุ่มในเควสต์บอร์ด */
.rw-quest-card .btn-purple-glossy { padding: 10px 25px; font-size: 0.85rem; }

/* =========================================
   🌟 หน้ารีวิวอินฟลูเอนเซอร์ (Reviews.php - TikTok Style)
========================================= */
.reviews-wrapper { max-width: 1400px; margin: 0 auto; }
.reviews-page-title { font-size: 2rem; font-weight: 800; color: #fff; font-family: 'Kanit', sans-serif; margin-bottom: 25px; display: flex; align-items: center; gap: 10px; }

/* โซนวิดีโอหลักแบบ Cinematic */
.main-player-section { background: #111827; border: 1px solid #1e293b; border-radius: 16px; overflow: hidden; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.main-player-wrapper { display: flex; align-items: stretch; }
.up-next-sidebar { width: 300px; height: 100%; border-right: 1px solid #1e293b; background: #0b111a; display: flex; flex-direction: column; flex-shrink: 0; }
.sidebar-heading { padding: 15px 20px; font-size: 1.1rem; font-weight: 600; color: #fff; border-bottom: 1px solid #1e293b; margin: 0; font-family: 'Kanit', sans-serif; }
.up-next-list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.up-next-list::-webkit-scrollbar { width: 4px; }
.up-next-list::-webkit-scrollbar-thumb { background-color: #3b82f6; border-radius: 4px; }
.up-next-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.up-next-item:hover { background: #1e293b; }
.up-next-item.active { background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); }

/* วิดีโอแนะนำ & รูปโปรไฟล์ */
.sni-thumbnail-box { position: relative; width: 80px; aspect-ratio: 16/9; overflow: hidden; border-radius: 4px; flex-shrink: 0; }
.sni-thumbnail { width: 100%; height: 100%; object-fit: cover; }
.play-overlay-small { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; opacity: 0; transition: 0.2s; }
.play-overlay-small i { font-size: 1rem; color: #fff; }
.up-next-item:hover .play-overlay-small { opacity: 1; }
.sni-avatar-overlay { position: absolute; bottom: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid #111827; object-fit: cover; z-index: 2; }
.platform-icon { position: absolute; top: 4px; left: 4px; font-size: 0.7rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.sni-info { flex: 1; display: flex; flex-direction: column; gap: 2px; font-family: 'Kanit', sans-serif; overflow: hidden; }
.sni-title { font-size: 0.85rem; font-weight: 600; color: #fff; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sni-influencer { font-size: 0.75rem; color: #94a3b8; }
.sni-meta { font-size: 0.7rem; color: #64748b; font-family: 'Rubik', sans-serif; }

/* จอวิดีโอใหญ่ */
.player-content-area { flex: 1; display: flex; flex-direction: column; background: #000; border-left: 1px solid #1e293b; }
.player-container-wide { width: 100%; height: auto; position: relative; padding-top: 42.85%; overflow: hidden; }
.player-container-wide iframe { width: 100%; height: 100%; border: none; position: absolute; top: 0; left: 0; max-width: 100%; }

/* ข้อมูลใต้จอวิดีโอ */
.player-info-bar-cinematic { padding: 15px 30px; display: flex; justify-content: space-between; align-items: center; background: #111827; border-top: 1px solid #1e293b; flex-wrap: wrap; gap: 15px; }
.info-left { display: flex; align-items: center; gap: 15px; }
.main-avatar-small { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid #3b82f6; }
.cinematic-video-title { font-size: 1.1rem; font-weight: 600; color: #fff; margin: 0; font-family: 'Kanit', sans-serif; }
.influencer-name-small { color: #e2e8f0; font-weight: 500; font-size: 0.85rem; }
.verified-badge-blue { color: #3b82f6; font-size: 0.7rem; }

/* กล่องโปรโมทเกม */
.game-ad-box-modern { background: #1e293b; border: 1px solid #334155; padding: 8px 15px; border-radius: 8px; display: flex; align-items: center; gap: 15px; }
.ad-game-thumb { width: 50px; height: 50px; border-radius: 4px; object-fit: cover; border: 1px solid #334155; }
.ad-text-modern { display: flex; flex-direction: column; font-family: 'Kanit', sans-serif; }
.ad-label-modern { font-size: 0.7rem; color: #94a3b8; }
.ad-game-name-modern { font-size: 0.9rem; color: #fff; }
.btn-buy-now-modern { background: #3b82f6; color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 6px; font-weight: 600; font-family: 'Kanit', sans-serif; display: flex; align-items: center; gap: 8px; transition: 0.2s; }
.btn-buy-now-modern .btn-price { color: rgba(255,255,255,0.8); font-size: 0.9em; font-weight: 500; }
.btn-buy-now-modern:hover { background: #2563eb; transform: translateY(-2px); }

/* Grid วิดีโอแนวตั้ง (TikTok Style) */
.grid-section-title { font-size: 1.5rem; font-weight: 700; color: #fff; font-family: 'Kanit', sans-serif; margin-bottom: 25px; border-left: 5px solid #3b82f6; padding-left: 15px; margin-top: 20px; }
.tk-explore-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 15px; }
.tk-card { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #1e293b; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tk-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
.tk-thumb { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 1; transition: opacity 0.3s; }
.tk-hover-video { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; z-index: 2; opacity: 0; transition: opacity 0.3s ease; }
.tk-card:hover .tk-hover-video { opacity: 1; }
.tk-card:hover .tk-thumb { opacity: 0; }

/* ข้อมูลบนการ์ดแนวตั้ง */
.tk-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); padding: 20px 15px 15px; z-index: 3; display: flex; flex-direction: column; gap: 5px; }
.tk-author { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.85rem; font-family: 'Kanit', sans-serif; font-weight: 500; }
.tk-author img { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #fff; }
.tk-title { color: #fff; font-size: 0.95rem; font-weight: 600; font-family: 'Kanit', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.tk-stats { display: flex; align-items: center; gap: 5px; color: #e2e8f0; font-size: 0.8rem; }

/* Modal เล่นวิดีโอ (สัดส่วนอัตโนมัติ) */
.tk-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); z-index: 99999; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease; }
.tk-modal-overlay.active { opacity: 1; }
.tk-modal-close { position: absolute; top: 20px; left: 30px; background: rgba(255,255,255,0.1); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; transition: 0.2s; z-index: 10; }
.tk-modal-close:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.tk-modal-content { display: flex; width: 100%; height: 100%; max-width: 1200px; padding: 20px; gap: 20px; align-items: center; justify-content: center; }

/* กล่องจอวิดีโอ */
.tk-video-wrapper { position: relative; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; }
.tk-video-wrapper.horizontal { width: 70%; aspect-ratio: 16 / 9; max-height: 85vh; }
.tk-video-wrapper.vertical { height: 90vh; aspect-ratio: 9 / 16; max-width: 100%; }
.tk-video-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Sidebar ด้านขวาใน Modal */
.tk-modal-sidebar { width: 350px; height: 90vh; max-height: 85vh; background: #111827; border-radius: 12px; border: 1px solid #1e293b; display: flex; flex-direction: column; overflow: hidden; }
.tk-sidebar-header { padding: 20px; border-bottom: 1px solid #1e293b; }
.tk-sidebar-author { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.tk-sidebar-author img { width: 45px; height: 45px; border-radius: 50%; border: 2px solid #3b82f6; }
.tk-sidebar-author h4 { margin: 0; color: #fff; font-size: 1.1rem; font-family: 'Kanit'; }
.tk-sidebar-desc { color: #e2e8f0; font-family: 'Kanit'; font-size: 0.95rem; line-height: 1.5; }
.tk-sidebar-game { padding: 20px; background: #0b111a; border-bottom: 1px solid #1e293b; display: flex; flex-direction: column; gap: 15px;}

/* =========================================
   🌟 อัปเดต Mobile Responsive: หน้ารีวิว (Reviews Page)
========================================= */
@media (max-width: 992px) {
    /* 1. ดันวิดีโอขึ้นไปอยู่ด้านบนสุด และเอาเพลย์ลิสต์ลงมาด้านล่าง */
    .main-player-wrapper { flex-direction: column-reverse; } 
    
    /* 2. ขยายขนาดจอวิดีโอให้สูงขึ้น บังคับความสูงให้ดูเต็มตาบนมือถือแนวตั้ง */
    .player-container-wide { 
        padding-top: 0; 
        height: 350px; 
        min-height: 40vh; 
    }
    
    /* 3. จัดการเพลย์ลิสต์ด้านล่างให้กดง่ายขึ้นและไม่เกะกะ */
    .up-next-sidebar { 
        width: 100%; 
        border-right: none; 
        border-top: 1px solid #1e293b; 
        height: auto; 
        max-height: 300px; 
    }
    
    /* 4. จัดระเบียบข้อมูลและกล่องซื้อเกมใต้จอวิดีโอ */
    .player-info-bar-cinematic { flex-direction: column; align-items: flex-start; padding: 15px; }
    .info-right { width: 100%; }
    .game-ad-box-modern { width: 100%; justify-content: space-between; }
    
    /* 5. จัดการ Pop-up ดูวิดีโอเต็มจอ (TikTok Style Modal) ให้อยู่ในหน้าจอพอดี */
    .tk-modal-content { flex-direction: column; overflow-y: auto; padding-top: 60px; padding-bottom: 20px; display: flex; }
    .tk-video-wrapper { width: 100% !important; max-height: 55vh; border-radius: 8px; }
    .tk-video-wrapper.horizontal { aspect-ratio: 16 / 9; height: auto; }
    .tk-video-wrapper.vertical { aspect-ratio: 9 / 16; height: auto; margin: 0 auto; max-width: 100%; }
    .tk-modal-sidebar { width: 100%; height: auto; max-height: none; margin-top: 10px; border-radius: 8px; }
    
    /* ลบผลกระทบจาก CSS ตัวเก่าที่คุณส่งมา */
    .player-container { height: auto; }
    .player-info-bar { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 768px) {
    /* 6. ปรับ Grid วิดีโอ Explore ด้านล่าง ให้แสดง 2 คอลัมน์แบบแอป TikTok จริงๆ */
    .tk-explore-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tk-card { border-radius: 8px; }
    .tk-overlay { padding: 10px; }
    .tk-title { font-size: 0.8rem; }
    .tk-author { font-size: 0.75rem; }
    .tk-author img { width: 20px; height: 20px; }
}

/* =========================================
   🌟 หน้า คลังแสง & บัญชี (Sidebar Dashboard - อัปเดตใหม่ทั้งหมด)
========================================= */
.inv-dashboard-wrapper { display: flex; gap: 30px; padding: 40px 15px 80px; align-items: flex-start; font-family: 'Rubik', 'Kanit', sans-serif; }

/* Sidebar & Profile */
.dash-sidebar { width: 280px; background: #ffffff; border-radius: 16px; padding: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.03); flex-shrink: 0; position: sticky; top: 20px; }
.dash-profile { text-align: center; padding: 30px 15px 20px 15px; background-color: #ffffff; border-bottom: 1px solid #e5e7eb; border-radius: 12px 12px 0 0; margin-bottom: 10px; }
.dash-profile h3 { font-size: 1.2rem; font-weight: 700; color: #1a1c20; margin: 15px 0 5px; }
.kp-badge { background: #fef3c7; color: #d97706; padding: 4px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 700; }

/* 🌟 IG Story Ring */
.ig-story-ring { display: inline-flex; padding: 4px; border-radius: 50%; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); cursor: pointer; transition: transform 0.2s ease; }
.ig-story-ring.watched { background: #d1d5db; }
.ig-story-ring:hover { transform: scale(1.05); }
.ig-story-ring img { width: 80px; height: 80px; border: 4px solid #ffffff; border-radius: 50%; display: block; object-fit: cover; background-color: #ffffff; }

/* Navigation */
.dash-nav { display: flex; flex-direction: column; gap: 5px; }
.dash-nav-link { font-size: 15px; font-weight: 500; color: #64748b; padding: 12px 15px; border-radius: 8px; display: flex; align-items: center; gap: 12px; transition: 0.2s; text-decoration: none;}
.dash-nav-link i { font-size: 1.1rem; width: 20px; text-align: center; }
.dash-nav-link:hover { background: #f8f9fa; color: #1a1c20; }
.dash-nav-link.active { background: #f0fdf4; color: #10b981; font-weight: 600; }
.dash-nav-link.active i { color: #10b981; }
.dash-nav-divider { height: 1px; background: #f1f5f9; margin: 10px 0; }
.dash-nav-link.text-danger:hover { background: #fef2f2; color: #ef4444; }

/* Main Content */
.dash-main-content { flex: 1; min-width: 0; }
.dash-header { margin-bottom: 30px; }
.dash-header h2 { text-transform: uppercase; font-size: 2.2rem; font-weight: 800; color: #1a1c20; margin: 0 0 5px; }
.dash-header p { color: #64748b; font-size: 1rem; margin: 0; }

/* Order Cards (แท็บคลังแสง) */
.dash-card-list { display: flex; flex-direction: column; gap: 20px; }
.order-card { background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.order-card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 15px; }
.order-date-id { font-size: 0.95rem; color: #475569; font-weight: 500; }
.order-date-id .divider { margin: 0 10px; color: #cbd5e1; }
.badge-completed { background: #dcfce7; color: #166534; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; }
.badge-cancelled { background: #fee2e2; color: #b91c1c; padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; }
.order-card-body { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.order-img { width: 120px; height: 80px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; }
.order-info h4 { font-size: 1.1rem; font-weight: 700; color: #1a1c20; margin: 0 0 8px; }
.order-meta { color: #64748b; font-size: 0.9rem; margin: 0 0 3px; }
.order-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e2e8f0; padding-top: 15px; }
.order-price { font-size: 0.95rem; color: #64748b; }
.order-price span { color: #10b981; font-weight: 700; font-size: 1.1rem; margin-left: 5px; }

/* Buttons & Keys */
.key-secret-box-compact { background: #f8f9fa; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 5px 10px; display: flex; align-items: center; gap: 15px; }
.key-text { font-family: monospace; font-size: 0.9rem; color: #94a3b8; font-weight: 700; letter-spacing: 1px; }
.btn-reveal-compact { background: #111827; color: #ffffff; border: none; height: 38px; padding: 0 15px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 5px; }
.btn-reveal-compact:hover { background: #374151; }
.btn-reveal-compact.warning { background: #f59e0b; color: white; }
.btn-reveal-compact.warning:hover { background: #d97706; }
.btn-review { background: transparent; border: 1px solid #cbd5e1; color: #4b5563; height: 38px; padding: 0 15px; border-radius: 6px; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 5px; }
.btn-review:hover { background: #f8f9fa; color: #111827; border-color: #9ca3af; }

/* ตารางประวัติการสั่งซื้อ (History) */
.history-table-wrapper { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); overflow: hidden; margin-top: 20px; }
.table-responsive { width: 100%; overflow-x: auto; }
.history-table { width: 100%; border-collapse: collapse; min-width: 650px; }
.history-table th { background-color: #f9fafb; padding: 16px 20px; text-align: left; font-size: 0.95rem; font-weight: 600; color: #4b5563; border-bottom: 1px solid #e5e7eb; white-space: nowrap; }
.history-table th.text-center, .history-table td.text-center { text-align: center; }
.history-table td { padding: 18px 20px; font-size: 0.95rem; color: #111827; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.history-table tbody tr:hover { background-color: #f8fafc; }
.td-date { font-weight: 500; color: #111827; }
.td-time { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.order-id-text { color: #3b82f6; background: #eff6ff; padding: 4px 8px; border-radius: 6px; font-size: 0.9rem; }
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-size: 0.85rem; font-weight: 600; }
.status-success { background: #d1fae5; color: #059669; }
.status-pending { background: #fef3c7; color: #d97706; }
.status-cancelled { background: #fee2e2; color: #dc2626; }
.btn-view-order { background: #ffffff; border: 1px solid #d1d5db; color: #374151; padding: 8px 16px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: 0.2s; white-space: nowrap; }
.btn-view-order:hover { background: #f3f4f6; border-color: #9ca3af; color: #111827; }
.btn-pay-now { background: #111827; border-color: #111827; color: #ffffff; }
.btn-pay-now:hover { background: #374151; color: #ffffff; }

/* แท็บชื่นชอบ (Wishlist) */
.wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin-top: 20px; }
.wishlist-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; position: relative;}
.wishlist-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
.wishlist-img-box { position: relative; height: 130px; }
.wishlist-img-box img { width: 100%; height: 100%; object-fit: cover; }
.btn-remove-wishlist { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.9); color: #ef4444; border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.btn-remove-wishlist:hover { background: #ef4444; color: #ffffff; }
.wishlist-info { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.wishlist-info h4 { margin: 0; font-size: 1.05rem; color: #111827; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wishlist-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: #6b7280; }
.wishlist-meta .price { color: #10b981; font-weight: 600; font-size: 1rem; }
.btn-add-cart-full { background: #111827; color: #ffffff; border: none; padding: 10px; border-radius: 6px; cursor: pointer; transition: 0.2s; font-size: 0.9rem; font-weight: 500; display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; }
.btn-add-cart-full:hover { background: #374151; }

/* ประกาศส่วนลด (News Feed) */
.news-feed-list { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.news-post { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; transition: 0.3s; }
.news-post:hover { border-color: #cbd5e1; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.post-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.post-icon { width: 45px; height: 45px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; color: #fff; }
.bg-red { background: #ef4444; }
.post-meta h4 { margin: 0; font-size: 1.1rem; color: #111827; }
.post-meta span { font-size: 0.85rem; color: #6b7280; }
.post-body p { margin: 0 0 15px 0; color: #4b5563; line-height: 1.6; }
.post-img { width: 100%; max-height: 250px; object-fit: cover; border-radius: 8px; border: 1px solid #e5e7eb; }

/* ตั้งค่าบัญชี & Gamer Card */
.gamer-dashboard-top { display: grid; grid-template-columns: auto 1fr; gap: 30px; margin-bottom: 30px; align-items: center; }
.gamer-card { width: 340px; height: 210px; border-radius: 16px; padding: 25px; color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 15px 35px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
.gamer-card:hover { transform: translateY(-5px); }
.gamer-card::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 10px 10px; opacity: 0.3; pointer-events: none; }
.tier-platinum { background: linear-gradient(135deg, #374151, #0f172a); border: 1px solid #6b7280; }
.gc-header { display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.gc-rank { font-weight: 700; font-size: 1.1rem; text-transform: uppercase; display: flex; align-items: center; gap: 8px; letter-spacing: 1px; }
.gc-logo { font-size: 1.2rem; font-weight: 800; }
.gc-body { z-index: 2; margin-top: 15px; }
.gc-username { font-size: 1.2rem; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 15px; }
.gc-progress-wrapper { width: 100%; }
.gc-progress-text { display: flex; justify-content: space-between; font-size: 0.75rem; margin-bottom: 5px; font-weight: 500; opacity: 0.9; }
.gc-progress-bar { width: 100%; height: 6px; background: rgba(255,255,255,0.2); border-radius: 4px; overflow: hidden; }
.gc-progress-fill { height: 100%; background: #10b981; border-radius: 4px; transition: width 1s ease; }
.gc-footer { display: flex; justify-content: space-between; align-items: flex-end; z-index: 2; margin-top: auto; }
.gc-points span { font-size: 1.8rem; font-weight: 800; color: #facc15; line-height: 1; text-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.gc-points small { font-size: 0.7rem; text-transform: uppercase; opacity: 0.8; font-weight: 600; display:block; margin-top: 2px; }
.gc-expiry { font-size: 0.8rem; opacity: 0.8; text-align: right; }

.reward-action-box { background: #ffffff; border: 1px dashed #cbd5e1; border-radius: 16px; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100%; }
.reward-action-box h3 { margin: 0 0 10px 0; color: #111827; font-size: 1.3rem; }
.reward-action-box p { color: #6b7280; font-size: 0.95rem; margin: 0 0 20px 0; max-width: 300px; }
.btn-redeem-rewards { background: #3b82f6; color: white; border: none; padding: 12px 30px; font-size: 1.1rem; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 8px; text-decoration:none;}
.btn-redeem-rewards:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 8px 15px rgba(59, 130, 246, 0.3); }

.settings-grid { display: flex; flex-direction: column; gap: 20px; }
.settings-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 25px; }
.settings-card h3 { margin-top: 0; font-size: 1.15rem; color: #111827; margin-bottom: 20px; border-bottom: 1px solid #f3f4f6; padding-bottom: 15px; display: flex; align-items: center; gap: 8px; }
.settings-form { display: flex; flex-direction: column; gap: 15px; }
.form-group-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group label { font-size: 0.9rem; font-weight: 500; color: #4b5563; }
.setting-input { padding: 12px 15px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.95rem; outline: none; transition: 0.2s; color: #111827; }
.btn-save-setting { background: #000000; color: #ffffff; border: none; padding: 10px 25px; border-radius: 8px; font-weight: 500; cursor: pointer; transition: 0.2s; width: fit-content; margin-top: 5px; }

/* Pop-up Modals ทั่วไป */
.reward-popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 9999; display: none; justify-content: center; align-items: center; opacity: 0; transition: 0.3s; }
.reward-popup-overlay.active { opacity: 1; }
.reward-popup-content { background: #ffffff; border-radius: 16px; padding: 40px; width: 90%; max-width: 450px; position: relative; transform: scale(0.9); transition: 0.3s; box-shadow: 0 20px 40px rgba(0,0,0,0.2); }
.reward-popup-overlay.active .reward-popup-content { transform: scale(1); }
.popup-close-btn { position: absolute; top: 15px; right: 20px; background: transparent; border: none; font-size: 1.5rem; color: #9ca3af; cursor: pointer; transition: 0.2s; }
.popup-close-btn:hover { color: #ef4444; }

.instruction-header h2 { margin-bottom: 5px; color: #111827; }
.account-details-box { background: #f8f9fa; border: 1px solid #e5e7eb; border-radius: 8px; padding: 15px; margin: 20px 0; display: flex; flex-direction: column; gap: 10px; }
.copy-row { display: flex; justify-content: space-between; align-items: center; background: #ffffff; padding: 10px 15px; border: 1px solid #cbd5e1; border-radius: 6px; }
.copy-info small { display: block; color: #6b7280; font-size: 0.8rem; }
.copy-info strong { color: #111827; font-size: 1.05rem; }
.btn-copy-small { background: transparent; border: 1px solid #cbd5e1; color: #475569; width: 35px; height: 35px; border-radius: 6px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; }
.btn-copy-small:hover { background: #f1f5f9; color: #111827; }
.manual-box h4 { margin-top: 0; color: #111827; }
.manual-box ol { padding-left: 20px; color: #4b5563; font-size: 0.95rem; line-height: 1.6; margin-bottom: 0; }

.star-rating-select { display: flex; justify-content: center; gap: 10px; font-size: 2rem; color: #d1d5db; margin: 20px 0; cursor: pointer; }
.star-rating-select i:hover, .star-rating-select i.selected { color: #f59e0b; }
#reviewTextInput { width: 100%; border: 1px solid #cbd5e1; border-radius: 8px; padding: 15px; resize: none; outline: none; }
#reviewTextInput:focus { border-color: #3b82f6; }
.btn-blue-glossy { background: #3b82f6; color: white; border: none; cursor: pointer; transition: 0.2s; border-radius: 8px; }
.btn-blue-glossy:hover { background: #2563eb; }

/* Highlight Highlight Pulse */
@keyframes highlightPulse { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); border-color: #3b82f6; } 70% { box-shadow: 0 0 0 15px rgba(59, 130, 246, 0); border-color: #3b82f6; } 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); border-color: #e5e7eb; } }
.highlight-card { animation: highlightPulse 2s ease-out; border-color: #3b82f6 !important; transition: border-color 0.5s ease; }

/* IG Story Modal */
.story-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 99999; display: none; justify-content: center; align-items: center; opacity: 0; transition: 0.3s; }
.story-modal-overlay.active { opacity: 1; }
.story-content-box { width: 100%; max-width: 400px; height: 80vh; max-height: 800px; background: #111827; border-radius: 16px; position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.story-progress-bar { position: absolute; top: 10px; left: 10px; right: 10px; height: 3px; background: rgba(255,255,255,0.3); border-radius: 2px; z-index: 10; }
.story-progress-fill { height: 100%; width: 0%; background: #ffffff; border-radius: 2px; }
.story-close { position: absolute; top: 20px; right: 15px; color: white; font-size: 1.5rem; background: none; border: none; cursor: pointer; z-index: 10; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.story-img-bg { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; }
.story-text-overlay { position: absolute; bottom: 40px; left: 20px; right: 20px; color: white; text-align: center; }
.story-text-overlay h2 { font-size: 2rem; margin: 0 0 10px 0; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.story-text-overlay p { margin: 0 0 20px 0; opacity: 0.9; }
.btn-story-action { background: #10b981; color: white; border: none; padding: 15px 30px; font-size: 1.1rem; border-radius: 30px; cursor: pointer; font-weight: 600; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); width: 100%; transition: 0.2s;}
.btn-story-action:hover { background: #059669; transform: scale(1.05); }

/* 🌟 ขวา: Main Content */
.dash-main-content { flex: 1; min-width: 0; }
.dash-header { margin-bottom: 30px; }
.dash-header h2 { font-family: 'Rubik', 'Kanit', sans-serif; text-transform: uppercase; font-size: 2.2rem; font-weight: 800; color: #1a1c20; margin: 0 0 5px; }
.dash-header p { font-family: 'Rubik', 'Kanit', sans-serif; color: #64748b; font-size: 1rem; margin: 0; }

/* 🌟 รูปแบบการ์ด (Order Card) */
.dash-card-list { display: flex; flex-direction: column; gap: 20px; }
.order-card { background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.order-card-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px; margin-bottom: 15px; }
.order-date-id { font-family: 'Rubik', 'Kanit', sans-serif; font-size: 0.95rem; color: #475569; font-weight: 500; }
.order-date-id .divider { margin: 0 10px; color: #cbd5e1; }
.badge-completed { background: #dcfce7; color: #166534; padding: 4px 12px; border-radius: 20px; font-family: 'Rubik', sans-serif; font-size: 0.8rem; font-weight: 700; }
.badge-pending { background: #fef3c7; color: #d97706; padding: 4px 12px; border-radius: 20px; font-family: 'Rubik', sans-serif; font-size: 0.8rem; font-weight: 700; }
.badge-cancelled { background: #fee2e2; color: #b91c1c; padding: 4px 12px; border-radius: 20px; font-family: 'Rubik', sans-serif; font-size: 0.8rem; font-weight: 700; }

.order-card-body { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px; }
.order-img { width: 120px; height: 80px; border-radius: 8px; object-fit: cover; border: 1px solid #e2e8f0; }
.order-info h4 { font-family: 'Rubik', 'Kanit', sans-serif; font-size: 1.1rem; font-weight: 700; color: #1a1c20; margin: 0 0 8px; }
.order-meta { color: #64748b; font-size: 0.9rem; margin: 0 0 3px; font-family: 'Rubik', 'Kanit', sans-serif; }

.order-card-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px dashed #e2e8f0; padding-top: 15px; }
.order-price { font-family: 'Rubik', 'Kanit', sans-serif; font-size: 0.95rem; color: #64748b; }
.order-price span { color: #10b981; font-weight: 700; font-size: 1.1rem; margin-left: 5px; }

/* ปุ่มโชว์คีย์ / คู่มือ */
.key-secret-box-compact { background: #f8f9fa; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 5px 10px; display: flex; align-items: center; gap: 15px; }
.key-text { font-family: 'Rubik', monospace; font-size: 0.9rem; color: #94a3b8; font-weight: 700; letter-spacing: 1px; }
.btn-reveal-compact { background: #f1f5f9; color: #475569; border: none; padding: 6px 12px; border-radius: 6px; font-family: 'Rubik', 'Kanit', sans-serif; font-weight: 600; cursor: pointer; transition: 0.2s; font-size: 0.85rem; }
.btn-reveal-compact:hover { background: #e2e8f0; }
.btn-reveal-compact.warning { background: #fef3c7; color: #d97706; }
.btn-reveal-compact.warning:hover { background: #fde68a; }

/* ปุ่มรีวิวสินค้า */
.btn-review { background: #fff; border: 1px solid #e2e8f0; color: #f59e0b; padding: 6px 15px; border-radius: 6px; font-family: 'Rubik', 'Kanit', sans-serif; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.btn-review:hover { background: #fffbeb; border-color: #fcd34d; color: #d97706; transform: translateY(-1px); }

/* =========================================
   🌟 Pop-up เขียนรีวิว (Review Modal)
========================================= */
.review-modal-content { max-width: 500px; padding: 40px 30px; font-family: 'Rubik', 'Kanit', sans-serif; }
.review-form-box { display: flex; flex-direction: column; gap: 20px; }
.star-rating-select { display: flex; justify-content: center; gap: 10px; font-size: 2.5rem; color: #e2e8f0; cursor: pointer; }
.star-rating-select i { transition: 0.2s transform, 0.2s color; }
.star-rating-select i.selected { color: #f59e0b; text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3); }
.star-rating-select i:hover { transform: scale(1.15); }

.review-form-box textarea { width: 100%; border: 2px solid #e2e8f0; border-radius: 12px; padding: 15px; font-family: 'Rubik', 'Kanit', sans-serif; font-size: 1rem; color: #1a1c20; resize: none; outline: none; transition: 0.3s; background: #f8f9fa; }
.review-form-box textarea:focus { border-color: #3b82f6; background: #ffffff; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); }

/* =========================================
   🌟 Pop-up หน้าคู่มือ & ID Game (Instruction Modal)
========================================= */
.instruction-modal-content { max-width: 600px; text-align: left; padding: 40px 30px; }
.instruction-header { border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; margin-bottom: 20px; }
.instruction-header h2 { font-size: 1.5rem; font-weight: 800; color: #1a1c20; margin: 0 0 5px; }
.instruction-header p { color: #3b82f6; font-weight: 700; margin: 0; font-size: 1.1rem; }

/* กล่องแสดง ID / Password */
.account-details-box { background: #f8f9fa; border: 1px solid #cbd5e1; border-radius: 12px; padding: 15px; margin-bottom: 20px; display: flex; flex-direction: column; gap: 10px; }
.copy-row { display: flex; justify-content: space-between; align-items: center; background: #fff; padding: 10px 15px; border-radius: 8px; border: 1px solid #e2e8f0; }
.copy-info { display: flex; flex-direction: column; }
.copy-info small { color: #64748b; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.copy-info strong { color: #1a1c20; font-size: 1.1rem; font-family: monospace; letter-spacing: 1px; }
.btn-copy-small { background: #fff; border: 2px solid #cbd5e1; color: #475569; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; align-items: center; font-size: 1.1rem; }
.btn-copy-small:hover { border-color: #3b82f6; color: #3b82f6; background: #f0f9ff; }

/* กล่องอธิบายคู่มือเป็นข้อๆ */
.manual-box { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: 20px; }
.manual-box h4 { color: #d97706; font-weight: 800; margin: 0 0 15px; font-size: 1.1rem; }
.manual-box ol { margin: 0; padding-left: 20px; color: #475569; font-size: 0.95rem; line-height: 1.6; }
.manual-box ol li { margin-bottom: 8px; }
.manual-box ol li strong { color: #b45309; }

/* =========================================
   🌟 Pop-up เขียนรีวิว (Review Modal)
========================================= */
.review-modal-content { max-width: 500px; padding: 40px 30px; }
.review-form-box { display: flex; flex-direction: column; gap: 20px; }

/* ระบบดาวสำหรับกดเลือก */
.star-rating-select { display: flex; justify-content: center; gap: 10px; font-size: 2.5rem; color: #e2e8f0; cursor: pointer; }
.star-rating-select i { transition: 0.2s transform, 0.2s color; }
.star-rating-select i.selected { color: #f59e0b; text-shadow: 0 2px 10px rgba(245, 158, 11, 0.3); }
.star-rating-select i:hover { transform: scale(1.15); }

/* ช่องพิมพ์ข้อความรีวิว */
.review-form-box textarea { 
    width: 100%; 
    border: 2px solid #e2e8f0; 
    border-radius: 12px; 
    padding: 15px; 
    font-family: 'Kanit', sans-serif; 
    font-size: 1rem; 
    color: #1a1c20; 
    resize: none; 
    outline: none; 
    transition: 0.3s; 
    background: #f8f9fa;
}
.review-form-box textarea:focus { 
    border-color: #3b82f6; 
    background: #ffffff; 
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1); 
}

/* =========================================
   🌟 หน้ารายละเอียดสินค้า (Product Page)
========================================= */
.product-page-wrapper { font-family: 'Rubik', sans-serif; color: #1a1c20; }

.product-page-wrapper .pro-breadcrumb { color: #64748b; font-size: 0.9rem; margin-bottom: 20px; font-family: 'Rubik', sans-serif; }
.product-page-wrapper .pro-breadcrumb a { color: #475569; text-decoration: none; transition: 0.2s; }
.product-page-wrapper .pro-breadcrumb a:hover { color: #3b82f6; }
.product-page-wrapper .pro-breadcrumb i { font-size: 0.7rem; margin: 0 8px; color: #cbd5e1; }

.product-page-wrapper .pro-title-main { color: #1a1c20; font-family: 'Rubik', sans-serif; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; font-size: 2.2rem; }

/* แถบรีวิวด้านบนสุด */
.product-page-wrapper .pro-meta-header { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; font-family: 'Rubik', sans-serif; font-size: 0.95rem; color: #64748b; flex-wrap: wrap; }
.product-page-wrapper .pro-meta-stars { color: #10b981; font-size: 1rem; }
.product-page-wrapper .pro-meta-count { font-weight: 500; color: #475569; }
.product-page-wrapper .pro-meta-divider { color: #cbd5e1; }
.product-page-wrapper .pro-rate-btn { color: #3b82f6; text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 5px; transition: 0.2s; }
.product-page-wrapper .pro-rate-btn:hover { color: #2563eb; text-decoration: underline; }

.product-page-wrapper .pro-top-layout { display: grid; grid-template-columns: 2.5fr 1.2fr 1.3fr; gap: 30px; margin-bottom: 60px; }

/* Media Viewer */
.product-page-wrapper .pro-media-col { display: flex; flex-direction: column; gap: 10px; }
.product-page-wrapper .pro-main-viewer { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; border: 1px solid #e2e8f0; }
.product-page-wrapper .pro-main-viewer iframe, .product-page-wrapper .pro-main-viewer img { width: 100%; height: 100%; object-fit: cover; }
.product-page-wrapper .pro-thumb-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; }
.product-page-wrapper .pro-thumb-strip::-webkit-scrollbar { height: 6px; }
.product-page-wrapper .pro-thumb-strip::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
.product-page-wrapper .pro-thumb { width: 120px; aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; cursor: pointer; border: 2px solid transparent; opacity: 0.6; transition: 0.2s; position: relative; flex-shrink: 0; }
.product-page-wrapper .pro-thumb:hover { opacity: 1; border-color: #94a3b8; }
.product-page-wrapper .pro-thumb.active { opacity: 1; border-color: #3b82f6; }
.product-page-wrapper .pro-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-page-wrapper .video-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 1.5rem; text-shadow: 0 2px 5px rgba(0,0,0,0.8); z-index: 2; pointer-events: none; }

/* Checklist ดีไซน์ใหม่ */
.product-page-wrapper .pro-info-col { display: flex; flex-direction: column; }
.product-page-wrapper .pro-view-count { background: #f1f5f9; border-left: 4px solid #3b82f6; padding: 12px 15px; border-radius: 0 6px 6px 0; color: #475569; font-size: 0.95rem; margin-bottom: 20px; font-family: 'Kanit', sans-serif; display: flex; align-items: center; gap: 10px; }
.product-page-wrapper .pro-view-count i { color: #3b82f6; font-size: 1.1rem; }

/* 🌟 อัปเดต: CSS โครงสร้าง Checklist ใหม่ */
.product-page-wrapper .pro-checklist-v2 { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.product-page-wrapper .check-item-v2 { display: flex; align-items: flex-start; gap: 15px; font-family: 'Kanit', sans-serif; }
.product-page-wrapper .ci-icon { font-size: 1.3rem; width: 24px; text-align: center; margin-top: 2px; }
.product-page-wrapper .ci-text { display: flex; flex-direction: column; gap: 3px; }
.product-page-wrapper .ci-title { color: #64748b; font-size: 0.85rem; font-weight: 500; }
.product-page-wrapper .ci-value { color: #1a1c20; font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.product-page-wrapper .ci-value .text-muted { color: #94a3b8; font-weight: 400; font-size: 0.85rem; }

/* ลิงก์กดดูคู่มือ */
.product-page-wrapper .guide-link { color: #f59e0b; font-size: 0.85rem; font-weight: 500; cursor: pointer; text-decoration: underline; transition: 0.2s; display: inline-flex; align-items: center; gap: 4px; padding-left: 5px; }
.product-page-wrapper .guide-link:hover { color: #d97706; }

/* ป้าย Tag เเนวเกม */
.product-page-wrapper .pro-genres-v2 { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.product-page-wrapper .g-tag-v2 { background: transparent; color: #3b82f6; padding: 5px 12px; border-radius: 4px; font-size: 0.8rem; font-family: 'Rubik', sans-serif; font-weight: 600; border: 1px solid rgba(59, 130, 246, 0.4); text-transform: uppercase; letter-spacing: 0.5px; transition: 0.2s; }
.product-page-wrapper .g-tag-v2:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3); }

/* กล่อง "เกมนี้รูปแบบอื่น" */
.product-page-wrapper .pro-editions-box-v2 { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.product-page-wrapper .edition-header-box-v2 { border-bottom: 2px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 15px; }
.product-page-wrapper .edition-title-v2 { font-family: 'Kanit', sans-serif; font-size: 1.2rem; color: #1a1c20; font-weight: 700; margin: 0; }
.product-page-wrapper .editions-grid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.product-page-wrapper .edition-card-v2 { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 15px 10px; border: 1px solid #cbd5e1; border-radius: 8px; text-decoration: none; color: #475569; transition: 0.2s; font-family: 'Rubik', sans-serif; background: #f8f9fa; }
.product-page-wrapper .edition-card-v2:hover { border-color: #94a3b8; background: #ffffff; color: #1a1c20; transform: translateY(-2px); box-shadow: 0 2px 10px rgba(0,0,0,0.02); }
.product-page-wrapper .edition-card-v2.active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.05); color: #3b82f6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); font-weight: 600; cursor: default; transform: none; }
.product-page-wrapper .e-main { display: flex; flex-direction: column; gap: 3px; }
.product-page-wrapper .e-type { font-weight: 600; font-size: 0.95rem; font-family: 'Kanit', sans-serif; }
.product-page-wrapper .e-platform { font-size: 0.75rem; color: #94a3b8; }
.product-page-wrapper .edition-card-v2.active .e-platform { color: rgba(59, 130, 246, 0.8); }

/* Buy Box */
.product-page-wrapper .pro-buy-box { background: #11151a; border: 1px solid #2d333b; border-radius: 12px; padding: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); position: sticky; top: 20px; }
.product-page-wrapper .drm-logo { font-family: 'Rubik', sans-serif; font-size: 1.3rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.product-page-wrapper .pro-type-badge { display: inline-block; background: #3b82f6; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 0.85rem; font-weight: 700; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); letter-spacing: 0.5px; font-family: 'Rubik', sans-serif; }

/* ระบบ "เลือกแพ็ค" ภายใน Buy Box */
.product-page-wrapper .pro-edition-select-box { margin-bottom: 25px; }
.product-page-wrapper .pro-edition-select-box .p-label { color: #94a3b8; font-size: 0.9rem; font-weight: 600; margin-bottom: 10px; display: block; font-family: 'Kanit', sans-serif; text-transform: uppercase; letter-spacing: 0.5px; }
.product-page-wrapper .pro-edition-options { display: flex; flex-wrap: wrap; gap: 10px; }
.product-page-wrapper .ed-btn { background: transparent; border: 1px solid #334155; color: #cbd5e1; padding: 10px 15px; border-radius: 6px; font-family: 'Rubik', 'Kanit', sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: 0.2s; flex: 1; text-align: center; }
.product-page-wrapper .ed-btn:hover { border-color: #64748b; color: #fff; background: rgba(255,255,255,0.02); }
.product-page-wrapper .ed-btn.active { border-color: #10b981; color: #10b981; font-weight: 600; background: rgba(16, 185, 129, 0.05); box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); }

.product-page-wrapper .pro-price-zone { display: flex; align-items: center; gap: 15px; margin-bottom: 25px; background: #1d222b; padding: 15px 20px; border-radius: 8px; border: 1px solid #2d333b; }
.product-page-wrapper .discount-badge { background: #10b981; color: #000; font-family: 'Rubik', sans-serif; font-weight: 800; font-size: 1.25rem; padding: 6px 12px; border-radius: 6px; }
.product-page-wrapper .prices { display: flex; flex-direction: column; font-family: 'Rubik', sans-serif; line-height: 1.2; }
.product-page-wrapper .old-p { text-decoration: line-through; color: #64748b; font-size: 0.9rem; font-weight: 500; }
.product-page-wrapper .new-p { color: #fff; font-weight: 800; font-size: 1.6rem; }
.product-page-wrapper .btn-buy-now { width: 100%; background: #3b82f6; color: #fff; border: none; padding: 15px; border-radius: 8px; font-family: 'Kanit', sans-serif; font-weight: 600; font-size: 1.15rem; cursor: pointer; transition: 0.2s; margin-bottom: 15px; }
.product-page-wrapper .btn-buy-now:hover { background: #2563eb; }
.product-page-wrapper .btn-group-row { display: flex; gap: 12px; margin-bottom: 15px; } /* ขยับ margin เพื่อปุ่มวิธีการสั่งซื้อ */
.product-page-wrapper .btn-add-cart { flex: 1; background: transparent; color: #3b82f6; border: 2px solid #3b82f6; padding: 12px; border-radius: 8px; font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 1rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.product-page-wrapper .btn-add-cart:hover { background: rgba(59, 130, 246, 0.05); }
.product-page-wrapper .btn-wishlist-pro { width: 50px; background: #1d222b; color: #fff; border: 1px solid #2d333b; border-radius: 8px; cursor: pointer; transition: 0.2s; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.product-page-wrapper .btn-wishlist-pro:hover { background: #2d333b; color: #ef4444; }

/* 🌟 อัปเดต: ปุ่มวิธีการสั่งซื้อใต้ตะกร้า */
.product-page-wrapper .how-to-buy-link { text-align: center; margin-bottom: 25px; font-family: 'Kanit', sans-serif; font-size: 0.9rem; color: #94a3b8; cursor: pointer; transition: 0.2s; display: block; width: 100%; }
.product-page-wrapper .how-to-buy-link:hover { color: #e2e8f0; text-decoration: underline; }

.product-page-wrapper .pro-payment-methods { border-top: 1px solid #2d333b; padding-top: 20px; text-align: center; font-family: 'Rubik', sans-serif; }
.product-page-wrapper .pro-payment-methods small { color: #94a3b8; display: block; margin-bottom: 12px; font-size: 0.85rem; font-weight: 500; }
.product-page-wrapper .pay-icons { display: flex; justify-content: center; gap: 15px; font-size: 1.8rem; color: #cbd5e1; }
.product-page-wrapper .pay-icons i { transition: 0.2s; cursor: help; }
.product-page-wrapper .pay-icons i:hover { color: #fff; transform: translateY(-2px); }

/* โซน 2 & 3: รายละเอียด, สเปค, ตาราง, รีวิว */
.product-page-wrapper .section-title { font-family: 'Kanit', sans-serif; font-size: 1.5rem; color: #1a1c20; border-bottom: 2px solid #e2e8f0; padding-bottom: 10px; margin-bottom: 20px; font-weight: 600; }
.product-page-wrapper .pro-details-layout { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; }
.product-page-wrapper .pro-desc-content p { color: #475569; line-height: 1.7; font-family: 'Kanit', sans-serif; }

.product-page-wrapper .specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.product-page-wrapper .spec-col h4 { color: #1a1c20; margin-bottom: 15px; font-size: 1.1rem; font-family: 'Rubik', sans-serif; font-weight: 600; }
.product-page-wrapper .spec-col ul { list-style: none; padding: 0; margin: 0; color: #475569; font-size: 0.95rem; font-family: 'Rubik', sans-serif; }
.product-page-wrapper .spec-col li { margin-bottom: 10px; border-bottom: 1px dashed #cbd5e1; padding-bottom: 5px; }
.product-page-wrapper .spec-col li strong { color: #1a1c20; width: 100px; display: inline-block; font-weight: 600; }

.product-page-wrapper .pro-compare-section { margin-bottom: 60px; }
.product-page-wrapper .table-responsive { overflow-x: auto; background: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.product-page-wrapper .pro-compare-table { width: 100%; border-collapse: collapse; min-width: 600px; font-family: 'Kanit', sans-serif; }
.product-page-wrapper .pro-compare-table th, .product-page-wrapper .pro-compare-table td { padding: 15px 20px; text-align: center; border-bottom: 1px solid #e2e8f0; color: #475569; font-size: 0.95rem; }
.product-page-wrapper .pro-compare-table th { background: #f8f9fa; color: #1a1c20; font-weight: 600; }
.product-page-wrapper .pro-compare-table td:first-child { text-align: left; font-weight: 500; color: #1a1c20; }
.product-page-wrapper .pro-compare-table .highlight { background: rgba(59, 130, 246, 0.05); color: #1a1c20; font-weight: 600; }
.product-page-wrapper .pro-compare-table i.fa-check { color: #10b981; font-size: 1.2rem; }
.product-page-wrapper .pro-compare-table i.cross { color: #ef4444; font-size: 1.2rem; }

.product-page-wrapper .review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px; }
.product-page-wrapper .review-card { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); font-family: 'Kanit', sans-serif; }
.product-page-wrapper .rev-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.product-page-wrapper .rev-avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #3b82f6; }
.product-page-wrapper .rev-info h5 { margin: 0 0 5px; color: #1a1c20; font-size: 1.05rem; font-weight: 600; }
.product-page-wrapper .rev-stars { color: #10b981; font-size: 0.85rem; }
.product-page-wrapper .rev-stars .far { color: #cbd5e1; }
.product-page-wrapper .rev-date { margin-left: auto; color: #94a3b8; font-size: 0.85rem; }
.product-page-wrapper .rev-body { color: #475569; font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* 🌟 อัปเดต: CSS สำหรับ Pop-up คู่มือ และ วิธีสั่งซื้อ */
.pro-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(11, 26, 42, 0.6); z-index: 9999; display: none; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(3px); }
.pro-modal-overlay.active { opacity: 1; }
.pro-modal-content { background: #ffffff; width: 90%; max-width: 500px; border-radius: 16px; padding: 30px; position: relative; transform: translateY(20px); transition: transform 0.3s; font-family: 'Kanit', sans-serif; color: #1a1c20; border: 1px solid #e2e8f0; box-shadow: 0 10px 40px rgba(0,0,0,0.1); }
.pro-modal-overlay.active .pro-modal-content { transform: translateY(0); }
.pm-close { position: absolute; top: 15px; right: 15px; background: transparent; border: none; font-size: 1.2rem; color: #94a3b8; cursor: pointer; transition: 0.2s; }
.pm-close:hover { color: #ef4444; }
.pro-modal-content h3 { font-size: 1.3rem; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-family: 'Rubik', 'Kanit', sans-serif; }
.pro-modal-content p { color: #475569; line-height: 1.6; font-size: 0.95rem; margin-bottom: 12px; }

/* =========================================
   🌟 หน้ารวมสินค้า (Catalog / Category Page) - Light Mode
========================================= */
.catalog-breadcrumb { color: #64748b; font-size: 0.9rem; font-family: 'Rubik', 'Kanit', sans-serif; }
.catalog-breadcrumb a { color: #475569; text-decoration: none; transition: 0.2s; }
.catalog-breadcrumb a:hover { color: #3b82f6; }
.catalog-breadcrumb i { font-size: 0.7rem; margin: 0 8px; color: #cbd5e1; }

/* 🌟 อัปเดตใหม่: โซน Banner ยาวสุดขอบจอ (Full Width) */
.catalog-full-banner-section {
    width: 100%; /* ยาวสุดจอ */
    padding: 60px 0; /* เพิ่มพื้นที่แนวตั้งให้ดูยิ่งใหญ่ */
    color: #fff;
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.3); /* ใส่เงาข้างล่างให้มีมิติ */
}

/* สีแบนเนอร์แบบ CSS (ย้ายมาจาก inline PHP) */
.catalog-full-banner-section.bg-special {
    background: linear-gradient(135deg, #ef4444, #991b1b);
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.3), 0 10px 20px rgba(239, 68, 68, 0.15);
}
.catalog-full-banner-section.bg-new {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    box-shadow: inset 0 -15px 30px rgba(0,0,0,0.3), 0 10px 20px rgba(59, 130, 246, 0.15);
}

/* จัดเลย์เอาต์ข้างในให้ตรงศูนย์กลาง */
.catalog-full-banner-section .banner-inner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ดีไซน์ตัวหนังสือสไตล์ยิ่งใหญ่ ทรงพลังแบบภาพ Ref */
.catalog-full-banner-section .banner-text h2 {
    font-family: 'Rubik', sans-serif;
    font-size: 3rem; /* ใหญ่สุดๆ */
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 3px 6px rgba(0,0,0,0.4); /* เพิ่มเงาตัวหนังสือให้ลอยออกมา */
}
.catalog-full-banner-section .banner-text p {
    margin: 10px 0 0;
    font-size: 1.25rem;
    opacity: 0.9;
    font-family: 'Kanit', sans-serif;
}
.catalog-full-banner-section .banner-icon {
    font-size: 6rem; /* ไอคอนใหญ่ๆ */
    opacity: 0.3; /* จางๆ อยู่ข้างหลังแบบมีชั้นเชิง */
    color: rgba(255,255,255,0.8);
}

/* เนื้อหาหลักด้านล่าง */
.catalog-top-bar { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; flex-wrap: wrap; gap: 15px; }
.catalog-title { font-size: 2.2rem; font-weight: 800; margin: 0; color: #1a1c20; font-family: 'Kanit', sans-serif; text-transform: uppercase; }

.catalog-sort { display: flex; align-items: center; gap: 10px; font-family: 'Kanit', sans-serif; color: #475569; font-size: 0.95rem; font-weight: 500; }
.sort-select { background: #ffffff; color: #1a1c20; border: 1px solid #cbd5e1; padding: 8px 15px; border-radius: 6px; font-family: 'Kanit', sans-serif; font-size: 0.95rem; font-weight: 500; outline: none; cursor: pointer; transition: 0.2s; }
.sort-select:hover, .sort-select:focus { border-color: #3b82f6; }

.catalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 30px; }

/* ตัวกรอง */
.catalog-sidebar { display: flex; flex-direction: column; gap: 20px; }
.filter-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.filter-title { font-size: 1.1rem; font-weight: 600; color: #1a1c20; border-bottom: 1px dashed #cbd5e1; padding-bottom: 10px; margin-bottom: 15px; font-family: 'Kanit', sans-serif; }
.filter-group { display: flex; flex-direction: column; gap: 10px; }
.filter-label { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: #475569; cursor: pointer; font-family: 'Kanit', sans-serif; transition: 0.2s; font-weight: 400; }
.filter-label:hover { color: #3b82f6; }
.filter-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: #3b82f6; }
.f-count { margin-left: auto; color: #94a3b8; font-size: 0.85rem; }

/* ตารางสินค้า */
.catalog-main { min-width: 0; }

/* แบ่งหน้า */
.catalog-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 50px; font-family: 'Rubik', sans-serif; }
.page-btn { background: #ffffff; border: 1px solid #cbd5e1; color: #475569; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: 0.2s; }
.page-btn:hover:not(.disabled) { background: #f8f9fa; color: #1a1c20; border-color: #94a3b8; }
.page-btn.active { background: #3b82f6; color: #fff; border-color: #3b82f6; cursor: default; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2); }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; background: #f1f5f9; border-color: #e2e8f0; color: #94a3b8; }
.page-dots { color: #94a3b8; padding: 0 5px; font-weight: 600; }

/* =========================================
   🌟 หน้าตะกร้าสินค้า (Cart Page) - Light Mode
========================================= */
.cart-page-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 30px; color: #1a1c20; font-family: 'Kanit', sans-serif; text-transform: uppercase; }

.cart-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; }

/* 🛒 โซนซ้าย: รายการสินค้า */
.cart-main-col { display: flex; flex-direction: column; gap: 30px; }
.cart-items-container { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.cart-items-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; margin-bottom: 20px; font-size: 1.1rem; font-weight: 600; color: #1a1c20; font-family: 'Kanit', sans-serif; }
.btn-clear-cart { background: transparent; border: none; color: #ef4444; font-family: 'Kanit', sans-serif; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: flex; align-items: center; gap: 5px; }
.btn-clear-cart:hover { color: #dc2626; text-decoration: underline; }

.cart-items-list { display: flex; flex-direction: column; gap: 15px; }
.cart-item-card { display: flex; align-items: center; gap: 20px; background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #cbd5e1; position: relative; transition: 0.2s; }
.cart-item-card:hover { border-color: #94a3b8; background: #ffffff; }
.ci-image { width: 140px; border-radius: 6px; overflow: hidden; flex-shrink: 0; }
.ci-image img { width: 100%; height: auto; display: block; object-fit: cover; }
.ci-details { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.ci-platform { font-size: 0.8rem; color: #64748b; font-family: 'Rubik', sans-serif; }
.ci-name { font-size: 1.2rem; font-weight: 600; color: #1a1c20; margin: 0; font-family: 'Kanit', sans-serif; }
.ci-type-badge { display: inline-block; background: #3b82f6; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: 600; font-family: 'Rubik', sans-serif; width: fit-content; }

/* 🌟 ปุ่มปรับจำนวนสินค้า (Quantity Picker) */
.ci-qty-zone { display: flex; align-items: center; gap: 5px; background: #ffffff; border-radius: 6px; padding: 4px; border: 1px solid #cbd5e1; margin: 0 15px; }
.btn-qty { background: #f8f9fa; border: 1px solid #e2e8f0; border-radius: 4px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #475569; transition: 0.2s; font-size: 0.8rem; }
.btn-qty:hover { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.qty-input { width: 40px; text-align: center; border: none; background: transparent; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 1rem; color: #1a1c20; outline: none; }
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ci-price-zone { display: flex; flex-direction: column; text-align: right; min-width: 100px; font-family: 'Rubik', sans-serif; }
.ci-old-price { font-size: 0.85rem; color: #94a3b8; text-decoration: line-through; }
.ci-current-price { font-size: 1.3rem; font-weight: 700; color: #1a1c20; }

.ci-actions { margin-left: 10px; }
.btn-remove-item { background: transparent; border: none; color: #94a3b8; font-size: 1.2rem; cursor: pointer; transition: 0.2s; }
.btn-remove-item:hover { color: #ef4444; transform: scale(1.1); }

/* โซนสินค้าแนะนำ (Cross-Selling) */
.cross-sell-section { background: transparent; margin-top: 10px; }
.cross-sell-title { font-size: 1.2rem; font-weight: 700; color: #1a1c20; font-family: 'Kanit', sans-serif; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.cross-sell-title i { color: #f59e0b; }

/* 💳 โซนขวา: สรุปยอด */
.cart-summary-box { background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); position: sticky; top: 20px; }
.summary-title { font-size: 1.3rem; font-weight: 600; color: #1a1c20; border-bottom: 2px solid #e2e8f0; padding-bottom: 15px; margin-bottom: 20px; font-family: 'Kanit', sans-serif; }
.summary-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 1rem; color: #475569; font-family: 'Kanit', sans-serif; }
.summary-row.text-discount { color: #3b82f6; font-weight: 500; }
.summary-divider { height: 1px; background: #e2e8f0; margin: 15px 0; }
.summary-row.total-row { font-size: 1.3rem; font-weight: 700; color: #1a1c20; margin-bottom: 25px; }
.summary-row.total-row .text-primary { color: #3b82f6; font-family: 'Rubik', sans-serif; font-size: 1.6rem; }

/* โค้ดส่วนลด */
.promo-code-box { display: flex; gap: 10px; margin-bottom: 25px; }
.promo-input { flex: 1; background: #f8f9fa; border: 1px solid #cbd5e1; color: #1a1c20; padding: 10px 15px; border-radius: 6px; outline: none; font-family: 'Kanit', sans-serif; font-size: 0.95rem; }
.promo-input:focus { border-color: #3b82f6; background: #fff; }
.btn-apply-promo { background: #3b82f6; color: #fff; border: none; padding: 10px 15px; border-radius: 6px; font-family: 'Kanit', sans-serif; font-weight: 600; cursor: pointer; transition: 0.2s; }
.btn-apply-promo:hover { background: #2563eb; }

/* ปุ่มชำระเงิน */
.btn-checkout { display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; background: #3b82f6; color: #fff; text-decoration: none; padding: 15px; border-radius: 8px; font-family: 'Kanit', sans-serif; font-weight: 700; font-size: 1.15rem; transition: 0.2s; margin-bottom: 15px; text-transform: uppercase; }
.btn-checkout:hover { background: #2563eb; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); }

.secure-checkout-note { text-align: center; color: #64748b; font-size: 0.85rem; display: flex; justify-content: center; align-items: center; gap: 5px; font-family: 'Kanit', sans-serif; }

/* 📱 หน้าตะกร้าสินค้า (Cart Mobile) */
@media (max-width: 992px) {
    .cart-layout { grid-template-columns: 1fr; gap: 20px; }
    .cart-item-card { flex-direction: column; align-items: flex-start; }
    .ci-image { width: 100%; }
    .ci-price-zone { width: 100%; text-align: left; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
    .ci-qty-zone { margin: 15px 0 0 0; }
    .ci-actions { position: absolute; top: 15px; right: 15px; }
}

/* =========================================
   🌟 หน้าชำระเงิน (Checkout Page) UX/UI แบบ Reference
========================================= */
.checkout-wrapper { max-width: 1100px; margin: 0 auto; }

/* Breadcrumb */
.checkout-breadcrumb { font-size: 0.85rem; color: #94a3b8; margin-bottom: 30px; font-family: 'Rubik', sans-serif; font-weight: 500; }
.checkout-breadcrumb a { color: #3b82f6; text-decoration: none; }
.checkout-breadcrumb i { font-size: 0.6rem; margin: 0 8px; }
.checkout-breadcrumb .active { color: #1a1c20; }

.checkout-layout { display: grid; grid-template-columns: 1fr 400px; gap: 40px; align-items: start; }

/* --- 📝 โซนซ้าย (ฟอร์มและชำระเงิน) --- */
.section-title { font-size: 1.4rem; font-weight: 600; color: #1a1c20; margin: 0 0 5px 0; font-family: 'Rubik', 'Kanit', sans-serif; }
.section-subtitle { font-size: 0.9rem; color: #64748b; margin-bottom: 20px; font-family: 'Kanit', sans-serif; }

/* Form Grid */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.85rem; font-weight: 500; color: #475569; font-family: 'Rubik', 'Kanit', sans-serif; }
.form-input { padding: 12px 15px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 0.95rem; font-family: 'Kanit', sans-serif; outline: none; transition: 0.2s; background: #fff; }
.form-input:focus { border-color: #1a1c20; box-shadow: 0 0 0 2px rgba(26, 28, 32, 0.1); }

/* Payment Method Selector */
.method-selector-group { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.method-box { display: flex; align-items: center; padding: 15px 20px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; cursor: pointer; transition: 0.2s; }
.method-box:hover { border-color: #94a3b8; }
.method-box.active { border-color: #1a1c20; background: #f8f9fa; }
.method-radio { margin-right: 15px; position: relative; width: 18px; height: 18px; }
.radio-custom { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border: 2px solid #cbd5e1; border-radius: 50%; background: #fff; }
.method-box.active .radio-custom { border-color: #1a1c20; }
.method-box.active .radio-custom::after { content: ''; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; background: #1a1c20; border-radius: 50%; }
.method-info { flex: 1; display: flex; flex-direction: column; }
.method-name { font-weight: 600; color: #1a1c20; font-size: 1rem; font-family: 'Kanit', sans-serif; }
.method-desc { font-size: 0.8rem; color: #64748b; font-family: 'Kanit', sans-serif; }
.method-logo { height: 24px; object-fit: contain; } /* ปรับขนาดโลโก้ */

/* Payment Details & Upload */
.payment-action-area { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 25px; }
.qr-wrapper, .truemoney-wrapper { display: flex; align-items: center; gap: 20px; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px dashed #e2e8f0; }
.qr-img { width: 160px; height: 160px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px; }
.qr-text p { margin: 0 0 5px; font-family: 'Kanit', sans-serif; color: #1a1c20; }
.qr-text .text-muted { color: #64748b; font-size: 0.85rem; }
.tm-icon { font-size: 3rem; color: #f59e0b; width: 120px; text-align: center; }
.tm-phone { margin: 5px 0; font-family: 'Rubik', sans-serif; font-size: 1.5rem; color: #1a1c20; display: flex; align-items: center; gap: 10px; }
.btn-copy-small { background: transparent; border: none; color: #94a3b8; cursor: pointer; font-size: 1rem; }
.btn-copy-small:hover { color: #3b82f6; }

.slip-upload-box { display: flex; flex-direction: column; gap: 10px; }
.upload-label { font-size: 0.95rem; font-weight: 600; color: #1a1c20; font-family: 'Kanit', sans-serif; }
.upload-dropzone { position: relative; border: 1px dashed #94a3b8; border-radius: 8px; padding: 25px; text-align: center; background: #f8f9fa; transition: 0.2s; cursor: pointer; color: #64748b; font-family: 'Kanit', sans-serif; font-size: 0.9rem; }
.upload-dropzone:hover { border-color: #1a1c20; background: #f1f5f9; color: #1a1c20; }
.upload-dropzone i { font-size: 1.5rem; display: block; margin-bottom: 8px; }
.upload-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* --- 🛒 โซนขวา (Your Cart) --- */
.summary-card { background: #f1f5f9; border-radius: 12px; padding: 30px; position: sticky; top: 20px; }
.summary-title { font-size: 1.2rem; font-weight: 600; color: #1a1c20; margin: 0 0 20px 0; font-family: 'Rubik', sans-serif; }

.summary-items { display: flex; flex-direction: column; gap: 15px; margin-bottom: 25px; }
.s-item { display: flex; align-items: center; gap: 15px; }
.s-img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; }
.s-info { flex: 1; display: flex; flex-direction: column; }
.s-info h4 { margin: 0; font-size: 0.9rem; font-weight: 600; color: #1a1c20; font-family: 'Kanit', sans-serif; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.s-info span { font-size: 0.75rem; color: #64748b; font-family: 'Kanit', sans-serif; }
.s-price { font-weight: 600; font-size: 0.95rem; color: #1a1c20; font-family: 'Rubik', sans-serif; }

/* Discount Box */
.summary-discount-box { display: flex; align-items: center; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 5px 5px 15px; gap: 10px; margin-bottom: 25px; }
.summary-discount-box i { color: #94a3b8; }
.discount-input { flex: 1; border: none; outline: none; background: transparent; font-family: 'Rubik', sans-serif; font-size: 0.9rem; }
.btn-apply { background: #fff; border: none; font-weight: 600; color: #1a1c20; cursor: pointer; padding: 8px 15px; font-family: 'Rubik', sans-serif; transition: 0.2s; }
.btn-apply:hover { color: #3b82f6; }

/* Totals */
.summary-totals { display: flex; flex-direction: column; gap: 12px; font-family: 'Rubik', sans-serif; font-size: 0.95rem; color: #475569; margin-bottom: 25px; }
.s-row { display: flex; justify-content: space-between; }
.s-divider { height: 1px; background: #cbd5e1; margin: 5px 0; }
.total-row { font-size: 1.2rem; font-weight: 700; color: #1a1c20; margin-top: 5px; }

/* Black Button */
.btn-confirm-order { width: 100%; background: #000000; color: #fff; border: none; padding: 16px; border-radius: 8px; font-weight: 600; font-size: 1rem; font-family: 'Rubik', 'Kanit', sans-serif; cursor: pointer; transition: 0.3s; }
.btn-confirm-order:hover { background: #333333; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }

/* 📱 Responsive */
@media (max-width: 992px) {
    .checkout-layout { grid-template-columns: 1fr; flex-direction: column-reverse; display: flex; }
    .checkout-main-col { width: 100%; }
    .checkout-summary-col { width: 100%; }
    .form-grid { grid-template-columns: 1fr; }
    .qr-wrapper, .truemoney-wrapper { flex-direction: column; text-align: center; }
}

/* 📱 Responsive Mobile */
@media (max-width: 992px) {
    .checkout-layout { grid-template-columns: 1fr; }
    .payment-methods-grid { grid-template-columns: 1fr; }
}

/* =========================================
   🌟 CSS เพิ่มเติมสำหรับ TrueMoney Scan and Pay
========================================= */
.qr-payment-wrapper { display: grid; grid-template-columns: 1fr; gap: 20px; font-family: 'Kanit', sans-serif; }

/* โซนโชว์ QR */
.qr-display-container { display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; padding: 25px; border: 1px dashed #cbd5e1; border-radius: 8px; margin-bottom: 20px; }
.qr-heading { font-size: 1.1rem; font-weight: 600; color: #ea580c; margin: 0 0 15px 0; }
.truemoney-qr-image { width: 160px; height: 160px; border: 1px solid #cbd5e1; border-radius: 8px; padding: 5px; margin-bottom: 10px; }
.account-name { font-weight: 600; color: #1a1c20; margin: 0; font-size: 1rem; }
.account-phone { color: #64748b; font-size: 0.9rem; margin: 3px 0 10px 0; }
.text-danger { color: #ef4444; }
.font-bold { font-weight: 700; }
.large-text { font-size: 1.1rem; }
.text-center { text-align: center; }

/* โซนกรอก ID และคำแนะนำ */
.payment-action-container { border-top: 1px solid #e2e8f0; padding-top: 25px; }
.input-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.input-label { font-size: 0.95rem; font-weight: 600; color: #1a1c20; }
.form-input.text-rubik { font-family: 'Rubik', 'Kanit', sans-serif; } /* ใช้ฟอนต์ Rubik สำหรับตัวเลข */

.instruction-box { background: #f1f5f9; border-radius: 8px; padding: 15px; margin-bottom: 20px; font-size: 0.9rem; }
.instruction-heading { font-size: 1rem; font-weight: 600; color: #475569; margin: 0 0 8px 0; }
.instruction-box ul { margin: 0; padding-left: 20px; color: #64748b; line-height: 1.6; }

/* Responsive สำหรับมือถือ */
@media (max-width: 992px) {
    .qr-display-container { text-align: center; }
}

/* =========================================
   🌟 หน้า ชำระเงินสำเร็จ (Success Page)
========================================= */
.success-wrapper { max-width: 1000px; margin: 0 auto; font-family: 'Kanit', sans-serif; }

/* ส่วนหัว (Header) */
.success-header-box { text-align: center; margin-bottom: 40px; padding: 40px 20px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; }
.success-icon { font-size: 4rem; color: #10b981; margin-bottom: 15px; }
.success-title { font-size: 2rem; font-weight: 700; color: #111827; margin: 0 0 10px 0; }
.success-subtitle { color: #6b7280; font-size: 1rem; margin: 0; }

.success-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }

/* 📦 โซนซ้าย: สินค้าที่ได้รับ */
.delivery-items-list { display: flex; flex-direction: column; gap: 20px; }
.delivery-card { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; }

/* ส่วนข้อมูลเกม */
.d-game-info { display: flex; align-items: center; gap: 15px; padding: 20px; border-bottom: 1px solid #f3f4f6; }
.d-game-img { width: 90px; border-radius: 6px; border: 1px solid #e5e7eb; }
.d-game-details { display: flex; flex-direction: column; gap: 4px; }
.d-platform { font-size: 0.8rem; color: #6b7280; font-family: 'Rubik', sans-serif; }
.d-game-name { font-size: 1.1rem; font-weight: 600; color: #111827; margin: 0; }
.d-type-badge { display: inline-block; background: #f3f4f6; color: #4b5563; padding: 2px 6px; border-radius: 4px; font-size: 0.75rem; font-family: 'Rubik', sans-serif; width: fit-content; border: 1px solid #e5e7eb; }

/* ส่วนรับของ (แจกคีย์/รหัส) */
.d-delivery-zone { padding: 20px; background: #f8fafc; }
.delivery-box { display: flex; flex-direction: column; gap: 10px; }
.delivery-label { font-size: 0.9rem; font-weight: 600; color: #475569; }

/* กลุ่มปุ่ม Copy */
.copy-group { display: flex; align-items: center; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px; overflow: hidden; }
.copy-input { flex: 1; border: none; padding: 12px 15px; font-family: 'Rubik', sans-serif; font-size: 1.1rem; font-weight: 600; color: #0f172a; outline: none; background: transparent; letter-spacing: 1px; }
.btn-copy { background: #f1f5f9; border: none; border-left: 1px solid #cbd5e1; padding: 0 15px; height: 100%; cursor: pointer; color: #475569; font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 0.9rem; transition: 0.2s; display: flex; align-items: center; gap: 5px; }
.btn-copy:hover { background: #e2e8f0; color: #111827; }

/* เฉพาะแบบ Account (มี ID กับ Pass คู่กัน) */
.account-copy-grid { display: flex; flex-direction: column; gap: 10px; }
.acc-label { background: #f1f5f9; padding: 12px 15px; font-size: 0.9rem; font-weight: 600; color: #475569; border-right: 1px solid #cbd5e1; width: 60px; text-align: center; }
.acc-input { font-size: 1rem; letter-spacing: normal; }

/* ลิงก์คู่มือ */
.manual-link { font-size: 0.85rem; color: #3b82f6; text-decoration: none; display: flex; align-items: center; gap: 5px; margin-top: 5px; font-weight: 500; transition: 0.2s; }
.manual-link:hover { color: #2563eb; text-decoration: underline; }

/* 🧾 โซนขวา: สรุปคำสั่งซื้อ */
.order-meta-list { display: flex; flex-direction: column; gap: 12px; font-size: 0.95rem; color: #4b5563; }
.meta-row { display: flex; justify-content: space-between; }
.meta-value { color: #111827; }
.text-success { color: #10b981; font-weight: 600; }

/* ปุ่ม */
.btn-black-solid { display: block; text-align: center; background: #000000; color: #ffffff; text-decoration: none; padding: 14px; border-radius: 8px; font-weight: 600; transition: 0.3s; }
.btn-black-solid:hover { background: #333333; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.btn-outline { display: block; text-align: center; background: transparent; color: #111827; text-decoration: none; padding: 12px; border: 1px solid #d1d5db; border-radius: 8px; font-weight: 500; transition: 0.3s; }
.btn-outline:hover { border-color: #111827; background: #f3f4f6; }

/* 📱 Responsive Mobile */
@media (max-width: 992px) {
    .success-layout { grid-template-columns: 1fr; display: flex; flex-direction: column; }
    .success-summary-col { width: 100%; order: -1; margin-bottom: 20px; }
}

/* =========================================
   🌟 โซน เป็นหน้า keypark gift (3D Slider แบบคลิป Lun Dev)
========================================= */
.gift-hero-section {
    width: 100%;
    height: 500px;
    background-color: #0b1a2a; /* พื้นหลังสีเข้มเพื่อขับให้โมเดล 3D โดดเด่น */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.gift-slider {
    position: absolute;
    margin-top: -60px; /* 🌟 อัปเดต: ดึงจุดศูนย์กลางแกนหมุนขึ้น 60px ชดเชยมิติ 3D ที่ตกขอบล่างให้อยู่กึ่งกลางพอดี */
    width: 170px; 
    height: 240px; 
    /* หัวใจสำคัญของ 3D จากคลิป */
    transform-style: preserve-3d;
    transform: perspective(1000px);
    animation: autoRun 24s linear infinite;
    z-index: 2;
}

/* จัดเรียงรูปภาพแต่ละใบให้เป็นวงกลมในแกน Z */
.gift-slider .item {
    position: absolute;
    inset: 0 0 0 0;
    /* ลดระยะ translateZ ลงให้สมดุลกับขนาดภาพที่เล็กลง */
    transform: rotateY(calc((var(--position) - 1) * (360deg / var(--quantity)))) translateZ(300px);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
}

.gift-slider .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* อนิเมชันหมุนรอบตัวเอง */
@keyframes autoRun {
    from {
        transform: perspective(1000px) rotateX(-12deg) rotateY(0deg);
    }
    to {
        transform: perspective(1000px) rotateX(-12deg) rotateY(360deg);
    }
}


/* =========================================
   🌟 โครงสร้างหลัก (Minimalist แบบหน้า Checkout)
========================================= */
.gift-main-container {
    max-width: 1100px;
    margin: 30px auto 80px auto; /* ดันกล่องลงมาอยู่ใต้แบนเนอร์ ไม่ให้ทับภาพ */
    position: relative;
    z-index: 10;
    padding: 0 20px;
}

/* 🎫 แถบกรอกโค้ด */
.compact-redeem-bar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    margin-bottom: 30px;
    flex-wrap: wrap;
    gap: 15px;
}

.redeem-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
}

.redeem-text i {
    color: #3b82f6;
    margin-right: 8px;
}

.redeem-input-group {
    display: flex;
    gap: 10px;
    flex: 1;
    max-width: 400px;
}

.redeem-compact-input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-family: 'Kanit', sans-serif;
    font-size: 1rem;
    outline: none;
    color: #111827;
}

/* ปุ่มมินิมอลสีดำ */
.btn-redeem-small, .btn-blue-glossy {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 600;
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
    transition: 0.3s;
}
.btn-redeem-small:hover, .btn-blue-glossy:hover {
    background: #333333;
    transform: translateY(-2px);
}


/* 🎁 โซนแคมเปญรายเดือน */
.monthly-campaign-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 30px;
}

/* กล่องไฮไลท์รางวัล */
.reward-highlight-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 35px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.reward-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #ef4444;
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.reward-main-img {
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    margin: 15px 0 25px 0;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border: 1px solid #f3f4f6;
}

.reward-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
}

.reward-desc {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 25px;
}

/* นาฬิกานับถอยหลัง */
.countdown-wrapper {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.countdown-title {
    font-size: 1rem;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 12px;
}

.countdown-timer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.time-box {
    display: flex;
    flex-direction: column;
    background: #111827; /* กล่องเวลาสีดำ */
    color: white;
    padding: 12px;
    border-radius: 8px;
    min-width: 65px;
}

.time-box span {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Rubik', sans-serif;
}

.time-box small {
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

.time-colon {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111827;
}

/* ส่วนเข้าร่วม */
.participate-action {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.participate-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.stat-badge {
    background: #f3f4f6;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
    color: #4b5563;
    border: 1px solid #e5e7eb;
}

.stat-badge strong {
    color: #111827;
}

.btn-participate {
    background: #10b981; /* สีเขียวเด่นๆ สำหรับปุ่มเข้าร่วม */
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
}
.btn-participate:hover { background: #059669; }


/* 📜 กติกาและประวัติ */
.campaign-rules-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 35px;
}

.campaign-rules-card h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 25px;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 15px;
}

.rules-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.rules-list li {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.rule-icon {
    background: #f1f5f9;
    color: #111827;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.2rem;
    border: 1px solid #e5e7eb;
}

.rule-text {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
    padding-top: 5px;
}

.rule-text strong {
    color: #111827;
}

/* ผู้โชคดี */
.previous-winner-box {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 25px;
}

.previous-winner-box h4 {
    margin: 0 0 15px 0;
    color: #111827;
    font-size: 1.1rem;
}

.winner-profile {
    display: flex;
    align-items: center;
    gap: 15px;
}

.winner-profile img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid #e5e7eb;
}

.winner-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.winner-info strong {
    color: #111827;
    font-size: 1.05rem;
}

.winner-info span {
    color: #6b7280;
    font-size: 0.9rem;
}

/* =========================================
   🌟 Modal (Pop-up)
========================================= */
.reward-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 24, 39, 0.7); /* พื้นหลังดำโปร่งแสง */
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: 0.3s;
}

.reward-popup-overlay.active {
    opacity: 1;
}

.reward-popup-content {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    width: 90%;
    max-width: 420px;
    text-align: center;
    position: relative;
    transform: scale(0.9);
    transition: 0.3s;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.reward-popup-overlay.active .reward-popup-content {
    transform: scale(1);
}

.popup-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #9ca3af;
    cursor: pointer;
    transition: 0.2s;
}

.popup-close-btn:hover {
    color: #ef4444;
}

.popup-header h2 {
    margin-bottom: 10px;
    font-family: 'Kanit', sans-serif;
}

/* =========================================
   🌟 6. Social Proof (แจ้งเตือนการสั่งซื้อเรียลไทม์) - อัปเดตสีขาว มุมซ้ายล่าง
========================================= */
.social-proof-container { position: fixed; bottom: 30px; left: 30px; z-index: 9998; display: flex; flex-direction: column-reverse; gap: 15px; pointer-events: none; }

.sp-notification { background: #ffffff; border: 1px solid #e2e8f0; border-left: 4px solid #10b981; border-radius: 8px; padding: 12px 15px; display: flex; align-items: center; gap: 15px; width: fit-content; max-width: 280px; box-shadow: 0 10px 25px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255, 255, 255, 0.8); pointer-events: auto; opacity: 0; transform: translateX(-50px) scale(0.95); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.sp-notification.show { opacity: 1; transform: translateX(0) scale(1); }
.sp-notification.hide { opacity: 0; transform: translateY(20px) scale(0.9); pointer-events: none; }

.sp-img-box { width: 50px; height: 50px; border-radius: 6px; overflow: hidden; flex-shrink: 0; border: 1px solid #cbd5e1; position: relative; }
.sp-img-box img { width: 100%; height: 100%; object-fit: cover; }
.sp-check-icon { position: absolute; bottom: -2px; right: -2px; background: #10b981; color: #fff; width: 16px; height: 16px; border-radius: 50%; font-size: 0.55rem; display: flex; justify-content: center; align-items: center; border: 2px solid #ffffff; }

.sp-info { display: flex; flex-direction: column; font-family: 'Kanit', sans-serif; color: #1a1c20; line-height: 1.4; overflow: hidden; }
.sp-user-text { font-size: 0.85rem; color: #64748b; }
.sp-user-text strong { color: #1a1c20; }
.sp-game-name { font-size: 0.95rem; font-weight: 600; color: #3b82f6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-time { font-size: 0.75rem; color: #9ca3af; font-family: 'Rubik', sans-serif; }

/* 🌟 Mobile Responsive: Social Proof */
    .social-proof-container { bottom: 10px; top: auto; left: 10px; transform: none; width: auto; max-width: calc(100% - 20px); }
    .sp-notification { width: fit-content; max-width: 280px; transform: translateX(-20px) scale(0.95); }
    .sp-notification.show { transform: translateX(0) scale(1); }

/* 📱 Responsive Mobile */
@media (max-width: 992px) {
    .monthly-campaign-grid {
        grid-template-columns: 1fr;
    }
    .compact-redeem-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .redeem-input-group {
        max-width: 100%;
    }
    .gift-slider {
        margin-top: -30px; /* ลดระยะที่ดึงขึ้นสำหรับมือถือให้พอดี */
        width: 130px; 
        height: 180px;
    }
    .gift-slider .item {
        transform: rotateY(calc((var(--position) - 1) * (360deg / var(--quantity)))) translateZ(200px);
    }
}

/* =========================================================
   📱 โหมด Mobile Responsive (สำหรับมือถือและแท็บเล็ต) 
   (โค้ดส่วนนี้ต้องอยู่ล่างสุดของไฟล์เสมอ ห้ามลบโครงสร้างหน้าแรก)
========================================================= */

@media (max-width: 992px) {
    /* 🌟 1. กู้คืนหน้าแรก & โซนทั่วไปให้กลับมาปกติ */
    .game-grid, .bundle-grid, .news-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px; }
    .promo-section, .dual-list-section, .coupon-section { grid-template-columns: 1fr; }
    
    /* 🛠️ ฟุตเตอร์บนแท็บเล็ต (แบ่ง 2 คอลัมน์) */
    .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px; }
    
    .banner-slider { height: 350px; }
    .slide { width: 85vw; }
    .explore-gallery-wrapper { grid-template-columns: 1fr; }
    .eg-sidebar { flex-direction: row; overflow-x: auto; padding-bottom: 10px; }
    .eg-thumb { flex: 0 0 200px; height: 120px; }
    .room-info-overlay p { max-width: 100%; }

    /* 🌟 2. หน้า Rewards (Skill Tree) */
    .rw-hero-section { padding: 80px 0 20px; }
    .rw-profile-bar { flex-direction: column; gap: 20px; padding: 60px 20px 20px; min-height: auto; }
    .profile-center { top: -60px; bottom: auto; }
    .stat-group { width: 100%; justify-content: center !important; padding: 0 !important; }
    .rw-skill-tree-container { padding: 40px 20px; flex-direction: column;}
    .rw-reward-nodes-container { flex-direction: column; width: auto; flex: 1; align-items: flex-start; height: 300px;}
    .rw-node { width: 100%; flex-direction: row; gap: 15px; }
    .rw-claim-all-rewards-container { order: 2; width: 100%;}
    
    /* 🌟 3. หน้า Keypark Gift */
    .gift-hero-section { height: 400px; }
    .gift-slider { width: 120px; height: 180px; top: calc(50% - 130px); left: calc(50% - 60px); }
    .gift-slider .item { transform: rotateY(calc((var(--position) - 1) * (360deg / var(--quantity)))) translateZ(220px); }
    .monthly-campaign-grid { grid-template-columns: 1fr; }

    /* 🌟 4. หน้า คลังแสง & ประวัติสั่งซื้อ (Sidebar Dashboard) */
    .inv-dashboard-wrapper { flex-direction: column; }
    .dash-sidebar { width: 100%; position: static; padding: 20px; }
    .dash-nav { flex-direction: row; overflow-x: auto; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; }
    .dash-nav-link { white-space: nowrap; font-size: 14px; padding: 10px; }
    .dash-nav-divider { display: none; }
    
    .order-card-body { flex-direction: column; gap: 10px; }
    .order-img { width: 100%; height: 150px; }
    .order-card-footer { flex-direction: column; align-items: flex-start; gap: 15px; }
    .key-secret-box-compact { width: 100%; justify-content: space-between; }
    
    /* หน้ารวมสินค้า (Catalog Mobile) */
    .catalog-layout { grid-template-columns: 1fr; }
    .catalog-sidebar { display: none; }
    .catalog-top-bar { flex-direction: column; align-items: flex-start; }
    
    /* หน้าตะกร้าสินค้า (Cart Mobile) */
    .cart-layout { grid-template-columns: 1fr; gap: 20px; }
    .cart-item-card { flex-direction: column; align-items: flex-start; }
    .ci-image { width: 100%; }
    .ci-price-zone { width: 100%; text-align: left; flex-direction: row; align-items: center; gap: 10px; }
    .ci-actions { position: absolute; top: 15px; right: 15px; }

    /* 🌟 อัปเดต: ปรับ Mega Menu ให้เรียงเป็นแนวตั้งบนแท็บเล็ต */
    .mega-menu-inner { flex-direction: column; max-height: 80vh; overflow-y: auto; }
    .mega-col-1, .mega-col-2 { width: 100%; border-right: none; border-bottom: 1px solid #eaeaea; }
    .mega-col-3 { width: 100%; padding: 20px; }
}

@media (max-width: 768px) {
    /* หน้าจอเล็กพิเศษ (มือถือแนวตั้ง) */
    .game-grid, .bundle-grid, .news-grid { grid-template-columns: 1fr !important; }
    
    /* 🛠️ อัปเดต: แก้ไข Top Bar ให้เป็นระเบียบ */
    .top-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 12px 15px; }
    .logo { font-size: 1.3rem; order: 1; flex: auto; }
    .user-actions { order: 2; display: flex; gap: 15px; align-items: center; }
    .search-box { order: 3; width: 100%; margin-top: 15px; flex-basis: 100%; }
    
    /* ซ่อนข้อความ เหลือแต่ไอคอนในมือถือ */
    .keypark-gift span, .user-profile-btn span { display: none; }
    .user-profile-btn { padding: 5px; background: transparent; border: none; }
    .user-profile-btn i.fa-chevron-down { display: none; }
    .user-profile-btn i.fa-user-circle { margin: 0; font-size: 1.8rem; color: #fff; }

    /* 🛠️ อัปเดต: แก้ไข Nav Bar (เมนูแนวนอน) ให้เลื่อนซ้ายขวาได้ ไม่พัง */
    .nav-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 10px 15px; scrollbar-width: none; }
    .nav-bar::-webkit-scrollbar { display: none; }
    .nav-bar a { white-space: nowrap; font-size: 0.9rem; padding: 5px 10px; }

    /* 🛠️ อัปเดต: แก้ไข Footer เรียง 1 คอลัมน์บนมือถือ */
    .footer-inner { grid-template-columns: 1fr !important; gap: 30px; text-align: center; }
    .footer-col h3::after { left: 50%; transform: translateX(-50%); } 
    .social-links { justify-content: center; }

    /* 🌟 อัปเดต: ปรับเมนูโปรไฟล์ไม่ให้ตกขอบจอมือถือ */
    .user-dropdown-menu { right: -20px; width: 220px; }
    .user-dropdown-menu::before { right: 35px; }
    
    /* บังคับให้มือถือกดแสดงเมนูโปรไฟล์ได้ */
    .user-dropdown-wrap.active-mobile .user-dropdown-menu { display: flex; }

    /* ปรับตะกร้าสินค้าให้ลอยอยู่ตรงกลาง ไม่โดนตัดขอบ */
    .cart-dropdown-menu { position: fixed; top: 130px; right: 10px; left: 10px; width: auto; max-height: 70vh; }
    .cart-dropdown-menu::before { display: none; }
    
    /* ปรับขนาดคอลัมน์เมนูย่อยของ Mega Menu */
    .mega-l3-grid { grid-template-columns: 1fr; }
}