/* ==========================================================================
   S SELECT — CSS dùng chung cho mọi trang
   Nền tảng, header, menu, footer, lightbox, nút nổi, nút lên đầu trang.
   CSS riêng của trang chủ nằm ở home.css
   ========================================================================== */

/* --- Nền tảng --------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: #019944; color: #F4FAF5; }
a { color: #017A36; text-decoration: none; }
a:hover { color: #015E2A; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* --- Khối trang và thành phần chữ dùng chung --------------------------- */
.page { background:#F1F7F2;color:#17211B;font-family:'Be Vietnam Pro',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:clip; }
.eyebrow { font-size:12.5px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:#017A36;margin-bottom:20px; }
.eyebrow--tight { margin-bottom:16px; }
.eyebrow--sm { margin-bottom:10px; }
.section-title { font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(30px,3.8vw,48px);line-height:1.04;margin:0;color:#17211B; }
.section-title--balance { text-wrap:balance; }
.section-title--lead { line-height:1.06;margin-bottom:22px; }
.section-title--story { font-size:clamp(30px,3.6vw,46px);line-height:1.08; }

/* --- Thanh thông báo --------------------------------------------------- */
.announce { background:#017A36;color:#EAF4EC;font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;padding:9px 24px;display:flex;justify-content:center;gap:34px;flex-wrap:wrap; }
.announce-sep { opacity:.4; }

/* --- Header ------------------------------------------------------------ */
/* z-index phải CAO HƠN .nav-backdrop (60): menu mobile (.site-nav) nằm bên trong
   header, mà header có z-index + backdrop-filter nên tự tạo stacking context —
   z-index:70 của .site-nav chỉ có tác dụng bên trong context này. Để header ở 50
   thì backdrop (60) phủ lên trên menu, nuốt hết cú click và menu tự đóng. */
.site-header { position:sticky;top:0;z-index:80;background:rgba(241,247,242,0.9);backdrop-filter:blur(12px);border-bottom:1px solid #D7E5DA; }
.header-inner { max-width:1240px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px; }
.header-logo { display:flex;align-items:center; }
.header-logo img { display:block;height:38px;width:auto; }
.site-nav { display:flex;align-items:center;gap:36px;font-size:14.5px;font-weight:500;letter-spacing:0.01em; }
.site-nav > a, .submenu-trigger { color:#17211B; }
.nav-cta { display:none; }
.header-cta { background:#019944;color:#fff;font-size:14px;font-weight:500;letter-spacing:0.03em;padding:12px 24px;border-radius:2px;white-space:nowrap;transition:background .2s; }

/* --- Khối đăng ký nhận tin --------------------------------------------- */
.newsletter { background:#0B3D22;color:#E3EFE6; }
.newsletter-inner { max-width:1000px;margin:0 auto;padding:clamp(52px,7vw,96px) 32px;text-align:center; }
.newsletter-leaf { margin-bottom:22px; }
.newsletter-title { font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(32px,4.4vw,54px);line-height:1.08;margin:0 0 18px;color:#F4FAF5;text-wrap:balance; }
.newsletter-text { font-size:16px;line-height:1.7;color:#A9C4B2;max-width:480px;margin:0 auto 32px; }
.subscribe-form { display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center; }
.subscribe-input { flex:1;min-width:220px;background:#0E4B2B;border:1px solid #1D6B3F;color:#F4FAF5;font-family:'Be Vietnam Pro',sans-serif;font-size:15px;padding:15px 18px;border-radius:2px;outline:none; }
.subscribe-button { background:#F1F7F2;color:#0B3D22;font-family:'Be Vietnam Pro',sans-serif;font-size:15px;font-weight:600;letter-spacing:0.02em;padding:15px 30px;border:none;border-radius:2px;cursor:pointer;transition:background .2s; }

/* --- Footer ------------------------------------------------------------ */
.site-footer { background:#08160F;color:#fff; }
.footer-inner { max-width:1240px;margin:0 auto;padding:clamp(48px,6vw,80px) 32px 40px; }
.footer-grid { display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;padding-bottom:48px;border-bottom:1px solid #1E3428; }
.footer-brand { display:flex;align-items:center;margin-bottom:18px; }
/* Logo gốc màu xanh, đảo thành trắng để nổi trên nền tối. */
.footer-brand img { display:block;height:34px;width:auto;filter:brightness(0) invert(1);opacity:.94; }
.footer-tagline { font-size:14px;line-height:1.7;color:#fff;max-width:300px;margin:0; }
.footer-col-title { font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:#8FB79E;margin-bottom:18px; }
.footer-links { display:flex;flex-direction:column;gap:11px;font-size:14px;color:#fff; }
.footer-links a { color:#fff; }
.footer-contact { margin-top:22px; }
.footer-social { display:flex;gap:12px;flex-wrap:wrap; }
.footer-social a { display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #1E3428;border-radius:50%;color:#fff;transition:background .2s, border-color .2s; }
.footer-social a:hover { background:#017A36;border-color:#017A36; }
.footer-social svg { width:18px;height:18px;fill:currentColor;display:block; }
.footer-bottom { padding-top:28px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px;color:#8FB79E; }
.footer-legal { display:flex;gap:22px; }
.footer-legal a { color:#fff; }

/* --- Hiệu ứng rê chuột dùng lại nhiều nơi ------------------------------ */
.hover-green:hover { color:#017A36 !important; }
.hover-dark-button:hover { background:#017A36 !important;color:#fff !important; }
.hover-underline-green:hover { color:#017A36 !important;border-color:#019944 !important; }
.hover-subscribe:hover { background:#4FBF7C !important;color:#17211B !important; }
.hover-footer-light:hover { color:#fff !important; }
.hover-footer-muted:hover { color:#E6EFE9 !important; }

/* --- Header: menu cấp con --------------------------------------------- */
.has-submenu { position:relative; }
.submenu-trigger { display:inline-flex;align-items:center;gap:6px; }
.submenu-caret { width:11px;height:7px;transition:transform .25s ease; }
.has-submenu:hover .submenu-caret { transform:rotate(180deg); }
.submenu { position:absolute;top:100%;left:50%;transform:translate(-50%,8px);min-width:210px;background:#fff;border:1px solid #D7E5DA;border-radius:4px;box-shadow:0 26px 50px -30px rgba(0,0,0,.45);padding:8px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .22s ease, transform .22s ease, visibility .22s;z-index:60; }
/* Dải nối khe hở giữa nút và khung, để chuột đi qua mà menu không tắt. */
.submenu::before { content:"";position:absolute;top:-14px;left:0;right:0;height:14px; }
.has-submenu:hover .submenu, .has-submenu:focus-within .submenu { opacity:1;visibility:visible;transform:translate(-50%,10px); }
.submenu-link { padding:11px 14px;border-radius:3px;font-size:14px;color:#17211B !important;transition:background .18s ease, color .18s ease; }
.submenu-link:hover { background:#EAF4ED;color:#017A36 !important; }

/* --- Header: nút hamburger và nền mờ ----------------------------------- */
.nav-toggle { display:none;flex:none;width:44px;height:44px;border:1px solid #D7E5DA;border-radius:4px;background:#fff;cursor:pointer;padding:0;align-items:center;justify-content:center; }
.nav-toggle span { position:relative;display:block;width:20px;height:1.8px;background:#17211B;border-radius:2px;transition:background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content:"";position:absolute;left:0;width:20px;height:1.8px;background:#17211B;border-radius:2px;transition:transform .28s ease; }
.nav-toggle span::before { top:-6px; }
.nav-toggle span::after { top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
/* --- Chuyển ngữ (Google Translate) ------------------------------------- */
.lang-switch { position:relative;flex:none; }
.lang-current { display:inline-flex;align-items:center;gap:7px;border:1px solid #D7E5DA;border-radius:999px;background:#fff;padding:7px 11px;font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.06em;color:#17211B;cursor:pointer;transition:border-color .2s ease, color .2s ease; }
.lang-flag { flex:none;width:22px;height:15px;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(23,33,27,.12); }
.lang-current:hover { border-color:#017A36;color:#017A36; }
.lang-caret { width:10px;height:6px;transition:transform .25s ease; }
.lang-switch.is-open .lang-caret { transform:rotate(180deg); }
.lang-menu { position:absolute;top:calc(100% + 8px);right:0;min-width:168px;background:#fff;border:1px solid #D7E5DA;border-radius:6px;box-shadow:0 26px 50px -30px rgba(0,0,0,.45);padding:6px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease, transform .2s ease, visibility .2s;z-index:20; }
.lang-switch.is-open .lang-menu { opacity:1;visibility:visible;transform:translateY(0); }
.lang-btn { display:flex;align-items:center;gap:9px;border:0;background:transparent;border-radius:4px;padding:10px 12px;font-family:inherit;font-size:14px;font-weight:500;color:#17211B;cursor:pointer;text-align:left;transition:background .18s ease, color .18s ease; }
.lang-btn:hover { background:#EAF4ED;color:#017A36; }
.lang-btn.is-active { background:#017A36;color:#fff;font-weight:600; }
.lang-btn small { font-size:11.5px;font-weight:600;letter-spacing:.08em;opacity:.6; }

/* Ẩn widget gốc + thanh banner Google chèn vào đầu trang (nó đẩy cả layout xuống).
   Banner CHÍNH LÀ iframe.skiptranslate, không phải iframe nằm trong .skiptranslate. */
#google_translate_element { display:none !important; }
iframe.skiptranslate, .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate { display:none !important;visibility:hidden !important;height:0 !important; }
body { top:0 !important;position:static !important; }
.goog-tooltip, .goog-tooltip:hover, .goog-text-highlight { display:none !important;background:none !important;box-shadow:none !important; }
.goog-logo-link, .goog-te-gadget span { display:none !important; }

.nav-backdrop { position:fixed;inset:0;z-index:60;background:rgba(8,22,15,0.45);opacity:0;visibility:hidden;transition:opacity .3s ease, visibility .3s; }
.nav-backdrop.is-open { opacity:1;visibility:visible; }

/* --- Ảnh phóng to (lightbox) ------------------------------------------- */
.zoomable { cursor: zoom-in; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.zoomable:hover { transform: scale(1.02); }
.lightbox { position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px);background:rgba(20,20,17,0.88);backdrop-filter:blur(6px);opacity:0;transition:opacity .28s ease; }
.lightbox.is-open { display:flex; }
.lightbox.is-visible { opacity:1; }
.lightbox-figure { margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:16px; }
.lightbox-img { max-width:100%;max-height:78vh;width:auto;height:auto;display:block;border-radius:4px;background:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,0.8);animation: fadeUp .35s ease both; }
.lightbox-img[data-kind="logo"] { width:min(520px,86vw);max-height:none;padding:clamp(36px,6vw,72px);object-fit:contain; }
.lightbox-caption { color:#EFEBE2;font-size:14px;letter-spacing:0.04em;text-align:center;max-width:640px;margin:0; }
.lightbox-btn { position:absolute;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.28);color:#fff;width:46px;height:46px;border-radius:50%;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease; }
.lightbox-btn:hover { background:rgba(255,255,255,0.24); }
.lightbox-close { top:20px;right:20px; }
.lightbox-prev { left:clamp(10px,2.5vw,32px);top:50%;transform:translateY(-50%); }
.lightbox-next { right:clamp(10px,2.5vw,32px);top:50%;transform:translateY(-50%); }
.lightbox-count { position:absolute;bottom:20px;left:50%;transform:translateX(-50%);color:#B9B4A8;font-size:12.5px;letter-spacing:0.18em; }

/* --- Nút nổi Zalo / hotline và nút lên đầu trang ------------------------ */
@keyframes phoneShake {
  0%, 62%, 100% { transform: rotate(0deg); }
  66% { transform: rotate(-16deg); }
  70% { transform: rotate(14deg); }
  74% { transform: rotate(-12deg); }
  78% { transform: rotate(10deg); }
  82% { transform: rotate(-7deg); }
  86% { transform: rotate(5deg); }
  90% { transform: rotate(-3deg); }
}
@keyframes zaloPulse {
  0% { box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45), 0 0 0 0 rgba(0,104,255,0.5); }
  100% { box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45), 0 0 0 18px rgba(0,104,255,0); }
}
@keyframes phonePulse {
  0% { box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45), 0 0 0 0 rgba(1,153,68,0.5); }
  100% { box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45), 0 0 0 18px rgba(1,153,68,0); }
}
.float-actions { position:fixed;left:22px;bottom:26px;z-index:150;display:flex;flex-direction:column;align-items:center;gap:16px; }
.float-btn { position:relative;width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -12px rgba(0,0,0,0.45);transition:transform .25s ease; }
.float-btn:hover { transform: scale(1.08); }
.float-zalo { background:#0068FF;color:#fff;font-weight:700;font-size:14px;letter-spacing:0.02em;animation: zaloPulse 2s ease-out infinite; }
.float-zalo img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }
.float-phone { background:#019944;color:#fff;animation: phonePulse 2s ease-out infinite .6s; }
.float-phone svg { width:26px;height:26px;animation: phoneShake 2.4s ease-in-out infinite;transform-origin:center; }
.float-label { position:absolute;left:64px;top:50%;transform:translate(-6px,-50%);white-space:nowrap;background:#17211B;color:#fff;font-size:13px;padding:7px 13px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease; }
.float-btn:hover .float-label { opacity:1;transform:translate(0,-50%); }
.go-top { position:fixed;right:22px;bottom:26px;z-index:150;width:48px;height:48px;border-radius:50%;border:1px solid #D7E5DA;background:#F1F7F2;color:#017A36;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 16px 34px -18px rgba(0,0,0,0.5);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .3s ease, transform .3s ease, visibility .3s; }
.go-top.is-visible { opacity:1;visibility:visible;transform:translateY(0); }
.go-top:hover { background:#019944;color:#F4FAF5;border-color:#019944; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns:1fr 1fr;gap:36px; }
}

@media (max-width: 960px) {
  .header-inner { padding:14px 20px;gap:14px; }
  .nav-toggle { display:flex; }
  .header-cta { display:none; }
  /* Tắt backdrop-filter ở mobile: nó biến header thành containing block cho phần tử
     position:fixed, khiến drawer (.site-nav) neo theo header thay vì viewport nên bị
     tụt xuống dưới thanh thông báo và tràn đáy màn hình. */
  .site-header { backdrop-filter:none;background:#F1F7F2; }
  /* Nút lên đầu trang / nút nổi có z-index cao hơn header nên sẽ đè lên drawer */
  body.nav-open .go-top, body.nav-open .float-actions { display:none; }
  .site-nav { position:fixed;top:0;right:0;z-index:70;width:min(320px,84vw);height:100dvh;background:#fff;border-left:1px solid #D7E5DA;box-shadow:-30px 0 60px -40px rgba(0,0,0,.5);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:88px 26px 32px;transform:translateX(100%);transition:transform .32s cubic-bezier(.3,.8,.3,1);overflow-y:auto; }
  .site-nav.is-open { transform:translateX(0); }
  .site-nav > a { padding:16px 2px;border-bottom:1px solid #E9F1EB;font-size:16px; }
  .has-submenu { border-bottom:1px solid #E9F1EB; }
  .submenu-trigger { justify-content:space-between;width:100%;padding:16px 2px;font-size:16px; }
  .submenu { position:static;transform:none;opacity:1;visibility:visible;border:none;box-shadow:none;padding:0 0 12px 12px;min-width:0;display:none; }
  .submenu::before { display:none; }
  /* Rule desktop `.has-submenu:focus-within .submenu` co specificity (0,3,0), cao hon
     `.submenu` (0,1,0) o tren — media query KHONG cong them specificity. Cham vao
     trigger tren mobile lam phan tu nhan focus, submenu bi keo lech trai 50% va tut
     xuong 10px. Phai ghi de bang selector cung do manh, dat sau. */
  .has-submenu:hover .submenu, .has-submenu:focus-within .submenu { transform:none; }
  /* Cung ly do: :hover bi "dinh" sau khi cham nen mui ten van chi len du submenu da dong.
     Chi .is-open moi duoc xoay — dat sau de thang khi cung specificity. */
  .has-submenu:hover .submenu-caret { transform:none; }
  .has-submenu.is-open .submenu { display:flex; }
  .has-submenu.is-open .submenu-caret { transform:rotate(180deg); }
  .submenu-link { padding:11px 8px;font-size:14.5px;color:#4B5850 !important; }
  .site-nav .nav-cta { display:block;margin-top:24px;border:none;background:#019944;color:#fff;text-align:center;border-radius:2px;padding:15px 20px;font-weight:600; }
}

@media (max-width: 760px) {
  .announce { gap:12px;font-size:11.5px;letter-spacing:0.1em;padding:8px 16px; }
}

@media (max-width: 640px) {
  .newsletter-inner, .footer-inner { padding-left:20px;padding-right:20px; }
  .header-inner { padding:12px 16px; }
  .header-logo img { height:32px; }
  .footer-grid { grid-template-columns:1fr;gap:32px;padding-bottom:36px; }
  .lightbox-prev { left:6px; }
  .lightbox-next { right:6px; }
  .float-actions { left:14px;bottom:16px;gap:12px; }
  .float-btn { width:48px;height:48px; }
  .float-label { display:none; }
  .go-top { right:14px;bottom:16px;width:42px;height:42px; }
}

@media (max-width: 420px) {
  .float-btn { width:44px;height:44px; }
  .float-zalo { font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
  .float-phone, .float-phone svg, .float-zalo { animation: none; }
}