/* Bảng màu và bố cục theo feedback ngày 16/08 — nạp đè lên bản build đang xem thử.
   Ba tông lấy thẳng từ logo: xanh dương (đã có), xanh lá, cam/nâu đất. */
:root {
  --gold: #F0A000;          /* dấu chấm, chi tiết nhấn */
  /* Nâu đất lấy đúng theo nút "Start learning" — một mã duy nhất cho cả web */
  --earth: #C9762A;         /* nâu đất (mặt sáng của nút) */
  --earth-2: #8A4A12;       /* nâu đất đậm (mặt tối của nút) */
  --leaf: #60C000;          /* xanh lá logo */
  --leaf-2: #3E8A00;        /* xanh lá đậm — nền khối, chữ trên nền trắng */
  /* Vàng → cam → nâu đất. Vàng và cam là hai chặng sáng nên chỉ giữ ở góc trên
     trái (hết ở 34%); từ giữa trở đi là nâu đất, đó mới là chỗ chữ trắng nằm. */
  --g-earth: linear-gradient(135deg, #FFC61A 0%, #F08A0C 34%, #C06B1C 66%, #8A4A12 100%);
  /* Xanh lá đi theo cùng công thức: sáng ở góc, đậm dần về phía chữ */
  --g-leaf: linear-gradient(135deg, #6FCE12 0%, #4C9A04 40%, #2F6B00 100%);
  /* Xanh dương thương hiệu, cùng công thức: sáng ở góc, đậm dần về phía chữ */
  --g-blue: linear-gradient(135deg, #2E7BF6 0%, #155EEF 38%, #0B41B0 100%);
  /* Xanh ngọc: sáng ở góc, đậm dần về phía chữ — cùng công thức với hai dải kia */
  --g-jade: linear-gradient(135deg, #2FD9C3 0%, #10A896 38%, #0A6E63 100%);
  /* Dải màu dùng cho mọi đường viền */
  --g-edge: linear-gradient(135deg,
    rgba(21, 94, 239, .5) 0%, rgba(20, 184, 166, .42) 52%, rgba(21, 94, 239, .18) 100%);
  --g-edge-glass: linear-gradient(135deg,
    rgba(255, 255, 255, .95) 0%, rgba(20, 184, 166, .45) 55%, rgba(255, 255, 255, .6) 100%);
}

/* ── 1. Logo: to hết mức mà thanh công cụ còn cân đối, chữ viết hoa ───────── */
/* Logo to hết mức mà thanh menu vẫn đủ chỗ: co giãn theo bề ngang màn hình,
   chỉ đạt 64px khi màn hình đủ rộng cho cả 5 mục menu và hai nút bên phải. */
.logo-img {
  width: clamp(46px, 3.9vw, 64px);
  height: clamp(46px, 3.9vw, 64px);
}
.logo-txt strong {
  font-size: clamp(.95rem, 1.05vw, 1.22rem);
  text-transform: uppercase;      /* AHA EDUCATION */
  letter-spacing: .03em;
  font-weight: 800;
  white-space: nowrap;
}
.hd-in .logo { min-width: 0; }    /* cho phép khối logo co lại thay vì đẩy menu ra ngoài */
.hd-nav { flex: 0 0 auto; }       /* menu không bao giờ bị bóp méo hay cắt cụt */
.hd-nav > a, .hd-nav .nav-trigger { padding-left: 10px; padding-right: 10px; }

@media (max-width: 640px) {
  .logo-img { width: 52px; height: 52px; }
  .logo-txt strong { font-size: 1.02rem; }
}

/* ── 2. Thanh công cụ: mọi mục cùng tông xanh như Home ───────────────────── */
.hd-nav > a, .hd-nav .nav-trigger {
  color: var(--brand);
  font-weight: 650;
}
.hd-nav > a:hover, .hd-nav .nav-trigger:hover,
.hd-nav > a:focus-visible, .hd-nav .nav-trigger:focus-visible { color: var(--brand-2); }
.hd-nav > a.active, .hd-nav .nav-trigger.active { color: var(--brand-2); }

/* Sign in: xanh lá như logo */
.auth-login {
  /* #3E8A00 trên nền xanh rất nhạt của nút chỉ đạt 3.9 — đậm thêm một bậc cho đủ 4.5 */
  color: #2F6B00;
  border-color: color-mix(in srgb, var(--leaf-2) 40%, transparent);
  font-weight: 700;
}
.auth-login:hover {
  color: #fff;
  background: var(--g-leaf);
  border-color: transparent;
}

/* Start learning: nâu vàng, nổi tách khỏi hai màu còn lại */
.btn-orange.hd-cta, .btn-orange {
  background: var(--g-earth);
  border-color: transparent;
  color: #fff;
  /* Giữ nét chữ trắng sắc trên đầu cam sáng của dải màu */
  text-shadow: 0 1px 2px rgba(86, 42, 6, .55);
}
.btn-orange.hd-cta:hover, .btn-orange:hover { filter: brightness(1.07); }

/* ── 3. Dấu chấm và chi tiết nhấn ────────────────────────────────────────── */
/* Dấu chấm ngăn cách trên dải chạy đầu trang: nâu đất */
.strip-item::before { background: var(--earth); }

.eyebrow .icon { color: var(--gold); }
.tw-caret { background: var(--gold); }

/* AHA EDUCATION trong hero: viên men trắng nổi khối.
   Khối 3D dựng bằng 4 lớp bóng: vệt sáng mép trên + vệt tối mép dưới (bo trong)
   tạo độ dày, hai lớp đổ bóng ngoài tạo độ cao so với mặt trang. */
.eyebrow.eyebrow-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 26px;
  border-radius: 999px;
  /* Đây là NHÃN, không phải nút: giữ nền trắng, chỉ chữ và viền mang dải vàng-cam-nâu.
     Chữ tô bằng chính dải màu (cắt nền theo nét chữ), nhưng lấy đoạn đậm #C06B1C →
     #8A4A12 chứ không lấy từ chặng vàng — vàng trên nền trắng chỉ đạt 1.57, không đọc nổi.
     Nền trắng vẽ bằng lớp giả phía dưới, vì phần nền của thẻ đã dành cho chữ. */
  /* Ba tông của web đi liền một mạch: xanh dương → xanh lá → cam. Mỗi chặng đều lấy
     bản đậm, vì bản tươi đặt lên nền trắng thì chữ chìm (cam tươi chỉ 2.52). */
  background: linear-gradient(120deg, #0B41B0 0%, #2F6B00 52%, #A85A16 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border: 1.5px solid transparent;
  box-shadow:
    0 1px 2px rgba(8, 24, 58, .07),
    0 8px 18px -12px rgba(8, 24, 58, .28);
  text-shadow: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  overflow: hidden;
}
/* Nền trắng của viên — nằm dưới cùng vì phần nền của thẻ đã dùng để tô chữ */
.eyebrow.eyebrow-brand::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: #FFFFFF;
}
/* Viền: dải đầy đủ vàng → cam → nâu đất, khoét ruột bằng mask nên góc bo vẫn mượt */
.eyebrow.eyebrow-brand::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  height: auto;
  background: linear-gradient(120deg, #2E7BF6 0%, #6FCE12 52%, #F5940D 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
/* Biểu tượng không bị cắt nền theo nét chữ nên phải cho màu riêng */
.eyebrow.eyebrow-brand .icon {
  color: #155EEF;              /* nối liền với đầu dải màu, ngay bên trái chữ */
  filter: none;
  position: relative;
  z-index: 1;
}

/* Nhãn "3 bước": bản nhẹ — nền trắng ngả ngọc, chữ ngọc đậm, viền chuyển sắc
   ngọc → xanh dương → cam gom đủ ba tông của web mà không thành một khối đặc. */
.hero-panel-hd .tag-solid {
  position: relative;
  background: linear-gradient(135deg, #FFFFFF 0%, #EAFBF8 100%);
  color: #0A6E63;
  text-shadow: none;
}
.hero-panel-hd .tag-solid::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(120deg, #2FD9C3 0%, #2E7BF6 55%, #F5940D 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── 4. Bảng "3 bước": khung kính trắng trong suốt mờ ────────────────────── */
.hero-panel {
  background: rgba(255, 255, 255, .58);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);   /* làm mờ video phía sau để chữ tách khỏi hình */
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 6px rgba(8, 24, 58, .12),
    0 26px 54px -24px rgba(8, 24, 58, .5);
}
/* Ô icon và hàng khi rê chuột cũng theo chất kính, không còn mảng trắng đặc */
.hero-panel .hero-list-row .ic {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(255, 255, 255, .75);
}
.hero-panel .hero-list-row:hover { background: rgba(255, 255, 255, .42); }
/* Nền kính sáng hơn nền trắng đặc nên chữ xanh phải đậm thêm một bậc mới đủ rõ */
.hero-panel .hero-list-row .val { color: var(--brand-2); }
.hero-panel .hero-list-row:hover .val { color: var(--brand-ink); }

/* ── 4b. Bảng "3 bước": icon to hơn, nhãn nổi bật ────────────────────────── */
.hero-panel-hd .tag-solid {
  font-size: 1rem;
  padding: 7px 16px;
  border-color: transparent;
  font-weight: 800;
  letter-spacing: .02em;
  /* Màu nền và màu chữ khai báo ở mục 3 (bản nhẹ nền trắng, chữ ngọc đậm) — không đặt
     lại ở đây, vì quy tắc nằm sau sẽ đè lên và chữ trắng nằm trên nền trắng. */
}
.hero-list-row .ic {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;      /* bản gốc khoá bề ngang bằng flex-basis nên phải ghi đè cả ở đây */
  border-radius: 16px;
}
/* Hình trong ô icon được đặt kích thước thẳng trên thẻ svg (style="width:19px"),
   mà kiểu viết thẳng trên thẻ luôn thắng biểu định kiểu — nên chỗ này buộc phải
   dùng !important, chỉ giới hạn đúng các ô icon chứ không áp cho mọi biểu tượng. */
.hero-list-row .ic .icon,
.stat-ic .icon,
.card-ic .icon,
.tile-ic .icon {
  /* Khoảng 50% bề ngang ô là tỉ lệ dễ chịu; 59% như trước nhìn chật */
  width: 27px !important;
  height: 27px !important;
}
.hero-list-row .ic .icon { width: 28px !important; height: 28px !important; }

/* Ô đựng cũng nới ra theo để hình không chạm mép */
.stat-ic, .card-ic { width: 54px; height: 54px; flex: 0 0 54px; }
.tile-ic { width: 52px; height: 52px; flex: 0 0 52px; }
.hero-list-row .tx strong { font-size: 1.02rem; }

/* ── 5. Thẻ số liệu: đưa con số lên cùng hàng với icon, nhường chỗ cho chữ ── */
.statrow .stat {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas: "ic num ." "lab lab lab" "note note note" "bar bar bar";
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
}
.statrow .stat .stat-ic { grid-area: ic; }
.statrow .stat > b { grid-area: num; font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1; }
.statrow .stat .stat-l {
  grid-area: lab;
  font-size: 1.12rem;      /* chữ to lên nhờ có thêm không gian */
  font-weight: 750;
  line-height: 1.3;
}
.statrow .stat .stat-note { grid-area: note; font-size: .96rem; }
.statrow .stat .stat-bar { grid-area: bar; }

/* ── 5b. Cảnh 3D trong hero (hiện đang tắt) ─────────────────────────────────
   Hero dùng nền gradient gốc. Phần dưới đây chỉ có tác dụng nếu bật lại tệp
   aha-3d.js — giữ để không phải dựng lại từ đầu. */
.hero .aha3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;          /* không chắn thao tác lên chữ và nút */
  opacity: .92;
  /* Mờ dần về phía trái để tiêu đề luôn nằm trên nền sạch, không phụ thuộc
     vào việc cảnh 3D đang xoay tới đâu. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 26%, #000 52%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 26%, #000 52%);
}
.hero .hero-in { position: relative; z-index: 1; }
.hero .hero-bg { z-index: 0; }

/* ── 5c. Chất liệu 3D cho nút và thẻ ─────────────────────────────────────────
   Cùng một quy ước ánh sáng với cảnh 3D: sáng từ trên, nên mọi khối đều có
   vệt sáng mép trên, thân dày, bóng đổ xuống dưới. */
.btn {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -2px 0 rgba(8, 24, 58, .16),
    0 2px 4px rgba(8, 24, 58, .14),
    0 10px 18px -8px rgba(8, 24, 58, .32);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -2px 0 rgba(8, 24, 58, .18),
    0 4px 8px rgba(8, 24, 58, .16),
    0 18px 30px -12px rgba(8, 24, 58, .4);
}
.btn:active {
  transform: translateY(1px);    /* bấm xuống là khối lún, đúng cảm giác vật lý */
  box-shadow:
    inset 0 2px 4px rgba(8, 24, 58, .22),
    0 1px 2px rgba(8, 24, 58, .16);
}
.btn-outline {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -2px 0 rgba(8, 24, 58, .07),
    0 2px 3px rgba(8, 24, 58, .08),
    0 10px 18px -10px rgba(8, 24, 58, .22);
}

.card, .tile, .statrow .stat, .vcard, .ncard {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 2px rgba(8, 24, 58, .07),
    0 8px 18px -10px rgba(8, 24, 58, .28),
    0 24px 46px -28px rgba(8, 24, 58, .34);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover, .tile:hover, .vcard:hover, .ncard:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    0 2px 4px rgba(8, 24, 58, .09),
    0 16px 30px -12px rgba(8, 24, 58, .32),
    0 40px 70px -34px rgba(8, 24, 58, .4);
}

/* ── 5d. Viền gradient cho mọi khung ─────────────────────────────────────────
   Dùng lại đúng cơ chế của bản gốc: một lớp giả phủ kín khung, tô dải màu rồi
   khoét ruột bằng mask nên chỉ còn lại đường viền 1px — góc bo vẫn mượt và
   không đụng tới nền hay ảnh bên trong thẻ. */
/* Chỉ các khung LỚN mới mang viền gradient. Trước đó cả ô icon nhỏ cũng có, nên một
   lưới thẻ có tới vài chục đường viền xanh sáng chen nhau — nhìn rối. Ô icon trả về
   viền nhạt của bản gốc. */
.card, .tile, .vcard, .ncard, .btn-outline, .hero-panel {
  position: relative;
  border-color: transparent;
}
.card::after, .tile::after, .vcard::after, .ncard::after, .btn-outline::after,
.hero-panel::after,
.statrow .stat::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--g-edge);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;          /* viền chỉ để nhìn, không chắn thao tác */
  z-index: 3;
}
/* Thẻ số liệu đã dùng ::after cho việc khác nên viền của nó vẽ bằng ::before */
.statrow .stat { position: relative; border-color: transparent; }
/* Khung kính lấy viền sáng hơn cho hợp chất liệu */
.hero-panel::after { background: var(--g-edge-glass); }

/* Ô icon: khối lồi có vệt sáng trên, viền trong mảnh */
.stat-ic, .card-ic, .tile-ic, .hero-list-row .ic {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -2px 4px rgba(8, 24, 58, .10),
    0 3px 6px -2px rgba(8, 24, 58, .22);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .tile, .vcard, .ncard { transition: none; }
  .btn:hover, .card:hover, .tile:hover, .vcard:hover, .ncard:hover { transform: none; }
}

/* Tiêu đề hero: bản gốc kết thúc bằng xanh ngọc sáng nên chữ cuối câu nhạt hẳn so với
   đầu câu (chỉ 3.11). Đổi sang dải xanh dương đi về navy — đậm đều từ đầu đến cuối. */
.hero h1 > .grad {
  background-image: linear-gradient(96deg, #0B41B0 0%, #155EEF 45%, #08183A 100%);
}
.hero h1 .tw { --tw-grad: linear-gradient(96deg, #1554E0 0%, #0B41B0 100%); }

/* ── 5e. Giao diện tối ───────────────────────────────────────────────────────
   Khung kính ở trên đặt màu trắng cố định, sang nền tối thành mảng trắng đục và
   chữ sáng nằm trên đó thì không đọc nổi. Ở chế độ tối, kính lấy nền mực. */
:root[data-theme="dark"] .hero-panel {
  background: rgba(10, 20, 44, .55);
  border-color: rgba(255, 255, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 2px 6px rgba(0, 0, 0, .35),
    0 26px 54px -24px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .hero-panel .hero-list-row .ic {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16);
}
:root[data-theme="dark"] .hero-panel .hero-list-row:hover { background: rgba(255, 255, 255, .08); }
:root[data-theme="dark"] .hero-panel .hero-list-row .val { color: #A8C6FF; }
:root[data-theme="dark"] .hero-panel .hero-list-row:hover .val { color: #D7E4FF; }
:root[data-theme="dark"] .hero-panel::after { background: var(--g-edge); }

/* Thẻ "Miễn phí" và điểm số: chữ xanh rất đậm của giao diện sáng, giữ nguyên sang
   nền tối thì chìm hẳn (1.67). Đổi sang xanh sáng. */
:root[data-theme="dark"] .tag-free,
:root[data-theme="dark"] .sc { color: #5FE3B0; }

/* Thanh báo mạng và liên kết bỏ qua: chữ trắng trên xanh nhạt chỉ đạt 2.95.
   Dùng mã màu cố định chứ không dùng biến: ở giao diện tối, biến --brand-2 đảo
   thành xanh nhạt nên chữ trắng lại chìm lần nữa. */
.netbar, .skip-link,
:root[data-theme="dark"] .netbar,
:root[data-theme="dark"] .skip-link { background: #0B41B0; color: #fff; }

/* Chữ xanh lá trên nút Đăng nhập ở nền tối cần sáng lên, không phải đậm xuống */
:root[data-theme="dark"] .auth-login { color: #8FE04A; }

/* Thanh menu: em cho dùng --brand để đồng tông với chữ "Trang chủ", nhưng biến này
   không đảo sáng ở giao diện tối nên chữ xanh đậm nằm trên nền mực chỉ đạt 3.41. */
:root[data-theme="dark"] .hd-nav > a,
:root[data-theme="dark"] .hd-nav .nav-trigger { color: #A8C6FF; }
:root[data-theme="dark"] .hd-nav > a:hover,
:root[data-theme="dark"] .hd-nav .nav-trigger:hover,
:root[data-theme="dark"] .hd-nav > a.active,
:root[data-theme="dark"] .hd-nav .nav-trigger.active { color: #D7E4FF; }
:root[data-theme="dark"] .lang-btn { color: #C3CEE3; }

/* ── 5f. Đồng bộ ô mục tiêu và thẻ chứng chỉ ─────────────────────────────────
   Trước đó tên chứng chỉ (IELTS, TOEIC, THPT, HSK…) mỗi cái một màu theo icon, nên
   một hàng bảy ô có bốn màu chữ khác nhau — mắt phải đọc lại từng ô thay vì quét một
   lượt. Chữ đưa hết về màu mực; nhịp màu chỉ giữ ở ô icon. */
.tile .tile-tx strong { color: var(--text); }
.tile-ic {
  background: color-mix(in srgb, currentColor 8%, #fff);
  border-color: color-mix(in srgb, currentColor 22%, transparent);
}

/* Thẻ chứng chỉ: mã chứng chỉ dùng đúng ngôn ngữ hình khối của ô mục tiêu ngoài trang
   chủ — nền nhạt, chữ đậm cùng sắc, viền mảnh, bo góc mềm — và luân phiên bốn sắc theo
   thứ tự thẻ thay vì xanh dương đặc toàn bộ.
   Mã chứng chỉ dài ngắn khác nhau (KET·PET, TOEFL, VSTEP) nên giữ dạng viên thuôn chứ
   không ép vào ô vuông như ngoài kia. */
.cert-code {
  background: #EAF1FE;
  color: #0B41B0;
  border: 1px solid rgba(21, 94, 239, .22);
  border-radius: 12px;
  padding: 4px 12px;
  font-weight: 800;
  text-shadow: none;
}
/* Sắc do JS gán theo thứ tự xuất hiện thật trên trang (xem aha-fix.js) */
.cert-code[data-sac="1"] {
  background: #E6FAF7; color: #0A6E63; border-color: rgba(16, 168, 150, .26);
}
.cert-code[data-sac="2"] {
  background: #EFF9E4; color: #2F6B00; border-color: rgba(76, 154, 4, .26);
}
.cert-code[data-sac="3"] {
  background: #FEF3E4; color: #A85A16; border-color: rgba(192, 107, 28, .3);
}
.cert h3 { color: var(--text); }
.cert-tag { color: var(--brand-2); font-weight: 750; }
.cert:hover .cert-tag { color: var(--brand-ink); }

/* ── 5g. Nút trên dải kêu gọi nền tối ────────────────────────────────────────
   Dải "Chưa biết nên chọn chứng chỉ nào?" đang dùng nút trắng + nút viền trắng, khác
   hẳn dải "Thử một đề ngay" vốn là xanh lá + cam. Cho hai dải dùng chung một kiểu:
   việc chính màu xanh lá, việc phụ màu cam. */
.banner .btn.btn-onDark {
  background: var(--g-leaf);
  color: #fff;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(6, 40, 2, .5);
}
.banner .btn.btn-onDark-outline {
  background: var(--g-earth);
  color: #fff;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(86, 42, 6, .55);
}

/* ── 6. Các mục lớn: khối nền đậm, xen kẽ nâu đất ↔ xanh lá ──────────────── */
.sec-head .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  background: var(--g-earth);
  text-shadow: 0 1px 2px rgba(40, 20, 2, .5);
}
.sec-head .eyebrow .icon { color: #fff; opacity: .9; }
/* Mục lớn thứ 2, 4, 6… đổi sang xanh lá để hai màu luân phiên */
section:nth-of-type(even) .sec-head .eyebrow { background: var(--g-leaf); }

/* Nhãn đầu trang ở các trang con (Chương trình đào tạo, Về chúng tôi, Kho tài liệu…)
   dùng khối .ph chứ không phải .sec-head, nên trước đó vẫn là khung trắng viền nhạt.
   Cho tất cả về cùng một kiểu viên đặc, tông xanh lá. */
.ph .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: 999px;
  background: var(--g-leaf);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(6, 40, 2, .55);
}
.ph .eyebrow .icon { color: #fff; opacity: .92; }
.ph .eyebrow::after {
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .95) 0%, #CDF59A 42%, rgba(255, 255, 255, .5) 100%);
}

/* Viền ngoài: vòng gradient sáng cùng họ màu với nền.
   Bản gốc vẽ vòng này bằng dải xanh dương (--g-brand); đặt trên nền cam nó thành
   một vệt sẫm bao quanh. Chỉ thay dải màu, vẫn dùng lại đúng cơ chế mask 1px của
   bản gốc nên góc bo vẫn mượt. */
.sec-head .eyebrow::after {
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .95) 0%,
    #FFD08F 42%,
    rgba(255, 255, 255, .5) 100%);
}
section:nth-of-type(even) .sec-head .eyebrow::after {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, .95) 0%,
    #CDF59A 42%,
    rgba(255, 255, 255, .5) 100%);
}