/* ==========================================================================
   sections.css — bố cục các section giữ lại từ bản trước (hero, nội dung khóa học, quy trình học, làm thử, GIÁ, FAQ, form, chân trang, ảnh sự kiện).
   Các section của khung mới (5 nỗi đau, Second Brain, ba cách, dải chuyển, mô phỏng, sau khóa học, ai nên học, lộ trình) nằm ở css/frame.css.
   GIÁ / FAQ / CHÂN TRANG: không sửa (đợt 10) — chỉ xóa rule của các section đã lược.
   Breakpoint: ≤1279 · ≤1023 · ≤767 · ≤559
   ========================================================================== */

/* ============================== 1. HERO ==============================
   Bố cục 2 cột: trái = nhãn + H1 + mô tả + 2 CTA + 3 dấu ✓; phải = ảnh cutout người + robot (hero-founder-agent.webp) trên nền văn phòng mờ,
   4 thẻ Agent kính mờ (stage, scene, photo, agent-card: xem css/frame.css). */
/* Nền của hero. Mesh gradient: xanh (trên trái) · tím (trên phải) · cam (dưới phải) · xanh ngọc (dưới trái),
   đều rất nhạt để chữ vẫn nổi; các lớp động (lưới, vầng sáng, mạng điểm, sóng) nằm trong .intro, xem css/motion.css */
.intro {
  position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(56% 52% at 4% 4%, rgba(8, 97, 248, .16), transparent 70%),
    radial-gradient(44% 48% at 98% 2%, rgba(135, 71, 232, .12), transparent 70%),
    radial-gradient(46% 44% at 96% 98%, rgba(243, 107, 28, .12), transparent 72%),
    radial-gradient(42% 46% at 2% 96%, rgba(0, 184, 255, .12), transparent 72%),
    linear-gradient(180deg, #F9FBFF 0%, #EDF4FF 58%, #F4F8FF 100%);
}
.intro__waves { position: absolute; z-index: -1; left: -24px; bottom: -10px; width: calc(100% + 48px); max-width: none; height: 64%; pointer-events: none; }   /* max-width: none — reset chung `svg {max-width:100%}` làm sóng hụt 24px bên phải */
.hero { position: relative; }
/* Hiệu ứng trượt ngang khi cuộn (trái/phải) không được làm trang rộng hơn màn hình: cắt ở mép section (overflow: clip không tạo thanh cuộn) */
main section, .cta { overflow-x: clip; }
.hero__inner {
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 40px; align-items: center;
  padding-block: 44px 60px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px; border-radius: 999px;
  background: #EAF2FF; border: 1px solid #D3E3FA; color: var(--color-brand-blue-deep);
  font-size: 12.5px; line-height: 1.2; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.hero__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--color-brand-orange); box-shadow: 0 0 0 3px rgba(243, 107, 28, .2); }
.hero h1 {
  margin-top: 18px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.015em;
  color: var(--color-brand-navy);
}
.hero__hl { color: var(--color-brand-blue); white-space: nowrap; }
.hero__lead { margin-top: 16px; max-width: 540px; font-size: 16.5px; line-height: 1.65; color: var(--color-text); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__cta .btn { min-height: 54px; }
.hero__cta .btn--orange { padding-inline: 20px; }
.hero__cta .btn--outline { font-size: 15.5px; padding-inline: 18px; }

/* Màn <1100px: xếp dọc — chữ + CTA → ảnh → lưới 4 thẻ Agent (ảnh/nền/thẻ ở css/frame.css) */
@media (max-width: 1099px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: 28px; padding-block: 30px 40px; }
  .hero h1 { font-size: clamp(28px, 4.6vw, 40px); }
  .br-d { display: none; }
  .hero__lead { max-width: 560px; }
}


/* ============================== 8. LÀM THỬ ============================== */
.trial { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(110deg, #0A47D6 0%, #0836A8 55%, #062A86 100%); }
.trial::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(560px 300px at 78% 40%, rgba(70, 150, 255, .28), transparent 70%),
    radial-gradient(420px 220px at 6% 110%, rgba(255, 255, 255, .08), transparent 70%);
}
.trial__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; padding-block: 52px; }
.trial__chip { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--color-brand-blue); font-size: 13px; line-height: 1.2; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.trial h2 { text-wrap: balance; margin-top: 14px; font-size: clamp(26px, 1.2rem + 1.4vw, 38px); line-height: 1.2; font-weight: 800; color: #fff; }
.trial p { margin-top: 10px; max-width: 470px; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .92); }
.trial .btn { margin-top: 22px; }

/* Ảnh robot: khung kính tối + vòng sáng chạy quanh viền + ảnh bồng bềnh + quầng sáng + tia lấp lánh */
.trial__art { justify-self: end; width: 100%; max-width: 680px; }
.trial__frame {
  --angle: 0deg;
  position: relative; isolation: isolate; padding: 14px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(10, 52, 160, .55), rgba(4, 24, 100, .75));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 26px 60px rgba(0, 10, 70, .45), 0 0 56px rgba(60, 150, 255, .25);
}
.trial__frame::before, .trial__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 3px; pointer-events: none;
  background: conic-gradient(from var(--angle), rgba(110, 205, 255, 0) 0deg, rgba(110, 205, 255, 0) 215deg, #5CC8FF 285deg, #FFFFFF 328deg, #FFB45C 348deg, rgba(110, 205, 255, 0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ring-spin 4.5s linear infinite;
}
.trial__frame::after { filter: blur(9px); opacity: .85; padding: 5px; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ring-spin { to { --angle: 360deg; } }

.trial__aura {
  position: absolute; z-index: 0; left: 3%; top: 12%; width: 48%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(90, 195, 255, .55), rgba(90, 195, 255, 0) 66%);
  animation: aura-pulse 4.2s ease-in-out infinite;
}
@keyframes aura-pulse { 0%, 100% { transform: scale(.94); opacity: .7; } 50% { transform: scale(1.1); opacity: 1; } }

.trial__float { position: relative; z-index: 1; animation: bob 6s ease-in-out infinite; }
.trial__float img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 26px rgba(0, 10, 70, .45)); }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-.5deg); } }

/* Vùng bấm trong suốt phủ lên nút vẽ sẵn trong ảnh */
.trial__hit { position: absolute; left: 52.6%; top: 61.8%; width: 42.9%; height: 13.7%; border-radius: 18px; transition: box-shadow .2s ease, background-color .2s ease; }
.trial__hit:hover { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 3px rgba(255, 255, 255, .9), 0 0 28px rgba(255, 160, 60, .85); }
.trial__hit:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.spark {
  position: absolute; z-index: 2; width: 16px; height: 16px; pointer-events: none;
  background: linear-gradient(135deg, #fff, #bfeaff);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 2.8s ease-in-out infinite;
}
.spark--1 { top: 9%; left: 42%; }
.spark--2 { top: 16%; right: 7%; width: 12px; height: 12px; animation-delay: .9s; }
.spark--3 { bottom: 24%; left: 5%; width: 13px; height: 13px; animation-delay: 1.5s; }
.spark--4 { bottom: 11%; right: 30%; width: 18px; height: 18px; animation-delay: .4s; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* ============================== 9. GIÁ & CHÍNH SÁCH ============================== */
.pricing { padding-block: 64px 56px; }
.pricing__inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 40px; align-items: center; }

/* Thẻ giá nổi bật: viền cam, ruy-băng ngôi sao, giá lớn + hậu tố nhỏ, checklist, nút cam bo tròn */
.price-card {
  position: relative; display: flex; flex-direction: column; width: 100%; max-width: 500px; justify-self: center;
  padding: 40px 32px 30px; border-radius: 28px; border: 2px solid #F59B2E;
  background: linear-gradient(180deg, #fff 0%, #FFF9F1 100%);
  box-shadow: 0 0 0 6px rgba(245, 155, 46, .10), 0 26px 56px rgba(243, 107, 28, .20);
}
.price-card__ribbon {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 8px 20px; border-radius: 999px; background: linear-gradient(90deg, #B84508, #C94E08); color: #fff;
  font-size: 15.5px; line-height: 1.2; font-weight: 800; box-shadow: 0 10px 20px rgba(201, 78, 8, .35);
}
.price-card__ribbon .icon { width: 17px; height: 17px; fill: none; stroke: #FFE08A; stroke-width: 2; }
.price-card__ribbon { text-transform: uppercase; letter-spacing: .04em; }
/* Đợt 19: thứ tự theo "giá chuẩn" — giá lớn → giá gốc + nhãn tiết kiệm → vạch kẻ → tên khóa → 6 ý → nút → câu chốt */
.price-card__now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.price-card__amount { font-size: clamp(36px, 1.7rem + 1.1vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.01em; color: var(--color-brand-navy); }
.price-card__old { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.price-card__old del { font-size: 20px; line-height: 1.2; font-weight: 700; color: var(--color-muted); text-decoration-thickness: 2px; }
.price-card__save {
  display: inline-flex; padding: 4px 10px; border-radius: 8px; border: 1px solid #A8E0C1; background: var(--tint-green);
  font-size: 12.5px; line-height: 1.2; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: #0A6B3A;
}
.price-card__title { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--color-border); font-size: 14.5px; line-height: 1.3; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-strong); }
.price-card__list { display: grid; gap: 14px; margin: 18px 0 26px; }
.price-card__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--color-text); }
.price-card__list .icon { box-sizing: border-box; width: 20px; height: 20px; margin-top: 2px; padding: 4px; border-radius: 50%; background: var(--color-success-dark); color: #fff; stroke-width: 3.4; }
.price-card__list b { font-weight: 800; color: var(--color-text-strong); }
.price-card__note { margin-top: 14px; text-align: center; font-size: 14px; line-height: 1.4; font-style: italic; color: var(--color-muted); }

.policy__title { font-size: 22px; line-height: 1.3; font-weight: 800; color: var(--color-text-strong); }
.policy__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 16px; }
.policy-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-card);
}
.policy-card .icon-disc { width: 56px; height: 56px; }
.policy-card .icon-disc .icon { width: 26px; height: 26px; }
.policy-card h3 { font-size: 17px; line-height: 1.35; font-weight: 800; color: var(--color-text-strong); }
.policy-card p { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--color-muted); }

/* ============================== 10. FAQ ============================== */
.section--ice { background: linear-gradient(180deg, #F3F9FE 0%, #EAF3FD 100%); }
.faq__title { margin-bottom: 30px; text-align: center; }
.faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; align-items: start; }

/* ============================== 10. ĐĂNG KÝ TƯ VẤN (cuối trang) ============================== */
.cta { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--gradient-footer-cta); }
.cta__waves { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.cta__main { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; padding-block: clamp(52px, 5vw, 72px); }
.cta__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.2; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #FFB27E; }
.cta__dot { width: 14px; height: 14px; border-radius: 50%; border: 4px solid #FFB27E; box-sizing: border-box; }
.cta h2 { margin-top: 12px; font-size: clamp(28px, 1.3rem + 1.4vw, 40px); line-height: 1.2; font-weight: 800; color: #fff; text-wrap: balance; }
.cta__accent {
  color: #FFA64D;
  background: linear-gradient(90deg, #FFC24D, #FF8A3D); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.cta__lead { margin-top: 14px; max-width: 580px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, .92); }
.cta__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 22px; max-width: 640px; }
.cta__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; color: #fff; }
.cta__points .icon { width: 20px; height: 20px; margin-top: 2px; color: #4FE0A3; stroke-width: 3; }

.lead-form { padding: clamp(20px, 2.4vw, 30px); border-radius: 20px; background: #fff; color: var(--color-text); box-shadow: 0 30px 80px rgba(3, 20, 80, .38); }
.lead-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field--full { grid-column: 1 / -1; }
.field--consent { margin-top: 14px; }
.lead-form .btn--submit { margin-top: 16px; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1279px) {
  .trial__inner { gap: 28px; }
}

@media (max-width: 1023px) {

  .trial__inner { grid-template-columns: minmax(0, 1fr); }
  .trial__art { justify-self: center; }

  .pricing__inner { grid-template-columns: minmax(0, 1fr); }
  .cta__main { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .section-head { margin-bottom: 28px; }
  .h-caps { font-size: clamp(21px, 5.6vw, 26px); }
  .cta__points { grid-template-columns: minmax(0, 1fr); }

  .trial__inner { padding-block: 40px; }
  .trial__frame { padding: 10px; border-radius: 22px; }
  .pricing { padding-block: 52px 40px; }
  .policy-card { padding: 16px; gap: 14px; }

  .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

@media (max-width: 559px) {
  .trial__hit { top: 58.6%; height: 18.6%; }  /* vùng chạm lớn hơn nút vẽ sẵn (~36px) cho ngón tay */
  .hero__cta .btn { flex: 1 1 100%; white-space: normal; }
  .lead-form__grid { grid-template-columns: minmax(0, 1fr); }
  .price-card { padding: 38px 22px 24px; }
  .price-card__list li { font-size: 15.5px; }
  .btn--orange { font-size: 18.7px; }
}

/* ============================== HEADER ============================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .95); border-bottom: 1px solid var(--color-border);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
  transition: box-shadow .25s ease;
}
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(11, 29, 71, .09); }
.nav { display: flex; align-items: center; gap: 28px; min-height: var(--header-h); }
.brand { flex: none; display: block; }
.brand img { width: auto; height: 44px; }
.nav__menu { margin-right: auto; margin-left: clamp(8px, 2vw, 28px); }
.nav__menu ul { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 38px); }
.nav__menu a { position: relative; display: block; padding: 8px 2px; font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--color-brand-blue); }
.nav__menu a::after {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--color-brand-orange); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.nav__menu a:hover::after, .nav__menu a:focus-visible::after { transform: scaleX(1); }
.nav__cta { flex: none; }
.menu-toggle {
  display: none; flex: none; width: 44px; height: 44px; place-items: center; border-radius: 12px;
  color: var(--color-brand-blue); border: 1.5px solid var(--color-border); background: #fff;
}
.menu-toggle:hover { background: var(--tint-blue); }

/* ============================== NHỮNG DẤU ẤN NỔI BẬT ============================== */
.gallery { background: #fff; }
.gallery__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gallery__grid li { overflow: hidden; border-radius: 16px; background: #E9EEF8; box-shadow: var(--shadow-card); }
.gallery__grid img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; transition: transform .6s ease; }
.gallery__grid li:hover img { transform: scale(1.04); }

/* ============================== CHÂN TRANG (đợt 19: theo viai.vn) ============================== */
/* Nền xanh navy đặc tách khỏi vùng xanh của form; trái = thương hiệu + liên hệ, phải = 4 cột liên kết; dưới = bản quyền + nút lên đầu */
.site-footer { background: #0A2570; color: rgba(255, 255, 255, .9); }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 3fr); gap: 36px clamp(28px, 4vw, 56px);
  padding-block: 44px 34px;
}
.site-footer__brand { font-size: 16px; line-height: 1.4; font-weight: 800; color: #fff; }
.site-footer__contact { display: grid; gap: 12px; margin-top: 16px; }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; }
.site-footer__contact .icon { width: 18px; height: 18px; margin: 2px 4px 0 0; color: #FFB347; }
.site-footer__contact b { font-weight: 800; color: #fff; }
.site-footer__zalo {
  flex: none; width: 22px; height: 18px; margin-top: 2px; border-radius: 5px; background: #0068FF; color: #fff;
  font-size: 9.5px; line-height: 18px; font-weight: 800; text-align: center;
}
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.site-footer__nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; }
.site-footer__title { font-size: 15.5px; line-height: 1.3; font-weight: 800; color: #fff; }
.site-footer__col > ul:not(.site-footer__social) { display: grid; gap: 12px; margin-top: 16px; }
.site-footer__col > ul:not(.site-footer__social) a { display: inline-flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.4; color: rgba(255, 255, 255, .9); }
.site-footer__col > ul:not(.site-footer__social) a .icon { width: 16px; height: 16px; margin-top: 2px; color: #FFB347; }
.site-footer__social { display: flex; gap: 10px; margin-top: 18px; }
.site-footer__social a {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff;
  background: rgba(255, 255, 255, .14); transition: background-color .2s ease, transform .2s ease;
}
.site-footer__social a:hover { background: rgba(255, 255, 255, .26); text-decoration: none; transform: translateY(-2px); }
.site-footer__social .icon { width: 17px; height: 17px; }
.site-footer__zalo-btn { font-size: 10.5px; line-height: 1; font-weight: 800; letter-spacing: -.01em; }

.site-footer__bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px;
  padding-block: 16px; border-top: 1px solid rgba(255, 255, 255, .18);
}
.site-footer__bottom p { grid-column: 2; text-align: center; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, .82); }
.to-top {
  grid-column: 3; justify-self: end; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #fff;
  background: linear-gradient(135deg, #F36B1C, #E05A0C); box-shadow: 0 8px 18px rgba(243, 107, 28, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.to-top:hover { transform: translateY(-2px); box-shadow: 0 12px 22px rgba(243, 107, 28, .45); }

/* ---- Header / chân trang / dấu ấn: responsive ---- */
@media (max-width: 1100px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 719px) {
  .site-footer__grid { padding-block: 36px 26px; }
  .site-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 899px) {
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  /* Menu thành dropdown dưới thanh, mở bằng nút (js/main.js). Không có JS thì ẩn menu, vẫn còn nút CTA */
  .nav { gap: 12px; }
  .nav__cta { margin-left: auto; }
  .js .menu-toggle { display: grid; }
  .nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    padding: 4px var(--gutter) 14px; background: #fff; border-bottom: 1px solid var(--color-border); box-shadow: 0 18px 30px rgba(11, 29, 71, .1);
  }
  .js .nav__menu.is-open { display: block; }
  .nav__menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__menu li + li { border-top: 1px solid var(--color-border); }
  .nav__menu a { padding: 14px 2px; font-size: 16px; }
  .nav__menu a::after { display: none; }
}
@media (max-width: 559px) {
  .nav { gap: 8px; }
  .brand img { height: 36px; }
  .nav__cta { min-height: 42px; padding: 0 12px; }
  .nav__cta .icon { display: none; }
  .gallery__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* Header ở màn rất hẹp: không đủ chỗ cho chữ 18,7px → cam sẫm 15px (đủ tương phản 4,5:1) */
@media (max-width: 374px) {
  .btn--sm { font-size: 15px; padding: 0 10px; }
  .btn--orange.btn--sm { background: linear-gradient(90deg, #C94E08, #B84508); box-shadow: 0 8px 18px rgba(184, 69, 8, .3); }
  .brand img { height: 32px; }
}