/* ==========================================================================
   FROGA — froga.vn
   Bản dựng tĩnh từ bộ thiết kế design_handoff_froga_website (bản có mobile).
   Kiểu dáng nằm ngay trong thuộc tính style của từng thẻ, đúng bản thiết kế.

   ⚠ TỆP NÀY KHÔNG CÓ MỘT @media NÀO — và phải giữ như vậy.
   Bộ thiết kế co giãn bằng clamp() + repeat(auto-fit, minmax()) + flex-wrap,
   không dùng breakpoint. Thêm @media vào đây là đá nhau với bản thiết kế và
   làm lệch khỏi bản gốc. Xem thiet-ke/MOBILE.md.

   Chỉ giữ ba nhóm: nền chung lấy từ helmet, hoạt hình, và mấy lớp để JS
   bật/tắt trạng thái (vì bản chạy thật dựng sẵn mọi trạng thái trong HTML).
   ========================================================================== */

:root {
  --xanh-700: #23773C;
  --xanh-800: #175A2B;
  --xanh-900: #1E3B27;
  --kem: #FBF8F0;
  --vien-kraft: #E4DDC9;
}

/* ---------- nền chung (lấy nguyên từ helmet của bản thiết kế) ---------- */
html { scroll-behavior: smooth; }

/* Bù chiều cao thanh đầu trang khi nhảy tới mục — đúng con số bản thiết kế
   khai trong helmet từng trang. Hai trang có thanh mục nhỏ còn được JS đo lại
   chính xác lúc chạy (xem site.js), vì thanh này cao khác nhau theo khổ máy. */
html.co-subnav { scroll-padding-top: 150px; }
html.co-muc-luc, html.tr-thamvong { scroll-padding-top: 110px; }

body {
  margin: 0;
  background: var(--kem);
  color: var(--xanh-900);
  /* 14/09/2026: đổi thân bài sang Be Vietnam Pro (trước là Nunito), theo
     yêu cầu áp dụng font trong file thiết kế "Chọn sản phẩm" cho toàn site
     — xem build/sang.mjs. Đừng chèn system-ui vào giữa: bộ tự nuôi (build/
     fonts.mjs) đã cắt sẵn glyph mũi tên → cho đúng family này; chèn phông dự
     phòng khác vào giữa dễ làm bề rộng chữ lệch, đủ để một dòng thành hai. */
  font-family: 'Be Vietnam Pro', sans-serif;
  text-wrap: pretty;
}
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--xanh-700); text-decoration: none; }
a:hover { color: var(--xanh-800); }
header nav a, header a[href^="tel:"] { white-space: nowrap; }
button { font-family: inherit; }

/* Mọi ảnh đều khai width/height thật trong HTML để trình duyệt chừa sẵn chỗ
   (không nhảy bố cục). Thuộc tính height đó là gợi ý kiểu dáng, sẽ kéo giãn
   ảnh khi chiều rộng bị co — nên trả height về auto; ảnh nào đặt height ngay
   trong thẻ style thì vẫn thắng quy tắc này.

   ĐỪNG thêm max-width:100% vào đây. Bản thiết kế không có, và nó bóp méo ảnh
   tròn 104px ở lưới "Cách dùng đúng" thành bầu dục 110×61 trên điện thoại. */
img { height: auto; }

/* Bản thiết kế đã khai scrollbar-width:none cho thanh điều hướng và thanh mục
   nhỏ — nhưng thuộc tính đó chỉ Firefox hiểu. Thêm luật cho nhân WebKit để
   Chrome/Safari cũng ẩn, đúng ý bản thiết kế. */
nav::-webkit-scrollbar,
header [style*="overflow-x:auto"]::-webkit-scrollbar { display: none; }

/* dấu nháy khi dùng bàn phím — bản thiết kế bỏ outline mặc định ở ô nhập */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid #F2B417;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- hoạt hình (đúng khai báo trong bản thiết kế) ---------- */
@keyframes floaty  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes song1   { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes song2   { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)} }
@keyframes laroi   { 0%{transform:translate(0,-40px) rotate(-24deg);opacity:0} 12%{opacity:.9} 50%{transform:translate(-46px,46vh) rotate(28deg)} 88%{opacity:.9} 100%{transform:translate(28px,86vh) rotate(-14deg);opacity:0} }
@keyframes gon     { 0%{transform:translate(-50%,-50%) scale(.55);opacity:.55} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }
@keyframes duasau  { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(8px) rotate(2deg)} }
@keyframes nhayvao { 0%{transform:translate(140px,-70vh) rotate(24deg) scale(.5);opacity:0} 55%{transform:translate(0,0) rotate(-6deg) scale(1.08);opacity:1} 70%{transform:translate(0,-26px) rotate(3deg) scale(.98)} 85%{transform:translate(0,0) rotate(0deg) scale(1.03)} 100%{transform:translate(0,0) rotate(0) scale(1)} }
@keyframes bapbenh { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-7px) rotate(3deg)} }
@keyframes bongno  { 0%{transform:scale(.6);opacity:0} 70%{transform:scale(1.06)} 100%{transform:scale(1);opacity:1} }
@keyframes nhayBac { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes gonSong { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* người dùng chọn giảm hoạt hình thì tắt hết, kể cả cuộn mượt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   Trạng thái do JS bật/tắt — mọi trạng thái đều đã dựng sẵn trong HTML
   ========================================================================== */

[data-loc-an]  { display: none !important; }   /* thẻ sản phẩm bị lọc bỏ */
.bang-an       { display: none !important; }   /* tab / khung chẩn đoán / bậc thang */
.faq-tra-loi   { display: none; }              /* câu trả lời đang đóng */
.faq-mo .faq-tra-loi { display: block; }