/* ============================================================
   TIẾNG HÀN 10 CÂN — Khoá video ôn thi đầu vào KIIP
   Trang đích một trang (landing page).

   Bảng màu giữ đúng bản demo chị duyệt (landing_page_KIIP_mobile_v3.html):
     · Hồng      #d1377b  — màu nhấn, nút bấm, nhãn mục
     · Tím       #76539a  — màu phụ
     · Tím than  #352443  — tiêu đề, nền các mục tối
     · Hồng nhạt #fff0f7  — nền sáng

   Khung sườn (lề, thang cỡ chữ, phông Manrope tự host, header, nút khối lăn, hiệu
   ứng hiện dần, tấm đăng ký trượt, hộp xem ảnh) lấy ĐÚNG công thức của THTC và ba
   trang KOKO INFINITE để cả nhà cùng một ngôn ngữ thiết kế. Đổi màu thương hiệu
   thì chỉ sửa khối :root ngay bên dưới.
   ============================================================ */

/* ---------- Phông Manrope — tự host, không gọi Google Fonts ----------
   Bản variable, một file lo trọn dải 300–800. unicode-range giữ y hệt Google nên
   trình duyệt chỉ tải bộ ký tự trang thật sự dùng. Giấy phép: assets/fonts/README.txt */
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../assets/fonts/manrope-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope'; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url('../assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- Màu thương hiệu (bản demo) ---- */
  --hong: #d1377b;
  --hong-dam: #aa2164;      /* chữ hồng trên nền hồng nhạt — đủ tương phản */
  --hong-sang: #e8a3c7;
  --hong-vet: #f9cfe3;      /* vệt bút dạ quang */
  --tim: #76539a;
  --tim-vua: #6a3978;       /* đuôi dải màu của mục visa */
  --tim-than: #352443;      /* tiêu đề + nền mục tối */
  --tim-sau: #221729;       /* tím sâu nhất, chân trang */

  --nen: #fff0f7;           /* hồng nhạt — nền sáng chủ đạo */
  --nen-2: #fff7fb;         /* nền xen kẽ giữa các mục */
  --nen-3: #f8eefa;         /* ngả tím, đuôi dải màu màn chào */
  --trang: #ffffff;

  /* Chữ: hạ nhấn bằng MÀU chứ không bằng nét mảnh (chữ phụ luôn 600) */
  --muc: #292332;
  --xam-500: #6d6370;
  --xam-400: #9a8d9c;
  --vien: #f1dce7;
  --vien-2: #e7c3d6;

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --maxw: none;
  /* Lề trái/phải dùng chung cho MỌI section + header: 20px ở màn hẹp, nội suy lên
     100px ở màn rất rộng — logo và nội dung luôn thẳng cùng một lề. */
  --pad: clamp(20px, calc(24px + (100vw - 1024px) * 0.1484), 100px);
  --radius: 16px;
  --radius-lg: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --header-h: 112px;
  --header-pt: 28px;
  --bar-h: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Ô nhập và nút bấm không tự thừa kế phông — quên một nút là lọt phông lạ vào trang */
button, input, select, textarea, optgroup { font-family: inherit; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) - 10px); -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font-body); color: var(--muc); background: var(--nen);
  line-height: 1.65; font-weight: 400; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg, iframe { display: block; max-width: 100%; }
/* SVG chèn giữa dòng không có class: mặc định 300×150px — cho bám theo cỡ chữ */
svg:not([class]) { width: 1.05em; height: 1.05em; flex-shrink: 0; }
[hidden] { display: none !important; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
.text-hong { color: var(--hong); }
/* Bút dạ quang hồng kẻ dưới một cụm chữ */
.hl { background: linear-gradient(transparent 60%, var(--hong-vet) 60%); padding-inline: 2px; }

/* ---------- Nút — khung chữ nhật, không bo góc (đồng bộ các trang cùng nhà) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 30px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff; background: var(--hong);
  border: 1px solid var(--hong); border-radius: 0; cursor: pointer;
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, var(--tim), var(--tim-than));
  transform: translateY(100%); transition: transform .4s var(--ease);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(209,55,123,.6); border-color: var(--tim-than); }
.btn:hover::before { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--full { width: 100%; }
/* Nút rỗng ruột */
.btn--vien { background: transparent; color: var(--hong-dam); border-color: var(--hong); }
.btn--vien::before { background: var(--hong); }
.btn--vien:hover { color: #fff; border-color: var(--hong); }
/* Nút trắng dùng trên nền tím than */
.btn--trang { background: #fff; color: var(--tim-than); border-color: #fff; }
.btn--trang::before { background: linear-gradient(120deg, var(--hong), var(--hong-dam)); }
.btn--trang:hover { color: #fff; border-color: var(--hong); box-shadow: 0 14px 34px -12px rgba(0,0,0,.5); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(32px, 4vw, 48px); }
.cta-row--giua { justify-content: center; }

/* Liên kết có mũi tên — mũi tên vẽ bằng SVG: Manrope không có glyph "→" */
.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--tim-than);
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow svg { width: 1.4em; height: 1.4em; color: var(--hong); }
.link-arrow:hover { gap: 15px; color: var(--hong); }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h); display: flex; align-items: center;
  transition: height .4s var(--ease);
}
.header__inner { display: flex; align-items: center; gap: 20px; }
.header.scrolled { height: calc(var(--header-h) - 14px); }
.header.scrolled .navbar { height: calc(var(--bar-h) - 6px); }
.header.scrolled .header__cta { --cta-h: calc((var(--bar-h) - 6px) * var(--cta-scale)); }

.navbar { display: flex; align-items: stretch; margin-right: auto; height: var(--bar-h); transition: height .4s var(--ease); }

/* Logo: huy hiệu tròn + chữ thương hiệu. Huy hiệu nền hồng nhạt đứng được trên mọi
   nền nên chỉ cần đổi màu CHỮ theo nền (lớp fx-head-dark do main.js gắn). */
.navbar__logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding-right: 22px; }
.navbar__huy {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(118,83,154,.55);
  transition: transform .5s var(--ease), width .4s var(--ease), height .4s var(--ease);
}
.navbar__logo:hover .navbar__huy { transform: rotate(-8deg) scale(1.05); }
.header.scrolled .navbar__huy { width: 48px; height: 48px; }
/* Nền mờ sau header khi đã cuộn (mọi cỡ màn hình) — để chữ menu không đè lên tiêu đề
   và nội dung trang chạy bên dưới. Không dùng backdrop-filter (luật cuộn mượt). */
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,247,251,.97) 0 62%, rgba(255,247,251,.85) 84%, rgba(255,247,251,0) 100%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.header.scrolled::before { opacity: 1; }
html.fx-head-dark .header::before { background: linear-gradient(180deg, rgba(34,23,41,.94) 0 62%, rgba(34,23,41,.7) 84%, rgba(34,23,41,0) 100%); }
.navbar__chu {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.1;
  letter-spacing: .6px; text-transform: uppercase; color: var(--tim-than);
  transition: color .4s var(--ease);
}
.navbar__chu small { display: block; margin-top: 3px; font-weight: 700; font-size: 11px; letter-spacing: 1.6px; color: var(--hong); transition: color .4s var(--ease); }
html.fx-head-dark .navbar__chu { color: #fff; }
html.fx-head-dark .navbar__chu small { color: var(--hong-sang); }

.navbar__nav { display: grid; grid-template-columns: 0fr; }
.navbar__list { display: flex; align-items: stretch; min-width: 0; overflow: hidden; }
.nav__link {
  position: relative; display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; white-space: nowrap;
  transition: color .3s var(--ease), background .3s var(--ease);
}

/* ---- Desktop: menu nằm thẳng trên nền trang, không hộp nền ---- */
@media (min-width: 1181px) {
  .navbar { flex: 1 1 auto; margin-right: 0; }
  .navbar__nav { display: flex; align-items: center; margin-left: auto; padding-right: clamp(10px, 1.2vw, 22px); }
  .navbar__list { align-items: center; overflow: visible; gap: clamp(14px, 1.7vw, 30px); }
  .header { align-items: flex-start; padding-top: var(--header-pt); }
  .header.scrolled { padding-top: calc(var(--header-pt) - 8px); }
  .nav__link { padding: 6px 0; font-size: clamp(12.5px, 1vw, 15.5px); color: var(--tim-than); }
  .nav__link:hover { color: var(--hong); }
  html.fx-head-dark .nav__link { color: rgba(255,255,255,.92); }
  html.fx-head-dark .nav__link:hover { color: var(--hong-sang); }
  /* Mục ứng với khối đang xem: gạch chân hồng (main.js gắn is-active theo vị trí cuộn) */
  .nav__link.is-active { color: var(--hong); }
  html.fx-head-dark .nav__link.is-active { color: var(--hong-sang); }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
  }
  .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
  .navbar__toggle { display: none; }
}

/* ---- Nút hamburger ---- */
.navbar__toggle {
  position: relative; flex-shrink: 0; align-self: center;
  width: 44px; height: 44px; border: 0; cursor: pointer;
  background: transparent; color: var(--tim-than);
  transition: color .3s var(--ease), opacity .3s var(--ease);
}
html.fx-head-dark .navbar__toggle { color: #fff; }
.navbar__toggle:hover { opacity: .65; }
.navbar__toggle-bars, .navbar__toggle-x {
  position: absolute; inset: 0; margin: auto; width: 26px; height: 26px;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.navbar__toggle-x { opacity: 0; transform: rotate(-90deg); }
.navbar.open .navbar__toggle-bars { opacity: 0; transform: scale(.8); }
.navbar.open .navbar__toggle-x { opacity: 1; transform: rotate(0); }

/* ---- Nút "Đăng ký": KHỐI HỘP 4 MẶT XOAY (y hệt THTC) ----
   Mỗi lần rê chuột khối lăn 1/4 vòng; 4 mặt xen kẽ 2 bảng màu nên mỗi cú lăn là
   một lần đổi màu. --cta-rot do main.js cộng dồn theo hướng di chuột. */
.header__cta {
  --cta-scale: .74;
  --cta-h: calc(var(--bar-h) * var(--cta-scale));
  --cta-rot: 0deg;
  position: relative; display: block; flex-shrink: 0; align-self: center;
  height: var(--cta-h); background: transparent; perspective: 800px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(10px, .84vw, 13px);
  letter-spacing: .5px; text-transform: uppercase; border: 0; cursor: pointer;
  transition: height .4s var(--ease);
}
@media (min-width: 1181px) { .header__cta { margin-top: calc(var(--bar-h) * (1 - var(--cta-scale)) / 2); align-self: flex-start; } }
.cta3d__faces {
  position: relative; display: block; height: 100%; pointer-events: none;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cta-h) / -2)) rotateX(var(--cta-rot));
  transition: transform .62s cubic-bezier(.4, 0, .2, 1);
}
.cta3d__face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding-inline: 22px; white-space: nowrap;
}
.cta3d__face--front { position: relative; inset: auto; height: 100%; transform: translateZ(calc(var(--cta-h) / 2)); }
/* Bề ngang khối = mặt CHỮ DÀI NHẤT: mặt trước giấu sẵn chữ "Trọn khoá 125.000₩" (vô hình)
   chồng cùng ô với "Đăng ký ngay", nên mặt trên/dưới lăn tới không bị cắt chữ */
.cta3d__face--front { display: grid; place-items: center; }
.cta3d__face--front > span { grid-area: 1 / 1; }
.cta3d__do { visibility: hidden; }
.cta3d__face--top    { transform: rotateX(90deg)   translateZ(calc(var(--cta-h) / 2)); }
.cta3d__face--back   { transform: rotateX(-180deg) translateZ(calc(var(--cta-h) / 2)); }
.cta3d__face--bottom { transform: rotateX(-90deg)  translateZ(calc(var(--cta-h) / 2)); }
@media (hover: hover) {
  .header__cta:not(.is-js):hover .cta3d__faces,
  .header__cta:not(.is-js):focus-visible .cta3d__faces {
    transform: translateZ(calc(var(--cta-h) / -2)) rotateX(calc(var(--cta-rot) + 90deg));
  }
}
.cta3d__face--front, .cta3d__face--back   { background: var(--hong); color: #fff; }
.cta3d__face--top,   .cta3d__face--bottom { background: var(--tim-than); color: #fff; }
html.fx-head-dark .cta3d__face--top,
html.fx-head-dark .cta3d__face--bottom { background: #fff; color: var(--tim-than); }

/* ============================================================
   HIỆN DẦN KHI CUỘN — THÀ MẤT HIỆU ỨNG CÒN HƠN MẤT CHỮ
   Trạng thái ẩn chỉ bật khi main.js đã chạy và gắn .reveal-on lên <html>.
   ============================================================ */
html.reveal-on .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
/* :not(.is-in) trên mọi biến thể là bắt buộc — xem giải thích bên THTC */
html.reveal-on .reveal--trai:not(.is-in) { transform: translateX(-28px); }
html.reveal-on .reveal--phai:not(.is-in) { transform: translateX(28px); }
html.reveal-on .reveal--zoom:not(.is-in) { transform: scale(.94); }
html.reveal-on .reveal.is-in { opacity: 1; transform: none; }
html.reveal-on .reveal[data-cho="1"] { transition-delay: .09s; }
html.reveal-on .reveal[data-cho="2"] { transition-delay: .18s; }
html.reveal-on .reveal[data-cho="3"] { transition-delay: .27s; }
html.reveal-on .reveal[data-cho="4"] { transition-delay: .36s; }
html.reveal-on .reveal[data-cho="5"] { transition-delay: .45s; }
html.man-hep.reveal-on .reveal--trai:not(.is-in),
html.man-hep.reveal-on .reveal--phai:not(.is-in) { transform: translateY(18px); }

/* ============================================================
   MÀN CHÀO
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  /* Dải màu của bản demo: hồng nhạt trên trái → tím nhạt → trắng */
  background:
    radial-gradient(70% 60% at 85% 10%, rgba(232,163,199,.38) 0%, rgba(232,163,199,0) 62%),
    linear-gradient(145deg, #fff0f8 0%, var(--nen-3) 56%, #fff 100%);
  padding: calc(var(--header-h) + clamp(16px, 3vh, 44px)) 0 clamp(52px, 7vh, 90px);
}
/* Vệt sáng mềm chạy chậm — thay cho hạt bay, nhẹ máy hơn nhiều */
.hero::after {
  content: ""; position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(34% 42% at 18% 30%, rgba(255,255,255,.7), transparent 62%),
              radial-gradient(28% 36% at 78% 80%, rgba(209,55,123,.10), transparent 64%);
  animation: heroTho 18s ease-in-out infinite; will-change: transform;
}
@keyframes heroTho { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -4%) scale(1.1); } }

.hero__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(28px, 4.4vw, 76px); align-items: center;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--hong-dam);
  background: rgba(255,255,255,.75); border: 1px solid var(--vien-2);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 22px;
}
.hero__eyebrow::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hong);
  animation: nhapNhay 1.6s ease-in-out infinite;
}
@keyframes nhapNhay { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.hero__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; text-transform: uppercase;
  font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1.06; color: var(--tim-than);
}
.hero__title .text-hong { display: inline-block; }
.hero__desc { margin-top: 22px; font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.18rem); color: #58485c; max-width: 50ch; }
.hero__desc strong { color: var(--tim-than); font-weight: 800; }

/* Giá + hai nút */
.hero__mua { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 30px; }
.gia { display: flex; flex-direction: column; }
.gia__so { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 3.4vw, 2.9rem); line-height: 1; color: var(--hong); letter-spacing: -.02em; }
.gia__chu { margin-top: 6px; font-weight: 700; font-size: 13.5px; color: var(--xam-500); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Ảnh cô Yến: khung trắng nghiêng nhẹ, góc dưới phải bo lớn như bản demo */
.hero__anh { position: relative; justify-self: center; width: 100%; max-width: 500px; }
.hero__anh-khung {
  position: relative; overflow: hidden; aspect-ratio: 4 / 4.5;
  border-radius: 28px 28px 110px 28px;
  background: #e7d8ee; border: 7px solid #fff;
  box-shadow: 0 36px 70px -32px rgba(124,66,122,.6);
  transform: rotate(2deg); transition: transform .6s var(--ease);
}
.hero__anh:hover .hero__anh-khung { transform: rotate(0deg) translateY(-6px); }
.hero__anh-khung img { width: 100%; height: 100%; object-fit: cover; object-position: 61% center; }
/* Nhãn tên dán chéo góc dưới — khối chữ nhật như THTC */
.hero__nhan {
  position: absolute; left: -14px; bottom: 30px; z-index: 2;
  background: var(--tim-than); color: #fff; padding: 12px 20px;
  font-family: var(--font-display); font-weight: 800; font-size: 14.5px; letter-spacing: .3px;
  box-shadow: 0 16px 34px -14px rgba(53,36,67,.8);
}
.hero__nhan span { display: block; margin-top: 2px; font-weight: 600; font-size: 12px; color: var(--hong-sang); letter-spacing: .2px; }
/* Con dấu tròn xoay chậm ở góc trên ảnh */
.hero__dau {
  position: absolute; right: -18px; top: -18px; z-index: 2;
  width: clamp(96px, 9vw, 124px); height: clamp(96px, 9vw, 124px);
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--hong); color: #fff; box-shadow: 0 16px 30px -12px rgba(209,55,123,.7);
}
.hero__dau svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: xoay 22s linear infinite; }
.hero__dau b { position: relative; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; text-align: center; }
.hero__dau b small { display: block; font-size: 10px; letter-spacing: 1.4px; margin-top: 3px; }
@keyframes xoay { to { transform: rotate(360deg); } }

/* Bốn quyền lợi chính ở chân màn chào */
.hero__so {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(38px, 5vh, 64px); padding-top: 28px; border-top: 1px solid var(--vien-2);
}
.so { display: flex; flex-direction: column; }
.so__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: var(--tim-than); }
.so__num em { font-style: normal; color: var(--hong); }
.so__label { margin-top: 8px; font-weight: 600; font-size: 14px; color: var(--xam-500); }

/* ============================================================
   KHUNG SECTION DÙNG CHUNG
   ============================================================ */
.section { padding: clamp(72px, 9vw, 124px) 0; position: relative; }
.section--nen { background: var(--nen); }
.section--nen2 { background: var(--nen-2); }
.section--trang { background: var(--trang); }
.section--toi {
  background:
    radial-gradient(70% 70% at 15% 0%, rgba(209,55,123,.30) 0%, rgba(209,55,123,0) 60%),
    linear-gradient(155deg, var(--tim-than) 0%, #4c2c5c 55%, var(--tim-vua) 100%);
  color: #fff; overflow: hidden;
}

.section__head { max-width: 820px; margin-bottom: clamp(38px, 5vw, 60px); }
.section__head--giua { max-width: 900px; margin-left: auto; margin-right: auto; text-align: center; }
.section__label {
  display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 13px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--hong); margin-bottom: 16px;
}
.section--toi .section__label { color: var(--hong-sang); }
.section__title {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.8rem, 3.9vw, 3.2rem); line-height: 1.1; color: var(--tim-than);
  /* Tiêu đề canh giữa: để trình duyệt chia đều các dòng. Bộ ngat-dong-tieng-viet.js
     KHÔNG xử lý tiêu đề — nó kéo cụm cuối xuống dòng riêng, để lại một chữ trơ trọi
     ở dòng giữa ("… làm / chậm / kế hoạch …"). */
  text-wrap: balance;
}
/* Cụm chữ không được tách đôi (tên người, cụm tô hồng trong tiêu đề) */
.lien { white-space: nowrap; }
.section--toi .section__title { color: #fff; }
.section__intro { margin-top: 18px; font-weight: 600; font-size: 1.06rem; color: var(--xam-500); max-width: 66ch; }
.section--toi .section__intro { color: rgba(255,240,247,.78); }
.section__head--giua .section__intro { margin-left: auto; margin-right: auto; }

/* ============================================================
   BĂNG CHỮ CHẠY NGANG — nhịp thị giác giữa hai mục lớn
   ============================================================ */
.bang {
  overflow: hidden; padding: 17px 0; background: var(--tim-than); color: #fff;
  border-top: 3px solid var(--hong); border-bottom: 3px solid var(--hong);
}
.bang--hong { background: var(--hong); border-color: var(--tim-than); }
.bang__track { display: flex; width: max-content; animation: bangChay 36s linear infinite; will-change: transform; }
.bang:hover .bang__track { animation-play-state: paused; }
@keyframes bangChay { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.bang__item {
  display: inline-flex; align-items: center; gap: 22px; padding-right: 22px;
  font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 1.6vw, 21px);
  letter-spacing: 1.4px; text-transform: uppercase; white-space: nowrap;
}
/* Ngôi sao bốn cánh — lấy từ hai ngôi sao trên logo */
.bang__item::after {
  content: ""; width: 14px; height: 14px; flex-shrink: 0; background: var(--hong-sang);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.bang--hong .bang__item::after { background: #fff; }

/* ============================================================
   THẺ — một khuôn dùng lại khắp nơi (quyền lợi, bước học, visa)
   ============================================================ */
.the-luoi { display: grid; gap: clamp(16px, 2vw, 26px); }
.the-luoi--3 { grid-template-columns: repeat(3, 1fr); }

.the {
  position: relative; display: flex; flex-direction: column; gap: 12px;
  padding: clamp(26px, 2.6vw, 36px) clamp(22px, 2.2vw, 32px) clamp(28px, 2.8vw, 36px);
  background: var(--trang); border: 1px solid var(--vien); border-radius: var(--radius-lg);
  overflow: hidden; isolation: isolate;
  box-shadow: 0 8px 30px -18px rgba(209,138,170,.5);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
/* Vệt sáng chéo quét qua khi rê chuột */
.the::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 32%, rgba(249,207,227,.55) 48%, transparent 62%);
  transform: translateX(-40%); opacity: 0; transition: transform .75s var(--ease), opacity .5s var(--ease);
}
.the:hover { transform: translateY(-7px); border-color: var(--hong-sang); box-shadow: 0 30px 58px -28px rgba(118,83,154,.45); }
.the:hover::before { transform: translateX(60%); opacity: 1; }
/* Thẻ nổi bật: nền hồng nhạt + viền hồng (hai quyền lợi đáng tiền nhất) */
.the--noi { background: linear-gradient(150deg, #fce2f1 0%, #fff 70%); border: 2px solid var(--hong-sang); }
.the__co {
  position: absolute; top: 0; right: 0; background: var(--hong); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; padding: 6px 14px;
}
.the__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(140deg, var(--hong), var(--tim)); color: #fff;
  box-shadow: 0 10px 20px -10px rgba(209,55,123,.7);
}
.the__ico svg { width: 27px; height: 27px; }
.the__stt {
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.4px var(--hong);
}
.the__ten { font-family: var(--font-display); font-weight: 800; font-size: 1.24rem; color: var(--tim-than); line-height: 1.28; }
.the__mo { font-weight: 600; font-size: 1rem; color: var(--xam-500); }

/* Bản thẻ trên nền tím than */
.section--toi .the { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); box-shadow: none; }
.section--toi .the::before { background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.12) 48%, transparent 62%); }
.section--toi .the:hover { border-color: var(--hong-sang); box-shadow: 0 26px 52px -24px rgba(0,0,0,.6); }
.section--toi .the__ten { color: #ffe0ef; }
.section--toi .the__mo { color: rgba(255,240,247,.8); }
.section--toi .the__ico { background: #fff; color: var(--hong); box-shadow: none; }

/* ============================================================
   MỤC VISA — chuỗi ba chặng + lưu ý
   ============================================================ */
.chang {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 12px;
  margin: clamp(34px, 4vw, 52px) 0 0;
}
.chang__o {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px;
  background: #fff; color: var(--tim-than);
  font-family: var(--font-display); font-weight: 800; font-size: 14.5px;
}
.chang__o b { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--hong); color: #fff; font-size: 12px; }
.chang__mui { color: var(--hong-sang); }
.chang__mui svg { width: 26px; height: 26px; }
.luu-y {
  max-width: 860px; margin: clamp(26px, 3vw, 36px) auto 0; padding: 16px 22px;
  border-left: 4px solid var(--hong-sang); background: rgba(255,255,255,.06);
  font-weight: 600; font-size: .92rem; line-height: 1.6; color: rgba(255,240,247,.78);
}
.luu-y strong { color: #fff; }

/* ============================================================
   LỘ TRÌNH 3 BƯỚC — hàng ngang có đường nối
   ============================================================ */
.buoc-luoi { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); counter-reset: buoc; }
/* Đường chấm nối ba bước, chạy ngang qua tâm ba vòng số */
.buoc-luoi::before {
  content: ""; position: absolute; left: calc(100% / 6); right: calc(100% / 6); top: calc(clamp(26px, 2.6vw, 34px) + 30px);
  border-top: 2px dashed var(--vien-2); z-index: 0;
}
.buoc { position: relative; z-index: 1; text-align: center; padding: clamp(26px, 2.6vw, 34px) clamp(20px, 2vw, 30px); }
.buoc__so {
  width: 60px; height: 60px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--hong), var(--tim)); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem;
  box-shadow: 0 0 0 8px var(--nen-2), 0 14px 26px -12px rgba(209,55,123,.7);
  transition: transform .45s var(--ease);
}
.buoc:hover .buoc__so { transform: scale(1.08) rotate(-6deg); }
.buoc__ten { font-family: var(--font-display); font-weight: 800; font-size: 1.22rem; color: var(--tim-than); }
.buoc__mo { margin-top: 8px; font-weight: 600; font-size: 1rem; color: var(--xam-500); max-width: 30ch; margin-inline: auto; }

/* Hàng viên nhảy nhanh tới mục khác */
.nhay { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: clamp(30px, 3.4vw, 44px); }
.nhay a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--vien-2); color: var(--hong-dam);
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.nhay a:hover { background: var(--hong); border-color: var(--hong); color: #fff; transform: translateY(-2px); }
.nhay svg { width: 15px; height: 15px; }

/* ============================================================
   GIẢNG VIÊN — ảnh trái, hồ sơ phải
   ============================================================ */
.gv-doi { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.gv-anh { position: relative; isolation: isolate; }
@media (min-width: 1181px) { .gv-anh { position: sticky; top: calc(var(--header-h) + 24px); } }
.gv-anh__khung {
  position: relative; overflow: hidden; aspect-ratio: 4 / 4.6;
  border-radius: 110px 28px 28px 28px;
  background: #eadbe9; box-shadow: 0 36px 70px -34px rgba(53,36,67,.6);
}
.gv-anh__khung img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 12%; transition: transform .8s var(--ease); }
.gv-anh:hover .gv-anh__khung img { transform: scale(1.04); }
/* Khung chữ nhật lệch phía sau ảnh — tạo chiều sâu */
.gv-anh::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px; z-index: -1;
  border: 2px solid var(--hong-sang); border-radius: 110px 28px 28px 28px;
}
.gv-ten { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.15rem, 1.6vw, 1.4rem); color: var(--tim); margin-top: 16px; }
.chip-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: #f9e0ed; border: 1px solid var(--vien-2);
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: .3px; color: var(--hong-dam);
}
.chip--dam { background: var(--tim-than); border-color: var(--tim-than); color: #fff; }
.gv-mo { margin-top: 18px; font-weight: 600; font-size: 1.04rem; color: var(--xam-500); max-width: 60ch; }

/* Mốc thời gian công tác */
.moc { position: relative; display: grid; gap: 16px; margin-top: 26px; padding-left: 30px; }
.moc::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--vien-2); }
.moc__o { position: relative; }
.moc__o::before {
  content: ""; position: absolute; left: -30px; top: 5px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 5px var(--hong), 0 0 0 4px var(--nen);
}
.moc__nam { font-family: var(--font-display); font-weight: 800; font-size: .98rem; color: var(--hong); }
.moc__ten { font-family: var(--font-display); font-weight: 800; font-size: 1.04rem; color: var(--tim-than); }
.moc__noi { font-weight: 600; font-size: .94rem; color: var(--xam-500); }

/* ============================================================
   THÀNH TÍCH — dải phiếu điểm cuộn ngang, bấm để phóng to
   ============================================================ */
/* Băng chạy liên tục, CHẬM, từ TRÁI sang PHẢI (chị dặn 16/10/2026).
   Cùng cơ chế với băng ảnh lớp học của THTC: danh sách được main.js nhân đôi, cả dải
   trượt đúng nửa chiều dài rồi vòng lại — mắt không thấy mối nối.
   Đổi chiều: bỏ chữ "reverse". Đổi tốc độ: sửa 70s (số càng lớn càng chậm). */
.diem-bang {
  overflow: hidden; margin-inline: calc(var(--pad) * -1); padding: 12px 0 28px;
  /* Hai mép mờ dần để phiếu trôi vào / trôi ra mềm mại */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.diem-bang__track { display: flex; width: max-content; animation: bangChay 70s linear infinite reverse; will-change: transform; }
/* Rê chuột, chạm giữ, hoặc đang xem ảnh phóng to thì đứng yên */
.diem-bang:hover .diem-bang__track,
.diem-bang:active .diem-bang__track,
html.cpanel-open .diem-bang__track { animation-play-state: paused; }
.diem {
  position: relative; flex: 0 0 clamp(210px, 21vw, 270px); margin-right: clamp(14px, 1.6vw, 22px);
  display: block; background: #fff; border: 1px solid var(--vien); border-radius: var(--radius);
  overflow: hidden; cursor: zoom-in;
  box-shadow: 0 14px 30px -20px rgba(118,83,154,.5);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.diem:hover { transform: translateY(-6px); border-color: var(--hong-sang); box-shadow: 0 26px 46px -24px rgba(118,83,154,.6); }
.diem__anh { aspect-ratio: 480 / 640; background: #fafafa; overflow: hidden; }
.diem__anh img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.diem__chu {
  display: flex; align-items: center; justify-content: center; gap: 5px; padding: 13px 16px;
  font-family: var(--font-display); font-weight: 800; font-size: 13.5px; color: var(--tim); white-space: nowrap;
  border-top: 1px solid var(--vien);
}
.diem__chu b { color: var(--hong); }
/* Lớp phủ kính lúp khi rê chuột */
.diem__kinh {
  position: absolute; inset: 0 0 auto 0; aspect-ratio: 480 / 640;
  display: flex; align-items: center; justify-content: center;
  background: rgba(53,36,67,.45); color: #fff; opacity: 0; transition: opacity .35s var(--ease);
}
.diem__kinh svg { width: 40px; height: 40px; }
.diem:hover .diem__kinh { opacity: 1; }

.dieu-khien { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dieu-khien--giua { justify-content: center; text-align: center; }
.mui-ten { display: flex; gap: 10px; }
.mui-ten button {
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--vien-2); background: #fff; color: var(--hong); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.mui-ten button:hover { background: var(--hong); color: #fff; border-color: var(--hong); }
.mui-ten svg { width: 22px; height: 22px; }
.ghi-nho { font-weight: 600; font-size: .8rem; color: var(--xam-400); white-space: nowrap; }
/* Điện thoại không đủ bề ngang cho một dòng — đành cho xuống dòng, không thì tràn ngang */
@media (max-width: 680px) { .ghi-nho { white-space: normal; font-size: .78rem; } }

/* ============================================================
   CẢM NHẬN HỌC VIÊN — đang chờ ảnh tin nhắn thật
   ============================================================ */
.fb-luoi { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); }
.fb {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.4vw, 30px);
  background: #fff; border: 2px dashed var(--vien-2); border-radius: var(--radius-lg);
  transition: transform .45s var(--ease), border-color .45s var(--ease);
}
.fb:hover { transform: translateY(-6px); border-color: var(--hong-sang); }
.fb::before {
  content: "\201C"; position: absolute; right: 22px; top: 4px;
  font-family: var(--font-display); font-weight: 800; font-size: 5rem; line-height: 1; color: var(--hong-vet);
}
.fb__ico { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--nen); color: var(--hong); }
.fb__ico svg { width: 24px; height: 24px; }
.fb__ten { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; color: var(--tim-than); }
.fb__mo { font-weight: 600; font-size: .98rem; color: var(--xam-500); }

/* ============================================================
   VIDEO HỌC THỬ
   ============================================================ */
.video { max-width: 920px; margin: 0 auto; }
.video__khung {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-lg);
  background:
    radial-gradient(60% 80% at 80% 100%, rgba(209,55,123,.55), transparent 70%),
    linear-gradient(125deg, #3b224b, #8c3a7c 70%, #ac4181);
  box-shadow: 0 40px 80px -40px rgba(53,36,67,.7);
}
.video__khung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Màn chờ khi chưa gắn video: nút phát tròn + chữ */
.video__cho {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px; text-align: center; color: #fff; border: 0; background: transparent; width: 100%;
}
button.video__cho { cursor: pointer; }
.video__nut {
  position: relative; width: clamp(72px, 8vw, 96px); height: clamp(72px, 8vw, 96px); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: #fff; color: var(--hong);
  flex-shrink: 0; transition: transform .4s var(--ease);
}
.video__nut::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5);
  animation: songLan 2.2s ease-out infinite;
}
@keyframes songLan { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.video__nut svg { width: 38%; height: 38%; margin-left: 6%; }
button.video__cho:hover .video__nut { transform: scale(1.08); }
.video__ten { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.6rem); text-transform: uppercase; letter-spacing: .5px; }
.video__mo { font-weight: 600; font-size: .98rem; color: rgba(255,240,247,.82); max-width: 40ch; }
.video__ten, .video__mo { text-shadow: 0 2px 12px rgba(34,23,41,.6); }
/* Điện thoại: khung video thấp — chỉ giữ nút phát + tên, bỏ dòng mô tả cho đỡ chật */
@media (max-width: 680px) {
  .video__cho { gap: 10px; padding: 14px; }
  .video__nut { width: 60px; height: 60px; }
  .video__ten { font-size: 1rem; }
  button.video__cho .video__mo { display: none; }
}

/* ============================================================
   HỌC PHÍ
   ============================================================ */
.hoc-phi {
  position: relative; max-width: 760px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
  background: #fff; border: 2px solid var(--hong-sang); border-radius: var(--radius-lg);
  box-shadow: 0 34px 70px -40px rgba(204,125,165,.8);
}
.hoc-phi__trai {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px, 3.4vw, 44px);
  background: linear-gradient(155deg, var(--tim-than) 0%, #5a2f6a 100%); color: #fff;
}
.hoc-phi__nhan { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: var(--hong-sang); }
.hoc-phi__so { margin-top: 14px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.hoc-phi__chu { margin-top: 10px; font-weight: 600; font-size: .98rem; color: rgba(255,240,247,.8); }
.hoc-phi__phai { padding: clamp(28px, 3.4vw, 44px); }
.dau-tich { display: grid; gap: 13px; }
.dau-tich li { position: relative; padding-left: 32px; font-weight: 700; font-size: 1rem; color: var(--tim-than); line-height: 1.5; }
.dau-tich li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--hong) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='m6%2012.5%204%204%208-9'%20fill='none'%20stroke='%23fff'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.hoc-phi__phai .btn { margin-top: 24px; }
.hoc-phi__ghi { margin-top: 12px; font-weight: 600; font-size: .85rem; color: var(--xam-400); }

/* ============================================================
   ĐĂNG KÝ — form trái, thông tin phải
   ============================================================ */
.dang-ky { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(22px, 3vw, 44px); align-items: stretch; max-width: 1180px; margin: 0 auto; }
.form-hop {
  background: #fff; border: 1px solid var(--vien); border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 42px);
  box-shadow: 0 2px 10px rgba(118,83,154,.05), 0 20px 48px -28px rgba(201,119,170,.6);
  display: flex; flex-direction: column; justify-content: center;
}
/* Dòng báo kết quả chỉ chiếm chỗ khi có chữ — không để khoảng trống thừa dưới nút */
.form-hop .form-ghichu:empty { display: none; }
.o { margin-bottom: 18px; }
.o label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--tim-than); margin-bottom: 7px; }
.o label em { font-style: normal; color: var(--hong); }
.o input, .o select, .o textarea {
  width: 100%; padding: 14px 16px; font-family: var(--font-body); font-weight: 600; font-size: 15.5px; color: var(--muc);
  border: 1px solid var(--vien-2); border-radius: 12px; background: var(--nen-2);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.o select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px;
  background: var(--nen-2) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='m6%209%206%206%206-6'%20fill='none'%20stroke='%23d1377b'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 20px no-repeat;
}
.o input:focus, .o select:focus, .o textarea:focus { outline: none; border-color: var(--hong); background: #fff; box-shadow: 0 0 0 4px rgba(209,55,123,.14); }
.o input.sai, .o select.sai { border-color: #c62828; box-shadow: 0 0 0 4px rgba(198,40,40,.12); }
.form-ghichu { margin-top: 14px; font-weight: 600; font-size: 14px; min-height: 20px; }
.form-ghichu.ok { color: #1b7a3e; }
.form-ghichu.loi { color: #c62828; }

/* Ba thẻ chia đều chiều cao cột (1fr mỗi hàng) — đáy thẻ cuối thẳng đáy khung form */
.dk-canh { display: grid; grid-auto-rows: 1fr; gap: 14px; }
.dk-o {
  display: flex; align-items: center; gap: 18px; padding: 18px 24px;
  border-radius: var(--radius); background: #fff; border: 1px solid var(--vien);
  transition: transform .35s var(--ease), border-color .35s var(--ease);
}
.dk-o:hover { transform: translateX(6px); border-color: var(--hong-sang); }
.dk-o__ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--nen); color: var(--hong); }
.dk-o__ico svg { width: 21px; height: 21px; }
.dk-o__ten { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--tim-than); }
.dk-o__mo { margin-top: 3px; font-weight: 600; font-size: .96rem; color: var(--xam-500); }

/* ============================================================
   HỎI ĐÁP
   ============================================================ */
.hoi-dap { max-width: 880px; margin: 0 auto; display: grid; gap: 12px; }
.hd {
  background: #fff; border: 1px solid var(--vien); border-radius: var(--radius);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.hd[open] { border-color: var(--hong-sang); box-shadow: 0 18px 40px -28px rgba(118,83,154,.55); }
.hd > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--tim-than);
}
.hd > summary::-webkit-details-marker { display: none; }
.hd > summary:hover { color: var(--hong); }
/* Dấu cộng xoay thành dấu nhân khi mở */
.hd__dau {
  position: relative; flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--nen);
  transition: transform .35s var(--ease), background .35s var(--ease);
}
.hd__dau::before, .hd__dau::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--hong); transition: background .35s var(--ease); }
.hd__dau::after { transform: rotate(90deg); }
.hd[open] .hd__dau { transform: rotate(135deg); background: var(--hong); }
.hd[open] .hd__dau::before, .hd[open] .hd__dau::after { background: #fff; }
.hd__tra { padding: 0 24px 22px; font-weight: 600; font-size: 1rem; color: var(--xam-500); max-width: 70ch; }

/* ============================================================
   CHÂN TRANG
   ============================================================ */
.footer {
  background: radial-gradient(70% 120% at 12% 0%, rgba(209,55,123,.22) 0%, rgba(209,55,123,0) 58%), linear-gradient(155deg, var(--tim-than) 0%, var(--tim-sau) 70%);
  color: rgba(255,240,247,.72); padding-top: clamp(56px, 8vw, 88px);
}
.footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; align-items: start; padding-bottom: 50px; }
.footer__brand { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.footer__huy { width: 72px; height: 72px; border-radius: 50%; }
.footer__ten { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .6px; text-transform: uppercase; color: #fff; line-height: 1.15; }
.footer__ten small { display: block; margin-top: 4px; font-size: 11.5px; letter-spacing: 1.6px; color: var(--hong-sang); }
.footer__desc { font-weight: 600; font-size: .96rem; color: rgba(255,240,247,.75); max-width: 40ch; }
.footer__col h4 {
  font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--hong-sang);
  margin-bottom: 16px; letter-spacing: 1.6px; text-transform: uppercase;
}
.footer__col li { margin-bottom: 11px; font-size: .95rem; }
.footer__col a { font-weight: 600; color: rgba(255,240,247,.72); transition: color .3s var(--ease), padding-left .3s var(--ease); }
.footer__col a:hover { color: #fff; padding-left: 5px; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 22px 0; }
.footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-weight: 600; font-size: 13.5px; color: rgba(255,240,247,.55); }

/* ---------- Nút lên đầu trang ---------- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--tim-than); color: #fff; border: 0; cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(53,36,67,.7);
  opacity: 0; visibility: hidden; transform: translateY(20px); transition: .4s var(--ease);
}
.to-top svg { width: 20px; height: 20px; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { transform: translateY(-4px); background: var(--hong); }

/* ---------- Thanh mua nhanh dính đáy — CHỈ ở điện thoại (giữ từ bản demo) ---------- */
.thanh-mua { display: none; }

/* Hộp đếm số người đăng ký: nổi lên góc trái dưới (điện thoại: ngay trên thanh mua) */
.dem-dk {
  position: fixed; right: 24px; bottom: 24px; z-index: 94;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 48px);
  padding: 10px 10px 10px 18px; background: #fff; border: 1.5px solid var(--hong-sang);
  border-radius: 999px; box-shadow: 0 22px 44px -20px rgba(118,83,154,.6);
  transform: translateY(calc(100% + 40px)) scale(.9); opacity: 0; pointer-events: none;
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .35s var(--ease);
}
.dem-dk.show { transform: none; opacity: 1; pointer-events: auto; }
.dem-dk__cham { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--hong); flex-shrink: 0; }
.dem-dk__cham::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--hong);
  animation: demNhay 1.8s var(--ease) infinite;
}
@keyframes demNhay { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.dem-dk__chu { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.3; color: var(--tim-than); }
.dem-dk__chu b { font-weight: 800; font-size: 17px; color: var(--hong); font-variant-numeric: tabular-nums; }
.dem-dk__nut {
  flex-shrink: 0; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--hong); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: .5px;
  text-transform: uppercase; white-space: nowrap; transition: background .3s var(--ease);
}
.dem-dk__nut:hover { background: var(--hong-dam); }
.dem-dk__dong {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border: 0; background: none; border-radius: 50%; color: var(--xam-500); transition: background .3s var(--ease);
}
.dem-dk__dong:hover { background: var(--nen); color: var(--tim-than); }
.dem-dk__dong svg { width: 14px; height: 14px; }
html.cpanel-open .dem-dk { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .dem-dk__cham::after { animation: none; } }

/* ============================================================
   TẤM "ĐĂNG KÝ" — nền tím than trượt vào từ mép phải
   ============================================================ */
.cpanel { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.cpanel.open { visibility: visible; }
.cpanel__backdrop { position: absolute; inset: 0; background: rgba(30,16,38,.62); opacity: 0; transition: opacity .5s var(--ease); cursor: pointer; }
/* backdrop-filter CHỈ khai lúc mở — khai khi đang ẩn là trình duyệt vẫn làm mờ suốt lúc cuộn */
.cpanel.open .cpanel__backdrop { opacity: 1; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.cpanel__sheet {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(100%, max(540px, 38vw)); max-width: 700px;
  background: linear-gradient(160deg, var(--tim-than) 0%, var(--tim-sau) 75%); color: #fff;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .6s var(--ease);
  box-shadow: -40px 0 90px -30px rgba(0,0,0,.7);
}
.cpanel.open .cpanel__sheet { transform: translateX(0); }
.cpanel__close { position: absolute; top: 0; right: 0; z-index: 2; display: flex; align-items: stretch; border: 0; padding: 0; background: transparent; cursor: pointer; font-family: var(--font-display); }
.cpanel__close-word { display: flex; align-items: center; padding: 0 20px; background: rgba(255,255,255,.1); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .8px; text-transform: uppercase; transition: background .3s var(--ease); }
.cpanel__close-x { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: var(--hong); color: #fff; transition: background .3s var(--ease); }
.cpanel__close-x svg { width: 24px; height: 24px; }
.cpanel__close:hover .cpanel__close-word { background: rgba(255,255,255,.18); }
.cpanel__close:hover .cpanel__close-x { background: var(--hong-dam); }
.cpanel__body { padding: clamp(84px, 10vh, 110px) clamp(22px, 4.4vw, 56px) clamp(44px, 7vh, 72px); }
.cpanel__gia { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 18px; padding: 8px 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--hong-sang); }
.cpanel__gia b { font-size: 20px; color: #fff; }
.cpanel__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); color: #fff; line-height: 1.2; }
.cpanel__sub { margin-top: 12px; margin-bottom: clamp(26px, 4vh, 38px); font-weight: 600; font-size: 1rem; color: rgba(255,240,247,.7); }

/* Ô nhập: viền mảnh, nền trong suốt, nhãn trôi lên khi gõ (không cần JS) */
.cfield { position: relative; margin-bottom: 14px; }
.cfield input, .cfield select {
  width: 100%; display: block; background: transparent; color: #fff;
  border: 1px solid rgba(232,163,199,.4); border-radius: 0;
  padding: 28px 20px 12px; font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.5;
  transition: border-color .3s var(--ease), background .3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.cfield select { padding-top: 26px; }
.cfield select option { color: var(--muc); }
.cfield input:focus, .cfield select:focus { outline: none; border-color: var(--hong-sang); background: rgba(255,255,255,.05); }
.cfield label {
  position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
  color: rgba(255,240,247,.7); font-weight: 600; font-size: 15px; pointer-events: none;
  transition: top .25s var(--ease), transform .25s var(--ease), font-size .25s var(--ease), color .25s var(--ease);
}
.cfield label em { font-style: normal; color: var(--hong-sang); }
/* placeholder=" " để :placeholder-shown biết ô còn trống */
.cfield input:focus + label, .cfield input:not(:placeholder-shown) + label,
.cfield select:focus + label, .cfield select.da-chon + label {
  top: 11px; transform: none; font-size: 11.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--hong-sang);
}
/* Mũi tên của ô chọn (đã tắt kiểu mặc định của hệ điều hành) */
.cfield--chon::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid var(--hong-sang); border-bottom: 2px solid var(--hong-sang); transform: rotate(45deg); pointer-events: none;
}
.cfield input.sai, .cfield select.sai { border-color: #ff8a80; }
.cpanel__submit {
  margin-top: 22px; width: 100%; padding: 20px 32px; border: 0; cursor: pointer;
  background: var(--hong); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .8px; text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.cpanel__submit:hover { background: #fff; color: var(--tim-than); }
.cpanel__note { margin-top: 14px; font-weight: 600; font-size: 14px; min-height: 1.2em; }
.cpanel__note.loi { color: #ff8a80; }
.cpanel__note.ok { color: #9ce6b4; }
html.cpanel-open, html.cpanel-open body { overflow: hidden; }

/* ============================================================
   HỘP XEM ẢNH PHÓNG TO — mở ngay trong trang (y hệt THTC)
   Mặc định là CỠ ĐỌC ĐƯỢC có cuộn dọc; bấm ảnh thì thu cho vừa màn hình.
   ============================================================ */
.hop-anh { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.hop-anh.mo { visibility: visible; }
.hop-anh__nen { position: absolute; inset: 0; cursor: pointer; background: rgba(26,14,32,.9); opacity: 0; transition: opacity .35s var(--ease); }
.hop-anh.mo .hop-anh__nen { opacity: 1; }
.hop-anh__khung {
  position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: clamp(56px, 7vh, 84px) clamp(14px, 4vw, 48px) clamp(20px, 4vh, 40px); pointer-events: none;
}
.hop-anh__cuon {
  pointer-events: auto; max-width: 100%; max-height: 100%; overflow: auto; overscroll-behavior: contain; border-radius: 10px;
  opacity: 0; transform: scale(.96) translateY(10px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.hop-anh.mo .hop-anh__cuon { opacity: 1; transform: none; }
.hop-anh__anh { display: block; width: min(760px, 92vw); height: auto; background: #fff; border-radius: 10px; cursor: zoom-out; }
.hop-anh.vua .hop-anh__anh { width: auto; max-width: min(100%, 760px); max-height: 76vh; cursor: zoom-in; }
.hop-anh__chu { pointer-events: auto; max-width: 720px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: #fff; }
.hop-anh__chu small { display: block; margin-top: 5px; font-weight: 600; font-size: 12.5px; color: rgba(255,240,247,.6); }
.hop-anh__dong {
  position: absolute; top: clamp(14px, 2.4vh, 26px); right: clamp(14px, 2.4vw, 30px);
  pointer-events: auto; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; background: var(--hong); color: #fff;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.hop-anh__dong svg { width: 22px; height: 22px; }
.hop-anh__dong:hover { background: #fff; color: var(--tim-than); transform: rotate(90deg); }

/* Mục "Đăng ký" trong bảng menu — chỉ hiện ở khổ hẹp (nút khối lăn đã ẩn) */
.chi-hep { display: none; }
.nav__link--nut { width: 100%; border: 0; cursor: pointer; text-align: left; background: var(--hong); color: #fff; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
  :root { --header-h: 88px; --bar-h: 56px; }
  .header__cta { display: none; }
  .chi-hep { display: block; }
  .navbar__huy { width: 46px; height: 46px; }
  .header.scrolled .navbar__huy { width: 42px; height: 42px; }

  .navbar { flex: 1 1 auto; margin-right: 0; }
  .navbar__toggle { margin-left: auto; }
  /* Menu xổ dọc thành bảng ngay dưới thanh */
  .navbar__nav {
    display: block; position: absolute; top: calc(50% + var(--bar-h) / 2); left: var(--pad); right: var(--pad);
    background: var(--tim-than); overflow: hidden; box-shadow: 0 28px 60px -26px rgba(0,0,0,.6);
    transform: translateY(-14px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .4s var(--ease), opacity .4s var(--ease), visibility 0s linear .4s;
  }
  .navbar.open .navbar__nav {
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .4s var(--ease), opacity .4s var(--ease), visibility 0s;
    max-height: calc(100vh - var(--header-h) - 16px); overflow-y: auto;
  }
  .navbar__list { display: block; overflow: visible; }
  .nav__link { display: flex; padding: 16px 22px; font-size: 14.5px; border-top: 1px solid rgba(255,255,255,.1); color: #fff; }
  .nav__link:hover, .nav__link.is-active { color: var(--hong-sang); background: rgba(255,255,255,.06); }
  .navbar__list > li:first-child .nav__link { border-top: 0; }
  .nav__link--nut:hover { background: var(--hong-dam); color: #fff; }

  .dang-ky { grid-template-columns: 1fr; }
  .dk-canh { grid-auto-rows: auto; }
}
/* iPad ngang / iPad Pro dọc (901–1180px): vẫn giữ hai cột cho màn chào và mục giảng
   viên — xếp một cột thì ảnh chỉ chiếm nửa trái, nửa phải bỏ trống */
@media (min-width: 901px) and (max-width: 1180px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; gap: 36px; }
  .gv-doi { grid-template-columns: .9fr 1.1fr; gap: 40px; }
}
@media (max-width: 900px) {
  /* Một cột: ảnh canh giữa thay vì dạt sang trái */
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__anh { max-width: 500px; justify-self: center; }
  .gv-doi { grid-template-columns: 1fr; }
  .gv-anh { max-width: 500px; justify-self: center; width: 100%; }
  .the-luoi--3, .fb-luoi { grid-template-columns: repeat(2, 1fr); }
  /* Lưới ba thẻ xếp hai cột thì thẻ thứ ba đứng lẻ một nửa — cho nó trải hết hàng */
  .the-luoi--3 > :last-child:nth-child(odd), .fb-luoi > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .buoc-luoi { grid-template-columns: 1fr; gap: 6px; }
  .buoc-luoi::before { display: none; }
  .hero__so { grid-template-columns: repeat(2, 1fr); }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__cot-dau { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  :root { --header-h: 76px; --bar-h: 50px; }
  .navbar__huy { width: 42px; height: 42px; }
  .navbar__chu { font-size: 14.5px; }
  .navbar__chu small { font-size: 9.5px; letter-spacing: 1.2px; }

  .hero__eyebrow { font-size: 11px; letter-spacing: 1.4px; padding: 7px 13px; }
  .hero__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .hero__actions .btn { padding: 15px 10px; font-size: 13px; }
  .hero__anh-khung { aspect-ratio: 1.1; border-radius: 22px 22px 70px 22px; border-width: 5px; transform: rotate(1deg); }
  .hero__anh-khung img { object-position: 60% 35%; }
  .hero__nhan { left: -6px; bottom: 16px; padding: 9px 14px; font-size: 13px; }
  .hero__dau { right: -8px; top: -14px; }
  .hero__so { gap: 22px 18px; }
  .so__label { font-size: 13px; }

  .the-luoi--3, .fb-luoi { grid-template-columns: 1fr; }
  /* Thẻ quyền lợi nằm ngang trên điện thoại: icon trái, chữ phải — đỡ dài trang */
  .the--ngang { display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; row-gap: 4px; padding: 20px; }
  .the--ngang .the__ico { width: 50px; height: 50px; border-radius: 14px; grid-row: span 2; }
  .the--ngang .the__ten { font-size: 1.08rem; }
  .the--ngang .the__mo { font-size: .95rem; }
  /* Nhãn "Nổi bật / Miễn phí" giữ ở góc trên nhưng thu nhỏ, và thẻ chừa sẵn khoảng
     trống phía trên để nhãn không đè lên tên thẻ (kể cả khi máy đặt chữ to) */
  .the--ngang .the__co { font-size: 9.5px; letter-spacing: .8px; padding: 4px 10px; line-height: 1.2; }
  .the--ngang:has(.the__co) { padding-top: 34px; }
  .chang { flex-direction: column; }
  .chang__mui { transform: rotate(90deg); }
  .hoc-phi { grid-template-columns: 1fr; }
  .gv-anh::before { inset: 14px -10px -14px 14px; }
  .footer__inner { grid-template-columns: 1fr; gap: 30px; }
  .footer__col a { display: inline-block; padding: 5px 0; }
  .hd > summary { padding: 18px 18px; font-size: 1rem; }
  .hd__tra { padding: 0 18px 20px; }

  /* Thanh mua nhanh dính đáy: giá trái, nút phải */
  .thanh-mua {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid var(--vien-2);
    box-shadow: 0 -12px 30px -18px rgba(118,83,154,.5);
    transform: translateY(110%); transition: transform .45s var(--ease);
  }
  .thanh-mua.show { transform: none; }
  .thanh-mua__gia { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.1; color: var(--hong); }
  .thanh-mua__gia small { display: block; font-weight: 700; font-size: 11px; color: var(--xam-500); }
  .thanh-mua .btn { padding: 13px 18px; font-size: 13px; }
  .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); right: 14px; }
  .dem-dk { left: 12px; right: 12px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: none; gap: 10px; padding: 7px 7px 7px 14px; }
  .dem-dk__chu { flex: 1; font-size: 12.5px; }
  .dem-dk__chu b { font-size: 15px; }
  .dem-dk__nut { padding: 9px 12px; font-size: 11.5px; }
  .dem-dk__dong { width: 24px; height: 24px; }
  .footer { padding-bottom: 76px; }
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
  html.reveal-on .reveal { opacity: 1 !important; transform: none !important; }
  .cta3d__faces { transform: none !important; }
  .cta3d__face:not(.cta3d__face--front) { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}