/* --- Google Fonts --- */
@import url(https://fonts.googleapis.com/css?family=Sarabun&display=swap);

/* --- Base --- */
:root {
    --sp-bg:#27292e;
    --sp-panel:#1e1e1e;
    --sp-card:#343a40;
    --sp-text:#ffffff;
    --sp-muted:#b9b9b9;
    --sp-accent:#7aa2ff;
    --sp-accent-2:#6ee7b7;
    --sp-shadow: 0 6px 20px rgba(0,0,0,0.35);
    --sp-shadow-hover: 0 10px 26px rgba(0,0,0,.45);
}

html, body {
    background: var(--sp-bg) !important;
    color: var(--sp-text);
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: Roboto, sans-serif;
    background-repeat: no-repeat;
    background-size: cover;
    overflow-x: hidden;
}
body { overflow-y: auto !important; }

/* --- Wrapper prevents leakage from third-party CSS --- */
.sp-wrap {
    background: var(--sp-bg) !important;
    color: var(--sp-text);
    min-height: 100vh;
}

/* --- Panels, shadows, elevation --- */
.sp-panel { background: var(--sp-panel); border-radius: 14px; }
.sp-shadow { box-shadow: var(--sp-shadow); }
.sp-elevate { transition: transform .12s ease, box-shadow .12s ease; }
.sp-elevate:hover { transform: translateY(-2px); box-shadow: var(--sp-shadow-hover); }

/* --- Tabs (Bootstrap override) --- */
.sp-tabs .nav-link{
    color: var(--sp-text) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    margin: 0 .25rem !important;
    background: transparent !important;
}
.sp-tabs .nav-link.active{
    border-bottom-color: var(--sp-accent) !important;
    font-weight: 600;
}

/* --- Product cards --- */
.sp-card { width: 200px; height: 200px; background: var(--sp-card); border-radius: 16px; overflow: hidden; }
.sp-card img{ width: 100%; height: 150px; object-fit: cover; display: block; }
.sp-name { font-size:.95rem; line-height:1.2; }
.sp-meta { font-size:.8rem; color: var(--sp-muted); }
.sp-title { font-weight:700; letter-spacing:.2px; }

/* --- Chips, scrollers, links, buttons --- */
.sp-chip {
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.25rem .6rem; border-radius:999px;
    background: rgba(122,162,255,.12); color:#dfe6ff; font-size:.8rem;
}
.sp-scroll {
    display:flex; gap:.75rem; overflow-x:auto;
    scrollbar-width:thin; padding-bottom:.25rem;
    overscroll-behavior-x: contain;
}
.sp-scroll::-webkit-scrollbar { height:8px; }
.sp-scroll::-webkit-scrollbar-thumb { background: #404040; border-radius:999px; }
.sp-link { text-decoration: none; color: inherit; }

.sp-btn-accent{
    background: linear-gradient(135deg,var(--sp-accent),var(--sp-accent-2));
    border:none; color:#0b0b0b; font-weight:700;
}
.sp-btn-accent:hover{ opacity:.92; }

.sp-card-min { width:180px; height:180px; background: var(--sp-card); border-radius:16px; }
.sp-iframe { border:0; width:100%; max-width: 1000px; height:350px; }
.sp-muted { color: var(--sp-muted); }
.sp-badge {
    position:absolute; top:.5rem; left:.5rem;
    background:rgba(0,0,0,.55); backdrop-filter: blur(6px);
    padding:.2rem .5rem; border-radius:999px; font-size:.8rem; color:#fff;
}

/* --- Force third-party components to stay dark --- */
.bg-light, .card, .modal-content, .dropdown-menu {
    background-color: var(--sp-panel) !important;
    color: var(--sp-text) !important;
}
.table, .list-group-item { background-color: var(--sp-card) !important; color: var(--sp-text) !important; }
a, .btn-link { color: #cfe1ff; }
a:hover, .btn-link:hover { color: #e7efff; }
.btn-close.btn-close-white { filter: invert(1); }
.modal-backdrop { z-index: 1040 !important; }
.modal { z-index: 1050 !important; }

/* --- Existing main.css styles merged --- */
@media only screen and (min-width: 601px) { .navbarone { display: none; } }
@media only screen and (max-width: 600px) { .navbartwo { display: none; } }

.card-title, h1, h2, h3, h4, h5, h6 { font-family: Sarabun, sans-serif; }

.zoom-image { transition: transform 0.3s; }
.zoom-image:hover { transform: scale(1.05); }

/* Category list styles */
.home-category-list { min-height: 18.875rem; margin-top: 1.25rem; background-color: #fff }
.home-category-list__category-grid {
  border: 1px solid rgba(0,0,0,.05);
  text-align: center;
  background-color: #fff;
  display: block;
  transition: transform .1s,box-shadow .1s;
}
.home-category-list__category-grid:hover { border-color: rgba(0,0,0,.12); box-shadow: 0 0 .8125rem 0 rgba(0,0,0,.05); }
.home-category-list__category-grid:before { content: ""; display: block; padding-top: 126% }

/* Navbar */
.navbar { border: 0; border-radius: 3px; padding: 0.625rem 0; margin-bottom: 20px; }
.navbar .bg-dark { box-shadow: 0 4px 20px rgba(0,0,0,0.14), 0 7px 12px -5px rgba(33, 33, 33, 0.46); }

/* Dropdown rotation */
.dropdown-rot .rotate-icon { transition: transform 0.3s ease; }
.dropdown-rot.show .rotate-icon { transform: rotate(180deg); }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Footer */
.footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  position: fixed;
  left: 0; bottom: 0;
  width: 101%;
}

/* Login form */
.login-container { background:#fff; border-radius:5px; padding:20px; box-shadow:0 0 10px rgba(0,0,0,.1); max-width:400px; width:100%; }
.login-form { display:flex; flex-direction:column; }
.login-form input { margin-bottom:15px; padding:10px; border:1px solid #ccc; border-radius:5px; font-size:16px; }
.login-form button { padding:10px 20px; background:#007bff; color:#fff; border:none; border-radius:5px; font-size:16px; cursor:pointer; }
.login-form button:hover { background:#0056b3; }

/* Forms underline style */
.txt_field { position: relative; border-bottom: 2px solid #adadad; margin: 30px 0; }
.txt_field input { width:100%; height:40px; border:none; background:none; outline:none; }
.txt_field label { position:absolute; top:50%; left:5px; color:#adadad; transform:translateY(-50%); font-size:16px; pointer-events:none; }
.txt_field span::before { content:''; position:absolute; top:40px; left:0; width:0; height:2px; background:#2691d9; transition:.5s; }
.txt_field input:focus ~ label,
.txt_field input:valid ~ label { top:-5px; color:#2691d9; }
.txt_field input:focus ~ span::before,
.txt_field input:valid ~ span::before { width:100%; }

/* Product cards generic */
.product-card { border:1px solid #dee2e6; border-radius:5px; margin-bottom:20px; padding:20px; background:#fff; box-shadow:0 0 10px rgba(0,0,0,0.1); }
.product-card img { max-width:100%; border-radius:5px; }
.product-info h2 { font-size:24px; margin-bottom:20px; }
.product-info p { font-size:16px; margin-bottom:10px; }

/* Scrollbar styling */
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background:#2c2c2c; }
::-webkit-scrollbar-thumb { background:#5a5a5a; border-radius:10px; border:3px solid #2c2c2c; }
::-webkit-scrollbar-thumb:hover { background:#8a8a8a; }
* { scrollbar-width: thin; scrollbar-color:#5a5a5a #2c2c2c; }

/* Responsive DataTable Wrapper */
.table-responsive-dark {
    background-color: var(--sp-panel, #1e1e1e);
    color: var(--sp-text, #fff);
    border-radius: 10px;
    overflow: hidden;
    padding: 0.5rem;
    box-shadow: var(--sp-shadow, 0 6px 20px rgba(0,0,0,0.35));
}

.table-responsive-dark table.dataTable {
    width: 100% !important;
    border-collapse: collapse !important;
}

.table-responsive-dark table.dataTable thead {
    background-color: var(--sp-card, #343a40);
    color: var(--sp-text, #fff);
    font-weight: 600;
}

.table-responsive-dark table.dataTable th,
.table-responsive-dark table.dataTable td {
    padding: 0.75rem;
    border-color: rgba(255,255,255,0.1);
}

.table-responsive-dark table.dataTable tbody tr:hover {
    background-color: rgba(255,255,255,0.05);
}

/* Responsive row details */
.table-responsive-dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.table-responsive-dark table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-color: var(--sp-accent, #7aa2ff);
    border: none;
    color: #000;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: none;
}