/* ==========================================================================
   Tàu Hũ Tươi Phúc An — components.css
   Các thành phần tái sử dụng: logo, button, toggle, card, icon...
   ========================================================================== */

/* ---------- "Ánh nước" — dải sóng chữ ký (2026-08-21, làm mới giao diện) ----------
   Divider trang trí thuần tuý (aria-hidden), không mang nội dung. Gợi cảm giác
   "thanh mát" của tàu hũ tươi bằng 2 màu ngọc bích + xanh dương nhạt — điểm
   nhấn RIÊNG, tách khỏi vàng gold vốn dành cho khu Menu/Đặt hàng. */
.water-divider {
  width: 100%;
  padding: 18px 0;
  overflow: hidden;
  line-height: 0;
}

.water-divider svg {
  display: block;
  width: 100%;
  height: 28px;
}

.water-divider__path {
  fill: none;
  stroke: var(--color-jade);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 14 10;
  opacity: 0.75;
  animation: water-divider-flow 7s linear infinite;
}

[data-theme='dark'] .water-divider__path {
  stroke: var(--color-sky);
}

@keyframes water-divider-flow {
  to { stroke-dashoffset: -240; }
}

@media (prefers-reduced-motion: reduce) {
  .water-divider__path { animation: none; }
}

/* ---------- Banner khuyến mãi (đầu trang, Admin bật/tắt) ---------- */
.promo-banner {
  margin: 0;
  padding: 10px 20px;
  text-align: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-on-gold);
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-strong));
}

/* ---------- Logo ---------- */
.logo-link {
  display: inline-flex;
  flex-shrink: 0;
  min-width: 0;
}

.logo-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  background-color: var(--logo-badge-bg);
  border: 1px solid var(--logo-badge-border);
  transition: background-color var(--transition-theme), border-color var(--transition-theme), backdrop-filter var(--transition-theme);
}

/* Glass effect: chỉ áp dụng khi ở Dark Mode (logo nền sáng cần khung kính mờ để nổi bật) */
[data-theme='dark'] .logo-badge {
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), var(--shadow-sm);
}

.logo-badge::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle, var(--logo-badge-glow) 0%, transparent 72%);
  z-index: -1;
}

.logo-badge img {
  height: 46px;
  width: auto;
  flex-shrink: 0;
  max-width: none;
}

@media (min-width: 1024px) {
  .logo-badge img {
    height: 52px;
  }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast),
    background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-gold);
  color: var(--color-on-gold);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--color-gold-strong);
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--shadow-md);
}

[data-theme='dark'] .btn--primary:hover,
[data-theme='dark'] .btn--primary:focus-visible {
  background-color: var(--color-gold);
  filter: brightness(1.08);
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-heading);
  border: 1.5px solid var(--color-border);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold-strong);
  background-color: rgba(var(--color-gold-rgb), 0.06);
  transform: translateY(-2px);
}

[data-theme='dark'] .btn--secondary:hover,
[data-theme='dark'] .btn--secondary:focus-visible {
  color: var(--color-gold);
}

.btn--block {
  width: 100%;
}

/* .btn luôn set display, nên thuộc tính [hidden] cần được nhắc lại tường minh để thắng */
.btn[hidden] {
  display: none;
}

.btn--on-dark {
  border-color: rgba(243, 236, 221, 0.35);
  color: #f3ecdd;
}

.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

/* ---------- Theme toggle ---------- */
.theme-toggle,
.theme-fab {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
  flex-shrink: 0;
}

.theme-toggle:hover,
.theme-toggle:focus-visible,
.theme-fab:hover,
.theme-fab:focus-visible {
  border-color: var(--color-gold);
  background-color: var(--color-bg-soft);
}

.theme-toggle svg,
.theme-fab svg {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.theme-toggle .icon-sun,
.theme-fab .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle .icon-moon,
.theme-fab .icon-moon {
  opacity: 0;
  transform: rotate(-60deg) scale(0.6);
}

[data-theme='dark'] .theme-toggle .icon-sun,
[data-theme='dark'] .theme-fab .icon-sun {
  opacity: 0;
  transform: rotate(60deg) scale(0.6);
}

[data-theme='dark'] .theme-toggle .icon-moon,
[data-theme='dark'] .theme-fab .icon-moon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ---------- Nút nổi đổi Chế độ tối/sáng — chỉ hiện ở mobile/tablet (<768px);
   desktop đã có icon này ngay trong header, không cần thêm nút nổi. Đặt CÙNG
   bên phải với nút Chat nổi, xếp ngay phía trên — không còn đối xứng trái/phải
   như trước (theo yêu cầu gom 2 nút nổi về cùng 1 bên). */
.theme-fab {
  position: fixed;
  right: 18px;
  bottom: 84px;
  z-index: 150;
  width: 50px;
  height: 50px;
  background-color: var(--color-surface);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: var(--shadow-lg);
}

.theme-fab:hover,
.theme-fab:focus-visible {
  transform: translateY(-3px);
}

@media (min-width: 768px) {
  .theme-fab {
    display: none;
  }
}

/* ---------- Hamburger ---------- */
.hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
}

.hamburger span {
  width: 18px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.hamburger[aria-expanded='true'] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger[aria-expanded='true'] span:nth-child(2) {
  opacity: 0;
}

.hamburger[aria-expanded='true'] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Nav link (desktop) ---------- */
.nav-link {
  position: relative;
  font-weight: 500;
  color: var(--color-text);
  padding-block: 6px;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-gold);
  transition: width var(--transition-base);
}

.nav-link:hover,
.nav-link:focus-visible {
  color: var(--color-gold-strong);
}

[data-theme='dark'] .nav-link:hover,
[data-theme='dark'] .nav-link:focus-visible {
  color: var(--color-gold);
}

.nav-link:hover::after,
.nav-link:focus-visible::after {
  width: 100%;
}

/* ---------- Card chung ---------- */
.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-theme),
    border-color var(--transition-theme);
}

/* ---------- Product card — dạng hàng dọc (menu list): ảnh trái, thông tin giữa, nút phải ---------- */
.product-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px var(--space-sm);
  padding: 10px 14px;
  transition: box-shadow var(--transition-base), border-color var(--transition-base), background-color var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
  background-color: var(--color-bg-soft);
}

.product-card__media {
  flex-shrink: 0;
  width: 72px;
}

.product-card__media-frame {
  position: relative;
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  padding: 2.5px;
  background: var(--metallic-gold);
  background-size: 220% 220%;
  background-position: 0% 0%;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-base), transform var(--transition-base), background-position 900ms var(--ease-premium);
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  background: #fff;
}

.product-card:hover .product-card__media-frame {
  box-shadow: var(--shadow-md);
  transform: scale(1.06);
  background-position: 100% 100%;
}

/* Tên chiếm trọn 1 hàng riêng, Giá 1 hàng, Mô tả 1 hàng riêng bên dưới (2 dòng) —
   từ khi nút CTA đổi thành icon tròn nhỏ (không còn nút chữ dài chiếm chỗ), có đủ
   không gian để cho Mô tả cả hàng riêng thay vì chen chung với Giá như trước, nên
   khách đọc được rõ mô tả món thay vì bị cắt cụt còn vài chữ. */
.product-card__info {
  flex: 1 1 150px;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "name" "price" "desc";
  row-gap: 2px;
}

.product-card__name {
  grid-area: name;
  font-size: 0.98rem;
  margin-bottom: 0;
}

.product-card__desc {
  grid-area: desc;
  font-size: 0.8rem;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
}

.product-card__price {
  grid-area: price;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-gold-strong);
  white-space: nowrap;
}

[data-theme='dark'] .product-card__price {
  color: var(--color-gold);
}

/* Nút "Đặt hàng" ở mỗi dòng Menu → icon tròn (túi hàng) ở MỌI khổ màn hình, không
   riêng mobile — đỡ lặp lại chữ "Đặt hàng" quá nhiều lần trên cùng 1 trang. Chữ
   vẫn còn trong DOM (ẩn bằng font-size:0, KHÔNG phải display:none) nên trình đọc
   màn hình vẫn đọc đúng nhãn ("Đặt hàng"/"Tư vấn" khi SALES_MODE tắt — order.js
   vẫn đổi textContent bình thường, không ảnh hưởng gì vì icon là ::before, không
   phải node con bị ghi đè). */
.product-card {
  flex-wrap: nowrap;
}

/* Bỏ hẳn khung tròn nền vàng (2 bản trước đều bị phản hồi là lệch/thô) — giờ
   nút chỉ còn là 1 vùng bấm trong suốt (giữ nguyên kích thước để đủ diện tích
   chạm ngón tay), icon 3D thật (SVG gradient + đổ bóng, xem .cta-bag-icon bên
   dưới) là toàn bộ phần hiển thị.
   NGUYÊN NHÂN THẬT SỰ của việc lệch tâm ở CẢ 2 bản trước: class `.btn` dùng
   chung có sẵn `gap: 8px` giữa các phần tử con (dùng cho nút có icon+chữ cách
   nhau) — dù chữ nhãn đã ẩn bằng font-size:0 (rộng = 0), flex container vẫn
   cộng thêm 8px khoảng cách giữa 2 flex item (chữ ẩn + icon), đẩy icon lệch
   khỏi tâm hình học ~4px. Phải khai báo lại `gap: 0` ở đây mới hết lệch thật
   sự — chỉ sửa hình dạng icon (như 2 lần trước) không giải quyết được gốc rễ. */
.product-card__cta {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  gap: 0;
  border-radius: var(--radius-full);
  font-size: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  box-shadow: none;
}

.product-card__cta:hover,
.product-card__cta:focus-visible {
  background: rgba(var(--color-gold-rgb), 0.12);
}

/* Icon túi hàng — đơn giản, phẳng, 1 màu (bỏ gradient + đổ bóng nổi khối theo
   phản hồi "nổi quá"). Hình vẽ chuẩn Lucide/Feather (shopping-bag, cân đối sẵn
   trên lưới 24x24), tô màu qua currentColor để đổi theo theme sáng/tối tự
   nhiên như icon khác trên trang. */
.cta-bag-icon {
  width: 24px;
  height: 24px;
  overflow: visible;
  color: var(--color-gold-strong);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

[data-theme='dark'] .cta-bag-icon {
  color: var(--color-gold);
}

.product-card__cta:hover .cta-bag-icon,
.product-card__cta:focus-visible .cta-bag-icon {
  transform: scale(1.08);
}

@media (max-width: 359px) {
  .cta-bag-icon {
    width: 22px;
    height: 22px;
  }

  .product-card__cta {
    width: 38px;
    height: 38px;
  }
}

/* ---------- Feature card (Vì sao chọn Phúc An) ---------- */
.feature-card {
  text-align: center;
  padding: var(--space-lg) var(--space-md);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-jade);
}

.feature-card__icon {
  width: 56px;
  height: 56px;
  margin-inline: auto;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  transition: background-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

[data-theme='dark'] .feature-card__icon {
  color: var(--color-jade);
}

.feature-card:hover .feature-card__icon {
  background-color: var(--color-jade);
  color: var(--color-on-jade);
  transform: scale(1.1) rotate(-4deg);
}

.feature-card__icon svg {
  width: 26px;
  height: 26px;
}

.feature-card h3 {
  font-size: 1.05rem;
  margin-bottom: 4px;
}

.feature-card p {
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* ---------- Chat FAB (Messenger) ---------- */
.chat-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 150;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background-color: var(--color-gold);
  color: var(--color-on-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  animation: chatFabPulse 3.2s ease-in-out infinite;
}

.chat-fab svg {
  width: 26px;
  height: 26px;
}

.chat-fab:focus-visible {
  background-color: var(--color-gold-strong);
  transform: translateY(-3px) scale(1.05);
  animation-play-state: paused;
}

[data-theme='dark'] .chat-fab:focus-visible {
  background-color: var(--color-gold);
  filter: brightness(1.08);
}

/* Hover chỉ cho thiết bị có chuột thật — tránh hiệu ứng "dính" hover khi chạm trên mobile */
@media (hover: hover) and (pointer: fine) {
  .chat-fab:hover {
    background-color: var(--color-gold-strong);
    transform: translateY(-3px) scale(1.05);
    animation-play-state: paused;
  }

  [data-theme='dark'] .chat-fab:hover {
    background-color: var(--color-gold);
    filter: brightness(1.08);
  }
}

@keyframes chatFabPulse {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(var(--color-gold-rgb), 0.35); }
  50% { box-shadow: var(--shadow-lg), 0 0 0 10px rgba(var(--color-gold-rgb), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-fab {
    animation: none;
  }
}

@media (min-width: 768px) {
  .chat-fab {
    right: 28px;
    bottom: 28px;
  }
}

/* ---------- Account toggle button (dùng chung style theme-toggle) ---------- */
/* Hiện ở MỌI khổ màn hình (kể cả mobile) — trên mobile đây là icon thay chỗ cho
   nút "Đặt hàng" cũ ngay cạnh logo, để khách (đặc biệt lớn tuổi) bấm vào điền
   thông tin 1 lần dùng lâu dài. Xem responsive.css để biết chỗ ẩn header__order-btn. */
.account-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  flex-shrink: 0;
}

.account-toggle svg {
  width: 19px;
  height: 19px;
}

.account-toggle:hover,
.account-toggle:focus-visible {
  border-color: var(--color-gold);
  background-color: var(--color-bg-soft);
}

/* ---------- Pill / badge ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-theme='dark'] .pill {
  color: var(--color-gold);
}