/* ===== Design tokens ===== */
:root {
  --color-ink: #111114;
  --color-ink-soft: #1d1d1f;
  --color-brand-1: #f9b2c4;
  --color-brand-2: #f96599;
  --gradient-brand: linear-gradient(135deg, #f9b2c4 0%, #f96599 100%);
  --color-accent: #f96599;
  --color-accent-dark: #e23f79;
  --color-sale: #e0245e;
  --color-bg: #ffffff;
  --color-bg-alt: #f5f5f7;
  --color-text: #1d1d1f;
  --color-text-muted: #6e6e73;
  --color-border: #e5e5e7;
  --color-success: #16a34a;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --shadow-card: 0 2px 14px rgba(17, 17, 20, 0.06);
  --shadow-card-hover: 0 16px 36px rgba(17, 17, 20, 0.16);
}

/* ===== Reset ===== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
}
/* The [hidden] attribute is only display:none by default via the browser's
   lowest-priority UA stylesheet -- any class here that sets its own display
   (flex/block/inline-flex/...) silently wins and the element stays visible
   even while "hidden". Force it to always actually hide, site-wide. */
[hidden] { display: none !important; }

/* Prevent horizontal overflow (e.g. from a broken product image) on the
   customer-facing site only -- overflow-x here breaks the admin sidebar's
   position:sticky, which needs the real viewport as its scroll container. */
body:not(.admin-body) { overflow-x: hidden; }
/* Sticky footer: on short pages (e.g. empty cart) the footer sits at the
   bottom of the viewport instead of right under the sparse content. */
body:not(.admin-body) { display: flex; flex-direction: column; min-height: 100vh; }
body:not(.admin-body) > main { flex: 1 0 auto; }
body:not(.admin-body) > .site-footer { flex-shrink: 0; }
main { display: flow-root; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 var(--space-3); font-weight: 800; letter-spacing: -0.02em; }
p { margin: 0 0 var(--space-3); }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-5);
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 15px;
  transition: filter 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: 0 6px 16px rgba(249, 101, 153, 0.35); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-accent { background: var(--color-ink); color: #fff; }
.btn-accent:hover { filter: brightness(1.2); }
.btn-outline { background: transparent; color: var(--color-ink); border-color: var(--color-border); border-radius: var(--radius-sm); }
.btn-outline:hover { background: var(--color-bg-alt); }
.btn-lg { min-height: 50px; padding: 0 var(--space-6); font-size: 17px; }
.btn-sm { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* "Flow" button: brand-pink by default, a dark fill sweeps in from the left
   when the parent product/hot-deal card is hovered (text stays white throughout) */
.btn-flow {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--gradient-brand);
  color: #fff;
  border-color: transparent;
}
.btn-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.product-card:hover .btn-flow::before,
.hotdeal-card:hover .btn-flow::before,
.btn-flow:hover::before {
  transform: scaleX(1);
}
/* "Flow" outline variant: same dark-fill sweep motion as .btn-flow, but
   starts from a bordered/transparent look (like .btn-outline) instead of a
   pink fill, so a secondary action can share the animation without looking
   like the primary one. */
.btn-flow-outline {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-border);
}
.btn-flow-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.btn-flow-outline:hover { color: #fff; border-color: transparent; }
.btn-flow-outline:hover::before { transform: scaleX(1); }
.btn-link-danger { background: none; border: none; color: var(--color-sale); font-size: 14px; padding: 0; }
.btn-remove { background: none; border: none; color: var(--color-text-muted); font-size: 22px; line-height: 1; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); }
.btn-remove:hover { background: var(--color-bg-alt); color: var(--color-sale); }

/* ===== Header ===== */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--color-bg); box-shadow: 0 1px 0 var(--color-border); }
.topbar { background: var(--color-ink); color: #c7c7cc; font-size: 13px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.topbar-hotline { display: inline-flex; align-items: center; gap: var(--space-1); color: #fff; font-weight: 700; }
.topbar-note { display: none; }
@media (min-width: 768px) { .topbar-note { display: inline; } }

.header-main { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); flex-wrap: wrap; }
.logo { display: inline-flex; align-items: center; white-space: nowrap; }
.logo img { height: 34px; width: auto; display: block; }
.logo-text { font-size: 22px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; }
.logo-text span { color: var(--color-accent); }

.search-form { flex-basis: 100%; order: 3; display: flex; position: relative; max-width: 520px; }
@media (min-width: 640px) { .search-form { flex: 1; flex-basis: auto; order: 0; max-width: 520px; } }
.search-form input { flex: 1; border: 1px solid var(--color-border); border-radius: 999px; padding: 0 var(--space-4); height: 44px; font-size: 15px; background: var(--color-bg-alt); }
.search-form button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 40px; background: var(--gradient-brand); color: #fff; border: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.cart-link { position: relative; display: inline-flex; padding: var(--space-2); color: var(--color-ink); }
.cart-badge { position: absolute; top: -4px; right: -4px; background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px; }

.cart-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translate(-50%, 16px);
  background: var(--color-ink);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 100;
}
.cart-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.menu-toggle { background: none; border: none; padding: var(--space-2); color: var(--color-ink); display: none; }

.category-nav { background: var(--color-ink); }
/* overflow-x: auto ma khong khai bao overflow-y rieng se bi trinh duyet tu
   dong doi overflow-y thanh "auto" luon (quy tac CSS: 1 truc non-visible thi
   truc kia cung thanh auto) -- cong them thanh cuon ngang kieu co dien (vd
   Windows Chrome) choan mat ~15px chieu cao trong khung 48px, lam chu/nut bi
   cat nhe va phai cuon doc moi thay het. Khai bao ro overflow-y: hidden de
   khung luon cao dung 48px, khong bao gio sinh thanh cuon doc; va an han
   thanh cuon ngang (scrollbar-width/-ms-overflow-style/::-webkit-scrollbar)
   nhung van keo/cham de cuon ngang binh thuong khi danh muc dai hon man hinh
   (truong hop nay gio hiem khi xay ra nua vi se tu thu gon thanh hamburger
   truoc khi kip bi cat, xem ghi chu ".category-nav.is-compact" ben duoi). */
.category-nav-inner {
  display: flex; gap: var(--space-5); height: 48px; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-nav-inner::-webkit-scrollbar { display: none; }

/* Ban do an hinh (khong hien thi, dat fixed ngoai man hinh), dung chung
   flex/gap voi .category-nav-inner de luon do dung chieu rong "tu nhien"
   can co de hien het 1 hang danh muc -- xem script JS ngay sau <nav> trong
   header.ejs. Tach rieng class de khong bi anh huong boi cac rule
   ".category-nav.is-compact" ben duoi (clone nay luon phai o dang 1 hang
   ngang khong gioi han de do cho chinh xac). */
.category-nav-measure {
  position: fixed; top: -9999px; left: -9999px; visibility: hidden; pointer-events: none;
  display: flex; gap: var(--space-5); align-items: center; width: max-content;
}

.category-nav-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 20, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
  z-index: 60;
}
.category-nav.is-open .category-nav-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease;
}

/* Hang dau drawer mobile: logo TOMSTORE ben trai + nut dong (X) ben phai --
   mac dinh an, chi hien khi thu gon (xem ".category-nav.is-compact" ben
   duoi), vi o dang hien thi hang ngang tren desktop da co logo rieng o
   .header-main roi, khong can lap lai. */
.category-nav-mobile-head { display: none; }
/* Chua co file logo rieng mau trang -- dung filter de ep logo (dang mau
   toi, danh cho nen trang) thanh trang khi dat tren nen toi cua drawer.
   brightness(0) doi het mau thanh den (giu nguyen vung trong suot), invert(1)
   lat den thanh trang. */
.category-nav-mobile-logo { height: 26px; width: auto; filter: brightness(0) invert(1); }
.nav-close-btn { display: inline-flex; background: none; border: none; color: #fff; padding: var(--space-2); margin: calc(var(--space-2) * -1); }

body.nav-open { overflow: hidden; }

/* Thay vi 1 moc px man hinh co dinh (truoc day @media max-width:899px), JS
   (header.ejs) tu do chieu rong THAT su can co de hien het 1 hang danh muc
   roi tu gan class ".is-compact" khi khong du cho -- nen tu dong thu gon ca
   khi chi resize cua so hoac zoom trinh duyet ra (khong can dung dung may
   dien thoai), va luon vua khit bat ke sau nay them/bot bao nhieu danh muc. */
.category-nav.is-compact .category-nav-inner {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  max-width: none;
  width: min(82vw, 320px);
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: var(--space-5);
  background: var(--color-ink);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow-x: visible;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.32s;
  z-index: 61;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.25);
}
.category-nav.is-compact.is-open .category-nav-inner {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

.category-nav.is-compact .category-nav-mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }

.category-nav.is-compact .category-nav-inner a { padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
/* TRADE IN / Best Deal van la .hot-deal-nav-link (pill hong) o thanh ngang
   desktop, nhung trong drawer mobile de dong bo voi cac muc khac ben duoi
   (chi la 1 dong list, co border-bottom) -- bo nen pill, chi highlight bang
   mau chu hong accent + chu dam hon, khong con noi bat qua muc khac nua. */
.category-nav.is-compact .category-nav-inner a.hot-deal-nav-link {
  background: none;
  color: var(--color-accent);
  padding: var(--space-3) 0;
  border-radius: 0;
  text-align: left;
  margin-bottom: 0;
}
.category-nav.is-compact .category-nav-inner a.hot-deal-nav-link:hover { filter: none; color: var(--color-accent); }

.category-nav.is-compact .category-nav-sep { display: none; }

.category-nav-sep { color: rgba(255, 255, 255, 0.35); font-size: 20px; font-weight: 700; line-height: 1; }
.category-nav a { color: #c7c7cc; font-weight: 600; font-size: 14px; padding: var(--space-2) 0; white-space: nowrap; }
.category-nav a:hover, .category-nav a.active { color: #fff; }
.category-nav a.hot-deal-nav-link {
  background: var(--gradient-brand);
  color: #fff;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 700;
}
.category-nav a.hot-deal-nav-link:hover { filter: brightness(1.05); color: #fff; }

/* ===== Nav dropdown ("Phụ kiện" etc.) ===== */
.nav-dropdown { position: relative; display: inline-flex; align-items: center; }
.nav-dropdown-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  color: #c7c7cc;
  font-weight: 600;
  font-size: 14px;
  padding: var(--space-2) 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.nav-dropdown-toggle:hover,
.nav-dropdown-toggle.active,
.nav-dropdown.is-open .nav-dropdown-toggle { color: #fff; }
.nav-dropdown-arrow { transition: transform 0.2s ease; flex-shrink: 0; }
.nav-dropdown.is-open .nav-dropdown-arrow { transform: rotate(180deg); }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: var(--space-2);
  background: var(--color-ink);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: var(--space-2);
  min-width: 180px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  z-index: 120;
}
.nav-dropdown.is-open .nav-dropdown-menu { display: flex; flex-direction: column; }
.nav-dropdown-menu a { padding: var(--space-2) var(--space-3); border-radius: 6px; white-space: nowrap; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.active { background: rgba(255, 255, 255, 0.08); color: #fff; }

@media (max-width: 899px) {
  .nav-dropdown { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
  .nav-dropdown-toggle { width: 100%; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .nav-dropdown-menu {
    display: none;
    position: static;
    margin-top: 0;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.03);
  }
  .nav-dropdown.is-open .nav-dropdown-menu { display: flex; }
  .nav-dropdown-menu a { padding: var(--space-3) 0 var(--space-3) var(--space-5); border-bottom: 1px solid rgba(255, 255, 255, 0.06); border-radius: 0; }
}

/* ===== Hero slider (ty le co dinh 1800x700, khong tran vien) ===== */
@keyframes heroEnter {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-slider-wrap {
  margin-top: var(--space-5);
}
.hero-anim {
  animation: heroEnter 2.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
.hero-slider {
  position: relative;
  max-width: 1800px;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .hero-slider { max-width: 480px; }
}
/* The rounded/clipped image box is a separate inner element (not .hero-slider
   itself) so the arrow buttons -- positioned absolute inside .hero-slider --
   can float outside its edges instead of being clipped by overflow:hidden. */
.hero-slider-frame {
  overflow: hidden;
  background: var(--color-bg-alt);
  border-radius: var(--radius-lg);
  aspect-ratio: 1800 / 700;
  box-shadow: var(--shadow-card);
}
@media (max-width: 767px) {
  .hero-slider-frame { aspect-ratio: 1080 / 1350; }
}
.hero-slider-track { position: relative; height: 100%; }
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 1.6s ease, transform 1.6s ease;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); pointer-events: auto; z-index: 1; }
.hero-slide a, .hero-slide-img, .hero-slide picture { display: block; width: 100%; height: 100%; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }
/* 2 slider hero doc lap (desktop / mobile) -- chi hien dung 1 cai theo
   breakpoint, banner thieu anh ben nao thi khong xuat hien o slider ben do. */
.hero-slider-mobile-only { display: none; }
@media (max-width: 767px) {
  .hero-slider-desktop-only { display: none; }
  .hero-slider-mobile-only { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-anim { animation: none; }
  .hero-slide { transition: opacity 0.4s ease; transform: none !important; }
}
.hero-slider-dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); display: flex; gap: var(--space-2); z-index: 2; }
.hero-slider-dots button { width: 8px; height: 8px; border-radius: 999px; border: none; background: rgba(255,255,255,0.5); padding: 0; }
.hero-slider-dots button.active { background: #fff; width: 22px; }
.hero-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 20px;
  height: 20px;
  background: none;
  color: var(--color-ink);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Fully outside the frame (not overlapping the image at all). Kept narrow --
   the container only has --space-5 (24px) of gutter beside the frame on
   most desktop widths, so a wider control here would get clipped by the
   viewport edge. */
.hero-slider-arrow.prev { left: 0; transform: translate(calc(-100% - 2px), -50%); }
.hero-slider-arrow.next { right: 0; transform: translate(calc(100% + 2px), -50%); }
.hero-slider-arrow:hover { opacity: 1; }
.hero-slider-arrow.prev:hover { transform: translate(calc(-100% - 2px), -50%) scale(1.25); }
.hero-slider-arrow.next:hover { transform: translate(calc(100% + 2px), -50%) scale(1.25); }
.hero-slider-arrow.prev:active { transform: translate(calc(-100% - 2px), -50%) scale(0.9); }
.hero-slider-arrow.next:active { transform: translate(calc(100% + 2px), -50%) scale(0.9); }
@media (max-width: 767px) { .hero-slider-arrow { display: none; } }

/* ===== Hero scroll effect: banner shrinks + darkens as you scroll past it ===== */
.hero-slider {
  transform-origin: center top;
  will-change: transform;
}
.hero-slider-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .hero-slider { transform: none !important; }
  .hero-slider-overlay { opacity: 0 !important; }
}

.hero-fallback { background: var(--gradient-brand); color: #fff; padding: var(--space-9) 0; text-align: center; }
.hero-fallback h1 { font-size: 40px; margin-bottom: var(--space-3); }
.hero-fallback p { font-size: 18px; opacity: 0.95; }
@media (min-width: 768px) { .hero-fallback h1 { font-size: 56px; } }

/* ===== Sections ===== */
.section-heading { display: flex; align-items: baseline; justify-content: space-between; margin: var(--space-7) 0 var(--space-5); flex-wrap: wrap; gap: var(--space-2); }
.section-heading h1, .section-heading h2 { margin: 0; font-size: 26px; }
.see-all-link { color: var(--color-accent); font-weight: 700; font-size: 14px; }
.category-section { padding: var(--space-7) 0; }
.page-container { padding-top: var(--space-5); padding-bottom: var(--space-8); }

/* ===== Hot deal popup-style card ===== */
.hot-deal-section {
  padding: var(--space-7) 0;
  animation: heroEnter 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}
@media (prefers-reduced-motion: reduce) {
  .hot-deal-section { animation: none; }
}
.hot-deal-card {
  background: var(--gradient-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-4);
  box-shadow: var(--shadow-card-hover);
}
@media (min-width: 768px) { .hot-deal-card { padding: var(--space-7) var(--space-6); } }
.section-heading-hotdeal { display: block; text-align: center; margin-bottom: var(--space-5); }
.section-heading-hotdeal h2 { font-size: 24px; color: #fff; margin-bottom: var(--space-2); }
@media (min-width: 768px) { .section-heading-hotdeal h2 { font-size: 32px; } }
.section-heading-hotdeal p { color: rgba(255,255,255,0.9); font-weight: 500; }

/* ===== Category tiles ===== */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin: var(--space-7) 0;
  animation: heroEnter 1s cubic-bezier(0.16, 1, 0.3, 1) 0.35s both;
}
@media (prefers-reduced-motion: reduce) {
  .category-tiles { animation: none; }
}
@media (min-width: 768px) { .category-tiles { grid-template-columns: repeat(4, 1fr); } }
.category-tile {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: block;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .category-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
}
.category-tile img { width: 100%; height: 100%; object-fit: cover; }
.category-tile-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--color-bg-alt); }
.category-tile-placeholder svg { width: 35%; color: #c7c7cc; }
.category-tile-label {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-4);
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
  color: #fff; font-weight: 800; font-size: 18px;
}

/* Horizontal-scroll variant used instead of the grid once there are more
   than 4 categories, so extra ones stay reachable (swipe or arrows) instead
   of wrapping into a second row. */
.category-tiles-slider-wrap { position: relative; margin: var(--space-7) 0; }
.category-tiles-slider {
  margin: 0;
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.category-tiles-slider::-webkit-scrollbar { display: none; }
.category-tiles-slider .category-tile { flex: 0 0 45%; scroll-snap-align: start; }
@media (min-width: 768px) {
  .category-tiles-slider .category-tile { flex: 0 0 22%; }
}
.category-tiles-slider-wrap .hero-slider-arrow { top: 50%; }

/* ===== Featured section (banner + products) ===== */
.featured-section { padding: var(--space-7) 0; background: var(--color-bg-alt); }
.featured-layout { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 900px) { .featured-layout { grid-template-columns: 320px 1fr; } }
@media (min-width: 1440px) { .featured-layout { grid-template-columns: 380px 1fr; gap: var(--space-5); } }
.featured-banner { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4 / 5; align-self: start; }
.featured-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-products { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px) { .featured-products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .featured-products { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1700px) { .featured-products { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); } }

/* ===== Product grid & cards ===== */
.product-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
@media (min-width: 640px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1700px) { .product-grid { grid-template-columns: repeat(5, 1fr); gap: var(--space-5); } }

/* Hot Deal on mobile: 2-row horizontal swipe grid instead of a wrapping grid */
@media (max-width: 639px) {
  .hotdeal-grid {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    scrollbar-width: none;
  }
  .hotdeal-grid::-webkit-scrollbar { display: none; }
  .hotdeal-grid > .hotdeal-card {
    scroll-snap-align: start;
  }
}

.product-card, .hotdeal-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* Whole card is clickable (stretched-link): the product name link's ::after
   covers the entire card, while the CTA button/link stays above it so it
   still receives its own clicks instead of triggering navigation. */
.product-name a.stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.product-card-cta { position: relative; z-index: 2; }
.price-contact { font-size: 18px; }
/* Touch devices report a synthetic :hover on first tap (playing this lift
   animation) and only follow the link on a second tap -- gate it to real
   pointer devices so a single tap navigates straight away on mobile. */
@media (hover: hover) {
  .product-card:hover, .hotdeal-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
}
.hotdeal-card { border-color: transparent; }

.product-card-image, .hotdeal-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-image img, .hotdeal-card-image img { width: 100%; height: 100%; object-fit: cover; }
.product-icon-placeholder { width: 40%; color: #c7c7cc; }
.product-icon-placeholder-lg { width: 30%; }
.product-icon-placeholder svg { width: 100%; height: 100%; }

.badge-sale { position: absolute; top: var(--space-2); left: var(--space-2); background: var(--color-sale); color: #fff; font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 999px; }
.badge-sale-lg { font-size: 13px; padding: 4px 11px; }

.product-card-body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.product-brand { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.product-name { font-size: 14px; font-weight: 700; margin: 0; min-height: 2.6em; }
.product-name a:hover { color: var(--color-accent); }
.product-price { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: var(--space-1) 0 var(--space-2); }
.price-current { color: var(--color-sale); font-weight: 800; font-size: 16px; }
.price-original { color: var(--color-text-muted); text-decoration: line-through; font-size: 13px; }
.product-price-lg { flex-direction: row; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.product-price-lg .price-current { font-size: 30px; }
.product-card-cta { margin-top: auto; }

.hotdeal-timer { display: inline-flex; align-items: center; gap: var(--space-1); background: #fff0f5; color: var(--color-sale); font-size: 12px; font-weight: 800; padding: 4px 9px; border-radius: var(--radius-sm); margin-bottom: var(--space-2); width: fit-content; }
.hotdeal-timer.expired { background: #eee; color: var(--color-text-muted); }

/* ===== Breadcrumb ===== */
.breadcrumb { font-size: 13px; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumb a:hover { color: var(--color-accent); }

/* ===== Sort form ===== */
.sort-form { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.sort-form select { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); }

.empty-state { color: var(--color-text-muted); padding: var(--space-6) 0; text-align: center; }

.category-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.category-tab {
  background: #fff; border: 1.5px solid var(--color-border); border-radius: 999px;
  padding: var(--space-2) var(--space-4); font-size: 14px; font-weight: 600; color: var(--color-text-muted);
}
.category-tab:hover { border-color: var(--color-accent); color: var(--color-ink); }
.category-tab.active { background: var(--gradient-brand); border-color: transparent; color: #fff; }

/* ===== Product detail ===== */
.product-detail { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .product-detail { grid-template-columns: 1fr 1fr; } }
/* Grid items default to min-width:auto, so a wide row (many gallery thumbs)
   forces this whole column -- and the page -- wider instead of scrolling
   inside itself. Reset it so overflow-x:auto on the thumb strip actually
   contains them. */
.product-gallery { min-width: 0; }
.product-detail-image { aspect-ratio: 1/1; background: var(--color-bg-alt); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.product-detail-image img { width: 100%; height: 100%; object-fit: cover; }

.product-gallery-main { position: relative; aspect-ratio: 1/1; background: #fff; border-radius: var(--radius-lg); overflow: hidden; touch-action: pan-y; }
.product-gallery-main:has(> .product-icon-placeholder) { display: flex; align-items: center; justify-content: center; }
.gallery-track { display: flex; width: 100%; height: 100%; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.gallery-track.is-dragging { transition: none; }
.gallery-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; }
.gallery-slide img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) {
  .gallery-track { transition: none; }
}
.product-gallery-thumbs { display: flex; gap: var(--space-2); margin-top: var(--space-3); overflow-x: auto; }
.gallery-thumb { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; background: var(--color-bg-alt); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.active { border-color: var(--color-accent); }

.policy-list { margin: var(--space-5) 0; background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); }
.policy-list-heading { font-size: 16px; margin-bottom: var(--space-3); }
.policy-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; }
.policy-icon { flex: 0 0 auto; width: 24px; height: 24px; color: var(--color-accent); }
.policy-icon svg { width: 100%; height: 100%; }
.policy-text { display: flex; flex-direction: column; font-size: 14px; }
.policy-text strong { font-weight: 700; }
.policy-text span { color: var(--color-text-muted); font-size: 13px; }
.policy-list-compact { background: transparent; padding: 0; margin: var(--space-4) 0 0; }
.policy-list-compact .policy-item { padding: var(--space-1) 0; }
.policy-list-compact .policy-icon { width: 18px; height: 18px; }
.policy-list-compact .policy-text strong { font-size: 13px; font-weight: 600; }
.product-detail-info h1 { font-size: 26px; margin: var(--space-1) 0 var(--space-3); }
.variant-picker { margin: var(--space-2) 0 var(--space-4); }
.variant-picker label { display: block; font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.variant-options { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.variant-option { min-height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: #fff; color: var(--color-ink); font-weight: 700; font-size: 14px; transition: border-color 0.15s ease, color 0.15s ease; }
.variant-option:hover:not(:disabled) { border-color: var(--color-accent); }
.variant-option.active { border-color: var(--color-accent); color: var(--color-accent); background: #fff0f5; }
.variant-option:disabled { color: var(--color-text-muted); text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }

.color-picker { margin: var(--space-2) 0 var(--space-4); }
.color-picker label { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-bottom: var(--space-2); }
.color-picker label span { color: var(--color-ink); }
.color-options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.color-option { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--color-border); padding: 0; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.color-option:hover:not(:disabled) { transform: scale(1.08); }
.color-option.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-accent); }
.color-option:disabled { opacity: 0.3; cursor: not-allowed; }
.product-stock { color: var(--color-success); font-weight: 700; font-size: 14px; }
.product-stock-out { color: var(--color-sale); }
.add-to-cart-form-detail { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); flex-wrap: wrap; }
.add-to-cart-form-detail input[type=number] { width: 72px; height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-align: center; }
.product-detail-cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; flex: 1 1 auto; }
.product-detail-cta-row .btn { flex: 1 1 180px; border-radius: var(--radius-sm); }
/* Full labels ("Thêm vào giỏ hàng", "Đặt hàng ngay") wrap/overflow on narrow
   phone screens -- show the shorter versions there instead. */
.btn-text-short { display: none; }
@media (max-width: 480px) {
  .btn-text-full { display: none; }
  .btn-text-short { display: inline; }
}
.product-description, .product-specs { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.product-specs table th { text-align: left; color: var(--color-text-muted); font-weight: 500; padding: var(--space-2) var(--space-3) var(--space-2) 0; width: 40%; }
.product-specs table td { padding: var(--space-2) 0; font-weight: 600; }
.product-specs table tr { border-bottom: 1px solid var(--color-border); }

/* ===== Cart & checkout ===== */
.cart-content { transition: opacity 0.22s ease; }
.cart-content.is-fading { opacity: 0; }
.cart-layout, .checkout-layout { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 900px) { .cart-layout, .checkout-layout { grid-template-columns: 1fr 320px; } }
.cart-table { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.cart-table th, .cart-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.cart-table thead { background: var(--color-bg-alt); }
.cart-table tbody tr { transition: opacity 0.2s ease; }
.cart-table tbody tr.cart-row-removing { opacity: 0; }
.cart-product-cell a:hover { color: var(--color-accent); }
.cart-item-variant { color: var(--color-text-muted); font-weight: 400; }

.cart-summary { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-5); position: sticky; top: 90px; }
.cart-summary h2 { font-size: 16px; }
.cart-summary-row { display: flex; justify-content: space-between; align-items: center; margin: var(--space-3) 0 var(--space-4); font-size: 15px; }
.cart-summary-row strong { color: var(--color-sale); font-size: 18px; }
.cart-summary .btn { margin-bottom: var(--space-2); }
.summary-items { margin-bottom: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.summary-items li { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-muted); }

.checkout-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.form-group { margin-bottom: var(--space-4); }
.form-group label { display: block; font-weight: 700; font-size: 14px; margin-bottom: var(--space-2); }
.form-group input[type=text], .form-group input[type=tel], .form-group input[type=number], .form-group input[type=password], .form-group input[type=file], .form-group textarea, .form-group select {
  width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0 var(--space-3); height: 44px; font-size: 15px; font-family: inherit;
}
.form-group input[type=file] { padding: var(--space-2) var(--space-3); height: auto; }
.form-group textarea { height: auto; padding: var(--space-3); resize: vertical; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); }
.radio-option, .checkbox-option { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; margin-bottom: var(--space-2); }
.form-group-checkbox label { font-weight: 400; }
.form-errors { background: #fff0f5; border: 1px solid #ffc2d8; color: var(--color-sale); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: 14px; }
.form-success { background: #f0fdf4; border: 1px solid #bbf7d0; color: var(--color-success); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: 14px; font-weight: 600; }
.form-errors ul { list-style: disc; padding-left: var(--space-5); }
small { color: var(--color-text-muted); font-size: 12px; display: block; margin-top: var(--space-1); }

/* ===== Order confirmation ===== */
.order-confirmation { max-width: 640px; margin: 0 auto; text-align: center; }
.order-confirmation-icon { color: var(--color-success); margin-bottom: var(--space-3); }
.order-instructions { background: var(--color-bg-alt); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); text-align: left; margin: var(--space-5) 0; }
.order-instructions ul { list-style: disc; padding-left: var(--space-5); }
.order-instructions li { margin-bottom: var(--space-1); }
.order-total-row { justify-content: flex-end; gap: var(--space-3); margin: var(--space-4) 0 var(--space-5); }

/* ===== Error page ===== */
.error-page { text-align: center; padding: var(--space-8) 0; }
.error-page h1 { font-size: 64px; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ===== Footer ===== */
.site-footer { background: var(--color-ink); color: #c7c7cc; margin-top: var(--space-8); }
.footer-grid { display: grid; gap: var(--space-6); padding: var(--space-7) 0 var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-col h4 { color: #fff; font-size: 14px; margin-bottom: var(--space-3); }
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2); font-size: 14px; }
.footer-col a:hover { color: #fff; }
.footer-col p { font-size: 14px; color: #98989d; }
.footer-logo { margin-bottom: var(--space-3); }
.footer-logo img { height: 30px; filter: brightness(0) invert(1); }
.footer-slogan { font-weight: 700; color: #fff; font-size: 15px; margin-bottom: var(--space-2); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: var(--space-4) 0; font-size: 13px; color: #98989d; }

/* Footer columns fade + slide up the first time they scroll into view */
.footer-col {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.footer-col.is-visible { opacity: 1; transform: translateY(0); }
.footer-col:nth-child(1) { transition-delay: 0s; }
.footer-col:nth-child(2) { transition-delay: 0.08s; }
.footer-col:nth-child(3) { transition-delay: 0.16s; }
.footer-col:nth-child(4) { transition-delay: 0.24s; }

@media (max-width: 767px) {
  .footer-grid { text-align: center; gap: 0; padding: var(--space-6) 0 var(--space-3); }
  .footer-col { padding: var(--space-5) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .footer-col:last-child { border-bottom: none; }
  .footer-logo { display: flex; justify-content: center; }
  .footer-col ul { align-items: center; }
  .footer-bottom { text-align: center; }
  .footer-col ul.footer-category-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
}

/* ===== Admin ===== */
.admin-body { display: flex; min-height: 100vh; background: var(--color-bg-alt); }
.admin-sidebar { width: 220px; flex-shrink: 0; background: var(--color-ink); color: #c7c7cc; padding: var(--space-5) var(--space-4); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.admin-logo { margin-bottom: var(--space-6); }
.admin-logo img { height: 28px; filter: brightness(0) invert(1); }
.admin-nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.admin-nav a { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.admin-nav a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.admin-nav a.active { background: var(--gradient-brand); color: #fff; }

/* Cum muc lien quan trong sidebar admin (vd "Thu cu doi moi": gom nhieu link
   con lai gan nhau de de nhan biet la cung 1 tinh nang, thay vi nam roi rac
   xen giua cac muc khac trong danh sach phang). */
.admin-nav-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-1);
  margin: 2px 0;
}
.admin-nav-group-label {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
  padding: 0 var(--space-2) var(--space-1);
}
.admin-nav-group a { padding-left: var(--space-3); }
.admin-logout-form { margin-top: var(--space-4); }
.btn-logout { background: var(--color-accent); color: #fff; border: 1.5px solid var(--color-accent); }
.btn-logout:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
@media (max-width: 768px) {
  .admin-body { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; overflow-x: auto; }
  .admin-nav { flex-direction: row; }
  .admin-logo { margin: 0 var(--space-4) 0 0; }
  .admin-logout-form { margin: 0 0 0 auto; }
}

.admin-main { flex: 1; padding: var(--space-6); max-width: 100%; overflow-x: auto; }
.admin-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-3); }
.admin-title-row { display: flex; align-items: center; gap: var(--space-3); }
.btn-icon-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-ink);
  font-size: 18px;
  font-weight: 700;
}
.btn-icon-back:hover { background: var(--color-bg-alt); }
.admin-hint { color: var(--color-text-muted); font-size: 14px; margin-bottom: var(--space-4); max-width: 640px; }

.admin-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 768px) { .admin-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.admin-stat-card { background: #fff; border-radius: var(--radius-lg); padding: var(--space-5); border: 1px solid var(--color-border); }
.admin-stat-card .stat-value { display: block; font-size: 28px; font-weight: 800; color: var(--color-ink); }
.admin-stat-card .stat-label { color: var(--color-text-muted); font-size: 13px; }
.admin-stat-card-accent .stat-value { color: var(--color-accent); }
.admin-stat-card-hot .stat-value { color: var(--color-sale); }

.admin-category-section { margin-bottom: var(--space-6); }
.admin-category-heading {
  display: inline-block;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  background: var(--gradient-brand);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  margin-bottom: var(--space-3);
  box-shadow: 0 4px 10px rgba(249, 101, 153, 0.25);
}
/* A heading that follows a table/list block right above it (e.g. "+ Thêm sản
   phẩm mới" after the purchase-history table) needs breathing room -- the
   global h1/h2/h3 reset zeroes out margin-top, so without this it sits flush
   against whatever came before it. */
.admin-table-scroll + .admin-category-heading,
.admin-table + .admin-category-heading,
.empty-state + .admin-category-heading {
  margin-top: var(--space-6);
}

.admin-table { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; border-collapse: collapse; min-width: 640px; }
.admin-table th, .admin-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); font-size: 14px; }
.admin-table thead { background: var(--color-bg-alt); }
.admin-table tfoot td { font-weight: 700; }
/* Bang "Lich su mua hang" -- do rong cot co dinh (khong tinh theo noi dung)
   de tranh cot bi "chay"/lech vi tri khi 1 dong co gia (VD "12.000.000₫")
   con dong khac khong co gia (chi "-"). table-layout: fixed chi ap dung
   rieng bang nay qua class .purchases-table, khong dung .admin-table chung
   vi cac bang admin khac (san pham, hotdeal...) co so cot khac nhau. */
.purchases-table { table-layout: fixed; min-width: 860px; }
.purchases-table th:nth-child(1), .purchases-table td:nth-child(1) { width: 16%; }
.purchases-table th:nth-child(2), .purchases-table td:nth-child(2) { width: 11%; }
.purchases-table th:nth-child(3), .purchases-table td:nth-child(3) { width: 11%; }
.purchases-table th:nth-child(4), .purchases-table td:nth-child(4) { width: 13%; }
.purchases-table th:nth-child(5), .purchases-table td:nth-child(5) { width: 12%; }
.purchases-table th:nth-child(6), .purchases-table td:nth-child(6) { width: 17%; }
.purchases-table th:nth-child(7), .purchases-table td:nth-child(7) { width: 20%; }
.purchases-table td { overflow-wrap: break-word; }
/* Ten san pham + nut "Lich su bao hanh" to mau hong thuong hieu cho de nhan
   biet khi luot bang. */
.purchase-product-name { color: var(--color-accent); font-weight: 700; }
.warranty-history-btn { color: var(--color-accent); border-color: var(--color-accent); }
.warranty-history-btn:hover { background: var(--color-accent); color: #fff; }
/* Nut "Chi tiết"/"Sửa"/"Xóa" trong cot cuoi: giu ca 3 tren CUNG 1 dong (bo
   flex-wrap mac dinh cua .admin-actions rieng cho bang nay), va "Sửa" dùng
   chung style voi "Chi tiết"/"Xóa" (chu xam, khong vien/nen -- xem .btn-link)
   thay vi mau link mac dinh cua the <a>. */
.purchases-table .admin-actions { flex-wrap: nowrap; gap: var(--space-3); }
.purchases-table .admin-actions a,
.purchases-table .admin-actions button { white-space: nowrap; }
/* Modal "Chi tiet" o bang Lich su mua hang -- xem customer-detail.ejs */
.modal-overlay { position: fixed; inset: 0; background: rgba(17, 17, 17, 0.55); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 1000; }
.modal-overlay[hidden] { display: none; }
.modal-box { background: #fff; border-radius: var(--radius-lg); padding: var(--space-5); max-width: 420px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; }
.modal-close { position: absolute; top: var(--space-3); right: var(--space-3); background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--color-text-muted); }
.modal-close:hover { color: var(--color-ink); }
.modal-box h3 { margin: 0 var(--space-5) var(--space-3) 0; color: var(--color-accent); }
.modal-field { margin: 0 0 var(--space-2); font-size: 14px; }
.modal-field strong { display: inline-block; min-width: 130px; }
/* Danh sach "Lich su bao hanh" nhung trong popup "Chi tiet" -- xem #pdVisits
   trong customer-detail.ejs, noi dung lay tu <template> an cua tung dong. */
.modal-subheading { margin: var(--space-4) 0 var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-size: 14px; font-weight: 700; color: var(--color-accent); }
.modal-visit-item { padding: var(--space-2) 0; border-bottom: 1px dashed var(--color-border); }
.modal-visit-item:last-child { border-bottom: none; padding-bottom: 0; }
.modal-visit-item .modal-field strong { min-width: 100px; }
.modal-visit-empty { color: var(--color-text-muted); }
.admin-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.admin-actions-hotdeal form { display: inline-flex; }
.hotdeal-enable-form, .hotdeal-time-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.hotdeal-enable-form input, .hotdeal-time-form input { height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-2); }
.hotdeal-enable-form input[type="number"] { width: 100px; }
.hotdeal-enable-form input[type="datetime-local"], .hotdeal-time-form input[type="datetime-local"] { width: 190px; }
.admin-actions-hotdeal-order { display: flex; flex-direction: column; gap: 4px; width: 44px; }
.admin-actions-hotdeal-order .hotdeal-order-form { display: block; }
.admin-actions-hotdeal-order .hotdeal-order-form button { width: 100%; padding: 2px 0; line-height: 1; }

.complete-toggle {
  width: 28px; height: 28px; border-radius: 999px; border: 1.5px solid var(--color-border);
  background: #fff; color: transparent; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s ease;
}
.complete-toggle:hover { border-color: var(--color-success); }
.complete-toggle.is-checked { background: var(--color-success); border-color: var(--color-success); color: #fff; }

.hotdeal-nolimit-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  font-weight: 500 !important;
  font-size: 13px !important;
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  margin-bottom: 0 !important;
}
.hotdeal-nolimit-toggle input[type="checkbox"] { width: auto; height: auto; margin: 0; }
.hotdeal-enable-form input[type="datetime-local"]:disabled, .hotdeal-time-form input[type="datetime-local"]:disabled { background: var(--color-bg-alt); color: var(--color-text-muted); }

.hotdeal-category-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.hotdeal-category-tab {
  background: #fff; border: 1.5px solid var(--color-border); border-radius: 999px;
  padding: var(--space-2) var(--space-4); font-size: 14px; font-weight: 600; color: var(--color-text-muted);
}
.hotdeal-category-tab:hover { border-color: var(--color-accent); color: var(--color-ink); }
.hotdeal-category-tab.active { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.hotdeal-category-panel { margin-bottom: var(--space-3); }
.hotdeal-standalone-form { max-width: 720px; }

.status-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: capitalize; background: #e5e7eb; color: #374151; }
.status-moi { background: #fef3c7; color: #92400e; }
.status-da_lien_he { background: #dbeafe; color: #1e40af; }
.status-da_giao, .status-completed, .status-active { background: #dcfce7; color: #166534; }
.status-cancelled, .status-inactive { background: #fee2e2; color: #991b1b; }
.status-standalone { background: #ffedd5; color: #9a3412; margin-left: var(--space-2); }
.status-select { border: 1px solid transparent; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 700; cursor: pointer; background-color: #e5e7eb; color: #374151; }
.order-filter-form { margin-bottom: var(--space-5); }
.admin-category-heading-standalone { background: #f97316; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.25); }

.admin-form { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); max-width: 640px; }
.admin-form-subheading { font-size: 15px; font-weight: 700; color: var(--color-ink); margin: var(--space-5) 0 var(--space-3); }
.admin-form-subheading:first-child { margin-top: 0; }
/* Toggle "Sản phẩm mua mới" / "Mang tới bảo hành" o dau form them san pham --
   cung ngon ngu voi .installment-tab, dat ten rieng vi dung o ngu canh khac. */
.entry-mode-toggle { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.entry-mode-btn { background: #fff; border: 1.5px solid var(--color-border); border-radius: 999px; padding: var(--space-2) var(--space-5); font-size: 14px; font-weight: 700; color: var(--color-text-muted); }
.entry-mode-btn:hover { border-color: var(--color-accent); color: var(--color-ink); }
.entry-mode-btn.active { background: var(--gradient-brand); border-color: transparent; color: #fff; }
/* Nhom checkbox chon nhieu "Tinh trang / Loi mang toi" khi bao hanh -- cung
   ngon ngu pill voi .entry-mode-btn, nhung la checkbox (chon nhieu) khong
   phai nut don (chon 1). :has() de highlight khi tick, khong can JS rieng. */
.admin-hint-inline { font-weight: 400; font-size: 12px; color: var(--color-text-muted); }
.issue-options { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.issue-option { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--color-border); border-radius: 999px; padding: var(--space-2) var(--space-4); font-size: 14px; font-weight: 600; color: var(--color-text-muted); cursor: pointer; user-select: none; }
.issue-option:hover { border-color: var(--color-accent); color: var(--color-ink); }
.issue-option input[type="checkbox"] { accent-color: var(--color-accent); }
.issue-option:has(input:checked) { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.admin-search-form { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; }
.admin-search-form input[type="text"] { flex: 1; min-width: 220px; height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); }
.btn-link { background: none; border: none; color: var(--color-text-muted); font-size: 14px; padding: 0; text-decoration: underline; }
.customer-info-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5); max-width: 640px; }
.customer-info-card p { margin: 0 0 var(--space-2); }
.customer-info-card p:last-child { margin-bottom: 0; }
.admin-note-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-table-scroll { overflow-x: auto; }
.installment-section-form { max-width: 860px; margin-bottom: var(--space-6); }
.installment-editor-wrap { border-radius: var(--radius-sm); overflow: hidden; }
.installment-editor { min-height: 260px; background: #fff; font-size: 15px; }
.installment-editor img { max-width: 100%; height: auto; }

.installment-page { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-4); max-width: 760px; }
.installment-tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.installment-tab {
  background: #fff; border: 1.5px solid var(--color-border); border-radius: 999px;
  padding: var(--space-2) var(--space-5); font-size: 15px; font-weight: 700; color: var(--color-text-muted);
}
.installment-tab:hover { border-color: var(--color-accent); color: var(--color-ink); }
.installment-tab.active { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.installment-block h2 { margin-bottom: var(--space-4); }
.installment-content { line-height: 1.7; }
.installment-content p { margin: 0 0 var(--space-3); }
.installment-content h1, .installment-content h2, .installment-content h3 { margin: var(--space-5) 0 var(--space-3); }
.installment-content ul, .installment-content ol { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.installment-content img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: var(--space-3) 0; }
.installment-content a { color: var(--color-accent); }
.product-edit-layout { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }
.product-edit-layout > .admin-form { flex: 1 1 480px; max-width: 900px; }
.image-management-col { display: flex; flex-direction: column; gap: var(--space-5); flex: 1 1 340px; max-width: 400px; }
.image-management-col .gallery-section { margin-top: 0; }
.image-management-col .gallery-section h2 { font-size: 15px; }
.order-detail-grid { display: flex; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.order-detail-info p { font-size: 14px; margin-bottom: var(--space-1); }
.status-form select { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); }
.back-link { display: inline-block; margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: 14px; }
.back-link:hover { color: var(--color-accent); }
.text-accent { color: var(--color-sale); font-weight: 700; }

.admin-image-preview { width: 96px; height: 96px; object-fit: cover; display: block; border-radius: var(--radius-md); margin-bottom: var(--space-3); border: 1px solid var(--color-border); }
.banner-upload-form { margin-bottom: var(--space-6); max-width: 480px; }
.admin-banner-thumb { width: 160px; height: 43px; object-fit: cover; border-radius: var(--radius-sm); display: block; margin-bottom: var(--space-2); }
.admin-banner-thumb-mobile { width: 64px; height: 80px; object-fit: cover; border-radius: var(--radius-sm); display: block; margin-bottom: var(--space-2); }
.banner-image-form { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
.banner-image-form input[type=file] { font-size: 12px; max-width: 160px; }
.banner-remove-image-form { margin-top: var(--space-1); }
.inline-number-input { width: 60px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-align: center; }
.inline-text-input { width: 160px; height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-2); font-size: 13px; }
.admin-actions-center { justify-content: center; }
.hero-bulk-save-btn { margin-top: var(--space-3); }

.admin-inline-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.admin-inline-form input[type="text"] { height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); min-width: 200px; }
.policy-icon-cell { width: 36px; color: var(--color-accent); }
.policy-icon-cell svg { width: 22px; height: 22px; }
.admin-policy-add-form { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); }
.admin-policy-add-form input[type="text"], .admin-policy-add-form select { height: 36px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); }
.admin-policy-add-form input[name="title"] { min-width: 200px; }
.admin-policy-add-form input[name="description"] { min-width: 220px; flex: 1 1 220px; }
.policy-checkbox-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 240px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); }
.variant-rows { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-2); }
.variant-row-group { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); }
.variant-row { display: grid; grid-template-columns: 1fr 1fr 120px 36px; gap: var(--space-2); align-items: center; }
.variant-row input, .variant-row select { height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); }
.variant-row .btn-remove { height: 36px; }
.variant-colors { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-border); padding-left: var(--space-4); }
.variant-colors-rows { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.color-rows { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.color-row { display: grid; grid-template-columns: 44px 28px 1fr 120px 36px; gap: var(--space-2); align-items: center; }
.color-row-priced { grid-template-columns: 44px 28px 1fr 150px 120px 36px; }
.color-row input[type="text"], .color-row select { height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); }
.color-row .btn-remove { height: 36px; }
.color-hex-swatch { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--color-border); cursor: pointer; }
.color-row-group { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); margin-bottom: var(--space-1); }
.color-row-group:last-child { border-bottom: none; }
.group-rows { display: flex; flex-direction: column; gap: var(--space-6); margin-bottom: var(--space-2); }
.group-row-group { border: 1.5px solid var(--color-accent); border-left-width: 5px; border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-bg-alt); }
.group-row { display: grid; grid-template-columns: 1fr 36px; gap: var(--space-2); align-items: center; }
.group-row input[type="text"] { height: 42px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); font-weight: 700; font-size: 16px; }
.group-row .btn-remove { height: 36px; }
.group-variants { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--color-accent); padding-left: var(--space-4); }
.group-variants-rows { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-2); }
.group-row-group .variant-row-group { background: var(--color-bg); border-color: var(--color-border); box-shadow: var(--shadow-card); }
.color-image-picker { width: 44px; height: 44px; border: 1.5px dashed var(--color-border); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--color-accent); cursor: pointer; overflow: hidden; background: var(--color-bg-alt); }
.color-swatch-picker { position: relative; }
.color-swatch-picker summary { list-style: none; }
.color-swatch-picker summary::-webkit-details-marker { display: none; }
.color-swatch-picker[open] summary { box-shadow: 0 0 0 2px var(--color-accent); }
.color-swatch-grid { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; display: grid; grid-template-columns: repeat(6, 22px); gap: 6px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2); box-shadow: var(--shadow-card-hover); }
.color-swatch-option { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-border); padding: 0; cursor: pointer; }
.color-swatch-option.active { box-shadow: 0 0 0 2px var(--color-accent); }
.color-image-picker:hover { border-color: var(--color-accent); }
.color-image-picker img { width: 100%; height: 100%; object-fit: cover; }
.policy-checkbox-option { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 400; }
#individualPoliciesGroup.is-disabled { opacity: 0.5; }

.banner-section { margin-bottom: var(--space-8); padding-bottom: var(--space-7); border-bottom: 1px solid var(--color-border); }
.banner-section:last-child { border-bottom: none; }
.banner-section h2 { font-size: 18px; margin-bottom: var(--space-2); }
.featured-banner-preview { margin-bottom: var(--space-4); }
.admin-featured-thumb { width: 140px; height: auto; aspect-ratio: 4 / 7; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.category-thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); max-width: 800px; }
.category-thumb-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); text-align: center; }
.category-thumb-card > .status-badge { display: block; margin: 0 auto var(--space-2); width: fit-content; }
.category-thumb-card form + form { margin-top: var(--space-2); }
.admin-thumb-preview { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius-sm); }
.category-thumb-card input[type=file] { font-size: 12px; margin-bottom: var(--space-2); width: 100%; }
.category-name-form { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0; }
.category-name-form input[type=text] { width: 100%; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-2); font-size: 13px; text-align: center; }
.category-name-form input[name=name] { font-weight: 700; }
.category-name-form input[name=navLabel] { font-weight: 400; font-size: 12px; color: var(--color-text-muted); }

.gallery-section { margin-top: var(--space-6); }
.gallery-section h2 { font-size: 16px; }
.gallery-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; max-width: 560px; }
.gallery-manage-item { position: relative; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-border); }
.gallery-manage-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-manage-item form { position: absolute; top: 2px; right: 2px; }
.gallery-manage-item .btn-remove { background: rgba(255,255,255,0.9); border-radius: 999px; width: 24px; height: 24px; font-size: 16px; line-height: 1; padding: 0; }
.gallery-upload-form { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; max-width: 420px; }
label.gallery-pick-btn { display: inline-flex; cursor: pointer; width: fit-content; }
.gallery-staged-list { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.gallery-staged-item {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}
.gallery-staged-item img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.gallery-staged-name { flex: 1; font-size: 13px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gallery-staged-item .btn-remove { flex-shrink: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; width: 26px; height: 26px; font-size: 16px; line-height: 1; padding: 0; }

/* ===== Admin login ===== */
.admin-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-ink); font-family: var(--font-sans); }
.admin-login-card { background: #fff; border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6); width: 100%; max-width: 380px; text-align: center; }
.admin-login-card .logo img { height: 36px; margin: 0 auto; }
.admin-login-subtitle { color: var(--color-text-muted); margin: var(--space-3) 0 var(--space-5); }
.admin-login-card form { text-align: left; }
.admin-login-forgot-link { display: inline-block; margin-top: var(--space-4); font-size: 14px; color: var(--color-text-muted); }
.admin-login-forgot-link:hover { color: var(--color-accent); }
.password-field { position: relative; }
.password-field input { padding-right: 44px !important; }
.password-toggle { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 36px; background: none; border: none; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.password-toggle:hover { color: var(--color-ink); }
.password-toggle.is-active { color: var(--color-accent); }

/* ===== Trade-in (Thu cu doi moi) ===== */
.tradein-intro { margin-bottom: var(--space-7); }
.tradein-price-label { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
.tradein-subsidy-line { font-size: 13px; color: var(--color-success); margin: 0 0 var(--space-2); }
.tradein-card-actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; }
.tradein-card-actions .btn { width: 100%; }
/* Whole card is clickable (page grid + modal "Chon may thu cu" step), not
   just the "Chon san pham" button -- give it a pointer cursor so it reads
   as selectable; the lift/shadow on hover already comes from .product-card:hover. */
.tradein-card { cursor: pointer; }
/* The upgrade-product cards rendered inside the modal reuse .product-card but
   are plain, clickable articles rather than links -- give them a pointer and
   a hover affordance so they read as selectable. */
#upgradeProductGrid .product-card { cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
#upgradeProductGrid .product-card:hover { border-color: var(--color-accent); box-shadow: 0 6px 16px rgba(249, 101, 153, 0.12); }
/* .modal-box h3 (dung chung voi modal canh bao hanh cu) to mau accent cho MOI
   h3 con trong modal -- nhung the gioi thieu san pham (.product-name) cung la
   h3, nen bi an theo mau hong khong dung y. Tra lai mau chu thuong o day. */
#upgradeProductGrid .product-name { color: var(--color-ink); }

.tradein-modal-box { max-width: min(920px, 94vw); text-align: left; }
.tradein-modal-box h3 { font-size: 19px; margin-bottom: var(--space-3); }
.tradein-step-product-name { font-weight: 700; color: var(--color-accent); margin-bottom: var(--space-4); }
.tradein-modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.tradein-modal-actions .btn-block { width: 100%; justify-content: center; }

/* Thanh hien thi cac buoc + dang o buoc nao, giong trang mau cellphoneS:
   day cac vong tron so noi voi nhau bang 1 duong ke, buoc hien tai to mau
   hong gradient, buoc da qua to mau hong dac, buoc chua toi van mau xam. */
.tradein-stepper { display: flex; align-items: flex-start; margin-bottom: var(--space-5); overflow-x: auto; }
.tradein-stepper-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; width: 84px; text-align: center; }
.tradein-stepper-circle {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 2px solid var(--color-border);
  font-weight: 800; font-size: 13px; color: var(--color-text-muted);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tradein-stepper-label { font-size: 11px; font-weight: 600; color: var(--color-text-muted); line-height: 1.25; }
.tradein-stepper-item.active .tradein-stepper-circle { background: var(--gradient-brand); border-color: transparent; color: #fff; }
.tradein-stepper-item.active .tradein-stepper-label { color: var(--color-ink); }
.tradein-stepper-item.done .tradein-stepper-circle { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.tradein-stepper-item.done .tradein-stepper-label { color: var(--color-ink); }
.tradein-stepper-line { flex: 1 1 auto; height: 2px; background: var(--color-border); margin-top: 13px; min-width: 12px; }
.tradein-stepper-line.done { background: var(--color-accent); }

/* Danh sach tinh trang may: moi muc la 1 DONG NGANG full-width (nhan + mo ta
   nam ben trai cung 1 dong, gia nam ben phai) -- giong dung cach hien thi
   cua ref cellphoneS, khong phai luoi the nhu truoc. */
.tradein-condition-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 50vh; overflow-y: auto; padding-right: 2px; }
.tradein-condition-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; text-align: left;
  background: #fff; border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.tradein-condition-row:hover { border-color: var(--color-accent); }
.tradein-condition-row.active { border-color: var(--color-accent); background: #fff0f5; }
.tradein-condition-row-text { flex: 1 1 auto; font-size: 14px; line-height: 1.5; }
.tradein-condition-row-label { color: var(--color-ink); }
.tradein-condition-row-desc { color: var(--color-text-muted); }
.tradein-condition-row-price { font-weight: 800; color: var(--color-accent); font-size: 16px; white-space: nowrap; flex: 0 0 auto; }

#upgradeCategoryTabs, #tradeInProductCategoryTabs { margin-bottom: var(--space-4); }
/* Cot theo chieu rong THAT cua modal, khong theo breakpoint cua trang (vd
   .product-grid tu dong 5 cot tu 1700px man hinh, bat ke modal chi rong
   ~900px) -- dung auto-fill/minmax de luon vua khung, khong bi chen/cat chu. */
/* padding-top chua chinh cho hieu ung hover cua .product-card (translateY(-4px)
   + box-shadow) -- khong thi luoi overflow-y:auto se cat phang canh tren cua
   the san pham o hang dau khi di chuot vao. */
#upgradeProductGrid, #tradeInProductGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--space-4); max-height: 55vh; overflow-y: auto; padding: var(--space-3) var(--space-1) var(--space-1); }

/* Nut lui "Quay lai buoc 1" nho, gon, nam ngay duoi tieu de buoc. */
.tradein-step-back-link { margin-bottom: var(--space-3); }

/* 2 nut chon che do o buoc "tinh trang may" phai co cung 1 kieu bo tron
   (mac dinh .btn-primary la pill con .btn-outline vuong hon) -- ep ca 2
   dung chung border-radius pill de dong bo nhu ref. */
.tradein-mode-actions .btn { border-radius: 999px; min-height: 48px; flex: 1 1 220px; }

/* Note nho, in nghieng, duoi cung buoc "tinh trang may" -- canh bao gia co
   the chenh lech sau khi kiem tra truc tiep tai cua hang. */
.tradein-condition-note { margin-top: var(--space-3); font-size: 12.5px; font-style: italic; color: var(--color-text-muted); text-align: center; }

/* The tom tat "san pham muon thu cu"/"san pham muon len doi" o buoc xac
   nhan cuoi cung, kem nut doi san pham khac. */
.tradein-confirm-label { font-weight: 700; font-size: 13px; color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); text-transform: uppercase; letter-spacing: 0.02em; }
/* :first-of-type la theo TUNG PARENT rieng -- nhan "San pham muon len doi"
   nam trong 1 div con (#tradeInConfirmUpgradeBlock) nen cung la "first" cua
   the cha do, vo tinh bi an luon margin-top, dinh sat vao khung thu cu phia
   tren. Dung class rieng de chi mat dung nhan dau tien that su (ngay sau h3). */
.tradein-confirm-label-first { margin-top: 0; }
.tradein-confirm-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.tradein-confirm-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; }
.tradein-confirm-card-info { display: flex; flex-direction: column; gap: 2px; }
.tradein-confirm-card-name { font-weight: 700; font-size: 14px; }
.tradein-confirm-card-price { font-weight: 800; color: var(--color-accent); font-size: 15px; }

.tradein-summary { background: var(--color-bg-alt); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.tradein-summary-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; gap: var(--space-3); }
.tradein-summary-row span { color: var(--color-text-muted); }
.tradein-summary-row strong { font-weight: 700; text-align: right; }
.tradein-summary-row-total { border-top: 1px dashed var(--color-border); padding-top: var(--space-2); margin-top: var(--space-1); }
.tradein-summary-row-total strong { color: var(--color-accent); font-size: 16px; }

/* ===== Admin: trade-in condition rows (vd san pham-form) ===== */
/* Form them/sua san pham thu cu rong hon .admin-form mac dinh (640px) --
   ban thiet ke ban dau hep qua lam o "Mo ta ngan" bi cham, go vao khong
   thay het chu, nen rieng form nay duoc noi rong ra. */
#tradeInForm { max-width: 920px; }
.condition-rows { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.condition-row-group { width: 100%; }
.condition-row { display: grid; grid-template-columns: 1fr 1.7fr 1fr auto; gap: var(--space-2); align-items: center; }
@media (max-width: 720px) { .condition-row { grid-template-columns: 1fr; } }
.condition-row input[type="text"] {
  height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); font-size: 14px;
}
/* Nut "+ Them muc tinh trang" dang dinh sat vao khoi nut Luu/Huy phia duoi
   vi .admin-form-actions chua co margin-top rieng -- them khoang cach duoi
   nut nay cho thoang. */
#addConditionRowBtn { margin-bottom: var(--space-4); }

/* Hang chon san pham nguon + nut "Copy muc tinh trang" o form them/sua san
   pham thu cu. */
.tradein-copy-conditions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.tradein-copy-conditions select { flex: 1 1 260px; height: 38px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-2); font-size: 14px; }

/* ===== Admin: trade-in "co nhieu Dung luong / Mau" (has_variants) ===== */
/* 1 khoi Dung luong: dong tieu de (ten + nut xoa) + danh sach Mau long ben
   trong -- giong het cach trang Them san pham lam voi Dung luong/Mau. */
.storage-group-row { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); margin-bottom: var(--space-3); background: var(--color-bg-alt); }
.storage-group-header { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.storage-group-header input[type="text"] { height: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); font-size: 14px; font-weight: 600; background: #fff; }
.storage-group-colors { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }

/* 1 dong Mau: swatch chon mau (giong trang San pham) + ten mau + 1 o gia cho
   moi Muc tinh trang + nut xoa, bao boc trong the trang de phan biet voi nen
   xam cua khoi Dung luong cha. */
.color-option-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.color-option-row .color-row-label { height: 40px; width: 160px; flex: 0 0 160px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-3); font-size: 14px; }
.color-option-row .color-remove-btn { margin-left: auto; }

.color-condition-prices { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 260px; }
.color-condition-price { display: flex; align-items: center; gap: var(--space-1); background: var(--color-bg-alt); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.color-condition-price-label { font-size: 12px; color: var(--color-text-muted); white-space: nowrap; max-width: 110px; overflow: hidden; text-overflow: ellipsis; }

/* Nut "+ Them dung luong" la phan tu cuoi cung cua khoi "co nhieu Dung
   luong/Mau" (dinh ngay truoc khoi nut Luu/Huy), dinh sat vao nhau vi
   .admin-form-actions chua co margin-top rieng -- them khoang cach duoi nut
   nay cho thoang, giong dung cach da xu ly cho #addConditionRowBtn. */
#addStorageGroupBtn { margin-bottom: var(--space-4); }
.color-condition-price .variant-price-cell { width: 100px; height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0 var(--space-2); font-size: 13px; }

/* ===== Admin: bulk-select toolbar (vd "San pham duoc len doi") ===== */
.admin-bulk-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.admin-bulk-toolbar .btn-primary { margin-left: auto; }