/* ==========================================================================
   Thế Giới Keycap — main.css
   Design token lấy từ brand thật (xem docs/DESIGN.md). Load SAU CSS WooCommerce
   để đè lên style mặc định của WC mà vẫn giữ layout form giỏ hàng/checkout.
   ========================================================================== */

:root {
  /* Brand */
  --color-primary: #ed5d47;      /* coral */
  --color-primary-dark: #b02318; /* đỏ sậm — hover */
  --color-accent: #53211d;       /* nâu maroon */
  --color-peach: #ffbc7d;

  /* Status */
  --color-success: #5ebb3e;
  --color-info: #0a64f2;
  --color-out-of-stock: #2a1a17;  /* nâu gần đen — badge "Hết hàng" */

  /* Neutrals */
  --color-bg: #ffffff;
  --color-surface: #f5f5f5;
  --color-surface-alt: #fafafa;
  --color-border: #ececec;
  --color-heading: #333333;
  --color-text: #4a4a4a;
  --color-text-secondary: #868686;

  /* Typography */
  --font-heading: 'Be Vietnam Pro', 'Helvetica', system-ui, sans-serif;
  --font-body: 'Roboto', 'Helvetica', system-ui, sans-serif;
  --text-h1: clamp(1.9rem, 4.5vw, 2.5rem);
  --text-h2: clamp(1.4rem, 3vw, 1.875rem);
  --text-btn: 0.9rem;

  /* Spacing / layout */
  --space-section-y: clamp(2.25rem, 5vw, 4rem);
  --radius-btn: 6px;
  --radius-card: 10px;
  --transition-hover: all 0.2s ease;
  --container-max: 1400px;
  --shadow-card-hover: 0 10px 28px rgba(176, 35, 24, 0.16);
  --header-h: 76px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  max-width: 100%;
  overflow-x: hidden;
}

/* Lưới an toàn chống tràn ngang: nội dung WP (bài viết/mô tả sản phẩm) đôi khi
   có figure/img với inline style width cố định (vd width:900px) — vượt màn hình
   mobile và kéo cả trang tràn ngang, để lại khoảng trắng khi kéo sang phải.
   Ép mọi ảnh/figure co theo khung chứa, bất kể style inline từ WordPress. */
img, figure, video, iframe, table { max-width: 100% !important; }
figure[style], img[style] { width: auto !important; height: auto !important; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--color-heading);
  margin: 0 0 0.5em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1rem;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}
.skip-link:focus {
  position: fixed; top: 0.5rem; left: 0.5rem;
  width: auto; height: auto; clip: auto;
  z-index: 100; background: #fff; padding: 0.5rem 1rem;
  border-radius: var(--radius-btn);
}

/* ── Section heading ─────────────────────────────────────────────────────── */

.section-heading { text-align: center; margin-bottom: 1.75rem; }
.section-heading h1,
.section-heading h2 {
  display: inline-block;
  font-size: var(--text-h2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0;
}
.section-heading h1::after,
.section-heading h2::after {
  content: '';
  display: block;
  width: 64px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 0.6rem auto 0;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-btn);
  font-size: var(--text-btn);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  line-height: 1.3;
  transition: var(--transition-hover);
}
.btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}
.btn--outline {
  background: transparent;
  color: var(--color-primary);
}
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--block { width: 100%; }

/* ==========================================================================
   HEADER — 3 tầng
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-bg);
  box-shadow: 0 1px 0 var(--color-border);
  max-width: 100vw;
  overflow-x: clip;
}

/* S1 topbar */
.hdr__top { background: var(--color-accent); color: #fff; font-size: 0.82rem; }
.hdr__top-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; gap: 1rem;
}
.hdr__top-right { display: flex; gap: 1.5rem; }
.hdr__top-link { display: inline-flex; align-items: center; gap: 0.35rem; color: #fff; }
.hdr__top-link:hover { color: var(--color-peach); }

/* S2 main bar */
.hdr__main { background: var(--color-primary); }
.hdr__main-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: var(--header-h); padding-block: 0.5rem;
}
.hdr__brand { display: flex; align-items: center; gap: 0.6rem; color: #fff; flex-shrink: 0; }
.hdr__brand img { border-radius: 50%; background: #fff; padding: 2px; width: 52px; height: 52px; object-fit: contain; }
.hdr__brand-text {
  font-family: var(--font-heading); font-weight: 800;
  font-size: 1.1rem; line-height: 1.1; max-width: 8ch;
}
.hdr__search {
  flex: 1; display: flex; background: #fff;
  border-radius: 999px; overflow: hidden; max-width: 560px;
}
.hdr__search input {
  flex: 1; border: 0; padding: 0.6rem 1.1rem;
  font-size: 0.95rem; outline: none; min-width: 0;
}
.hdr__search button {
  border: 0; background: var(--color-accent); color: #fff;
  padding-inline: 1.1rem; cursor: pointer; display: grid; place-items: center;
}
.hdr__actions { display: flex; align-items: center; gap: 1.5rem; color: #fff; flex-shrink: 0; }
.hdr__auth a,
.hdr__profile { display: flex; align-items: center; gap: 0.5rem; color: #fff; min-width: 0; }
.hdr__auth strong { font-size: 0.95rem; line-height: 1.2; }
.hdr__profile-name {
  font-weight: 700; font-size: 0.95rem; max-width: 12ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hdr__auth a:hover,
.hdr__profile:hover { color: var(--color-peach); }
.hdr__cart { position: relative; color: #fff; display: grid; place-items: center; }
.hdr__cart:hover { color: var(--color-peach); }
.hdr__cart-badge {
  position: absolute; top: -7px; right: -9px;
  background: var(--color-accent); color: #fff;
  font-size: 0.7rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 999px;
  display: grid; place-items: center; padding: 0 4px;
}
.hdr__cart .hdr__cart-badge-wrap { position: absolute; inset: 0; pointer-events: none; }

/* S3 nav */
.hdr__nav { background: var(--color-primary-dark); }
.hdr__nav-inner { display: flex; }
.hdr__nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.25rem; width: 100%;
}
.hdr__nav-list a {
  display: block; color: #fff;
  font-size: 0.84rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.01em;
  padding: 0.65rem 0.5rem; white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: var(--transition-hover);
}
.hdr__nav-list a:hover,
.hdr__nav-list .is-current > a,
.hdr__nav-list .current-menu-item > a {
  color: var(--color-peach);
  border-bottom-color: var(--color-peach);
}

@media (max-width: 1024px) {
  .hdr__nav-inner { overflow-x: auto; scrollbar-width: none; }
  .hdr__nav-inner::-webkit-scrollbar { display: none; }
  .hdr__nav-list { justify-content: flex-start; width: max-content; }
}
@media (max-width: 820px) {
  .hdr__search { order: 3; flex-basis: 100%; max-width: none; }
  .hdr__main-inner { flex-wrap: wrap; }
  .hdr__brand-text { display: none; }
}

/* Mobile: topbar tràn ngang do text dài không co giãn — rút gọn để không vỡ layout */
@media (max-width: 640px) {
  .hdr__top-inner {
    height: auto; min-height: 34px; padding-block: 0.4rem;
    flex-wrap: wrap; row-gap: 0.25rem;
    justify-content: center; text-align: center;
  }
  .hdr__ship { order: 2; flex-basis: 100%; font-size: 0.72rem; }
  .hdr__top-right { order: 1; gap: 1rem; }
  .hdr__fb-text { display: none; }
  .hdr__auth-label { max-width: 15ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .hdr__ship { display: none; }
  .hdr__top-right { gap: 0.75rem; }
}

/* ==========================================================================
   HOME
   ========================================================================== */

.hero { padding-top: 1.25rem; }
.hero__banner {
  position: relative; border-radius: var(--radius-card);
  overflow: hidden; background: var(--color-surface);
}
.hero__banner img { width: 100%; aspect-ratio: 1958 / 745; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.75rem;
  text-align: center; padding: 1rem;
  background: linear-gradient(180deg, rgba(83, 33, 29, 0.15), rgba(83, 33, 29, 0.6));
}
.hero__kicker {
  margin: 0; color: var(--color-peach);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  font-size: 0.85rem;
}
.hero__title {
  margin: 0; color: #fff; font-size: var(--text-h1);
  font-weight: 900; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.cats { padding-top: var(--space-section-y); }
.cats__row {
  display: grid;
  /* Chia đều theo SỐ danh mục thật (biến --cats-count do front-page.php in ra).
     Trước đây cứng repeat(8,1fr) nhưng chỉ có 6 danh mục có sản phẩm → 6 ô
     chiếm 6 cột và chừa trống 2 cột bên phải, trông như bị dồn sang trái. */
  grid-template-columns: repeat(var(--cats-count, 6), minmax(0, 1fr));
  gap: 0.75rem;
}
.cats__item {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.9rem 0.5rem; text-align: center;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  transition: var(--transition-hover);
}
.cats__item:hover {
  border-color: var(--color-primary);
  background: #fff;
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}
.cats__ic { font-size: 1.4rem; line-height: 1; color: var(--color-primary); }
.cats__name { font-weight: 700; font-size: 0.85rem; color: var(--color-heading); }
.cats__count { font-size: 0.72rem; color: var(--color-text-secondary); }

@media (max-width: 1024px) { .cats__row { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .cats__row { grid-template-columns: repeat(2, 1fr); } }

.home-products,
.home-news { padding-top: var(--space-section-y); }
.home-products__more { text-align: center; margin-top: 1.5rem; }

/* ==========================================================================
   LƯỚI SẢN PHẨM — 5/hàng (desktop) → 4 → 3 → 2
   Đè trực tiếp ul.products của WooCommerce (WC dùng float, ta chuyển sang grid).
   ========================================================================== */

.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
}

@media (max-width: 1100px) { .woocommerce ul.products, ul.products { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; } }

/* ── Thẻ sản phẩm ────────────────────────────────────────────────────────── */

.pcard {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: var(--transition-hover);
  height: 100%;
}
.pcard:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
  border-color: var(--color-primary);
}
.pcard__media {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--color-surface); display: block;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.pcard__badge {
  position: absolute; top: 0.5rem; left: 0.5rem;
  background: var(--color-primary); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
/* "Hết hàng": nền đậm + viền trắng mảnh để đọc được trên CẢ ảnh sáng lẫn ảnh tối.
   Cố ý KHÔNG dùng đỏ — đỏ đã là badge SALE, hai cái cạnh nhau sẽ lẫn. */
.pcard__badge--out {
  background: var(--color-out-of-stock);
  left: auto; right: 0.5rem;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.pcard__body {
  padding: 0.7rem 0.85rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.35rem; flex: 1;
}
.pcard__meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--color-text-secondary);
}
.pcard__sku { font-weight: 700; color: var(--color-accent); letter-spacing: 0.03em; }
.pcard__name {
  font-size: 0.95rem; font-weight: 600; color: var(--color-heading);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}
.pcard__name:hover { color: var(--color-primary); }
.pcard__buy {
  margin-top: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 0.5rem;
}
.pcard__price { margin: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pcard__price .amount,
.pcard__price ins .amount {
  color: var(--color-primary); font-weight: 800; font-size: 1.05rem; text-decoration: none;
}
.pcard__price del { color: var(--color-text-secondary); font-size: 0.78rem; }
.pcard__price del .amount { color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 400; }
.pcard__price ins { text-decoration: none; }

.pcard__icon {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--color-primary); color: #fff;
  border: 1px solid var(--color-primary);
  cursor: pointer; transition: var(--transition-hover);
  font-size: 0; /* ẩn nhãn text WooCommerce chèn khi thêm giỏ xong */
}
.pcard__icon:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }
.pcard__icon--outline { background: transparent; color: var(--color-primary); }
.pcard__icon--outline:hover { background: var(--color-primary); color: #fff; }
.pcard__icon.loading { opacity: 0.6; }
.pcard__icon.added { background: var(--color-success); border-color: var(--color-success); }
/* WooCommerce chèn link "Xem giỏ hàng" ngay sau nút — ẩn để không phá layout thẻ */
.pcard__buy .added_to_cart { display: none; }

/* ==========================================================================
   BREADCRUMB / ARCHIVE
   ========================================================================== */

.breadcrumb {
  font-size: 0.82rem; color: var(--color-text-secondary);
  padding-block: 0.9rem;
}
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { margin-inline: 0.4rem; }

.wc-page { padding-bottom: var(--space-section-y); }

.woocommerce-products-header { margin-bottom: 1.25rem; text-align: center; }
.woocommerce-products-header__title,
.wc-page .page-title {
  font-size: var(--text-h2); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.02em;
  margin: 0 0 0.6rem;
}
.woocommerce-products-header__title::after,
.wc-page .page-title::after {
  content: ''; display: block;
  width: 64px; height: 3px; background: var(--color-primary);
  border-radius: 2px; margin: 0.6rem auto 0;
}
/* .term-description đã gỡ 06/09/2026: WooCommerce từng in mô tả danh mục ở
   đầu trang qua woocommerce_taxonomy_archive_description, nay hook đó đã bỏ
   (xem inc/category-content.php) nên không trang nào còn class này. */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering { margin-bottom: 1rem; font-size: 0.85rem; }

.archive-page { padding-block: 1rem var(--space-section-y); }
.archive-page__intro { max-width: 70ch; margin: 0 auto 2rem; }
.empty-state { text-align: center; color: var(--color-text-secondary); padding-block: 2rem; }

.page-single { padding-block: 1rem var(--space-section-y); }
.page-single__title { font-size: var(--text-h1); }
.page-single__content { max-width: 820px; line-height: 1.8; }
.page-single__content img { margin-inline: auto; }

.page-404 { padding-block: var(--space-section-y); text-align: center; }
.page-404__sub { margin-top: 2.5rem; font-size: 1.15rem; }
.page-404 .cats__row { margin-bottom: 2rem; text-align: left; }

.searchform { display: flex; gap: 0.5rem; max-width: 480px; margin: 0 auto 2rem; }
.searchform input {
  flex: 1; padding: 0.6rem 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-btn);
  font-size: 0.95rem;
}

/* Phân trang */
.woocommerce nav.woocommerce-pagination ul,
.pagination .page-numbers,
.nav-links .page-numbers {
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  justify-content: center; list-style: none;
  margin: 2rem 0 0; padding: 0; border: 0;
}
.woocommerce nav.woocommerce-pagination ul li { border: 0; margin: 0; overflow: visible; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers li a,
.page-numbers li span {
  display: grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 0.6rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-btn);
  font-weight: 600; font-size: 0.9rem; background: #fff;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers li .current {
  background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}

/* ── Content box SEO dưới listing danh mục ──────────────────────────────── */

.cat-seo {
  margin-top: var(--space-section-y);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
/* Dùng trọn chiều ngang container (1400px) — đồng bộ với mô tả sản phẩm và
   bài viết, chủ shop chốt 06/09/2026. Trước đây bó 78ch. */
.cat-seo__body { line-height: 1.8; }
.cat-seo__body > *:first-child { margin-top: 0; }
.cat-seo__body h2 { font-size: 1.3rem; margin-top: 1.75rem; }
.cat-seo__body h3 { font-size: 1.1rem; margin-top: 1.4rem; }
.cat-seo__body img,
.cat-seo__body figure { margin-inline: auto; border-radius: var(--radius-card); }
.cat-seo__body ul,
.cat-seo__body ol { padding-left: 1.25rem; }

/* ==========================================================================
   PDP — trang chi tiết sản phẩm (WooCommerce native)
   ========================================================================== */

.woocommerce div.product { margin-top: 0.5rem; }
.woocommerce div.product .product_title {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; margin-bottom: 0.6rem;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--color-primary); font-weight: 800; font-size: 1.6rem;
}
.woocommerce div.product p.price del { color: var(--color-text-secondary); font-size: 1rem; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product div.images,
.woocommerce div.product div.summary { margin-bottom: 2rem; }
.woocommerce div.product div.images img { border-radius: var(--radius-card); }
.woocommerce div.product div.images .flex-control-thumbs { margin-top: 0.6rem; gap: 0.4rem; display: flex; }
.woocommerce div.product div.images .flex-control-thumbs li { width: auto; flex: 0 0 calc(20% - 0.32rem); margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img {
  border: 1px solid var(--color-border); border-radius: 6px; opacity: 0.75;
}
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
  opacity: 1; border-color: var(--color-primary);
}

.woocommerce div.product form.cart { margin-bottom: 1.25rem; }
.woocommerce div.product form.cart div.quantity { margin-right: 0.6rem; }
.woocommerce .quantity input.qty {
  height: 42px; width: 72px; padding: 0 0.5rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-btn);
}
.woocommerce div.product form.cart .button { height: 42px; }

/* ── Hàng mua hàng: [số lượng] [Thêm vào giỏ] [Mua ngay] ─────────────────
   Phân vai rõ ràng thay vì hai nút đặc giống nhau: "Mua ngay" là hành động
   mạnh (đi thẳng thanh toán) nên để đặc, "Thêm vào giỏ" viền rỗng. Cùng tông
   coral nên vẫn là một cặp, không phải hai màu đánh nhau. */
.pdp-buy {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  margin-bottom: 0.5rem;
}
/* gap lo khoảng cách rồi — bỏ margin lẻ của WooCommerce */
.woocommerce div.product form.cart .pdp-buy div.quantity { margin-right: 0; }

.pdp-buy .single_add_to_cart_button,
.pdp-buy .pdp-buynow { flex: 1 1 auto; min-width: 148px; }

.woocommerce div.product form.cart .pdp-buy .single_add_to_cart_button {
  background: transparent; color: var(--color-primary);
}
.woocommerce div.product form.cart .pdp-buy .single_add_to_cart_button:hover {
  background: var(--color-primary); color: #fff;
}

/* Phản hồi sau khi thêm giỏ — thay cho dải thông báo mặc định của WooCommerce,
   vốn đã bỏ vì thêm giỏ nay chạy AJAX không tải lại trang. */
.woocommerce div.product form.cart .pdp-buy .single_add_to_cart_button.is-added {
  background: var(--color-success); border-color: var(--color-success); color: #fff;
}

.pdp-buy .pdp-buynow[disabled],
.pdp-buy .pdp-buynow[disabled]:hover {
  opacity: 0.45; cursor: not-allowed;
  background: var(--color-primary); border-color: var(--color-primary);
}

@media (max-width: 560px) {
  .pdp-buy .single_add_to_cart_button,
  .pdp-buy .pdp-buynow { flex: 1 1 100%; }
}

/* Badge giỏ nảy một cái khi số thay đổi — tín hiệu duy nhất cho biết đã thêm
   thành công, vì không còn thông báo nào khác. */
@keyframes tgk-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.hdr__cart-badge.is-bump { animation: tgk-badge-bump 0.42s ease; }
@media (prefers-reduced-motion: reduce) {
  .hdr__cart-badge.is-bump { animation: none; }
}

.woocommerce div.product .woocommerce-tabs ul.tabs { padding: 0; margin-bottom: 1.25rem; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: var(--color-border); }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: var(--color-surface); border-color: var(--color-border); border-radius: 6px 6px 0 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: #fff; border-bottom-color: #fff; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-weight: 700; color: var(--color-heading); }
/* Mô tả sản phẩm dùng TRỌN chiều ngang container (1400px) — chủ shop chốt
   06/09/2026, cho đồng bộ với nội dung bài viết.
   Trước đây max-width 78ch mà thiếu margin-inline:auto nên khối dính mép trái,
   chừa trống toác nửa phải; bỏ hẳn max-width thì không còn khoảng trống đó. */
.woocommerce div.product .woocommerce-tabs .panel { line-height: 1.8; }
.woocommerce div.product .woocommerce-tabs .panel img,
.woocommerce div.product .woocommerce-tabs .panel figure { margin-inline: auto; }

.pdp-trust {
  list-style: none; margin: 1rem 0; padding: 0.85rem 1rem;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex; flex-direction: column; gap: 0.5rem;
  font-size: 0.9rem;
}
.pdp-trust li { display: flex; align-items: center; gap: 0.5rem; }
.pdp-trust svg { color: var(--color-primary); flex-shrink: 0; }
.pdp-help { font-size: 0.9rem; color: var(--color-text-secondary); }
.pdp-help a { color: var(--color-primary); }

/* Swatch biến thể (plugin woo-variation-swatches) */
.woocommerce div.product .variations th,
.woocommerce div.product .variations td { padding: 0.4rem 0.5rem 0.4rem 0; }
.woocommerce div.product .variations label { font-weight: 700; color: var(--color-heading); }

.related.products,
.upsells.products { margin-top: var(--space-section-y); }
.related.products > h2,
.upsells.products > h2 {
  font-size: var(--text-h2); font-weight: 800;
  text-transform: uppercase; text-align: center; margin-bottom: 1.5rem;
}

/* ==========================================================================
   GIỎ HÀNG / THANH TOÁN / TÀI KHOẢN
   Port thiết kế bản Astro. Template WooCommerce đã được override trong
   theme/woocommerce/ nên markup ở đây là của mình, không phải shop_table.
   ========================================================================== */

.ship-note {
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  background: #fff6f4;
  border: 1px solid var(--color-peach);
  border-radius: var(--radius-card);
  font-size: 0.92rem;
}
.ship-note--ok { background: #f2fbee; border-color: var(--color-success); }
.ship-note .amount { color: var(--color-primary); font-weight: 800; }

/* ── Giỏ hàng ───────────────────────────────────────────────────────────── */

.cart { padding-bottom: var(--space-section-y); }
.cart__title, .co__title { font-size: 1.6rem; margin-bottom: 1.5rem; }

.cart__empty {
  text-align: center;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2.5rem;
}
.cart__empty-ic { font-size: 3rem; margin: 0; }
.cart__empty p { color: var(--color-text-secondary); margin: 0.5rem 0 1.25rem; }

.cart__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2rem;
  align-items: start;
}
.cart__items {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
}

.citem {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto auto auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid var(--color-border);
}
.citem:last-of-type { border-bottom: 0; }
.citem__media img {
  width: 80px; height: 80px;
  border-radius: 8px;
  background: var(--color-surface);
  object-fit: cover;
}
.citem__info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.citem__name { font-weight: 600; color: var(--color-heading); }
.citem__name:hover { color: var(--color-primary); }
.citem__variant,
.citem__variant p { font-size: 0.82rem; color: var(--color-text-secondary); margin: 0; }
.citem__price { font-size: 0.88rem; color: var(--color-text-secondary); }

.citem__qty .quantity { display: block; }
.citem__qty input[type='number'],
.citem__qty .qty {
  width: 68px;
  padding: 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  text-align: center;
  font-family: inherit;
}
.citem__total { font-weight: 800; color: var(--color-primary); white-space: nowrap; }
.citem__remove a.remove {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--color-text-secondary) !important;
  font-size: 1.1rem;
  text-decoration: none;
  background: transparent !important;
}
.citem__remove a.remove:hover {
  color: #fff !important;
  background: var(--color-primary-dark) !important;
}

.cart__actions {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
  align-items: center; justify-content: space-between;
  padding: 1rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-alt);
}
.cart__coupon { display: flex; gap: 0.5rem; flex: 1 1 260px; }
.cart__coupon input {
  flex: 1; min-width: 0;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  font-family: inherit;
}
/* Nút cập nhật KHÔNG ẩn bằng CSS — main.js ẩn nó khi đã gắn được cơ chế
   tự cập nhật. WordPress không thêm class `no-js` ở frontend, nên ẩn bằng CSS
   sẽ khoá luôn khách tắt JavaScript: họ không còn cách nào đổi số lượng. */

.cart__summary,
.cart-totals {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  background: var(--color-surface-alt);
}
.cart__summary { padding: 0; border: 0; background: transparent; }
.cart-totals h2 { font-size: 1.15rem; margin: 0 0 1rem; }
.cart__row {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 0.5rem; gap: 1rem;
}
.cart__row--total {
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.5rem;
}
.cart__row--total strong,
.cart__row strong { color: var(--color-primary); font-size: 1.25rem; }
.cart__row--coupon span:last-child { color: var(--color-success); }
.cart__note { font-size: 0.82rem; color: var(--color-text-secondary); margin: 0 0 1.25rem; }
.cart-totals .wc-proceed-to-checkout { padding: 0; }
.cart-totals .wc-proceed-to-checkout a.checkout-button { width: 100%; margin: 0; }
.cart__continue {
  display: block; text-align: center; margin-top: 0.85rem;
  color: var(--color-text-secondary); font-size: 0.9rem;
}
.cart__continue:hover { color: var(--color-primary); }

/* Dòng phí vận chuyển do WooCommerce render (ul#shipping_method) */
.cart-totals .woocommerce-shipping-totals,
.co__summary .woocommerce-shipping-totals { display: block; margin-bottom: 0.5rem; }
.cart-totals #shipping_method,
.co__summary #shipping_method { list-style: none; margin: 0.25rem 0 0; padding: 0; font-size: 0.9rem; }

@media (max-width: 860px) {
  .cart__layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .citem {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      'media info remove'
      'media qty total';
    row-gap: 0.5rem;
  }
  .citem__media { grid-area: media; }
  .citem__media img { width: 64px; height: 64px; }
  .citem__info { grid-area: info; }
  .citem__qty { grid-area: qty; }
  .citem__total { grid-area: total; align-self: center; text-align: right; }
  .citem__remove { grid-area: remove; justify-self: end; }
}

/* ── Thanh toán ─────────────────────────────────────────────────────────── */

.co__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 2rem;
  align-items: start;
}
.co__form { display: flex; flex-direction: column; gap: 1rem; }
.co__form h2 { font-size: 1.15rem; margin: 0.5rem 0 0; }
.co__form .col2-set { display: block; }
.co__form .col2-set .col-1,
.co__form .col2-set .col-2 { width: auto; float: none; }

/* Field WooCommerce → khuôn dạng như form Astro */
.woocommerce form .form-row,
.co__form .form-row {
  display: flex; flex-direction: column; gap: 0.35rem;
  padding: 0; margin: 0 0 0.85rem;
}
.woocommerce form .form-row label,
.co__form label {
  font-size: 0.9rem; font-weight: 600; color: var(--color-heading);
  display: flex; flex-direction: column; gap: 0.35rem;
}
.woocommerce form .form-row label { display: block; margin-bottom: 0.1rem; }
.req,
.woocommerce form .form-row .required { color: var(--color-primary); text-decoration: none; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.co__form input,
.co__form textarea,
.co__form select,
.acc__form input,
.acc__form select,
.auth__form input {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.co__form input:focus,
.acc__form input:focus,
.auth__form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(237, 93, 71, 0.15);
}

/* Viền input đậm hơn mặc định: #ececec quá nhạt, trên nền trắng gần như
   không thấy ô nhập ở đâu. */
.auth__form input,
.acc__form input,
.acc__form select {
  border-color: #d6cfce;
}
.auth__form label {
  gap: 0.4rem;
  color: var(--color-heading);
}
.woocommerce form .form-row-first,
.woocommerce form .form-row-last { width: 100%; float: none; }
@media (min-width: 620px) {
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last {
    width: calc(50% - 0.5rem);
    display: inline-flex;
    vertical-align: top;
  }
  .woocommerce form .form-row-first { margin-right: 1rem; }
}

.co__summary {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  background: var(--color-surface-alt);
  position: sticky;
  top: 90px;
}
.co__summary h2 { font-size: 1.1rem; margin: 0 0 1rem; }
.co__items { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.co__items li {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0.6rem; align-items: center; font-size: 0.88rem;
}
.co__item-media img {
  width: 48px; height: 48px;
  border-radius: 6px; background: var(--color-surface); object-fit: cover;
}
.co__item-name { min-width: 0; }
.co__item-name em { color: var(--color-text-secondary); font-style: normal; }
.co__item-variant,
.co__item-variant p { display: block; color: var(--color-text-secondary); font-size: 0.78rem; margin: 0; }
.co__item-total { font-weight: 700; white-space: nowrap; }
.co__row-sum {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 0.6rem; border-top: 1px solid var(--color-border); margin-bottom: 0.4rem;
}
.co__row-sum--total strong { color: var(--color-primary); font-size: 1.2rem; }
.co__pay-title { font-size: 1rem; margin: 1.25rem 0 0.75rem; }

/* Ô quốc gia bị ẩn (chỉ bán trong nước) — vẫn phải nằm trong DOM để
   WooCommerce có giá trị country mà tính thuế/vận chuyển. */
.tgk-hidden-field,
.form-row.tgk-hidden-field { display: none !important; }

/* Tiêu đề "Thông tin thanh toán" / "Thông tin bổ sung" của WooCommerce:
   cột trái chỉ có đúng một khối field nên tiêu đề không phân biệt được gì.
   display:none (không phải ẩn bằng vị trí) để trình đọc màn hình cũng bỏ qua —
   thông tin này đã nằm trong H1 "Thanh toán" của trang. */
.woocommerce-billing-fields > h3,
.woocommerce-additional-fields > h3 { display: none; }

/* Ô tick "Tạo tài khoản mới?" — mặc định checkbox và chữ rớt hai dòng. */
.woocommerce-account-fields .create-account > label,
.woocommerce-checkout .form-row.create-account > label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
}
.woocommerce-account-fields .create-account input[type='checkbox'] {
  width: auto !important;
  margin: 0 !important;
  accent-color: var(--color-primary);
}
.woocommerce-account-fields { margin-top: 0.5rem; }

/* Dải "Bạn đã có tài khoản?" ở đầu trang — giữ vì khách cũ đăng nhập thì địa chỉ
   tự điền, nhưng làm nhẹ đi thay vì một khối xám to chắn ngang. */
.woocommerce-form-login-toggle .woocommerce-info {
  background: transparent;
  border: 1px dashed var(--color-border);
  border-top: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  margin-bottom: 1.25rem;
}
.woocommerce-form-login-toggle .woocommerce-info::before { display: none; }
.woocommerce-form-login-toggle .woocommerce-info a { color: var(--color-primary); font-weight: 600; }

/* Ô mã giảm giá dưới bảng đơn hàng */
.co__coupon {
  border-top: 1px solid var(--color-border);
  margin-top: 0.85rem;
  padding-top: 0.9rem;
}
.co__coupon > label {
  display: block;
  font-size: 0.85rem; font-weight: 700; color: var(--color-heading);
  margin-bottom: 0.4rem;
}
.co__coupon-row { display: flex; gap: 0.5rem; }
.co__coupon-row input {
  flex: 1; min-width: 0;
  border: 1px solid #d6cfce;
  border-radius: var(--radius-btn);
  padding: 0.55rem 0.75rem;
  font-family: inherit; font-size: 0.92rem;
}
.co__coupon-row .btn { white-space: nowrap; padding-inline: 1rem; }
.co__coupon-msg {
  display: block; margin-top: 0.45rem;
  font-size: 0.8rem; color: var(--color-primary-dark);
}
.co__coupon-msg.is-ok { color: #2f7d18; }

/* Dropdown địa chỉ */
.woocommerce form .form-row select:disabled {
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.co__back {
  display: block; text-align: center; margin-top: 0.85rem;
  font-size: 0.9rem; color: var(--color-text-secondary);
}
.co__back:hover { color: var(--color-primary); }

/* Cổng thanh toán — thẻ chọn như bản Astro */
.woocommerce-checkout #payment { background: transparent; border-radius: 0; }
.woocommerce-checkout #payment ul.payment_methods {
  list-style: none; margin: 0; padding: 0; border: 0;
  display: flex; flex-direction: column; gap: 0.6rem;
}
.woocommerce-checkout #payment ul.payment_methods li {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 0.85rem;
  margin: 0;
  background: #fff;
  cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(237, 93, 71, 0.15);
}
.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline; font-weight: 700; color: var(--color-heading); cursor: pointer;
}
.woocommerce-checkout #payment ul.payment_methods li img { max-height: 28px; width: auto; margin-left: 0.5rem; }
.woocommerce-checkout #payment div.payment_box {
  background: var(--color-surface-alt);
  border-radius: var(--radius-btn);
  margin: 0.6rem 0 0;
  padding: 0.75rem;
  font-size: 0.88rem;
  color: var(--color-text);
}
.woocommerce-checkout #payment div.payment_box::before { display: none; }
.woocommerce-checkout #payment div.form-row { padding: 1rem 0 0; margin: 0; }
.woocommerce-checkout #payment .place-order { display: block; }
.woocommerce #payment #place_order { float: none; width: 100%; }

@media (max-width: 860px) {
  .co__layout { grid-template-columns: 1fr; }
  .co__summary { position: static; }
}

/* ── Thông báo WooCommerce ──────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice {
  border-top: 3px solid var(--color-primary);
  background: var(--color-surface-alt);
  border-radius: var(--radius-card);
  list-style: none;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--color-primary); }
.woocommerce-error { border-top-color: var(--color-primary-dark); }

/* ── Đăng nhập / Đăng ký / Quên mật khẩu ───────────────────────────────── */

/* Chỉ hiện MỘT form tại một thời điểm; panel kia dùng thuộc tính `hidden`.
   !important vì .auth__card có display riêng, `hidden` mặc định sẽ bị đè. */
[hidden] { display: none !important; }

/* Trang WooCommerce (tài khoản/giỏ/thanh toán) không bị bó 820px căn trái như
   trang tĩnh — nếu bó, form đăng nhập 420px sẽ lệch hẳn sang trái. */
.page-single--wc .page-single__content { max-width: none; }
/* Trang tĩnh có padding-top cho tiêu đề; trang WC không in tiêu đề page nên
   khoảng trống đó thành hụt hẫng giữa header và form. */
.page-single--wc { padding-block: 0; }

/* NHƯNG giỏ hàng và thanh toán CÓ tiêu đề riêng (.cart__title / .co__title) —
   bỏ hết padding làm chữ dính sát header. Trả lại khoảng thở cho hai trang này.
   (Trang đăng nhập/tài khoản không cần vì .auth và .acc có margin riêng.) */
.cart { padding-top: 2rem; }
.co__title { margin-top: 2rem; }

/* Trang đăng nhập/đăng ký: footer còn margin-top riêng, cộng vào phần dư của
   khối căn giữa làm khoảng trắng DƯỚI form gấp đôi phần TRÊN. Bỏ để cân đối. */
body.woocommerce-account .ftr { margin-top: 0; }

.auth {
  /* KHÔNG dùng dải nền xám: một khối xám bo góc nổi giữa nền trắng nhìn lạc lõng,
     và phần nền thừa dưới card tạo khoảng trắng vô nghĩa. Độ tương phản lấy từ
     viền + bóng đổ của chính card. */
  margin-block: 2rem;
  display: flex;
  justify-content: center;   /* căn GIỮA — mặc định WooCommerce đổ về trái */

  /* Form đăng nhập ngắn nên trang thừa một mảng trắng lớn phía dưới, nhìn như
     bị hụt. Cho khối này chiếm một chiều cao tối thiểu rồi căn card vào giữa —
     khoảng trống chia đều trên/dưới nên trông có chủ đích. Trên mobile form cao
     hơn 55vh nên min-height không ảnh hưởng. */
  min-height: 55vh;
  align-items: center;
}
.auth__card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 1px solid #ded6d5;
  border-radius: 12px;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  box-shadow: 0 12px 32px rgba(83, 33, 29, 0.10), 0 2px 8px rgba(83, 33, 29, 0.07);
  box-sizing: border-box;
}
.auth__card h1,
.auth__card h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}
/* Gạch coral dưới tiêu đề — cùng ngôn ngữ với .section-heading của site. */
.auth__card h1::after,
.auth__card h2::after {
  content: '';
  display: block;
  width: 48px; height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  margin: 0.6rem auto 1.5rem;
}

/* WooCommerce tự bọc form login/register trong một khung có viền → thành HỘP
   LỒNG HỘP, nhìn rối và mờ. Bỏ hẳn khung đó, card bên ngoài là đủ. */
.woocommerce .auth__card form.login,
.woocommerce .auth__card form.register,
.auth__card form.login,
.auth__card form.register {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}
.auth__form { display: flex; flex-direction: column; gap: 0.9rem; }

/* Label phải là BLOCK, không phải flex-column.
   Với flex-column, chữ nhãn và <span class="req">*</span> thành hai flex item
   riêng nên dấu * bị đẩy xuống dòng dưới. Block thì chúng chảy inline như text
   bình thường, còn input tự xuống dòng vì nó là block. */
.auth__form label,
.acc__form label,
.co__form label {
  display: block;
  font-size: 0.9rem; font-weight: 600; color: var(--color-heading);
}
.auth__form label > input,
.auth__form label > select,
.auth__form label > textarea,
.acc__form label > input,
.acc__form label > select,
.co__form label > input,
.co__form label > select,
.co__form label > textarea { margin-top: 0.4rem; }
.auth__form label > small { display: block; margin-top: 0.35rem; font-weight: 400; color: var(--color-text-secondary); }
.auth__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.auth__remember {
  display: flex !important;
  align-items: center; gap: 0.5rem;
  font-weight: 400 !important;
  margin: 0;
}
.auth__remember input { width: auto; }
.auth__link { font-size: 0.88rem; color: var(--color-primary); }

/* Ô tick đồng ý chính sách */
.auth__terms {
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400 !important;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
}
.auth__terms input {
  width: auto !important;
  margin: 0.15rem 0 0 !important;
  flex-shrink: 0;
  accent-color: var(--color-primary);
}
.auth__terms a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

/* Hàng Họ | Tên đệm và tên — LUÔN 2 cột trên 1 dòng.
   minmax(0,1fr) để ô co được thay vì đẩy nhau xuống dòng khi hẹp. */
.auth__row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; }

/* Trang chờ sau đăng ký */
.auth__card--done { text-align: center; }
.auth__icon { font-size: 2.75rem; line-height: 1; margin-bottom: 0.5rem; }
.auth__done-lead { font-size: 1rem; color: var(--color-text); margin: 0 0 0.5rem; }
.auth__done-lead strong { color: var(--color-heading); }
.auth__done-note { font-size: 0.87rem; color: var(--color-text-secondary); margin: 0 0 1.5rem; line-height: 1.6; }

/* Thanh mức độ mật khẩu — 4 đoạn, tô dần theo số tiêu chí đạt.
   Luôn chiếm chỗ (kể cả khi chưa gõ) nên không đẩy layout. */
.pwbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 0.5rem;
}
.pwbar span {
  height: 5px;
  border-radius: 999px;
  background: #e6e0df;
  transition: background 0.2s ease;
}
.pwbar[data-level="1"] span:nth-child(-n+1) { background: #d93025; }
.pwbar[data-level="2"] span:nth-child(-n+2) { background: #e8710a; }
.pwbar[data-level="3"] span:nth-child(-n+3) { background: #f2b705; }
.pwbar[data-level="4"] span                 { background: #2f7d18; }

/* Danh sách yêu cầu mật khẩu */
.pwreq {
  list-style: none;
  margin: -0.4rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.15rem 0.75rem;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}
.pwreq li { display: flex; align-items: center; gap: 0.35rem; }
.pwreq__mark { font-size: 0.9em; width: 1em; text-align: center; }
.pwreq li.is-ok { color: #2f7d18; }
.pwreq li.is-ok .pwreq__mark { font-weight: 700; }
.pwreq__match {
  display: block; margin-top: 0.35rem;
  font-size: 0.78rem; font-weight: 400;
  color: var(--color-primary-dark);
}
.pwreq__match.is-ok { color: #2f7d18; }
@media (max-width: 420px) { .pwreq { grid-template-columns: 1fr; } }
.auth__link:hover { text-decoration: underline; }

/* ── Nút đăng nhập bằng mạng xã hội (Nextend Social Login) ──────────────
   Plugin tự chèn vào hook woocommerce_login_form_end / register_form_end.
   Ngăn cách bằng chữ "hoặc" để khách hiểu đây là cách thay thế, không phải
   bước bắt buộc tiếp theo. */
.auth__form .nsl-container {
  margin: 0;
  padding-top: 1.25rem;
  position: relative;
}
.auth__form .nsl-container::before {
  content: 'hoặc';
  position: absolute;
  top: 0.35rem; left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding-inline: 0.75rem;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.auth__form .nsl-container::after {
  content: '';
  position: absolute;
  top: 1rem; left: 0; right: 0;
  height: 1px;
  background: var(--color-border);
  z-index: -1;
}
.auth__form .nsl-container-buttons { display: flex; flex-direction: column; gap: 0.6rem; }

/* Nút của Nextend hẹp hơn nút "Đăng nhập" ngay trên nó nên nhìn lệch.
   Thủ phạm KHÔNG phải thẻ <a> (plugin đã cho width:100%) mà là container:
   `div.nsl-container.nsl-container-block .nsl-container-buttons` đặt
   display:inline-grid, khiến khối co lại vừa nội dung. Selector đó có
   specificity cao hơn nên phải ép bằng !important. */
.auth__form .nsl-container .nsl-container-buttons {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
}
.auth__form .nsl-container-buttons a[data-plugin="nsl"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.auth__hint { font-size: 0.88rem; color: var(--color-text-secondary); margin: 0 0 0.5rem; }
.auth__alt {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}
.auth__alt a { color: var(--color-primary); font-weight: 600; }
.auth__sep { margin-inline: 0.4rem; }
.auth .woocommerce-form-login__submit,
.auth .woocommerce-Button { width: 100%; }


/* ── Trang tài khoản ───────────────────────────────────────────────────── */

.acc {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 2rem;
  padding-block: var(--space-section-y);
  align-items: start;
}

/* BẮT BUỘC — nếu không, sidebar co còn 78px và chữ xuống dòng từng ký tự.
   WooCommerce có rule `.woocommerce-account .woocommerce-MyAccount-navigation
   { float:left; width:30% }` (và 68% cho phần nội dung). Trong grid, phần trăm
   đó tính theo Ô LƯỚI chứ không phải cả trang: 30% của cột 260px = 78px.
   Ép về auto để item lấp đầy ô của nó.
   Selector cố ý thêm class WooCommerce để specificity CAO HƠN hẳn rule kia,
   không phụ thuộc vào thứ tự nạp stylesheet. */
.acc > .acc-nav.woocommerce-MyAccount-navigation,
.acc > .acc__main.woocommerce-MyAccount-content {
  float: none;
  width: auto;
}
.acc-nav {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  align-self: start;
}
.acc-nav__hi {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}
.acc-nav__hi strong { color: var(--color-heading); font-size: 1.05rem; }
.acc-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.acc-nav a {
  display: block;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-btn);
  color: var(--color-text);
  font-weight: 500;
  transition: var(--transition-hover);
}
.acc-nav a:hover { background: #fff; color: var(--color-primary); }
.acc-nav li.is-active > a { background: var(--color-primary); color: #fff; }
.acc-nav a.acc-nav__logout { color: var(--color-primary-dark); font-weight: 600; }
.acc-nav a.acc-nav__logout:hover { background: #fff; }

.acc__main { min-width: 0; }
.acc__title { font-size: 1.5rem; margin-bottom: 1.25rem; }
.acc__subtitle { font-size: 1.15rem; margin: 2rem 0 1rem; }
.acc__back { display: inline-block; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--color-text-secondary); }
.acc__back:hover { color: var(--color-primary); }

.acc-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.5rem;
}
.acc-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.acc-info dt { font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: 0.2rem; }
.acc-info dd { margin: 0; font-weight: 600; color: var(--color-heading); }
.acc-card__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0 0; }

.acc__form { display: flex; flex-direction: column; gap: 1rem; max-width: 560px; }
.acc__form label { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.9rem; font-weight: 600; color: var(--color-heading); }
.acc__form label small { font-weight: 400; color: var(--color-text-secondary); }
.acc__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.acc__fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  display: flex; flex-direction: column; gap: 1rem;
  margin: 0.5rem 0 0;
}
.acc__fieldset legend { font-family: var(--font-heading); font-weight: 700; padding-inline: 0.5rem; color: var(--color-heading); }

/* ── Danh sách đơn hàng ────────────────────────────────────────────────── */

.orders__empty {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  text-align: center;
}
.orders__empty p { color: var(--color-text-secondary); margin-bottom: 1rem; }

.orders__table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
}
.orders__head,
.orders__row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.4fr 1fr;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  align-items: center;
}
.orders__head {
  background: var(--color-surface);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-heading);
}
.orders__row { border-top: 1px solid var(--color-border); font-size: 0.92rem; }
.orders__row:hover { background: var(--color-surface-alt); }
.orders__id { font-weight: 700; color: var(--color-accent); }
.orders__total { font-weight: 700; color: var(--color-primary); }
.orders__status {
  font-style: normal;
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  white-space: nowrap;
}
.orders__status--completed { background: #eaf7e6; color: #2f7d18; }
.orders__status--processing { background: #e7f0fe; color: var(--color-info); }
.orders__status--on-hold,
.orders__status--pending { background: #fff4e5; color: #a85b00; }
.orders__status--cancelled,
.orders__status--refunded,
.orders__status--failed { background: #fdecea; color: var(--color-primary-dark); }
.orders__pager { display: flex; gap: 0.75rem; margin-top: 1.25rem; }

/* ── Chi tiết đơn hàng ─────────────────────────────────────────────────── */

.od__head { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.od__head h1 { font-size: 1.5rem; margin: 0; }
.od__date { color: var(--color-text-secondary); font-size: 0.9rem; margin: 0.4rem 0 1.5rem; }
.od__items {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #fff;
  margin-bottom: 1.5rem;
}
.od__item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 0.85rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.od__item:last-child { border-bottom: 0; }
.od__item-media img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; background: var(--color-surface); }
.od__item-name { min-width: 0; font-weight: 600; color: var(--color-heading); }
.od__item-name em { color: var(--color-text-secondary); font-style: normal; font-weight: 400; }
.od__item-name .wc-item-meta { list-style: none; margin: 0.2rem 0 0; padding: 0; font-size: 0.8rem; font-weight: 400; color: var(--color-text-secondary); }
.od__item-total { font-weight: 700; white-space: nowrap; }
.od__item--sum { grid-template-columns: minmax(0, 1fr) auto; background: var(--color-surface-alt); }
.od__item--total { font-weight: 800; }
.od__grand { color: var(--color-primary); font-size: 1.15rem; font-weight: 800; }
.od__addr {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.od__addr h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.od__addr p { margin: 0; line-height: 1.7; }

@media (max-width: 860px) {
  .acc { grid-template-columns: 1fr; }
  .acc-info { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .orders__head { display: none; }
  .orders__row { grid-template-columns: 1fr auto; row-gap: 0.3rem; }
  .acc__row { grid-template-columns: 1fr; }
  .od__item { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .od__item-media img { width: 44px; height: 44px; }
}
/* ==========================================================================
   BÀI VIẾT
   ========================================================================== */

.post { padding-block: 1.5rem var(--space-section-y); }
.post__header {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 2rem; align-items: start; margin-bottom: 2rem;
}
.post__media {
  border-radius: var(--radius-card); overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.post__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.post__intro { display: flex; flex-direction: column; gap: 0.85rem; }
.post__crumbs {
  font-size: 0.82rem; color: var(--color-text-secondary);
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.post__crumbs a:hover { color: var(--color-primary); }
.post__crumb-current {
  color: var(--color-text); max-width: 40ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post__badge {
  align-self: flex-start;
  background: var(--color-primary); color: #fff;
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem; border-radius: 999px;
}
.post__badge:hover { background: var(--color-primary-dark); }
.post__title { font-size: var(--text-h1); margin: 0; }
.post__meta { font-size: 0.88rem; color: var(--color-text-secondary); }
.post__dot { margin-inline: 0.4rem; }

/* Content full-width trong khung bài, ảnh luôn canh giữa */
.post__content { line-height: 1.8; }
.post__content > * { max-width: 100%; }
.post__content h2 { font-size: 1.4rem; margin-top: 2rem; }
.post__content h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.post__content img,
.post__content figure { margin-inline: auto; border-radius: var(--radius-card); }
.post__content figure img { margin-inline: auto; }
.post__content figcaption { text-align: center; font-size: 0.85rem; color: var(--color-text-secondary); }
.post__content ul, .post__content ol { padding-left: 1.25rem; }
/* Bảng trong nội dung soạn thảo — dùng CHUNG cho bài viết và phần mô tả
   sản phẩm. Trước đây chỉ .post__content có viền, nên bảng thông số trong mô
   tả sản phẩm hiện ra như chữ rời rạc không khung. */
.post__content table,
.cat-seo__body table,
.woocommerce div.product .woocommerce-tabs .panel table {
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  border-radius: var(--radius-card);
  margin: 1.25rem 0;
  overflow: hidden;
  width: 100%;
}

.post__content th,
.post__content td,
.cat-seo__body th,
.cat-seo__body td,
.woocommerce div.product .woocommerce-tabs .panel th,
.woocommerce div.product .woocommerce-tabs .panel td {
  border: 1px solid var(--color-border);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}

.post__content th,
.cat-seo__body th,
.woocommerce div.product .woocommerce-tabs .panel th {
  background: var(--color-surface-alt);
  font-weight: 700;
}

/* Trình soạn thảo block ghi width/height CỐ ĐỊNH vào inline style khi ai đó
   kéo giãn bảng — ví dụ mô tả LEOBOG HI75C Pro có
   style="width: 37.1584%; height: 818.563px". Hệ quả: bảng hẹp một góc, các
   hàng bị kéo cao toác ra. Inline style thắng stylesheet nên phải !important.

   CHỈ ép width của <table> và height của mọi cấp; KHÔNG đụng width của <td> —
   đó là tỉ lệ cột do người soạn cố ý đặt (19% nhãn / 76% giá trị), ép về auto
   là hỏng bố cục bảng. */
.post__content table,
.cat-seo__body table,
.woocommerce div.product .woocommerce-tabs .panel table { width: 100% !important; }

.post__content table,
.post__content table tr,
.cat-seo__body table,
.cat-seo__body table tr,
.cat-seo__body table th,
.cat-seo__body table td,
.post__content table th,
.post__content table td,
.woocommerce div.product .woocommerce-tabs .panel table,
.woocommerce div.product .woocommerce-tabs .panel table tr,
.woocommerce div.product .woocommerce-tabs .panel table th,
.woocommerce div.product .woocommerce-tabs .panel table td { height: auto !important; }

/* Ô kẻ hàng so le cho dễ dò mắt theo dòng ở bảng thông số dài. */
.post__content tbody tr:nth-child(even),
.cat-seo__body tbody tr:nth-child(even),
.woocommerce div.product .woocommerce-tabs .panel tbody tr:nth-child(even) {
  background: #fcfafa;
}

/* Nội dung ô thường bọc trong <p> do trình soạn thảo — bỏ margin thừa, nếu
   không mỗi hàng cao gấp đôi và bảng trông rời rạc. */
.post__content td > p,
.post__content th > p,
.cat-seo__body td > p,
.cat-seo__body th > p,
.woocommerce div.product .woocommerce-tabs .panel td > p,
.woocommerce div.product .woocommerce-tabs .panel th > p { margin: 0; }

.post__content td > p + p,
.woocommerce div.product .woocommerce-tabs .panel td > p + p { margin-top: 0.35rem; }

.post__back { margin-top: 2rem; }
.post__related { margin-top: var(--space-section-y); }

@media (max-width: 760px) {
  .post__header { grid-template-columns: 1fr; gap: 1.25rem; }
  .post__media { max-width: 320px; }
}

/* ── Thẻ bài viết ────────────────────────────────────────────────────────── */

.post-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .post-grid { grid-template-columns: 1fr; } }

.bcard {
  display: flex; flex-direction: column;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden; transition: var(--transition-hover); height: 100%;
}
.bcard:hover {
  box-shadow: var(--shadow-card-hover); transform: translateY(-3px);
  border-color: var(--color-primary);
}
.bcard__media {
  display: block; aspect-ratio: 5 / 3;
  background: var(--color-surface); position: relative;
}
.bcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bcard__noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; }
.bcard__body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.bcard__date { font-size: 0.76rem; color: var(--color-text-secondary); }
.bcard__title { font-weight: 700; color: var(--color-heading); line-height: 1.35; font-size: 0.98rem; }
.bcard__title:hover { color: var(--color-primary); }
.bcard__excerpt { margin: 0; font-size: 0.86rem; color: var(--color-text-secondary); }
.bcard__more { margin-top: auto; color: var(--color-primary); font-weight: 700; font-size: 0.85rem; }

/* ==========================================================================
   TEST BÀN PHÍM
   ========================================================================== */

.kbtest { padding-block: var(--space-section-y); }
.kbtest__lead { text-align: center; color: var(--color-text-secondary); max-width: 46rem; margin: 0 auto 1.5rem; }
.kbtest__bar { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-bottom: 1rem; }
.kbtest__counter { font-size: 0.95rem; }
.kbtest__counter strong { color: var(--color-primary); font-size: 1.1rem; }

.kbtest__board {
  background: var(--color-accent); border-radius: var(--radius-card);
  padding: clamp(0.5rem, 2vw, 1rem);
  display: flex; flex-direction: column; gap: 0.4rem;
  max-width: 920px; margin: 0 auto; outline: none; overflow-x: auto;
}
.kbrow { display: flex; gap: 0.35rem; justify-content: center; }
.kbrow--fn { margin-bottom: 0.3rem; }
.key {
  flex: 1 1 0; min-width: 34px; height: 44px;
  display: grid; place-items: center;
  background: #fff; color: var(--color-heading);
  border-radius: 6px; font-size: 0.8rem; font-weight: 600;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
  user-select: none; transition: transform 0.04s, background 0.1s;
}
.key.w15 { flex-grow: 1.5; } .key.w17 { flex-grow: 1.7; } .key.w22 { flex-grow: 2.2; }
.key.w27 { flex-grow: 2.7; } .key.w2 { flex-grow: 2; } .key.w14 { flex-grow: 1.4; } .key.w6 { flex-grow: 6; }
.key.tested { background: var(--color-peach); }
.key.active { background: var(--color-primary); color: #fff; transform: translateY(2px); box-shadow: none; }
.kbrow--arrows .kbarrow-mid { display: flex; flex-direction: column; gap: 0.2rem; flex: 1 1 0; }
.kbrow--arrows .kbarrow-mid .key { height: 21px; }
.kbrow--arrows .key { flex: 1 1 0; max-width: 60px; }

.kbtest__content { max-width: 760px; margin: 2.5rem auto 0; line-height: 1.8; }
.kbtest__content h2 { font-size: 1.25rem; margin-top: 1.75rem; }

@media (max-width: 600px) {
  .key { min-width: 22px; height: 34px; font-size: 0.62rem; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.ftr {
  margin-top: var(--space-section-y);
  background: var(--color-accent); color: #fff;
}
.ftr__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem; padding-block: clamp(2rem, 4vw, 3rem);
}
.ftr__brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-family: var(--font-heading); }
.ftr__brand img { border-radius: 50%; background: #fff; padding: 2px; }
.ftr__tagline { color: var(--color-peach); font-weight: 700; font-size: 0.88rem; margin: 0.75rem 0 0.5rem; }
.ftr__desc { font-size: 0.88rem; opacity: 0.8; margin: 0; }
.ftr__title { color: #fff; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.85rem; }
.ftr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ftr__list a, .ftr__list li { font-size: 0.9rem; opacity: 0.85; }
.ftr__list a:hover { color: var(--color-peach); opacity: 1; }
.ftr__list--contact a { display: inline-flex; align-items: center; gap: 0.4rem; }
.ftr__bottom { border-top: 1px solid rgba(255, 255, 255, 0.15); padding-block: 1rem; }
.ftr__bottom p { margin: 0; font-size: 0.82rem; opacity: 0.7; }

@media (max-width: 900px) { .ftr__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ftr__inner { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ==========================================================================
   NÚT LIÊN HỆ NỔI
   ========================================================================== */

.floating-contact {
  position: fixed; right: 1rem; bottom: 1rem;
  display: flex; flex-direction: column; gap: 0.75rem; z-index: 50;
}
.floating-contact__btn {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 50%;
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: var(--transition-hover);
}
.floating-contact__btn:hover { transform: translateY(-2px) scale(1.05); }
.floating-contact__btn--tel { background: var(--color-primary); }
.floating-contact__btn--tel:hover { background: var(--color-primary-dark); }
.floating-contact__btn--zalo { background: #0068ff; animation: fc-pulse 2.4s ease-in-out infinite; }
.floating-contact__btn--zalo:hover { background: #0052cc; }
.floating-contact__btn--fb { background: #1877f2; }
.floating-contact__btn--fb:hover { background: #145dbf; }

@keyframes fc-pulse {
  0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
  50% { box-shadow: 0 4px 20px rgba(0, 104, 255, 0.55); }
}

@media (max-width: 480px) {
  .floating-contact { right: 0.75rem; bottom: 0.75rem; gap: 0.6rem; }
  .floating-contact__btn { width: 2.6rem; height: 2.6rem; }
}

/* ── Ô xác minh Cloudflare Turnstile ────────────────────────────────────
   Trước dùng reCAPTCHA (iframe cố định 304×78px, không co giãn — cần vá
   transform:scale() cho màn hình hẹp). Turnstile co giãn theo .tgk-captcha
   nhờ data-size="flexible" nên không cần vá gì thêm. */
.tgk-captcha {
  margin-block: 1rem;
  display: flex;
  justify-content: center;
}

/* data-size="flexible" của Turnstile tự co theo chiều rộng .tgk-captcha —
   không cần vá transform:scale() như bản reCAPTCHA cũ (khung cố định 304px). */
.tgk-captcha .cf-turnstile {
  width: 100%;
}
.tgk-captcha iframe {
  max-width: 100%;
}

/* ── Panel mời đặt mật khẩu (trang tài khoản) ───────────────────────────
   Thay cho notice mặc định của WooCommerce. Chủ ý khác hẳn: bản cũ là cảnh
   báo viền đỏ cho một việc không nguy hiểm; đây là lời mời — nền dịu, viền
   trái làm điểm nhấn, một nút chính và một lối bỏ qua. */
.pwpanel {
  align-items: flex-start;
  background: linear-gradient(180deg, #fff8f2 0%, #fffdfb 100%);
  border: 1px solid #f3e0d4;
  border-left: 3px solid var(--color-primary);
  border-radius: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1.5rem;
  padding: 1.05rem 1.15rem;
}

.pwpanel__icon {
  align-items: center;
  background: #fdece3;
  border-radius: 9px;
  color: var(--color-primary);
  display: flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

/* min-width:0 cho phép khối chữ co lại; thiếu nó thì flex item giữ nguyên
   chiều rộng nội dung và đẩy cụm nút rớt xuống dòng ngay cả khi còn chỗ. */
.pwpanel__body { flex: 1 1 16rem; min-width: 0; }

.pwpanel__title {
  color: var(--color-text);
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.2rem;
}

.pwpanel__text {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

.pwpanel__actions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.85rem;
}

.pwpanel__btn {
  background: var(--color-primary);
  border-radius: 8px;
  color: #fff;
  font-size: 0.87rem;
  font-weight: 600;
  padding: 0.55rem 1.05rem;
  text-decoration: none;
  white-space: nowrap;
}
.pwpanel__btn:hover { background: var(--color-primary-dark, #d94a34); color: #fff; }

.pwpanel__skip {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}
.pwpanel__skip:hover { text-decoration: underline; }

@media (max-width: 640px) {
  /* Trên máy hẹp cho cụm nút xuống hàng và trải đủ chiều ngang, thay vì
     bóp nút chính lại thành mẩu nhỏ khó bấm. */
  .pwpanel__actions { flex: 1 1 100%; }
  .pwpanel__btn { flex: 1 1 auto; text-align: center; }
}

/* ── Trang đặt hàng thành công ──────────────────────────────────────────
   Bản gốc WooCommerce trải hết khung 1400px của theme nên chữ nằm rải rác,
   đọc như một danh sách rời. Bó lại 760px và căn giữa: nội dung ở đây ít,
   khách chỉ cần đọc một mạch từ trên xuống rồi quét QR. */
.ty {
  margin-inline: auto;
  max-width: 760px;
  padding-block: 2rem 3rem;
}

.ty__head { text-align: center; margin-bottom: 1.75rem; }

.ty__icon {
  align-items: center;
  background: #e8f6ec;
  border-radius: 50%;
  color: #1f9d55;
  display: inline-flex;
  height: 52px;
  justify-content: center;
  margin-bottom: 0.85rem;
  width: 52px;
}
/* Đơn chờ chuyển khoản: tông cam "đang chờ", không phải xanh "đã xong" —
   nói đúng trạng thái để khách không tưởng mình đã trả tiền rồi.
   Class do PHP gắn, KHÔNG dùng :has() dò theo path của SVG: đổi icon một cái
   là màu hỏng mà không ai biết vì sao. */
.ty__head--waiting .ty__icon { background: #fdf0e6; color: #d97706; }

.ty__title {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.ty__lead {
  color: var(--color-text-secondary);
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0 auto;
  max-width: 52ch;
}

/* Lưới tóm tắt: 2 cột trên desktop, 1 cột trên điện thoại. Dùng grid thay vì
   <ul> trần của WooCommerce để nhãn và giá trị luôn thẳng hàng. */
.ty__overview {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  margin: 0 0 1.5rem;
  overflow: hidden;
}

.ty__cell { padding: 0.95rem 1.15rem; }
.ty__cell:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
.ty__cell:nth-child(odd)  { border-right: 1px solid var(--color-border); }

.ty__cell dt {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  margin-bottom: 0.2rem;
}
.ty__cell dd {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.ty__total { color: var(--color-primary); }

.ty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

.ty__btn {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 8px;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.7rem 1.4rem;
  text-decoration: none;
}
.ty__btn:hover { background: var(--color-primary-dark, #d94a34); color: #fff; }

.ty__btn--ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text);
}
.ty__btn--ghost:hover { background: #faf7f7; color: var(--color-text); }

.ty__help {
  color: var(--color-text-secondary);
  font-size: 0.88rem;
  margin-top: 1.25rem;
  text-align: center;
}
.ty__help a { color: var(--color-primary); font-weight: 600; }

/* Bảng chi tiết đơn do WooCommerce in ra (hook woocommerce_thankyou) —
   kéo về cùng ngôn ngữ thị giác với các thẻ ở trên. */
.ty .woocommerce-order-details,
.ty .woocommerce-customer-details { margin-top: 2rem; }

.ty .woocommerce-order-details__title,
.ty .woocommerce-column__title {
  font-size: 1.1rem;
  margin: 0 0 0.85rem;
}

.ty .woocommerce-table--order-details {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  border-collapse: separate;
  overflow: hidden;
  width: 100%;
}
.ty .woocommerce-table--order-details th,
.ty .woocommerce-table--order-details td {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  padding: 0.8rem 1.15rem;
}
.ty .woocommerce-table--order-details tfoot tr:last-child th,
.ty .woocommerce-table--order-details tfoot tr:last-child td {
  border-bottom: 0;
  font-size: 1.02rem;
}

@media (max-width: 560px) {
  .ty__overview { grid-template-columns: 1fr; }
  /* Một cột thì mọi đường kẻ dọc thành thừa, và ô cuối không cần kẻ ngang. */
  .ty__cell:nth-child(odd)  { border-right: 0; }
  .ty__cell:nth-child(-n+3) { border-bottom: 1px solid var(--color-border); }
  .ty__cell:last-child      { border-bottom: 0; }
  .ty__title { font-size: 1.35rem; }
  .ty__btn { flex: 1 1 auto; text-align: center; }
}

/* ── "Việc tiếp theo" sau khi thanh toán xong ─────────────────────────── */
.ty__next {
  list-style: none;
  margin: 1.35rem auto 0;
  max-width: 30rem;
  padding: 0;
  text-align: left;
}
.ty__next li {
  align-items: flex-start;
  color: var(--color-text-secondary);
  display: flex;
  font-size: 0.92rem;
  gap: 0.7rem;
  line-height: 1.55;
}
.ty__next li + li { margin-top: 0.7rem; }

.ty__step {
  background: var(--color-primary);
  border-radius: 50%;
  color: #fff;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 700;
  height: 20px;
  line-height: 20px;
  text-align: center;
  width: 20px;
}

/* ── Gợi ý mua thêm ───────────────────────────────────────────────────── */
.tyup {
  border-top: 1px solid var(--color-border);
  margin-top: 1rem;
  padding-top: 2.25rem;
}
.tyup__title {
  font-size: 1.25rem;
  margin: 0 0 1.25rem;
  text-align: center;
}