/*
  layout.css — header / nav / footer / marquee / floating buttons.
  WP PORTING NOTE: .site-header/.site-footer classes match WP core-block
  markup (wp-block-template-part) naming so header.php / footer.php can
  reuse this file untouched.
*/

/* ── Topbar ── */
.topbar { background: var(--charcoal); padding: 7px 0; font-size: 13px; font-weight: 500; }
.topbar-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar a { color: var(--white); text-decoration: none; }
.topbar-links { display: flex; gap: 24px; color: var(--white); }
.topbar-links span { opacity: .8; }
.topbar-links .accent {
  /* BUGFIX (SĐT màu xanh lá trên nền xám chưa nổi — contrast quá thấp, ~1.5:1,
     dưới cả mức tối thiểu 4.5:1): đổi hẳn sang dạng nút pill nền xanh đậm +
     chữ trắng, vừa dễ đọc vừa rõ ràng là có thể bấm gọi. */
  color: var(--white); opacity: 1; background: var(--green);
  padding: 3px 12px; border-radius: 20px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
  transition: background var(--dur-fast) var(--ease);
}
.topbar-links .accent:hover { background: var(--green-light); }

/* ── Header ── */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(10,20,10,.06); }
.header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
/* Uploaded custom logo (Site Identity > Logo) — constrain to header height. */
.logo .custom-logo, .logo img.custom-logo { max-height: 44px; width: auto; height: auto; display: block; }
.logo-icon {
  width: 38px; height: 38px; background: var(--charcoal);
  clip-path: polygon(50% 0%, 100% 0%, 65% 100%, 15% 100%);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: var(--green-light); font-family: var(--font-head);
}
.logo-text { font-family: var(--font-head); font-size: 24px; font-weight: 800; letter-spacing: 1px; color: var(--ink); }
.logo-text span { color: var(--green); }

.main-nav { display: flex; align-items: center; gap: 4px; }
/* Works for both the fallback markup (bare <a>) and a real WordPress menu,
   which outputs <ul class="vt-menu"><li><a>. Without this, the <li> show their
   default disc bullets (the "•" dots next to each menu item). */
.main-nav .vt-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.main-nav li { list-style: none; }
.main-nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 6px; transition: all var(--dur-fast) var(--ease); letter-spacing: .3px; position: relative; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); background: var(--soft); }

/* ── Submenu (dropdown) — menu trước giờ chỉ phẳng 1 tầng, giờ thêm hỗ trợ
   khi 1 mục có trang con (vd "Giới thiệu" > "Chính sách đổi trả & hoàn tiền"),
   set qua Appearance > Menus (kéo item con thụt vào dưới item cha). ── */
.main-nav li.menu-item-has-children { position: relative; }
.main-nav li.menu-item-has-children > a::after { content: '▾'; margin-left: 5px; font-size: 10px; opacity: .7; }
.main-nav .sub-menu {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0;
  min-width: 240px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all var(--dur-fast) var(--ease); z-index: 100;
}
.main-nav li.menu-item-has-children:hover > .sub-menu,
.main-nav li.menu-item-has-children > a:focus + .sub-menu,
.main-nav .sub-menu:hover { opacity: 1; visibility: visible; transform: translateY(0); }
.main-nav .sub-menu a { display: block; padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
.main-nav .sub-menu a::after { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; }

/* ── Nút chuyển ngôn ngữ VI/EN (Google Translate) ── */
.lang-switch { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.lang-switch-btn { background: transparent; border: none; padding: 7px 11px; font-size: 12px; font-weight: 700; letter-spacing: .5px; color: var(--muted); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.lang-switch-btn:hover { color: var(--ink); background: var(--soft); }
.lang-switch-btn.is-active { color: var(--white); background: var(--green); }
.lang-switch-mobile { margin: 16px 0 0; align-self: center; }
.lang-switch-mobile .lang-switch-btn { padding: 10px 18px; font-size: 13px; }

/* Ẩn khung/dropdown mặc định của Google Translate — 2 nút VI/EN ở trên tự điều
   khiển việc dịch qua cookie, không cần hiện giao diện gốc của Google. */
.google-translate-hidden { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.goog-te-banner-frame, .skiptranslate > iframe { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }

.icon-btn {
  position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; color: var(--ink); background: transparent; border: 1px solid transparent; transition: all var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--soft); border-color: var(--border); }
.cart-count {
  position: absolute; top: -4px; right: -4px; background: var(--accent); color: var(--white);
  font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0 3px;
  transition: transform var(--dur-fast) var(--ease);
}
.cart-count.bump { animation: bump .3s var(--ease); }
@keyframes bump { 0%,100% { transform: scale(1); } 50% { transform: scale(1.35); } }

.hamburger { display: none; cursor: pointer; flex-direction: column; gap: 5px; width: 40px; height: 40px; align-items: center; justify-content: center; }
.hamburger span { width: 22px; height: 2px; background: var(--ink); transition: all var(--dur-fast) var(--ease); }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: none; position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; background: var(--white); z-index: 999;
  padding: 24px; overflow-y: auto; transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.mobile-nav.open { display: block; transform: translateY(0); opacity: 1; pointer-events: auto; }
.mobile-nav .vt-menu { list-style: none; margin: 0; padding: 0; }
.mobile-nav li { list-style: none; }
.mobile-nav a { display: block; padding: 16px 4px; font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--border); }
/* Submenu mobile: không cần hover/toggle (màn cảm ứng) — hiện luôn thụt vào
   ngay dưới mục cha, chữ nhỏ hơn 1 chút để phân biệt cấp. */
.mobile-nav .sub-menu { list-style: none; margin: 0; padding: 0 0 6px 18px; }
.mobile-nav .sub-menu a { font-size: 15px; font-weight: 500; padding: 12px 4px; color: var(--muted); border-bottom: 1px dashed var(--border); }

/* ── Marquee ── */
.marquee-section { background: var(--green); padding: 14px 0; overflow: hidden; }
.marquee-track { display: flex; gap: 0; animation: marquee 25s linear infinite; width: max-content; }
.marquee-item { font-family: var(--font-head); font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.92); white-space: nowrap; padding: 0 40px; }
.marquee-item::before { content: '▲  '; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Footer ── */
.site-footer { background: var(--charcoal); border-top: 1px solid var(--border-dark); padding: 72px 0 0; }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; }
.footer-brand p { color: var(--on-dark-muted); font-size: 14px; line-height: 1.8; margin: 16px 0 24px; }
.footer-socials { display: flex; gap: 10px; }
.social-btn { width: 38px; height: 38px; background: var(--steel); border: 1px solid var(--border-dark); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--on-dark-muted); text-decoration: none; font-size: 15px; transition: all var(--dur-fast) var(--ease); }
.social-btn:hover { background: var(--green); border-color: var(--green); color: var(--white); }
.footer-col h4 { font-family: var(--font-head); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; color: var(--white); }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: var(--on-dark-muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color var(--dur-fast) var(--ease); }
.footer-links a:hover { color: var(--green-light); }
.footer-contact p { color: var(--on-dark-muted); font-size: 14px; font-weight: 500; line-height: 1.6; margin: 0 0 12px; }
.footer-contact a { color: var(--on-dark-muted); font-weight: 500; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.footer-contact a:hover { color: var(--green-light); }
.footer-brand .logo .custom-logo, .footer-brand .logo img.custom-logo { max-height: 48px; width: auto; }
.footer-newsletter input { width: 100%; background: var(--steel); border: 1px solid var(--border-dark); border-radius: 8px; padding: 12px 16px; color: var(--white); font-family: var(--font-body); font-size: 14px; margin-bottom: 10px; outline: none; }
.footer-newsletter input:focus { border-color: var(--green-light); }
.footer-bottom { margin-top: 64px; padding: 20px 24px; max-width: var(--container); margin-left: auto; margin-right: auto; border-top: 1px solid var(--border-dark); display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--on-dark-muted); flex-wrap: wrap; gap: 8px; }

/* ── Floating CTA ── */
.floating-cta { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 999; transition: bottom var(--dur-mid) var(--ease); }
/* BUGFIX (mục 67 — nút nổi Zalo/gọi đè lên thanh "Thêm vào giỏ" mobile):
   2 khối fixed-đáy-màn-hình này không hề biết tới nhau, nên khi thanh sticky
   xuất hiện (trang chi tiết sản phẩm, mobile) thì đè thẳng lên nút nổi. Đẩy
   nút nổi lên cao hơn đúng bằng chiều cao thanh sticky (~66px) khi thanh đó
   đang hiện — :has() để không cần đụng JS, chỉ thuần CSS. Giới hạn đúng
   breakpoint mobile của thanh sticky (≤768px), tránh áp nhầm trên desktop
   dù .vt-sticky-atc lúc đó vẫn display:none. */
@media (max-width: 768px) {
  .floating-cta:has(~ .vt-sticky-atc.visible) {
    bottom: 90px; max-width: calc(100vw - 32px);
  }
}
.float-btn { width: 52px; height: 52px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; box-shadow: 0 4px 20px rgba(0,0,0,.2); transition: transform var(--dur-fast) var(--ease); text-decoration: none; }
.float-btn:hover { transform: scale(1.1); }
.float-call { background: var(--accent); color: var(--white); }
.float-zalo { background: #0068ff; }
.float-top { background: var(--charcoal); color: var(--white); font-size: 16px; opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
.float-top.visible { opacity: 1; pointer-events: auto; }

@media (max-width: 1024px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }
  #header-catalogue-btn span:last-child { display: none; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}