/* ============================================================
   public-refine-v1 — Nâng chất thị giác cho TOÀN BỘ trang công khai
   (trang chủ VI/EN + các trang khách: đăng nhập, đăng ký, tin tức,
   bài viết, test trình độ, tuyển giáo viên, luyện nói).

   NGUYÊN TẮC
   1. Không đổi bố cục, nội dung, menu hay thứ tự khối. Chỉ đổi phần NHÌN:
      thang chữ, chiều sâu, màu nền, nhịp khoảng cách, trạng thái hover/focus.
   2. Chỉ tác động trong phạm vi `body.landing-tabs` (index.html/en.html) và
      `body.guest` (trang khách dùng templates/header.php).
      TUYỆT ĐỐI không chạm `body.has-sidebar` — giao diện bên trong sau khi
      đăng nhập (học viên / giáo viên / admin) giữ nguyên 100%.
   3. Nạp CUỐI CÙNG nên thắng ở cùng độ ưu tiên. Gỡ thẻ <link> ra là trang
      quay lại y như trước, không cần sửa gì khác.

   Hệ màu vẫn là hệ cũ lấy từ logo: vàng #f5b60a (cánh) + navy #01468c
   (địa cầu). Phần thêm vào chỉ là dải trung tính ngả navy, thang chiều sâu
   và thang chữ — không thay màu thương hiệu.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKEN — trung tính ngả navy + thang chiều sâu 4 bậc
   Xám thuần đọc ra "chưa ai chọn"; lệch nhẹ về navy thì ăn nhập
   với địa cầu trong logo.
   ------------------------------------------------------------ */
body.landing-tabs,
body.guest {
  /* Chữ */
  --pr-ink: #0a1b33;          /* tiêu đề — gần đen, ngả navy */
  --pr-body: #3b4b63;         /* chữ thân bài */
  --pr-muted: #6c7d96;        /* chữ phụ */
  --pr-faint: #93a1b5;        /* nhãn rất phụ */

  /* Nền & đường kẻ */
  --pr-surface: #ffffff;
  --pr-ground: #f6f8fc;       /* nền trang, ngả navy chứ không xám thuần */
  --pr-ground-2: #f1f5fb;     /* nền khối xen kẽ */
  --pr-wash-gold: #fffaed;    /* nền vàng rất nhạt */
  --pr-line: #e3e9f3;         /* kẻ mảnh */
  --pr-line-soft: #edf1f8;
  --pr-line-strong: #cfd9e8;

  /* Thang chiều sâu — TIÊU THEO VAI TRÒ, không đóng dấu đồng loạt.
     flat  : chỉ viền, dùng cho hàng dày đặc / dòng danh sách
     rest  : thẻ ở trạng thái nghỉ
     lift  : thẻ khi rê chuột, hoặc thẻ dẫn dắt duy nhất của khối
     glow  : riêng nút hành động chính màu vàng */
  --pr-flat: none;
  --pr-rest: 0 1px 1px rgba(10,27,51,.04), 0 10px 24px -14px rgba(10,27,51,.22);
  --pr-lift: 0 2px 4px rgba(10,27,51,.05), 0 26px 50px -22px rgba(10,27,51,.34);
  --pr-glow: 0 10px 24px -10px rgba(245,182,10,.62);
  --pr-inset-top: inset 0 1px 0 rgba(255,255,255,.9);

  /* Bo góc */
  --pr-r-sm: 10px;
  --pr-r: 14px;
  --pr-r-lg: 20px;

  /* Nhịp dọc của khối */
  --pr-section-y: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem);

  /* Nhịp chuyển động */
  --pr-ease: cubic-bezier(.22,.7,.28,1);
}

/* ------------------------------------------------------------
   2. NỀN TRANG
   ------------------------------------------------------------ */
body.landing-tabs,
body.guest.site-flat {
  background: var(--pr-ground);
  color: var(--pr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------
   3. CHỮ — thang co giãn, tương phản cỡ rõ hơn hẳn bản cũ
   Bản cũ h1 1.45rem / h2 1.12rem: mọi cấp gần bằng nhau nên trang
   đọc ra phẳng. Ở đây chỉ nới thang cho trang công khai.
   ------------------------------------------------------------ */
/* Cân chữ thì áp cho mọi tiêu đề, nhưng MÀU thì không:
   nhiều khối của site nằm trên nền navy/ảnh (hero, dải đăng ký, đầu
   trang Tin tức, thẻ bài nổi bật). Đặt màu mực tối cho tất cả h1–h3 sẽ
   làm chữ tối trên nền tối. Vì vậy chỉ đổi màu trong các khối nền sáng. */
body.landing-tabs :is(h1, h2, h3),
body.guest :is(h1, h2, h3) { text-wrap: balance; }

body.landing-tabs .lp-section :is(h2, h3),
body.landing-tabs :is(.exam-hub, .medical-reading) :is(h2, h3),
body.guest main.container :is(h1, h2, h3) { color: var(--pr-ink); }

/* Khối nền tối: tiêu đề luôn sáng.
   Phải đủ ưu tiên để thắng quy tắc `main.container :is(h1,h2,h3)` ở ngay
   trên — nếu không, tiêu đề trang Tin tức ra chữ tối trên nền navy. */
body.landing-tabs :is(.lp-hero, .tab-intro, .register-band) :is(h1, h2, h3),
body.guest main.container :is(.blog-hero, .blog-hero-inner, .blog-featured, .bf-body, .tab-intro) :is(h1, h2, h3),
body.guest :is(.blog-hero, .blog-featured, .tab-intro) :is(h1, h2, h3),
body.guest main.container .blog-featured .bf-body :is(h2, h3, a) { color: #fff; }
body.landing-tabs .lp-hero h1 em { color: #ffd45e; }

/* Tiêu đề khối */
body.landing-tabs .sec-head h2,
body.guest .sec-head h2 {
  font-size: clamp(1.55rem, 1.05rem + 1.75vw, 2.3rem);
  line-height: 1.18;
  letter-spacing: -.025em;
  font-weight: 750;
  margin: .35rem 0 .55rem;
}
body.landing-tabs .sec-head p,
body.guest .sec-head p {
  font-size: clamp(.97rem, .93rem + .22vw, 1.08rem);
  line-height: 1.68;
  color: var(--pr-muted);
  max-width: 60ch;
  margin-inline: auto;
  text-wrap: pretty;
}
body.landing-tabs .course-intro p,
body.guest .course-intro p { margin-inline: 0; }

/* Nhãn chữ hoa nhỏ: cần giãn chữ mới không bị dính
   (dòng chữ hoa không giãn là dấu hiệu rõ nhất của bản dựng vội). */
body.landing-tabs :is(.eyebrow, .tab-kicker, .course-card .level, .cert-badges span),
body.guest :is(.eyebrow, .tab-kicker, .auth-kicker) {
  letter-spacing: .085em;
  font-weight: 700;
}

/* Số liệu phải xếp thẳng cột */
body.landing-tabs :is(.hero-facts .fact strong, .lp-strip strong, .stat-value, .blog-hero-stats),
body.guest :is(.lp-strip strong, .blog-hero-stats) {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Đoạn văn dài: giới hạn bề ngang cho dễ đọc */
body.guest main.container > p,
body.guest main.container .post-body p { max-width: 68ch; }

/* ------------------------------------------------------------
   4. NÉT VÀNG "CÁNH" — chi tiết nhận diện duy nhất được thêm vào.
   Một nét 2px chuyển vàng → trong suốt, lấy ý từ đôi cánh trong logo.
   Chỉ dùng ở 2 chỗ: gạch dưới tiêu đề khối và mép trên thẻ dẫn dắt.
   Không rải ra mọi thẻ — đó là lý do bản cũ trông phẳng.
   ------------------------------------------------------------ */
body.landing-tabs .sec-head .eyebrow,
body.guest .sec-head .eyebrow {
  position: relative;
  background: var(--pr-wash-gold);
  border-color: #f0d389;
  color: var(--gold-ink, #8a5e00);
  box-shadow: 0 1px 2px rgba(138,94,0,.06);
}

body.landing-tabs .sec-head::after,
body.guest .sec-head::after {
  content: "";
  display: block;
  width: 84px;
  height: 2px;
  margin: 1.05rem auto 0;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold, #f5b60a) 22%, #c68802 50%, var(--gold, #f5b60a) 78%, transparent);
}
/* Khối "Khóa học" căn trái nên nét vàng cũng căn trái.
   .course-intro là flex có wrap, nên nét vàng phải chiếm trọn một dòng
   riêng, không thì nó thành một ô flex nằm cạnh nút bên phải. */
body.landing-tabs .sec-head.course-intro::after,
body.guest .sec-head.course-intro::after {
  /* Ô flex phải chiếm trọn một dòng (không thì nó nằm cạnh nút bên phải),
     nhưng nét vẽ vẫn chỉ dài 84px ở mép trái — dùng background no-repeat
     thay vì width. */
  flex: 0 0 100%;
  order: 9;
  width: auto;
  margin: .35rem 0 0;
  background: linear-gradient(90deg, var(--gold, #f5b60a), #c68802 55%, rgba(245,182,10,0)) left center / 84px 2px no-repeat;
}

/* ------------------------------------------------------------
   5. NÚT
   ------------------------------------------------------------ */
body.landing-tabs .btn,
body.guest .btn {
  transition: transform .16s var(--pr-ease), box-shadow .16s var(--pr-ease),
              background-color .16s var(--pr-ease), border-color .16s var(--pr-ease),
              color .16s var(--pr-ease);
}

/* Hành động chính: vàng gold, có gờ sáng ở mép trên cho ra khối */
body.landing-tabs .btn-gold,
body.guest .btn-gold {
  background: linear-gradient(180deg, #ffd34a 0%, var(--gold, #f5b60a) 46%, #dc9f04 100%);
  border-color: #c98f03;
  color: #241900;
  font-weight: 700;
  letter-spacing: .005em;
  box-shadow: var(--pr-glow), var(--pr-inset-top);
}
body.landing-tabs .btn-gold:hover,
body.guest .btn-gold:hover {
  background: linear-gradient(180deg, #ffdc6b 0%, #f9c01f 46%, #c88b02 100%);
  box-shadow: 0 14px 30px -10px rgba(245,182,10,.72), var(--pr-inset-top);
  transform: translateY(-1px);
}
body.landing-tabs .btn-gold:active,
body.guest .btn-gold:active { transform: translateY(0); box-shadow: var(--pr-glow); }

/* Hành động chính màu navy */
body.landing-tabs .btn-primary,
body.guest .btn-primary {
  background: linear-gradient(180deg, #0a5faf 0%, #01468c 58%, #013b78 100%);
  border-color: #013369;
  box-shadow: 0 10px 24px -12px rgba(1,70,140,.7), var(--pr-inset-top);
  font-weight: 650;
}
body.landing-tabs .btn-primary:hover,
body.guest .btn-primary:hover {
  background: linear-gradient(180deg, #0d6cc4 0%, #01509f 58%, #01407f 100%);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -12px rgba(1,70,140,.8), var(--pr-inset-top);
}

/* Hành động phụ: viền mảnh, nền gần như trắng — nhẹ hơn hẳn bản cũ */
body.landing-tabs .btn-outline,
body.guest .btn-outline {
  background: #fff;
  border-color: var(--pr-line-strong);
  color: #1b3a5c;
  box-shadow: 0 1px 2px rgba(10,27,51,.05);
}
body.landing-tabs .btn-outline:hover,
body.guest .btn-outline:hover {
  background: #f4f8fd;
  border-color: #8fb4d8;
  color: var(--blue-2, #01468c);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(10,27,51,.28);
}

/* Bàn phím phải thấy rõ mình đang ở đâu */
body.landing-tabs :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
body.guest :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold, #f5b60a);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   6. THANH ĐẦU TRANG — giữ nền navy, thêm chiều sâu
   ------------------------------------------------------------ */
body.landing-tabs .lp-top,
body.guest .lp-top {
  background:
    radial-gradient(760px 120px at 50% 0%, rgba(90,160,225,.24), transparent 72%),
    linear-gradient(180deg, #024e9b 0%, #01468c 45%, #012c5f 100%);
  border-bottom: 1px solid rgba(245,182,10,.42);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 8px 24px -14px rgba(1,30,66,.9);
}
body.landing-tabs .lp-menu a,
body.guest .lp-menu a {
  color: #d9e8f8;
  transition: background-color .16s var(--pr-ease), color .16s var(--pr-ease);
}
body.landing-tabs .lp-menu a:hover,
body.guest .lp-menu a:hover { background: rgba(255,255,255,.14); color: #fff; }

/* Tab đang mở: trước đây là xanh lá #125b50 — lạc hẳn khỏi hệ màu logo.
   Đưa về vàng gold cho khớp nhận diện. */
body.landing-tabs .lp-menu a[aria-selected="true"],
body.landing-tabs .lp-menu a.on,
body.guest .lp-menu a.on {
  background: rgba(245,182,10,.2);
  color: #ffd45e;
  box-shadow: inset 0 0 0 1px rgba(245,182,10,.55);
}
body.landing-tabs .lp-menu a[aria-selected="true"] .ui-icon,
body.landing-tabs .lp-menu a.on .ui-icon,
body.guest .lp-menu a.on .ui-icon { color: #ffd45e; opacity: 1; }

/* ------------------------------------------------------------
   7. HERO
   ------------------------------------------------------------ */
body.landing-tabs .lp-hero h1 {
  font-size: clamp(1.9rem, 1.15rem + 2.85vw, 3.05rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 1.1rem 0 .85rem;
}
body.landing-tabs .lp-hero h1 em {
  color: #ffd45e;
  /* Nét vàng mảnh dưới cụm IELTS · APTIS, cùng mô-típ "cánh" ở mục 4 */
  background: linear-gradient(90deg, rgba(245,182,10,.55), rgba(245,182,10,0)) bottom left / 100% 3px no-repeat;
  padding-bottom: .06em;
}
body.landing-tabs .lp-hero .lead {
  font-size: clamp(1rem, .96rem + .3vw, 1.12rem);
  line-height: 1.7;
  color: #cfe0f4;
  max-width: 56ch;
  text-wrap: pretty;
}

/* Ba mảng dạy học dưới câu dẫn */
body.landing-tabs .hero-offers li { color: #dceaf9; }
body.landing-tabs .hero-offers .ui-icon { color: #ffd45e; }

/* Ba ô thông tin liên hệ ở đáy hero: từ hộp phẳng thành thẻ kính */
body.landing-tabs .hero-facts { gap: .75rem; margin-top: 2rem; }
body.landing-tabs .hero-facts .fact {
  padding: .72rem 1.05rem;
  border-radius: var(--pr-r-sm);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.17);
  backdrop-filter: blur(6px);
  transition: background-color .18s var(--pr-ease), border-color .18s var(--pr-ease);
}
body.landing-tabs .hero-facts .fact:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(245,182,10,.5);
}
body.landing-tabs .hero-facts .fact strong { font-size: 1.02rem; letter-spacing: .01em; }
body.landing-tabs .hero-facts .fact span { color: #b9d2ec; font-size: .8rem; }

/* Nút điều hướng ảnh hero */
body.landing-tabs .hero-arrow {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3);
  color: #fff;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 22px -8px rgba(1,30,66,.8);
}
body.landing-tabs .hero-arrow:hover {
  background: rgba(255,255,255,.26);
  border-color: var(--gold, #f5b60a);
  color: #ffd45e;
}
body.landing-tabs .hero-dots {
  background: rgba(1,30,66,.55);
  border-color: rgba(255,255,255,.22);
  backdrop-filter: blur(10px);
}
body.landing-tabs .hero-dot::before { background: rgba(255,255,255,.45); }
body.landing-tabs .hero-dot.is-active::before { background: var(--gold, #f5b60a); }

/* ------------------------------------------------------------
   8. DẢI SỐ LIỆU — làm thành một khối có chủ đích, không phải hộp trắng
   ------------------------------------------------------------ */
body.landing-tabs .lp-strip {
  position: relative;
  margin-top: calc(var(--pr-section-y) * -.42);
  z-index: 2;
}
body.landing-tabs .lp-strip > .inner,
body.landing-tabs .lp-strip .strip-inner {
  background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r-lg);
  box-shadow: var(--pr-lift);
}
body.landing-tabs .lp-strip strong {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -.03em;
  font-weight: 800;
  background: linear-gradient(135deg, #01468c, #0a5faf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.landing-tabs .lp-strip small,
body.landing-tabs .lp-strip span { color: var(--pr-muted); }

/* ------------------------------------------------------------
   9. NHỊP KHỐI — trang cũ là một tờ giấy trắng liền mạch với
   những khoảng trống to. Ở đây các khối có nền xen kẽ + kẻ mảnh
   phân cách, đọc ra thành từng chương.
   ------------------------------------------------------------ */
body.landing-tabs .lp-section { padding-block: var(--pr-section-y); }

body.landing-tabs .lp-section.section-white { background: var(--pr-surface); }
body.landing-tabs .lp-section.section-sky,
body.landing-tabs .lp-section.section-lilac {
  background: linear-gradient(180deg, var(--pr-ground) 0%, #fbfcfe 100%);
}
body.landing-tabs .lp-section.section-cream,
body.landing-tabs .lp-section.section-gold-wash {
  background: linear-gradient(180deg, var(--pr-wash-gold) 0%, #fffdf7 100%);
}
body.landing-tabs .lp-section#faq,
body.landing-tabs .lp-section#dia-chi {
  background: linear-gradient(180deg, #f3f6fc, var(--pr-ground));
}
/* Kẻ mảnh giữa hai khối liền nhau cho ra ranh giới, thay vì trôi vào nhau */
body.landing-tabs .lp-section + .lp-section { border-top: 1px solid var(--pr-line-soft); }

/* ------------------------------------------------------------
   10. THẺ — chiều sâu tiêu theo vai trò
   ------------------------------------------------------------ */
body.landing-tabs :is(.card, .feature-card, .route-step, .team-card),
body.guest main.container > .card {
  background: var(--pr-surface);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  box-shadow: var(--pr-rest);
  transition: transform .2s var(--pr-ease), box-shadow .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
body.landing-tabs :is(.feature-card, .route-step, .team-card):hover {
  transform: translateY(-3px);
  box-shadow: var(--pr-lift);
  border-color: #f0d389;
}

/* Tiêu đề trong thẻ: bỏ chữ hoa toàn phần — chữ hoa dài đọc chậm và
   làm mọi thẻ nhìn như nhau. Nhãn phía trên đã gánh vai trò đó rồi. */
body.landing-tabs :is(.feature-card, .team-card, .route-step) h3 {
  text-transform: none;
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -.012em;
  color: var(--pr-ink);
  line-height: 1.4;
}
body.landing-tabs :is(.feature-card, .team-card, .route-step) p {
  color: var(--pr-muted);
  font-size: .93rem;
  line-height: 1.65;
}

/* Ô biểu tượng: bỏ viền, dùng nền pha + gờ sáng trong */
body.landing-tabs .icon-chip,
body.landing-tabs .course-symbol,
body.landing-tabs .skill-symbol {
  border: 0;
  border-radius: var(--pr-r-sm);
  background: linear-gradient(140deg, #e9f1fb, #dbe8f7);
  color: #0a5faf;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px -4px rgba(10,27,51,.3);
}
body.landing-tabs .feature-card:nth-child(2) .icon-chip,
body.landing-tabs .feature-card:nth-child(4) .icon-chip {
  background: linear-gradient(140deg, #fff3d4, #ffe9b4);
  color: #8a5e00;
}

/* Bậc lộ trình 01–04 */
body.landing-tabs .route-step .num {
  background: linear-gradient(180deg, #ffd34a, var(--gold, #f5b60a) 55%, #d79c03);
  border-color: #c98f03;
  color: #241900;
  box-shadow: 0 6px 14px -6px rgba(245,182,10,.75), var(--pr-inset-top);
}

/* ------------------------------------------------------------
   11. THẺ KHÓA HỌC (bảng dựng thành lưới thẻ ở landing-v3)
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section table.public-course-table tbody { gap: 1.35rem; }

body.site-flat.landing-tabs .lp-section table.public-course-table tr {
  position: relative;
  padding: 1.6rem 1.6rem 1.4rem;
  border-color: var(--pr-line);
  border-radius: var(--pr-r-lg);
  box-shadow: var(--pr-rest);
  overflow: hidden;
  transition: transform .2s var(--pr-ease), box-shadow .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
/* Nét vàng "cánh" ở mép trên — thay cho thanh đặc 3px đóng dấu đều nhau */
body.site-flat.landing-tabs .lp-section table.public-course-table tr::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--gold, #f5b60a), #f0c24d 38%, transparent 88%);
  opacity: .9;
}
body.site-flat.landing-tabs .lp-section table.public-course-table tr:nth-child(2n)::before {
  background: linear-gradient(90deg, #0a5faf, #6aa6e0 38%, transparent 88%);
}
body.site-flat.landing-tabs .lp-section table.public-course-table tr:hover {
  transform: translateY(-4px);
  border-color: #f0d389;
  box-shadow: var(--pr-lift);
}

/* Tên khóa học — dữ liệu vốn viết hoa, nên chỉ chỉnh cỡ và độ giãn */
body.landing-tabs .lp-section .public-course-table td:first-child strong {
  font-size: 1.07rem;
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: .005em;
  color: var(--pr-ink);
}
body.landing-tabs .lp-section .public-course-table .list-summary li { color: var(--pr-body); }
body.landing-tabs .lp-section .public-course-table .list-summary li::before {
  background: linear-gradient(140deg, #ffe9b4, #f7d382);
  color: #7a5200;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

/* Hàng "nhãn — giá trị": gom thành một khối nền nhạt, đọc ra là thông số */
body.site-flat.landing-tabs .lp-section table.public-course-table td:not(:first-child):not(:last-child) {
  border-top: 1px dashed var(--pr-line);
  padding: .58rem 0;
}
body.site-flat.landing-tabs .lp-section table.public-course-table td:not(:first-child):not(:last-child)::before {
  color: var(--pr-faint);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .02em;
}
body.site-flat.landing-tabs .lp-section table.public-course-table td:not(:first-child):not(:last-child) .list-cell {
  color: var(--pr-ink);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* Nút "Tư vấn": bản cũ là 5 thanh navy đặc, nặng ngang nhau, kéo hết sự
   chú ý khỏi nội dung khóa học. Đưa về dạng trầm, chỉ đậm lên khi rê chuột. */
body.site-flat.landing-tabs .lp-section table.public-course-table td:last-child .btn,
body.site-flat.landing-tabs .lp-section table.public-course-table td:last-child .btn-outline {
  width: 100%;
  min-height: 46px;
  border-radius: var(--pr-r-sm);
  background: #eef4fc;
  border: 1px solid #cddfef;
  color: #114a80;
  font-weight: 650;
  font-size: .95rem;
  box-shadow: none;
}
body.site-flat.landing-tabs .lp-section table.public-course-table td:last-child .btn:hover,
body.site-flat.landing-tabs .lp-section table.public-course-table td:last-child .btn-outline:hover {
  background: linear-gradient(180deg, #0a5faf, #01468c);
  border-color: #013369;
  color: #fff;
  transform: none;
  box-shadow: 0 10px 22px -12px rgba(1,70,140,.85);
}

/* Khối "Tiếng Việt cho người nước ngoài" ở cuối lưới khóa học */
body.landing-tabs .program-spotlight {
  background: linear-gradient(135deg, #fff, var(--pr-wash-gold));
  border: 1px solid #f2ddac;
  border-radius: var(--pr-r-lg);
  box-shadow: var(--pr-rest);
}
body.landing-tabs .program-spotlight h3 { text-transform: none; letter-spacing: -.012em; }
body.landing-tabs .program-icon {
  background: linear-gradient(140deg, #fff3d4, #f7d382);
  color: #7a5200;
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
body.landing-tabs .program-tags span {
  background: #fff;
  border: 1px solid #f0d389;
  color: #7a5200;
}

/* ------------------------------------------------------------
   12. FAQ — hàng dày đặc thì KHÔNG đổ bóng, chỉ kẻ viền
   ------------------------------------------------------------ */
body.landing-tabs .faq details {
  border-color: var(--pr-line);
  border-radius: var(--pr-r);
  box-shadow: var(--pr-flat);
  background: var(--pr-surface);
  transition: border-color .18s var(--pr-ease), box-shadow .18s var(--pr-ease), background-color .18s var(--pr-ease);
}
body.landing-tabs .faq details:hover { border-color: var(--pr-line-strong); }
body.landing-tabs .faq details[open] {
  border-color: #f0d389;
  background: linear-gradient(180deg, var(--pr-wash-gold), #fff 42%);
  box-shadow: var(--pr-rest);
}
body.landing-tabs .faq summary { color: var(--pr-ink); font-weight: 650; }
body.landing-tabs .faq summary::after {
  display: grid; place-items: center;
  width: 22px; height: 22px; top: -1px;
  border-radius: 999px;
  background: var(--pr-wash-gold);
  border: 1px solid #f0d389;
  font-size: .95rem; line-height: 1;
}
body.landing-tabs .faq details p { color: var(--pr-muted); }

/* ------------------------------------------------------------
   13. GIẢNG VIÊN & ẢNH
   ------------------------------------------------------------ */
body.landing-tabs .photo-frame {
  border-radius: var(--pr-r-lg);
  box-shadow: var(--pr-lift);
}
/* Khung ảnh chưa có ảnh: bản cũ hiện ra ô xám/xanh trống trơn.
   Thay bằng nền thương hiệu có hoa văn, nhìn ra là "chỗ dành cho ảnh". */
body.landing-tabs .photo-frame:not(:has(img)),
body.landing-tabs .trial-preview:not(.has-demo-video),
body.guest .bf-cover:not(:has(img)) {
  background:
    radial-gradient(circle at 30% 28%, rgba(245,182,10,.22), transparent 58%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 10px, transparent 10px 20px),
    linear-gradient(140deg, #01468c, #012a56);
}
body.landing-tabs .team-card {
  border-top: 0;
  border-radius: var(--pr-r);
}
body.landing-tabs .team-card img,
body.landing-tabs .team-card .team-initial {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #f0d389, 0 8px 18px -8px rgba(10,27,51,.45);
}
body.landing-tabs .cert-badges span {
  background: linear-gradient(180deg, #fff, var(--pr-wash-gold));
  border-color: #f0d389;
  color: #7a5200;
  box-shadow: 0 1px 2px rgba(138,94,0,.08);
}
body.landing-tabs .check-list li { color: var(--pr-body); }
body.landing-tabs .check-list li::before {
  background: linear-gradient(140deg, #e9f1fb, #cfe0f4);
  border-color: #b9d2ec;
}

/* ------------------------------------------------------------
   14. KHỐI ĐĂNG KÝ + BIỂU MẪU
   ------------------------------------------------------------ */
body.landing-tabs .register-band {
  border-radius: var(--pr-r-lg);
  border-color: rgba(245,182,10,.32);
  box-shadow: 0 30px 60px -28px rgba(1,30,66,.85);
}
body.landing-tabs .register-band h2 {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  letter-spacing: -.025em;
  line-height: 1.2;
}
body.landing-tabs .register-band .form-card {
  border-radius: var(--pr-r);
  box-shadow: 0 26px 52px -24px rgba(1,30,66,.6);
  border: 1px solid rgba(255,255,255,.65);
}
body.landing-tabs .register-band .form-card h3 {
  text-transform: none;
  font-size: 1.06rem;
  letter-spacing: -.012em;
}

/* Ô nhập: cao hơn, viền rõ hơn, vòng nét khi focus dùng màu vàng thương hiệu */
body.landing-tabs :is(input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea),
body.guest :is(input[type=text], input[type=email], input[type=tel], input[type=password], select, textarea) {
  min-height: 44px;
  padding: .6rem .8rem;
  border-radius: var(--pr-r-sm);
  border-color: var(--pr-line-strong);
  background: #fff;
  color: var(--pr-ink);
  transition: border-color .16s var(--pr-ease), box-shadow .16s var(--pr-ease);
}
body.landing-tabs textarea,
body.guest textarea { min-height: 88px; }
body.landing-tabs :is(input, select, textarea):focus,
body.guest :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--gold, #f5b60a);
  box-shadow: 0 0 0 3px rgba(245,182,10,.22);
}
body.landing-tabs :is(input, select, textarea)::placeholder,
body.guest :is(input, select, textarea)::placeholder { color: var(--pr-faint); }
body.landing-tabs label,
body.guest label { color: var(--pr-body); font-weight: 600; }

/* ------------------------------------------------------------
   15. CHÂN TRANG
   ------------------------------------------------------------ */
body.landing-tabs .lp-footer {
  background: linear-gradient(180deg, #fbfcfe 0%, var(--pr-ground) 55%, #eef3fa 100%);
  border-top: 1px solid var(--pr-line);
  color: var(--pr-muted);
}
body.landing-tabs .lp-footer::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-2, #01468c), #0a5faf 38%, var(--gold, #f5b60a) 74%, #ffd45e);
}
body.landing-tabs .footer-col h3,
body.landing-tabs .footer-brand strong {
  text-transform: uppercase;
  font-size: .76rem;
  letter-spacing: .1em;
  color: var(--pr-faint);
  font-weight: 700;
}
body.landing-tabs .footer-links a,
body.landing-tabs .lp-footer a {
  color: var(--pr-body);
  transition: color .15s var(--pr-ease);
}
body.landing-tabs .footer-links a:hover,
body.landing-tabs .lp-footer a:hover { color: var(--blue-2, #01468c); }

/* ------------------------------------------------------------
   16. LIÊN HỆ NỔI + THANH ĐÁY ĐIỆN THOẠI
   Bản cũ: 4 nút tròn 4 màu rực (xanh dương / lá / đỏ / cam) rung liên tục,
   lệch hẳn khỏi hệ vàng–navy và kéo mắt khỏi nội dung.
   Giữ nguyên vị trí và số lượng, chỉ hạ độ rực và bỏ rung.
   ------------------------------------------------------------ */
body.landing-tabs .floating-contact a,
body.guest .floating-contact a {
  box-shadow: 0 8px 20px -8px rgba(10,27,51,.5);
  border: 1px solid rgba(255,255,255,.55);
}
/* Hiệu ứng rung liên tục của các nút liên hệ: đợt đầu tôi tự tắt vì nghĩ
   nó gây xao nhãng, nhưng người dùng muốn giữ — trả lại nguyên như cũ.
   Chỉ dừng rung khi máy bật chế độ giảm chuyển động (khối ở mục 21). */
body.landing-tabs .floating-contact a:hover img,
body.guest .floating-contact a:hover img { animation-duration: .6s; }
body.landing-tabs .floating-contact .fc-zalo,
body.guest .floating-contact .fc-zalo { background: linear-gradient(180deg, #2a9df4, #0a72d0) !important; }
body.landing-tabs .floating-contact .fc-call,
body.guest .floating-contact .fc-call { background: linear-gradient(180deg, #2fb862, #17864a) !important; }
body.landing-tabs .floating-contact .fc-test,
body.guest .floating-contact .fc-test { background: linear-gradient(180deg, #ef4b5e, #c9182c) !important; }
body.landing-tabs .floating-contact .fc-book,
body.guest .floating-contact .fc-book { background: linear-gradient(180deg, #f5b60a, #d08a04) !important; }

body.landing-tabs .back-to-top {
  background: rgba(255,255,255,.96);
  border-color: var(--pr-line-strong);
  box-shadow: var(--pr-lift);
}

/* ------------------------------------------------------------
   17. CÁC TAB TRONG TRANG (Khóa học / Học thử / Luyện thi ...)
   tab-pages-v1.css dùng một dải xanh lá–ngọc (#267178, #22675d,
   #1e6463, #194c48, #edf7f4) không có trong hệ màu logo. Đưa toàn
   bộ về navy–vàng cho cả site nhìn ra một hệ.
   ------------------------------------------------------------ */
body.landing-tabs .tab-intro {
  background:
    radial-gradient(760px 320px at 82% 0%, rgba(245,182,10,.16), transparent 68%),
    linear-gradient(118deg, #012a56, #01468c 62%, #045a9f);
  border-bottom: 1px solid rgba(245,182,10,.32);
}
body.landing-tabs .tab-kicker { color: var(--gold-ink, #8a5e00); }
body.landing-tabs .tab-intro .tab-kicker { color: #ffd45e; }
body.landing-tabs .tab-intro h2 { letter-spacing: -.028em; }
body.landing-tabs .tab-tags .ui-icon { color: #ffd45e; }

body.landing-tabs :is(.exam-hub, .medical-reading) {
  background: linear-gradient(180deg, var(--pr-ground), #fbfcfe);
}
body.landing-tabs .hub-heading h2 {
  color: var(--pr-ink);
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.85rem);
  letter-spacing: -.024em;
}
body.landing-tabs .program-badge { background: #e9f1fb; color: #0d4b85; letter-spacing: .06em; }
body.landing-tabs .exam-switch { background: #e5ebf3; border-radius: var(--pr-r-sm); }
body.landing-tabs .exam-switch button { color: #44607a; border-radius: 8px; }
body.landing-tabs .exam-switch button[aria-selected="true"] {
  background: #fff;
  color: var(--blue-2, #01468c);
  box-shadow: 0 2px 8px -2px rgba(10,27,51,.22);
}
body.landing-tabs .exam-switch button:focus-visible { outline-color: var(--gold, #f5b60a); }

body.landing-tabs .exam-skill-card {
  border-color: var(--pr-line);
  border-radius: var(--pr-r);
  box-shadow: var(--pr-rest);
  color: var(--pr-ink);
}
body.landing-tabs .exam-skill-card:hover {
  border-color: #f0d389;
  box-shadow: var(--pr-lift);
  transform: translateY(-4px);
}
body.landing-tabs .exam-skill-card h3 { color: var(--pr-ink); letter-spacing: -.015em; }
body.landing-tabs .exam-skill-card p { color: var(--pr-muted); }
body.landing-tabs .skill-card-bottom {
  border-top-color: var(--pr-line-soft);
  color: #0d4b85;
}
body.landing-tabs .exam-skill-card:hover .skill-card-bottom .ui-icon { transform: translateX(3px); }
body.landing-tabs .skill-card-bottom .ui-icon { transition: transform .18s var(--pr-ease); }

body.landing-tabs .speaking-feature {
  border-color: #f2ddac;
  border-radius: var(--pr-r-lg);
  background: linear-gradient(115deg, #fff 45%, var(--pr-wash-gold));
  box-shadow: var(--pr-rest);
}
body.landing-tabs .speaking-feature h3 { color: var(--pr-ink); letter-spacing: -.024em; }
body.landing-tabs .speaking-feature p { color: var(--pr-muted); }
body.landing-tabs .speaking-parts > div {
  background: #fff;
  border-color: var(--pr-line);
  border-radius: var(--pr-r-sm);
  box-shadow: 0 1px 2px rgba(10,27,51,.04);
}
body.landing-tabs .speaking-parts > div > span { color: #b08607; font-weight: 800; }
body.landing-tabs .speaking-parts strong { color: var(--pr-ink); }
body.landing-tabs .speaking-parts p { color: var(--pr-muted); }

body.landing-tabs .mock-test-banner {
  border-color: var(--pr-line);
  border-radius: var(--pr-r);
  background: linear-gradient(120deg, #fff, #f4f8fd);
  box-shadow: var(--pr-rest);
}
body.landing-tabs .mock-test-banner h3 { color: var(--pr-ink); }
body.landing-tabs .mock-test-banner p { color: var(--pr-muted); }
body.landing-tabs .practice-start { border-top-color: var(--pr-line); }
body.landing-tabs .practice-start h3 { color: var(--pr-ink); letter-spacing: -.018em; }
body.landing-tabs .practice-hero-note {
  border-color: rgba(245,182,10,.35);
  background: rgba(255,255,255,.08);
  border-radius: var(--pr-r);
  backdrop-filter: blur(8px);
}
body.landing-tabs .practice-hero-note > .ui-icon { color: #ffd45e; }

/* ------------------------------------------------------------
   18. TRANG KHÁCH DÙNG templates/header.php
   content-layout.css cố ý "làm phẳng" nội dung cho giao diện BÊN TRONG
   (body.site-flat main.container). Quy tắc đó cũng đổ lên trang khách,
   nên test trình độ / tuyển giáo viên hiện ra như chữ dán trên nền trắng.
   Ở đây dựng lại khung nội dung, CHỈ cho trang khách.
   ------------------------------------------------------------ */
body.guest main.container {
  padding-block: clamp(1.75rem, 1.2rem + 1.8vw, 3.25rem);
}

/* Khung nội dung cho các trang chữ + biểu mẫu */
body.guest:not(.guest-login):not(.page-news) main.container > :is(h1, h2, h3, p, form, .form-row, .actions, .alert, .badge, details, .muted, .page-head, .content-section-heading) {
  max-width: 820px;
  margin-inline: auto;
}
body.guest main.container .page-head { width: 100%; }
body.guest main.container :is(> h1, .page-head h1) {
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  line-height: 1.18;
  letter-spacing: -.028em;
  font-weight: 780;
  margin-bottom: .7rem;
}
body.guest main.container > h2 {
  font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
  letter-spacing: -.018em;
  margin-top: 2rem;
}
body.guest main.container > p { color: var(--pr-body); line-height: 1.72; }

/* Thẻ nội dung của trang khách (kết quả test, biểu mẫu ứng tuyển...) */
body.guest main.container .card,
body.guest main.container .placement-result {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(1.25rem, 1rem + .8vw, 1.85rem);
  background: var(--pr-surface);
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r-lg);
  box-shadow: var(--pr-rest);
}
body.guest main.container .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem 1.15rem;
}
body.guest main.container .badge {
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: .02em;
}
body.guest main.container .alert { border-radius: var(--pr-r-sm); }

/* ------------------------------------------------------------
   19. TRANG ĐĂNG NHẬP / ĐĂNG KÝ / XÁC THỰC 2 LỚP
   style.css đã có bản thiết kế nền ảnh + thẻ kính cho .guest-login,
   nhưng `body.site-flat { background:#fff }` (content-layout.css) ăn
   đè vì độ ưu tiên cao hơn, nên trang ra trắng trơn. Dựng lại ở đây
   và áp cho CẢ signup/register/verify-2fa, không chỉ login.
   ------------------------------------------------------------ */
body.guest.site-flat:has(.auth-card) {
  background:
    linear-gradient(104deg, rgba(3,32,66,.95) 0%, rgba(4,44,88,.88) 42%, rgba(6,62,117,.62) 68%, rgba(8,74,138,.42) 100%),
    url('/assets/images/hero-speaking.webp') center 34% / cover no-repeat fixed;
}
body.guest.site-flat:has(.auth-card) main.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(760px, calc(100vh - 78px));
}

body.guest .auth-card {
  position: relative;
  overflow: hidden;
  width: min(100%, 468px);
  margin: 0;
  padding: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.8);
  border-radius: var(--pr-r-lg);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px -30px rgba(1,24,54,.75), 0 2px 8px rgba(10,27,51,.1);
}
body.guest .auth-card::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--blue-2, #01468c), #0a5faf 42%, var(--gold, #f5b60a) 80%, #ffd45e);
}
body.guest .auth-card h1 {
  font-size: clamp(1.45rem, 1.2rem + .9vw, 1.85rem);
  letter-spacing: -.028em;
  font-weight: 780;
  margin-bottom: .45rem;
}
body.guest .auth-lead {
  text-align: center;
  color: var(--pr-muted);
  margin: 0 auto 1.35rem;
  max-width: 34ch;
  line-height: 1.6;
  text-wrap: pretty;
}
body.guest .auth-kicker {
  background: linear-gradient(180deg, #fff, var(--pr-wash-gold));
  border-color: #f0d389;
  color: #7a5200;
}
body.guest .auth-card .btn-block { margin-top: 1.1rem; }
body.guest .auth-card .btn-google {
  min-height: 46px;
  border-color: var(--pr-line-strong);
  font-weight: 600;
}
body.guest .signup-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 1.2rem 0;
  color: var(--pr-faint);
  font-size: .84rem;
}
/* freemium-v1.css nạp trong <body> nên đứng SAU file này; nó đặt
   ::before ở position:absolute. Phải trả về static thì đường kẻ mới
   nằm đúng trong luồng flex. */
body.guest .signup-divider::before,
body.guest .signup-divider::after {
  content: "";
  position: static;
  inset: auto;
  flex: 1 1 auto;
  height: 1px;
  background: var(--pr-line);
}
body.guest .signup-divider span {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
}
body.guest .auth-back a { color: var(--pr-muted); }
body.guest .auth-back .ui-icon { transform: rotate(180deg); }

/* ------------------------------------------------------------
   20. TIN TỨC & BÀI VIẾT
   ------------------------------------------------------------ */
body.guest .blog-hero {
  background:
    radial-gradient(720px 300px at 80% 0%, rgba(245,182,10,.18), transparent 66%),
    linear-gradient(140deg, #012a56, #01468c 60%, #045a9f);
  border-bottom: 1px solid rgba(245,182,10,.3);
}
body.guest .blog-hero h1 {
  font-size: clamp(1.7rem, 1.25rem + 1.8vw, 2.6rem);
  letter-spacing: -.03em;
  line-height: 1.14;
}
body.guest .blog-side-card,
body.guest .blog-featured,
body.guest .blog-card {
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  box-shadow: var(--pr-rest);
  transition: transform .2s var(--pr-ease), box-shadow .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
body.guest .blog-card:hover,
body.guest .blog-featured:hover {
  transform: translateY(-3px);
  box-shadow: var(--pr-lift);
  border-color: #f0d389;
}
body.guest .blog-cats a,
body.guest .blog-sort a {
  border-radius: 999px;
  transition: background-color .15s var(--pr-ease), border-color .15s var(--pr-ease), color .15s var(--pr-ease);
}
body.guest .bf-badge {
  background: linear-gradient(180deg, #ffd34a, var(--gold, #f5b60a));
  color: #241900;
  border: 0;
  box-shadow: var(--pr-inset-top);
  font-weight: 700;
}

/* ------------------------------------------------------------
   21. CHUYỂN ĐỘNG — nhẹ, và tôn trọng thiết lập giảm chuyển động
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.landing-tabs *,
  body.guest * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body.landing-tabs :is(.feature-card, .route-step, .team-card, .exam-skill-card, .blog-card):hover,
  body.site-flat.landing-tabs .lp-section table.public-course-table tr:hover { transform: none; }
}

/* ------------------------------------------------------------
   22. ĐIỆN THOẠI
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  /* Hero điện thoại bản cũ mất hẳn ảnh, chỉ còn mảng navy phẳng.
     Trả lại nền ảnh có lớp phủ đủ tối để chữ vẫn đọc rõ. */
  body.landing-tabs .lp-hero {
    background:
      linear-gradient(180deg, rgba(1,26,58,.97) 0%, rgba(1,32,68,.95) 42%, rgba(1,48,96,.9) 72%, rgba(1,62,122,.86) 100%),
      url('/assets/images/hero-background.webp') 62% center / cover no-repeat;
  }
  body.landing-tabs .lp-hero .inner > div:first-child { padding-block: 2.1rem 2.4rem; }
  body.landing-tabs .hero-ctas .btn { flex: 1 1 100%; min-height: 48px; }
  body.landing-tabs .hero-facts { gap: .55rem; }
  body.landing-tabs .hero-facts .fact { flex: 1 1 100%; }

  /* Dải số liệu không còn chồng lên hero khi đã xếp dọc */
  body.landing-tabs .lp-strip { margin-top: 0; }
  body.landing-tabs .lp-strip > .inner { border-radius: var(--pr-r); }

  body.landing-tabs .sec-head::after { margin-top: .85rem; }

  /* Thanh liên hệ đáy: giữ nguyên 4 lối liên hệ, hạ độ rực cho bớt chói */
  body.landing-tabs .mobile-cta,
  body.guest .mobile-cta { box-shadow: 0 -10px 26px -12px rgba(10,27,51,.55); }
  body.landing-tabs .mobile-cta .mc-zalo,
  body.guest .mobile-cta .mc-zalo { background: linear-gradient(180deg, #2a9df4, #0a72d0); }
  body.landing-tabs .mobile-cta .mc-call,
  body.guest .mobile-cta .mc-call { background: linear-gradient(180deg, #2fb862, #17864a); }
  body.landing-tabs .mobile-cta .mc-test,
  body.guest .mobile-cta .mc-test { background: linear-gradient(180deg, #ef4b5e, #c9182c); }
  body.landing-tabs .mobile-cta .mc-book,
  body.guest .mobile-cta .mc-book { background: linear-gradient(180deg, #f5b60a, #d08a04); }

  body.guest .auth-card { width: 100%; }
  body.guest.site-flat:has(.auth-card) {
    background:
      linear-gradient(180deg, rgba(3,32,66,.95), rgba(6,62,117,.8)),
      url('/assets/images/hero-speaking.webp') center / cover no-repeat;
  }
  body.guest.site-flat:has(.auth-card) main.container {
    min-height: 0;
    padding-block: 2rem 2.5rem;
  }
}

@media (max-width: 480px) {
  body.landing-tabs .lp-section { padding-block: 2.35rem; }
  body.site-flat.landing-tabs .lp-section table.public-course-table tr { padding: 1.25rem 1.2rem 1.15rem; }
  body.guest main.container .card { padding: 1.15rem 1.1rem; border-radius: var(--pr-r); }
}

/* ------------------------------------------------------------
   23. GỠ "LÀM PHẲNG" — chỉ cho trang công khai

   content-layout.css (đợt "nội dung phẳng toàn site" 12/09) đặt:
     body.site-flat main.container :is(.auth-card,.post-card,…)
     body.site-flat .lp-section   :is(.card,.team-card,.form-card,…)
   với border:0; border-radius:0; box-shadow:none; background:transparent.
   Chủ đích ban đầu là làm phẳng giao diện LÀM VIỆC bên trong, nhưng
   quy tắc bám vào `body.site-flat` nên đổ luôn lên trang khách — đó là
   lý do trang đăng nhập và các thẻ ở trang chủ trông như chữ dán trên
   nền trắng.

   Khối này dựng lại khung thẻ, CHỈ trong phạm vi .landing-tabs/.guest,
   với độ ưu tiên đủ để thắng. body.has-sidebar KHÔNG khớp selector nào
   dưới đây, nên giao diện sau đăng nhập vẫn phẳng y như cũ.
   ------------------------------------------------------------ */

/* 23a. Thẻ đăng nhập / đăng ký / bài viết / tin tức */
body.site-flat.guest main.container :is(.auth-card, .post-card, .blog-side-card, .blog-featured, .post-cta, .blog-cta) {
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  box-shadow: var(--pr-rest);
  background: var(--pr-surface);
  padding: clamp(1.15rem, .95rem + .7vw, 1.6rem);
}
body.site-flat.guest main.container .auth-card {
  width: min(100%, 468px);
  margin-inline: auto;
  padding: clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  border-color: rgba(255,255,255,.8);
  border-radius: var(--pr-r-lg);
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(18px);
  box-shadow: 0 40px 90px -30px rgba(1,24,54,.75), 0 2px 8px rgba(10,27,51,.1);
}
body.site-flat.guest main.container .auth-card::before {
  display: block;
  content: "";
  position: absolute; inset: 0 0 auto; height: 4px;
  background: linear-gradient(90deg, var(--blue-2, #01468c), #0a5faf 42%, var(--gold, #f5b60a) 80%, #ffd45e);
}
body.site-flat.guest main.container :is(.post-cta, .blog-cta) {
  background: linear-gradient(135deg, #fff, var(--pr-wash-gold));
  border-color: #f2ddac;
}

/* 23b. Thẻ trong các khối của trang chủ */
body.site-flat.landing-tabs .lp-section :is(.card, .team-card, .form-card, .program-spotlight, .voucher-band) {
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  box-shadow: var(--pr-rest);
  background: var(--pr-surface);
  padding: clamp(1.15rem, .95rem + .7vw, 1.55rem);
  backdrop-filter: none;
}
body.site-flat.landing-tabs .lp-section :is(.card, .team-card):hover {
  box-shadow: var(--pr-lift);
  transform: translateY(-3px);
  border-color: #f0d389;
}
body.site-flat.landing-tabs .lp-section .program-spotlight {
  background: linear-gradient(135deg, #fff, var(--pr-wash-gold));
  border-color: #f2ddac;
  border-radius: var(--pr-r-lg);
}
body.site-flat.landing-tabs .lp-section .voucher-band {
  background: linear-gradient(135deg, var(--pr-wash-gold), #fff);
  border-color: #f2ddac;
  border-radius: var(--pr-r-lg);
}
/* Thẻ biểu mẫu trong dải đăng ký nằm trên nền navy — cần nổi hơn */
body.site-flat.landing-tabs .lp-section .register-band .form-card {
  border-color: rgba(255,255,255,.7);
  border-radius: var(--pr-r);
  box-shadow: 0 26px 52px -24px rgba(1,30,66,.6);
  padding: clamp(1.25rem, 1rem + .8vw, 1.75rem);
}

/* 23c. Ô biểu tượng — trả lại nền pha thay vì trong suốt */
body.site-flat.landing-tabs .lp-section :is(.icon-chip, .course-symbol, .skill-symbol) {
  border: 0;
  border-radius: var(--pr-r-sm);
  background: linear-gradient(140deg, #e9f1fb, #dbe8f7);
  color: #0a5faf;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 8px -4px rgba(10,27,51,.3);
}
body.site-flat.landing-tabs .lp-section :is(.program-icon, .voucher-icon) {
  border: 0;
  border-radius: var(--pr-r-sm);
  background: linear-gradient(140deg, #fff3d4, #f7d382);
  color: #7a5200;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
body.site-flat.landing-tabs .lp-section .feature-card:nth-child(2) .icon-chip,
body.site-flat.landing-tabs .lp-section .feature-card:nth-child(4) .icon-chip {
  background: linear-gradient(140deg, #fff3d4, #ffe9b4);
  color: #8a5e00;
}

/* 23d. Khung ảnh — bo góc và đổ bóng trở lại */
body.site-flat.landing-tabs .lp-section :is(.photo-frame, .trial-preview) {
  border-radius: var(--pr-r-lg);
  box-shadow: var(--pr-lift);
  overflow: hidden;
}
body.site-flat.landing-tabs .lp-section iframe { border-radius: var(--pr-r); }

/* ------------------------------------------------------------
   24. CHÂN TRANG TRÊN NỀN ẢNH (đăng nhập / đăng ký / xác thực)

   Nền trang là ảnh lớp học `fixed` nên chân trang phải có nền ĐỤC,
   không thì ảnh xuyên qua và chữ không đọc nổi.
   Cách làm: giữ nguyên bản chân trang sáng vốn có (#f8fbff) và chỉ
   chặn ảnh lại — an toàn hơn nhiều so với đổi màu từng dòng chữ,
   vì mọi màu chữ trong chân trang vẫn là màu đã được thiết kế cho nền sáng.
   ------------------------------------------------------------ */
body.guest.site-flat:has(.auth-card) .footer.guest-footer {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 60%, #eef4fc 100%);
  backdrop-filter: none;
  border-top: 0;
  box-shadow: 0 -18px 40px -24px rgba(1,24,54,.55);
}
/* Nẹp vàng–navy ngăn giữa ảnh và chân trang, cùng mô-típ với thẻ đăng nhập */
body.guest.site-flat:has(.auth-card) .footer.guest-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--blue-2, #01468c), #0a5faf 38%, var(--gold, #f5b60a) 74%, #ffd45e);
}

/* ------------------------------------------------------------
   25. CÁC THẺ NỀN TỐI TRONG TRANG KHÁCH
   `.side-book` (cạnh trang Tin tức) và `.post-book` (cạnh bài viết) đều
   được thiết kế nền navy, tiêu đề vàng, nhãn sáng. Quy tắc màu mực tối
   cho h1–h3 và <label> ở mục 3/14 phía trên có độ ưu tiên cao hơn nên
   làm chữ tối trên nền navy. Trả lại bộ màu sáng cho đúng nền của thẻ.
   ------------------------------------------------------------ */
body.guest main.container :is(.side-book, .post-book) {
  background:
    radial-gradient(420px 220px at 90% -20%, rgba(245,182,10,.24), transparent 62%),
    linear-gradient(160deg, #01468c 0%, #012a56 100%);
  border: 1px solid rgba(245,182,10,.3);
  border-radius: var(--pr-r);
  box-shadow: 0 18px 38px -20px rgba(1,30,66,.75);
}
body.guest main.container :is(.side-book, .post-book) :is(h1, h2, h3) { color: #ffd45e; }
body.guest main.container :is(.side-book, .post-book) :is(p, span, small, div, li) { color: #cfe0f4; }
body.guest main.container :is(.side-book, .post-book) label { color: #dbeafe; font-weight: 600; }
body.guest main.container :is(.side-book, .post-book) strong { color: #ffd45e; }
body.guest main.container :is(.side-book, .post-book) a { color: #ffd45e; }
body.guest main.container :is(.side-book, .post-book) :is(input, select, textarea) {
  background: rgba(255,255,255,.96);
  border-color: rgba(255,255,255,.45);
  color: var(--pr-ink);
}
body.guest main.container :is(.side-book, .post-book) :is(input, select, textarea)::placeholder { color: #7c8ca4; }
body.guest main.container :is(.side-book, .post-book) :is(input, select, textarea):focus {
  border-color: var(--gold, #f5b60a);
  box-shadow: 0 0 0 3px rgba(245,182,10,.35);
}
body.guest main.container :is(.side-book, .post-book) .btn-outline {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
body.guest main.container :is(.side-book, .post-book) .btn-gold,
body.guest main.container :is(.side-book, .post-book) .btn-gold :is(span, strong) { color: #241900; }

/* ------------------------------------------------------------
   26. LƯỚI KHÓA HỌC — hàng cuối căn giữa

   landing-v3.css đặt cứng `repeat(3, minmax(0,1fr))`. Đang có 5 khóa nên
   hàng dưới hụt một ô, lưới đọc ra như bị thiếu dữ liệu.
   Đổi sang flex-wrap + justify-content:center: bề ngang thẻ vẫn đúng 1/3
   như cũ, nhưng hàng cuối thiếu ô thì các thẻ còn lại nằm giữa, nhìn ra
   là có chủ đích. Cách này tự đúng với MỌI số khóa (admin thêm/bớt khóa
   trong LMS đều không phải sửa CSS lại).
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section table.public-course-table tbody {
  --pr-course-gap: 1.35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--pr-course-gap);
}
body.site-flat.landing-tabs .lp-section table.public-course-table tr {
  /* trừ 0.02px để sai số làm tròn không đẩy thẻ thứ 3 xuống hàng dưới */
  flex: 1 1 calc((100% - 2 * var(--pr-course-gap)) / 3 - .02px);
  max-width: calc((100% - 2 * var(--pr-course-gap)) / 3 - .02px);
}
@media (max-width: 1100px) {
  body.site-flat.landing-tabs .lp-section table.public-course-table tr {
    flex-basis: calc((100% - var(--pr-course-gap)) / 2 - .02px);
    max-width: calc((100% - var(--pr-course-gap)) / 2 - .02px);
  }
}
@media (max-width: 700px) {
  body.site-flat.landing-tabs .lp-section table.public-course-table tr {
    flex-basis: 100%;
    max-width: 100%;
  }
}

/* ------------------------------------------------------------
   27. KHỐI VIDEO HỌC THỬ (.trial-preview)

   style.css thiết kế khối này là ảnh lớp học phủ lớp tối, chữ trắng.
   Nhưng khi tab "Học thử" mở ra, section #hoc-thu được chuyển vào
   #panel-hoc-thu, và tab-pages-v1.css có
     body.landing-tabs #panel-hoc-thu :is(.trial-preview,…) { background: white }
   (có ID nên ưu tiên rất cao) → ảnh biến mất, chỉ còn lớp phủ tối đổ trên
   nền trắng thành một ô xám rỗng, chữ lại chìm.
   Trả lại ảnh nền + chữ sáng, và giữ nguyên khi giảng viên đã đăng video
   thật (lúc đó JS gắn class .has-demo-video và khối thành player).
   ------------------------------------------------------------ */
body.landing-tabs #panel-hoc-thu .trial-preview:not(.has-demo-video),
body.landing-tabs .lp-section .trial-preview:not(.has-demo-video) {
  background: #012f66 url('/assets/images/hero-speaking.webp') center / cover no-repeat;
  border: 0;
  border-radius: var(--pr-r-lg);
  overflow: hidden;
  box-shadow: var(--pr-lift);
}
body.landing-tabs #panel-hoc-thu .trial-preview:not(.has-demo-video)::before,
body.landing-tabs .lp-section .trial-preview:not(.has-demo-video)::before {
  background: linear-gradient(95deg, rgba(1,26,58,.95) 0%, rgba(1,34,72,.86) 46%, rgba(1,52,104,.38) 100%);
}
/* Chữ trên khối này luôn sáng — quy tắc màu mực tối cho h2/h3 ở mục 3 có
   ưu tiên cao hơn `.trial-preview h3` của style.css nên phải nói rõ ở đây. */
body.landing-tabs #panel-hoc-thu .trial-preview :is(h2, h3),
body.landing-tabs .lp-section .trial-preview :is(h2, h3) {
  color: #fff;
  text-transform: none;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem);
  letter-spacing: -.02em;
}
body.landing-tabs #panel-hoc-thu .trial-preview p,
body.landing-tabs .lp-section .trial-preview p { color: #dbeafe; }
body.landing-tabs #panel-hoc-thu .trial-preview .demo-kicker,
body.landing-tabs .lp-section .trial-preview .demo-kicker { color: #ffd45e; }
body.landing-tabs #panel-hoc-thu .trial-preview .btn,
body.landing-tabs .lp-section .trial-preview .btn {
  background: #fff;
  border-color: #fff;
  color: #01468c;
  box-shadow: 0 8px 20px -10px rgba(1,24,54,.8);
}
body.landing-tabs #panel-hoc-thu .trial-preview .btn:hover,
body.landing-tabs .lp-section .trial-preview .btn:hover {
  background: #ffd45e;
  border-color: #ffd45e;
  color: #241900;
}

/* ============================================================
   ĐỢT 2 (23/09) — icon, hero gọn lại, và các tab ra dáng LMS
   ============================================================ */

/* ------------------------------------------------------------
   28. HỆ ICON

   Bộ sprite `ui-icons.svg` vốn ổn (lưới 24px, nét 1.6, bo tròn đầu nét).
   Vấn đề nằm ở cách dùng:
   - đặt cỡ bằng `em` nên icon luôn bằng đúng cỡ chữ → trông nhỏ và yếu;
   - nét 1.6 trên lưới 24 khi thu về 13px chỉ còn ~0.87px → mờ, răng cưa;
   - trong menu, icon tô vàng còn chữ trắng → hai màu đánh nhau, đọc ra rối.
   Xử lý: dày nét lên theo cỡ, bật vẽ chính xác, và cho icon trong menu
   ăn theo màu chữ — vàng chỉ dành cho mục đang mở.
   ------------------------------------------------------------ */
body.landing-tabs .ui-icon,
body.guest .ui-icon {
  stroke-width: 1.8;
  shape-rendering: geometricPrecision;
  vertical-align: -.16em;
}
/* Icon càng nhỏ càng phải dày nét thì mới ra hình */
body.landing-tabs :is(.lp-menu, .tab-tags, .footer-col, .guest-footer, .skill-card-bottom) .ui-icon,
body.guest :is(.lp-menu, .tab-tags, .footer-col, .guest-footer, .skill-card-bottom) .ui-icon {
  stroke-width: 2;
}

/* Menu: icon cùng màu chữ, mờ hơn một chút — thành ký hiệu phụ trợ
   chứ không tranh chỗ với nhãn. */
body.landing-tabs .lp-menu a .ui-icon,
body.guest .lp-menu a .ui-icon {
  width: 15px; height: 15px; flex: 0 0 15px;
  color: currentColor;
  opacity: .72;
  transition: opacity .16s var(--pr-ease);
}
body.landing-tabs .lp-menu a:hover .ui-icon,
body.guest .lp-menu a:hover .ui-icon { opacity: .95; }
body.landing-tabs .lp-menu a[aria-selected="true"] .ui-icon,
body.landing-tabs .lp-menu a.on .ui-icon,
body.guest .lp-menu a.on .ui-icon { color: #ffd45e; opacity: 1; }

/* Ô icon lớn: to hơn, nền pha đậm hơn, icon dày nét — nhìn ra là một
   ký hiệu có chủ đích chứ không phải hình mờ dán vào góc thẻ. */
body.site-flat.landing-tabs .lp-section :is(.icon-chip, .course-symbol, .learning-icon),
body.landing-tabs :is(.skill-symbol, .program-icon, .voucher-icon, .trial-play) {
  width: 50px; height: 50px; flex: 0 0 50px;
  border: 0; border-radius: 15px;
  display: grid; place-items: center;
}
body.site-flat.landing-tabs .lp-section :is(.icon-chip, .course-symbol, .learning-icon) .ui-icon,
body.landing-tabs :is(.skill-symbol, .program-icon, .voucher-icon) .ui-icon {
  width: 23px; height: 23px;
  stroke-width: 1.9;
}

/* ------------------------------------------------------------
   29. HERO — đã cắt bớt nội dung trong HTML, đây là phần trình bày
   Bỏ: danh sách 3 gạch đầu dòng (nói lại ý câu dẫn ngay trên),
   nút "Tạo tài khoản" (trùng vai với nút Đăng nhập ở thanh đầu trang),
   3 hộp thông tin (gộp thành một dòng), và 1 trong 3 thẻ nổi trên ảnh.
   ------------------------------------------------------------ */
body.landing-tabs .lp-hero .lead { margin-bottom: 1.9rem; }
body.landing-tabs .hero-ctas { gap: .65rem; }

body.landing-tabs .hero-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem;
  margin: 1.75rem 0 0;
  font-size: .92rem; color: #b9d2ec;
}
body.landing-tabs .hero-meta .ui-icon {
  width: 1.02rem; height: 1.02rem; flex: 0 0 auto;
  color: #ffd45e; opacity: .9;
}
body.landing-tabs .hero-meta a {
  color: #fff; font-weight: 700; letter-spacing: .015em;
  font-variant-numeric: tabular-nums;
}
body.landing-tabs .hero-meta a:hover { color: #ffd45e; text-decoration: none; }
/* Mỗi cặp icon + chữ là một khối không tách rời, nếu không thì khi xuống
   dòng trên điện thoại icon sẽ đứng lại một mình ở cuối dòng trên. */
body.landing-tabs .hero-meta-item {
  display: inline-flex; align-items: center; gap: .42rem;
  white-space: nowrap;
}
body.landing-tabs .hero-meta-sep {
  width: 4px; height: 4px; flex: 0 0 4px; border-radius: 999px;
  background: rgba(255,255,255,.34); margin-inline: .45rem;
}
@media (max-width: 560px) {
  body.landing-tabs .hero-meta { flex-direction: column; align-items: flex-start; gap: .45rem; }
  body.landing-tabs .hero-meta-sep { display: none; }
}

/* Hai thẻ nổi còn lại: xếp lại cho cân, một trên một dưới */
@media (min-width: 1000px) {
  body.landing-tabs .hero-proof .proof-3 { right: 3%; top: 13%; bottom: auto; animation-delay: -1.2s; }
  body.landing-tabs .hero-proof .proof-2 { right: 9%; bottom: 15%; top: auto; animation-delay: -3.6s; }
  /* Icon thẻ "Học thử 7 ngày" đang màu xanh lá — đưa về vàng thương hiệu */
  body.landing-tabs .hero-proof .proof-3 .proof-ico {
    background: linear-gradient(135deg, #fff3d4, #f7d382);
    color: #7a5200;
  }
  body.landing-tabs .hero-proof .proof {
    border-radius: 18px;
    box-shadow: 0 26px 50px -18px rgba(1,24,54,.55);
  }
}

/* ------------------------------------------------------------
   30. THẺ KỸ NĂNG Ở TAB LUYỆN THI

   Bản cũ: icon nhỏ nhạt nằm một mình trên cùng, rồi một khoảng trống to,
   rồi mới tới tiêu đề. Thẻ cao nhất kéo các thẻ còn lại giãn ra nên
   khoảng trống đó càng rõ — đọc ra là thẻ rỗng, không ra một hệ thống học.
   Bản mới: icon đứng CẠNH tiêu đề (một dòng tiêu đề rõ ràng), phần mô tả
   nhận hết chỗ thừa, chân thẻ luôn nằm sát đáy nên các thẻ thẳng hàng nhau.
   Số bài luyện tách ra thành một nhãn đếm được, vì đó là thứ học viên
   thực sự tìm khi chọn kỹ năng.
   ------------------------------------------------------------ */
body.landing-tabs .exam-skill-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "ico  head"
    "body body"
    "foot foot";
  column-gap: 14px;
  align-items: stretch;
  padding: 22px 22px 18px;
  border-radius: var(--pr-r);
  border-color: var(--pr-line);
  box-shadow: var(--pr-rest);
}
body.landing-tabs .exam-skill-card .skill-symbol { grid-area: ico; align-self: center; }
body.landing-tabs .exam-skill-card h3 {
  grid-area: head; align-self: center;
  margin: 0;
  font-size: 1.12rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--pr-ink);
}
body.landing-tabs .exam-skill-card p {
  grid-area: body; align-self: start;
  margin: 15px 0 18px;
  font-size: .9rem; line-height: 1.65;
  color: var(--pr-muted);
}
body.landing-tabs .exam-skill-card .skill-card-bottom {
  grid-area: foot;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid var(--pr-line-soft);
  color: #0d4b85;
  font-size: .82rem;
}
/* Số bài luyện là con số học viên tìm — cho nó một nhãn đếm được */
body.landing-tabs .exam-skill-card [data-practice-count] {
  display: inline-flex; align-items: center;
  padding: .22rem .6rem .28rem;
  border-radius: 999px;
  background: #eaf2fc;
  color: #0d4b85;
  font-weight: 700; font-size: .78rem;
  font-variant-numeric: tabular-nums;
}
body.landing-tabs .exam-skill-card .ui-icon { transition: transform .18s var(--pr-ease); }
body.landing-tabs .exam-skill-card:hover .skill-card-bottom .ui-icon { transform: translateX(4px); }

/* Hai sắc thương hiệu xen kẽ, thay vì mọi thẻ một màu xanh nhạt như nhau */
body.landing-tabs .exam-skill-card .skill-symbol {
  background: linear-gradient(140deg, #dfeafa, #c3d9f3);
  color: #0a4d8c;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px -5px rgba(10,27,51,.45);
}
body.landing-tabs .exam-skill-card:nth-child(2n) .skill-symbol {
  background: linear-gradient(140deg, #ffeec2, #f3cf86);
  color: #7a5200;
}
body.landing-tabs .exam-skill-card:hover {
  border-color: #f0d389;
  box-shadow: var(--pr-lift);
  transform: translateY(-4px);
}

/* ------------------------------------------------------------
   31. CÁC KHỐI CÒN LẠI Ở TAB LUYỆN THI
   ------------------------------------------------------------ */
/* Bộ thi thử: từ dải trắng mỏng thành một khối có sức nặng, vì đây là
   hành động "làm bài hoàn chỉnh" — bậc cao nhất trong trang luyện tập. */
body.landing-tabs .mock-test-banner {
  gap: 20px;
  padding: 22px 24px;
  border: 1px solid rgba(245,182,10,.3);
  border-radius: var(--pr-r);
  background:
    radial-gradient(520px 200px at 88% 0%, rgba(245,182,10,.16), transparent 70%),
    linear-gradient(120deg, #01468c, #012a56);
  box-shadow: 0 20px 40px -22px rgba(1,30,66,.8);
}
body.landing-tabs .mock-test-banner h3 { color: #fff; font-size: 1.06rem; letter-spacing: -.015em; }
body.landing-tabs .mock-test-banner p { color: #b9d2ec; }
body.landing-tabs .mock-test-banner .skill-symbol {
  background: rgba(255,255,255,.14);
  color: #ffd45e;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
body.landing-tabs .mock-test-banner .btn-outline {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
body.landing-tabs .mock-test-banner .btn-outline:hover {
  background: #ffd45e; border-color: #ffd45e; color: #241900;
}

/* Thẻ Speaking bên phải đầu tab: đang là một ô viền trống */
body.landing-tabs .practice-hero-note {
  gap: 10px;
  padding: 22px;
  border-radius: var(--pr-r);
  border-color: rgba(245,182,10,.4);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
body.landing-tabs .practice-hero-note strong { font-size: 1.35rem; letter-spacing: -.02em; }

/* Các Part của Speaking: đọc ra là một trình tự có thứ tự */
body.landing-tabs .speaking-parts > div {
  padding: 13px 16px;
  transition: border-color .16s var(--pr-ease), box-shadow .16s var(--pr-ease);
}
body.landing-tabs .speaking-parts > div:hover {
  border-color: #f0d389;
  box-shadow: var(--pr-rest);
}
body.landing-tabs .speaking-parts > div > span {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: 9px;
  background: var(--pr-wash-gold);
  color: #8a5e00;
  font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Nút chọn IELTS / APTIS: rõ là một công tắc hai trạng thái */
body.landing-tabs .exam-switch {
  padding: 4px;
  border: 1px solid var(--pr-line);
  background: #eaeff6;
}
body.landing-tabs .exam-switch button {
  padding: 10px 26px;
  font-size: .88rem;
  transition: background-color .16s var(--pr-ease), color .16s var(--pr-ease), box-shadow .16s var(--pr-ease);
}
body.landing-tabs .exam-switch button[aria-selected="true"] {
  background: linear-gradient(180deg, #ffffff, #f4f8fd);
  color: var(--blue-2, #01468c);
  box-shadow: 0 1px 2px rgba(10,27,51,.1), 0 4px 10px -4px rgba(10,27,51,.3);
}

/* Dòng "Đăng nhập để lưu tiến độ": biến lời nhắc trôi nổi thành một
   dải mời đăng nhập rõ ràng — đúng vai của nó trong một hệ thống học. */
body.landing-tabs .practice-account-note {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin-top: 26px; padding: 14px 18px;
  border: 1px dashed var(--pr-line-strong);
  border-radius: var(--pr-r-sm);
  background: #fff;
  color: var(--pr-muted);
  font-size: .88rem;
}
body.landing-tabs .practice-account-note .ui-icon { color: #0a5faf; }

/* ------------------------------------------------------------
   32. ĐẦU CÁC TAB — bớt lặp, chặt hơn
   ------------------------------------------------------------ */
body.landing-tabs .tab-intro { padding: 38px 0 36px; }
body.landing-tabs .tab-intro h2 { margin: 10px 0 12px; }
body.landing-tabs .tab-tags { gap: 8px 18px; margin-top: 18px; }
body.landing-tabs .tab-tags span {
  gap: 7px;
  color: #cfe0f4;
  font-size: .8rem;
}
body.landing-tabs .tab-tags .ui-icon { width: 15px; height: 15px; color: #ffd45e; }

/* ------------------------------------------------------------
   33. THỐNG NHẤT MÀU Ô ICON

   landing-v3.css rải 5 sắc rời rạc cho các ô icon, trong đó xanh lá
   (#067647) và tím (#6d28d9) không có trong hệ màu logo:
     .feature-card:nth-child(3) .icon-chip  → xanh lá !important
     .feature-card:nth-child(4) .icon-chip  → tím    !important
     .learning-item:nth-child(2) .learning-icon → xanh lá !important
   Năm màu không liên quan nhau nằm cạnh nhau là lý do chính khiến
   phần icon nhìn rời rạc. Đưa tất cả về nhịp hai sắc thương hiệu
   (navy ↔ vàng) xen kẽ. Phải dùng !important vì bản gốc đã dùng.
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section :is(.feature-card, .learning-item):nth-child(odd) :is(.icon-chip, .learning-icon) {
  background: linear-gradient(140deg, #dfeafa, #c3d9f3) !important;
  color: #0a4d8c !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 4px 10px -5px rgba(10,27,51,.45) !important;
}
body.site-flat.landing-tabs .lp-section :is(.feature-card, .learning-item):nth-child(even) :is(.icon-chip, .learning-icon) {
  background: linear-gradient(140deg, #ffeec2, #f3cf86) !important;
  color: #7a5200 !important;
  border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px -5px rgba(138,94,0,.4) !important;
}

/* Nút play của khối video học thử: giữ vàng, chỉ chỉnh cho cân với ô icon mới */
body.site-flat.landing-tabs .lp-section .trial-play {
  border: 0;
  background: linear-gradient(140deg, #ffd34a, #f5b60a 55%, #dc9f04);
  color: #241900;
  box-shadow: 0 0 0 8px rgba(255,255,255,.14), 0 10px 22px -10px rgba(245,182,10,.9);
}
body.site-flat.landing-tabs .lp-section .trial-play .ui-icon { width: 24px; height: 24px; stroke-width: 2; }

/* Bậc lộ trình 01–04 ở khối Học thử: nhãn số là thông tin thứ tự, cho nó
   đúng dáng một nhãn bước thay vì một viên vàng trôi nổi */
body.site-flat.landing-tabs .lp-section .assessment-step .step-no {
  display: inline-flex; align-items: center;
  letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   ĐỢT 3 (23/09) — vá lỗi thật + dựng timeline
   ============================================================ */

/* ------------------------------------------------------------
   34. FAQ: HAI DẤU CHỈ BÁO CHỒNG NHAU

   Markup đã có sẵn một icon chevron thật trong <summary>:
     <svg class="ui-icon faq-toggle"><use ...#icon-chevron-right">
   và content-layout.css đã định vị nó (phải, xoay 90° thành mũi xuống).
   Nhưng index.html còn một rule cũ `.faq summary::after { content: "+" }`
   vẽ THÊM một dấu cộng ở đúng chỗ đó. Mục 12 của file này lại biến dấu
   cộng ấy thành vòng tròn vàng → hai dấu chồng lên nhau, rất rõ.
   Giữ chevron (là icon thật, xoay được khi mở), bỏ hẳn dấu cộng.
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section .faq summary::after,
body.landing-tabs .faq summary::after { content: none !important; display: none !important; }

body.site-flat.landing-tabs .lp-section .faq summary {
  padding-right: 2.6rem;
  gap: .75rem;
}
body.site-flat.landing-tabs .lp-section .faq .faq-toggle {
  position: absolute; right: 0; top: 50%;
  width: 28px; height: 28px; padding: 5px;
  border-radius: 999px;
  background: var(--pr-wash-gold);
  box-shadow: inset 0 0 0 1px #f0d389;
  color: #8a5e00;
  stroke-width: 2.2;
  transform: translateY(-50%) rotate(90deg);
  transition: transform .2s var(--pr-ease), background-color .2s var(--pr-ease);
}
body.site-flat.landing-tabs .lp-section .faq details[open] .faq-toggle {
  transform: translateY(-50%) rotate(-90deg);
  background: #f7dfa6;
}

/* ------------------------------------------------------------
   35. DẢI SỐ LIỆU KHÔNG CÒN ĐÈ LÊN MÉP HERO

   Mục 8 kéo dải số liệu lên đè vào hero. Nhưng dải chỉ rộng bằng khung
   nội dung, nên hai bên trái/phải của nó lộ ra đúng đường cắt ngang nơi
   hero kết thúc — một vạch ngang chạy hết bề ngang trang, nhìn như lỗi.
   Bỏ phần đè, để dải nằm hẳn dưới hero.
   ------------------------------------------------------------ */
body.landing-tabs .lp-strip {
  margin-top: 0;
  padding-top: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
}

/* ------------------------------------------------------------
   36. TRANG TIN TỨC: KHOẢNG TRẮNG GIỮA THANH ĐẦU TRANG VÀ HERO

   style.css cố ý cho `.page-blog main.container { padding: 0 0 2.5rem }`
   để dải hero chạy sát thanh đầu trang. Mục 18 thêm `padding-block` cho
   mọi trang khách nên đẩy hero xuống, hở một vệt trắng. Trừ trang blog ra.
   ------------------------------------------------------------ */
body.guest.page-blog main.container { padding-block: 0 2.5rem; }

/* ------------------------------------------------------------
   37. NÉT MÀU TRÊN ĐẦU THẺ KHÓA HỌC

   Mục 11 vẽ nét này bằng `::before` với `inset: 0 0 auto`. Phần tử định
   vị tuyệt đối lấy mốc là HỘP PADDING của thẻ, mà thẻ có padding 1.6rem,
   nên nét bị thụt vào hai bên thay vì chạy hết bề ngang.
   Vẽ bằng background-image với `background-origin: border-box` thì nét
   bám đúng mép thẻ, không phụ thuộc padding.
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section table.public-course-table tr::before { content: none; }
body.site-flat.landing-tabs .lp-section table.public-course-table tr {
  background-color: #fff;
  background-image: linear-gradient(90deg, var(--gold, #f5b60a), #f0c24d 38%, rgba(245,182,10,0) 88%);
  background-repeat: no-repeat;
  background-size: 100% 3px;
  background-position: top left;
  background-origin: border-box;
}
body.site-flat.landing-tabs .lp-section table.public-course-table tr:nth-child(2n) {
  background-image: linear-gradient(90deg, #0a5faf, #6aa6e0 38%, rgba(10,95,175,0) 88%);
}

/* ------------------------------------------------------------
   38. TIMELINE — "3 BƯỚC LÀ VÀO LỚP" và "4 GIAI ĐOẠN ĐÁNH GIÁ"

   Cả hai khối đều là một TRÌNH TỰ có thứ tự thật (bước 1→2→3, và
   đầu vào → định kỳ → đầu ra → luyện thêm), nên đường nối là thứ nói
   đúng nội dung chứ không phải trang trí. Bỏ khung thẻ, dựng thành
   timeline ngang: nút số nằm trên một đường nét đứt chạy suốt hàng.

   Cách vẽ: đường nối nằm ở ::before của CẢ HÀNG, các nút có nền đặc và
   z-index cao hơn nên tự che phần đường chạy qua dưới chúng. Nhờ vậy
   không cần biết trước bề ngang từng nút (nhãn "01 · XẾP LỚP" dài ngắn
   khác nhau vẫn đúng).
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section :is(.join-grid, .assessment-flow) {
  --pr-tl-gap: 1.6rem;
  position: relative;
  isolation: isolate;
  gap: var(--pr-tl-gap);
  margin-top: 2.2rem;
}
body.site-flat.landing-tabs .lp-section :is(.join-grid, .assessment-flow)::before {
  content: "";
  position: absolute;
  left: 0;
  height: 2px;
  z-index: 0;
  background: repeating-linear-gradient(90deg, #e0c894 0 7px, rgba(224,200,148,0) 7px 15px);
}
/* Đường dừng ở cột cuối, không chạy quá nút cuối cùng */
body.site-flat.landing-tabs .lp-section .join-grid::before {
  top: 22px;
  right: calc((100% - 2 * var(--pr-tl-gap)) / 3);
}
body.site-flat.landing-tabs .lp-section .assessment-flow::before {
  top: 14px;
  right: calc((100% - 3 * var(--pr-tl-gap)) / 4);
}

/* Mỗi bước: bỏ khung thẻ, chỉ còn nút + chữ */
body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) {
  position: relative;
  z-index: 1;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step):hover {
  transform: none;
  box-shadow: none;
  border-color: transparent;
}
/* Số mờ cỡ lớn ở nền thẻ cũ không còn chỗ đứng khi đã bỏ khung */
body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step::after { display: none; }

/* Nút số của "3 bước" */
body.site-flat.landing-tabs .lp-section .join-grid .route-step .num {
  position: relative;
  z-index: 1;
  width: 44px; height: 44px;
  margin: 0 0 1rem;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 1.08rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffd34a, var(--gold, #f5b60a) 55%, #dc9f04);
  color: #241900;
  border: 0;
  box-shadow: 0 0 0 5px #fffdf7, 0 8px 18px -8px rgba(245,182,10,.9);
}
/* Nhãn bước của "4 giai đoạn" — chính nó là nút trên đường timeline */
body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step .step-no {
  position: relative;
  z-index: 1;
  margin: 0 0 .85rem;
  box-shadow: 0 0 0 5px #ffffff;
}
body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) h3 {
  margin: 0 0 .35rem;
  text-transform: none;
  font-size: 1.04rem;
  letter-spacing: -.012em;
  color: var(--pr-ink);
}
body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) p {
  margin: 0;
  color: var(--pr-muted);
  font-size: .93rem;
  line-height: 1.65;
  max-width: 30ch;
}

/* Điện thoại: timeline xoay dọc, đường nối chạy bên trái */
@media (max-width: 760px) {
  body.site-flat.landing-tabs .lp-section :is(.join-grid, .assessment-flow) {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  body.site-flat.landing-tabs .lp-section :is(.join-grid, .assessment-flow)::before { display: none; }
  body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    grid-template-areas: "node title" "node desc";
  }
  body.site-flat.landing-tabs .lp-section .join-grid .route-step .num,
  body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step .step-no {
    grid-area: node;
    margin: 0;
    align-self: start;
  }
  body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) h3 { grid-area: title; }
  body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) p {
    grid-area: desc;
    max-width: none;
  }
  /* Đường nối dọc nối nút của bước này xuống bước kế */
  body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step)::before {
    content: "";
    display: block;
    position: absolute;
    left: 21px; top: 50px; bottom: -1.4rem;
    width: 2px;
    background: repeating-linear-gradient(180deg, #e0c894 0 7px, rgba(224,200,148,0) 7px 15px);
  }
  body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step:last-child, .assessment-flow .assessment-step:last-child)::before { display: none; }
  body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step::before { left: 12px; top: 34px; }
}

/* ------------------------------------------------------------
   39. SIẾT LẠI MÀU CHỮ TRÊN NỀN TỐI

   Mọi <a> trên hero/khối navy phải sáng. Quy tắc gốc `a { color: var(--primary) }`
   là navy #01468c — trùng luôn với nền, nên bất kỳ link nào lọt vào khối tối
   mà chưa được chỉ định màu sẽ biến mất. Ghi đè ở độ ưu tiên đủ cao cho
   TẤT CẢ khối nền tối, thay vì chỉ định từng chỗ một.
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-hero :is(a, .hero-meta a),
body.landing-tabs .lp-hero .hero-meta a,
body.landing-tabs .lp-hero .hero-meta a:visited {
  color: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.site-flat.landing-tabs .lp-hero .hero-meta a:hover,
body.landing-tabs .lp-hero .hero-meta a:hover { color: #ffd45e; }
/* Nút trong hero vẫn giữ màu chữ riêng của nút */
body.site-flat.landing-tabs .lp-hero a.btn { color: inherit; }
body.site-flat.landing-tabs .lp-hero a.btn-gold { color: #241900; }
body.site-flat.landing-tabs .lp-hero .hero-meta .ui-icon { color: #ffd45e; opacity: .95; }

/* Cùng lý do, cho các khối navy khác của trang công khai */
body.site-flat.landing-tabs :is(.tab-intro, .register-band, .mock-test-banner) a:not(.btn) { color: #ffd45e; }
body.site-flat.guest .blog-hero a:not(.btn) { color: #ffd45e; }

/* ------------------------------------------------------------
   40. KHỐI BÊN PHẢI Ở ĐẦU CÁC TAB

   Trước đây bên phải chỉ có đúng một nút vàng đứng trơ giữa mảng navy
   rộng — không cân, cũng không nói thêm được gì. Nay là một khối hành
   động thật: hai lối đi hợp với từng tab + hotline. Mọi liên kết đều là
   trang đã có sẵn, không bịa nội dung mới.
   ------------------------------------------------------------ */
body.landing-tabs .tab-intro-aside {
  flex: 0 0 auto;
  width: min(100%, 288px);
  gap: 10px;
  padding: 20px;
  border: 1px solid rgba(245,182,10,.38);
  border-radius: var(--pr-r);
  background: rgba(255,255,255,.09);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 22px 44px -26px rgba(1,24,54,.9);
}
body.landing-tabs .tab-intro-aside > span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #ffd45e;
}
body.landing-tabs .tab-intro-aside .btn {
  align-self: stretch;
  justify-content: center;
  min-height: 44px;
  border-radius: var(--pr-r-sm);
  font-size: .9rem;
}
body.landing-tabs .tab-intro-aside .btn-outline {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.42);
  color: #fff;
  box-shadow: none;
}
body.landing-tabs .tab-intro-aside .btn-outline:hover {
  background: rgba(255,255,255,.2);
  border-color: #ffd45e;
  color: #ffd45e;
}
body.landing-tabs .tab-intro-aside .tab-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 4px;
  font-size: 1.24rem; font-weight: 800; letter-spacing: .015em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
body.landing-tabs .tab-intro-aside .tab-phone .ui-icon { width: 17px; height: 17px; color: #ffd45e; }
body.landing-tabs .tab-intro-aside .tab-phone:hover { color: #ffd45e; text-decoration: none; }
body.landing-tabs .tab-intro-aside small {
  color: #a8c4e0;
  font-size: .76rem;
}
/* Tab Liên hệ đã có sẵn khối này từ trước — cho khớp dáng mới */
body.landing-tabs #panel-lien-he .tab-intro-aside > span { color: #ffd45e; }

@media (max-width: 900px) {
  body.landing-tabs .tab-intro > .tab-container { flex-direction: column; align-items: stretch; }
  body.landing-tabs .tab-intro-aside { width: 100%; }
}

/* ------------------------------------------------------------
   41. TIMELINE — CHO CẢ KHI KHỐI NẰM TRONG TAB

   site-tabs-v1.js chuyển các section của trang chủ vào đúng panel của
   từng tab. Khi đó tab-pages-v1.css ăn vào bằng selector CÓ ID:
     #panel-khoa-hoc :is(.program-spotlight,.route-step) { border; background:white; padding:24px }
     #panel-hoc-thu  .assessment-step { padding:20px }
   Một ID thắng mọi số lượng class, nên khung thẻ trắng vẫn còn và đè lên
   đường timeline (các bước có z-index cao hơn). Vì vậy phải viết lại đúng
   hai chỗ đó kèm ID thì mới gỡ được khung.

   Cũng bỏ luôn vòng sáng quanh nút: nền khối ở trang chủ và trong tab khác
   nhau (#fffdf7 vs #f5f8fa) nên không có màu vòng nào đúng cả hai nơi.
   Bản thân nút đã có nền đặc, tự che đoạn đường chạy qua dưới nó.
   ------------------------------------------------------------ */
body.landing-tabs #panel-khoa-hoc .join-grid .route-step,
body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}
body.landing-tabs #panel-khoa-hoc .join-grid .route-step:hover,
body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step:hover {
  transform: none;
  box-shadow: none;
}
body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step::after { display: none; }

body.site-flat.landing-tabs .lp-section .join-grid .route-step .num,
body.landing-tabs #panel-khoa-hoc .join-grid .route-step .num {
  box-shadow: 0 8px 18px -8px rgba(245,182,10,.9);
}
body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step .step-no,
body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step .step-no {
  box-shadow: none;
}

/* Vệt tròn vàng trang trí ở góc thẻ "3 bước" (landing-v3: .route-step::after)
   vốn bị khung thẻ cắt gọn. Bỏ khung rồi thì nó trôi tự do thành mấy đốm mờ
   giữa timeline — bỏ hẳn. */
body.site-flat.landing-tabs .lp-section .join-grid .route-step::after,
body.landing-tabs #panel-khoa-hoc .join-grid .route-step::after { content: none; display: none; }

/* ------------------------------------------------------------
   42. DẢI SỐ LIỆU — BỎ MẢNG XÁM VÀ KHUNG THẺ

   Mục 35 đã gỡ phần đè lên hero, nhưng dải vẫn nằm trên nền xám của trang
   (#f6f8fc) trong khi khối ngay dưới nó là nền trắng → thành một băng xám
   với một thẻ trắng lửng lơ giữa, đọc ra là khoảng trống thừa.
   Cho cả dải nằm thẳng trên nền trắng, bỏ khung thẻ, chỉ giữ các vạch
   ngăn giữa bốn số liệu và một kẻ mảnh khép dải lại.
   ------------------------------------------------------------ */
body.landing-tabs .lp-strip {
  background: #fff;
  margin-top: 0;
  padding-block: clamp(1.7rem, 1.2rem + 1.7vw, 2.6rem);
  border-bottom: 1px solid var(--pr-line-soft);
}
body.landing-tabs .lp-strip > .inner {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.landing-tabs .lp-strip .lp-stat { border-left-color: var(--pr-line-soft); }
/* Khối ngay sau dải cũng trắng thì hai bên nối liền, không còn mối nối lộ ra */
body.landing-tabs .lp-strip + .lp-section { background: #fff; border-top: 0; }

/* ------------------------------------------------------------
   43. TIMELINE — CĂN GIỮA VÀ DÀY DẶN HƠN

   Bản trước căn trái nên lệch hẳn với tiêu đề khối vốn căn giữa, lại chỉ
   có một chấm nhỏ với hai dòng chữ nên nhìn trống trải. Nay mỗi bước là
   một cụm căn giữa: nút số lớn có vòng sáng, tiêu đề rõ, mô tả gọn trong
   một bề ngang dễ đọc. Đường nối chạy từ tâm nút đầu tới tâm nút cuối.
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section :is(.join-grid, .assessment-flow) {
  --pr-tl-gap: 1.6rem;
  margin-top: 2.6rem;
}
body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step),
body.landing-tabs #panel-khoa-hoc .join-grid .route-step,
body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Đường nối: từ tâm cột đầu tới tâm cột cuối */
body.site-flat.landing-tabs .lp-section .join-grid::before {
  top: 27px;
  left: calc((100% - 2 * var(--pr-tl-gap)) / 6);
  right: calc((100% - 2 * var(--pr-tl-gap)) / 6);
}
body.site-flat.landing-tabs .lp-section .assessment-flow::before {
  top: 15px;
  left: calc((100% - 3 * var(--pr-tl-gap)) / 8);
  right: calc((100% - 3 * var(--pr-tl-gap)) / 8);
}

/* Nút số: to hơn, có vòng sáng tách khỏi đường nối */
body.site-flat.landing-tabs .lp-section .join-grid .route-step .num,
body.landing-tabs #panel-khoa-hoc .join-grid .route-step .num {
  width: 54px; height: 54px;
  margin: 0 auto 1.15rem;
  font-size: 1.22rem;
  box-shadow: 0 0 0 6px rgba(255,255,255,.92), 0 10px 22px -9px rgba(245,182,10,.95);
}
body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step .step-no,
body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step .step-no {
  margin: 0 auto .95rem;
  box-shadow: 0 0 0 6px rgba(255,255,255,.92);
}

body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) h3 {
  font-size: 1.1rem;
  font-weight: 750;
  margin: 0 0 .45rem;
}
body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) p {
  margin-inline: auto;
  max-width: 27ch;
  font-size: .94rem;
}

/* Điện thoại: quay về hàng dọc, căn trái cho dễ đọc */
@media (max-width: 760px) {
  body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step),
  body.landing-tabs #panel-khoa-hoc .join-grid .route-step,
  body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step {
    display: grid;
    text-align: left;
    align-items: start;
  }
  body.site-flat.landing-tabs .lp-section .join-grid .route-step .num,
  body.landing-tabs #panel-khoa-hoc .join-grid .route-step .num {
    width: 44px; height: 44px; margin: 0; font-size: 1.05rem;
    box-shadow: 0 8px 18px -8px rgba(245,182,10,.9);
  }
  body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step .step-no,
  body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step .step-no { margin: 0; box-shadow: none; }
  body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) p {
    margin-inline: 0; max-width: none;
  }
}

/* Mô tả từng bước căn giữa thì phải cân dòng, không thì hay rớt lại một
   từ lẻ ở dòng cuối. */
body.site-flat.landing-tabs .lp-section :is(.join-grid .route-step, .assessment-flow .assessment-step) p {
  text-wrap: balance;
}

/* ------------------------------------------------------------
   44. TRẢ LẠI NÚT .btn-primary VỀ ĐÚNG MÀU VÀNG CỦA DỰ ÁN

   LỖI DO MỤC 5 GÂY RA: trong dự án này `.btn-primary` vốn là nút VÀNG
   chữ đậm (`style.css:233` — nền gradient gold, `color: var(--on-gold)`),
   còn navy đã có class riêng là `.btn-navy`. Mục 5 đổi nền `.btn-primary`
   sang navy nhưng KHÔNG đổi màu chữ, nên chữ #1f1400 nằm trên nền navy →
   chìm hẳn. Thấy rõ nhất ở nút "Đăng nhập" của trang đăng nhập và nút
   "Bắt đầu làm bài test" ở trang test trình độ.

   Sửa đúng gốc: bỏ hẳn phần đổi sang navy, giữ nút vàng như thiết kế cũ,
   chỉ áp lớp gradient + gờ sáng cho khớp với `.btn-gold`.
   ------------------------------------------------------------ */
body.landing-tabs .btn-primary,
body.guest .btn-primary {
  background: linear-gradient(180deg, #ffd34a 0%, var(--gold, #f5b60a) 46%, #dc9f04 100%);
  border-color: #c98f03;
  color: #241900;
  font-weight: 700;
  box-shadow: var(--pr-glow), var(--pr-inset-top);
}
body.landing-tabs .btn-primary:hover,
body.guest .btn-primary:hover {
  background: linear-gradient(180deg, #ffdc6b 0%, #f9c01f 46%, #c88b02 100%);
  border-color: #c98f03;
  color: #241900;
  box-shadow: 0 14px 30px -10px rgba(245,182,10,.72), var(--pr-inset-top);
  transform: translateY(-1px);
}
body.landing-tabs .btn-primary .ui-icon,
body.guest .btn-primary .ui-icon { color: #241900; }

/* Nút navy vẫn là .btn-navy — giữ nguyên vai trò, chỉ chỉnh cho đồng bộ */
body.landing-tabs .btn-navy,
body.guest .btn-navy {
  background: linear-gradient(180deg, #0a5faf 0%, #01468c 58%, #013b78 100%);
  border-color: #013369;
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(1,70,140,.7), var(--pr-inset-top);
}

/* ------------------------------------------------------------
   45. DẢI SỐ LIỆU THÀNH 4 Ô RIÊNG

   Mục 42 gỡ khung thẻ nên bốn số liệu chỉ còn ngăn nhau bằng vạch dọc,
   nhìn trơ. Nay mỗi số liệu là một ô riêng: nền trắng ngả xanh rất nhạt,
   viền mảnh, bo góc, có đổ bóng nhẹ. Khối vẫn nằm trên nền trắng nên
   KHÔNG quay lại tình trạng băng xám trước đó.
   ------------------------------------------------------------ */
body.landing-tabs .lp-strip > .inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body.landing-tabs .lp-strip .lp-stat {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding: 1.35rem 1.3rem 1.25rem;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
  box-shadow: var(--pr-rest);
  transition: transform .2s var(--pr-ease), box-shadow .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
body.landing-tabs .lp-strip .lp-stat:hover {
  transform: translateY(-3px);
  border-color: #f0d389;
  box-shadow: var(--pr-lift);
}
body.landing-tabs .lp-strip .lp-stat strong { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.2rem); }
body.landing-tabs .lp-strip .lp-stat span { color: var(--pr-body); font-weight: 600; }
body.landing-tabs .lp-strip .lp-stat em { color: var(--pr-faint); }

@media (max-width: 900px) {
  body.landing-tabs .lp-strip > .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
}
@media (max-width: 480px) {
  body.landing-tabs .lp-strip > .inner { grid-template-columns: 1fr 1fr; gap: .7rem; }
  body.landing-tabs .lp-strip .lp-stat { padding: 1rem .95rem; }
}

/* ------------------------------------------------------------
   46. LƯỚI KHÓA HỌC — BỎ TẤM NỀN SAU LƯNG

   `tab-pages-v1.css:68` cho chính thẻ <table> một tấm nền trắng có viền và
   bo góc: `#panel-khoa-hoc .public-course-table{background:#fff;border;border-radius}`.
   Từ khi bảng được dựng thành lưới thẻ, tấm nền đó thành một mảng trắng to
   nằm sau 5 thẻ, thừa hẳn ra ngoài — nhìn lạc lõng. Bỏ nền, chỉ còn các thẻ.
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section table.public-course-table,
body.landing-tabs #panel-khoa-hoc .public-course-table {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
body.site-flat.landing-tabs .lp-section .table-wrap:has(.public-course-table),
body.landing-tabs #panel-khoa-hoc .table-wrap:has(.public-course-table) {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
}

/* ------------------------------------------------------------
   47. FAQ TRONG TAB KHÓA HỌC

   `tab-pages-v1.css:72` lại dùng selector CÓ ID cho `.faq details`
   (viền #dce5eb, bo 10px, `padding: 0 18px`). Padding dọc bằng 0 nên các
   hàng dính sát nhau, và phần trả lời khi mở ra không có khoảng thở.
   Viết lại kèm ID cho khớp với dáng FAQ ở trang chủ.
   ------------------------------------------------------------ */
body.landing-tabs #panel-khoa-hoc .faq details {
  padding: 1rem 1.25rem;
  margin-bottom: .7rem;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: #fff;
  box-shadow: none;
}
body.landing-tabs #panel-khoa-hoc .faq details[open] {
  border-color: #f0d389;
  background: linear-gradient(180deg, var(--pr-wash-gold), #fff 42%);
  box-shadow: var(--pr-rest);
}
body.landing-tabs #panel-khoa-hoc .faq details p {
  margin: .7rem 0 0;
  padding-top: .7rem;
  border-top: 1px dashed var(--pr-line);
  color: var(--pr-muted);
}
body.site-flat.landing-tabs .lp-section .faq details p {
  margin: .7rem 0 0;
  padding-top: .7rem;
  border-top: 1px dashed var(--pr-line);
}
body.site-flat.landing-tabs .lp-section .faq details p,
body.landing-tabs #panel-khoa-hoc .faq details p { line-height: 1.7; }

/* ------------------------------------------------------------
   48. THANH ĐẦU TRANG — BỚT ĐỆM TRÊN DƯỚI ĐỂ LOGO TO HƠN

   Thanh cao 78px nhưng logo chỉ 64px, còn lại là đệm trên dưới, nên logo
   nhìn nhỏ so với chiều cao thanh. Hạ đệm xuống và nâng logo lên; chiều
   cao thanh gần như không đổi nên không xô lệch phần còn lại.
   ------------------------------------------------------------ */
body.landing-tabs .lp-top > .inner,
body.guest .lp-top > .inner {
  min-height: 76px;
  padding-top: 3px;
  padding-bottom: 3px;
}
body.landing-tabs .lp-top .lp-brand .brand-mark,
body.guest .lp-top .lp-brand .brand-mark {
  height: 70px; max-width: 106px;
}
body.landing-tabs .lp-top .lp-brand .brand-word,
body.guest .lp-top .lp-brand .brand-word { height: 55px; }

@media (max-width: 900px) {
  body.landing-tabs .lp-top > .inner,
  body.guest .lp-top > .inner { min-height: 66px; }
  body.landing-tabs .lp-top .lp-brand .brand-mark,
  body.guest .lp-top .lp-brand .brand-mark { height: 56px; max-width: 84px; }
  body.landing-tabs .lp-top .lp-brand .brand-word,
  body.guest .lp-top .lp-brand .brand-word { height: 44px; }
}
@media (max-width: 640px) {
  body.landing-tabs .lp-top > .inner,
  body.guest .lp-top > .inner { min-height: 60px; padding-block: 2px; }
  body.landing-tabs .lp-top .lp-brand .brand-mark,
  body.guest .lp-top .lp-brand .brand-mark { height: clamp(44px, 11vw, 54px); }
  body.landing-tabs .lp-top .lp-brand .brand-word,
  body.guest .lp-top .lp-brand .brand-word { height: clamp(34px, 8.6vw, 42px); }
}

/* ------------------------------------------------------------
   49. THẺ "ĐẶT LỊCH HỌC THỬ" — CHỮ VÀNG TRÊN NỀN TRẮNG

   Mục 25 cho `.side-book` / `.post-book` bộ màu sáng vì chúng là thẻ nền
   navy. Nhưng mục 23a lại gom `.blog-side-card` vào nhóm thẻ nền TRẮNG với
   độ ưu tiên cao hơn (0,4,2 so với 0,3,2), nên ở trang Tin tức thẻ ra nền
   trắng trong khi chữ vẫn là màu dành cho nền tối → chữ vàng nhạt trên
   nền trắng, gần như không đọc được.
   Cho `.side-book` nền navy ở độ ưu tiên cao hơn 23a để khớp lại bộ màu.
   ------------------------------------------------------------ */
body.site-flat.guest main.container .blog-side-card.side-book,
body.site-flat.guest main.container .post-book {
  background:
    radial-gradient(420px 220px at 90% -20%, rgba(245,182,10,.24), transparent 62%),
    linear-gradient(160deg, #01468c 0%, #012a56 100%);
  border: 1px solid rgba(245,182,10,.3);
  border-radius: var(--pr-r);
  box-shadow: 0 18px 38px -20px rgba(1,30,66,.75);
}

/* ------------------------------------------------------------
   50. CĂN QUANG HỌC CHỮ TRONG PILL CẤP ĐỘ CỦA THẺ KHÓA HỌC

   Pill "PHỔ THÔNG · TOEIC" là `td:nth-child(2) .list-cell` (landing-v3:382),
   dùng `display:inline-block` + padding đối xứng và không đặt line-height.
   Chữ HOA không có phần đuôi chữ, nhưng hộp dòng vẫn chừa chỗ cho đuôi chữ
   ở dưới, nên chữ nằm lệch lên trên và dư một vệt trống phía dưới.

   index.html đã có sẵn một khối xử lý đúng việc này cho `.eyebrow`,
   `.course-card .level`, `.demo-tag`, `.cert-badges span` (thêm đệm trên,
   bớt đệm dưới), nhưng pill này dùng selector khác nên bị sót.
   Xử lý bằng flex căn giữa + line-height 1 + bù thêm ~1.5px ở trên.
   ------------------------------------------------------------ */
body.site-flat.landing-tabs .lp-section table.public-course-table td:nth-child(2) .list-cell,
body.landing-tabs #panel-khoa-hoc table.public-course-table td:nth-child(2) .list-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* Đệm ĐỐI XỨNG: với line-height 1, phần chữ hoa của Inter tự nằm giữa hộp
     dòng, nên flex căn giữa là đủ. Đệm lệch chỉ làm nó lệch trở lại. */
  padding: .42rem .78rem;
  min-height: 26px;
}

/* Cùng kiểu chữ hoa trong pill: nhãn bước "01 · XẾP LỚP" của timeline
   và huy hiệu chương trình IELTS/APTIS ở tab Luyện thi */
body.site-flat.landing-tabs .lp-section .assessment-flow .assessment-step .step-no,
body.landing-tabs #panel-hoc-thu .assessment-flow .assessment-step .step-no,
body.landing-tabs .program-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: .42rem;
  padding-bottom: .3rem;
}

/* ------------------------------------------------------------
   51. DẢI ĐỊNH DẠNG KỲ THI — BỘ DẤU HIỆU TỰ DỰNG

   KHÔNG dùng logo của IELTS / British Council / ETS, và cũng KHÔNG mô phỏng
   theo chúng. Đây là bộ dấu hiệu riêng, dựng bằng SVG nội tuyến, mỗi hình mã
   hoá một đặc điểm CÓ THẬT của kỳ thi nên nó nói được điều gì đó chứ không
   chỉ để trang trí:
     IELTS — bốn bậc thang tăng dần, nhắc thang band 0–9
     APTIS — bốn phần quanh một lõi chung, nhắc việc thi theo từng phần
     TOEIC — sóng âm đứng cạnh dòng chữ, nhắc Listening & Reading
   Màu lấy từ hệ navy–vàng của chính site.
   ------------------------------------------------------------ */
body.landing-tabs .exam-brands {
  background: #fff;
  padding-block: clamp(1.7rem, 1.1rem + 1.8vw, 2.7rem);
  border-bottom: 1px solid var(--pr-line-soft);
}
body.landing-tabs .exam-brands > .inner {
  max-width: var(--site-width);
  margin: 0 auto;
  padding-inline: 1.5rem;
}
body.landing-tabs .exam-brands-label {
  margin: 0 0 1.25rem;
  text-align: center;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pr-faint);
}
body.landing-tabs .exam-brand-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
body.landing-tabs .exam-brand-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 1.35rem 1.1rem 1.25rem;
  border: 1px solid var(--pr-line);
  border-radius: var(--pr-r);
  background: linear-gradient(180deg, #fff, #f7faff);
  box-shadow: var(--pr-rest);
  transition: transform .2s var(--pr-ease), box-shadow .2s var(--pr-ease), border-color .2s var(--pr-ease);
}
body.landing-tabs .exam-brand-list li:hover {
  transform: translateY(-3px);
  border-color: #f0d389;
  box-shadow: var(--pr-lift);
}

/* Cụm dấu hiệu + tên xếp ngang như một khối nhận diện */
body.landing-tabs .eb-lockup {
  display: inline-flex;
  align-items: center;
  gap: .62rem;
}
body.landing-tabs .eb-glyph {
  display: grid;
  place-items: center;
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 12px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -7px rgba(10,27,51,.7);
}
body.landing-tabs .eb-glyph-svg { width: 23px; height: 23px; display: block; }
body.landing-tabs .eb-mark {
  font-size: clamp(1.18rem, 1rem + .7vw, 1.46rem);
  font-weight: 800;
  letter-spacing: .09em;
  line-height: 1;
  color: var(--pr-ink);
}
body.landing-tabs .eb-note {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--pr-muted);
  text-align: center;
  text-wrap: balance;
}

/* Mỗi kỳ thi một sắc trong hệ navy–vàng */
body.landing-tabs .eb-ielts .eb-glyph { background: linear-gradient(145deg, #0a5faf, #01346c); }
body.landing-tabs .eb-aptis .eb-glyph { background: linear-gradient(145deg, #f2b528, #c07f02); color: #241900; }
body.landing-tabs .eb-toeic .eb-glyph { background: linear-gradient(145deg, #2f7fc9, #0b4f93); }

@media (max-width: 760px) {
  body.landing-tabs .exam-brand-list { grid-template-columns: 1fr; gap: .7rem; }
  body.landing-tabs .exam-brand-list li {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .9rem;
    padding: .95rem 1.05rem;
    text-align: left;
  }
  body.landing-tabs .eb-lockup { flex: 0 0 auto; }
  body.landing-tabs .eb-glyph { width: 38px; height: 38px; flex-basis: 38px; }
  body.landing-tabs .eb-glyph-svg { width: 21px; height: 21px; }
  body.landing-tabs .eb-mark { font-size: 1.14rem; }
  body.landing-tabs .eb-note { text-align: left; }
}

/* ------------------------------------------------------------
   52. KHOẢNG CÁCH GIỮA HUY HIỆU CẤP ĐỘ VÀ TÊN KHÓA (trong tab)

   `tab-pages-v1.css:70` đặt `#panel-khoa-hoc .public-course-table td{padding-block:18px}`
   cho MỌI ô của bảng — hợp lý hồi nó còn là bảng thật, nhưng bảng nay đã dựng
   thành lưới thẻ với mỗi <td> là một dòng của thẻ. Ô huy hiệu vì thế bị cộng
   18px trên + 18px dưới, cộng thêm `margin-bottom .7rem` sẵn có → huy hiệu cách
   tên khóa gần 60px. Các dòng "nhãn — giá trị" cũng bị giãn theo.
   Trả đệm về đúng như ở trang chủ. Phải kèm ID mới thắng được.
   ------------------------------------------------------------ */
body.landing-tabs #panel-khoa-hoc table.public-course-table td { padding-block: 0; }
body.landing-tabs #panel-khoa-hoc table.public-course-table td:nth-child(2) { margin: 0 0 .7rem; }
body.landing-tabs #panel-khoa-hoc table.public-course-table td:not(:first-child):not(:nth-child(2)):not(:last-child) {
  padding-block: .58rem;
}
body.landing-tabs #panel-khoa-hoc table.public-course-table td:last-child { padding-top: 1.1rem; }