/* ==========================================================================
   Hệ màu — Cam & Trắng
   Nguyên tắc: nền trắng, chữ gần đen ấm, cam CHỈ dùng cho hành động và điểm nhấn.
   Không gradient nền, không đổ bóng màu, không kính mờ.
   ========================================================================== */

/* ==========================================================================
   Chữ — Inter (thân bài) + Plus Jakarta Sans (tiêu đề)
   Tự host trong public/fonts/ nên CSP `font-src 'self'` giữ nguyên, không gọi
   mạng ngoài, không nhấp nháy vì CDN chậm. Cả hai đều là font BIẾN (variable):
   một file phủ mọi độ đậm 400–800, nhẹ hơn nạp 4–5 file tĩnh.
   Chỉ nạp 3 subset thật sự dùng: vietnamese, latin-ext, latin — trình duyệt tự
   chọn file theo `unicode-range`, chữ Việt có dấu lấy từ subset vietnamese.
   Đổi font thì sửa cả token --font-sans/--font-display bên dưới.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/jakarta-vietnamese.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/jakarta-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/jakarta-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Nền & bề mặt */
  --bg: #ffffff;
  --bg-2: #ffffff;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-muted: #faf8f6;
  --border: #e7e2dd;
  --border-strong: #d5cec7;

  /* Chữ */
  --text: #1c1917;
  --text-2: #44403c;
  --muted: #7a716a;

  /* Cam thương hiệu */
  --brand: #e2570f;
  --brand-rgb: 226, 87, 15;
  --brand-hover: #c2470a;
  --brand-2: #b8410a;
  --brand-2-rgb: 184, 65, 10;
  --brand-soft: #fff4ec;
  --brand-border: #f6cdad;

  /* Điểm nhấn phụ (badge đếm, cảnh báo) */
  --accent: #c2410c;
  --accent-rgb: 194, 65, 12;

  /* Thanh điều hướng tối */
  --ink: #1c1917;

  --shadow: 0 1px 2px rgba(28, 25, 23, 0.04), 0 8px 20px -14px rgba(28, 25, 23, 0.16);
  --shadow-lg: 0 1px 3px rgba(28, 25, 23, 0.05), 0 18px 34px -20px rgba(28, 25, 23, 0.24);

  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  --font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Chuyển động — dùng chung một bộ nhịp cho toàn site.
     --ease là đường cong "chậm ở hai đầu" nhẹ, cho cảm giác mượt chứ không nảy. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.13s;
  --dur: 0.2s;
  --dur-slow: 0.34s;

  /* Vòng focus dùng chung — mọi thứ bấm được đều dùng đúng vòng này. */
  --focus-ring: 0 0 0 3px rgba(var(--brand-rgb), 0.22);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #16130f;
  --bg-2: #16130f;
  --surface: #1f1b16;
  --surface-solid: #1f1b16;
  --surface-muted: #262019;
  --border: #342c24;
  --border-strong: #453a30;

  --text: #f5f1ec;
  --text-2: #d6cec5;
  --muted: #a1968b;

  --brand: #fb8b3c;
  --brand-rgb: 251, 139, 60;
  --brand-hover: #ffa05c;
  --brand-2: #e2570f;
  --brand-2-rgb: 226, 87, 15;
  --brand-soft: #2b1c11;
  --brand-border: #5a3a1e;

  --accent: #fb923c;
  --accent-rgb: 251, 146, 60;

  --ink: #100d0a;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 20px -14px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.45), 0 18px 34px -20px rgba(0, 0, 0, 0.7);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

@media (min-width: 1400px) {
  html {
    font-size: 16.5px;
  }
}

@media (min-width: 1800px) {
  html {
    font-size: 17px;
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
  flex: 0 0 auto;
}

body {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.006em;
  background: var(--bg);
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  /* cv11 = chữ "a"/"g" một tầng, dễ đọc hơn ở cỡ nhỏ; ss03 chỉnh dấu tiếng Việt. */
  font-feature-settings: "cv11" 1, "ss03" 1;
  min-height: 100vh;
  overflow-x: hidden;
  caret-color: var(--brand);
}

::selection {
  background: var(--brand);
  color: #fff;
}

a {
  color: var(--brand);
  text-decoration-color: var(--brand-border);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--brand-hover);
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 1400;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateY(-180%);
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
  opacity: 1;
}

.skip-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.22rem rgba(var(--brand-rgb), 0.14), var(--shadow);
}

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 1350;
  pointer-events: none;
  background: transparent;
}

.scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--brand);
}

.site-shell {
  width: min(100%, 1560px);
  margin: 0 auto;
  padding-inline: clamp(1.1rem, 2.2vw, 1.75rem);
}

/* ==========================================================================
   Thang tiêu đề — cỡ co giãn theo bề rộng màn hình (clamp), chữ càng lớn thì
   khoảng cách con chữ càng âm và dòng càng khít. Các component phía dưới file
   vẫn tự đặt cỡ riêng khi cần (.section-title, .pd-name, .page-intro-title...)
   và sẽ thắng vì đứng sau — khối này chỉ lo phần mặc định.
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.navbar-brand, .section-title, .page-intro-title {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.028em;
}

h2 {
  font-size: clamp(1.35rem, 1.12rem + 0.85vw, 1.72rem);
  line-height: 1.22;
  letter-spacing: -0.024em;
}

h3 {
  font-size: clamp(1.15rem, 1.03rem + 0.45vw, 1.36rem);
  line-height: 1.3;
  letter-spacing: -0.019em;
}

h4 {
  font-size: 1.1rem;
  line-height: 1.36;
  letter-spacing: -0.015em;
}

h5 {
  font-size: 0.98rem;
  line-height: 1.4;
  letter-spacing: -0.011em;
}

h6 {
  font-size: 0.88rem;
  line-height: 1.45;
  letter-spacing: -0.006em;
}

/* Đoạn văn dài: tránh dòng cuối trơ một chữ. */
p, .page-intro-text, .admin-action-text, .mini-muted {
  text-wrap: pretty;
}

/* Nền trơn — bỏ hiệu ứng "vệt màu trôi" để trang đứng yên và sạch. */
.page-bg {
  display: none;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Header trắng, viền mảnh — không kính mờ, không bóng màu. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--surface-solid);
  border-bottom: 1px solid var(--border);
}

.announcement-bar {
  background: var(--ink);
  color: #f2ede8;
  font-size: 0.9rem;
}

html[data-theme="dark"] .announcement-bar {
  border-top: 1px solid var(--border);
}

.announcement-marquee {
  overflow: hidden;
}

.announcement-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: announcement-scroll var(--announcement-duration, 24s) linear infinite;
  will-change: transform;
}

/* Bản sao thứ hai chỉ tồn tại để chạy chữ nối liền mạch. Khi thông báo ngắn hơn bề rộng
   màn hình thì không cần chạy, và nếu vẫn hiện bản sao thì trông như bị lặp nội dung.
   JS đo bề rộng rồi gắn class này. */
.announcement-marquee.is-static .announcement-track {
  animation: none;
  width: auto;
}

.announcement-marquee.is-static .announcement-item[aria-hidden="true"] {
  display: none;
}

.announcement-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 2.2rem 0.4rem 0;
  white-space: nowrap;
  color: #f2ede8;
}

.announcement-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: #fff;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.announcement-text {
  font-weight: 600;
  line-height: 1.1;
}

@keyframes announcement-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.navbar {
  padding: 1rem 0;
}

.site-header .navbar > .site-shell {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--text) !important;
  letter-spacing: -0.025em;
}

.brand-mark {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--brand);
  flex: 0 0 auto;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.brand-mark-inline {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: var(--radius-sm);
}

/* Nav: chữ tối trên nền trắng, mục đang xem gạch chân cam. */
.nav-link {
  position: relative;
  color: var(--text-2) !important;
  font-weight: 500;
  border-radius: 0;
  padding: 0.55rem 0.15rem !important;
  margin-inline: 0.5rem;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: var(--text) !important;
}

.nav-link.active {
  color: var(--brand) !important;
  font-weight: 600;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  background: var(--brand);
}

.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  margin-left: 0.45rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: rgba(var(--accent-rgb), 0.96);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand-2);
  font-size: 0.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.86rem;
  text-decoration: none;
  transition: border-color 0.15s ease;
}

.account-pill strong {
  font-weight: 600;
  color: var(--text);
}

.account-pill:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.theme-toggle {
  width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Thẻ: nền đặc, viền mảnh, bo góc vừa. Không kính mờ, không nhấc lên khi hover. */
.glass-card, .dashboard-card, .table-card, .form-card {
  background: var(--surface-solid);
  border: 1px solid var(--border);
  box-shadow: none;
  transition: border-color 0.18s ease;
}

.glass-card:hover,
.dashboard-card:hover,
.table-card:hover,
.form-card:hover {
  border-color: var(--border-strong);
}

.hero-copy {
  max-width: 42rem;
}

/* ==========================================================================
   Mở đầu trang — thay cho banner/carousel cũ.
   Một dòng tiêu đề, một dòng mô tả, rồi vào thẳng bộ lọc và sản phẩm.
   ========================================================================== */

.page-intro {
  padding: 0.5rem 0 1.5rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}

.page-intro-title {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.4rem;
  color: var(--text);
}

.page-intro-text {
  margin: 0;
  max-width: 46rem;
  color: var(--muted);
  font-size: 0.98rem;
}

/* Nhãn mục: chữ nhỏ in hoa + gạch cam bên trái — thay cho "viên thuốc" bo tròn. */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 0;
  padding: 0 0 0 0.6rem;
  border-left: 2px solid var(--brand);
  background: none;
  color: var(--brand-2);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 1rem;
}

.hero-badge.hero-brand-pill {
  gap: 0.6rem;
  color: var(--text);
}

/* ==========================================================================
   Lưới sản phẩm — thẻ tối giản: ảnh, tên, một dòng thông tin, giá.
   Cả thẻ là một link; không nhồi nút và nhãn vào từng ô.
   Markup tương ứng: views/index.ejs và buildProductCard() trong public/js/app.js
   ========================================================================== */

.category-block {
  margin-bottom: 1.85rem;
}

.category-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}

.category-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text);
}

.category-count {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Lưới tự co: số cột tính theo bề rộng thật, không cố định 4 cột như grid Bootstrap.
   Đổi --tile-min là đổi mật độ toàn site. */
.product-grid {
  --tile-min: 196px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--tile-min), 1fr));
  gap: 0.8rem;
}

.product-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease;
}

.product-tile:hover {
  border-color: var(--brand-border);
  color: inherit;
}

.product-tile-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}

.product-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sản phẩm chưa có ảnh: vẽ ô trống gọn gàng thay vì để thẻ <img> hỏng
   (trước đây trỏ vào /images/showcase-*.svg — những file này không tồn tại). */
.product-tile-media.is-empty::after {
  content: "Chưa có ảnh";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 9px,
      rgba(0, 0, 0, 0.02) 9px,
      rgba(0, 0, 0, 0.02) 18px
    );
}

html[data-theme="dark"] .product-tile-media.is-empty::after {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 9px,
      rgba(255, 255, 255, 0.03) 9px,
      rgba(255, 255, 255, 0.03) 18px
    );
}

.product-tile-flag {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  padding: 0.1rem 0.34rem;
  border-radius: 4px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 0.63rem;
  font-weight: 600;
}

.product-tile-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.55rem 0.6rem 0.6rem;
}

.product-tile-name {
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-tile-meta {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-tile-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.product-tile-price {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.product-tile-stock {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Màn rộng: dày hơn nữa. Điện thoại: 2 cột thay vì 1 cột to. */
@media (min-width: 1600px) {
  .product-grid {
    --tile-min: 178px;
  }
}

@media (max-width: 575.98px) {
  .product-grid {
    --tile-min: 142px;
    gap: 0.6rem;
  }
}

.product-results-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 1.5rem;
  font-size: 0.84rem;
}

/* ==========================================================================
   Trang thanh toán — một cột hẹp, một form, đọc từ trên xuống là xong.
   ========================================================================== */

.checkout-page {
  width: min(100%, 34rem);
  margin: 0 auto;
  padding-block: 0.5rem 2rem;
}

.checkout-product {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  margin-bottom: 1.25rem;
}

.checkout-product-media {
  position: relative;
  flex: 0 0 auto;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-solid);
  border: 1px solid var(--border);
}

.checkout-product-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.checkout-product-body {
  flex: 1;
  min-width: 0;
}

.checkout-product-name {
  font-weight: 600;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.checkout-product-meta {
  margin-top: 0.15rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.checkout-product-price {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.checkout-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 0.9rem;
}

.checkout-field {
  margin-bottom: 1rem;
  min-width: 0;
}

.checkout-coupon {
  display: flex;
  gap: 0.4rem;
}

.checkout-coupon .form-control {
  min-width: 0;
}

.checkout-coupon .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.checkout-hint {
  margin-top: 0.25rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.checkout-hint.is-warning,
.checkout-balance .is-warning {
  color: #b3261e;
}

.checkout-hint.is-ok {
  color: #2f6b34;
}

/* Bảng tiền: chỉ dùng viền và khoảng trắng, không đóng khung thêm một lớp thẻ nữa. */
.checkout-summary {
  border-top: 1px solid var(--border);
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  margin-bottom: 1.25rem;
}

.checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.3rem 0;
  font-size: 0.92rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.checkout-line.checkout-total {
  margin-top: 0.45rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 1.05rem;
  color: var(--text);
}

.checkout-total strong {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--brand-2);
}

.checkout-balance {
  font-size: 0.84rem;
  color: var(--muted);
}

.checkout-stale {
  font-size: 0.78rem;
  color: var(--brand-2);
}

.checkout-stale[hidden] {
  display: none;
}

/* Ô ảnh nhỏ trên trang thanh toán: chỉ cần gạch chéo, không kèm chữ như thẻ sản phẩm. */
.checkout-product-media.is-empty {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px,
      rgba(0, 0, 0, 0.04) 6px,
      rgba(0, 0, 0, 0.04) 12px
    );
}

html[data-theme="dark"] .checkout-product-media.is-empty {
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.05) 6px,
      rgba(255, 255, 255, 0.05) 12px
    );
}

.checkout-notice {
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.85rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  font-size: 0.88rem;
  color: var(--text-2);
}

.checkout-foot {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
}

.checkout-back {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
}

.checkout-back:hover {
  color: var(--brand);
}

@media (max-width: 575.98px) {
  .checkout-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ==========================================================================
   Ô xác minh chống bot (captcha)
   ========================================================================== */

.captcha-field {
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

.captcha-row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.captcha-image {
  display: block;
  height: 52px;
  width: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  /* Chặn bôi đen / kéo thả ảnh cho đỡ bị sao chép máy móc. */
  user-select: none;
  -webkit-user-drag: none;
}

.captcha-reload {
  flex: 0 0 auto;
  padding: 0.45rem 0.55rem;
  line-height: 1;
}

.captcha-input {
  letter-spacing: 0.22em;
  min-width: 6.5rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.captcha-input::placeholder {
  letter-spacing: normal;
}

/* Ô mồi bắt bot: giấu khỏi mắt người nhưng KHÔNG dùng display:none —
   vài con bot bỏ qua ô ẩn hẳn, còn ô đẩy ra ngoài màn hình thì chúng vẫn điền. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 400px) {
  .captcha-row {
    grid-template-columns: auto auto;
  }

  .captcha-input {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Trang chi tiết sản phẩm
   Ảnh trái + thông tin phải + hộp mua bên cạnh, để tên/giá/nút mua nằm gọn
   trong màn hình đầu tiên. Bản cũ đặt ảnh full-width cao 420px, phải cuộn mới thấy giá.
   ========================================================================== */

.pd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 1.75rem;
  align-items: start;
}

.pd-head {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* contain chứ không phải cover: ảnh sản phẩm ở đây đủ kiểu tỉ lệ (logo, ảnh chụp màn hình),
   cover sẽ cắt mất phần quan trọng. */
.pd-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
  overflow: hidden;
}

.pd-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.pd-media.is-empty::after {
  content: "Chưa có ảnh";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.pd-info {
  min-width: 0;
}

.pd-name {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.pd-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.pd-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.pd-stock {
  font-size: 0.84rem;
  color: var(--muted);
}

.pd-stock.is-out {
  color: #b3261e;
  font-weight: 600;
}

.pd-desc {
  margin: 1rem 0 0;
  color: var(--text-2);
  font-size: 0.94rem;
}

/* Thông số dạng danh sách định nghĩa: nhãn xám, giá trị đậm, xếp thành cột tự co. */
.pd-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.55rem 1.25rem;
  margin: 1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.86rem;
}

.pd-specs dt {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.76rem;
}

.pd-specs dd {
  margin: 0.1rem 0 0;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.pd-note {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.pd-section {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.pd-section:first-of-type {
  border-top: 0;
  margin-top: 0;
}

.pd-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.pd-section-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.9rem;
  color: var(--text);
}

.pd-section-head .pd-section-title {
  margin: 0;
}

.pd-reviews {
  display: grid;
  gap: 0.7rem;
}

.pd-review {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
}

.pd-review-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
}

.pd-review-body {
  font-size: 0.9rem;
  color: var(--text-2);
}

.pd-review-form {
  margin-top: 1rem;
}

.pd-review-form-row {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: 0.45rem;
}

/* Hộp mua hàng: dính theo màn hình khi cuộn, luôn trong tầm tay. */
.pd-buy {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-solid);
  padding: 1.1rem;
}

.pd-buy-title {
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.pd-field {
  margin-bottom: 0.85rem;
}

.pd-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.7rem 0;
  margin-bottom: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  color: var(--text-2);
}

.pd-subtotal strong {
  font-size: 1.1rem;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
}

.pd-buy-note {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  color: var(--muted);
  text-align: center;
}

.pd-related {
  padding-top: 1.75rem;
  margin-top: 2rem;
  border-top: 1px solid var(--border);
}

/* Màn hẹp: xếp một cột, nhưng phải đưa hộp mua hàng lên NGAY SAU thông tin sản phẩm.
   Nếu để nguyên thứ tự trong HTML thì nút mua rơi xuống dưới phần đánh giá.
   display:contents làm .pd-main tan ra, để các khối con thành ô lưới và sắp lại được. */
@media (max-width: 991.98px) {
  .pd-layout {
    grid-template-columns: 1fr;
  }

  .pd-main {
    display: contents;
  }

  .pd-head {
    order: 1;
  }

  .pd-aside {
    order: 2;
  }

  .pd-section {
    order: 3;
  }

  .pd-buy {
    position: static;
  }
}

@media (max-width: 575.98px) {
  .pd-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .pd-media {
    max-width: 13rem;
  }

  .pd-review-form-row {
    grid-template-columns: 1fr;
  }
}

/* Trang chi tiết: một dòng danh mục, một dòng thông tin — thay cho hàng loạt nhãn. */
.detail-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand-2);
  margin-bottom: 0.45rem;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.detail-meta > span + span {
  padding-left: 0.9rem;
  border-left: 1px solid var(--border);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.stat-tile {
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.section-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text);
}

.glass-card, .dashboard-card, .table-card, .form-card {
  border-radius: var(--radius);
}

.card-soft {
  background: var(--surface-muted);
}

/* Xuất hiện nhẹ khi cuộn — nhanh và kín đáo, không phóng to/thu nhỏ. */
html.has-js .reveal-card {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 0.32s ease, transform 0.32s ease;
  transition-delay: calc(var(--reveal-order, 0) * 25ms);
}

html.has-js .reveal-card.is-revealed {
  opacity: 1;
  transform: none;
}

/* Nhãn: chữ nhỏ, viền mảnh, bo góc nhỏ — đọc như nhãn dán chứ không như "viên kẹo". */
.badge-soft,
.badge-green,
.badge-orange,
.badge-danger,
.badge-muted,
.badge-info {
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.28rem 0.5rem;
}

.badge-soft {
  background: var(--brand-soft);
  color: var(--brand-2);
  border: 1px solid var(--brand-border);
}

.badge-green {
  background: #eef7ee;
  color: #2f6b34;
  border: 1px solid #cfe4d0;
}

.badge-orange {
  background: var(--brand-soft);
  color: var(--brand-2);
  border: 1px solid var(--brand-border);
}

.badge-danger {
  background: #fdeeec;
  color: #b3261e;
  border: 1px solid #f3ccc7;
}

.badge-muted,
.badge-info {
  background: var(--surface-muted);
  color: var(--muted);
  border: 1px solid var(--border);
}

html[data-theme="dark"] .badge-green {
  background: #1b2a1c;
  color: #8fce93;
  border-color: #2f4630;
}

html[data-theme="dark"] .badge-danger {
  background: #2d1917;
  color: #f2a49c;
  border-color: #4a2a26;
}

.product-meta {
  font-size: 0.9rem;
  color: var(--muted);
}

.price {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.muted {
  color: var(--muted);
}

.filter-panel {
  position: sticky;
  top: 6.5rem;
}

.products-section {
  width: 100%;
  margin: 0;
  padding: 0 0 2rem;
}

.support-hero {
  border-radius: var(--radius-lg);
}

.support-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  min-width: min(100%, 340px);
}

.support-stat-card {
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.support-stat-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  margin-top: 0.2rem;
}

.support-filter-form {
  width: min(100%, 420px);
}

.support-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 0.7rem;
}

.support-filter-grid .form-control,
.support-filter-grid .form-select {
  min-height: 2.2rem;
  height: 2.2rem;
  padding-block: 0;
  font-size: 0.86rem;
  border-radius: var(--radius-sm);
}

.support-thread-panel,
.support-chat-card,
.support-compose-panel,
.support-sidebar {
  border-radius: 1.4rem;
}

.support-thread-list {
  display: grid;
  gap: 0.85rem;
}

.support-thread-item {
  display: block;
  color: inherit;
  text-decoration: none;
  padding: 1rem 1.05rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.support-thread-item:hover {
  color: inherit;
  box-shadow: none;
}

.support-thread-item.is-unread {
  border-color: rgba(var(--brand-2-rgb), 0.28);
  box-shadow: 0 18px 32px rgba(var(--brand-2-rgb), 0.08);
}

.support-thread-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
}

.support-thread-subtitle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.28rem;
  color: var(--muted);
  font-size: 0.82rem;
}

.support-thread-preview {
  margin-top: 0.7rem;
  color: var(--text);
  opacity: 0.9;
}

.support-thread-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.8rem;
}

.support-empty-state {
  padding: 2rem 1rem;
  border-radius: 1.3rem;
  text-align: center;
  border: 1px dashed var(--border);
  background: var(--surface-muted);
}

.support-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.support-message-list {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  max-height: min(70vh, 52rem);
  overflow: auto;
  padding-right: 0.2rem;
}

.support-message {
  max-width: min(88%, 42rem);
  padding: 0.95rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-muted);
  box-shadow: none;
}

.support-message-self {
  margin-left: auto;
  background: var(--brand-soft);
  border-color: var(--brand-border);
}

.support-message-peer {
  margin-right: auto;
}

.support-message-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.55rem;
}

.support-message-body {
  white-space: pre-wrap;
  line-height: 1.65;
}

.support-composer {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

html[data-theme="dark"] .support-stat-card,
html[data-theme="dark"] .support-empty-state,
html[data-theme="dark"] .support-thread-item,
html[data-theme="dark"] .support-message {
  background: var(--surface);
}

html[data-theme="dark"] .support-message-self {
  background: var(--brand-soft);
}

html[data-theme="dark"] .support-thread-item.is-unread {
  border-color: rgba(var(--brand-2-rgb), 0.28);
}

.product-toolbar,
.admin-hero {
  position: relative;
  overflow: hidden;
}

/* Bỏ "quầng sáng" trang trí góc — nền phẳng cho gọn. */
.product-toolbar::after,
.admin-hero::after {
  content: none;
}

/* ==========================================================================
   Bảng lọc sản phẩm — một dải gọn, không phải một khối form to.
   Ô tìm kiếm và khoảng giá chiếm 2 cột; các ô còn lại 1 cột và tự xuống dòng.
   ========================================================================== */

.product-toolbar {
  border-radius: var(--radius);
}

.product-toolbar.is-loading {
  cursor: progress;
}

.product-toolbar-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 0.5rem 0.55rem;
  align-items: end;
}

.toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.toolbar-field-search,
.toolbar-field-range {
  grid-column: span 2;
}

.toolbar-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.toolbar-range-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.product-toolbar-form .form-control,
.product-toolbar-form .form-select {
  min-height: 2.2rem;
  height: 2.2rem;
  padding-block: 0;
  padding-inline: 0.55rem;
  font-size: 0.86rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  /* background-color, KHÔNG dùng shorthand `background` — shorthand sẽ xoá
     mũi tên dropdown (background-image) mà Bootstrap gắn cho .form-select. */
  background-color: var(--surface-solid);
  border-color: var(--border-strong);
  caret-color: var(--text);
}

.product-toolbar-form .form-select {
  padding-right: 1.5rem;
  background-position: right 0.4rem center;
  background-size: 11px 8px;
}

.product-toolbar-form .form-control::placeholder {
  color: var(--muted);
  opacity: 1;
}

.product-toolbar-form .form-control:focus,
.product-toolbar-form .form-select:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 2px rgba(var(--brand-rgb), 0.16);
}

/* Điện thoại: 2 ô một dòng, ô tìm kiếm và khoảng giá chiếm trọn dòng. */
@media (max-width: 575.98px) {
  .product-toolbar-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar-field-search,
  .toolbar-field-range {
    grid-column: 1 / -1;
  }
}

.product-results-summary {
  transition: opacity 0.16s ease;
}

.product-feature-grid {
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.product-feature-grid.is-loading {
  opacity: 0.58;
  filter: saturate(0.92);
}

.product-results-empty {
  margin-top: 1rem;
}

.product-results-empty .glass-card {
  border-radius: 1.4rem;
}

.empty-state-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: rgba(var(--brand-rgb), 0.08);
}

html[data-theme="dark"] .product-toolbar {
  color-scheme: dark;
}

html[data-theme="dark"] .product-toolbar-form .form-control,
html[data-theme="dark"] .product-toolbar-form .form-select {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

/* Mũi tên dropdown của Bootstrap là ảnh màu tối — đảo màu cho thấy trên nền tối. */
html[data-theme="dark"] .product-toolbar-form .form-select {
  filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1968b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html[data-theme="dark"] .product-toolbar-form .form-control::placeholder {
  color: var(--muted);
}


.product-form-preview {
  width: 8rem;
  height: 8rem;
  border-radius: var(--radius);
  object-fit: cover;
  flex: 0 0 auto;
}

.classification-editor {
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-muted);
}

.classification-total-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(var(--brand-2-rgb), 0.16);
  background: rgba(var(--brand-2-rgb), 0.08);
  white-space: nowrap;
}

.classification-total-pill strong {
  color: var(--text);
}

.classification-row {
  padding: 0.95rem;
  border-radius: var(--radius);
  border: 1px dashed rgba(var(--brand-2-rgb), 0.22);
  background: var(--surface-muted);
}

.classification-remove-btn {
  min-height: 2.6rem;
}

html[data-theme="dark"] .skip-link {
  background: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .classification-editor,
html[data-theme="dark"] .classification-row {
  background: var(--surface);
}

html[data-theme="dark"] .scroll-progress {
  background: var(--surface);
}

.admin-hero {
  background: var(--surface-muted);
  border-left: 3px solid var(--brand);
}

.admin-card-title {
  color: var(--text);
}

.admin-card-link {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.admin-card-link:hover {
  color: var(--brand-2);
}

.admin-section-card {
  overflow: hidden;
}

.admin-table {
  margin-bottom: 0;
}

.admin-table td,
.admin-table th {
  vertical-align: middle;
}

.admin-preview-panel {
  position: sticky;
  top: 6.5rem;
}

.banner-editor-card {
  padding: 1rem;
  border-radius: var(--radius);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.banner-editor-preview,
.banner-preview-card img {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-muted);
}

.banner-editor-preview img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}

.banner-preview-card {
  padding: 0.95rem;
  border-radius: var(--radius);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.banner-preview-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.admin-hero .section-title {
  font-size: clamp(1.95rem, 3.2vw, 2.6rem);
  line-height: 1.05;
}

.admin-hero-copy {
  max-width: 46rem;
}

.admin-overview-card {
  height: 100%;
}

.admin-overview-list {
  display: grid;
  gap: 0.75rem;
}

.admin-overview-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  background: var(--surface-muted);
  border: 1px solid var(--border);
}

.admin-overview-item strong {
  display: block;
  margin-bottom: 0.2rem;
}

.admin-meta-card {
  position: relative;
  overflow: hidden;
}

.admin-meta-card::after {
  content: none;
  pointer-events: none;
}

.admin-meta-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.admin-meta-value {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  line-height: 1.02;
  font-weight: 800;
  color: var(--text);
}

.admin-meta-note {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--muted);
}

.admin-meta-icon {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand-rgb), 0.1);
  color: var(--brand);
  flex: 0 0 auto;
}

.admin-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

.admin-section-head .section-title {
  margin-bottom: 0.35rem;
}

.admin-section-head .mini-muted {
  margin-bottom: 0;
}

.admin-action-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.admin-action-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--brand-rgb), 0.1);
  color: var(--brand);
  flex: 0 0 auto;
}

.admin-action-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.admin-action-text {
  margin-bottom: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--muted);
}

.admin-action-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* Lối tắt quản trị: thẻ link gọn, icon + tên + số đếm. Không gạch chân, không đổi màu chữ. */
.admin-quick-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--text);
}

.admin-quick-link:hover {
  border-color: var(--border-strong);
  text-decoration: none;
  color: var(--text);
}

.admin-quick-link .admin-action-title {
  display: block;
  margin-bottom: 0.1rem;
}

.admin-quick-body {
  min-width: 0;
}

.admin-table-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.admin-table-actions form {
  margin-bottom: 0;
}

.admin-role-select {
  min-width: 9rem;
}

.admin-table .badge {
  white-space: nowrap;
}

html[data-theme="dark"] .admin-overview-item {
  background: var(--surface);
}

html[data-theme="dark"] .account-pill,
html[data-theme="dark"] .admin-meta-icon,
html[data-theme="dark"] .admin-action-icon {
  background: rgba(var(--brand-rgb), 0.14);
}

html[data-theme="dark"] .banner-editor-card,
html[data-theme="dark"] .banner-preview-card {
  background: var(--surface);
}

@media (max-width: 767.98px) {
  .admin-section-head,
  .admin-action-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Bảng — dùng nhiều nhất ở trang quản trị, nên ưu tiên đọc nhanh
   ========================================================================== */

.table {
  color: var(--text);
  border-color: var(--border);
  --bs-table-bg: transparent;
}

.table thead th {
  background: var(--surface-muted);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  padding: 0.7rem 0.85rem;
}

.table tbody td,
.table tbody th {
  color: var(--text);
  border-color: var(--border);
  padding: 0.7rem 0.85rem;
  vertical-align: middle;
}

/* Cột số căn phải, chữ số đều bề rộng để so sánh theo cột. */
.table td.num,
.table th.num,
.table .price,
.table .money {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table tbody tr:hover > * {
  background-color: var(--surface-muted);
}

html[data-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .table thead th {
  background-color: var(--surface-muted);
  color: var(--muted);
  border-bottom-color: var(--border);
}

/* Cảnh báo: nền nhạt, viền trái đậm — thay cho khối bo tròn nhiều màu. */
.alert {
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  color: var(--text);
  padding: 0.7rem 0.95rem;
}

.alert-success { border-left-color: #2f6b34; }
.alert-danger  { border-left-color: #b3261e; }
.alert-warning { border-left-color: var(--brand); }
.alert-info    { border-left-color: var(--text-2); }

/* Luôn dùng background-color, không dùng shorthand `background` cho .form-select:
   shorthand xoá background-image và mất mũi tên dropdown. */
.form-control, .form-select, .input-group-text {
  background-color: var(--surface-solid);
  border-color: var(--border-strong);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
  background-color: var(--surface);
  color: var(--text);
}

html[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a1968b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* (Kiểu bảng & cảnh báo được định nghĩa một lần ở khối "Bảng" phía trên.) */

.table tbody tr {
  vertical-align: middle;
}

.site-footer {
  margin-top: 3rem;
  border-top: 1px solid var(--border);
  background: var(--ink);
  color: #cfc7bf;
}

.site-footer a {
  color: #f2ede8;
}

.site-footer a:hover {
  color: var(--brand);
}

.footer-brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
}

.footer-text {
  color: rgba(255, 255, 255, 0.7);
}

.mini-muted {
  font-size: 0.9rem;
  color: var(--muted);
}

.review-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--surface-muted);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.review-box:hover {
  box-shadow: none;
}

.code-block,
.api-code {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #221d18;
  color: #ece6df;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

html[data-theme="dark"] .review-box {
  background: var(--surface);
}

.sticky-action {
  position: sticky;
  top: 6.5rem;
}

.badge-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.15);
  color: #f59e0b;
  font-weight: 700;
}

.hero-graphic {
  min-height: 320px;
  border-radius: var(--radius-lg);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  box-shadow: none;
}

.hero-graphic-inner {
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  padding: 2rem;
}

.hero-graphic-inner .big-mark {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-lg);
  display: grid;
  place-items: center;
  background: var(--brand);
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
}

/* ==========================================================================
   Nút & form — ghi đè màu xanh mặc định của Bootstrap sang cam
   ========================================================================== */

.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.25);
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-active-bg: var(--brand-2);
  --bs-btn-active-border-color: var(--brand-2);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  box-shadow: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-2);
  --bs-btn-border-color: var(--brand-border);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-bg: var(--brand-2);
  --bs-btn-active-border-color: var(--brand-2);
}

/* Nút phụ: trắng, viền mảnh — dùng nhiều nhất trong trang quản trị. */
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark {
  --bs-btn-color: var(--text-2);
  --bs-btn-bg: var(--surface-solid);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text);
  --bs-btn-hover-bg: var(--surface-muted);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text);
  --bs-btn-active-bg: var(--surface-muted);
  --bs-btn-active-border-color: var(--border-strong);
}

.btn-light {
  --bs-btn-bg: var(--surface-muted);
  --bs-btn-border-color: var(--border);
  --bs-btn-color: var(--text);
  --bs-btn-hover-bg: var(--border);
  --bs-btn-hover-border-color: var(--border-strong);
}

/* Ổ khoá màu xanh còn sót của Bootstrap */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-border);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16);
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

.form-control,
.form-select {
  border-radius: var(--radius-sm);
  border-color: var(--border-strong);
  background-color: var(--surface-solid);
  color: var(--text);
}

.form-control::placeholder {
  color: var(--muted);
}

.form-label {
  font-size: 0.88rem;
  color: var(--text-2);
}

.text-primary {
  color: var(--brand) !important;
}

.bg-primary,
.badge.bg-primary {
  background-color: var(--brand) !important;
}

.link-primary,
.page-link {
  color: var(--brand);
}

.page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}

.table-card .table {
  margin-bottom: 0;
}

.back-to-top {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  box-shadow: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1300;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top:hover {
  box-shadow: none;
}

.back-to-top:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.35);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .page-bg {
    animation: none;
    transform: none;
  }

  html.has-js .reveal-card,
  html.has-js .reveal-card.is-revealed,
  .hero-copy.hero-animate {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .announcement-track {
    animation: none;
    transform: none;
  }
}

@media (max-width: 991.98px) {
  .filter-panel, .sticky-action {
    position: static;
  }

  .site-header {
    position: static;
  }
  .product-toolbar-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .products-section {
    padding-inline: 0;
  }
}

/* ==========================================================================
   Tinh chỉnh chữ & chuyển động
   Khối này đứng CUỐI file nên nó thắng mọi rule cùng độ ưu tiên phía trên —
   chỉ đặt ở đây những thứ muốn áp dụng toàn site (nhịp chuyển động, vòng
   focus, chữ số bảng), đừng nhét kích thước/bố cục riêng của component vào.
   Mọi hiệu ứng đều bị khối `prefers-reduced-motion` phía trên tắt bằng
   `!important`, nên không cần lặp lại ở đây.
   ========================================================================== */

/* Vòng focus dùng chung: một hình dáng duy nhất cho mọi thứ bấm được,
   thay cho viền xanh mặc định của trình duyệt/Bootstrap. */
a:focus-visible,
.nav-link:focus-visible,
.navbar-brand:focus-visible,
.product-tile:focus-visible,
.account-pill:focus-visible,
.wallet-pill:focus-visible,
.admin-quick-link:focus-visible,
.admin-card-link:focus-visible,
.support-thread-item:focus-visible,
.checkout-back:focus-visible,
.captcha-reload:focus-visible,
.page-link:focus-visible {
  outline: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--focus-ring);
}

/* Thanh cuộn mảnh, màu ấm — hợp nền trắng, không phải xám xanh mặc định. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 3px solid var(--bg);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* Liên kết: gạch chân mảnh, đậm dần khi rê chuột. */
a {
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}

.navbar-brand {
  letter-spacing: -0.03em;
}

/* Nav: gạch chân trượt ra từ trái thay vì hiện đột ngột. */
.nav-link {
  transition: color var(--dur-fast) var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  background: var(--brand);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease);
}

.nav-link:hover::after {
  opacity: 0.4;
  transform: scaleX(1);
}

.nav-link.active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Header: khi cuộn xuống thì viền dưới đậm lên một nấc để tách khỏi nội dung.
   Class `is-scrolled` do public/js/app.js gắn. Vẫn là viền, không phải bóng. */
.site-header {
  transition: border-color var(--dur) var(--ease);
}

.site-header.is-scrolled {
  border-bottom-color: var(--border-strong);
}

/* Thẻ & ô bấm: chuyển màu viền theo cùng một nhịp. */
.glass-card,
.dashboard-card,
.table-card,
.form-card,
.product-tile,
.account-pill,
.stat-tile,
.admin-quick-link,
.review-box,
.support-thread-item {
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.table tbody tr > * {
  transition: background-color var(--dur-fast) var(--ease);
}

/* Xuất hiện khi cuộn: đường cong dịu ở cuối, độ trễ giữa các thẻ ngắn lại. */
html.has-js .reveal-card {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-order, 0) * 22ms);
}

/* Thanh thông báo flash trượt xuống nhẹ khi trang mở. */
.flash-stack .alert {
  animation: rise-in 0.3s var(--ease-out) both;
}

/* ==========================================================================
   Nút & form — nhịp bấm, cỡ chữ, chiều cao thống nhất
   ========================================================================== */

.btn {
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.004em;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    box-shadow var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

/* Phản hồi khi bấm: lún xuống 1px. Đây là nút — không phải thẻ nội dung,
   nên vẫn giữ nguyên luật "thẻ không nhấc lên khi hover". */
.btn:active {
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.btn-sm {
  padding: 0.34rem 0.72rem;
  font-size: 0.86rem;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 0.66rem 1.3rem;
  font-size: 1rem;
  border-radius: var(--radius);
}

.form-control,
.form-select {
  padding: 0.52rem 0.8rem;
  font-size: 0.95rem;
  line-height: 1.5;
  transition:
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

/* Select cần chừa lề phải cho mũi tên — không dùng padding chung với input. */
.form-select {
  padding-right: 2.25rem;
}

.form-control-sm,
.form-select-sm {
  padding-block: 0.34rem;
  padding-left: 0.62rem;
  font-size: 0.86rem;
}

.form-control-lg,
.form-select-lg {
  padding-block: 0.68rem;
  font-size: 1rem;
}

.form-label {
  font-weight: 600;
  letter-spacing: -0.004em;
  margin-bottom: 0.35rem;
}

.form-text {
  font-size: 0.84rem;
  color: var(--muted);
}

.input-group-text {
  font-size: 0.9rem;
  color: var(--muted);
}

/* ==========================================================================
   Chữ số — tiền, kho, thống kê phải thẳng cột giữa các dòng
   ========================================================================== */

.price,
.money,
.wallet-pill,
.product-tile-price,
.product-tile-stock,
.pd-price,
.pd-subtotal,
.pd-subtotal strong,
.checkout-line,
.checkout-total strong,
.checkout-product-price,
.stat-tile strong,
.support-stat-value,
.admin-meta-value,
.classification-total-pill strong,
.nav-count,
.category-count,
.badge-rating {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Mã & khối lệnh
   ========================================================================== */

code,
kbd,
samp,
pre {
  font-family: var(--font-mono);
  font-variant-ligatures: none;
}

:not(pre) > code {
  padding: 0.1em 0.36em;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--brand-2);
  font-size: 0.88em;
  word-break: break-word;
}

kbd {
  padding: 0.12em 0.42em;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.82em;
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  opacity: 1;
  margin: 1.25rem 0;
}

/* ==========================================================================
   Sửa khung ảnh thẻ sản phẩm
   .product-tile-media khai `aspect-ratio: 4/3` nhưng nó là flex item, mà flex
   item mặc định có `min-height: auto` — nghĩa là không được thấp hơn nội dung.
   Ảnh bên trong (`height: 100%` khi cha cao auto) rơi về chiều cao thật của
   file ảnh, đẩy khung cao vượt tỉ lệ → mỗi thẻ một chiều cao, hàng sản phẩm so le.
   `overflow: hidden` đưa min-height tự động về 0, trả quyền quyết định cho
   aspect-ratio (đây cũng là lý do .pd-media không dính lỗi này).
   ========================================================================== */

.product-tile-media {
  overflow: hidden;
  min-height: 0;
}

/* Tiêu đề mở đầu trang: giới hạn bề rộng như đoạn mô tả bên dưới, để dòng chữ
   không kéo hết 1560px. Kèm `text-wrap: balance` ở khối tiêu đề, hai dòng sẽ
   dài gần bằng nhau thay vì dòng trên dài dòng dưới cụt. */
.page-intro-title {
  max-width: 46rem;
}

/* ==========================================================================
   Chân trang
   Hai cột nằm trong một flex không giới hạn bề rộng: cột trái (mô tả site) dài
   nên nó ăn gần hết chỗ, cột phải (liên hệ) bị bóp lại và xuống dòng lởm chởm.
   Chốt bề rộng đọc được cho cột trái, cột phải co theo nội dung.
   ========================================================================== */

.footer-main {
  max-width: 58ch;
}

.footer-contact {
  flex: 0 0 auto;
}

.site-footer .footer-text {
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-brand {
  letter-spacing: -0.025em;
  margin-bottom: 0.2rem;
}

/* ==========================================================================
   Bảng quản lý sản phẩm
   Bảng đã nhóm theo danh mục nên bỏ hẳn cột lặp tên danh mục; còn 6 cột vừa
   một màn hình, không phải cuộn ngang.
   ========================================================================== */

.product-group-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.product-group-name {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
}

.admin-col-order {
  width: 4.5rem;
  white-space: nowrap;
}

.admin-product-name {
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

/* Tóm tắt phân loại có thể rất dài — cắt một dòng, xem đủ bằng tooltip title. */
.admin-product-variants {
  max-width: 26rem;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-table-actions.justify-content-end {
  justify-content: flex-end;
}

/* Mỗi danh mục là một bảng riêng nên bảng nào tự co bảng nấy, nhìn lệch cột giữa
   các khối. Chốt bề rộng để mọi bảng thẳng hàng với nhau. */
.admin-col-price { width: 9rem; }
.admin-col-stock { width: 6rem; }
.admin-col-status { width: 8.5rem; }
.admin-col-actions { width: 13.5rem; }

/* ==========================================================================
   Màn hình nạp tiền
   Mỗi thông tin cần chuyển khoản là một dòng: nhãn - giá trị - nút copy.
   Nội dung chuyển khoản để to nhất vì chép sai chuỗi đó là tiền không tự vào ví.
   ========================================================================== */

.topup-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.topup-field:last-of-type {
  border-bottom: 0;
}

.topup-field-label {
  flex: 0 0 10rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.topup-field-value {
  flex: 1 1 12rem;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
  font-variant-numeric: tabular-nums;
}

.topup-memo {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--brand-2);
}

.topup-wait {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

/* Vòng quay báo "đang chờ" — viền quay, không dùng ảnh động. */
.topup-spinner {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid var(--brand-border);
  border-top-color: var(--brand);
  animation: topup-spin 0.9s linear infinite;
}

@keyframes topup-spin {
  to {
    transform: rotate(360deg);
  }
}

.topup-qr {
  display: block;
  width: 100%;
  max-width: 17rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.topup-paid {
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

.topup-paid-icon {
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 1.3rem;
}

html[data-theme="dark"] .topup-paid {
  background: var(--brand-soft);
}

@media (max-width: 575.98px) {
  .topup-field-label {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Thanh công cụ cửa hàng — chip danh mục + tìm kiếm + bộ lọc thu gọn
   Trước đây 9 ô lọc bày hết ra đầu trang, nhìn như trang quản trị database chứ
   không phải shop. Giờ chỉ để lộ thứ dùng hằng ngày; phần còn lại nằm sau nút.
   ========================================================================== */

.shop-toolbar {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

/* Nhiều danh mục thì cuộn ngang, KHÔNG xuống dòng — xuống dòng là hàng chip cao
   dần lên và đẩy sản phẩm xuống dưới màn hình đầu. */
.chip-row {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
  scrollbar-width: none;
}

.chip-row::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  margin: 0;
  cursor: pointer;
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.chip span {
  display: inline-block;
  padding: 0.38rem 0.8rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-solid);
  color: var(--text-2);
  font-size: 0.87rem;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip:hover span {
  border-color: var(--brand-border);
  color: var(--text);
}

.chip.is-active span {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.chip input:focus-visible + span {
  outline: 0;
  box-shadow: var(--focus-ring);
}

.chip-dot {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-left: 0.3rem;
  border-radius: 999px;
  background: var(--brand);
  vertical-align: middle;
}

.shop-toolbar-main {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.shop-search {
  flex: 1 1 18rem;
  min-width: 0;
}

.shop-sort {
  flex: 0 0 auto;
  width: auto;
  min-width: 12rem;
}

.shop-filter-toggle {
  flex: 0 0 auto;
  white-space: nowrap;
}

.shop-advanced.is-collapsed {
  display: none;
}

.shop-advanced-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-muted);
}

/* ==========================================================================
   Thẻ sản phẩm — bản có tín hiệu tin cậy và nút mua
   .product-tile giờ là <article> chứ không còn là <a>: bên trong đã có nút mua,
   mà lồng <a> trong <a> là HTML sai. Cả thẻ vẫn bấm được nhờ .product-tile-link
   phủ một lớp trong suốt lên toàn thẻ; nút mua nằm ĐÈ LÊN lớp đó bằng z-index.
   ========================================================================== */

.product-grid {
  --tile-min: 220px;
}

@media (min-width: 1600px) {
  .product-grid {
    --tile-min: 208px;
  }
}

@media (max-width: 575.98px) {
  .product-grid {
    --tile-min: 158px;
  }
}

.product-tile {
  position: relative;
}

.product-tile-name {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -0.006em;
}

.product-tile-link {
  color: var(--text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lớp phủ trong suốt: bấm chỗ nào trên thẻ cũng vào trang sản phẩm. */
.product-tile-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.product-tile:hover .product-tile-link {
  color: var(--brand-2);
}

.product-tile-signals {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  font-size: 0.76rem;
  font-weight: 600;
  min-height: 1.05rem;
}

.tile-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: #b45309;
  font-variant-numeric: tabular-nums;
}

.tile-trust {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.tile-sold {
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.product-tile-meta {
  margin-top: 0.2rem;
}

.product-tile-foot {
  margin-top: auto;
  padding-top: 0.45rem;
}

/* Nút mua phải nằm trên lớp phủ, nếu không bấm vào nó lại ra trang chi tiết. */
.product-tile-buy {
  position: relative;
  z-index: 1;
  margin-top: 0.5rem;
  width: 100%;
  text-align: center;
}

.product-tile-sold-out {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

html[data-theme="dark"] .product-tile-sold-out {
  background: rgba(22, 19, 15, 0.78);
}

.product-tile.is-out .product-tile-price {
  color: var(--muted);
}

/* Ảnh sản phẩm đủ kiểu tỉ lệ: contain để không cắt mất chữ trên logo, nền xám ấm
   lấp phần thừa. `cover` từng cắt cụt chữ "Manager" trên ảnh Business Manager. */
.product-tile-media img {
  object-fit: contain;
  background: var(--surface-muted);
}

/* Tên sản phẩm chốt đúng 2 dòng dù ngắn hay dài, để dòng tín hiệu / giá / nút của
   mọi thẻ nằm thẳng hàng nhau thay vì so le theo độ dài tên. */
.product-tile-link {
  min-height: calc(2 * 0.88rem * 1.32);
}

/* Ô chưa có ảnh: nền phẳng, không gạch chéo — gạch chéo trông như ảnh vỡ. */
.product-tile-media.is-empty::after {
  background: var(--surface-muted);
}

/* ==========================================================================
   Hiệu ứng
   Giữ đúng luật của hệ thiết kế: không nhấc thẻ, không bóng màu, không gradient.
   Chỉ dùng độ mờ và trượt vài pixel — đủ để thấy trang "sống" mà không lòe loẹt.
   Khối prefers-reduced-motion phía trên đã tắt hết bằng !important nên không cần lặp.
   ========================================================================== */

/* Ảnh hiện dần khi tải xong, thay vì bụp một cái. Chỉ bật khi có JS: không có JS
   thì không ai gỡ được lớp mờ, ảnh sẽ tàng hình vĩnh viễn. */
html.has-js .product-tile-media img,
html.has-js .pd-media img,
html.has-js .checkout-product-media img {
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

html.has-js .product-tile-media img.is-loaded,
html.has-js .pd-media img.is-loaded,
html.has-js .checkout-product-media img.is-loaded {
  opacity: 1;
}

/* Khung xương lúc đang lọc sản phẩm. Trước đây chỉ làm mờ lưới cũ đi, nhìn như
   trang bị treo; khung xương nói rõ "đang lấy kết quả mới". */
.product-skeleton {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-solid);
}

.product-skeleton-media {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--border);
}

.product-skeleton-body {
  padding: 0.55rem 0.6rem 0.85rem;
}

.product-skeleton-line {
  height: 0.62rem;
  border-radius: 999px;
  margin-bottom: 0.42rem;
}

.product-skeleton-line:last-child {
  margin-bottom: 0;
}

.product-skeleton-line.is-short {
  width: 55%;
}

.product-skeleton-line.is-mid {
  width: 78%;
}

/* Vệt sáng chạy ngang — dùng gradient Ở ĐÂY là có lý do: đây là hiệu ứng tải,
   không phải nền trang, nên không phạm luật "không gradient nền". */
.product-skeleton-media,
.product-skeleton-line {
  background: linear-gradient(
    90deg,
    var(--surface-muted) 25%,
    var(--border) 37%,
    var(--surface-muted) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-sweep 1.3s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* Kết quả mới hiện ra mềm hơn thay vì nhảy vào. */
html.has-js [data-product-results].is-fresh > * {
  animation: rise-in 0.32s var(--ease-out) both;
  animation-delay: calc(var(--tile-index, 0) * 22ms);
}

/* Nhấn nút copy xong thì báo bằng chính cái nút. */
.btn.is-copied {
  border-color: var(--brand);
  color: var(--brand-2);
}

/* ==========================================================================
   Hộp nhận hàng sau khi mua
   Tự viết thay vì dùng modal của Bootstrap để bám đúng hệ màu và bo góc ở đây.
   Markup ở views/orders/detail.ejs, phần điều khiển ở public/js/app.js.
   ========================================================================== */

.delivery-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
}

.delivery-modal[hidden] {
  display: none;
}

.delivery-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(28, 25, 23, 0.55);
}

.delivery-modal-panel {
  position: relative;
  width: min(100%, 44rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-solid);
  box-shadow: var(--shadow-lg);
  animation: rise-in 0.24s var(--ease-out) both;
}

.delivery-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Nội dung hàng: chữ đơn cách để phân biệt 0/O, l/1 — kho account hay có ký tự dễ nhầm.
   Không tự xuống dòng: mỗi tài khoản một dòng, gãy dòng là copy ra sai. */
.delivery-modal-text {
  flex: 1 1 auto;
  min-height: 14rem;
  max-height: 55vh;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  line-height: 1.55;
  white-space: pre;
  overflow: auto;
  resize: vertical;
  background: var(--surface-muted);
}

.delivery-modal-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.delivery-modal-foot .ms-auto {
  margin-left: auto;
}

/* Không cho trang nền cuộn khi hộp đang mở. */
body.has-delivery-modal {
  overflow: hidden;
}

/* Băng "Mua thành công" ở đầu trang đơn. */
.order-success {
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

.order-success-icon {
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 1.3rem;
}

@media (max-width: 575.98px) {
  .delivery-modal-foot .btn {
    flex: 1 1 100%;
  }

  .delivery-modal-foot .ms-auto {
    margin-left: 0;
  }
}

/* ==========================================================================
   Cảnh báo hạn lưu trữ đơn hàng
   Quá hạn là nội dung bị xoá vĩnh viễn, nên chỗ này cố ý nổi hơn phần còn lại
   của trang. Vẫn dùng cam thương hiệu chứ không thêm màu đỏ mới vào hệ màu.
   ========================================================================== */

.retention-note {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  border-color: var(--brand-border);
  background: var(--brand-soft);
}

.retention-note-icon {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 2.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
}

.retention-note.is-expired {
  border-color: var(--border-strong);
  background: var(--surface-muted);
}

.retention-note.is-expired .retention-note-icon {
  background: var(--muted);
}

/* Cảnh báo trong hộp nhận hàng: nằm ngay trên ô nội dung, không thể lướt qua. */
.delivery-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--text-2);
  font-size: 0.86rem;
  line-height: 1.5;
}

.delivery-warning-icon {
  flex: 0 0 auto;
  color: var(--brand);
  line-height: 1;
  padding-top: 0.1rem;
}

@media (max-width: 575.98px) {
  .retention-note {
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* ==========================================================================
   Thông báo miễn trừ trách nhiệm
   Hiện ở 3 chỗ: chân trang (mọi trang), trang thanh toán (trước khi trả tiền),
   và hộp nhận hàng (đúng lúc khách cầm hàng). Nội dung ở config.legalNotice.
   ========================================================================== */

.footer-legal {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  max-width: 76ch;
}

.checkout-legal {
  margin: 0.7rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--muted);
}

.delivery-legal {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

/* QR đứng cạnh thông tin chuyển khoản, không xếp chồng thành trang dài. */
.topup-pay {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.topup-pay-qr {
  flex: 0 0 auto;
  width: 12.5rem;
  text-align: center;
}

.topup-pay-qr img {
  display: block;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.topup-pay-info {
  flex: 1 1 18rem;
  min-width: 0;
}

/* Cột trái hẹp lại vì khối này nằm cạnh QR chứ không chiếm cả chiều ngang. */
.topup-pay-info .topup-field-label {
  flex-basis: 7.5rem;
}

@media (max-width: 767.98px) {
  .topup-pay-qr {
    width: 100%;
    max-width: 14rem;
    margin: 0 auto;
  }
}