/* =====================================================================
   Razex – Master Theme, Responsive & Future Cursor
   รวมทุกไฟล์ (Theme, Merged, Responsive) ไว้ในที่เดียว
   ===================================================================== */

/* =========================================
   1. Theme Polish & Base Tokens
   ========================================= */
:root {
    --rz-radius-lg: 22px;
    --rz-radius-md: 16px;
    --rz-radius-sm: 12px;
    --rz-shadow-sm: 0 4px 14px -6px rgba(15, 23, 42, .16);
    --rz-shadow-md: 0 14px 34px -14px rgba(15, 23, 42, .22);
    --rz-shadow-lg: 0 28px 60px -22px rgba(15, 23, 42, .35);
    --rz-surface: rgba(255, 255, 255, .92);
    --rz-border: rgba(15, 23, 42, .08);
    --rz-ease: cubic-bezier(.22, .61, .36, 1);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: 'Kanit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--main);
    color: #fff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--main-opa-50);
    outline-offset: 2px;
}

/* =========================================
   2. Navbar (Glass pill)
   ========================================= */
#MainNav {
    transform: none !important;
    animation: none !important;
    background: rgba(255, 255, 255, .86) !important;
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, .75) !important;
    border-radius: 999px !important;
    box-shadow: var(--rz-shadow-md) !important;
    width: min(1200px, 94%) !important;
    padding: 6px 14px !important;
    z-index: 1030;
}

#MainNav.scrolled {
    box-shadow: var(--rz-shadow-lg) !important;
}

#MainNav a,
#MainNav button,
#MainNav ul,
#MainNav img,
#MainNav .logo {
    animation: none !important;
    opacity: 1 !important;
}

#MainNav .navbar-brand img,
#MainNav .logo {
    max-height: 46px;
    width: auto;
    transition: transform .3s var(--rz-ease);
}

#MainNav .navbar-brand:hover img {
    transform: scale(1.06);
}

#MainNav .nav-link {
    white-space: nowrap;
    border-radius: 999px !important;
    padding: .45rem .95rem !important;
    font-weight: 500;
    color: #111827 !important;
    transition: background .25s var(--rz-ease), color .25s var(--rz-ease), box-shadow .25s var(--rz-ease);
}

#MainNav .nav-link:hover,
#MainNav .nav-link:focus-visible {
    background: var(--main-opa-25) !important;
    color: var(--main) !important;
}

#MainNav .nav-link.active {
    background: var(--main-opa-25) !important;
    color: var(--main) !important;
    box-shadow: inset 0 0 0 1.5px var(--main-opa-50);
}

#MainNav .nav-link.active i {
    color: var(--main) !important;
}

#MainNav .navbar-toggler {
    border: 1px solid var(--rz-border);
    border-radius: 12px;
    padding: .35rem .6rem;
}

#MainNav .dropdown-menu {
    border-radius: var(--rz-radius-md) !important;
    box-shadow: var(--rz-shadow-lg);
    border: 1px solid var(--rz-border) !important;
    padding: 10px !important;
    animation: rzDropIn .25s var(--rz-ease);
}

#MainNav .dropdown-item {
    border-radius: 10px;
    padding: .55rem .8rem;
    transition: background .2s;
}

#MainNav .dropdown-item:hover,
#MainNav .dropdown-item:focus {
    background: var(--main-opa-25);
}

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

/* =========================================
   3. Components (Cards, Buttons, Forms)
   ========================================= */
.card-product {
    border-radius: var(--rz-radius-lg) !important;
    overflow: hidden;
    background: var(--rz-surface) !important;
    border: 1px solid var(--rz-border);
    box-shadow: var(--rz-shadow-sm);
    transition: transform .4s var(--rz-ease), box-shadow .4s var(--rz-ease);
}

.card-product:hover {
    transform: translateY(-6px);
    box-shadow: var(--rz-shadow-md);
}

.card-product .product-img img {
    transition: transform .6s var(--rz-ease);
}

.card-product:hover .product-img img {
    transform: scale(1.05);
}

.card-product h5 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
    font-weight: 600;
    line-height: 1.3;
}

.card-product .btn-buy {
    border-radius: 999px !important;
    font-weight: 500;
    transition: transform .25s var(--rz-ease), box-shadow .25s var(--rz-ease);
}

.card-product:hover .btn-buy {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px -12px var(--main);
}

.btn {
    border-radius: var(--rz-radius-sm);
    font-weight: 500;
    touch-action: manipulation;
    transition: transform .2s var(--rz-ease), box-shadow .2s var(--rz-ease), background-color .2s, color .2s, border-color .2s;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--rz-shadow-sm);
}

.btn:active:not(:disabled) {
    transform: translateY(0);
}

.btn:disabled, .btn.disabled {
    opacity: .6;
    cursor: not-allowed;
}

.form-control, .form-select {
    border-radius: var(--rz-radius-sm);
    border: 1px solid rgba(15, 23, 42, .14);
    padding: .6rem .9rem;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--main);
    box-shadow: 0 0 0 .22rem var(--main-opa-25);
}

.form-label {
    font-weight: 500;
    margin-bottom: .35rem;
}

.modal-content {
    border: none !important;
    border-radius: var(--rz-radius-lg) !important;
    box-shadow: var(--rz-shadow-lg);
    overflow: hidden;
}

.modal-header { border-bottom: 1px solid var(--rz-border); }
.modal-footer { border-top: 1px solid var(--rz-border); }
.dropdown-menu { border-radius: var(--rz-radius-md); box-shadow: var(--rz-shadow-md); }

.table { --bs-table-bg: transparent; }
.table > :not(caption) > * > * { padding: .75rem .9rem; border-bottom-color: var(--rz-border); }
.table thead th { font-weight: 600; background: var(--main-opa-25); color: #111827; white-space: nowrap; }
.table-responsive { border-radius: var(--rz-radius-md); }

.card { border-radius: var(--rz-radius-md); border: 1px solid var(--rz-border); box-shadow: var(--rz-shadow-sm); }
.alert { border: none; border-radius: var(--rz-radius-md); box-shadow: var(--rz-shadow-sm); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--main-opa-50); }
::-webkit-scrollbar-thumb:hover { background: var(--main); }

/* =========================================
   4. Merged Extras (Heehub)
   ========================================= */
.hh-section { max-width: 1200px; margin: 28px auto; padding: 0 16px; }
.hh-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.hh-head h2 { margin: 0; font-size: 1.6rem; }
.hh-head h6 { margin: 0; opacity: .6; font-weight: 500; }

.hh-card {
    display: block; height: 100%; text-decoration: none; color: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
    border: 1px solid rgba(255,255,255,.08); border-radius: 16px; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.hh-card:hover { transform: translateY(-4px); border-color: var(--main, #39c3fe); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.hh-thumb { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(0,0,0,.25); }
.hh-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hh-body { padding: 12px 14px 14px; }
.hh-name { font-weight: 600; line-height: 1.3; margin-bottom: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.hh-price { color: var(--main, #39c3fe); font-weight: 700; }

.hh-qa { display: grid; gap: 10px; }
.hh-qa-item { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 0 16px; }
.hh-qa-item summary { cursor: pointer; font-weight: 600; padding: 14px 0; list-style: none; position: relative; padding-right: 28px; }
.hh-qa-item summary::-webkit-details-marker { display: none; }
.hh-qa-item summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 1.3rem; color: var(--main, #39c3fe); transition: transform .2s; }
.hh-qa-item[open] summary::after { transform: rotate(45deg); }
.hh-qa-a { padding: 0 0 14px; opacity: .85; line-height: 1.7; }

.promo-card { background: linear-gradient(135deg, rgba(var(--main-rgb),.15), rgba(0,123,255,.05)); border: 1px dashed var(--main, #39c3fe); border-radius: 14px; padding: 14px 16px; }
.promo-card-title { font-weight: 700; }
.promo-card-sub { font-size: .9rem; opacity: .75; margin-top: 2px; }

/* =========================================
   5. BGM Button
   ========================================= */
.rz-bgm-btn {
    position: fixed; left: 16px; bottom: 16px; z-index: 9999;
    width: 46px; height: 46px; border-radius: 50%;
    border: 1px solid var(--main-opa-50, rgba(57, 195, 254, .5));
    background: var(--main, #39c3fe); color: #fff; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--rz-shadow-md, 0 14px 34px -14px rgba(15, 23, 42, .22));
    transition: transform .2s;
}
.rz-bgm-btn:hover { transform: scale(1.08); }

/* =========================================
   6. Responsive Layer
   ========================================= */
*, *::before, *::after { box-sizing: border-box; }
img, video, iframe, canvas, svg { max-width: 100%; height: auto; }
input, select, textarea, button { font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 991.98px) {
    #MainNav { width: 94% !important; border-radius: var(--rz-radius-lg) !important; padding: 8px 12px !important; }
    #MainNav .navbar-collapse { padding-top: 10px; }
    #MainNav .nav-link { font-size: 1rem; }
    body { background-attachment: scroll !important; }
    .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
    .table-responsive { -webkit-overflow-scrolling: touch; }
    .modal-dialog { margin: 0.75rem; }
}

@media (max-width: 767.98px) {
    body { font-size: 15px; overflow-x: hidden; }
    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.2rem; }
    h4 { font-size: 1.1rem; }

    .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
    .btn-sm { min-height: 36px; }
    .btn.w-100 { width: 100% !important; }
    .modal-footer { flex-wrap: wrap; gap: 8px; }
    .modal-footer > .btn { flex: 1 1 auto; }
    .swal2-popup { width: 92vw !important; max-width: 420px; padding: 1.2em !important; }
    .form-control, .form-select { min-height: 44px; }
    .wheel-wrapper { max-width: 100%; }
    canvas#wheelCanvas { width: min(86vw, 400px) !important; height: auto !important; }
    
    .ft2-main { grid-template-columns: 1fr 1fr !important; padding: 32px 20px !important; gap: 28px !important; }
    .ft2-logo-wrap { width: 120px !important; height: 120px !important; }
    .ft2-bottom { padding: 20px 16px !important; }
    .ft2-ticker-item { font-size: 11px !important; }
    .ft2-main > div:first-child { grid-column: 1 / -1; }
    
    .bg-light.p-5 { padding: 1.5rem !important; }
    .bg-light.p-4 { padding: 1rem !important; }

    /* Admin */
    .admin-sidebar { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; }
    .admin-sidebar::-webkit-scrollbar { display: none; }
    .admin-sidebar a { flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center; }
    .admin-sidebar .sidebar-divider { display: none; }
    .admin-panel-header { flex-wrap: wrap; gap: 8px; }
    .admin-panel-header h4 { font-size: 1rem; }
    .admin-panel-body { padding: 12px !important; }
    .admin-table { font-size: 13px; }
    .admin-table td, .admin-table th { white-space: nowrap; }
    .stat-card .stat-num { font-size: 20px; }
    .stat-card .stat-label { font-size: 11px; }
    .rev-chart { height: 150px; gap: 4px; padding: 8px; }
    .rev-val { font-size: 9px; }
    .rev-day { font-size: 10px; }
    .adm-search { max-width: 100%; }
    .admin-topbar, .admin-header { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 479.98px) {
    .ft2-main { grid-template-columns: 1fr !important; }
    .ft2-brand-name { font-size: 24px !important; }
    .bg-light.p-5 { padding: 1.1rem !important; }
}

/* =========================================
   7. [FIXED] Future Cursor Arrow
   บังคับใช้ 100% ทุกจุด ไม่หลุดทุกหน้า
   ========================================= */
*, 
*::before, 
*::after,
html, 
body,
a, a *, 
button, button *, 
input, 
textarea, 
select, 
option,
label,
summary,
[role="button"],
[type="file"],
.btn, 
.nav-link, 
.dropdown-item,
.swal2-container *,
.swal2-container button,
.swal2-container input {
    cursor: url('https://cdn.cursors-4u.net/previews/normal-9e607e2c-64.webp') 28 24, auto !important;
}

/* บังคับตอน Hover, Focus, Active (ป้องกันการหลุดตอนเมาส์ชี้หรือคลิก) */
*:hover, *:focus, *:active,
a:hover, a:focus, a:active,
button:hover, button:focus, button:active,
input:hover, input:focus, input:active,
textarea:hover, textarea:focus, textarea:active {
    cursor: url('https://cdn.cursors-4u.net/previews/normal-9e607e2c-64.webp') 28 24, auto !important;
}