/* Trang chủ hoccungmay.vn (làm lại 03/11/2026). Chỉ trang chủ dùng file này; các trang khác vẫn dùng chung.css.
   Màu: Mây #51BEA1 (bộ nhận diện 02/11/2026) + màu cam đất của Claude #D97757 và nền kem #FAF9F5 (chủ yêu cầu 03/11/2026:
   "đúng màu thương hiệu + màu của claude"). Không dùng logo hay biểu tượng tia sáng của Claude.
   Tương phản đã kiểm: --xanh #277A63 trên --bg 4,9:1; --cam-chu #B04F2C trên --bg 5,0:1; --ink trên --bg 6,8:1.
   #51BEA1 và #D97757 chỉ dùng cho mảng màu, viền, hình, chữ rất lớn. Không có script: hiệu ứng thuần CSS. */
:root {
  --may: #51BEA1;
  --xanh: #277A63; --xanh-dam: #1E6A55; --xanh-nhat: #E3F4EE;
  --cam: #D97757;                  /* màu của Claude */
  --cam-chu: #B04F2C;              /* chữ nhỏ màu cam trên nền sáng */
  --cam-nhat: #F6E6DD;
  --bg: #FAF9F5; --paper: #FFFFFF; --paper-2: #F3F1EA;
  --ink: #535958; --ink-dam: #2F3534; --chu-phu: #666B6C; --line: #E4E1D6;
  --tren-nut: #FFFFFF;
  --toi: #1A1F1E;                  /* nền khối tối */
  --shadow: 0 1px 2px rgba(47, 53, 52, .06), 0 18px 40px -12px rgba(47, 53, 52, .18);
  --f: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --r: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --xanh: #7FD3BB; --xanh-dam: #A6E2D1; --xanh-nhat: #18302A;
    --cam-chu: #E8A487; --cam-nhat: #33231C;
    --bg: #131716; --paper: #1A201F; --paper-2: #202726;
    --ink: #D9DFDD; --ink-dam: #F2F4F4; --chu-phu: #A3ABA9; --line: #2B3432;
    --tren-nut: #0F2A23; --toi: #0E1211;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 18px 40px -12px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: var(--xanh); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--xanh); outline-offset: 3px; border-radius: 8px; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
.bo-qua { position: absolute; left: 8px; top: -60px; background: var(--paper); padding: 8px 12px; border-radius: 8px; z-index: 30; }
.bo-qua:focus { top: 8px; }
h1, h2, h3 { color: var(--ink-dam); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0; }

/* nút */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; font: 600 16px/1 var(--f); text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
  transition: transform .15s, background .15s, box-shadow .15s; }
.nut svg { width: 20px; height: 20px; flex: none; }
.nut:hover { transform: translateY(-1px); }
.nut-ban { background: var(--xanh); color: var(--tren-nut); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--may) 80%, transparent); }
.nut-ban:hover { background: var(--xanh-dam); color: var(--tren-nut); }
.nut-cam { background: var(--ink-dam); color: var(--bg); }
.nut-cam:hover { color: var(--bg); box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--cam) 90%, transparent); }
.nut-vien { border-color: var(--line); color: var(--ink-dam); background: var(--paper); }
.nut-vien:hover { border-color: var(--may); color: var(--ink-dam); }
.nut-nho { min-height: 40px; padding: 0 16px; font-size: 15px; }

/* đầu trang */
header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 12px 24px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex: none; }
.logo img { width: 38px; height: 38px; }
.logo-chu { font-weight: 600; font-size: 21px; letter-spacing: -.01em; color: var(--ink); white-space: nowrap; }
.logo-chu b { color: var(--may); font-weight: 600; }
nav.menu { display: flex; gap: 4px; flex: 1; }
nav.menu a { color: var(--chu-phu); text-decoration: none; font-size: 15px; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
nav.menu a:hover { color: var(--ink-dam); background: var(--paper-2); }
.dau-phai { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 1080px) { nav.menu { display: none; } }
@media (max-width: 520px) {
  .logo-chu { font-size: 18px; } .logo img { width: 32px; height: 32px; }
  .dau-phai .nut-vien { display: none; }
}

/* ===== hero ===== */
.hero { position: relative; padding: 72px 0 88px; isolation: isolate; overflow-x: clip; }
.hero::before { /* lưới chấm công nghệ */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 22%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 30%, transparent 75%); }
.hero::after { /* quầng màu Mây + Claude */
  content: ""; position: absolute; z-index: -1; width: 760px; height: 760px; right: -180px; top: -220px; border-radius: 50%;
  background: radial-gradient(circle at 35% 40%, color-mix(in srgb, var(--may) 38%, transparent), transparent 60%),
              radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--cam) 30%, transparent), transparent 58%);
  filter: blur(30px); animation: troi 14s ease-in-out infinite alternate; }
@keyframes troi { to { transform: translate(-40px, 30px) scale(1.06); } }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.nhan-tren { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); font-size: 14px; color: var(--chu-phu); margin-bottom: 22px; }
.nhan-tren i { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--may) 0 50%, var(--cam) 0); }
.hero h1 { font-size: clamp(40px, 6.4vw, 72px); }
.hero h1 .xanh { color: var(--may); }
.hero h1 .cam { background: linear-gradient(90deg, var(--may), var(--cam)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .loi { font-size: clamp(18px, 2.1vw, 21px); color: var(--chu-phu); margin: 22px 0 32px; max-width: 34ch; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 12px; }
.dam-bao { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 28px 0 0; font-size: 15px; color: var(--chu-phu); }
.dam-bao li { display: flex; align-items: center; gap: 8px; }
.dam-bao li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--may); }

/* ô bàn làm việc minh hoạ */
.ban { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow);
  overflow: hidden; font-size: 14px; }
.ban-dau { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.ban-dau i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.ban-dau span { margin-left: 10px; font: 500 12.5px var(--mono); color: var(--chu-phu); }
.ban-than { display: grid; grid-template-columns: 132px 1fr; min-height: 360px; }
.ban-menu { border-right: 1px solid var(--line); padding: 14px 10px; display: grid; align-content: start; gap: 4px; }
.ban-menu b { font-weight: 500; color: var(--chu-phu); padding: 7px 10px; border-radius: 10px; }
.ban-menu b.on { background: var(--xanh-nhat); color: var(--xanh); font-weight: 600; }
.ban-chinh { padding: 18px; display: grid; gap: 12px; align-content: start; }
.tien-do { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--chu-phu); }
.tien-do .vach { flex: 1; height: 6px; border-radius: 9px; background: var(--paper-2); overflow: hidden; }
.tien-do .vach i { display: block; height: 100%; width: 40%; border-radius: 9px; background: linear-gradient(90deg, var(--may), var(--cam)); animation: day 2.4s ease-out both .4s; }
@keyframes day { from { width: 0; } }
.tin { max-width: 88%; padding: 10px 14px; border-radius: 16px; line-height: 1.45; opacity: 0; animation: hien .5s ease-out forwards; }
.tin.may { background: var(--xanh-nhat); color: var(--ink-dam); border-bottom-left-radius: 4px; }
.tin.hv { justify-self: end; background: var(--paper-2); color: var(--ink-dam); border-bottom-right-radius: 4px; }
.tin.t1 { animation-delay: .5s; } .tin.t2 { animation-delay: 1.3s; } .tin.t3 { animation-delay: 2.1s; }
.tin small { display: block; font-size: 11.5px; font-weight: 600; color: var(--xanh); margin-bottom: 2px; }
.ket-qua { border: 1px dashed color-mix(in srgb, var(--cam) 60%, transparent); background: var(--cam-nhat); border-radius: 14px; padding: 10px 14px;
  display: flex; align-items: center; gap: 10px; opacity: 0; animation: hien .5s ease-out forwards 2.9s; }
.ket-qua .dau-tick { width: 28px; height: 28px; border-radius: 50%; background: var(--cam); color: #fff; display: grid; place-items: center; flex: none; }
.ket-qua .dau-tick svg { width: 16px; }
.ket-qua b { color: var(--ink-dam); font-weight: 600; } .ket-qua span { display: block; font-size: 12.5px; color: var(--cam-chu); }
@keyframes hien { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.nhan-gia { position: absolute; right: 12px; top: 10px; font-size: 11px; color: var(--chu-phu); background: var(--paper); border: 1px solid var(--line); padding: 2px 8px; border-radius: 99px; }
.noi { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; background: var(--paper); border: 1px solid var(--line);
  box-shadow: var(--shadow); border-radius: 14px; padding: 9px 13px; font-size: 13.5px; font-weight: 600; color: var(--ink-dam);
  animation: bong 5s ease-in-out infinite alternate; }
.noi i { width: 10px; height: 10px; border-radius: 50%; background: var(--may); box-shadow: 0 0 0 4px var(--xanh-nhat); }
.noi.n2 i { background: var(--cam); box-shadow: 0 0 0 4px var(--cam-nhat); }
.noi.n1 { left: -26px; bottom: 54px; } .noi.n2 { right: -18px; top: 64px; animation-delay: -2.5s; }
@keyframes bong { to { transform: translateY(-10px); } }
.khung-ban { position: relative; }

@media (max-width: 900px) {
  .hero { padding: 40px 0 64px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 44px; }
  .noi.n1 { left: 8px; bottom: -18px; } .noi.n2 { right: 8px; top: -18px; }
}
@media (max-width: 520px) {
  .ban-than { grid-template-columns: 1fr; } .ban-menu { display: flex; overflow: hidden; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; }
  .ban-menu b { white-space: nowrap; padding: 6px 10px; }
  .hang-nut .nut { flex: 1 1 100%; }
}

/* ===== dải số ===== */
.so-lieu { border-block: 1px solid var(--line); background: var(--paper); }
.so-lieu ul { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.so-lieu li { padding: 30px 20px; border-left: 1px solid var(--line); }
.so-lieu li:first-child { border-left: 0; }
.so-lieu b { display: block; font: 600 clamp(30px, 4vw, 42px)/1 var(--f); letter-spacing: -.03em; color: var(--ink-dam); margin-bottom: 8px; }
.so-lieu b em { font-style: normal; color: var(--may); }
.so-lieu li:nth-child(even) b em { color: var(--cam); }
.so-lieu span { font-size: 15px; color: var(--chu-phu); }
@media (max-width: 760px) {
  .so-lieu ul { grid-template-columns: 1fr 1fr; }
  .so-lieu li:nth-child(3) { border-left: 0; } .so-lieu li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ===== khối chung ===== */
.khoi { padding: 104px 0; }
.khoi.nen { background: var(--paper-2); }
.dau-khoi { max-width: 680px; margin-bottom: 52px; }
.dau-khoi.giua { margin-inline: auto; text-align: center; }
.mac { display: inline-block; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cam-chu); margin-bottom: 14px; }
.dau-khoi h2 { font-size: clamp(32px, 4.6vw, 50px); }
.dau-khoi p { margin-top: 16px; font-size: 19px; color: var(--chu-phu); }
@media (max-width: 760px) { .khoi { padding: 72px 0; } .dau-khoi { margin-bottom: 36px; } }

/* bốn bước */
.buoc { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: b; }
.buoc li { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px 24px; counter-increment: b;
  transition: transform .2s, border-color .2s; }
.buoc li:hover { transform: translateY(-4px); border-color: var(--may); }
.buoc li::before { content: "0" counter(b); position: absolute; right: 20px; top: 20px; font: 500 13px var(--mono); color: var(--chu-phu); }
.bt { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 22px; background: var(--xanh-nhat); color: var(--xanh); }
.buoc li:nth-child(even) .bt { background: var(--cam-nhat); color: var(--cam-chu); }
.bt svg { width: 26px; height: 26px; }
.buoc h3 { font-size: 20px; margin-bottom: 8px; }
.buoc p { font-size: 15.5px; color: var(--chu-phu); }
@media (max-width: 900px) { .buoc { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .buoc { grid-template-columns: 1fr; } }

/* bàn làm việc */
.khoi-ban { background: var(--toi); color: #C9D1CF; position: relative; overflow: hidden; isolation: isolate; }
.khoi-ban::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(600px 400px at 85% 10%, color-mix(in srgb, var(--may) 28%, transparent), transparent 70%),
              radial-gradient(500px 380px at 10% 100%, color-mix(in srgb, var(--cam) 24%, transparent), transparent 70%); }
.khoi-ban .wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.khoi-ban h2 { color: #F4F6F5; font-size: clamp(32px, 4.6vw, 50px); }
.khoi-ban .mac { color: #E8A487; }
.khoi-ban .loi { margin: 18px 0 30px; font-size: 19px; color: #AEB8B5; max-width: 40ch; }
.khoi-ban .nut-ban { background: var(--may); color: #0F2A23; }
.khoi-ban .nut-ban:hover { background: #7FD3BB; color: #0F2A23; }
.cach-vao { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; font-size: 15px; color: #AEB8B5; }
.cach-vao li { display: flex; gap: 12px; align-items: baseline; }
.cach-vao b { font: 500 12px var(--mono); color: #0F2A23; background: #7FD3BB; border-radius: 6px; padding: 2px 7px; flex: none; }
.o-ban { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.o-ban div { background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09); border-radius: var(--r); padding: 20px;
  transition: background .2s, border-color .2s; }
.o-ban div:hover { background: rgba(255, 255, 255, .07); border-color: color-mix(in srgb, var(--may) 60%, transparent); }
.o-ban div.rong { grid-column: 1 / -1; }
.o-ban svg { width: 24px; height: 24px; color: #7FD3BB; margin-bottom: 14px; }
.o-ban div:nth-child(even) svg { color: #E8A487; }
.o-ban h3 { color: #F4F6F5; font-size: 18px; margin-bottom: 4px; }
.o-ban p { font-size: 14.5px; color: #9AA5A2; }
@media (max-width: 900px) { .khoi-ban .wrap { grid-template-columns: 1fr; gap: 40px; } }

/* nghề */
.nghe { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 900px; margin: 0 auto; }
.nghe span { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: 999px; background: var(--paper);
  border: 1px solid var(--line); font-weight: 500; color: var(--ink-dam); }
.nghe span i { width: 8px; height: 8px; border-radius: 50%; background: var(--may); }
.nghe span:nth-child(even) i { background: var(--cam); }
.nghe span.khac { border-style: dashed; color: var(--chu-phu); }
.ghi { text-align: center; margin-top: 22px; font-size: 14.5px; color: var(--chu-phu); }

/* an toàn */
.an-toan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.an-toan div { padding: 26px 22px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); }
.an-toan svg { width: 28px; height: 28px; color: var(--xanh); margin-bottom: 16px; }
.an-toan h3 { font-size: 19px; margin-bottom: 6px; }
.an-toan p { font-size: 15.5px; color: var(--chu-phu); }
@media (max-width: 760px) { .an-toan { grid-template-columns: 1fr; } }

/* trang hệ sinh thái (/, QĐ-33): hero gọn một cột và thẻ chương trình .ct; mỗi chương trình một màu phụ (Claude: cam) */
.hero-gon { padding: 88px 0 72px; }
.hero-gon .wrap { grid-template-columns: 1fr; }
.hero-gon .loi { max-width: 46ch; }
.khoi-sat { padding-top: 24px; }
.ds-ct { display: grid; gap: 20px; }
.ct { --mau-ct: var(--cam); --mau-ct-nhat: var(--cam-nhat); --mau-ct-chu: var(--cam-chu);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line);
  border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); }
.ct-than { padding: clamp(26px, 4vw, 44px); border-top: 5px solid var(--mau-ct); }
.ct-nhan { display: inline-block; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mau-ct-chu);
  background: var(--mau-ct-nhat); padding: 4px 10px; border-radius: 8px; margin-bottom: 16px; }
.ct h3 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 12px; }
.ct-than > p { font-size: 18px; color: var(--chu-phu); max-width: 46ch; }
.ct .dam-bao { margin: 20px 0 28px; }
.ct-so { list-style: none; margin: 0; padding: clamp(22px, 3vw, 36px); display: grid; align-content: center; gap: 22px; background: var(--paper-2); }
.ct-so b { display: block; font: 600 clamp(30px, 3.6vw, 40px)/1 var(--f); letter-spacing: -.03em; color: var(--ink-dam); margin-bottom: 4px; }
.ct-so span { font-size: 15px; color: var(--chu-phu); }
@media (max-width: 820px) { .ct { grid-template-columns: 1fr; } .ct-so { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (max-width: 480px) { .ct-so { grid-template-columns: 1fr; } .ct .hang-nut .nut { flex: 1 1 100%; } }

/* lời mời cuối */
.moi { padding: 0 0 104px; }
.moi .hop { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(40px, 7vw, 76px) clamp(22px, 5vw, 64px);
  text-align: center; background: var(--paper); border: 1px solid var(--line); }
.moi .hop::before { content: ""; position: absolute; inset: -1px; z-index: -1;
  background: radial-gradient(500px 260px at 20% 0%, color-mix(in srgb, var(--may) 26%, transparent), transparent 70%),
              radial-gradient(500px 260px at 80% 100%, color-mix(in srgb, var(--cam) 22%, transparent), transparent 70%); }
.moi h2 { font-size: clamp(32px, 5vw, 54px); }
.moi p { margin: 16px auto 32px; max-width: 46ch; font-size: 19px; color: var(--chu-phu); }
.moi .hang-nut { justify-content: center; }

/* Logo kèm dòng "Sản phẩm của Blivano" (chủ duyệt 03/11/2026) */
.logo-chu { display: inline-grid; gap: 5px; line-height: 1; }
.logo-chu small { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--chu-phu); }

/* chân trang (03/11/2026): khối thương hiệu + 3 cột liên kết; dải dưới: công ty, câu độc lập */
footer.bot { border-top: 1px solid var(--line); background: var(--paper); color: var(--chu-phu); font-size: 14.5px; padding: 56px 0 28px; }
footer.bot .chan-tren { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px 40px; }
footer.bot .chan-hieu p { margin: 14px 0 18px; max-width: 30ch; }
footer.bot .chan-nut { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; font-weight: 600; font-size: 14px;
  text-decoration: none; color: var(--xanh); background: var(--xanh-nhat); }
footer.bot .chan-nut svg { width: 18px; height: 18px; }
footer.bot .chan-nut:hover { color: var(--xanh); filter: brightness(.97); }
footer.bot .chan-cot { display: grid; align-content: start; gap: 10px; }
footer.bot .chan-cot h2 { margin: 4px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dam, var(--ink)); }
footer.bot a { color: var(--chu-phu); text-decoration: none; }
footer.bot a:hover { color: var(--xanh); }
footer.bot .chan-duoi { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; font-size: 13px; }
footer.bot .chan-duoi p { margin: 0; }
footer.bot .chan-duoi a { text-decoration: underline; text-decoration-color: var(--line); }
footer.bot .logo img { width: 34px; height: 34px; }
footer.bot .logo-chu { font-size: 19px; }
@media (max-width: 860px) { footer.bot .chan-tren { grid-template-columns: 1fr 1fr 1fr; } footer.bot .chan-hieu { grid-column: 1 / -1; } }
@media (max-width: 520px) { footer.bot .chan-tren { grid-template-columns: 1fr 1fr; } footer.bot .chan-duoi { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .tin, .ket-qua { opacity: 1; }
}

/* ===== trang Về chúng tôi (03/11/2026) ===== */
.hero-nho { padding: 72px 0 40px; }
.hero-nho .wrap { grid-template-columns: 1fr; max-width: 900px; }
.hero-nho h1 { font-size: clamp(38px, 5.6vw, 64px); }
.hero-nho .loi { max-width: 46ch; margin-bottom: 0; }
.khoi#loi-ich { padding-top: 64px; }
.gia-tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gia-tri > div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 22px; transition: transform .2s, border-color .2s; }
.gia-tri > div:hover { transform: translateY(-4px); border-color: var(--may); }
.gia-tri > div:nth-child(odd) .bt { background: var(--cam-nhat); color: var(--cam-chu); }
.gia-tri h3 { font-size: 19px; margin-bottom: 6px; }
.gia-tri p { font-size: 15.5px; color: var(--chu-phu); }
.gia-tri .noi-bat { grid-row: span 3; display: flex; flex-direction: column; justify-content: flex-end; position: relative; overflow: hidden; isolation: isolate;
  background: var(--toi); border-color: transparent; }
.gia-tri .noi-bat::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(360px 260px at 90% 0%, color-mix(in srgb, var(--may) 40%, transparent), transparent 70%),
              radial-gradient(320px 240px at 0% 100%, color-mix(in srgb, var(--cam) 30%, transparent), transparent 70%); }
.gia-tri .noi-bat .bt { background: rgba(255, 255, 255, .08); color: #7FD3BB; margin-bottom: auto; }
.gia-tri .noi-bat h3 { color: #F4F6F5; font-size: clamp(24px, 2.6vw, 30px); margin: 40px 0 12px; }
.gia-tri .noi-bat p { color: #AEB8B5; font-size: 16.5px; }
@media (max-width: 900px) { .gia-tri { grid-template-columns: 1fr 1fr; } .gia-tri .noi-bat { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 520px) { .gia-tri { grid-template-columns: 1fr; } }

.cong-ty { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; }
.cong-ty h2 { font-size: clamp(32px, 4.6vw, 50px); }
.cong-ty .loi { margin: 18px 0 14px; font-size: 18px; color: var(--chu-phu); }
.cong-ty .loi b { color: var(--ink-dam); font-weight: 600; }
.khau-hieu { font-size: 20px; font-weight: 500; font-style: italic; color: var(--ink-dam); padding-left: 16px; border-left: 3px solid var(--cam); margin-bottom: 22px; }
.mang { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.mang span { font-size: 14px; padding: 7px 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-dam); }
.the-cty { background: var(--paper); border: 1px solid var(--line); border-radius: 22px; padding: 28px; box-shadow: var(--shadow); }
.the-cty dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 20px; font-size: 15px; }
.the-cty dt { color: var(--chu-phu); }
.the-cty dd { margin: 0; color: var(--ink-dam); font-weight: 500; }
.the-cty .doc-lap { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--chu-phu); }
.cho-dien { background: #FFF6D6; outline: 1.5px dashed #C9A227; border-radius: 4px; padding: 0 4px; color: #6B5300; font-weight: 400; }
@media (max-width: 900px) { .cong-ty { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 420px) { .the-cty dl { grid-template-columns: 1fr; gap: 2px; } .the-cty dd { margin-bottom: 10px; } }
.hero-cty { padding: 72px 0 80px; }
.hero-cty .wrap { align-items: start; }
.hero-cty h1 { font-size: clamp(34px, 4.8vw, 56px); }
.hero-cty .the-cty { margin-top: 8px; }
.hero-cty .wrap { grid-template-columns: 1fr; }
.hero-cty h1 { max-width: 20ch; }
.hero-cty .mang { max-width: 720px; }
.hero-cty .loi { max-width: 52ch; }

/* Phần mở đầu Về chúng tôi: chữ bên trái, sơ đồ 6 mảng Blivano bên phải (03/11/2026) */
.hero-cty .wrap { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero-cty .loi { margin-bottom: 18px; }
.he-sinh-thai { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: repeat(3, 1fr);
  gap: 22px 28px; align-items: center; padding: 34px 26px; min-height: 400px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow); }
.he-sinh-thai .day { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.he-sinh-thai .day path { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.nut-mang { position: relative; z-index: 1; display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink-dam); line-height: 1.3; }
.nut-mang::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--may); flex: none; }
.nut-mang:nth-of-type(even)::before { background: var(--cam); }
.m1 { grid-area: 1 / 1; } .m2 { grid-area: 2 / 1; } .m3 { grid-area: 3 / 1; }
.m4 { grid-area: 1 / 3; } .m5 { grid-area: 2 / 3; } .m6 { grid-area: 3 / 3; }
.tam { grid-area: 2 / 2; position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; }
.tam img { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 0 0 8px var(--xanh-nhat), 0 12px 30px -8px color-mix(in srgb, var(--may) 70%, transparent);
  animation: nhip 3.2s ease-in-out infinite; }
@keyframes nhip { 50% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--xanh-nhat) 50%, transparent), 0 12px 30px -8px color-mix(in srgb, var(--may) 70%, transparent); } }
.tam b { font-weight: 600; font-size: 15px; color: var(--ink-dam); letter-spacing: .02em; }
.nut-mang.sp { background: var(--paper); border: 1.5px solid var(--may); box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--may) 80%, transparent); padding: 9px 12px; }
.nut-mang.sp::before { display: none; }
.nut-mang.sp img { width: 30px; height: 30px; flex: none; }
.nut-mang.sp span { display: grid; font-weight: 600; }
.nut-mang.sp small { font-size: 11px; font-weight: 500; color: var(--chu-phu); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 900px) { .hero-cty .wrap { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 520px) {
  .he-sinh-thai { gap: 14px 10px; padding: 22px 12px; min-height: 0; }
  .nut-mang { font-size: 12.5px; padding: 9px 10px; gap: 7px; }
  .tam img { width: 56px; height: 56px; border-radius: 16px; }
  .nut-mang.sp img { width: 24px; height: 24px; }
}

/* Ô nổi bật "Cá nhân hoá": thêm ví dụ hai chương trình để ô không trống (03/11/2026) */
.gia-tri .noi-bat { justify-content: flex-start; }
.gia-tri .noi-bat .bt { margin-bottom: 0; }
.gia-tri .noi-bat h3 { margin: 22px 0 10px; }
.hai-lo-trinh { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
.lo-trinh { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 14px 16px; }
.lo-trinh b { display: flex; align-items: center; gap: 8px; color: #F4F6F5; font-size: 14.5px; font-weight: 600; margin-bottom: 10px; }
.lo-trinh b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7FD3BB; }
.lo-trinh.cam b::before { background: #E8A487; }
.lo-trinh ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: lt; }
.lo-trinh li { counter-increment: lt; display: flex; gap: 10px; font-size: 13.5px; color: #C9D1CF; }
.lo-trinh li::before { content: counter(lt); font: 500 11.5px/18px var(--mono); width: 18px; height: 18px; flex: none; text-align: center; border-radius: 5px;
  background: rgba(127, 211, 187, .16); color: #7FD3BB; }
.lo-trinh.cam li::before { background: rgba(232, 164, 135, .16); color: #E8A487; }
.hai-lo-trinh small { font-size: 11.5px; color: #8E9996; justify-self: end; }

/* ===== trang Gói học (làm lại 03/11/2026) ===== */
.chu-vip { color: #C15F3C; }
@media (prefers-color-scheme: dark) { .chu-vip { color: #E8A487; } }
.wrap.rong { max-width: 1400px; }
.hero-goi { padding: 64px 0 40px; }
.hero-goi .wrap { grid-template-columns: 1fr; }
.hero-goi .giua { text-align: center; max-width: 860px; margin: 0 auto; }
.hero-goi h1 { font-size: clamp(36px, 5vw, 58px); }
.hero-goi .loi { margin: 18px auto 26px; max-width: none; }
.diem-chung { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.diem-chung li { padding: 9px 16px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; color: var(--chu-phu); }
.diem-chung b { color: var(--ink-dam); font-weight: 600; }

.khoi-goi { padding: 20px 0 88px; }
.luoi-goi { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; padding-top: 14px; }
@media (max-width: 1379px) { .luoi-goi { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; } }
@media (max-width: 860px) { .luoi-goi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .luoi-goi { grid-template-columns: 1fr; } }
.goi-the { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 18px 20px; transition: transform .2s, box-shadow .2s, border-color .2s; }
.goi-the:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--may) 60%, var(--line)); }
.goi-the .huy { position: absolute; top: -12px; left: 16px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  background: var(--xanh); color: var(--tren-nut); box-shadow: 0 0 0 4px var(--bg); }
.goi-the.mien-phi { border: 2px solid var(--may); }
.bac { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; height: 18px; }
.bac i { width: 18px; height: 6px; border-radius: 3px; background: var(--paper-2); border: 1px solid var(--line); }
.bac i.on { background: var(--may); border-color: var(--may); }
.bac span { margin-left: 6px; font: 500 11.5px var(--mono); letter-spacing: .04em; color: var(--chu-phu); text-transform: uppercase; }
.goi-the h2 { font-size: 18px; letter-spacing: -.01em; line-height: 1.3; }
@media (min-width: 1380px) { .goi-the h2 { min-height: 2.6em; } }
.goi-the .gia { margin-top: 6px; font-size: 27px; font-weight: 600; letter-spacing: -.02em; color: var(--ink-dam); white-space: nowrap; line-height: 1.15; }
.goi-the .gia small { font-size: 13px; font-weight: 500; color: var(--chu-phu); letter-spacing: 0; }
.goi-the .han { font-size: 13.5px; color: var(--chu-phu); margin-top: 4px; }
.goi-the .dat { margin-top: 16px; padding: 10px 12px; border-radius: 12px; background: var(--xanh-nhat); color: var(--xanh); font-size: 14px; font-weight: 600;
  line-height: 1.4; min-height: 4.2em; display: flex; align-items: center; }
.goi-the .hoc { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 11px; }
.goi-the .hoc li { display: grid; grid-template-columns: 16px 1fr; column-gap: 8px; font-size: 13.5px; line-height: 1.4; }
.goi-the .hoc li::before { content: ""; grid-row: span 2; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: var(--xanh-nhat); box-shadow: inset 0 0 0 4px var(--xanh-nhat), inset 0 0 0 8px var(--may); }
.goi-the .hoc b { font-weight: 600; color: var(--ink-dam); }
.goi-the .hoc span { color: var(--chu-phu); font-size: 12.5px; }
.goi-the .so { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 auto; padding: 12px 0; border-block: 1px solid var(--line); }
.goi-the .so div { text-align: center; }
.goi-the .so div + div { border-left: 1px solid var(--line); }
.goi-the .so dt { font-size: 10.5px; color: var(--chu-phu); line-height: 1.25; padding: 0 2px; min-height: 2.5em; }
.goi-the .so dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; color: var(--ink-dam); white-space: nowrap; }
.goi-the > .nut { width: 100%; min-height: 44px; font-size: 14.5px; padding: 0 10px; margin-top: 18px; }
/* VIP: nền sáng, viền và chữ nhấn màu cam của Claude */
.goi-the.vip { --vip: #B04F2C; --vip-nhat: #FBEDE6; border: 2px solid #D97757; background: linear-gradient(180deg, var(--vip-nhat), var(--paper) 40%);
  box-shadow: 0 16px 36px -18px rgba(217, 119, 87, .7); }
@media (prefers-color-scheme: dark) { .goi-the.vip { --vip: #E8A487; --vip-nhat: #33231C; } }
.goi-the.vip:hover { border-color: #D97757; }
.goi-the.vip .huy { background: #B04F2C; color: #FFFFFF; }
.vip-bac span { margin-left: 0; color: var(--vip); }
.goi-the.vip h2, .goi-the.vip .gia { color: var(--vip); }
.goi-the.vip .dat { background: color-mix(in srgb, #D97757 14%, transparent); color: var(--vip); }
.goi-the.vip .hoc li::before { background: color-mix(in srgb, #D97757 16%, transparent); box-shadow: inset 0 0 0 4px color-mix(in srgb, #D97757 16%, var(--paper)), inset 0 0 0 8px #D97757; }
.goi-the.vip .gia-phu { margin: 18px 0 auto; padding: 12px 0; border-block: 1px solid var(--line); font-size: 12.5px; color: var(--chu-phu); line-height: 1.45; }
.goi-the.vip .gia-phu b { display: block; font-size: 15px; color: var(--vip); }
.nut-vip { background: #B04F2C; color: #FFFFFF; }
.nut-vip:hover { background: #8F3F23; color: #FFFFFF; }
.sap-mo { margin-top: 10px; font-size: 12px; color: var(--chu-phu); text-align: center; }
.ghi-goi { margin-top: 22px; font-size: 14px; color: var(--chu-phu); max-width: 900px; }

/* bảng so sánh */
.bang-cuon { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; }
table.so-sanh { border-collapse: collapse; width: 100%; min-width: 860px; font-size: 14px; }
table.so-sanh th, table.so-sanh td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
table.so-sanh thead th { background: var(--paper-2); font-weight: 600; color: var(--ink-dam); font-size: 14.5px; }
table.so-sanh tbody th { font-weight: 500; color: var(--chu-phu); width: 20%; }
table.so-sanh td { color: var(--ink-dam); }
table.so-sanh td.so { font-weight: 600; font-variant-numeric: tabular-nums; }
table.so-sanh tbody tr:last-child th, table.so-sanh tbody tr:last-child td { border-bottom: 0; }
table.so-sanh tbody tr:hover td, table.so-sanh tbody tr:hover th { background: color-mix(in srgb, var(--xanh-nhat) 50%, transparent); }

/* thanh toán */
.thanh-toan-luoi { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; }
.thanh-toan-luoi h2 { font-size: clamp(28px, 3.6vw, 40px); }
.loi-phu { margin-top: 14px; color: var(--chu-phu); }
.cac-buoc { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; counter-reset: tt; }
.cac-buoc li { counter-increment: tt; display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px; font-size: 15px; }
.cac-buoc li::before { content: counter(tt); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 15px var(--mono); background: var(--xanh-nhat); color: var(--xanh); }
.cac-buoc b { color: var(--ink-dam); }
.the-tk { background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); }
.the-tk h3 { font-size: 18px; margin-bottom: 18px; }
.the-tk dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 18px; font-size: 15px; }
.the-tk dt { color: var(--chu-phu); }
.the-tk dd { margin: 0; color: var(--ink-dam); font-weight: 500; }
.the-tk > p { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--chu-phu); }
@media (max-width: 860px) { .thanh-toan-luoi { grid-template-columns: 1fr; gap: 28px; } }

/* hỏi đáp */
.hoi-dap-luoi { display: grid; grid-template-columns: 1fr 1.8fr; gap: 56px; align-items: start; }
.hoi-dap-luoi .dau-khoi { position: sticky; top: 100px; margin-bottom: 0; }
.hoi-dap-luoi .dau-khoi .nut { margin-top: 22px; }
.hoi-dap { display: grid; gap: 10px; }
.hoi-dap details { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; transition: border-color .2s; }
.hoi-dap details[open] { border-color: color-mix(in srgb, var(--may) 60%, var(--line)); }
.hoi-dap summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; position: relative; font-weight: 600; color: var(--ink-dam); font-size: 15.5px; }
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; background: var(--paper-2); color: var(--chu-phu); font: 500 18px/1 var(--mono); }
.hoi-dap details[open] summary::after { content: "−"; background: var(--xanh-nhat); color: var(--xanh); }
.hoi-dap details > div { padding: 0 18px 16px; color: var(--chu-phu); font-size: 15px; display: grid; gap: 10px; }
@media (max-width: 860px) { .hoi-dap-luoi { grid-template-columns: 1fr; gap: 28px; } .hoi-dap-luoi .dau-khoi { position: static; } }
.goi-the.vip .gia { white-space: normal; }
.goi-the.vip .gia small { white-space: nowrap; }
/* Dòng nổi bật "Hoàn tiền" (chủ yêu cầu 03/11/2026) */
.hoan-tien { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 11px 20px; border-radius: 999px; font-size: 16px; color: var(--ink-dam);
  background: color-mix(in srgb, #D97757 12%, var(--paper)); border: 1.5px solid #D97757; box-shadow: 0 10px 24px -14px rgba(217, 119, 87, .8); }
.hoan-tien svg { width: 22px; height: 22px; flex: none; color: #C15F3C; }
.hoan-tien b { color: #C15F3C; font-weight: 700; }
@media (prefers-color-scheme: dark) { .hoan-tien svg, .hoan-tien b { color: #E8A487; } }
/* Dòng "Hoàn tiền" ngay dưới câu "Gói lớn đã gồm trọn gói nhỏ…", cùng cỡ chữ (chủ yêu cầu 03/11/2026) */
.hero-goi .loi { margin-bottom: 14px; }
.hero-goi .hoan-tien { margin: 0 0 26px; font-size: clamp(18px, 2.1vw, 21px); padding: 10px 22px; }
.hero-goi .hoan-tien svg { width: 24px; height: 24px; }
.goi-the.vip .rieng-tu { margin-top: 14px; font-size: 12px; color: var(--chu-phu); line-height: 1.45; }
.goi-the .vi-du-goi { margin-top: 14px; padding: 9px 11px; border-radius: 10px; border: 1px dashed var(--line); font-size: 12.5px; font-style: italic; color: var(--chu-phu); line-height: 1.45; }
.goi-the .so dd { font-size: clamp(13px, 1.2vw, 17px); }
.goi-the .so dd.chu { font-size: 13px; line-height: 1.6; }

/* Số bài học bấm được, mở danh sách bài của gói (chủ yêu cầu 04/11/2026; thuần CSS :target) */
.goi-the .so a.xem-bai { display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px 1px 8px; border-radius: 8px; color: var(--xanh); text-decoration: none;
  background: var(--xanh-nhat); transition: background .15s; }
.goi-the .so a.xem-bai:hover { background: color-mix(in srgb, var(--may) 30%, var(--paper)); }
.goi-the .so a.xem-bai svg { width: 13px; height: 13px; }
.hop-bai { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 16px; }
.hop-bai:target { display: grid; }
.hop-bai .nen-dong { position: absolute; inset: 0; background: rgba(20, 24, 23, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.khung-bai { position: relative; width: min(640px, 100%); max-height: min(86vh, 820px); display: flex; flex-direction: column; background: var(--paper);
  border-radius: 22px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); overflow: hidden; animation: hien-bai .2s ease-out; }
@keyframes hien-bai { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.dau-bai { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.dau-bai .mac { margin-bottom: 6px; }
.dau-bai h2 { font-size: 22px; }
.dau-bai .dong { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 24px; line-height: 1; text-decoration: none;
  color: var(--chu-phu); background: var(--paper-2); }
.dau-bai .dong:hover { color: var(--ink-dam); }
.than-bai { overflow-y: auto; padding: 16px 24px 22px; display: grid; gap: 10px; }
.than-bai details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.than-bai details[open] { background: var(--paper); border-color: color-mix(in srgb, var(--may) 55%, var(--line)); }
.than-bai summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px;
  font-weight: 600; color: var(--ink-dam); font-size: 15px; }
.than-bai summary::-webkit-details-marker { display: none; }
.than-bai summary em { flex: none; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--chu-phu); }
.than-bai details[open] summary em { color: var(--xanh); }
.than-bai ol { margin: 0; padding: 0 14px 12px 44px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink); }
.than-bai ol li::marker { font: 500 12.5px var(--mono); color: var(--chu-phu); }
.ghi-bai { font-size: 13.5px; color: var(--chu-phu); }

/* Cửa sổ "Bài có chấm" và "Ghi nhận" (04/11/2026) */
.khoi-tt { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--bg); }
.khoi-tt h3 { font-size: 15px; margin-bottom: 10px; }
.khoi-tt ol { margin: 0; padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; }
.khoi-tt ol li::marker { font: 500 12.5px var(--mono); color: var(--chu-phu); }
.khoi-tt.lon { background: color-mix(in srgb, var(--may) 12%, var(--paper)); border-color: color-mix(in srgb, var(--may) 50%, var(--line)); }
.khoi-tt.lon p { font-weight: 600; color: var(--xanh); }
.dau-tick { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; font-size: 14.5px; }
.dau-tick li { position: relative; padding-left: 24px; }
.dau-tick li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 12px; height: 7px; border-left: 2.5px solid var(--may); border-bottom: 2.5px solid var(--may); transform: rotate(-45deg); }
.bang-so { margin: 0; display: grid; gap: 0; }
.bang-so > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.bang-so > div:first-child { border-top: 0; padding-top: 0; }
.bang-so dt { color: var(--ink); display: grid; gap: 2px; }
.bang-so dt b { font-weight: 600; color: var(--ink-dam); }
.bang-so dt span { font-size: 12.5px; color: var(--chu-phu); }
.bang-so dd { margin: 0; flex: none; min-width: 40px; text-align: right; font-size: 18px; font-weight: 600; color: var(--ink-dam); font-variant-numeric: tabular-nums; }
.ghi-bai a { color: var(--xanh); }