:root {
  --primary: #d70018;
  --primary-dark: #b40013;
  --text: #1f2937;
  --muted: #6b7280;
  --border: #e5e7eb;
  --bg: #f5f5f7;
}
* { box-sizing: border-box; }
body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; margin: 0; background: var(--bg); color: var(--text); font-size: 14px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---- Flash Sale khung gio ---- */
.flash-sale { background: linear-gradient(135deg,#ff3d3d,#b40013); border-radius: 14px; padding: 20px 22px; margin: 20px 0; color: #fff; }
.flash-sale-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.flash-sale-head h2 { margin: 0; font-size: 20px; display: flex; align-items: center; gap: 8px; }
.flash-countdown { display: flex; align-items: center; gap: 6px; font-size: 13px; background: rgba(0,0,0,.18); padding: 6px 12px; border-radius: 999px; }
.flash-countdown .box { background: #fff; color: var(--primary); font-weight: 800; border-radius: 5px; padding: 2px 7px; font-variant-numeric: tabular-nums; }
.flash-slots { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.flash-slot { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 7px 16px; font-size: 13px; font-weight: 600; }
.flash-slot.active { background: #fff; color: var(--primary); }
.flash-slot.done { opacity: .55; text-decoration: line-through; }
.flash-sale .product-grid .product-card { background: #fff; }
.flash-empty { background: rgba(255,255,255,.12); border-radius: 10px; padding: 30px; text-align: center; font-size: 13.5px; }

/* ---- Topbar ---- */
.top-strip { background: #111827; color: #e5e7eb; font-size: 12.5px; }
.top-strip .container { display: flex; justify-content: space-between; padding: 6px 16px; }

.site-header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.site-header .header-inner { display: flex; align-items: center; gap: 24px; padding: 14px 16px; }
.site-header .logo { font-size: 22px; font-weight: 800; color: var(--primary); flex-shrink: 0; }
.site-header .search-box { flex: 1; display: flex; }
.site-header .search-box input { flex: 1; padding: 10px 14px; border: 2px solid var(--primary); border-right: none; border-radius: 6px 0 0 6px; font-size: 14px; }
.site-header .search-box button { background: var(--primary); color: #fff; border: none; padding: 0 18px; border-radius: 0 6px 6px 0; cursor: pointer; }
.site-header .header-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.header-actions .action-item { text-align: center; font-size: 11.5px; color: var(--text); position: relative; }
.header-actions .action-item .ic { font-size: 20px; }
.cart-count { position: absolute; top: -6px; right: -10px; background: var(--primary); color: #fff; font-size: 10px; border-radius: 999px; padding: 1px 6px; }

.main-nav { background: var(--primary); }
.main-nav .container { display: flex; gap: 4px; overflow-x: auto; }
.main-nav a { color: #fff; padding: 11px 16px; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.main-nav a:hover { background: rgba(255,255,255,.15); }

/* ---- Banner ---- */
.hero-banner { display: block; border-radius: 10px; overflow: hidden; margin: 20px 0; }
.hero-banner img { width: 100%; }

/* ---- Section ---- */
.section { margin: 28px 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title h2 { font-size: 19px; margin: 0; border-left: 4px solid var(--primary); padding-left: 10px; }
.section-title a { font-size: 13px; color: var(--primary); font-weight: 600; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.cat-card { background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.cat-card img { height: 110px; object-fit: cover; }
.cat-card .cat-name { padding: 10px 12px; font-weight: 600; font-size: 13.5px; }

/* ---- Product grid ---- */
.product-grid { display: grid; gap: 16px; }
.product-grid.grid4 { grid-template-columns: repeat(4, 1fr); }
.product-grid.grid3 { grid-template-columns: repeat(3, 1fr); }
.product-grid.list { grid-template-columns: 1fr; }

.product-card { background: #fff; border-radius: 10px; border: 1px solid var(--border); overflow: hidden; position: relative; transition: box-shadow .15s, transform .15s; }
.product-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.08); transform: translateY(-2px); }
.product-card .thumb { aspect-ratio: 1/1; overflow: hidden; background: #f3f4f6; }
.product-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-card .badge-sale { position: absolute; top: 10px; left: 10px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; }
.product-card .info { padding: 12px; }
.product-card .name { font-size: 13.5px; font-weight: 600; line-height: 1.4; height: 38px; overflow: hidden; margin-bottom: 6px; }
.product-card .price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.product-card .price { color: var(--primary); font-weight: 700; font-size: 15.5px; }
.product-card .price-old { color: #9ca3af; text-decoration: line-through; font-size: 12.5px; }
.product-card .discount-percent { color: #16a34a; font-size: 11.5px; font-weight: 600; }
.card-swatches { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.card-swatch { width: 15px; height: 15px; border-radius: 50%; background: var(--swatch-color, #ccc); border: 1px solid rgba(0,0,0,.18); cursor: pointer; display: inline-block; }
.card-swatch:hover, .card-swatch.active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary); }
.card-swatch-more { font-size: 11px; color: var(--muted); }

.product-grid.list .product-card { display: flex; }
.product-grid.list .product-card .thumb { width: 160px; flex-shrink: 0; }
.product-grid.list .product-card .info { flex: 1; }
.product-grid.list .product-card .name { height: auto; }

/* ---- Product detail ---- */
.breadcrumb { font-size: 12.5px; color: var(--muted); margin: 14px 0; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--primary); }

.product-detail { display: grid; grid-template-columns: 420px 1fr; gap: 30px; background: #fff; border-radius: 12px; padding: 24px; border: 1px solid var(--border); }
.gallery-main { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); margin-bottom: 10px; aspect-ratio: 1/1; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 8px; }
.gallery-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 2px solid var(--border); cursor: pointer; }
.gallery-thumbs img.active { border-color: var(--primary); }

.product-title { font-size: 21px; font-weight: 700; margin: 0 0 8px; }
.product-meta { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.price-box { background: #fff5f5; border: 1px dashed var(--primary); border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; }
.price-box .current-price { font-size: 26px; font-weight: 800; color: var(--primary); }
.price-box .old-price { text-decoration: line-through; color: #9ca3af; font-size: 14px; margin-left: 10px; }
.price-box .save-tag { display: inline-block; margin-left: 10px; background: #16a34a; color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 6px; }

.option-group { margin-bottom: 16px; }
.option-group label.title { font-weight: 700; font-size: 13.5px; display: block; margin-bottom: 8px; }
.option-btn-group { display: flex; gap: 8px; flex-wrap: wrap; }
.option-btn { border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 16px; font-size: 13px; cursor: pointer; background: #fff; }
.option-btn.active { border-color: var(--primary); color: var(--primary); background: #fff5f5; font-weight: 600; }
.option-btn:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

.color-swatch-btn { display: inline-flex; align-items: center; gap: 8px; }
.color-swatch-btn .swatch-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--swatch-color, #ccc); border: 1px solid rgba(0,0,0,.18); flex-shrink: 0; }
.color-swatch-btn.active .swatch-dot { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--primary); }

.stock-info { font-size: 13px; margin-bottom: 16px; }
.stock-info.in-stock { color: #16a34a; }
.stock-info.out-stock { color: var(--primary); }

.buy-actions { display: flex; gap: 10px; margin-top: 16px; }
.btn-buy { flex: 1; background: var(--primary); color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; }
.btn-buy:hover { background: var(--primary-dark); }
.btn-buy:disabled { background: #d1d5db; cursor: not-allowed; }
.btn-add-cart { flex: 1; background: #fff; color: var(--primary); border: 2px solid var(--primary); padding: 12px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; text-align: center; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.spec-table tr td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.spec-table tr td:first-child { width: 40%; color: var(--muted); background: #fafafa; }
.spec-group-title { background: #f3f4f6; font-weight: 700; padding: 10px 14px; font-size: 13.5px; border-top: 1px solid var(--border); }

.tab-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--border); margin: 30px 0 16px; }
.tab-nav button { background: none; border: none; padding: 12px 20px; font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tab-nav button.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-panel { display: none; background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--border); }
.tab-panel.active { display: block; }

/* ---- Forms (checkout/cart) ---- */
.checkout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.form-block { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
.form-block label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.form-block input, .form-block textarea, .form-block select { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; margin-bottom: 14px; }
.cart-line { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); align-items: center; }
.cart-line img { width: 60px; height: 60px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.cart-line .name { font-weight: 600; font-size: 13.5px; }
.cart-line .variant { font-size: 12px; color: var(--muted); }
.qty-input { width: 60px !important; text-align: center; }

/* ---- Bang du lieu dung chung (theo doi don hang, danh sach san pham da dat...) ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.data-table th { background: #fafafa; color: var(--muted); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.02em; }

/* ---- Footer ---- */
.site-footer { background: #111827; color: #cbd5e1; margin-top: 40px; padding: 40px 0 20px; font-size: 13px; }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 24px; }
.footer-grid h4 { color: #fff; margin-bottom: 12px; font-size: 14px; }
.footer-bottom { text-align: center; padding-top: 20px; margin-top: 20px; border-top: 1px solid #1f2937; color: #6b7280; }

.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }

@media (max-width: 900px) {
  .product-grid.grid4, .product-grid.grid3 { grid-template-columns: repeat(2, 1fr); }
  .product-detail { grid-template-columns: 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  .site-header .search-box { display: none; }
}