/* ===========================================================
   SwiftStreet — Design tokens & base styles
   Bảng màu thương hiệu: đen + vàng cam + trắng
   =========================================================== */

:root {
  /* Màu thương hiệu (lấy từ logo) */
  --color-black: #1a1a1a;
  --color-black-soft: #2b2b2b;
  --color-orange: #feb20a;
  --color-orange-dark: #e59900;
  --color-white: #ffffff;

  /* Nền & chữ */
  --bg-page: #ffffff;
  --bg-section: #f7f6f3;
  --bg-section-soft: #fafafa;
  --bg-card: #ffffff;
  --text-main: #1a1a1a;
  --text-muted: #6b6b6b;
  --border-color: #ececec;

  /* Màu phụ trợ (badge, trạng thái) — vẫn hài hoà với tông ấm chủ đạo */
  --color-success: #2e7d52;
  --color-success-bg: #e8f5ee;
  --color-error: #c94b3f;
  --color-error-bg: #fbeae8;
  --color-info: #3a6ea5;
  --color-info-bg: #eaf1f8;

  /* Màu dùng riêng cho mini-dashboard nền tối trong thẻ sản phẩm */
  --dash-bg: #1a1a1a;
  --dash-tile-bg: #262626;
  --dash-border: rgba(255, 255, 255, 0.08);
  --dash-text: #f2f2f2;
  --dash-text-muted: #9a9a9a;
  --dash-accent: #feb20a;
  --dash-accent-2: #4fd1c5;
  --dash-accent-3: #7c86a3;
  --dash-success: #46c774;
  --dash-error: #f2755a;

  /* Bo góc & bóng đổ */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --shadow-card: 0 2px 10px rgba(26, 26, 26, 0.06);
  --shadow-card-hover: 0 10px 24px rgba(26, 26, 26, 0.12);

  --container-width: 1480px;
  --font-brand: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 clamp(20px, 3.5vw, 40px);
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
}

p {
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--color-orange);
  color: var(--color-black);
}

.btn-primary:hover {
  background: var(--color-orange-dark);
}

.btn-dark {
  background: var(--color-black);
  color: var(--color-white);
}

.btn-dark:hover {
  background: var(--color-black-soft);
}

.btn-outline {
  background: transparent;
  color: var(--color-black);
  border-color: var(--color-black);
}

.btn-outline:hover {
  background: var(--color-black);
  color: var(--color-white);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 13px 6px;
  font-size: 12px;
  font-weight: 600;
  border-width: 1px;
  border-radius: 6px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
}

/* Nút Thêm giỏ hàng/Mua ngay trong lưới sản phẩm ở trang chủ (.hero-products)
   PHẢI giữ nguyên cỡ nhỏ ban đầu — khách chỉ yêu cầu tăng size nút này khi vào
   trang "Sản phẩm" (san-pham.html, không có .hero-products bao ngoài), không
   yêu cầu đổi trên landing/trang chủ. */
.hero-products .btn-sm {
  padding: 9px 4px;
  font-size: 10px;
}

/* ---------- Badges ---------- */
.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.badge-orange {
  background: var(--color-orange);
  color: var(--color-black);
}

.badge-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge-info {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-white);
  border-bottom: 1px solid var(--border-color);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 48px;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-brand);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-black);
  flex-shrink: 0;
}

.brand img {
  height: 40px;
  width: 40px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.main-nav a {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 15px;
  color: var(--text-main);
  transition: color 0.15s ease;
}

.main-nav a:hover {
  color: var(--color-orange-dark);
}

.main-nav a.active {
  font-weight: 700;
  color: var(--color-black);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

/* Vòng 27: tăng nhẹ size icon chuông/giỏ hàng ở header (21→23px, nút 42→44px). */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--color-black);
  cursor: pointer;
  transition: background 0.15s ease;
}

.icon-btn:hover {
  background: var(--bg-section);
}

.icon-btn svg {
  width: 23px;
  height: 23px;
}

.icon-btn .icon-dot {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--color-orange);
  border: 2px solid var(--color-white);
  color: var(--color-black);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.icon-btn .icon-dot.show {
  display: flex;
}

/* Dropdown thông báo neo dưới icon chuông (không làm mờ nền, không ở giữa
   màn hình — khác hẳn với modal thông báo cũ). */
.notify-wrap {
  position: relative;
}

.notify-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 320px;
  max-width: calc(100vw - 32px);
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(20, 20, 20, 0.16);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 250;
  overflow: hidden;
}

.notify-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.notify-dropdown-head {
  padding: 14px 16px;
  font-weight: 800;
  font-size: 14px;
  border-bottom: 1px solid var(--border-color);
}

.notify-dropdown-list {
  max-height: 214px;
  overflow-y: auto;
}

.notify-item {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-color);
}

.notify-item:last-child {
  border-bottom: none;
}

.notify-item p {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 3px;
}

.notify-item span {
  font-size: 12px;
  color: var(--text-muted);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-black);
  margin: 5px 0;
  transition: 0.2s ease;
}

/* ---------- Hero (2 cột: giới thiệu + lưới sản phẩm) ---------- */
.hero-shop {
  background: var(--bg-section-soft);
  padding: 44px 0 36px;
}

.hero-shop-grid {
  display: grid;
  grid-template-columns: minmax(320px, 600px) 1fr;
  gap: 28px;
  align-items: start;
}

.hero-intro {
  position: sticky;
  top: 96px;
}

.hero-eyebrow {
  display: block;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-main);
  margin-bottom: 12px;
}

.hero-intro h1 {
  font-size: clamp(32px, 3.4vw, 39px);
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 20px;
}

.hero-cta {
  font-size: 15.5px;
  padding: 11px 20px;
  margin-bottom: 22px;
}

.hero-promo-text {
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--text-main);
  margin-bottom: 20px;
}

.hero-promo-text strong {
  font-weight: 800;
}

.hero-rate-btn {
  position: relative;
  background: linear-gradient(90deg, #ffbb2e 0%, #fa9a05 100%);
  color: var(--color-black);
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 22px;
  border: none;
  border-radius: 999px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: heroRateGlow 2.2s ease-in-out infinite;
}

.hero-rate-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 6px 18px rgba(250, 154, 5, 0.5);
  animation-play-state: paused;
}

@keyframes heroRateGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(250, 154, 5, 0.45);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(250, 154, 5, 0);
  }
}

.hero-products {
  display: flex;
  flex-direction: column;
}

.hero-more {
  text-align: left;
  padding: 14px 0 0;
}

.hero-more .btn-outline {
  padding: 9px 20px;
  font-size: 13.5px;
  border-radius: 999px;
}

.hero-more .btn-outline svg {
  width: 14px;
  height: 14px;
}

/* ---------- Nút hỗ trợ nổi ---------- */
.support-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 150;
}

.support-fab-trigger {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background: var(--color-orange);
  color: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 22px 4px rgba(254, 178, 10, 0.55);
  transition: transform 0.15s ease;
}

.support-fab-trigger:hover {
  transform: scale(1.06);
}

.support-fab .fab-label {
  position: absolute;
  top: -8px;
  right: -12px;
  background: var(--color-black);
  color: var(--color-orange);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.support-fab svg {
  width: 28px;
  height: 28px;
}

/* Dropdown 3 mục (Hỗ trợ/FAQ/Báo lỗi) khi bấm nút hỗ trợ nổi */
.support-fab-menu {
  position: absolute;
  bottom: 62px;
  right: 0;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 32px rgba(20, 20, 20, 0.16);
  padding: 8px;
  min-width: 168px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.support-fab-menu.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.support-fab-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.support-fab-menu button:hover {
  background: var(--bg-section);
  color: var(--color-orange-dark);
}

/* Toast nhỏ (dùng cho "Báo lỗi") */
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 10px);
  background: var(--color-black);
  color: var(--color-white);
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 500;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Bảng nhỏ trượt từ mép PHẢI (vòng 27 — trước đó trượt từ trái, khách đổi ý
   muốn trượt từ phải hướng vào giữa) — xác nhận "Thêm giỏ hàng", nằm dưới
   header. Biến thể `.is-duplicate` (sản phẩm đã có sẵn trong giỏ) đổi sang
   tông xám + icon X thay vì viền cam. */
.cart-slide-toast {
  position: fixed;
  top: 96px;
  right: 20px;
  min-width: 220px;
  max-width: 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-orange);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  padding: 13px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
  z-index: 500;
  transform: translateX(140%);
  transition: transform 0.3s ease;
}

.cart-slide-toast.show {
  transform: translateX(0);
}

.cart-slide-toast.is-duplicate {
  border-left-color: var(--text-muted);
  color: var(--text-muted);
}

.cart-slide-toast .toast-x-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-muted);
}

@media (max-width: 480px) {
  .cart-slide-toast {
    left: 12px;
    right: 12px;
    max-width: none;
  }
}

/* ---------- Section heading ---------- */
.section {
  padding: 48px 0;
}

.section-alt {
  background: var(--bg-section);
}

.section-heading {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 40px;
}

.section-heading .badge {
  margin-bottom: 14px;
}

.section-heading h2 {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  margin-bottom: 12px;
}

.section-heading p {
  color: var(--text-muted);
}

/* ---------- Product grid ---------- */
/* minmax(0, 340px) thay vì 1fr — nếu dùng 1fr, mỗi cột lưới sẽ giãn hết cỡ
   theo container (vd container 1480px → mỗi cột ~450px) trong khi thẻ bị giới
   hạn max-width:340px và tự canh giữa bằng margin:auto, tạo ra khoảng trắng
   THỪA rất lớn ở 2 bên mỗi thẻ (khách chụp ảnh khoanh đỏ chỉ ra lỗi này) —
   cộng với `gap` sẽ thành khoảng cách giữa 2 thẻ to gấp nhiều lần giá trị gap
   thật sự. minmax(0,340px) giới hạn TRẦN mỗi cột đúng bằng max-width của thẻ,
   `justify-content:center` dồn phần thừa ra 2 bên RÌA của cả lưới (không phải
   giữa từng thẻ) — khoảng cách giữa các thẻ lúc này đúng bằng giá trị `gap`. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: 28px;
}

/* Lưới sản phẩm ở trang chủ (.hero-products, bị chia sẻ chỗ với cột hero bên
   cạnh) vẫn giữ khoảng cách hẹp như cũ — chỉ trang "Sản phẩm" (san-pham.html,
   nhiều chỗ trống hơn) mới nới rộng khoảng cách giữa các thẻ theo phản hồi
   "khoảng cách giữa các thẻ chưa tốt" (so với thiết kế của đối thủ). */
.hero-products .product-grid {
  gap: 14px;
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.product-thumb {
  position: relative;
  background: var(--bg-section);
  padding: 30px 16px 15px;
}

.product-thumb .badge {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  font-size: 10.5px;
  padding: 3px 9px;
}

/* ===== Khung "laptop": bọc mini-dashboard mô phỏng giao diện sản phẩm ===== */
.device-screen {
  background: #3b3b3d;
  border-radius: 8px 8px 3px 3px;
  padding: 4px 4px 6px;
  box-shadow: 0 8px 16px rgba(20, 20, 20, 0.1);
}

.device-display {
  position: relative;
  background: #ffffff;
  border-radius: 4px;
  overflow: hidden;
  height: 186px;
  display: flex;
  flex-direction: column;
  padding: 11px;
  gap: 5px;

  /* Đổi bộ màu mini-dashboard sang nền sáng khi đặt trong màn hình laptop */
  --dash-bg: #ffffff;
  --dash-tile-bg: #f4f2ed;
  --dash-border: #ebe8e1;
  --dash-text: #1c1c1c;
  --dash-text-muted: #8c8c8c;
  --dash-accent: var(--color-orange);
  --dash-accent-2: #78c9c2;
  --dash-accent-3: #c8c2e6;
  --dash-success: #2e7d52;
  --dash-error: #c94b3f;
}

.device-base {
  position: relative;
  height: 6px;
  margin: 0 12px;
  background: linear-gradient(#d9d9d9, #adadad);
  border-radius: 0 0 5px 5px;
}

.device-base::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 12%;
  height: 100%;
  background: #949494;
  border-radius: 0 0 3px 3px;
}

/* ===== Mini-dashboard: mô phỏng giao diện sản phẩm bằng code ===== */
.device-display,
.device-display * {
  line-height: 1.25;
}

.dash-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dash-text);
  font-size: 10.5px;
  font-weight: 700;
}

.dash-title svg {
  width: 11px;
  height: 11px;
  color: var(--dash-accent);
  flex-shrink: 0;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}

/* padding/gap giảm nhẹ (5px→3px, gap 4px→3px) để ô số liệu thứ 3 ("Dung
   lượng 256,8GB" — chữ số không có khoảng trắng nên không tự xuống dòng
   được) không bị cắt chữ khi thẻ sản phẩm hẹp lại ở vùng 1300-1440px. */
.dash-stat {
  background: var(--dash-tile-bg);
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  padding: 4px 3px;
}

.dash-stat b {
  display: block;
  color: var(--dash-text);
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

.dash-stat span {
  display: block;
  font-size: 7.5px;
  color: var(--dash-text-muted);
  margin-bottom: 1px;
}

.dash-stat em {
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
}

.dash-stat em.up {
  color: var(--dash-success);
}

.dash-stat em.down {
  color: var(--dash-error);
}

.dash-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.dash-donut {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dash-donut::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: var(--dash-bg);
  border-radius: 50%;
}

.dash-donut span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  color: var(--dash-text);
  z-index: 1;
}

.dash-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 9.5px;
  color: var(--dash-text-muted);
}

.dash-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}

.dash-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

.dash-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.dash-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  list-style: none;
  font-size: 7.5px;
  color: var(--dash-text-muted);
  background: var(--dash-tile-bg);
  border-radius: 5px;
  padding: 3px 6px;
}

.dash-list li b {
  color: var(--dash-text);
  font-weight: 600;
  font-size: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  flex: 1;
  height: 40px;
}

.dash-bars i {
  flex: 1;
  background: var(--dash-accent);
  border-radius: 3px 3px 1px 1px;
  min-height: 6px;
}

.dash-bars i.muted {
  background: var(--dash-tile-bg);
  border: 1px solid var(--dash-border);
}

.dash-progress {
  background: var(--dash-tile-bg);
  border: 1px solid var(--dash-border);
  border-radius: 6px;
  padding: 6px 8px;
  flex: 1;
}

.dash-progress-top {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: var(--dash-text-muted);
  margin-bottom: 4px;
}

.dash-progress-top b {
  color: var(--dash-text);
}

.dash-progress-track {
  height: 5px;
  background: var(--dash-border);
  border-radius: 999px;
  overflow: hidden;
}

.dash-progress-fill {
  height: 100%;
  background: var(--dash-accent);
  border-radius: 999px;
}

.dash-calendar {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.dash-calendar i {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--dash-tile-bg);
  border: 1px solid var(--dash-border);
}

.dash-calendar i.on {
  background: var(--dash-accent);
  border-color: var(--dash-accent);
}

.dash-calendar i.on2 {
  background: var(--dash-accent-2);
  border-color: var(--dash-accent-2);
}

.dash-table {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 0;
}

.dash-table .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  font-size: 7.5px;
  color: var(--dash-text-muted);
  background: var(--dash-tile-bg);
  border-radius: 5px;
  padding: 3px 6px;
}

.dash-table .row b {
  color: var(--dash-text);
  font-weight: 600;
}

.dash-pill {
  font-size: 7px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}

.dash-pill.done {
  background: rgba(70, 199, 116, 0.16);
  color: var(--dash-success);
}

.dash-pill.pending {
  background: rgba(254, 178, 10, 0.18);
  color: var(--dash-accent);
}

.dash-pill.cancel {
  background: rgba(242, 117, 90, 0.16);
  color: var(--dash-error);
}

.product-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.product-body {
  padding: 10px 13px 4px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.product-body h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.product-card-actions {
  display: flex;
  gap: 6px;
  width: 80%;
  padding: 2px 0 11px 13px;
}

.product-card-actions .btn {
  flex: 1;
  min-width: 0;
}

.product-body p {
  color: var(--text-muted);
  font-size: 14px;
  flex: 1;
}

.product-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.price-current {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-black);
}

.price-old {
  font-size: 14px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* ---------- How it works ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.step-card {
  text-align: center;
  padding: 28px 20px;
}

.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-black);
  color: var(--color-orange);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.step-card h3 {
  font-size: 17px;
  margin-bottom: 8px;
}

.step-card p {
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Footer ---------- */
/* margin-top:auto + body flex column (xem rule `body` ở đầu file) đẩy footer luôn
   dán sát đáy màn hình trên các trang nội dung ngắn (Khuyến mãi/Kiếm Tiền...),
   tránh khoảng trắng lớn giữa footer và đáy trình duyệt (vòng sửa 26). */
.site-footer {
  margin-top: auto;
  background: var(--color-black);
  color: #cfcfcf;
  padding: 56px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 40px;
}

.footer-brand .brand {
  color: var(--color-white);
  margin-bottom: 12px;
}

.footer-brand p {
  font-size: 14px;
  color: #9a9a9a;
  max-width: 260px;
}

.footer-col h4 {
  color: var(--color-white);
  font-size: 14px;
  margin-bottom: 16px;
}

.footer-col ul li {
  margin-bottom: 10px;
}

.footer-col a {
  font-size: 14px;
  color: #b5b5b5;
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--color-orange);
}

.footer-email {
  font-size: 14px;
  color: #b5b5b5;
  margin-bottom: 14px;
}

.footer-zalo-label {
  font-size: 13px;
  font-weight: 600;
  color: #e2e2e2;
  margin-bottom: 10px;
}

.footer-qr {
  width: 90px;
  height: 90px;
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  padding: 4px;
}

.footer-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #8a8a8a;
}

.footer-made {
  text-align: right;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.footer-social a {
  color: #9a9a9a;
  transition: color 0.15s ease;
}

.footer-social a:hover {
  color: var(--color-orange);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ===========================================================
   Trang chi tiết sản phẩm
   =========================================================== */

/* Vòng 27: tăng nhẹ cỡ chữ breadcrumb (13→14px, "chỉ 1 tí thôi" theo yêu cầu). */
.breadcrumb {
  font-size: 14px;
  color: var(--text-muted);
  padding: 20px 0;
}

.breadcrumb a:hover {
  color: var(--color-orange-dark);
}

.product-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  padding: 24px 0 64px;
  align-items: flex-start;
}

.product-gallery {
  background: var(--color-black);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: sticky;
  top: 96px;
}

.product-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  margin-bottom: 12px;
}

.product-info .badge {
  margin-bottom: 14px;
}

.product-lede {
  color: var(--text-muted);
  font-size: 16px;
  margin-bottom: 22px;
}

.buy-box {
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 24px;
}

.buy-box .product-price {
  margin-bottom: 4px;
}

.buy-box .price-current {
  font-size: 28px;
}

.buy-box-note {
  font-size: 13px;
  color: var(--text-muted);
  margin: 14px 0 18px;
}

.buy-box-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.trust-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trust-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-main);
}

.trust-list li::before {
  content: "✓";
  color: var(--color-success);
  font-weight: 800;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.feature-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
}

.feature-item h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.feature-item p {
  font-size: 14px;
  color: var(--text-muted);
}

.video-embed {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-black);
}

.video-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.faq-item {
  border-bottom: 1px solid var(--border-color);
  padding: 18px 0;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: var(--color-orange-dark);
  font-weight: 700;
}

.faq-item[open] summary::after {
  content: "−";
}

.faq-item p {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 10px;
}

.sticky-buy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-white);
  border-top: 1px solid var(--border-color);
  padding: 14px 20px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  z-index: 200;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
}

/* ---------- Trang placeholder (Khuyến mãi / Kiếm Tiền) ---------- */
.placeholder-section {
  text-align: center;
  padding: 64px 0;
}

.placeholder-section .badge {
  margin-bottom: 16px;
}

.placeholder-section h1 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  margin-bottom: 10px;
}

.placeholder-section p {
  color: var(--text-muted);
}

/* ---------- Trang nội dung footer (Về chúng tôi/FAQ/Hướng dẫn/Điều khoản/Đổi trả/CTV) ---------- */
.section-heading h1 {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  margin-bottom: 12px;
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 36px 0 12px;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  color: var(--text-main);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal-content ul {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-content ul li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-main);
}

.legal-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-orange);
}

.legal-content strong {
  font-weight: 700;
}

.guide-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 720px;
  margin: 0 auto;
}

.guide-step {
  display: flex;
  gap: 20px;
}

.guide-step .step-number {
  flex-shrink: 0;
  margin: 0;
}

.guide-step h3 {
  font-size: 17px;
  margin-bottom: 6px;
}

.guide-step p {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.65;
}

/* Ảnh minh hoạ "Quét mã để thanh toán" — mô phỏng bằng code (chưa có ảnh
   thật, khách sẽ bổ sung sau); dùng cho bước 4 trong Hướng dẫn mua hàng. */
/* Nền trắng/xám rất nhạt (không còn nền đen "nặng nề" — vòng sửa V2, mục C.4). */
.payment-mock {
  margin-top: 16px;
  max-width: 260px;
  margin-left: auto;
  margin-right: auto;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.payment-mock-head {
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 14px;
}

.payment-mock-qr {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 14px;
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
}

.payment-mock-qr svg {
  display: block;
  width: 100%;
  height: auto;
}

.payment-mock-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--border-color);
  font-size: 12.5px;
}

.payment-mock-row:first-of-type {
  border-top: none;
}

.payment-mock-row span {
  color: var(--text-muted);
}

.payment-mock-row b {
  color: var(--text-main);
  font-weight: 700;
}

/* Bố cục riêng cho trang thanh toán: QR bên TRÁI, thông tin ngân hàng bên PHẢI
   (vòng 26, tham khảo bố cục ChatGPT) — CHỈ áp dụng khi có thêm class
   `.payment-mock-split` (trang Hướng dẫn mua hàng vẫn giữ bố cục dọc cũ). */
.payment-mock-split {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: none;
}

.payment-mock-split .payment-mock-qr {
  flex-shrink: 0;
  width: 110px;
  max-width: 110px;
  margin: 0;
}

.payment-mock-split .payment-mock-info {
  flex: 1;
  min-width: 0;
}

.payment-mock-split .payment-mock-row {
  gap: 6px;
}

.payment-mock-split .payment-mock-row b {
  flex: 1;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dưới ~480px, cột QR+thông tin nằm ngang không đủ chỗ hiển thị đầy đủ số tài
   khoản (bị cắt "..."), nên chuyển về xếp dọc như bố cục gốc — ưu tiên đọc rõ
   thông tin chuyển khoản hơn giữ đúng bố cục ngang trên màn hình rất hẹp. */
@media (max-width: 480px) {
  .payment-mock-split {
    flex-direction: column;
  }

  .payment-mock-split .payment-mock-qr {
    width: 140px;
    max-width: 140px;
    margin: 0 auto 12px;
  }

  .payment-mock-split .payment-mock-row b {
    white-space: normal;
    text-overflow: clip;
  }
}

/* Icon sao chép mờ cạnh mỗi dòng thông tin chuyển khoản (vòng 26). */
.copy-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  color: var(--text-muted);
  opacity: 0.55;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.copy-btn:hover {
  opacity: 1;
  color: var(--color-orange-dark);
}

.copy-btn svg {
  width: 14px;
  height: 14px;
}

.payment-mock-row.amount b {
  color: var(--color-orange-dark);
  font-size: 15px;
}

.simple-form {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-section);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.simple-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.simple-form input {
  font-family: inherit;
  font-size: 14px;
  padding: 11px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--text-main);
}

.simple-form input:focus {
  outline: none;
  border-color: var(--color-orange);
}

/* ---------- Trang thanh toán (thanh-toan.html) — thiết kế lại vòng sửa V2 (mục C/D), tinh chỉnh tiếp vòng 26 ---------- */
/* Vòng 29: giảm khoảng trống dưới breadcrumb, phía trên tiêu đề "Hoàn tất..."
   — trước đó cộng với padding-bottom 20px của `.breadcrumb` tạo khoảng trắng
   ~40px trông thừa, khách chê "khoảng trống nhiều quá". */
.checkout-section {
  padding: 4px 0 48px;
}

/* Vòng 26: container riêng hẹp hơn cho trang thanh toán (áp cho CẢ breadcrumb
   lẫn nội dung chính, dùng class `.checkout-container` thay vì `.container` mặc
   định) — khách chê layout "kéo dài 2 bên quá" khi dùng chung --container-width
   (1480px) của toàn site; tham khảo tỉ lệ gọn của màn thanh toán ChatGPT. */
.checkout-container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(20px, 3.5vw, 40px);
}

.checkout-heading {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  margin-bottom: 18px;
}

.checkout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.checkout-subheading {
  font-size: 14.5px;
  font-weight: 800;
  margin-bottom: 12px;
}

/* Vòng 27: bỏ giới hạn 5 dòng + cuộn riêng (yêu cầu vòng 25/26) — khách đổi ý,
   giờ muốn hiện HẾT toàn bộ sản phẩm trong giỏ, không cuộn danh sách nữa. */
.checkout-product-list {
  margin-bottom: 0;
}

/* Vòng 28: thẻ thống nhất bọc CẢ "Chọn tất cả" + danh sách sản phẩm + form
   điền thông tin (khách gửi ảnh mô phỏng yêu cầu gộp lại thành 1 khối, ngăn
   cách các phần bên trong bằng đường kẻ mảnh thay vì mỗi phần 1 khung riêng).
   Áp dụng cho CẢ 2 luồng: mua thẳng 1 sản phẩm lẫn nhiều sản phẩm từ giỏ. */
/* Vòng 31: giảm padding-top (khách chê khoảng trống phía trên danh sách sản
   phẩm khá lớn — cộng dồn với padding-bottom của "Chọn tất cả" phía trên tạo
   khoảng cách lớn trước khi thấy sản phẩm đầu tiên). Giữ nguyên padding các
   cạnh còn lại. */
.checkout-left-card {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 20px 20px;
}

/* Mỗi sản phẩm gói gọn trong 1 khung riêng (mục D). Vòng 26: sắp lại thành 1
   HÀNG NGANG duy nhất (checkbox — ảnh sản phẩm — tên/mô tả — giá — icon xoá,
   tất cả căn giữa theo chiều dọc) thay vì xếp dọc như trước, để giá luôn nằm
   cùng hàng với nút xoá (tham khảo bố cục giỏ hàng FPT Shop). KHÔNG còn làm mờ
   sản phẩm khi bỏ chọn (`.is-unselected` đã bỏ) — khách yêu cầu giữ nguyên độ
   rõ, chỉ dựa vào trạng thái tick để biết đã chọn hay chưa. */
/* Vòng 28: bỏ khung viền riêng từng dòng, đổi sang đường kẻ mảnh ngăn cách
   (khách gửi ảnh mô phỏng gộp toàn bộ cột trái thành 1 thẻ thống nhất). */
.checkout-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);
}

.checkout-item-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--bg-section);
  color: var(--color-orange-dark);
  flex-shrink: 0;
}

/* Ảnh minh hoạ sản phẩm mô phỏng dạng "file sheet" nhỏ (vòng 27, mô phỏng
   bằng code — hàng trên màu cam là "tiêu đề", hàng dưới trắng là "ô dữ liệu"). */
.thumb-sheet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
  width: 24px;
  height: 18px;
}

.thumb-sheet span {
  border-radius: 1px;
}

.thumb-sheet span:nth-child(-n+3) {
  background: var(--color-orange);
}

.thumb-sheet span:nth-child(n+4) {
  background: var(--color-white);
}

.checkout-item-content {
  flex: 1;
  min-width: 0;
}

.checkout-item-name-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 3px;
}

.checkout-item-name,
.checkout-item-name-link {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
}

.checkout-item-name-link:hover {
  color: var(--color-orange-dark);
  text-decoration: underline;
}

.item-price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  text-align: right;
}

/* Vòng 27: bọc khung viền mỏng cho khu vực "Điền thông tin của bạn" — trước đó
   không có khung bao, trông lỏng lẻo/nhiều khoảng trống thừa. */
/* Vòng 28: không còn khung viền riêng cho khu vực form — giờ nằm chung 1 thẻ
   với danh sách sản phẩm (`.checkout-left-card`), chỉ cần khoảng cách trên. */
.checkout-form-section {
  margin-top: 18px;
}

.checkout-input-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Vòng 31: khi danh sách có icon xoá (chế độ nhiều sản phẩm từ giỏ hàng), ô
   nhập phải dừng lại đúng ngay vị trí giá tiền — KHÔNG kéo dài vượt qua chỗ
   nút xoá đang chiếm. 33px = đúng bằng khoảng gap(12px) + chiều rộng nút xoá
   (21px) trong `.checkout-item-row`, đo trực tiếp bằng ảnh chụp thật. Lớp này
   được gắn/gỡ bằng JS tại `setupCheckoutPage()` tuỳ theo có nút xoá hay không. */
.checkout-input-form.has-delete-gutter {
  padding-right: 33px;
}

/* Vòng 30: bỏ giới hạn max-width:260px — khách yêu cầu kéo dài 3 ô nhập bằng
   đúng chiều rộng thẻ (thẳng tới vị trí giá tiền/icon xoá trong dòng sản phẩm
   phía trên, không để hẹp/lọt thỏm giữa khoảng trống thừa). */
.checkout-input-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

/* Vòng 30: BỎ icon trong ô nhập (khách yêu cầu gỡ lại sau khi xem thử ở vòng
   29) — quay về ô nhập trơn, không còn `.checkout-field-input`/svg bên trong. */
.checkout-input-form input {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--color-white);
  color: var(--text-main);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-input-form input:focus {
  outline: none;
  border-color: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(254, 178, 10, 0.15);
}

.checkout-note {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.65;
}

.checkout-note .checkout-phone-link {
  color: #2f6fed;
  text-decoration: underline;
  font-weight: 600;
  cursor: pointer;
}

/* Mục C.10: 2 khối tách riêng — "Thông tin đơn hàng" và "Thông tin chuyển khoản".
   Vòng 26: đổi nền xám sang TRẮNG + viền mỏng bao quanh (tham khảo thẻ trắng
   của ChatGPT), không còn dùng nền xám đặc. */
.checkout-summary-box,
.checkout-bank-box {
  background: var(--color-white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.checkout-summary-box {
  margin-bottom: 16px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  font-size: 13.5px;
  color: var(--text-main);
}

/* Vòng 27: "Tổng tiền" và "Khuyến mãi" cần sát nhau hơn (tham khảo cách trình
   bày của ChatGPT) — bọc riêng, giảm khoảng cách giữa 2 dòng này xuống 4px
   thay vì 9px như các dòng khác. */
.summary-group .summary-row {
  padding: 4px 0;
}

.summary-group .summary-row:first-child {
  padding-top: 0;
}

/* Khuyến mãi: chữ số KHÔNG đậm/không màu đỏ nữa (vòng 26, yêu cầu tường minh
   của khách) — chỉ còn 1 dòng phụ nhỏ "đã giảm X%" bên dưới nhãn để giải thích. */
.summary-discount-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-discount-label small {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
}

/* Vòng 27: đổi lại thành đỏ nhẹ (không quá đậm/nổi bật) — vòng 26 từng đổi
   sang đen, khách đổi ý muốn có màu đỏ nhưng dịu, không in đậm. */
.summary-row .discount-value {
  color: var(--color-error);
  font-weight: 400;
}

.summary-voucher-row {
  cursor: pointer;
  border-top: 1px solid var(--border-color);
  user-select: none;
}

/* Chevron nằm SÁT bên trái chữ "Voucher" (vòng 26 — trước đó chevron bị đẩy
   tách hẳn sang phải, xa chữ). */
.voucher-label-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voucher-chevron {
  display: inline-block;
  transition: transform 0.2s ease;
}

.summary-voucher-row.open .voucher-chevron {
  transform: rotate(180deg);
}

.voucher-input-wrap {
  display: none;
  padding: 4px 0 8px;
}

.voucher-input-wrap.show {
  display: block;
}

.voucher-input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--color-white);
  color: var(--text-main);
}

.voucher-input:focus {
  outline: none;
  border-color: var(--color-orange);
}

.summary-total-row {
  border-top: 1px solid var(--border-color);
  margin-top: 4px;
  padding-top: 12px;
  font-weight: 800;
  font-size: 15px;
}

/* "Cần thanh toán": đổi từ cam sang XANH LÁ ĐẬM (vòng 26, khách chủ động cho
   phép lệch quy tắc màu thương hiệu riêng cho số tiền này — dùng lại biến màu
   success `#2e7d52` có sẵn, không tạo mã màu mới). */
/* Vòng 27: đổi lại thành ĐEN — vòng 26 từng đổi sang xanh lá theo gợi ý khách,
   nay khách đổi ý muốn màu đen. */
.summary-total-row .total-amount {
  color: var(--color-black);
  font-weight: 800;
  font-size: 18px;
}

/* Nút "Thanh toán" dạng viên thuốc bo tròn hoàn toàn (vòng 26, tham khảo nút
   "Đăng ký" của ChatGPT — trước đó đổi tên từ "Tôi đã chuyển khoản"). */
/* Vòng 27: rộng thêm một chút (240→300px) cho cân đối hơn với nút "Đăng ký"
   của ChatGPT — khách nhấn mạnh chỉ rộng thêm 1 chút, không kéo full-width. */
.checkout-paid-btn {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 16px auto 0;
  padding: 13px 20px;
  font-size: 14px;
  border-radius: 999px;
}

.checkout-final-note {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 16px;
}

.checkout-final-note .note-link {
  text-decoration: underline;
  color: inherit;
  font-weight: 600;
}

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

@media (max-width: 860px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .checkout-input-form label,
  .checkout-input-form input {
    max-width: none;
  }
}

/* ---------- Modal (thông báo / giỏ hàng / hỗ trợ) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 20, 0.5);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%);
  width: min(360px, calc(100vw - 40px));
  max-height: min(520px, calc(100vh - 48px));
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 301;
  padding: 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.modal-head h3 {
  font-size: 17px;
  font-weight: 800;
}

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--bg-section);
  color: var(--color-black);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.modal-notify-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}

.modal-notify-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.modal-notify-item p {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}

.modal-notify-item span {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---------- Ô tích chọn/xoá dùng trong danh sách sản phẩm ở trang thanh toán (mục D) ---------- */
.cart-item-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
}

.cart-item-delete:hover {
  color: var(--color-error);
}

.cart-item-delete svg {
  width: 17px;
  height: 17px;
}

.cart-item-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cart-price-current {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-black);
}

.cart-price-old {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
}

/* Ô tích dạng VUÔNG bo góc nhẹ, thu nhỏ + dấu tích SVG rõ nét (vòng 27, tham
   khảo đúng dấu tick của ChatGPT) — thay cho ký tự "✓" bằng font chữ (render
   không nhất quán giữa các trình duyệt/hệ điều hành). */
.cart-item-select,
.cart-select-all-circle {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-color);
  background: var(--color-white);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.1s ease, border-color 0.1s ease;
}

.cart-item-select.checked,
.cart-select-all-circle.checked {
  border-color: var(--color-orange);
  background: var(--color-orange);
}

.cart-item-select .check-icon,
.cart-select-all-circle .check-icon {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  color: var(--color-black);
  opacity: 0;
}

.cart-item-select.checked .check-icon,
.cart-select-all-circle.checked .check-icon {
  opacity: 1;
}

/* Vòng 29: tách "Chọn tất cả" ra khỏi thẻ thống nhất — khách yêu cầu để mục
   này nằm NGOÀI bình thường (không đóng khung/không đường kẻ ngăn cách), chỉ
   còn khoảng cách với thẻ `.checkout-left-card` bên dưới. `padding-left:20px`
   để checkbox thẳng hàng tương đối với nội dung bên trong thẻ (padding 20px). */
/* Vòng 31: giảm padding-bottom (8px, trước 14px) để bớt khoảng trống trước
   khi vào tới danh sách sản phẩm — xem thêm ghi chú ở `.checkout-left-card`. */
.cart-select-all {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 8px 20px;
}

.cart-select-all span {
  font-size: 13.5px;
  font-weight: 600;
}

.modal-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 12px 0;
}

.modal-support-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  font-size: 14px;
}

.modal-support-row b {
  min-width: 88px;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 13px;
}

/* ---------- Modal "Đánh giá Swiftstreet" (vòng sửa V2, mục F) ---------- */
#modal-rate {
  width: min(500px, calc(100vw - 40px));
  max-height: min(680px, calc(100vh - 48px));
}

.review-list {
  max-height: 340px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 4px;
  margin-bottom: 16px;
}

.review-item {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.review-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.review-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.review-email {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.stars {
  font-size: 13px;
  letter-spacing: 1px;
  flex-shrink: 0;
}

.star-filled {
  color: var(--color-orange);
}

.star-empty {
  color: #e2e2e2;
}

.review-comment {
  font-size: 13.5px;
  color: var(--text-main);
  line-height: 1.5;
}

.rate-your-section {
  border-top: 1px solid var(--border-color);
  padding-top: 16px;
}

.rate-your-label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.rate-picker {
  display: flex;
  gap: 6px;
}

.rate-star-btn {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: #e2e2e2;
  cursor: pointer;
  padding: 2px;
  transition: color 0.15s ease;
}

.rate-star-btn.active {
  color: var(--color-orange);
}

.rate-feedback {
  display: none;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}

.rate-feedback.show {
  display: flex;
}

.rate-feedback label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-main);
}

.rate-feedback textarea {
  font-family: inherit;
  font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  resize: vertical;
  min-height: 64px;
  color: var(--text-main);
}

.rate-feedback textarea:focus {
  outline: none;
  border-color: var(--color-orange);
}

.rate-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.rate-actions .btn {
  padding: 10px 16px;
  font-size: 13px;
}

.btn-cancel-gray {
  background: var(--bg-section);
  color: var(--text-main);
}

.btn-cancel-gray:hover {
  background: var(--border-color);
}

.rate-submit-btn {
  background: var(--color-orange);
  color: var(--color-black);
}

.rate-submit-btn:hover {
  background: var(--color-orange-dark);
}

/* ---------- Responsive ---------- */
/* QUAN TRỌNG: hero-intro PHẢI luôn nằm bên trái ở mọi độ rộng desktop, CHỈ
   xếp dọc (hero trên, lưới sản phẩm dưới) ở mobile thật (≤720px) — khách yêu
   cầu rõ "hero auto bên trái trừ trường hợp xem trên mobile". Trước đây (vòng
   18) khoảng 721-1300px bị xếp dọc toàn bộ vì lưới sản phẩm 3 cột không đủ
   chỗ (dưới ~1280px, ô "Dung lượng 256,8GB" trong mini-dashboard bị cắt chữ —
   xem ghi chú .dash-stat). Thay vì xếp dọc, ở dải 721-1300px: thu hẹp cột
   .hero-intro (giữ bên trái, position:sticky) VÀ giảm lưới sản phẩm xuống 2
   cột (thay vì 3) để mỗi thẻ đủ rộng, không còn bị cắt chữ. Đã test bằng ảnh
   chụp thật ở dải 730-1300px trước khi chốt các con số min/max bên dưới. */
@media (max-width: 1300px) {
  .hero-shop-grid {
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 20px;
  }

  .hero-intro h1 {
    font-size: clamp(26px, 3vw, 32px);
  }

  .hero-products .product-grid {
    grid-template-columns: repeat(2, minmax(0, 340px));
  }
}

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

  .product-hero {
    grid-template-columns: 1fr;
  }

  .product-gallery {
    position: static;
  }

  .feature-list {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Ở dải hẹp hơn (721-960px), lưới sản phẩm 2 cột vẫn không đủ chỗ — chuyển
     xuống 1 cột (nhưng KHÔNG xếp dọc toàn bộ hero-shop-grid) để hero-intro
     vẫn nằm bên trái, mỗi thẻ sản phẩm bên phải được full chiều rộng còn lại. */
  .hero-shop-grid {
    grid-template-columns: minmax(200px, 300px) 1fr;
    gap: 16px;
  }

  .hero-intro h1 {
    font-size: 22px;
    line-height: 1.28;
  }

  .hero-eyebrow {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .hero-promo-text {
    font-size: 15px;
  }

  .hero-products .product-grid {
    grid-template-columns: 1fr;
  }

  /* Lưới sản phẩm KHÔNG nằm trong hero (trang san-pham.html) cũng cần giảm
     xuống 2 cột ở dải này — nút Thêm giỏ hàng/Mua ngay cỡ to (đã tăng riêng
     cho trang này ở vòng 19) sẽ tràn chữ nếu vẫn giữ 3 cột lúc thẻ bị bóp hẹp. */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 340px));
  }
}

@media (max-width: 720px) {
  /* Chỉ ở mobile thật mới xếp dọc hero (hero trên, lưới sản phẩm dưới). */
  .hero-shop-grid {
    grid-template-columns: 1fr;
  }

  .hero-intro {
    position: static;
  }

  .hero-products .product-grid {
    grid-template-columns: 1fr;
  }

  /* Trên mobile, hero-intro full chiều rộng (không còn bị bó hẹp bởi cột
     bên cạnh) nên khôi phục lại cỡ chữ gốc cho eyebrow/đoạn khuyến mãi
     (khác với dải 721-960px vẫn còn 2 cột nên phải thu nhỏ 2 phần này). */
  .hero-eyebrow {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .hero-promo-text {
    font-size: 18.5px;
  }

  /* Tiêu đề hero dùng <br> ngắt dòng cứng cho desktop (3 dòng độ dài so le) —
     ở màn hình hẹp, font-size desktop (32-39px) khiến mỗi dòng đó tự wrap
     thêm 1 lần nữa (vỡ thành 6 dòng, trông rất xấu). Giảm hẳn cỡ chữ riêng
     cho mobile để mỗi dòng in đủ trên 1 hàng. */
  .hero-intro h1 {
    font-size: 26px;
    line-height: 1.32;
  }

  /* Vòng 27: đồng bộ size nút Thêm giỏ hàng/Mua ngay ở trang chủ với trang Sản
     phẩm — nhưng CHỈ trên mobile thật (≤720px), khách xác nhận size ở trang
     Sản phẩm đã ổn trên điện thoại. KHÔNG đụng desktop — 2 trang này vẫn cố ý
     khác nhau ở màn hình rộng như đã chốt từ vòng 20. */
  .hero-products .btn-sm {
    padding: 13px 6px;
    font-size: 12px;
  }

  .main-nav,
  .header-actions .btn-outline {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .site-header.nav-open .main-nav {
    display: flex;
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    padding: 20px;
    gap: 18px;
    border-bottom: 1px solid var(--border-color);
  }

  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-card {
    max-width: none;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 14px;
  }

  .footer-made {
    text-align: center;
  }

  .sticky-buy-bar {
    display: flex;
  }

  .support-fab {
    bottom: 84px;
  }

  .support-fab .fab-label {
    display: none;
  }
}