:root {--primary-color: #6C3DD3;--primary-rgb: 108,61,211;--header-bg: #FFFFFF;--header-text: #1A1A2E;--footer-bg: #0F172A;--footer-text: #CBD5E1;--surface-bg : #F8F9FC;--nav-bg : #1A1A2E;--nav-text : #FFFFFF;--clr-warn : #F9761F;--clr-success: #25D366;--clr-error: #E53E3E;--clr-gray-50: #F8F9FC;--clr-gray-100 : #EDEFEF;--clr-gray-200 : #E2E8F0;--clr-gray-300 : #CBD5E1;--clr-gray-500 : #64748B;--clr-gray-700 : #334155;--clr-gray-900 : #0F172A;--clr-white: #FFFFFF;--font-heading : 'Plus Jakarta Sans', sans-serif;--font-body: 'Inter', sans-serif;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-pill: 9999px;--shadow-flat: none;--shadow-card: 0px 1px 2px rgba(0,0,0,0.08);--shadow-hover : 0px 4px 6px rgba(0,0,0,0.12);--shadow-sticky: 0px 8px 24px rgba(0,0,0,0.10);--input-h: 40px;--input-radius : 12px;--input-border : 1px solid var(--clr-gray-100);}html {overflow-x: hidden;width: 100%;}body {overflow-x: hidden;width: 100%;position: relative;}*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }html { scroll-behavior: smooth; font-size: 17px; }body {font-family: var(--font-body);font-size: 1.05rem;font-weight: 400;color: var(--clr-gray-700);background: var(--clr-white);line-height: 1.65;-webkit-font-smoothing: antialiased;}img { max-width: 100%; display: block; }a { text-decoration: none; color: inherit; }ul { list-style: none; }h1,h2,h3,h4,h5,h6 {font-family: var(--font-heading);font-weight: 700;color: var(--clr-gray-900);line-height: 1.3;}h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; }h3 { font-size: 1.3rem; font-weight: 600; }h4 { font-size: 1.15rem;font-weight: 600; }p{ font-family: var(--font-body); font-size: 1rem; color: var(--clr-gray-500); }.btn-primary-theme {display: inline-flex;align-items: center;justify-content: center;gap: 8px;height: var(--input-h);padding: 0 24px;border-radius: 14px;background: var(--primary-color);color: var(--clr-white);font-family: var(--font-body);font-weight: 500;font-size: 0.9rem;border: none;cursor: pointer;transition: box-shadow .2s, transform .15s, filter .2s;box-shadow: var(--shadow-card);white-space: nowrap;}.btn-primary-theme:hover {box-shadow: var(--shadow-hover);filter: brightness(1.08);transform: translateY(-1px);color: var(--clr-white);}.btn-primary-theme:active { transform: translateY(0); }.btn-primary-theme.full-width { width: 100%; padding: 0 20px; }.btn-primary-theme.large { height: 52px; font-size: 1rem; border-radius: 14px; }.btn-ghost-circle {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: var(--radius-pill);background: transparent;border: 1.5px solid var(--clr-gray-200);color: var(--clr-gray-700);cursor: pointer;transition: background .2s, border-color .2s, color .2s;position: relative;}.btn-ghost-circle:hover {background: rgba(var(--primary-rgb),0.08);border-color: var(--primary-color);color: var(--primary-color);}.btn-ghost-circle svg, .btn-ghost-circle i { pointer-events: none; }.input-theme {height: var(--input-h);border-radius: var(--input-radius);border: var(--input-border);padding: 0 14px;font-family: var(--font-body);font-size: 0.9rem;color: var(--clr-gray-900);background: var(--clr-white);outline: none;width: 100%;transition: border-color .2s, box-shadow .2s;}.input-theme:focus {border-color: var(--primary-color);box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.10);}.input-theme::placeholder { color: var(--clr-gray-300); }textarea.input-theme { height: auto; padding: 12px 14px; resize: vertical; }.card-theme {background: var(--clr-white);border-radius: var(--radius-md);border: 1px solid var(--clr-gray-100);box-shadow: var(--shadow-card);overflow: hidden;transition: box-shadow .25s, border-color .25s, transform .25s;}.card-theme:hover {box-shadow: var(--shadow-hover);border-color: var(--clr-gray-200);transform: translateY(-3px);}.badge-warn {background: var(--clr-warn);color: var(--clr-white);font-size: 0.65rem;font-weight: 700;padding: 2px 6px;border-radius: 4px;line-height: 1;white-space: nowrap;}.badge-count {position: absolute;top: -6px;right: -6px;min-width: 18px;height: 18px;background: var(--clr-warn);color: var(--clr-white);font-size: 0.6rem;font-weight: 700;border-radius: 4px;display: flex;align-items: center;justify-content: center;padding: 0 4px;}.section-title {display: flex;justify-content: space-between;align-items: flex-end;border-bottom: 2px solid var(--clr-gray-100);padding-bottom: 12px;margin-bottom: 24px;}.section-title h2 {font-family: var(--font-heading);font-weight: 700;font-size: 1.3rem;color: var(--clr-gray-900);}.section-title .sub { font-size: 0.8rem; color: var(--clr-gray-500); font-weight: 400; }.section-title a { font-size: 0.8rem; color: var(--primary-color); font-weight: 500; }.container-theme { max-width: 1400px; margin: 0 auto; padding: 0 24px; }.text-warn{ color: var(--clr-warn); }.text-success { color: var(--clr-success); }.text-muted { color: var(--clr-gray-500); }.text-primary { color: var(--primary-color); }.fw-600 { font-weight: 600; }.fw-700 { font-weight: 700; }.d-flex { display: flex; }.align-center { align-items: center; }.gap-8{ gap: 8px; }.gap-16 { gap: 16px; }::-webkit-scrollbar { width: 6px; height: 6px; }::-webkit-scrollbar-track { background: var(--clr-gray-50); }::-webkit-scrollbar-thumb { background: var(--clr-gray-300); border-radius: 99px; }.product-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));gap: 24px;}.p-card {background: #fff; border-radius: var(--radius-md); border: 1px solid var(--clr-gray-100);overflow: hidden; display: flex; flex-direction: column;transition: box-shadow .25s, border-color .25s, transform .25s;position: relative;}.p-card:hover {box-shadow: var(--shadow-hover); border-color: var(--clr-gray-200); transform: translateY(-3px);}.p-card-thumb {position: relative; height: 180px; background: var(--surface-bg); overflow: hidden; padding: 12px;}.p-card-thumb img.img {width: 100%; height: 100%; object-fit: contain;transition: transform .35s; display: block;}.p-card:hover .p-card-thumb img.img { transform: scale(1.06); }.p-card-badge {position: absolute; top: 8px; left: 8px; background: #F9761F; color: #fff;font-size: 0.65rem; font-weight: 700; padding: 4px 8px; border-radius: 4px;text-transform: uppercase; letter-spacing: 0.06em; z-index: 2;}.p-card-body { padding: 14px; flex: 1; display: flex; flex-direction: column; }.p-card-name {font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--clr-gray-800);margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden; line-height: 1.4;}.p-card-name a { color: inherit; text-decoration: none; }.p-card-name a:hover { color: var(--primary-color); }.p-card-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }.p-card-stars { color: #F9761F; font-size: 11px; margin-bottom: 8px; }.p-card-price {font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: #E53E3E; margin-bottom: 14px;}.p-card-price del { font-size: 0.8rem; color: var(--clr-gray-400); font-weight: 400; margin-left: 6px; }.p-card-actions {margin-top: auto;display: flex !important;flex-direction: row !important;flex-wrap: nowrap !important;gap: 8px !important;width: 100%;}.p-card-actions form {flex: 1;display: flex;margin: 0; padding: 0;min-width: 0; }.p-card-btn {flex: 1;display: flex; align-items: center; justify-content: center; gap: 4px;height: 40px; border-radius: 6px;font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;color: #fff;background: var(--primary-color); border: none;text-decoration: none; transition: all .25s ease-in-out; cursor: pointer;padding: 0 4px; width: 100%;box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.2);white-space: normal;text-align: center;line-height: 1.1;}.p-card-btn-outline {flex: 1;display: flex; align-items: center; justify-content: center; gap: 4px;height: 40px; border-radius: 6px;font-family: var(--font-body); font-size: 0.82rem; font-weight: 700;color: #fff;background: var(--secondary-color); border: none;text-decoration: none; transition: all .25s ease-in-out; cursor: pointer;padding: 0 4px; width: 100%;box-shadow: 0 2px 6px rgba(var(--secondary-rgb), 0.2);white-space: normal;text-align: center;line-height: 1.1;}.p-card-btn:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(var(--primary-rgb), 0.3); color: #fff; }.p-card-btn-outline:hover { filter: brightness(1.15); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(var(--secondary-rgb), 0.3); color: #fff; }.p-card-outofstock {margin-top: auto; text-align: center; font-size: 0.8rem; font-weight: 700; color: #E53E3E;padding: 10px 0; background: rgba(229, 62, 62, 0.08); border-radius: 8px;}.page-banner-theme {position: relative;width: 100%;padding: 80px 24px;background-size: cover;background-position: center;overflow: hidden;display: flex;align-items: center;justify-content: center;z-index: 1;}.page-banner-theme .overlay {position: absolute;inset: 0;background: var(--primary-color);opacity: 0.85;z-index: 1;}.page-banner-theme .inner {position: relative;z-index: 2;text-align: center;}.page-banner-theme h1 {font-family: var(--font-heading);color: #fff;font-size: 2.5rem;font-weight: 800;margin: 0;text-shadow: 0 4px 10px rgba(0,0,0,0.15);}.page-content-theme {max-width: 1000px;margin: -40px auto 60px;position: relative;z-index: 10;background: var(--clr-white);border-radius: var(--radius-lg);padding: 40px;box-shadow: var(--shadow-hover);border: 1px solid var(--clr-gray-100);}@media (max-width: 768px) {.page-banner-theme { padding: 60px 20px; }.page-banner-theme h1 { font-size: 2rem; }.page-content-theme { margin: -20px 20px 40px; padding: 24px; }}@media (max-width: 500px) {.p-card-actions {gap: 3px !important;}.p-card-btn, .p-card-btn-outline {font-size: 0.65rem;padding: 0 1px;height: 38px;letter-spacing: -0.03em;}}.page-content-theme p, .page-content-theme li {font-size: 1.05rem;line-height: 1.7;color: var(--clr-gray-700);margin-bottom: 1.2rem;}@media (min-width: 1200px) {.product-grid {grid-template-columns: repeat(6, 1fr);gap: 12px;}.p-card-thumb {height: 140px;padding: 8px;}.p-card-body {padding: 10px;}.p-card-name {font-size: 0.78rem;margin-bottom: 4px;}.p-card-price {font-size: 0.9rem;margin-bottom: 10px;}.p-card-actions {gap: 4px !important;}.p-card-btn, .p-card-btn-outline {font-size: 0.65rem;height: 34px;padding: 0 2px;letter-spacing: -0.02em;}}.dashboard-page {padding: 50px 0;background: var(--surface-bg);min-height: 70vh;}.dashboard-nav {margin-bottom: 30px;overflow-x: auto;scrollbar-width: none;background: #fff;padding: 10px;border-radius: var(--radius-pill);box-shadow: 0 4px 20px rgba(0,0,0,0.05);display: flex;}.dashboard-nav::-webkit-scrollbar { display: none; }.dashboard-nav ul {display: flex;list-style: none;margin: 0; padding: 0;gap: 8px;width: max-content;margin: 0 auto; }.dashboard-nav li { margin: 0; padding: 0; }.dashboard-nav li a {display: flex;align-items: center;gap: 8px;padding: 12px 24px;font-family: var(--font-body);font-size: 0.9rem;font-weight: 600;color: var(--clr-gray-600);background: transparent;border-radius: var(--radius-pill);transition: all .3s ease;text-decoration: none;white-space: nowrap;}.dashboard-nav li a i { font-size: 1.1rem; }.dashboard-nav li a:hover {background: rgba(var(--primary-rgb), 0.08);color: var(--primary-color);}.dashboard-nav li a.active {background: var(--primary-color);color: #fff;box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4);}.user-content {background: #fff;border-radius: var(--radius-lg);box-shadow: 0 10px 40px rgba(0,0,0,0.06);padding: 40px;border: 1px solid rgba(255,255,255,0.8);}.user-content h3 {font-family: var(--font-heading);font-size: 1.8rem;font-weight: 800;color: var(--clr-gray-900);margin-bottom: 24px;padding-bottom: 16px;position: relative;}.user-content h3::after {content: ''; position: absolute; left: 0; bottom: 0; width: 60px; height: 4px; background: var(--primary-color); border-radius: 2px;}.user-content .form-control {background: var(--surface-bg);border: 1px solid var(--clr-gray-200);border-radius: var(--radius-md);height: 48px;padding: 10px 16px;font-family: var(--font-body);font-size: 0.95rem;color: var(--clr-gray-700);box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);transition: all .3s ease;}.user-content textarea.form-control {height: auto !important;min-height: 100px;}.user-content .form-control:focus {background: #fff;border-color: var(--primary-color);box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);outline: none;}.user-content label {font-family: var(--font-body);font-weight: 600;color: var(--clr-gray-700);margin-bottom: 8px;font-size: 0.9rem;}.user-content .btn-primary {height: 48px;padding: 0 32px;border-radius: var(--radius-md);font-family: var(--font-body);font-weight: 700;font-size: 1rem;background: var(--primary-color);border: none;box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.3);transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);}.user-content .btn-primary:hover {transform: translateY(-2px);box-shadow: 0 12px 25px rgba(var(--primary-rgb), 0.4);}.user-content .table-responsive {border-radius: var(--radius-md);overflow: hidden;box-shadow: 0 4px 15px rgba(0,0,0,0.03);border: 1px solid var(--clr-gray-100);}.user-content .table { margin: 0; background: #fff; }.user-content .table th { background: var(--clr-gray-50); color: var(--clr-gray-800); font-weight: 700; border-bottom: 2px solid var(--clr-gray-200) !important; padding: 16px;text-transform: uppercase;font-size: 0.8rem;letter-spacing: 0.05em;}.user-content .table td { vertical-align: middle; padding: 16px; border-bottom: 1px solid var(--clr-gray-100);color: var(--clr-gray-600);font-size: 0.95rem;}.user-content .table-striped > tbody > tr:nth-of-type(odd) {background-color: rgba(var(--primary-rgb), 0.015);}.user-content .table-hover > tbody > tr:hover {background-color: rgba(var(--primary-rgb), 0.03);}.dash-header {text-align: center; margin-bottom: 40px;}.dash-header h2 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--clr-gray-900); margin-bottom: 8px;}.dash-header p { color: var(--clr-gray-500); font-size: 1.05rem; }.dash-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));gap: 24px;}.dash-card {background: #fff;border-radius: var(--radius-lg);padding: 32px 24px;text-align: center;box-shadow: 0 10px 30px rgba(0,0,0,0.04);border: 1px solid var(--clr-gray-100);transition: all .3s cubic-bezier(0.25, 0.8, 0.25, 1);text-decoration: none;display: block;}.dash-card:hover {transform: translateY(-8px);box-shadow: 0 20px 40px rgba(0,0,0,0.08);border-color: rgba(var(--primary-rgb), 0.3);}.dash-card .icon {width: 64px; height: 64px; margin: 0 auto 20px;background: rgba(var(--primary-rgb), 0.1);color: var(--primary-color);border-radius: 50%; display: flex; align-items: center; justify-content: center;font-size: 28px; transition: transform .3s;}.dash-card:hover .icon { transform: scale(1.1); background: var(--primary-color); color: #fff; }.dash-card h4 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--clr-gray-900); margin-bottom: 8px; }.dash-card p { font-size: 0.85rem; color: var(--clr-gray-500); margin: 0; line-height: 1.5; }@media (max-width: 768px) {.dash-grid { grid-template-columns: 1fr 1fr; gap: 16px; }.user-content { padding: 24px 16px; }.dashboard-nav { border-radius: var(--radius-md); padding: 8px; justify-content: flex-start; }.dashboard-nav ul { margin: 0; }.user-content .table-responsive {overflow-x: auto;-webkit-overflow-scrolling: touch;width: 100%;margin-bottom: 15px;border-radius: var(--radius-md);}.user-content .table {min-width: 800px; }.user-content .table th, .user-content .table td {font-size: 0.8rem;padding: 10px;white-space: nowrap; }.user-content .table td:nth-child(2) {white-space: normal; min-width: 250px; }}@media (max-width: 480px) {.dash-grid { grid-template-columns: 1fr; }}