/* ══════════════════════════════════════════════════════════════════════
   TOTA CLASS — LANDING PAGE  (www.totaclass.com)
   Dựng 08/08/2026 theo `Tota-Class-Website-Specification.md`.

   ⚠️ SÀN TRÌNH DUYỆT: Chrome 84 — giống cả dự án (CLAUDE.md mục 5).
      KHÔNG dùng: CSS lồng nhau · :has() · :is() · :where() · @layer ·
      color-mix() · aspect-ratio · inset: · dvh/svh · text-wrap:balance ·
      justify-content:safe.
      Được dùng: gap (84) · clamp() (79) · position:sticky (56) ·
      backdrop-filter kèm -webkit- (76) · IntersectionObserver (51).
      Vì sao khắt khe dù đây là trang web chứ không phải app: khách tiềm
      năng mở bằng chính chiếc điện thoại cũ mà học viên của họ đang dùng.

   MÀU lấy từ dấu ấn Tota Class thật (src/totaclass-join.html:47-49):
      đỏ #d42d2d · mực #1a1f2e. Không tự nghĩ màu thương hiệu mới.
      Spec §6 đề xuất "xanh công nghệ làm chủ đạo" — KHÔNG theo, vì thương
      hiệu đang chạy thật là đỏ + mực. Indigo giữ vai màu nhấn phụ.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --do:#d42d2d;
  --do-dam:#ab1f1f;
  --do-nhat:#fdf1f1;
  --muc:#141a2e;
  --muc-2:#1e2740;
  --chu:#39415a;
  --chu2:#69718a;
  --chu3:#9aa1b5;
  --cham:#4f46e5;
  --cham-nhat:#eef0ff;
  --xanh:#16a34a;
  --xanh-nhat:#effaf3;
  --cam:#d97706;
  --giay:#ffffff;
  --nen:#fbfaf8;
  --nen2:#f4f2ef;
  --vien:#e7e4de;
  --vien-mo:#f0eeea;
  --bong-1:0 1px 2px rgba(20,26,46,.05);
  --bong-2:0 1px 3px rgba(20,26,46,.06), 0 10px 26px rgba(20,26,46,.06);
  --bong-3:0 2px 6px rgba(20,26,46,.07), 0 26px 60px rgba(20,26,46,.11);
  --r:14px;
  --r-lon:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}

body{
  background:var(--nen);
  color:var(--chu);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;           /* chặn tràn ngang do các khối trang trí */
}

/* 🔴 `height:auto` KHÔNG được bỏ. Mọi thẻ <img> ở đây đều ghi `width`/`height`
   thật (để trình duyệt chừa sẵn chỗ, tránh giật bố cục lúc ảnh về). Nhưng hai
   thuộc tính đó cũng là "presentational hint" — thiếu `height:auto` thì chiều
   cao 1290 của ảnh điện thoại thắng, và khung máy bị kéo cao gấp đôi. Đã thấy
   tận mắt lúc dựng, không phải lo xa. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}

/* Bỏ qua tới nội dung — bắt buộc cho bàn phím (spec §36) */
.bo-qua{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--muc);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;
  text-decoration:none;font-weight:600;
}
.bo-qua:focus{left:0}

:focus-visible{outline:3px solid var(--cham);outline-offset:2px;border-radius:4px}

/* ══ KHUNG CHUNG ══════════════════════════════════════════════════════ */
.khung{max-width:1180px;margin:0 auto;padding:0 22px}
.khung-hep{max-width:860px;margin:0 auto;padding:0 22px}

section{padding:clamp(64px,8vw,116px) 0}
section.mong{padding:clamp(40px,5vw,68px) 0}

/* Thanh đỉnh dính cao 66px — không trừ ra thì mỗi lần bấm menu, tiêu đề của
   khối vừa nhảy tới bị thanh đó che mất. `scroll-margin-top` có từ Chrome 69. */
section[id]{scroll-margin-top:80px}

.nen-2{background:var(--nen2)}
.nen-trang{background:var(--giay)}

/* Khối nền tối — dùng để đánh nhịp: VẤN ĐỀ tối, GIẢI PHÁP sáng */
.toi{background:var(--muc);color:#c9cee0}
.toi h2,.toi h3,.toi strong,.toi b{color:#fff}
.toi .dan{color:#9aa3bd}

/* ── Chữ ─────────────────────────────────────────────────────────────── */
.nhan{
  display:inline-block;margin:0 0 16px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--do);
}
.toi .nhan{color:#ff8a8a}

h1,h2,h3{color:var(--muc);font-weight:800;letter-spacing:-.6px;margin:0}
h1{font-size:clamp(34px,4.8vw,56px);line-height:1.1}
h2{font-size:clamp(27px,3.9vw,44px);line-height:1.16;margin-bottom:16px}
h3{font-size:19px;line-height:1.35;letter-spacing:-.2px}

.dan{font-size:clamp(17px,1.6vw,20px);color:var(--chu2);margin:0 0 34px;max-width:64ch}
.dan b{color:var(--chu);font-weight:600}
.giua{text-align:center}
.giua .dan{margin-left:auto;margin-right:auto}
.giua .nhan{display:block}
/* Tiêu đề căn giữa phải có bề ngang tối đa, nếu không nó trải hết 1136px và
   dòng cuối rơi lại đúng một từ ("…một hệ / thống."). Đo trên 1440px.
   ⚠️ Chặn bằng `px` chứ KHÔNG bằng `ch`: `ch` đo theo cỡ chữ đang có, mà cỡ
   chữ ở đây là `clamp()` — nên trên màn hẹp nó siết thêm một lần nữa và câu
   ngắn cũng bị bẻ dòng. Thử 24ch trước, đúng lỗi đó. */
.giua h2{max-width:1000px;margin-left:auto;margin-right:auto}

/* ── Nút ─────────────────────────────────────────────────────────────── */
.nut{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;border-radius:999px;
  padding:14px 26px;font-size:16px;font-weight:650;font-family:inherit;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.nut-chinh{background:var(--do);color:#fff;box-shadow:0 4px 14px rgba(212,45,45,.28)}
.nut-chinh:hover{background:var(--do-dam);transform:translateY(-2px);box-shadow:0 8px 22px rgba(212,45,45,.34)}
.nut-phu{background:var(--giay);color:var(--muc);border-color:var(--vien);box-shadow:var(--bong-1)}
.nut-phu:hover{border-color:var(--chu3);transform:translateY(-2px)}
.toi .nut-phu{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.22)}
.nut-nho{padding:9px 18px;font-size:14.5px}
.hang-nut{display:flex;flex-wrap:wrap;gap:12px}

/* ══ THANH ĐỈNH ═══════════════════════════════════════════════════════ */
.dinh{
  position:sticky;top:0;z-index:100;
  background:rgba(251,250,248,.86);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.dinh.da-cuon{border-bottom-color:var(--vien);box-shadow:0 1px 14px rgba(20,26,46,.05)}
.dinh .trong{display:flex;align-items:center;gap:26px;height:66px}

.dau-an{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:800;font-size:21px;letter-spacing:-.5px;flex:none}
.dau-an .a{color:var(--do)}
.dau-an .b{color:var(--muc)}
.dau-an .the{font-size:11.5px;font-weight:700;color:var(--do);border:1.5px solid var(--do);border-radius:7px;padding:2px 7px;letter-spacing:0}

.menu{display:flex;align-items:center;gap:4px;margin-left:auto}
.menu a{
  text-decoration:none;color:var(--chu2);font-size:15px;font-weight:550;
  padding:8px 13px;border-radius:9px;transition:color .15s ease,background .15s ease;
}
.menu a:hover{color:var(--muc);background:var(--nen2)}
.menu .chi-nho{display:none}
.dinh-nut{display:flex;align-items:center;gap:10px;flex:none}

.nut-menu{display:none;margin-left:auto;background:none;border:1px solid var(--vien);border-radius:10px;padding:9px 11px;cursor:pointer;line-height:0}
.nut-menu span{display:block;width:19px;height:2px;background:var(--muc);border-radius:2px}
.nut-menu span+span{margin-top:4px}

/* ══ HERO ═════════════════════════════════════════════════════════════ */
.hero{position:relative;padding:clamp(46px,6vw,84px) 0 clamp(60px,7vw,96px);overflow:hidden}
/* Nền: lưới rất nhạt + hai quầng sáng. Không gradient cầu vồng (spec §6). */
.hero-nen{position:absolute;top:0;left:0;right:0;height:100%;pointer-events:none;z-index:0}
.hero-luoi{
  position:absolute;top:0;left:0;right:0;height:100%;
  background-image:linear-gradient(var(--vien-mo) 1px,transparent 1px),
                   linear-gradient(90deg,var(--vien-mo) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 25%,transparent 78%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 25%,#000 25%,transparent 78%);
  opacity:.9;
}
.hero-quang{position:absolute;border-radius:50%;filter:blur(78px);opacity:.5}
.hero-quang.q1{width:520px;height:420px;top:-130px;left:-120px;background:rgba(212,45,45,.13)}
.hero-quang.q2{width:520px;height:420px;top:-60px;right:-140px;background:rgba(79,70,229,.13)}
.hero .khung{position:relative;z-index:1}

.hero-luoi-cot{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,4vw,50px);align-items:center}
/* KHÔNG đặt max-width theo `ch` ở đây — cột đã hẹp sẵn, chặn thêm là câu
   tiêu đề vỡ thành 4 dòng và dòng cuối chỉ còn chữ "sách." */
.hero h1{margin-bottom:20px}
.hero .dan{margin-bottom:28px;max-width:52ch}

.hero-yen{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px;font-size:14.5px;color:var(--chu2)}
.hero-yen span{display:inline-flex;align-items:center;gap:7px}
.hero-yen .tick{color:var(--xanh);font-weight:800}

/* ── Dựng lại sản phẩm bằng CSS (spec §8: không dùng ảnh stock) ─────── */
/* Chừa chỗ bên phải và bên dưới cho chiếc điện thoại chồm ra — không chừa thì
   nó nằm đè lên cột số liệu của cửa sổ máy tính, che mất đúng thứ đáng xem. */
.san-pham{position:relative;padding:0 112px 54px 0}

.cua-so{
  background:var(--giay);border:1px solid var(--vien);border-radius:16px;
  box-shadow:var(--bong-3);overflow:hidden;
  /* Nghiêng NHẸ thôi. -7deg làm mép phải chồm ra khỏi cột và bị cắt ở mép
     màn hình 1440px — đo được, không đoán. */
  transform:perspective(1600px) rotateY(-4deg) rotateX(1.5deg);
  transform-origin:left center;
}
.cua-so-thanh{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--nen2);border-bottom:1px solid var(--vien)}
.cua-so-thanh i{width:9px;height:9px;border-radius:50%;background:#dcd8d2;display:block}
.cua-so-thanh .dc{
  margin-left:10px;font-size:11.5px;color:var(--chu3);font-style:normal;
  background:var(--giay);border:1px solid var(--vien);border-radius:999px;padding:3px 12px;
}
.cua-so-than{display:grid;grid-template-columns:126px minmax(0,1fr)}

.canh{background:#fcfbfa;border-right:1px solid var(--vien-mo);padding:12px 9px}
.canh b{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--chu3);padding:4px 8px 8px}
.canh a{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--chu2);padding:6px 8px;border-radius:8px;text-decoration:none}
.canh a.dang{background:var(--do-nhat);color:var(--do);font-weight:650}
.canh a i{font-style:normal;font-size:12px;opacity:.85}

.than{padding:15px 16px 18px;min-width:0}
.than-dau{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.than-dau b{font-size:14.5px;color:var(--muc);font-weight:750}
.than-dau span{font-size:11.5px;color:var(--chu3)}

.o-so{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:13px}
.o-so div{background:var(--nen);border:1px solid var(--vien-mo);border-radius:11px;padding:9px 11px}
.o-so em{display:block;font-style:normal;font-size:10.5px;color:var(--chu3);letter-spacing:.02em}
.o-so b{display:block;font-size:19px;color:var(--muc);font-weight:800;letter-spacing:-.5px;line-height:1.25}
.o-so .len{font-size:10.5px;color:var(--xanh);font-weight:650}

.bang-mini{border:1px solid var(--vien-mo);border-radius:11px;overflow:hidden}
.bang-mini div{display:grid;grid-template-columns:minmax(0,1fr) 62px 54px;gap:8px;align-items:center;padding:7px 11px;font-size:12px;border-top:1px solid var(--vien-mo)}
.bang-mini div:first-child{border-top:0;background:#fcfbfa;color:var(--chu3);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase}
.bang-mini span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bang-mini .ten{color:var(--muc);font-weight:600}
.the-tt{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tt-xong{background:var(--xanh-nhat);color:var(--xanh)}
.tt-cho{background:#fff6e8;color:var(--cam)}
.thanh-nho{height:5px;border-radius:999px;background:var(--vien);overflow:hidden}
.thanh-nho i{display:block;height:100%;border-radius:999px;background:var(--do);width:0;transition:width 1.1s cubic-bezier(.22,1,.36,1)}

/* Điện thoại: KHUNG dựng bằng CSS, MÀN HÌNH là ảnh chụp thật */
.dien-thoai{
  position:absolute;right:0;bottom:0;width:168px;
  background:#10141f;border-radius:26px;padding:7px;
  box-shadow:0 3px 10px rgba(20,26,46,.16), 0 30px 60px rgba(20,26,46,.26);
}
.dien-thoai::before{
  content:"";position:absolute;top:13px;left:50%;margin-left:-24px;
  width:48px;height:5px;border-radius:999px;background:#2b3040;z-index:2;
}
.dien-thoai img{border-radius:20px;width:100%}

/* Thẻ nổi — mỗi thẻ là một việc CÓ THẬT trong sản phẩm */
.the-noi{
  position:absolute;z-index:3;
  background:rgba(255,255,255,.97);border:1px solid var(--vien);
  border-radius:13px;padding:9px 13px;box-shadow:var(--bong-2);
  display:flex;align-items:center;gap:10px;
  font-size:12.5px;color:var(--chu2);white-space:nowrap;
}
.the-noi b{display:block;color:var(--muc);font-size:13px;font-weight:700;line-height:1.35}
.the-noi .bieu{font-size:17px;line-height:1}
/* Ba thẻ nổi phải nằm Ở MÉP, không nằm giữa cửa sổ: đè lên bảng học viên là
   che mất chính thứ đang muốn khoe. Bản đầu đặt ở `left:-26px/-42px` với
   `top:6%/44%` và cả ba rơi đúng vào giữa màn — đo trên 1440px mới thấy. */
.the-noi.t1{top:-26px;left:-42px}
.the-noi.t2{bottom:8px;left:-46px}
.the-noi.t3{bottom:-14px;right:-24px}

.cham-song{position:relative;width:9px;height:9px;border-radius:50%;background:var(--xanh);flex:none}
.cham-song::after{
  content:"";position:absolute;top:-4px;left:-4px;width:17px;height:17px;
  border-radius:50%;border:2px solid var(--xanh);opacity:.55;
  animation:song 2.1s ease-out infinite;
}
@keyframes song{0%{transform:scale(.5);opacity:.7}100%{transform:scale(1.25);opacity:0}}

/* ══ DẢI CAM KẾT ══════════════════════════════════════════════════════ */
.dai-hua{border-top:1px solid var(--vien);border-bottom:1px solid var(--vien);background:var(--giay)}
.dai-hua .trong{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px 26px;padding:24px 0}
.dai-hua .o{display:flex;align-items:flex-start;gap:11px;padding:6px 0}
.dai-hua .bieu{font-size:19px;line-height:1.25;flex:none}
.dai-hua b{display:block;color:var(--muc);font-size:14.5px;font-weight:700;line-height:1.4}
.dai-hua span{font-size:13px;color:var(--chu2);line-height:1.5}

/* ══ CÔNG CỤ RỜI RẠC (nền tối) ════════════════════════════════════════ */
.cong-cu .chum{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  max-width:760px;margin:0 auto 30px;
}
.manh{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:12px;padding:12px 20px;font-size:15.5px;font-weight:600;color:#d5d9e8;
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.manh .bieu{font-size:17px;line-height:1}
.cong-cu .noi-giua{text-align:center;font-size:clamp(17px,1.8vw,21px);color:#9aa3bd;max-width:60ch;margin:0 auto 34px}
.cong-cu .noi-giua b{color:#fff;font-weight:650}

.gom-lai{
  max-width:520px;margin:0 auto;text-align:center;
  background:linear-gradient(180deg,rgba(212,45,45,.15),rgba(212,45,45,.05));
  border:1px solid rgba(212,45,45,.35);border-radius:var(--r-lon);
  padding:26px 28px;
}
.gom-lai .mui{font-size:22px;color:#ff8a8a;line-height:1;margin-bottom:12px}
.gom-lai b{display:block;font-size:clamp(19px,2.2vw,25px);color:#fff;font-weight:750;letter-spacing:-.3px;line-height:1.3}
.gom-lai span{display:block;margin-top:8px;font-size:15px;color:#9aa3bd}

/* ══ THẺ NỖI ĐAU ══════════════════════════════════════════════════════ */
.luoi-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.luoi-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.luoi-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px}

.the-dau{
  background:var(--giay);border:1px solid var(--vien);border-radius:var(--r);
  padding:24px 24px 26px;box-shadow:var(--bong-1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.the-dau:hover{transform:translateY(-3px);box-shadow:var(--bong-2);border-color:#dcd7cf}
.the-dau .so{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;
  color:var(--do);background:var(--do-nhat);border-radius:7px;padding:3px 9px;margin-bottom:13px;
}
.the-dau h3{margin-bottom:7px}
.the-dau p{margin:0;font-size:15px;color:var(--chu2);line-height:1.6}

/* ══ TRƯỚC → SAU ══════════════════════════════════════════════════════ */
.cong-tac{
  display:inline-flex;background:var(--giay);border:1px solid var(--vien);
  border-radius:999px;padding:4px;gap:2px;margin-bottom:26px;box-shadow:var(--bong-1);
}
.cong-tac button{
  border:0;background:none;border-radius:999px;padding:9px 22px;
  font-size:14.5px;font-weight:650;font-family:inherit;color:var(--chu2);cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.cong-tac button.dang{background:var(--muc);color:#fff}

.doi-chieu{display:flex;flex-direction:column;gap:8px}
.hang-dc{
  display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);
  align-items:center;gap:12px;
}
.o-tay,.o-may{
  border-radius:12px;padding:13px 17px;display:flex;align-items:center;gap:11px;
  min-width:0;font-size:15.5px;
  transition:opacity .3s ease, transform .3s ease;
}
.o-tay{background:var(--nen2);border:1px solid var(--vien);color:var(--chu2)}
.o-may{background:var(--do-nhat);border:1px solid #f3d6d6;color:var(--muc);font-weight:600}
.o-tay .bieu,.o-may .bieu{font-size:18px;flex:none;line-height:1}
.mui-dc{text-align:center;color:var(--chu3);font-size:17px;line-height:1}

/* Trên điện thoại: chỉ hiện MỘT cột theo công tắc, không ép 3 cột bé xíu */
body.chi-truoc .hang-dc .o-may,
body.chi-sau  .hang-dc .o-tay{opacity:.3}

/* ══ TUYÊN NGÔN ═══════════════════════════════════════════════════════ */
.tuyen-ngon{text-align:center}
.tuyen-ngon .to{
  font-size:clamp(24px,3.4vw,40px);font-weight:800;color:var(--muc);
  letter-spacing:-.6px;line-height:1.25;max-width:26ch;margin:0 auto 30px;
}
.cua-ban{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:30px}
.cua-ban span{
  background:var(--giay);border:1px solid var(--vien);border-radius:999px;
  padding:9px 20px;font-size:15.5px;color:var(--chu);box-shadow:var(--bong-1);
}
.cua-ban span b{color:var(--do)}
.chot-nho{
  display:inline-block;background:var(--muc);color:#fff;border-radius:999px;
  padding:12px 28px;font-size:16px;font-weight:650;
}

/* ══ VÒNG ĐỜI ═════════════════════════════════════════════════════════ */
.vong{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:9px;max-width:920px;margin:0 auto}
.buoc{
  background:var(--giay);border:1px solid var(--vien);border-radius:11px;
  padding:11px 18px;font-size:15px;font-weight:600;color:var(--muc);
  box-shadow:var(--bong-1);display:inline-flex;align-items:center;gap:8px;
}
.buoc i{font-style:normal;font-size:15px;line-height:1}
.buoc.nhan-manh{background:var(--muc);color:#fff;border-color:var(--muc)}
.vong .mui{color:var(--chu3);font-size:16px;line-height:1}
.vong-chot{
  margin:32px auto 0;max-width:64ch;text-align:center;
  font-size:17px;color:var(--chu2);
}
.vong-chot b{color:var(--muc)}

/* ══ ẢNH CHỤP THẬT ════════════════════════════════════════════════════ */
.anh-that{
  border:1px solid var(--vien);border-radius:var(--r);overflow:hidden;
  background:var(--giay);box-shadow:var(--bong-2);
}
.anh-that img{width:100%;height:auto}
/* 🔴 KHÔNG dùng `display:flex` ở đây. Chú thích ảnh có chỗ chứa <b> để nhấn
   một cụm ("70 điểm là nỗ lực") — với flex thì mỗi thẻ con thành MỘT Ô riêng,
   và câu bị xé thành ba cột rời nhau. Đã thấy tận mắt ở khối "Theo dõi tiến
   bộ". Chữ chảy trong dòng thì phải để nó là dòng chữ bình thường. */
.chu-anh{margin-top:11px;font-size:13px;color:var(--chu3);line-height:1.55}
.chu-anh .bieu{font-size:14px;margin-right:5px}

.hai-ben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,54px);align-items:center}
.hai-ben.dao .ben-chu{order:2}

/* ── Ảnh LỚN, đặt trọn bề ngang ──────────────────────────────────────
   🔴 Vì sao có kiểu này thay vì nhét ảnh vào một cột của `.hai-ben`:
   ảnh chụp màn máy tính rộng 1387px, đút vào cột 540px là còn 39% — chữ
   và CON SỐ trong ảnh không đọc nổi nữa. Mà con số trong ảnh chính là thứ
   thuyết phục khách. Quyển giới thiệu cũ đã rút ra đúng bài học này
   (ghi trong mục lục của nó: bỏ lối "mỗi trang một ảnh" vì ảnh nhỏ quá).
   1000px = 72% cỡ gốc, đọc được. */
.anh-to{max-width:1000px;margin:0 auto}
.chu-anh.giua-anh{text-align:center;margin-bottom:6px}
.y-chinh.ba-cot{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  gap:24px 30px;margin-top:34px;max-width:1060px;margin-left:auto;margin-right:auto;
}
.khoi-anh+.khoi-anh{margin-top:34px}

/* ══ DANH SÁCH CÓ SỐ ══════════════════════════════════════════════════ */
.y-chinh{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.y-chinh li{display:flex;gap:13px;align-items:flex-start}
.y-chinh .so{
  flex:none;width:25px;height:25px;border-radius:8px;background:var(--do-nhat);
  color:var(--do);font-size:12.5px;font-weight:800;
  display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.y-chinh strong{display:block;color:var(--muc);font-size:16px;font-weight:700;line-height:1.4}
.y-chinh .mo{display:block;font-size:15px;color:var(--chu2);line-height:1.6;margin-top:2px}

/* ══ 4 KỸ NĂNG ════════════════════════════════════════════════════════ */
.ky-nang{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:24px 22px 26px;
  transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.ky-nang:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.ky-nang .bieu{font-size:25px;line-height:1;margin-bottom:13px;display:block}
.ky-nang h3{margin-bottom:8px;font-size:18px}
.ky-nang p{margin:0;font-size:14.5px;color:#9aa3bd;line-height:1.6}
.ky-nang .rieng{
  display:inline-block;margin-top:12px;font-size:12px;font-weight:650;
  color:#ffb3b3;background:rgba(212,45,45,.16);border-radius:999px;padding:3px 11px;
}

/* ══ 9 DẠNG LUYỆN ═════════════════════════════════════════════════════ */
.dang-luyen{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px}
.dang-luyen span{
  background:var(--giay);border:1px solid var(--vien);border-radius:10px;
  padding:9px 15px;font-size:14.5px;color:var(--chu);box-shadow:var(--bong-1);
  display:inline-flex;align-items:center;gap:7px;
}

/* ══ MÀN HỌC VIÊN DỰNG BẰNG CSS ═══════════════════════════════════════ */
.man-hv{
  background:var(--giay);border:1px solid var(--vien);border-radius:var(--r-lon);
  box-shadow:var(--bong-3);padding:22px 22px 24px;max-width:400px;
}
.hv-chao{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hv-chao b{font-size:19px;color:var(--muc);font-weight:750;letter-spacing:-.3px}
.hv-lua{
  display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;
  color:var(--cam);background:#fff6e8;border-radius:999px;padding:5px 12px;white-space:nowrap;
}
.hv-hom-nay{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--chu3);margin-bottom:9px}
.hv-viec{display:flex;flex-direction:column;gap:8px;margin-bottom:17px}
.hv-viec a{
  display:flex;align-items:center;gap:11px;text-decoration:none;
  background:var(--nen);border:1px solid var(--vien-mo);border-radius:11px;padding:11px 13px;
  transition:border-color .16s ease,transform .16s ease;
}
.hv-viec a:hover{border-color:var(--do);transform:translateX(3px)}
.hv-viec .bieu{font-size:17px;line-height:1;flex:none}
.hv-viec .noi{flex:1;min-width:0;font-size:14.5px;color:var(--muc);font-weight:600}
.hv-viec .dem{
  font-size:11.5px;font-weight:800;color:#fff;background:var(--do);
  border-radius:999px;padding:2px 9px;flex:none;
}
.hv-viec .di{color:var(--chu3);font-size:15px;line-height:1;flex:none}
.hv-td{border-top:1px solid var(--vien-mo);padding-top:15px}
.hv-td .dong{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;color:var(--chu2);margin-bottom:7px}
.hv-td .dong b{color:var(--muc);font-size:14px}
.thanh-td{height:8px;border-radius:999px;background:var(--nen2);overflow:hidden}
.thanh-td i{display:block;height:100%;border-radius:999px;background:var(--do);width:0;transition:width 1.2s cubic-bezier(.22,1,.36,1)}

/* ══ THẤY / KHÔNG THẤY ════════════════════════════════════════════════ */
.doi-lap{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.o-co,.o-khong{border-radius:var(--r);padding:24px 24px 26px;border:1px solid var(--vien)}
.o-co{background:var(--xanh-nhat);border-color:#cdeedb}
.o-khong{background:var(--nen2)}
.o-co .dau,.o-khong .dau{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:11px}
.o-co .dau{color:var(--xanh)}
.o-khong .dau{color:var(--chu3)}
.o-co h3,.o-khong h3{margin-bottom:9px}
.o-co p,.o-khong p{margin:0;font-size:15px;color:var(--chu2);line-height:1.6}

/* ══ HAI KIỂU KHÁCH ═══════════════════════════════════════════════════ */
.kieu-khach{
  background:var(--giay);border:1px solid var(--vien);border-radius:var(--r-lon);
  padding:28px 28px 30px;box-shadow:var(--bong-2);
}
.kieu-khach .bieu{font-size:26px;line-height:1;margin-bottom:14px;display:block}
.kieu-khach h3{font-size:22px;margin-bottom:8px}
.kieu-khach>p{margin:0 0 18px;font-size:15.5px;color:var(--chu2)}
.kieu-khach ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.kieu-khach li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--chu)}
.kieu-khach li .tick{color:var(--xanh);font-weight:800;flex:none;line-height:1.5}

.chip-module{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;justify-content:center}
.chip-module span{
  background:var(--giay);border:1px solid var(--vien);border-radius:999px;
  padding:7px 15px;font-size:14px;color:var(--chu2);
}
.chip-module span.loi{background:var(--muc);color:#fff;border-color:var(--muc);font-weight:600}

/* ══ AN TOÀN DỮ LIỆU ══════════════════════════════════════════════════ */
.an-toan-o{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:22px 22px 24px;
}
.an-toan-o .bieu{font-size:22px;line-height:1;margin-bottom:12px;display:block}
.an-toan-o h3{font-size:17px;margin-bottom:7px}
.an-toan-o p{margin:0;font-size:14.5px;color:#9aa3bd;line-height:1.6}
.noi-thang{
  margin-top:26px;border:1px solid rgba(255,255,255,.16);border-radius:var(--r);
  background:rgba(255,255,255,.04);padding:22px 24px;max-width:78ch;
}
.noi-thang b{color:#fff}
.noi-thang p{margin:0;font-size:15.5px;color:#9aa3bd;line-height:1.65}

/* ══ CTA CUỐI ═════════════════════════════════════════════════════════ */
.cta-cuoi{background:var(--nen2);border-top:1px solid var(--vien)}
.cta-hop{
  background:var(--giay);border:1px solid var(--vien);border-radius:var(--r-lon);
  box-shadow:var(--bong-3);padding:clamp(30px,4vw,52px);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(26px,4vw,48px);align-items:center;
}
.cta-hop h2{margin-bottom:14px}
.cta-hop .dan{margin-bottom:26px}
.cta-ba{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:14.5px;color:var(--chu2)}
.cta-ba span{display:inline-flex;align-items:center;gap:7px}
.cta-ba .tick{color:var(--xanh);font-weight:800}

.hop-zalo{text-align:center;border-left:1px solid var(--vien-mo);padding-left:clamp(0px,3vw,34px)}
.hop-zalo b{display:block;font-size:16px;color:var(--muc);font-weight:700;margin-bottom:4px}
.hop-zalo .mo{display:block;font-size:13.5px;color:var(--chu2);margin-bottom:14px}
.hop-zalo img{width:132px;height:132px;margin:0 auto;border:1px solid var(--vien);border-radius:12px;background:#fff}
.nut-chep{
  margin-top:12px;background:var(--nen2);border:1px solid var(--vien);border-radius:999px;
  padding:8px 16px;font-size:13.5px;font-weight:650;font-family:inherit;color:var(--chu);cursor:pointer;
}
.nut-chep:hover{border-color:var(--chu3)}
.hop-zalo .cach{display:block;margin-top:9px;font-size:12.5px;color:var(--chu3);line-height:1.5}

/* ══ CHÂN TRANG ═══════════════════════════════════════════════════════ */
footer{background:var(--muc);color:#8f97ae;padding:56px 0 34px;font-size:14.5px}
footer .luoi-chan{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:30px 26px}
footer .dau-an .b{color:#fff}
footer .khau{margin:14px 0 0;max-width:34ch;line-height:1.6}
footer h4{color:#fff;font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0 0 13px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
footer a{color:#8f97ae;text-decoration:none}
footer a:hover{color:#fff}
footer .day{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;font-size:13px}

/* ══ HIỆU ỨNG CUỘN ════════════════════════════════════════════════════ */
/* Chỉ bật khi JS chạy được (`body.co-js`) — không JS thì mọi thứ hiện sẵn,
   chứ không phải trang trắng. Đây là lỗi kinh điển của hiệu ứng cuộn. */
body.co-js .hien-dan{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
body.co-js .hien-dan.da-hien{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.co-js .hien-dan{opacity:1;transform:none;transition:none}
  .cham-song::after{animation:none}
  .nut:hover,.the-dau:hover,.ky-nang:hover{transform:none}
  .cua-so{transform:none}
}

/* ══ MÀN HÌNH NHỎ ═════════════════════════════════════════════════════ */
@media (max-width:1040px){
  .hero-luoi-cot{grid-template-columns:1fr;gap:44px}
  .hero h1{max-width:none}
  .cua-so{transform:none}
  .san-pham{max-width:620px}
  .the-noi.t1{left:auto;right:-8px;top:-14px}
  .the-noi.t2{left:-14px}
  .dai-hua .trong{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cta-hop{grid-template-columns:1fr}
  .hop-zalo{border-left:0;border-top:1px solid var(--vien-mo);padding-left:0;padding-top:28px}
  footer .luoi-chan{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:860px){
  .menu,.dinh-nut .an-nho{display:none}
  .nut-menu{display:block}
  .dinh.mo-menu .menu{
    display:flex;flex-direction:column;align-items:stretch;gap:2px;
    position:absolute;top:66px;left:0;right:0;
    background:var(--giay);border-bottom:1px solid var(--vien);
    padding:12px 22px 18px;box-shadow:var(--bong-2);
  }
  .dinh.mo-menu .menu a{padding:12px 10px;font-size:16px}
  .dinh.mo-menu .menu .chi-nho{
    display:block;margin-top:8px;border-top:1px solid var(--vien-mo);
    padding-top:16px;color:var(--muc);font-weight:650;
  }
  .hai-ben{grid-template-columns:1fr;gap:32px}
  .hai-ben.dao .ben-chu{order:0}
  .man-hv{max-width:none}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding-top:34px}
  .san-pham{min-height:0;padding-bottom:0}
  /* Không kéo âm để chồm lên thẻ nổi: thẻ "12 ngày liên tiếp" nằm ngay trên
     nó trong DOM, kéo âm là hai thứ đè nhau. */
  .dien-thoai{position:static;width:154px;margin:16px auto 0;transform:none}
  .the-noi{display:none}
  .the-noi.t3{display:flex;position:static;margin:14px auto 0;width:-webkit-fit-content;width:fit-content}
  .cua-so-than{grid-template-columns:1fr}
  .canh{display:none}
  /* Cửa sổ máy tính co lại còn ~330px trên điện thoại. Hai ô số cạnh nhau
     thành 160px mỗi ô — dòng "▲ 6% so với tuần trước" xuống ba dòng. Xếp dọc
     đọc hơn. Bảng thì giữ 3 cột nhưng siết hai cột phải lại. */
  .o-so{grid-template-columns:1fr}
  .bang-mini div{grid-template-columns:minmax(0,1fr) 58px 44px;gap:6px;padding:7px 9px}
  .dai-hua .trong{grid-template-columns:1fr}
  /* Trước→Sau: một cột, công tắc quyết định hiện bên nào */
  .hang-dc{grid-template-columns:1fr;gap:0}
  .mui-dc{display:none}
  body.chi-truoc .hang-dc .o-may{display:none}
  body.chi-sau .hang-dc .o-tay{display:none}
  body.chi-truoc .hang-dc .o-tay,body.chi-sau .hang-dc .o-may{opacity:1}
  .cong-tac{display:flex;width:100%}
  .cong-tac button{flex:1}
  .vong{gap:7px}
  .buoc{padding:9px 14px;font-size:14px}
  footer .luoi-chan{grid-template-columns:1fr;gap:26px}
}