/*
Theme Name: Shopee Product Theme
Author: OpenAI
Description: Theme WordPress tra cứu sản phẩm phong cách Shopee.
Version: 1.1.0
Text Domain: shopee-product-theme
*/

:root{--bg:#f5f5f5;--panel:#ffffff;--panel-border:#f1f1f1;--text:#222222;--muted:#6b7280;--primary:#ee4d2d;--primary-2:#ff7337;--primary-3:#ff875c;--success-bg:#ecfdf5;--success-text:#059669;--danger-bg:#fff1f2;--danger-text:#dc2626;--card-shadow:0 2px 8px rgba(0,0,0,.06);--radius:4px;--radius-lg:12px}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg);min-height:100vh}
.topbar{background:linear-gradient(180deg,var(--primary) 0%,var(--primary-2) 100%);color:#fff;padding:10px 0 110px;box-shadow:0 2px 12px rgba(238,77,45,.18)}
.container{width:min(1200px,calc(100% - 32px));margin:0 auto}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:28px;letter-spacing:-.03em}
.brand-bag{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:22px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.top-links{display:flex;gap:18px;font-size:13px;opacity:.95;flex-wrap:wrap;justify-content:flex-end}
.hero-search-shell{margin-top:-86px;position:relative;z-index:2;padding-bottom:40px}
.hero-card{background:#fff;border-radius:var(--radius-lg);box-shadow:0 8px 30px rgba(0,0,0,.08);overflow:hidden;border:1px solid #f1f1f1;margin-bottom:18px}
.hero-card-top{background:linear-gradient(180deg,var(--primary) 0%,var(--primary-2) 100%);padding:22px 22px 18px;color:#fff}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.hero-card h1{margin:0 0 8px;font-size:clamp(28px,4vw,38px);line-height:1.08;letter-spacing:-.03em;color:#fff}
.sub{margin:0;color:rgba(255,255,255,.92);font-size:14px;line-height:1.7;max-width:760px}
.search-panel{padding:18px;background:#fff}
.toolbar{display:grid;grid-template-columns:1.5fr .8fr .8fr auto;gap:12px;align-items:center}
.search-box,.select-box{background:#fff;border:1px solid #d1d5db;border-radius:3px;padding:12px 14px;color:var(--text);min-height:46px;font-size:14px;width:100%}
.search-box:focus,.select-box:focus{border-color:var(--primary);outline:none}
.clear-search-btn{border:none;background:var(--primary);color:#fff;min-height:46px;padding:12px 18px;border-radius:3px;cursor:pointer;font-weight:700;transition:.2s ease;box-shadow:0 2px 8px rgba(238,77,45,.2)}
.clear-search-btn:hover{background:var(--primary-2)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0 20px}
.stat-box{background:#fff;border:1px solid #f1f1f1;border-radius:var(--radius-lg);padding:18px;box-shadow:var(--card-shadow);position:relative;overflow:hidden}
.stat-box::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,var(--primary),var(--primary-3))}
.stat-label{font-size:13px;color:#6b7280;margin-bottom:8px;padding-left:8px}
.stat-value{font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--primary);padding-left:8px}
.quick-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.quick-pick{display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--radius-lg);background:#fff;border:1px solid #f1f1f1;cursor:pointer;transition:.2s ease;box-shadow:var(--card-shadow)}
.quick-pick:hover{border-color:#fcb8a8;transform:translateY(-1px);box-shadow:0 8px 20px rgba(238,77,45,.12)}
.quick-pick.active{border-color:var(--primary);background:#fff6f3}
.quick-pick-icon{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:22px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-2));flex:0 0 54px}
.quick-pick[data-keyword="capcut"] .quick-pick-icon{background:linear-gradient(135deg,#111827,#374151)}
.quick-pick[data-keyword="netflix"] .quick-pick-icon{background:linear-gradient(135deg,#e50914,#b91c1c)}
.quick-pick-title{font-size:16px;font-weight:700;line-height:1.2;margin-bottom:4px}
.quick-pick-sub{color:var(--muted);font-size:13px;line-height:1.45}
.table-wrap{background:#fff;border:1px solid #f1f1f1;border-radius:var(--radius-lg);box-shadow:var(--card-shadow);padding:18px;overflow:hidden}
.table-scroll{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:8px}
.mobile-card-list{display:none;gap:12px}
.mobile-product-card{background:#fff;border:1px solid #f1f1f1;border-radius:12px;box-shadow:var(--card-shadow);overflow:hidden}
.mobile-product-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 14px 10px}
.mobile-product-name{margin:0 0 6px;font-size:15px;font-weight:800;line-height:1.4;color:#222}
.mobile-product-desc{font-size:12px;color:var(--muted);line-height:1.5;white-space:pre-line}
.mobile-product-body{padding:0 14px 14px;display:grid;gap:10px}
.mobile-meta-row{display:grid;grid-template-columns:84px 1fr;gap:8px;align-items:start;font-size:13px}
.mobile-meta-label{color:var(--muted);font-weight:600}
.mobile-meta-value{color:#222;font-weight:600;line-height:1.5}
.mobile-price{color:var(--primary);font-size:18px;font-weight:800;line-height:1.2}
.mobile-price-sub{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:500}
.mobile-empty{display:none;padding:14px;background:#fff;border:1px dashed #f1b5a6;border-radius:12px;color:var(--muted);font-size:13px;text-align:center}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-title h2{margin:0;font-size:20px;font-weight:800;color:#222}
.section-title span{color:var(--muted);font-size:13px}
table.dataTable{width:100%!important;min-width:860px;border-collapse:collapse!important;border-spacing:0!important;margin-top:0!important;color:var(--text)}
table.dataTable thead th{border-bottom:2px solid #f5f5f5!important;color:#555;font-size:13px;font-weight:700;padding:14px 12px!important;background:#fafafa}
table.dataTable tbody tr{background:#fff;border-bottom:1px solid #f5f5f5}
table.dataTable tbody tr:hover{background:#fffaf8}
table.dataTable tbody td{padding:14px 12px!important;border:none!important;vertical-align:top}
.product-name{font-weight:700;margin-bottom:6px;line-height:1.4;color:#222}.product-desc{font-size:13px;color:var(--muted);line-height:1.5;white-space:pre-line}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;font-size:12px;font-weight:700;border-radius:999px;white-space:nowrap}
.badge-category{background:#fff1ed;color:var(--primary)}.badge-success{background:var(--success-bg);color:var(--success-text)}.badge-danger{background:var(--danger-bg);color:var(--danger-text)}
.price{font-weight:800;color:var(--primary);font-size:18px}.price-sub{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:500}
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{display:none}
.dataTables_wrapper .dataTables_info{color:var(--muted)!important;padding-top:18px!important;font-size:13px}
.dataTables_wrapper .dataTables_paginate{padding-top:14px!important}
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:3px!important;border:1px solid #e5e7eb!important;background:#fff!important;color:#555!important;margin-left:6px!important;min-width:36px}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--primary)!important;color:#fff!important;border-color:var(--primary)!important}
.empty-note{margin-top:12px;color:var(--muted);font-size:13px}
@media (max-width:980px){.toolbar,.stats,.quick-picks{grid-template-columns:1fr 1fr}.hero-search-shell{margin-top:-70px}}
@media (max-width:760px){.container{width:min(100% - 20px,100%)}.topbar{padding-bottom:95px}.topbar-inner{flex-direction:column;align-items:flex-start}.toolbar,.stats,.quick-picks{grid-template-columns:1fr}.search-panel,.table-wrap{padding:14px}.section-title{align-items:flex-start;flex-direction:column}.section-title h2{font-size:18px}.table-scroll{display:none}.mobile-card-list{display:grid}.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{display:none}.hero-card h1{font-size:28px}}