/* ============================================================
   theme.css — Chí Quyết Academy Blog  (IMPORT NGUYÊN VĂN, không sửa giá trị)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700;800&display=swap');

:root {
  --cobalt-50:#eaf1ff; --cobalt-100:#d6e4ff; --cobalt-200:#adc8ff; --cobalt-300:#7aa3ff;
  --cobalt-400:#477eff; --cobalt-500:#1060ff; --cobalt-600:#0d4ed6; --cobalt-700:#0a3ca8;
  --cobalt-800:#082e80; --cobalt-900:#06205c;
  --cyan-50:#e6f7fe; --cyan-100:#c4ecfd; --cyan-200:#8dd9fa; --cyan-300:#4bc4f4;
  --cyan-400:#1bb8f1; --cyan-500:#00adef; --cyan-600:#0090c9; --cyan-700:#006e9b;
  --cyan-800:#005275; --cyan-900:#003a54;
  --amber-50:#fef6e7; --amber-100:#fdeac2; --amber-200:#fbd588; --amber-300:#f8be4d;
  --amber-400:#f7ac26; --amber-500:#f59e0b; --amber-600:#d98306; --amber-700:#b06708;
  --amber-800:#8a4f0b; --amber-900:#5c350a;
  --slate-0:#ffffff; --slate-50:#f6f8fc; --slate-100:#eef2f8; --slate-200:#e2e8f2;
  --slate-300:#cbd4e1; --slate-400:#94a0b4; --slate-500:#64718a; --slate-600:#475067;
  --slate-700:#333b4d; --slate-800:#1e2330; --slate-900:#121214; --slate-950:#0b0b0d;
  --green-500:#1f8a5b; --green-50:#e7f6ef; --red-500:#e5484d; --red-50:#fdecec;

  --surface-page:#f6f8fc; --surface-card:#ffffff; --surface-sunken:#eef2f8;
  --section-tint:#eaf1ff; --text-strong:#121214; --text-body:#333b4d; --text-muted:#64718a;
  --text-link:#0d4ed6; --text-on-cyan:#121214; --text-on-amber:#121214;
  --border-subtle:#e2e8f2; --border-default:#cbd4e1; --border-edge:#00adef;

  --shadow-xs:0 1px 2px rgba(18,18,20,.06); --shadow-sm:0 2px 8px rgba(18,23,41,.07);
  --shadow-md:0 8px 24px rgba(18,23,41,.10); --shadow-lg:0 18px 48px rgba(18,23,41,.14);
  --shadow-xl:0 32px 72px rgba(18,23,41,.18);
  --glow-cobalt:0 8px 28px rgba(16,96,255,.35); --glow-cyan:0 6px 22px rgba(0,173,239,.40);
  --glow-amber:0 8px 26px rgba(245,158,11,.42); --focus-ring:0 0 0 3px rgba(0,173,239,.45);

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --font-display:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --container:1200px; --container-pad:48px; --header-h:72px; --filter-h:64px;
}
html[data-theme="dark"]{
  --surface-page:#121214; --surface-card:#1e2330; --surface-sunken:#0b0b0d;
  --section-tint:#11182a; --text-strong:#f6f8fc; --text-body:#cbd4e1;
  --text-muted:#94a0b4; --text-link:#1bb8f1;
  --border-subtle:rgba(255,255,255,.09); --border-default:rgba(255,255,255,.16);
}

/* GÕ CHỮ */
.t-h1-hub      { font:800 52px/58px var(--font-display); letter-spacing:-.015em; color:var(--text-strong); }
.t-h1-category { font:800 46px/54px var(--font-display); letter-spacing:-.015em; color:var(--text-strong); }
.t-h1-post     { font:800 38px/48px var(--font-display); letter-spacing:-.015em; color:var(--text-strong); }
.t-h2-banner   { font:800 36px/43px var(--font-display); letter-spacing:-.015em; }
.t-num-proof   { font:800 76px/76px var(--font-display); letter-spacing:-.015em; color:var(--amber-500); }
.t-h2          { font:800 30px/38px var(--font-display); letter-spacing:-.015em; color:var(--text-strong); }
.t-h2-sm       { font:800 27px/36px var(--font-display); color:var(--text-strong); }
.t-h3-card     { font:700 17px/23px var(--font-sans); color:var(--text-strong); }
.t-eyebrow     { font:700 14px/21px var(--font-sans); text-transform:uppercase; letter-spacing:.12em; color:var(--cobalt-600); }
.t-lead        { font:400 18px/31px var(--font-sans); color:var(--text-body); }
.t-body        { font:400 16px/24px var(--font-sans); color:var(--text-body); }
.t-article     { font:400 18px/31px var(--font-sans); color:var(--text-body); }
.t-label       { font:600 14px/21px var(--font-sans); }
.t-meta        { font:500 13px/18px var(--font-sans); color:var(--text-muted); }
.t-cta         { font:800 17px/1 var(--font-sans); text-transform:uppercase; }
.t-chip        { font:700 13px/1 var(--font-mono); }
.t-grad-cyan   { background:linear-gradient(120deg,var(--cyan-200),var(--cyan-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* KHUNG + LƯỚI + ẢNH + COMPONENT (theme.css verbatim) */
.wrap { max-width:var(--container); margin:0 auto; padding:0 var(--container-pad); }
.sec-hero{padding:88px 0 158px;} .sec-pad{padding:72px 0;} .sec-pad-b{padding:0 0 72px;}
.sec-hub{padding:48px 0 56px;} .sec-showcase{padding:96px 0;}
.grid-hero{display:grid;grid-template-columns:634px 422px;gap:48px;align-items:center;}
.grid-banner{display:grid;grid-template-columns:576px 472px;gap:56px;align-items:center;}
.grid-corner{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;}
.grid-hub{display:grid;grid-template-columns:750px 322px;gap:32px;align-items:start;}
.grid-posts{display:grid;grid-template-columns:repeat(2,363px);gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.sidebar{position:sticky;top:calc(var(--header-h) + var(--filter-h) + 20px);display:flex;flex-direction:column;gap:20px;}
.img-hero-portrait{width:340px;height:420px;border-radius:20px;object-fit:cover;}
.img-16x9{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;}
.img-card-thumb{width:363px;height:204px;object-fit:cover;}
.img-cornerstone{width:100%;height:100%;min-height:320px;object-fit:cover;}
.img-video-poster{width:100%;aspect-ratio:9/12;object-fit:cover;}
.img-success{width:100%;aspect-ratio:4/3;object-fit:cover;}
.avatar-76{width:76px;height:76px;border-radius:50%;object-fit:cover;}
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);}
.card-edge{border-top:4px solid var(--cyan-500);}
.btn-cta{height:64px;padding:0 40px;background:var(--amber-500);color:var(--text-on-amber);font:800 17px/1 var(--font-sans);text-transform:uppercase;box-shadow:var(--glow-amber);}
.chip{height:40px;padding:0 18px;display:inline-flex;align-items:center;border-radius:var(--r-pill);background:var(--surface-card);border:1px solid var(--border-default);font:600 14px/1 var(--font-sans);color:var(--text-body);cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--cobalt-500);color:#fff;border-color:var(--cobalt-500);box-shadow:var(--glow-cobalt);}
.badge-cyan{display:inline-block;font:700 13px/1 var(--font-sans);text-transform:uppercase;letter-spacing:.06em;background:var(--cyan-500);color:var(--text-on-cyan);border-radius:var(--r-xs);padding:7px 12px;}

/* ============================================================
   BRIDGE — map theme.css lên markup Flatsome (DÙNG var, không hex tự chế)
   ============================================================ */
/* Full-bleed + container 1200/1104 chỉ ở trang chủ */
body.home .page-wrapper { padding-top:0; padding-bottom:0; }
body.home .row-main { max-width:100%; width:100%; margin:0; padding:0; }
body.home .row-main > .large-12 { padding:0; max-width:100%; flex-basis:100%; width:100%; }
body.home .row-main > .large-12 > .col-inner { padding:0; }
body.home #main { background:var(--surface-page); }
body.home .section .row { max-width:var(--container); margin:0 auto; width:100%; padding-left:var(--container-pad); padding-right:var(--container-pad); }
/* Guard: huỷ padding section-ELEMENT (từ thuộc tính padding="" của shortcode + theme) cho MỌI section trang chủ.
   → khoảng cách giữa các section CHỈ do .section-content (CSS đúng BUILD-SPEC) điều khiển, không bị cộng dư. */
body.home #content .section { padding-top:0 !important; padding-bottom:0 !important; }

/* FIX specificity: rule .section .row (1200/48) đè width+padding card. Ép card về ĐÚNG 1104 + padding riêng (như prototype trong .wrap) */
body.home .sec-freecourse .freecourse-card { max-width:1104px !important; padding:52px !important; margin:-96px auto 0 !important; position:relative; z-index:5; }
body.home .sec-cornerstone .cornerstone-card { max-width:1104px !important; padding:0 !important; }
body.home .sec-webinar .webinar-card { max-width:1104px !important; padding:34px 44px !important; grid-template-columns:1.5fr 1fr !important; }
body.home .sec-community .community-card { max-width:1104px !important; padding:52px !important; }

/* Helper grid: ép row Flatsome thành grid theo px theme */
.cq-grid { display:grid !important; align-items:center; align-content:center; }
.cq-grid > .col { width:auto !important; max-width:none !important; min-height:0 !important; flex:none !important; padding:0 !important; margin:0 !important; }
.cq-grid > .col > .col-inner { padding:0 !important; }
/* Flatsome .row có ::before/::after clearfix → thành grid-item ma tạo hàng thừa. Tắt đi. */
.cq-grid::before, .cq-grid::after { content:none !important; display:none !important; }

/* Eyebrow chung (mọi section) — px cố định theme; per-section chỉ đổi màu */
.text.el-eyebrow p { font:700 14px/21px var(--font-sans); text-transform:uppercase; letter-spacing:.12em; color:var(--cobalt-600); margin:0; }

/* ---------- HERO ---------- */
.sec-hero { position:relative; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.07); }
.sec-hero .section-bg { background:
  radial-gradient(70% 100% at 12% 0%, rgba(0,173,239,.32), transparent 62%),
  radial-gradient(80% 120% at 88% 100%, rgba(16,96,255,.40), transparent 65%),
  linear-gradient(135deg, var(--cobalt-600), var(--cobalt-700) 48%, var(--cobalt-900)) !important; }
.sec-hero .section-bg::after { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,173,239,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,173,239,.08) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); }
.sec-hero .section-content { padding-top:88px !important; padding-bottom:158px !important; }
.sec-hero .hero-row { grid-template-columns:634px 422px; gap:48px; }
.sec-hero .el-eyebrow p { font:700 14px/21px var(--font-sans); text-transform:uppercase; letter-spacing:.12em; color:var(--cyan-400); margin:0; }
.sec-hero .el-h1 h1 { font:800 52px/58px var(--font-display); letter-spacing:-.015em; color:var(--slate-50); margin:14px 0 20px; }
.sec-hero .el-h1 h1 strong { font-weight:800; background:linear-gradient(120deg,var(--cyan-200),var(--cyan-400)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sec-hero .el-lead p { font:400 18px/31px var(--font-sans); color:rgba(255,255,255,.82); max-width:560px; margin:0 0 28px; }
.sec-hero .el-hotlabel { display:inline-block; margin-right:8px; }
.sec-hero .el-hotlabel p { font:600 14px/21px var(--font-sans); color:rgba(255,255,255,.5); margin:0; }

/* Ô tìm kiếm: 58px, border 2px, radius 8, kính lúp trái + mũi tên cyan phải */
.sec-hero .searchform-wrapper { max-width:560px; }
.sec-hero .searchform .flex-row { background:rgba(255,255,255,.10); border:2px solid rgba(255,255,255,.28); border-radius:var(--r-sm); transition:border-color .14s,box-shadow .14s; background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2300adef" stroke-width="2.25" stroke-linecap="round"%3E%3Ccircle cx="11" cy="11" r="7"/%3E%3Cpath d="m21 21-4.3-4.3"/%3E%3C/svg%3E'); background-repeat:no-repeat; background-position:18px center; }
.sec-hero .searchform .flex-row:focus-within { border-color:var(--cyan-500); box-shadow:var(--focus-ring); }
.sec-hero .searchform .search-field { height:54px; background:transparent; border:0; color:#fff; font-size:16px; padding-left:48px; box-shadow:none; }
.sec-hero .searchform .search-field::placeholder { color:rgba(255,255,255,.5); }
.sec-hero .searchform .submit-button { height:54px; min-width:48px; background:transparent !important; border:0; }
.sec-hero .searchform .submit-button i, .sec-hero .searchform .submit-button svg { color:var(--cyan-500); font-size:19px; }

/* Tag hot */
.button.el-tag { background:rgba(255,255,255,.12) !important; border:1px solid transparent !important; margin-right:6px; margin-bottom:8px; vertical-align:middle; transition:all .14s; }
.button.el-tag span { font:700 13px/1 var(--font-mono); color:#fff; text-transform:none; letter-spacing:.02em; }
.button.el-tag:hover { border-color:var(--cyan-500) !important; }

/* Chân dung 340×420 + ô cyan-soft + chip nhô ra + namecard */
.sec-hero .el-portrait { max-width:340px; height:420px; margin:0 auto; overflow:visible; }
.sec-hero .el-portrait::before { content:''; position:absolute; right:-28px; top:-24px; width:120px; height:120px; border-radius:var(--r-lg); background:rgba(0,173,239,.18); z-index:0; }
.sec-hero .el-portrait .banner-bg { border-radius:20px; overflow:hidden; box-shadow:0 0 0 1px rgba(0,173,239,.35), 0 24px 64px rgba(0,0,0,.5), 0 0 56px rgba(16,96,255,.3); }
.sec-hero .el-portrait .banner-layers { overflow:visible !important; }
.text-box.el-float-chip { width:auto !important; z-index:4; }
.text-box.el-float-chip p { display:inline-flex; align-items:center; font:700 13px/1 var(--font-mono); letter-spacing:.02em; color:var(--cyan-400); background:var(--slate-900); border:1px solid rgba(0,173,239,.5); border-radius:var(--r-pill); padding:10px 16px; margin:0; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.45); }
.text-box.el-float-chip.chip-amber p { color:var(--amber-400); border-color:rgba(245,158,11,.55); box-shadow:0 8px 24px rgba(245,158,11,.28); }
/* Toạ độ px tuyệt đối ĐÚNG prototype (parts-top.jsx) — chip & namecard nhô ra ngoài mép ảnh */
.sec-hero .el-portrait .text-box.el-float-chip, .sec-hero .el-portrait .text-box.el-namecard { position:absolute !important; margin:0 !important; }
.sec-hero .el-portrait .text-box.chip-traffic { top:22px !important; right:-34px !important; left:auto !important; bottom:auto !important; transform:none !important; }
.sec-hero .el-portrait .text-box.chip-top1 { top:46% !important; left:-52px !important; right:auto !important; bottom:auto !important; transform:translateY(-50%) !important; }
.sec-hero .el-portrait .text-box.chip-money { bottom:64px !important; right:-26px !important; top:auto !important; left:auto !important; transform:none !important; }
.sec-hero .el-portrait .text-box.el-namecard { left:-18px !important; bottom:-16px !important; top:auto !important; right:auto !important; transform:none !important; width:auto !important; z-index:4; }
.text-box.el-namecard p { background:rgba(18,18,20,.92); border:1px solid rgba(255,255,255,.12); border-left:4px solid var(--cyan-500); border-radius:var(--r-sm); padding:12px 18px; margin:0; color:rgba(255,255,255,.6); font:400 13px/18px var(--font-sans); box-shadow:var(--shadow-lg); white-space:nowrap; }
.text-box.el-namecard p strong { color:#fff; font-size:15px; }

/* ---------- FREECOURSE (banner 30+) ---------- */
.sec-freecourse { position:relative; z-index:5; }
.sec-freecourse .section-content { padding-top:0 !important; padding-bottom:72px !important; }
.sec-freecourse .freecourse-card { position:relative; overflow:hidden; margin-top:-96px; grid-template-columns:1.1fr 0.9fr; gap:56px; background:
  radial-gradient(70% 110% at 85% -10%, rgba(0,173,239,.32), transparent 60%),
  linear-gradient(120deg, var(--cobalt-600), var(--cobalt-700)); border:1px solid rgba(0,173,239,.30); border-top:4px solid var(--cyan-500); border-radius:var(--r-lg); box-shadow:var(--shadow-xl), 0 0 64px rgba(0,173,239,.14); padding:52px; max-width:1104px; }
.sec-freecourse .freecourse-card::before { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,173,239,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,173,239,.08) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); }
.sec-freecourse .el-eyebrow p { color:var(--cyan-400); }
.sec-freecourse .el-h2 h2 { font:800 36px/43px var(--font-display); letter-spacing:-.015em; color:#fff; margin:12px 0; }
.sec-freecourse .el-sub p { font:400 16px/24px var(--font-sans); color:rgba(255,255,255,.72); max-width:500px; }
.sec-freecourse .fc-right { border-left:1px solid rgba(255,255,255,.1); padding-left:40px !important; text-align:center; }
.sec-freecourse .el-bignum p { font:800 76px/76px var(--font-display); letter-spacing:-.015em; color:var(--amber-500); text-shadow:0 0 36px rgba(245,158,11,.35); margin:0; }
.sec-freecourse .el-bignum-label p { font:500 13px/18px var(--font-sans); color:rgba(255,255,255,.65); margin:8px 0 0; }
.sec-freecourse .fc-right .button.btn-amber { height:64px; line-height:64px; padding:0 32px; }
.button.el-mono-chip { background:var(--slate-900) !important; border:1px solid rgba(0,173,239,.5) !important; margin-right:6px; margin-bottom:8px; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,.2); }
.button.el-mono-chip span { font:700 12px/1 var(--font-mono); color:var(--cyan-400); letter-spacing:.02em; }

/* Nút amber chung (CTA) — chữ tối, title-case theo ảnh duyệt */
.button.btn-amber { background-color:var(--amber-500) !important; border-color:var(--amber-500) !important; text-transform:none !important; box-shadow:var(--glow-amber); transition:all .14s cubic-bezier(.22,1,.36,1); }
.button.btn-amber span { color:var(--text-on-amber) !important; font-weight:800; font-size:16px; text-transform:none !important; letter-spacing:0 !important; white-space:nowrap; }
.button.btn-amber:hover { background-color:var(--amber-600) !important; border-color:var(--amber-600) !important; transform:translateY(1px); }

/* ---------- CORNERSTONE ---------- */
.sec-cornerstone .section-content { padding-top:0 !important; padding-bottom:72px !important; }
.sec-cornerstone .cornerstone-card { grid-template-columns:1fr 1fr; gap:0; background:var(--surface-card); border:1px solid var(--border-subtle); border-top:4px solid var(--cyan-500); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); max-width:1104px; }
/* Card cao theo TEXT (như prototype 452px), ảnh cover-crop fill — KHÔNG để ảnh vuông kéo cao card */
.sec-cornerstone .cornerstone-card { align-items:stretch !important; }
.sec-cornerstone .cornerstone-img { position:relative; min-height:320px; }
.sec-cornerstone .cornerstone-img > .col-inner { position:absolute; inset:0; height:100%; }
.sec-cornerstone .el-cover, .sec-cornerstone .el-cover .img-inner { height:100%; }
.sec-cornerstone .el-cover img { position:absolute; inset:0; width:100% !important; height:100% !important; object-fit:cover; }
.sec-cornerstone .cornerstone-body > .col-inner { padding:48px !important; }
.text.el-badge p { display:inline-block; font:700 13px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.06em; background:var(--cyan-500); color:var(--text-on-cyan); border-radius:var(--r-xs); padding:7px 12px; margin:0 0 6px; }
.text.el-h2-dark h2 { font:700 36px/43px var(--font-display); letter-spacing:-.015em; color:var(--text-strong); margin:12px 0 14px; }
.text.el-sub-dark p { font:400 16px/24px var(--font-sans); color:var(--text-body); }
.text.el-meta p { font:500 13px/18px var(--font-sans); color:var(--text-muted); margin-bottom:8px; }
/* Meta cornerstone: icon đồng hồ + người (Lucide, stroke muted) */
.sec-cornerstone .el-meta p { display:flex; align-items:center; gap:18px; }
.sec-cornerstone .el-meta .m-clock, .sec-cornerstone .el-meta .m-user { display:inline-flex; align-items:center; gap:6px; }
.sec-cornerstone .el-meta .m-clock::before { content:''; width:16px; height:16px; flex:none; background:no-repeat center/contain url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2364718a" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3Cpolyline points="12 6 12 12 16 14"/%3E%3C/svg%3E'); }
.sec-cornerstone .el-meta .m-user::before { content:''; width:16px; height:16px; flex:none; background:no-repeat center/contain url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2364718a" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/%3E%3Ccircle cx="12" cy="7" r="4"/%3E%3C/svg%3E'); }
.button.el-readmore { margin:0; padding-left:0; }
.button.el-readmore span { color:var(--text-link); font-weight:700; font-size:16px; text-transform:none; }

/* ---------- FILTER ---------- */
.sec-filter { position:sticky; top:72px; z-index:1000; background:var(--section-tint); border-bottom:1px solid var(--border-subtle); }
.sec-filter .section-bg { background:transparent !important; }
.sec-filter .section-content { padding-top:12px !important; padding-bottom:12px !important; }
.sec-filter .col { padding:0 !important; }
.sec-filter .col-inner { display:flex; gap:10px; justify-content:safe center; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding:2px 0; }
.sec-filter .col-inner::-webkit-scrollbar { display:none; }
.button.el-chip-filter { background:var(--surface-card) !important; border:1px solid var(--border-default) !important; margin:0; flex:none; height:40px; line-height:38px; padding:0 18px; }
.button.el-chip-filter span { color:var(--text-body); font:600 14px/1 var(--font-sans); text-transform:none; }
.button.el-chip-filter:hover { border-color:var(--cobalt-500) !important; }
.button.el-chip-filter.is-active { background:var(--cobalt-500) !important; border-color:var(--cobalt-500) !important; box-shadow:var(--glow-cobalt); }
.button.el-chip-filter.is-active span { color:#fff; }

/* ---------- HUB ---------- */
.sec-hub .section-content { padding-top:28px !important; padding-bottom:56px !important; }
/* Phân trang: cột Flatsome có padding-bottom 30px thừa → trên nút 36px, dưới nút ~8px như prototype */
body.home .sec-hub .pagination-row .col { padding-top:12px !important; padding-bottom:8px !important; }
.sec-hub .hub-row { grid-template-columns:750px 322px; gap:32px; align-items:start; }
/* Ép lưới bài thành GRID 2 cột gap 24 (cards 363) như prototype — thay flex col-spacing của Flatsome */
.sec-hub .el-postgrid { display:grid !important; grid-template-columns:repeat(2,1fr); gap:24px; margin:0 0 24px !important; }
body.home .sec-hub .el-postgrid { padding-left:0 !important; padding-right:0 !important; max-width:none !important; }
.sec-hub .el-postgrid::before, .sec-hub .el-postgrid::after { content:none !important; display:none !important; }
.sec-hub .el-postgrid > .col { width:auto !important; max-width:none !important; flex:none !important; padding:0 !important; margin:0 !important; }
.sec-hub .el-postgrid > .col > .col-inner { padding:0 !important; }
@media (max-width:849px){ .sec-hub .el-postgrid { grid-template-columns:1fr; } }
.sec-hub .el-postgrid .box { border-radius:var(--r-lg); overflow:hidden; background:var(--surface-card); border:1px solid var(--border-subtle); box-shadow:var(--shadow-sm); transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s cubic-bezier(.22,1,.36,1); }
.sec-hub .el-postgrid .col:hover .box { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.sec-hub .el-postgrid .box-image { aspect-ratio:16/9; }
/* Bo 2 góc trên của ảnh — overflow:hidden của .box không clip .image-cover (stacking riêng) */
body.home .sec-hub .el-postgrid .box-image,
body.home .sec-hub .el-postgrid .box-image > a,
body.home .sec-hub .el-postgrid .box-image .image-cover,
body.home .sec-hub .el-postgrid .box-image img { border-top-left-radius:calc(var(--r-lg) - 1px) !important; border-top-right-radius:calc(var(--r-lg) - 1px) !important; overflow:hidden !important; }
/* col-inner nền trắng vuông sau card → ló góc "vuông mờ"; cho trong suốt */
body.home .sec-hub .el-postgrid .col-inner { background:transparent !important; box-shadow:none !important; border:0 !important; }
.sec-hub .el-postgrid .box-text { padding:18px 20px 20px; text-align:left !important; }
.sec-hub .el-postgrid .box-text-inner { text-align:left; }
/* Category → badge cobalt-soft (như prototype Badge tone cobalt) */
.sec-hub .el-postgrid .cat-label { display:inline-block; opacity:1 !important; background:var(--cobalt-50); color:var(--cobalt-600); border-radius:var(--r-xs); padding:6px 10px; margin:0 0 10px; font:700 11px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; }
.sec-hub .el-postgrid .post-title { font:700 17px/23px var(--font-sans); color:var(--text-strong); text-transform:none; text-align:left; margin:0 0 10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:46px; }
.sec-hub .el-postgrid .post-title a { color:var(--text-strong); }
.sec-hub .el-postgrid .post-meta { font:500 13px/18px var(--font-sans); color:var(--text-muted); text-align:left; }
.sec-hub .el-postgrid .post-meta::before { content:"Cập nhật: "; }
.sec-hub .leadmagnet-card { background:radial-gradient(80% 140% at 90% -20%, rgba(0,173,239,.30), transparent 60%), linear-gradient(120deg, var(--cobalt-700), var(--cobalt-900)); border:1px solid rgba(0,173,239,.30); border-radius:var(--r-lg); padding:40px !important; margin-top:24px !important; margin-bottom:24px !important; }
/* FIX màu trên nền cobalt tối: eyebrow amber + heading trắng 26px (class .amber/.el-h3-white chưa có rule → rớt về màu tối) */
body.home .sec-hub .leadmagnet-card .el-eyebrow p { color:var(--amber-500) !important; }
body.home .sec-hub .leadmagnet-card .el-h3-white h3, body.home .sec-hub .leadmagnet-card .el-h3-white p { color:#fff !important; font:800 26px/1.3 var(--font-sans) !important; margin:0 !important; }
.sec-hub .pagination-row { margin-top:36px; }
.button.el-page { background:var(--surface-card) !important; border:1px solid var(--border-default) !important; margin:0 4px; min-width:46px; height:46px; line-height:44px; border-radius:var(--r-sm); }
.button.el-page span { color:var(--text-body); font:600 14px/1 var(--font-sans); text-transform:none; }
.button.el-page:hover { border-color:var(--cobalt-500) !important; }
.button.el-page.is-current { background:var(--cobalt-500) !important; border-color:var(--cobalt-500) !important; }
.button.el-page.is-current span { color:#fff; }
/* Mobile: thu gọn nút phân trang để 5 nút vừa 1 hàng (container hẹp ~238px) */
@media (max-width:560px){
  .sec-hub .pagination-row .col-inner { padding-left:0 !important; padding-right:0 !important; }
  .button.el-page { min-width:34px !important; height:40px !important; line-height:38px !important; margin:0 3px !important; padding:0 8px !important; }
  .button.el-page span { font-size:13px !important; }
}
.hub-sidebar > .col-inner { position:sticky; top:156px; }
.row.el-widget { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); margin:0 0 20px; }
/* FIX: rule container .section .row (48px) đè padding widget → ép đúng prototype (bio 22, results 18, video 0) */
body.home .hub-sidebar .el-widget { padding:18px !important; max-width:none !important; margin-bottom:20px !important; }
body.home .hub-sidebar .el-widget:last-child { margin-bottom:0 !important; }
body.home .hub-sidebar .widget-bio { padding:22px !important; }
body.home .hub-sidebar .widget-video { padding:0 !important; }
.el-widget.widget-bio { border-top:4px solid var(--cyan-500); }
.el-widget .col { padding:0 4px 8px !important; }
/* widget-video: poster full-bleed (text/nút tự có inset riêng) */
body.home .widget-video .col, body.home .widget-video .col-inner { padding:0 !important; }
.widget-bio .bio-head { padding-bottom:14px !important; }
/* Bio header: avatar trái + tên phải (flex trong 1 col_inner) */
.widget-bio .bio-head > .col-inner { display:flex; align-items:center; gap:12px; }
.widget-bio .el-avatar { width:76px !important; height:76px !important; flex:0 0 76px; margin:0 !important; border-radius:50%; border:2px solid var(--cyan-500); overflow:hidden; background:url('http://quyettran.local/wp-content/uploads/2026/06/tran-chi-quyet.png') no-repeat 50% 47% / 235%; }
.widget-bio .el-avatar img { display:none !important; }
.widget-bio .el-bio-name { flex:1 1 auto; min-width:0; }
.text.el-bio-name p { font:400 12px/1.45 var(--font-sans); color:var(--text-muted); margin:0; letter-spacing:-.02em; white-space:nowrap; }
.text.el-bio-name p strong { font:800 16px/1.25 var(--font-display); color:var(--text-strong); display:block; white-space:nowrap; letter-spacing:0; }
/* Tích xanh verified cạnh tên */
.text.el-bio-name p strong::after { content:''; display:inline-block; width:17px; height:17px; margin-left:6px; vertical-align:-3px; background:no-repeat center/contain url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Ccircle cx="12" cy="12" r="10" fill="%231060ff"/%3E%3Cpath d="m8 12 2.6 2.6 5.2-5.2" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E'); }
.text.el-stat p { background:var(--section-tint); border-radius:var(--r-sm); padding:9px 4px; text-align:center; font:500 10px/1.35 var(--font-sans); color:var(--text-muted); margin:0; overflow:hidden; }
.text.el-stat p strong { display:block; font:800 17px/1.2 var(--font-display); color:var(--cobalt-600); white-space:nowrap; }
.text.el-stat.stat-amber p strong { color:var(--amber-600); font-size:14px; }
.text.el-checklist ul { list-style:none; margin:14px 0 18px; padding:0; }
.text.el-checklist li { position:relative; padding-left:30px; margin-bottom:10px; color:var(--text-body); font:400 16px/24px var(--font-sans); text-align:left; }
.text.el-checklist li::before { content:"✓"; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:var(--cyan-50); color:var(--cyan-600); font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center; }
.el-widget .el-checklist li { font:400 13px/18px var(--font-sans); margin-bottom:10px; padding-left:28px; }
/* Bio checklist: icon riêng từng dòng (award/briefcase/graduation) — KHÔNG dùng ✓ tròn */
.widget-bio .el-checklist li::before { content:''; width:18px; height:18px; top:1px; border-radius:0; background:no-repeat center/contain; }
.widget-bio .el-checklist li:nth-child(1)::before { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23d98306" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="8" r="6"/%3E%3Cpath d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/%3E%3C/svg%3E'); }
.widget-bio .el-checklist li:nth-child(2)::before { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230d4ed6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Crect width="20" height="14" x="2" y="7" rx="2"/%3E%3Cpath d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/%3E%3C/svg%3E'); }
.widget-bio .el-checklist li:nth-child(3)::before { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230d4ed6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M22 10v6M2 10l10-5 10 5-10 5z"/%3E%3Cpath d="M6 12v5c3 3 9 3 12 0v-5"/%3E%3C/svg%3E'); }
/* Social: nút icon tròn + "Hồ sơ đầy đủ →" */
.text.el-bio-foot p { display:flex; align-items:center; gap:8px; border-top:1px solid var(--border-subtle); padding-top:14px; margin:4px 0; }
.text.el-bio-foot .soc { width:34px; height:34px; flex:none; border-radius:var(--r-sm); border:1px solid var(--border-subtle); background:var(--surface-sunken) no-repeat center / 17px 17px; transition:all .14s; }
.text.el-bio-foot .soc:hover { border-color:var(--cyan-500); }
.text.el-bio-foot .soc-yt { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23475067" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/%3E%3Cpath d="m10 15 5-3-5-3z"/%3E%3C/svg%3E'); }
.text.el-bio-foot .soc-fb { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23475067" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/%3E%3C/svg%3E'); }
.text.el-bio-foot .soc-web { background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23475067" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="10"/%3E%3Cpath d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20"/%3E%3C/svg%3E'); }
.text.el-bio-foot .bio-profile { margin-left:auto; color:var(--text-link); font:700 13px var(--font-sans); white-space:nowrap; }
.el-widget.widget-video { padding:0; overflow:hidden; }
.el-widget.widget-video .el-video { border-radius:var(--r-lg) var(--r-lg) 0 0; }
.el-widget.widget-video .el-video .banner-bg::before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,.96); box-shadow:var(--shadow-lg); z-index:2; pointer-events:none; }
.el-widget.widget-video .el-video .banner-bg::after { content:''; position:absolute; top:50%; left:calc(50% + 2px); transform:translate(-50%,-50%); border-style:solid; border-width:11px 0 11px 18px; border-color:transparent transparent transparent var(--red-500); z-index:3; pointer-events:none; }
.el-widget.widget-video .el-video-title { padding:14px 18px 0; }
.el-widget.widget-video .el-video-title p { font:400 13px var(--font-sans); color:var(--text-muted); margin:0 0 12px; }
.el-widget.widget-video .el-video-title p strong { font-size:15px; color:var(--text-strong); display:block; }
.el-widget.widget-video .button { margin:0 18px 18px; }
/* Nút YouTube khớp prototype: full-width (284), bo 12, đỏ #E5484D, cao 44, 14px */
body.home .el-widget.widget-video .el-ytbtn { display:block !important; width:auto !important; margin:0 18px 18px !important; min-height:44px !important; line-height:44px !important; padding:0 !important; border-radius:12px !important; background:var(--red-500) !important; border:0 !important; box-shadow:none !important; color:#fff !important; font-weight:700 !important; font-size:14px !important; }
body.home .el-widget.widget-video .el-ytbtn span { line-height:44px !important; }
body.home .el-widget.widget-video .el-ytbtn:hover { background:#cf3d42 !important; transform:translateY(-1px); box-shadow:0 6px 18px rgba(229,72,77,.35) !important; }
.text.el-widget-head p { font:700 15px var(--font-sans); color:var(--text-strong); margin:0 0 12px; display:flex; align-items:center; }
.el-widget.widget-results .el-widget-head p::after { content:"● LIVE"; margin-left:auto; font:700 10px/1 var(--font-mono); letter-spacing:.06em; color:var(--green-500); background:var(--green-50); border-radius:var(--r-pill); padding:5px 9px; }
.el-widget .el-results { border-radius:var(--r-sm); overflow:hidden; }
.el-widget .el-results img { border-radius:var(--r-sm); }
.el-widget .el-results .flickity-page-dots .dot { background:var(--border-default); opacity:1; }
.el-widget .el-results .flickity-page-dots .dot.is-selected { background:var(--cyan-500); width:18px; border-radius:var(--r-pill); }
/* FIX results: ép mọi slide cùng cao 213px, ảnh cover (không fill méo), full-bleed như prototype 284×213 */
body.home .widget-results .col, body.home .widget-results .col-inner { padding:0 !important; }
body.home .el-widget .el-results .slider, body.home .el-widget .el-results .flickity-viewport, body.home .el-widget .el-results .flickity-slider { height:213px !important; }
body.home .el-widget .el-results .img, body.home .el-widget .el-results .img-inner { height:213px !important; }
body.home .el-widget .el-results img { width:100% !important; height:213px !important; object-fit:cover !important; object-position:center top; border-radius:var(--r-sm) !important; }
/* Caption results: 12px/18px như prototype */
body.home .widget-results .el-caption-dark p { font:400 12px/18px var(--font-sans) !important; color:var(--text-strong) !important; margin:12px 0 0 !important; }

/* ---------- WEBINAR ---------- */
.sec-webinar .section-content { padding-top:0 !important; padding-bottom:72px !important; }
.sec-webinar .webinar-card { grid-template-columns:1.4fr auto; gap:28px; background:radial-gradient(60% 120% at 80% -20%, rgba(0,173,239,.35), transparent 55%), linear-gradient(110deg, var(--cobalt-600), var(--cobalt-500)); border-radius:var(--r-lg); box-shadow:var(--glow-cobalt); padding:34px 44px; max-width:1104px; }
.text.el-live p { display:inline-flex; align-items:center; font:700 13px/1 var(--font-mono); color:#fff; background:rgba(18,18,20,.35); border:1px solid rgba(229,72,77,.6); border-radius:var(--r-pill); padding:8px 14px; margin:0 0 12px; letter-spacing:.08em; }
@media (prefers-reduced-motion: no-preference){ .text.el-live p { animation:cqBlink 1.2s steps(2,start) infinite; } }
@keyframes cqBlink { 50% { opacity:.55; } }
.sec-webinar .webinar-card .el-h2 h2 { font:800 28px/36px var(--font-display); color:#fff; }
.sec-webinar .webinar-card > .col:last-child > .col-inner { display:flex; align-items:center; justify-content:flex-end; gap:28px; flex-wrap:wrap; }
.sec-webinar .webinar-card .button.btn-amber { box-shadow:0 6px 18px rgba(245,158,11,.35) !important; }
body.home .sec-webinar .countdown-row { margin:0 !important; padding:0 !important; display:flex !important; justify-content:flex-start !important; width:184px !important; max-width:184px !important; min-width:184px !important; flex:0 0 184px !important; flex-wrap:nowrap !important; gap:8px !important; }
body.home .sec-webinar .countdown-row .col { width:56px !important; max-width:56px !important; min-width:0 !important; flex:0 0 56px !important; padding:0 !important; margin:0 !important; }
.sec-webinar .countdown-row .col-inner { padding:0 !important; }
.text.el-count p { color:rgba(255,255,255,.7); font:600 11px/1.7 var(--font-sans); text-transform:uppercase; letter-spacing:.06em; text-align:center; margin:0; }
.text.el-count p strong { display:block; font:800 28px/1.2 var(--font-mono); color:#fff; background:rgba(18,18,20,.35); border-radius:var(--r-sm); padding:10px 0; }
.sec-webinar .webinar-card .button.btn-amber { margin:0; flex:none; height:54px; line-height:54px; padding:0 28px; border-radius:12px !important; }

/* ---------- FAQ ---------- */
.sec-faq .section-content { padding-top:0 !important; padding-bottom:72px !important; }
.sec-faq .row { max-width:880px !important; }
.text.el-eyebrow.on-light p, .sec-faq .el-eyebrow p { color:var(--cobalt-600); }
.sec-faq .el-faq .accordion-item { border:2px solid var(--border-subtle); border-radius:var(--r-md); margin-bottom:14px; background:var(--surface-card); overflow:hidden; transition:border-color .22s cubic-bezier(.22,1,.36,1); }
.sec-faq .el-faq .accordion-item.active { border-color:var(--cobalt-500); }
/* Khe FAQ→Community dư 44px: item cuối còn margin 14 + col Flatsome gutter 30 → xoá để còn 72 như prototype */
.sec-faq .el-faq .accordion-item:last-child { margin-bottom:0 !important; }
body.home .sec-faq .col:last-child { padding-bottom:0 !important; }
.sec-faq .el-faq .accordion-title { border:0; position:relative; padding:20px 22px 20px 66px; font:700 16px/1.4 var(--font-sans); color:var(--text-strong); text-transform:none; }
.sec-faq .el-faq .accordion-title.active { color:var(--text-link); }
.sec-faq .el-faq .accordion-inner { padding:0 22px 22px 66px; color:var(--text-body); font:400 16px/24px var(--font-sans); }
.sec-faq .el-faq .toggle { position:absolute; left:22px; right:auto; top:50%; transform:translateY(-50%); width:30px; height:30px; border:1px solid var(--border-default); border-radius:var(--r-sm); background:rgba(16,96,255,.07); color:var(--text-link); display:flex; align-items:center; justify-content:center; }
.sec-faq .el-faq .accordion-title.active .toggle { background:var(--cobalt-600); border-color:var(--cobalt-600); color:#fff; }
/* Đổi mũi tên Flatsome → dấu +/− vẽ bằng CSS như prototype */
.sec-faq .el-faq .toggle i { display:none !important; }
.sec-faq .el-faq .toggle::before, .sec-faq .el-faq .toggle::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--cobalt-600); border-radius:2px; }
.sec-faq .el-faq .toggle::before { width:11px; height:2.5px; }
.sec-faq .el-faq .toggle::after { width:2.5px; height:11px; }
.sec-faq .el-faq .accordion-title.active .toggle::before { background:#fff; }
.sec-faq .el-faq .accordion-title.active .toggle::after { display:none; }

/* ---------- COMMUNITY ---------- */
.sec-community .section-content { padding-top:0 !important; padding-bottom:72px !important; }
.sec-community .community-card { grid-template-columns:1fr 1fr; gap:56px; background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--r-xl); box-shadow:var(--shadow-md); padding:52px; max-width:1104px; }
.sec-community .el-chat { overflow:visible; }
.sec-community .el-chat .banner-bg { background:var(--section-tint) !important; border-radius:var(--r-lg); }
.text-box.el-chat-head { width:94% !important; }
.text-box.el-chat-head p { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--r-md); box-shadow:var(--shadow-xs); padding:12px 16px; font:400 13px var(--font-sans); color:var(--text-muted); margin:0; text-align:left; display:flex; align-items:center; gap:6px; }
.text-box.el-chat-head p strong { color:var(--text-strong); }
.text-box.el-chat-head p::after { content:"SÔI NỔI"; margin-left:auto; font:700 10px/1 var(--font-sans); letter-spacing:.06em; color:var(--green-500); background:var(--green-50); border-radius:var(--r-pill); padding:5px 9px; }
.text-box.el-bubble p { background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:4px 14px 14px 14px; box-shadow:var(--shadow-xs); padding:10px 14px; font:400 14px/1.5 var(--font-sans); color:var(--text-body); margin:0; text-align:left; }
.text-box.el-bubble.bubble-quyet p { background:var(--cobalt-100); border-color:var(--cobalt-200); border-radius:14px 4px 14px 14px; color:var(--cobalt-700); font-weight:600; }
.sec-community .button { margin-right:10px; margin-bottom:8px; }

/* ---------- CTA (Course Showcase) ---------- */
.sec-cta { position:relative; overflow:hidden; }
.sec-cta .section-bg { background:
  radial-gradient(80% 130% at 90% -20%, rgba(0,173,239,.30), transparent 60%),
  linear-gradient(120deg, var(--cobalt-600), var(--cobalt-700)) !important; }
.sec-cta .section-bg::after { content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(0,173,239,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,173,239,.08) 1px,transparent 1px);
  background-size:48px 48px; -webkit-mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); }
.sec-cta .section-content { padding-top:96px !important; padding-bottom:96px !important; }
.sec-cta .row { max-width:880px !important; }
.sec-cta .el-eyebrow p { color:var(--cyan-400); }
.sec-cta .el-h2 h2 { font:800 44px/50px var(--font-display); letter-spacing:-.015em; color:#fff; margin:12px 0; }
.sec-cta .el-checklist.checks-center ul { display:inline-block; text-align:left; margin:6px auto 26px; }
.sec-cta .el-checklist.checks-center li { color:rgba(255,255,255,.85); font-size:16px; }
.sec-cta .el-checklist.checks-center li::before { background:rgba(0,173,239,.2); color:var(--cyan-300); }
.sec-cta .el-caption p { font:500 13px/18px var(--font-sans); color:rgba(255,255,255,.55); margin:12px 0 0; }
.sec-cta .button.btn-amber { height:64px; line-height:64px; padding:0 40px; }
/* CTA nút lớn: chữ 22px (rule btn-amber span ép 16px cho nút nhỏ — override lại) */
.sec-cta .button.btn-amber span { font-size:22px !important; }
.button.el-btn-stack { display:table; margin:0 0 12px; }
/* Community: nút cao 54, bo 12, chữ 16 (prototype) */
.sec-community .button.el-btn-stack { height:54px !important; line-height:54px !important; padding:0 28px !important; border-radius:12px !important; }
.sec-community .button.el-btn-stack span { font-size:16px !important; font-weight:700; letter-spacing:.02em; }
/* Telegram (outline) → viền CYAN 2px, chữ cobalt như prototype */
.sec-community .button.el-btn-stack.is-outline { border:2px solid var(--cyan-500) !important; color:var(--cobalt-600) !important; }
.sec-community .button.el-btn-stack.is-outline span { color:var(--cobalt-600) !important; }

/* ---------- RESPONSIVE (theo theme.css breakpoints) ---------- */
@media (max-width:1024px){ .sec-hub .hub-row { grid-template-columns:1fr; } .hub-sidebar > .col-inner { position:static; } }
@media (max-width:900px){
  .sec-hero .hero-row, .sec-freecourse .freecourse-card, .sec-cornerstone .cornerstone-card, .sec-webinar .webinar-card, .sec-community .community-card { grid-template-columns:1fr; }
  .sec-webinar .webinar-card > .col:last-child > .col-inner { justify-content:flex-start; }
}
@media (max-width:820px){
  body.home .section .row { padding-left:20px; padding-right:20px; }
  .sec-hero .hero-right { display:none; }
  .sec-hero .section-content { padding-top:48px !important; padding-bottom:110px !important; }
  .sec-filter { top:0; }
  .sec-community .el-chat { margin-bottom:20px; }
  .sec-hero .el-h1 h1 { font-size:34px; line-height:40px; }
  .sec-freecourse .el-h2 h2, .text.el-h2-dark h2, .sec-cta .el-h2 h2 { font-size:24px; line-height:31px; }
  body.home .sec-freecourse .freecourse-card { margin-top:-56px !important; padding:30px 22px !important; gap:20px !important; }
  .sec-freecourse .el-h2 h2 { font-size:21px !important; line-height:28px !important; }
  .sec-freecourse .el-eyebrow p { font-size:13px !important; }
  .sec-freecourse .fc-right { border-left:0; padding-left:0 !important; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
  .sec-freecourse .el-bignum p { font-size:44px !important; line-height:44px !important; }
  .sec-freecourse .el-bignum-label p { margin-top:6px; }
  .sec-freecourse .fc-right .button.btn-amber { height:54px !important; line-height:54px !important; margin-top:6px; }
  .sec-cornerstone .cornerstone-body > .col-inner { padding:24px 20px !important; }
  .sec-webinar .webinar-card, .sec-community .community-card { padding:24px 20px; }
  .sec-cta .section-content { padding-top:56px !important; padding-bottom:56px !important; }
  .text.el-count p strong { font-size:24px; }
  .sec-faq .el-faq .accordion-title { padding-left:60px; padding-right:18px; }
  .sec-faq .el-faq .accordion-inner { padding-left:22px; }
  /* Webinar: ép stack 1 cột trên mobile (đè !important desktop) + countdown wrap không tràn */
  body.home .sec-webinar .webinar-card { grid-template-columns:1fr !important; gap:22px !important; padding:26px 22px !important; }
  body.home .sec-community .community-card { padding:26px 22px !important; gap:24px !important; }
  body.home .sec-webinar .webinar-card > .col { width:100% !important; }
  body.home .sec-webinar .webinar-card > .col:last-child > .col-inner { justify-content:flex-start !important; gap:18px !important; }
  body.home .sec-webinar .countdown-row { width:auto !important; max-width:100% !important; min-width:0 !important; flex:0 1 auto !important; flex-wrap:wrap !important; justify-content:flex-start !important; }
  .sec-webinar .webinar-card .el-h2 h2 { font-size:23px !important; line-height:30px !important; }
  /* CTA cuối: nút dài full-width + cho xuống dòng (chống tràn nowrap) */
  .sec-cta .button.btn-amber { display:block !important; width:100% !important; max-width:330px !important; margin-left:auto !important; margin-right:auto !important; height:auto !important; min-height:54px; line-height:1.35 !important; white-space:normal !important; padding:14px 22px !important; }
  .sec-cta .button.btn-amber span { white-space:normal !important; }
}

/* ---------- HEADER (đúng HEADER-SPEC.md — px/hex literal, không nắn) + FOOTER ---------- */
/* Thanh header: cao 72, nền trắng 92% + blur 12, viền dưới 1px #e2e8f2 */
.header-main, .header:not(.stuck) .header-wrapper { background-color:rgba(255,255,255,0.92) !important; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.header-main { border-bottom:1px solid #e2e8f2; box-shadow:none !important; }
.header.stuck .header-main { background-color:rgba(255,255,255,0.92) !important; }
/* Container trong: 1200, padding 0 48 */
.header-main .header-inner { max-width:1200px; padding:0 48px; }
/* Logo cao 42 */
#logo, #logo a { width:auto !important; }
#logo img { max-height:42px !important; width:auto !important; }
/* Nav: gap 30, 14px/600 #121214, padding 6px 0, hover #00adef, active #0d4ed6 + gạch #1060ff 2px */
.header-main ul.header-nav-main { display:flex; gap:30px; }
.header-main ul.header-nav-main > li { margin:0 !important; }
.header-main ul.header-nav-main > li > a { font:600 14px/1 var(--font-sans) !important; color:#121214 !important; text-transform:none !important; letter-spacing:0 !important; padding:6px 0 !important; border-bottom:2px solid transparent !important; box-shadow:none !important; min-height:0 !important; transition:color .14s ease; }
.header-main ul.header-nav-main > li > a:hover { color:#00adef !important; }
.header-main ul.header-nav-main > li.active > a,
.header-main ul.header-nav-main > li.current-menu-item > a,
.header-main ul.header-nav-main > li.current_page_item > a { color:#0d4ed6 !important; border-bottom-color:#1060ff !important; }
/* Cụm phải: moon + CTA, gap 12, đẩy phải */
.cq-header-actions { display:inline-flex; align-items:center; gap:12px; margin-left:auto; }
li.html_top_right_text { display:flex; align-items:center; }
/* Nút icon (moon/sun) 42×42, bo 8, nền #eef2f8, viền #e2e8f2, icon 20px stroke 2.25 #121214; hover cyan */
.cq-moon-toggle { width:42px; height:42px; flex:none; border-radius:8px; background:#eef2f8 no-repeat center / 20px 20px; border:1px solid #e2e8f2; cursor:pointer; padding:0; transition:all .14s ease; background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23121214" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/%3E%3C/svg%3E'); }
.cq-moon-toggle:hover { border-color:#00adef; background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%2300adef" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/%3E%3C/svg%3E'); }
/* Nút CTA "Đăng Ký Học": amber #f59e0b, CHỮ #121214, cao 44, padding 0 20, bo 12, 16/700, glow */
.cq-header-actions a.button.cq-btn-cta { height:44px !important; line-height:44px !important; padding:0 20px !important; border:0 !important; border-radius:12px !important; background-color:#f59e0b !important; color:#121214 !important; font-weight:700 !important; font-size:16px !important; text-transform:none !important; letter-spacing:0 !important; white-space:nowrap; margin:0 !important; box-shadow:0 8px 26px rgba(245,158,11,.42) !important; transition:transform .14s ease; }
.cq-header-actions a.button.cq-btn-cta span { color:#121214 !important; font-size:16px !important; font-weight:700 !important; }
.cq-header-actions a.button.cq-btn-cta:hover { transform:translateY(-1px); background-color:#f59e0b !important; }
/* Responsive ≤820: ẩn nav, padding 0 20 */
@media (max-width:820px){ .header-main ul.header-nav-main { display:none !important; } .header-main .header-inner { padding:0 20px !important; } }
/* ===== HEADER 2 TẦNG: TOPBAR (contact · social brand · moon) ===== */
.cq-topbar { background:#f6f8fc; border-bottom:1px solid #e2e8f2; position:relative; z-index:30; }
.cq-tb-inner { max-width:1200px; margin:0 auto; padding:8px 48px; display:flex; align-items:center; justify-content:space-between; gap:24px; font-family:var(--font-sans); }
.cq-contact { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.cq-contact span { display:inline-flex; align-items:center; gap:7px; font:600 13px/1 var(--font-sans); color:#333b4d; }
.cq-contact b { color:#121214; font-weight:700; }
.cq-contact .cqi { width:15px; height:15px; color:#1060ff; flex:none; }
.cq-tb-right { display:flex; align-items:center; gap:18px; }
.cq-social { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.cq-social-a { display:inline-flex; align-items:center; gap:7px; color:#1f2733 !important; font:600 13px/1 var(--font-sans); transition:color .14s ease; }
.cq-social-a:hover { color:#1060ff !important; }
.cq-soc-ic { width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.cq-soc-ic .cqsi { width:13px; height:13px; display:block; }
.cq-tb-moon { width:34px !important; height:34px !important; min-height:0 !important; flex:none; border-radius:50% !important; border:0 !important; background:transparent !important; color:#64718a; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0 !important; margin:0 !important; line-height:1 !important; box-shadow:none !important; transition:all .14s ease; }
.cq-tb-moon:hover { background:#eef2f8; color:#00adef; }
.cq-tb-moon svg { width:19px; height:19px; }
/* Nav có icon (hàng dưới) */
.header-main ul.header-nav-main .cq-navitem > a { display:inline-flex; align-items:center; gap:8px; }
.cq-navitem .cqn { width:18px; height:18px; color:#1060ff; flex:none; }
.cq-navitem > a span { font:600 14px/1 var(--font-sans); color:#121214; }
.cq-navitem > a:hover span, .cq-navitem > a:hover .cqn { color:#00adef; }
.cq-navitem.active > a { border-bottom-color:#1060ff !important; }
.cq-navitem.active > a span, .cq-navitem.active > a .cqn { color:#0d4ed6; }
/* Đăng nhập + CTA (CTA amber dùng .cq-header-actions .cq-btn-cta đã có ở trên) */
.cq-login { color:#121214 !important; font:600 14px/1 var(--font-sans); white-space:nowrap; transition:color .14s ease; }
.cq-login:hover { color:#1060ff !important; }
.cq-header-actions { gap:16px; }
@media (max-width:820px){ .cq-topbar { display:none; } }
/* ===== FOOTER MỚI 4 cột (đúng FOOTER-SPEC.md — px/hex literal) ===== */
#footer, footer.footer-wrapper { background:transparent !important; padding:0 !important; margin:0 !important; border:0 !important; }
.cq-ft { font-family:var(--font-sans); }
.cq-ft-top { background:#f6f8fc; border-top:1px solid #e2e8f2; }
.cq-ft-grid { max-width:1200px; margin:0 auto; padding:64px 48px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:56px; align-items:start; }
.cq-ft-logo { height:64px; width:auto; display:block; margin-bottom:18px; }
.cq-ft-btitle { font:800 16px/1.3 var(--font-sans); color:#121214; text-transform:uppercase; letter-spacing:.01em; }
.cq-ft-bsub { font:400 14px/1.4 var(--font-sans); color:#64718a; margin-top:4px; }
.cq-ft-ctitle { font:700 16px/1 var(--font-sans); color:#121214; margin-bottom:16px; }
.cq-ft-link { display:flex; align-items:center; gap:8px; padding:5px 0; font:500 14px/1 var(--font-sans); color:#333b4d !important; transition:color .14s ease; }
.cq-ft-link:hover { color:#1060ff !important; }
.cq-ft-link .cqf { width:15px; height:15px; color:#1060ff; flex:none; }
.cq-ft-soc { display:flex; align-items:center; gap:11px; padding:5px 0; font:600 14px/1 var(--font-sans); color:#333b4d !important; transition:color .14s ease; }
.cq-ft-soc:hover { color:#1060ff !important; }
.cq-ft-soc .ic { width:24px; height:24px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.cq-ft-soc .ic .cqfi { width:14px; height:14px; display:block; }
.cq-ft-clbl { display:flex; align-items:center; gap:8px; font:500 14px/1 var(--font-sans); color:#64718a; margin-bottom:4px; }
.cq-ft-clbl .cqf { width:15px; height:15px; color:#1060ff; flex:none; }
.cq-ft-hotline { display:block; font:800 24px/1.1 var(--font-sans); color:#121214 !important; white-space:nowrap; margin-bottom:18px; }
.cq-ft-email { font:600 14px/1.3 var(--font-sans); color:#121214 !important; word-break:break-all; }
.cq-ft-bar { background:#0a3ca8; padding:16px 0; }
.cq-ft-bar-inner { max-width:1200px; margin:0 auto; padding:0 48px; display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; font:500 14px/1.4 var(--font-sans); color:rgba(255,255,255,.92); text-align:center; }
.cq-ft-bar-inner strong { color:#fff; }
.cq-ft-bar-inner .cqfb { width:16px; height:16px; flex:none; }
@media (max-width:900px){ .cq-ft-grid { grid-template-columns:1fr 1fr; row-gap:36px; } }
@media (max-width:560px){ .cq-ft-grid { grid-template-columns:1fr; padding:40px 20px; } .cq-ft-bar-inner { padding:0 20px; } }

/* ---------- DARK MODE (dùng [data-theme="dark"] của theme.css; chỉ bù phần ngoài var) ---------- */
html { transition:background .22s cubic-bezier(.22,1,.36,1); }
html[data-theme="dark"] body.home #main { background:var(--surface-page); }
html[data-theme="dark"] .header-main, html[data-theme="dark"] .header-wrapper { background:var(--surface-card) !important; }
html[data-theme="dark"] .sec-cornerstone, html[data-theme="dark"] .sec-faq { background:var(--surface-page) !important; }
html[data-theme="dark"] .sec-hub .section-bg, html[data-theme="dark"] .sec-filter { background:var(--section-tint) !important; }
html[data-theme="dark"] .cq-moon-toggle { background-color:var(--slate-950); border-color:var(--border-default); background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23f6f8fc" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"%3E%3Ccircle cx="12" cy="12" r="4"/%3E%3Cpath d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/%3E%3C/svg%3E'); }
html[data-theme="dark"] .text.el-eyebrow.on-light p, html[data-theme="dark"] .sec-faq .el-eyebrow p { color:var(--cyan-400); }

/* ============================================================
   SINGLE POST (ARTICLE-SPEC.md — px/hex literal, không nắn)
   ============================================================ */
.cq-read-progress { position:fixed; top:0; left:0; height:3px; width:0; background:#00adef; z-index:1200; box-shadow:0 0 8px rgba(0,173,239,.6); }
/* Hero tiêu đề */
.cq-post-hero { background:#eaf1ff; border-bottom:1px solid #e2e8f2; }
.cq-post-hero-inner { max-width:860px; margin:0 auto; padding:44px 48px; text-align:center; }
.cq-breadcrumb { display:flex; align-items:center; justify-content:center; gap:8px; font:500 13px/1 var(--font-sans); color:#64718a; flex-wrap:wrap; }
.cq-breadcrumb a { color:#64718a; } .cq-breadcrumb a:hover { color:#1060ff; }
.cq-breadcrumb span { color:#a8b2c4; }
.cq-badge-cyan { display:inline-block; background:#00adef; color:#121214; font:700 13px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.06em; padding:7px 12px; border-radius:4px; margin:16px 0 14px; }
.cq-post-h1 { font:800 38px/1.25 var(--font-sans); letter-spacing:-.015em; color:#121214; margin:0 0 22px; }
.cq-post-meta { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:4px; }
.cq-post-avatar { width:42px; height:42px; border-radius:50%; border:2px solid #00adef; object-fit:cover; flex:none; }
.cq-post-author { display:flex; flex-direction:column; gap:2px; line-height:1.2; }
.cq-post-author strong { font:700 14px var(--font-sans); color:#121214; }
.cq-post-author span { font:400 12px var(--font-sans); color:#64718a; }
.cq-post-author { text-align:left; }
.cq-meta-dot { display:inline-flex; align-items:center; gap:5px; font:500 13px var(--font-sans); color:#64718a; }
.cq-meta-dot svg { color:#94a0b4; flex:none; }
.cq-post-share { display:flex; gap:8px; }
.post-share-btn { width:38px; height:38px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:#fff; color:#64718a; border:1px solid #e2e8f2; cursor:pointer; transition:all .14s ease; }
.post-share-btn:hover { border-color:#1060ff; color:#0d4ed6; transform:translateY(-2px); }
.post-share-btn svg { width:17px !important; height:17px !important; flex:none; }
/* Layout 2 cột */
.cq-post-wrap { max-width:1200px; margin:0 auto; padding:48px; }
.post-layout { display:grid; grid-template-columns:270px minmax(0,700px); gap:44px; justify-content:center; align-items:start; }
.post-toc-aside { align-self:stretch; }
.toc-stick { position:sticky; top:92px; display:flex; flex-direction:column; gap:16px; }
/* TOC card */
.post-toc { background:#fff; border:1px solid #e2e8f2; border-radius:16px; box-shadow:0 2px 8px rgba(18,23,41,.07); padding:6px 8px 10px; overflow:hidden; }
.post-toc-head { display:flex; align-items:center; gap:9px; padding:14px 12px 10px; }
.post-toc-head .ttl { font:800 13px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#121214; }
.post-toc-head .pct { margin-left:auto; font:700 11px/1 var(--font-mono,monospace); color:#0d4ed6; background:rgba(16,96,255,.1); border-radius:999px; padding:5px 9px; }
.post-toc-bar { height:4px; border-radius:999px; background:#e2e8f2; overflow:hidden; margin:0 12px 12px; }
.post-toc-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#1060ff,#00adef); transition:width .2s ease; }
.toc-list { position:relative; display:flex; flex-direction:column; }
.toc-list::before { content:''; position:absolute; left:22px; top:20px; bottom:20px; width:2px; background:#e2e8f2; }
.toc-item { position:relative; display:flex; gap:12px; align-items:center; text-align:left; border:0; background:none; padding:8px 10px; border-radius:8px; cursor:pointer; font:500 14px/1.35 var(--font-sans); color:#64718a; transition:color .14s; width:100%; }
.toc-item:hover { color:#0d4ed6; }
.toc-node { width:26px; height:26px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font:700 11px/1 var(--font-mono,monospace); background:#fff; border:2px solid #e2e8f2; color:#64718a; position:relative; z-index:1; transition:all .2s; }
.toc-item.done { color:#333b4d; }
.toc-item.done .toc-node { border-color:#1060ff; background:rgba(16,96,255,.1); color:#0d4ed6; }
.toc-item.active { color:#0d4ed6; font-weight:700; }
.toc-item.active .toc-node { border-color:#1060ff; background:#1060ff; color:#fff; box-shadow:0 0 0 4px rgba(16,96,255,.1); }
/* CTA card sidebar */
.cq-cta-card { background:#fff; border:1px solid #e2e8f2; border-radius:16px; box-shadow:0 2px 8px rgba(18,23,41,.07); overflow:hidden; }
.cq-cta-img { aspect-ratio:1/1; background-size:cover; background-position:center 18%; }
.cq-cta-body { padding:16px; }
.cq-cta-badges { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.cq-cta-free { background:#f59e0b; color:#121214; font:700 12px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.04em; padding:6px 12px; border-radius:999px; }
.cq-cta-sub { font:600 12px var(--font-sans); color:#64718a; }
.cq-cta-title { font:700 16px/1.3 var(--font-sans); color:#121214; margin-bottom:8px; }
.cq-cta-rating { font:400 13px var(--font-sans); color:#64718a; margin-bottom:14px; }
.cq-cta-rating .cq-stars { color:#f59e0b; letter-spacing:1px; } .cq-cta-rating b { color:#121214; }
.cq-cta-btn { position:relative; display:flex; align-items:center; justify-content:center; height:48px; background:#f59e0b; color:#121214 !important; font:700 15px var(--font-sans); border-radius:12px; box-shadow:0 8px 26px rgba(245,158,11,.42); transition:transform .14s; }
.cq-cta-btn:hover { transform:translateY(-1px); }
.cq-cta-arrow { position:absolute; right:9px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:rgba(18,18,20,.14); display:inline-flex; align-items:center; justify-content:center; font-size:16px; line-height:0; color:#121214; }
.cq-cta-btn:hover .cq-cta-arrow { background:rgba(18,18,20,.2); }
.cq-cta-note { display:flex; align-items:center; gap:6px; font:400 12px var(--font-sans); color:#64718a; margin-top:10px; justify-content:center; }
/* Thân bài */
.post-body { font:400 18px/1.72 var(--font-sans); color:#333b4d; }
.post-body > * { margin:0 0 1.25em; }
.post-body p { margin:0 0 1.4em; }
.post-body h2 { font:800 28px/1.3 var(--font-sans); letter-spacing:-.015em; color:#121214; margin:1.9em 0 .7em; scroll-margin-top:110px; }
.post-body h3 { font:700 22px/1.35 var(--font-sans); color:#121214; margin:1.5em 0 .6em; scroll-margin-top:110px; }
.post-body strong { color:#121214; font-weight:700; }
.post-body a { color:#0d4ed6; text-decoration:underline; }
.post-body img { border-radius:12px; border:1px solid #e2e8f2; width:100%; }
.post-body figure { margin:1.6em 0; }
.post-body figcaption { font:400 13px/1.5 var(--font-sans); color:#64718a; text-align:center; margin-top:8px; }
.post-body ul, .post-body ol { padding-left:1.3em; display:flex; flex-direction:column; gap:.45em; }
.post-body blockquote { border-left:4px solid #1060ff; background:#f6f8fc; border-radius:0 8px 8px 0; padding:14px 20px; font-style:italic; color:#121214; margin:1.6em 0; }
.post-body table { width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden; border:1px solid #e2e8f2; font-size:15px; display:block; overflow-x:auto; }
.post-body thead, .post-body th { background:#121214; color:#fff; }
.post-body th { font:700 13px/1.4 var(--font-sans); text-transform:uppercase; letter-spacing:.04em; text-align:left; padding:12px 16px; white-space:nowrap; }
.post-body td { padding:12px 16px; border-top:1px solid #e2e8f2; color:#333b4d; }
/* Box tác giả */
.cq-author-box { display:flex; gap:20px; background:#fff; border:1px solid #e2e8f2; border-left:4px solid #00adef; border-radius:16px; padding:22px; margin:36px 0 24px; box-shadow:0 2px 8px rgba(18,23,41,.07); }
.cq-author-img { width:110px; height:130px; border-radius:12px; object-fit:cover; object-position:center 20%; flex:none; }
.cq-author-label { font:700 11px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#00adef; margin-bottom:6px; }
.cq-author-name { font:800 20px var(--font-sans); color:#121214; margin-bottom:8px; }
.cq-author-bio { font:400 14px/1.6 var(--font-sans); color:#333b4d; margin:0 0 12px; }
.cq-author-soc { display:flex; gap:10px; }
.cq-author-soc a { width:34px; height:34px; border-radius:8px; background:#f6f8fc; color:#0d4ed6; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e2e8f2; }
.cq-author-soc a:hover { border-color:#1060ff; }
/* Rating */
.cq-rating-box { text-align:center; background:#f6f8fc; border:1px solid #e2e8f2; border-radius:16px; padding:24px; }
.cq-rating-title { font:700 17px var(--font-sans); color:#121214; margin-bottom:10px; }
.cq-rating-stars { display:inline-flex; gap:4px; }
.post-star { background:none; border:0; cursor:pointer; padding:4px; color:#cbd4e1; transition:transform .14s; line-height:0; }
.post-star:hover { transform:scale(1.15); }
.post-star.lit { color:#f59e0b; }
.cq-rating-meta { font:400 14px var(--font-sans); color:#64718a; margin-top:8px; } .cq-rating-meta b { color:#121214; }
/* Bài liên quan */
.cq-related { background:#eaf1ff; border-top:1px solid #e2e8f2; }
.cq-related-inner { max-width:1200px; margin:0 auto; padding:64px 48px; }
.cq-related-eyebrow { font:700 14px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#0d4ed6; margin-bottom:10px; }
.cq-related-h2 { font:700 32px/1.2 var(--font-sans); color:#121214; margin:0 0 28px; }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.cq-card-edge { background:#fff; border:1px solid #e2e8f2; border-top:4px solid #00adef; border-radius:16px; box-shadow:0 2px 8px rgba(18,23,41,.07); }
.cq-rel-card { display:block; overflow:hidden; transition:transform .22s, box-shadow .22s; }
.cq-rel-card:hover { transform:translateY(-4px); box-shadow:0 12px 30px rgba(18,23,41,.12); }
.cq-rel-thumb { aspect-ratio:16/9; overflow:hidden; background:#0a1226; }
.cq-rel-thumb img { width:100%; height:100%; object-fit:cover; }
.cq-rel-body { padding:16px 18px 18px; }
.cq-rel-cat { display:inline-block; background:rgba(16,96,255,.1); color:#0d4ed6; font:700 11px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.04em; padding:5px 9px; border-radius:4px; margin-bottom:10px; }
.cq-rel-title { font:700 17px/1.35 var(--font-sans); color:#121214; margin:0 0 10px; }
.cq-rel-meta { font:400 13px var(--font-sans); color:#64718a; }
/* CTA cuối */
.cq-post-cta { background:radial-gradient(80% 130% at 90% -20%, rgba(0,173,239,.3), transparent 60%), linear-gradient(120deg,#0d4ed6,#0a3ca8); text-align:center; }
.cq-post-cta-inner { max-width:1200px; margin:0 auto; padding:72px 48px; }
.cq-post-cta-eyebrow { font:700 14px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#1bb8f1; margin-bottom:14px; }
.cq-post-cta-h2 { font:800 36px/1.2 var(--font-sans); color:#fff; margin:0 0 24px; }
.cq-post-cta-checks { list-style:none; margin:0 auto 30px; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; width:fit-content; }
.cq-post-cta-checks li { position:relative; padding-left:32px; font:400 16px/1.5 var(--font-sans); color:rgba(255,255,255,.88); }
.cq-post-cta-checks li::before { content:'✓'; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:rgba(0,173,239,.22); color:#1bb8f1; font:800 12px/22px var(--font-sans); text-align:center; }
.cq-post-cta-btn { position:relative; display:inline-flex; align-items:center; justify-content:center; height:60px; padding:0 64px 0 40px; background:#f59e0b; color:#121214 !important; font:700 18px var(--font-sans); border-radius:12px; box-shadow:0 8px 26px rgba(245,158,11,.42); transition:transform .14s; }
.cq-post-cta-btn:hover { transform:translateY(-1px); }
.cq-cta-arrow2 { position:absolute; right:13px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%; background:rgba(18,18,20,.14); display:inline-flex; align-items:center; justify-content:center; font-size:18px; line-height:0; color:#121214; }
.cq-post-cta-btn:hover .cq-cta-arrow2 { background:rgba(18,18,20,.2); }
.cq-post-cta-sub { font:400 14px var(--font-sans); color:rgba(255,255,255,.55); margin:18px 0 0; }
@media (max-width:1080px){ .cq-post-hero-grid, .post-layout { grid-template-columns:minmax(0,700px); } .post-hero-spacer, .post-toc-aside { display:none; } }
@media (max-width:900px){ .related-grid { grid-template-columns:1fr; } }
@media (max-width:640px){ .cq-post-h1 { font-size:26px; } .post-body h2 { font-size:24px; } .cq-post-hero-grid,.cq-post-wrap,.cq-related-inner,.cq-post-cta-inner { padding-left:20px; padding-right:20px; } .cq-author-box { flex-direction:column; } .cq-post-share { margin-left:0; } }

/* ============================================================
   CATEGORY / ARCHIVE (CATEGORY-SPEC.md — px/hex literal)
   ============================================================ */
.cq-sec-inner { max-width:1200px; margin:0 auto; padding:64px 48px; }
.cq-eyebrow-blue { font:700 14px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#0d4ed6; margin-bottom:10px; }
.cq-eyebrow-cyan { font:700 14px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#1bb8f1; margin-bottom:12px; }
.cq-sec-h2 { font:800 30px/1.25 var(--font-sans); letter-spacing:-.01em; color:#121214; margin:0 0 10px; }
.cq-sec-sub { font:400 16px/1.6 var(--font-sans); color:#64718a; margin:0 0 28px; max-width:680px; }
/* Hero */
.cq-cat-hero { position:relative; overflow:hidden; background:radial-gradient(60% 90% at 12% 0%, rgba(0,173,239,.28), transparent 60%), linear-gradient(135deg,#0d4ed6,#0a3ca8 48%,#06205c); color:#fff; }
.cq-cat-hero::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(0,173,239,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,173,239,.08) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); }
.cq-cat-hero-inner { position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:64px 48px; }
.cat-hero-grid { display:grid; grid-template-columns:65fr 35fr; gap:56px; align-items:center; }
.cq-cat-bc { display:flex; align-items:center; gap:8px; font:500 13px/1 var(--font-sans); color:rgba(255,255,255,.6); flex-wrap:wrap; margin-bottom:16px; }
.cq-cat-bc a { color:rgba(255,255,255,.6); } .cq-cat-bc a:hover { color:#fff; }
.cq-cat-bc .cur { color:rgba(255,255,255,.92); }
.cq-cat-eyebrow { font:700 13px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#1bb8f1; margin-bottom:14px; }
.cq-cat-h1 { font:800 46px/1.18 var(--font-sans); letter-spacing:-.015em; color:#fff; margin:0 0 18px; }
.cat-grad { background:linear-gradient(120deg,#8dd9fa,#1bb8f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cq-cat-intro { font:400 18px/1.6 var(--font-sans); color:rgba(255,255,255,.72); margin:0; max-width:560px; }
/* Roadmap glass */
.cat-roadmap { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.3); padding:20px 18px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.cat-roadmap-head { display:flex; align-items:center; gap:9px; padding:0 6px 14px; border-bottom:1px solid rgba(255,255,255,.1); margin-bottom:12px; }
.cat-roadmap-head .ttl { font:800 13px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.06em; color:#fff; }
.cat-roadmap-list { position:relative; display:flex; flex-direction:column; }
.cat-roadmap-list::before { content:''; position:absolute; left:19px; top:16px; bottom:16px; width:2px; background:rgba(255,255,255,.12); }
.cat-stage { position:relative; display:flex; align-items:center; gap:13px; padding:9px 6px; font:600 14px/1.3 var(--font-sans); color:rgba(255,255,255,.55); }
.cat-stage .node { width:28px; height:28px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.22); color:rgba(255,255,255,.55); position:relative; z-index:1; font:700 12px/1 var(--font-mono,monospace); }
.cat-stage-name { flex:1; min-width:0; }
.cat-stage.lit { color:#fff; }
.cat-stage.lit .node { border-color:#00adef; background:#00adef; color:#121214; box-shadow:0 0 16px rgba(0,173,239,.5); }
.cat-stage .n-posts { margin-left:auto; font:700 11px/1 var(--font-mono,monospace); color:#121214; background:#8dd9fa; border-radius:999px; padding:5px 9px; flex:none; white-space:nowrap; }
.cat-stage:not(.lit) .n-posts { color:rgba(255,255,255,.55); background:rgba(255,255,255,.1); }
/* Article cards */
.must-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.cq-art-card { display:block; overflow:hidden; transition:transform .22s, box-shadow .22s; }
.cq-art-card:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(18,23,41,.13); }
.cq-art-thumb { aspect-ratio:16/9; overflow:hidden; background:#0a1226; }
.cq-art-thumb img { width:100%; height:100%; object-fit:cover; }
.cq-art-body { padding:16px 18px 18px; }
.cq-art-tags { display:flex; align-items:center; gap:8px; margin-bottom:11px; flex-wrap:wrap; }
.cq-chip-cyan { background:#00adef; color:#121214; font:700 11px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.05em; padding:5px 9px; border-radius:4px; }
.cq-cat-badge { background:rgba(16,96,255,.1); color:#0d4ed6; font:700 11px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.04em; padding:5px 9px; border-radius:4px; }
.cq-art-title { font:700 18px/1.35 var(--font-sans); color:#121214; margin:0 0 8px; }
.cq-art-excerpt { font:400 14px/1.55 var(--font-sans); color:#64718a; margin:0 0 12px; }
.cq-art-meta { font:500 13px var(--font-sans); color:#94a0b4; }
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
/* Gateway */
.cq-bg-cobalt { position:relative; overflow:hidden; background:radial-gradient(80% 130% at 90% -20%, rgba(0,173,239,.3), transparent 60%), linear-gradient(120deg,#0d4ed6,#082e80); border-radius:24px; }
.cq-gateway { padding:52px; }
.gateway-grid { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
.cq-gw-h2 { font:800 30px/1.25 var(--font-sans); color:#fff; margin:14px 0 18px; }
.cq-gw-bullets { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cq-gw-bullets li { position:relative; padding-left:30px; font:400 16px/1.5 var(--font-sans); color:rgba(255,255,255,.9); }
.cq-gw-bullets li::before { content:'✓'; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background:rgba(0,173,239,.25); color:#8dd9fa; font:800 12px/20px var(--font-sans); text-align:center; }
.cq-gw-trust { padding:22px; }
.cq-gw-person { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.cq-gw-person img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.3); flex:none; }
.cq-gw-person strong { display:block; font:700 15px var(--font-sans); color:#fff; }
.cq-gw-person span { font:400 12px var(--font-sans); color:rgba(255,255,255,.7); }
.cq-gw-rating { font:400 14px var(--font-sans); color:rgba(255,255,255,.85); margin-bottom:16px; }
.cq-gw-rating .cq-stars { color:#f59e0b; letter-spacing:1px; } .cq-gw-rating b { color:#fff; }
.cq-gw-btn { display:block; text-align:center; height:60px; line-height:60px; font-size:17px; }
.cq-gw-note { display:flex; align-items:center; justify-content:center; gap:6px; font:400 12px var(--font-sans); color:rgba(255,255,255,.7); margin-top:12px; }
.cq-amber { background:#f59e0b !important; color:#121214 !important; border-radius:12px; box-shadow:0 8px 26px rgba(245,158,11,.42); font-weight:800; text-transform:none; transition:transform .14s; }
.cq-amber:hover { transform:translateY(-1px); }
/* Filter + tint */
.cq-tint { background:#eaf1ff; border-top:1px solid #e2e8f2; border-bottom:1px solid #e2e8f2; }
.cq-filter-chips { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 28px; }
.cq-chip { height:40px; padding:0 18px; display:inline-flex; align-items:center; border-radius:999px; border:1px solid #cbd4e1; background:#fff; font:600 14px/1 var(--font-sans); color:#333b4d; transition:all .14s; }
.cq-chip:hover { border-color:#1060ff; color:#0d4ed6; }
.cq-chip.active { background:#1060ff; color:#fff; border-color:#1060ff; box-shadow:0 8px 28px rgba(16,96,255,.35); }
.cq-pagination { display:flex; justify-content:center; gap:8px; margin-top:36px; flex-wrap:wrap; }
.cq-pagination .page-numbers { min-width:44px; height:44px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e2e8f2; border-radius:8px; background:#fff; color:#333b4d; font:600 14px var(--font-sans); }
.cq-pagination .page-numbers.current { background:#1060ff; color:#fff; border-color:#1060ff; }
.cq-pagination a.page-numbers:hover { border-color:#1060ff; color:#0d4ed6; }
/* Next-step */
.cq-nextstep { padding:44px 52px; }
.nextstep-grid { display:grid; grid-template-columns:1.5fr auto; gap:28px; align-items:center; }
.cq-ns-h2 { font:800 28px/1.25 var(--font-sans); color:#fff; margin:0; }
.cq-ns-btn { display:inline-block; background:#1060ff; color:#fff !important; font:700 16px var(--font-sans); padding:0 28px; height:54px; line-height:54px; border-radius:12px; white-space:nowrap; box-shadow:0 8px 24px rgba(16,96,255,.4); transition:transform .14s; }
.cq-ns-btn:hover { transform:translateY(-1px); background:#0d4ed6; }
@media (max-width:900px){ .cat-hero-grid, .gateway-grid, .must-grid { grid-template-columns:1fr; } }
@media (max-width:820px){ .cat-grid, .nextstep-grid { grid-template-columns:minmax(0,1fr); } .cq-ns-btn { white-space:normal !important; max-width:100%; height:auto; line-height:1.35; padding-top:13px; padding-bottom:13px; } }
@media (max-width:640px){ .cq-cat-h1 { font-size:30px; } .cq-sec-inner, .cq-cat-hero-inner { padding-left:20px; padding-right:20px; } .cq-gateway, .cq-nextstep { padding:28px 22px; } }

/* ============================================================
   ABOUT / GIỚI THIỆU (ABOUT-SPEC.md — px/hex literal)
   ============================================================ */
.cq-ab-inner { max-width:1200px; margin:0 auto; padding:0 48px; }
.cq-ab-sec { padding:80px 0; }
.cq-ab-sec-guar { padding-top:0 !important; }
.cq-dark { position:relative; overflow:hidden; background:radial-gradient(60% 90% at 12% 0%, rgba(0,173,239,.28), transparent 60%), linear-gradient(135deg,#0d4ed6,#0a3ca8 48%,#06205c); color:#fff; }
.cq-dark::before { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(0,173,239,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(0,173,239,.08) 1px,transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); mask-image:radial-gradient(85% 95% at 30% 5%,#000 25%,transparent 78%); }
.cq-dark .cq-ab-inner { position:relative; z-index:1; }
.cq-grad-cyan { background:linear-gradient(120deg,#8dd9fa,#1bb8f1); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cq-card { background:#fff; border:1px solid #e2e8f2; border-radius:16px; box-shadow:0 2px 8px rgba(18,23,41,.07); }
.cq-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cq-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cq-stat-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.cq-ab-eyebrow { font:700 14px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#0d4ed6; margin-bottom:12px; }
.cq-eyebrow-cy { color:#1bb8f1 !important; }
.cq-ab-h2 { font:800 30px/1.25 var(--font-sans); letter-spacing:-.01em; color:#121214; margin:0; }
.cq-ab-h2.light { color:#fff; }
.cq-ab-head { text-align:center; max-width:680px; margin:0 auto 40px; }
.cq-about-hero { padding:72px 0; }
.cq-ab-hero-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }
.cq-ab-h1 { font:800 clamp(34px,4.4vw,54px)/1.12 var(--font-sans); letter-spacing:-.015em; color:#fff; margin:0 0 20px; }
.cq-ab-lead { font:400 18px/1.6 var(--font-sans); color:rgba(255,255,255,.72); margin:0 0 28px; max-width:540px; }
.cq-ab-hero-btns { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:26px; }
.cq-ab-btn { display:inline-flex; align-items:center; height:54px; padding:0 26px; border-radius:12px; font:800 16px var(--font-sans); }
.cq-ab-btn-outline { display:inline-flex; align-items:center; height:54px; padding:0 26px; border-radius:12px; border:2px solid rgba(0,173,239,.6); color:#fff; font:700 16px var(--font-sans); transition:all .15s; }
.cq-ab-btn-outline:hover { background:rgba(0,173,239,.12); border-color:#00adef; }
.cq-ab-trust { display:flex; align-items:center; gap:12px; flex-wrap:wrap; font:400 14px var(--font-sans); color:rgba(255,255,255,.7); }
.cq-ab-trust b { color:#fff; font-weight:700; } .cq-ab-trust i { color:rgba(255,255,255,.35); font-style:normal; }
.cq-ab-hero-right { position:relative; }
.cq-ab-hero-photo { width:360px; height:440px; max-width:100%; margin-left:auto; border-radius:20px; background-size:cover; background-position:center 18%; border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 70px rgba(0,0,0,.35); }
.cq-ab-chip { position:absolute; font:700 13px/1 var(--font-mono,monospace); color:#121214; background:#8dd9fa; border-radius:999px; padding:9px 14px; box-shadow:0 8px 24px rgba(0,0,0,.25); }
.cq-ab-chip-a { top:30px; left:-8px; background:#f59e0b; }
.cq-ab-chip-b { bottom:48px; right:-10px; }
.cq-ab-painrow .cq-card { padding:32px; }
.cq-promise-card { border:1px solid #00adef !important; border-top:4px solid #00adef !important; box-shadow:0 6px 20px rgba(0,173,239,.12) !important; }
.cq-pain-title, .cq-promise-title { display:inline-flex; align-items:center; gap:9px; font:700 13px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; }
.cq-pain-title svg, .cq-promise-title svg { flex:none; }
.cq-pain-title { color:#e5484d; } .cq-promise-title { color:#0d4ed6; }
.cq-promise-title svg { color:#0098cf; }
.cq-pain-list, .cq-promise-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.cq-pain-list li, .cq-promise-list li { display:flex; gap:11px; align-items:flex-start; font:400 16px/1.5 var(--font-sans); color:#333b4d; }
.cq-pain-list .ic, .cq-promise-list .ic { width:24px; height:24px; flex:none; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; }
.cq-pain-list .ic.x { background:rgba(229,72,77,.12); color:#e5484d; }
.cq-promise-list .ic.v { background:rgba(0,173,239,.14); color:#0098cf; }
.cq-benefit { padding:26px; }
.cq-icon-box { width:52px; height:52px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px; }
.cq-benefit-h3 { font:700 18px/1.3 var(--font-sans); color:#121214; margin:0 0 8px; }
.cq-benefit-p { font:400 15px/1.55 var(--font-sans); color:#64718a; margin:0; }
.cq-ab-founder-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.cq-ab-founder-photo { width:380px; height:460px; max-width:100%; border-radius:20px; background-size:cover; background-position:center 15%; border:1px solid rgba(255,255,255,.18); box-shadow:0 30px 70px rgba(0,0,0,.35); }
.cq-ab-founder-p { font:400 16px/1.7 var(--font-sans); color:rgba(255,255,255,.82); margin:0 0 16px; }
.cq-ab-founder-stats { display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; }
.cq-ab-founder-stats > div { flex:1 1 0; min-width:128px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:18px 20px; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:transform .18s, border-color .18s; }
.cq-ab-founder-stats > div:hover { transform:translateY(-3px); border-color:rgba(0,173,239,.5); }
.cq-ab-statnum { display:block; font:800 40px/1 var(--font-sans); letter-spacing:-.01em; color:#f7ac26; }
.cq-ab-founder-stats > div:nth-child(2) .cq-ab-statnum { color:#5b9dff; }
.cq-ab-founder-stats > div:nth-child(3) .cq-ab-statnum { color:#1bb8f1; }
.cq-ab-statlbl { font:500 13px/1.3 var(--font-sans); color:rgba(255,255,255,.75); margin-top:9px; display:block; }
.cq-ab-head-p { font:400 16px/1.6 var(--font-sans); color:#64718a; margin:14px 0 0; }
.cq-philo { gap:24px; }
.cq-philo-item { text-align:center; padding:36px 28px; }
.cq-philo-circle { width:64px; height:64px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.cq-philo-h3 { font:800 22px/1.2 var(--font-sans); color:#121214; margin:0 0 10px; }
.cq-philo-p { font:400 15px/1.6 var(--font-sans); color:#64718a; margin:0; }
.cq-stat-band { position:relative; overflow:hidden; background:radial-gradient(80% 130% at 88% -20%, rgba(0,173,239,.3), transparent 60%), linear-gradient(120deg,#0d4ed6,#082e80); border-radius:24px; }
.cq-ab-statband { padding:40px 52px; }
.cq-sb-item { text-align:center; }
.cq-stat-num { font:800 44px/1 var(--font-sans); }
.cq-stat-num.amber { color:#f7ac26; } .cq-stat-num.cyan { color:#1bb8f1; }
.cq-sb-lbl { display:block; font:500 14px var(--font-sans); color:rgba(255,255,255,.8); margin-top:8px; }
.cq-tm-card { overflow:hidden; }
.cq-tm-grid { gap:24px; }
.cq-tm-video { position:relative; aspect-ratio:16/9; background:#0a1226; }
.cq-tm-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.cq-tm-thumb { aspect-ratio:16/10; background-size:cover; background-position:center 18%; position:relative; }
.cq-tm-play { position:absolute; inset:0; margin:auto; width:54px; height:54px; border-radius:50%; background:rgba(16,96,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(0,0,0,.3); }
.cq-tm-body { padding:16px 18px 18px; }
.cq-tm-stars { color:#f59e0b; letter-spacing:1px; font-size:14px; }
.cq-tm-name { font:700 15px var(--font-sans); color:#121214; margin:6px 0 4px; }
.cq-tm-result { font:400 14px/1.5 var(--font-sans); color:#64718a; margin:0; }
.cq-perks { gap:20px; }
.cq-perk { display:flex; gap:16px; padding:22px; align-items:flex-start; }
.cq-perk-ic { width:48px; height:48px; flex:none; border-radius:12px; background:rgba(16,96,255,.1); color:#0d4ed6; display:inline-flex; align-items:center; justify-content:center; }
.cq-perk-title { font:700 17px var(--font-sans); color:#121214; margin-bottom:5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cq-perk-badge { background:#f59e0b; color:#121214; font:700 10px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.05em; padding:4px 8px; border-radius:999px; }
.cq-perk-desc { font:400 14px/1.55 var(--font-sans); color:#64718a; margin:0; }
.cq-guarantee { background:rgba(245,158,11,.08); border:2px solid #f7ac26; border-radius:24px; }
.cq-ab-guarantee { display:flex; align-items:center; gap:28px; padding:36px 44px; }
.cq-guar-shield { width:88px; height:88px; flex:none; border-radius:50%; background:#f59e0b; display:flex; align-items:center; justify-content:center; }
.cq-guar-h2 { font:800 26px/1.3 var(--font-sans); color:#121214; margin:0 0 8px; }
.cq-guar-p { font:400 16px/1.6 var(--font-sans); color:#333b4d; margin:0; }
.cq-ab-cta-inner { max-width:760px; margin:0 auto; text-align:center; }
.cq-ab-cta-p { font:400 17px/1.6 var(--font-sans); color:rgba(255,255,255,.75); margin:0 0 28px; }
.cq-ab-cta-btn { display:inline-flex; align-items:center; height:64px; padding:0 40px; border-radius:12px; font:800 18px var(--font-sans); }
.cq-ab-cta-note { font:400 14px var(--font-sans); color:rgba(255,255,255,.6); margin:18px 0 0; }
.cq-ab-faq-wrap { max-width:880px; }
.cq-ab-faq { display:flex; flex-direction:column; gap:14px; }
.cq-ab-faq-item { background:#fff; border:2px solid #e2e8f2; border-radius:12px; overflow:hidden; transition:border-color .2s; }
.cq-ab-faq-item.open { border-color:#1060ff; }
.cq-ab-faq-q { width:100%; display:flex; align-items:center; gap:14px; text-align:left; background:none; border:0; cursor:pointer; padding:18px 20px; font:700 16px/1.4 var(--font-sans); color:#121214; }
.cq-ab-faq-ic { width:30px; height:30px; flex:none; border-radius:8px; border:1px solid #e2e8f2; background:rgba(16,96,255,.07); position:relative; }
.cq-ab-faq-ic::before, .cq-ab-faq-ic::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:#0d4ed6; border-radius:2px; }
.cq-ab-faq-ic::before { width:12px; height:2.5px; } .cq-ab-faq-ic::after { width:2.5px; height:12px; }
.cq-ab-faq-item.open .cq-ab-faq-ic { background:#1060ff; border-color:#1060ff; }
.cq-ab-faq-item.open .cq-ab-faq-ic::before { background:#fff; } .cq-ab-faq-item.open .cq-ab-faq-ic::after { display:none; }
.cq-ab-faq-a { max-height:0; overflow:hidden; transition:max-height .3s ease; }
.cq-ab-faq-item.open .cq-ab-faq-a { max-height:260px; }
.cq-ab-faq-a p { margin:0; padding:0 20px 20px 64px; font:400 15px/1.6 var(--font-sans); color:#333b4d; }
@media (max-width:980px){ .cq-ab-hero-grid, .cq-ab-founder-grid, .cq-grid-3, .cq-stat-4, .cq-perks { grid-template-columns:1fr 1fr; } .cq-ab-hero-photo, .cq-ab-founder-photo { margin:0 auto; } }
@media (max-width:820px){ .cq-grid-2, .cq-ab-hero-grid, .cq-ab-founder-grid { grid-template-columns:minmax(0,1fr); } .cq-ab-guarantee { flex-direction:column; text-align:center; }
  .cq-ab-founder-photo { width:100% !important; max-width:340px; height:auto !important; aspect-ratio:380/460; margin:0 auto; }
  .cq-ab-hero-photo { width:100% !important; max-width:330px; height:auto !important; aspect-ratio:360/440; margin:0 auto; } }
@media (max-width:560px){ .cq-grid-3, .cq-stat-4, .cq-perks { grid-template-columns:1fr; } .cq-ab-inner { padding:0 20px; } .cq-ab-faq-a p { padding-left:20px; } }

/* ===== EXIT-INTENT POPUP (parts-bottom.jsx) ===== */
.cq-exit-overlay { position:fixed; inset:0; z-index:1300; background:rgba(10,11,16,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .2s ease; }
.cq-exit-overlay.show { opacity:1; visibility:visible; }
.cq-exit-modal { width:min(520px,94vw); background:radial-gradient(80% 120% at 85% -15%, rgba(0,173,239,.25), transparent 60%), linear-gradient(135deg,#0a3ca8,#06205c); border:1px solid rgba(0,173,239,.55); border-radius:24px; box-shadow:0 0 60px rgba(0,173,239,.25), 0 30px 70px rgba(0,0,0,.5); padding:clamp(28px,5vw,44px); text-align:center; position:relative; transform:scale(.95); transition:transform .22s cubic-bezier(.22,1,.36,1); }
.cq-exit-overlay.show .cq-exit-modal { transform:scale(1); }
.cq-exit-close { position:absolute; top:14px; right:14px; background:none; border:0; cursor:pointer; color:rgba(255,255,255,.5); padding:6px; display:inline-flex; transition:color .15s; }
.cq-exit-close:hover { color:#fff; }
.cq-exit-eyebrow { font:700 14px/1 var(--font-sans); text-transform:uppercase; letter-spacing:.08em; color:#1bb8f1; }
.cq-exit-h2 { font:800 clamp(24px,3vw,32px)/1.2 var(--font-sans); color:#fff; margin:12px 0 10px; }
.cq-exit-sub { font:400 15px/1.6 var(--font-sans); color:rgba(255,255,255,.65); margin:0 0 22px; }
.cq-exit-coupon { display:inline-flex; align-items:center; gap:14px; background:rgba(255,255,255,.06); border:1px dashed rgba(245,158,11,.6); border-radius:12px; padding:14px 22px; margin-bottom:22px; }
.cq-exit-code { font:800 20px/1 var(--font-mono,monospace); color:#f59e0b; letter-spacing:.08em; }
.cq-exit-timer { font:700 16px/1 var(--font-mono,monospace); color:#fff; background:rgba(229,72,77,.25); border:1px solid rgba(229,72,77,.5); border-radius:8px; padding:8px 12px; }
.cq-exit-btn { display:block; width:100%; height:54px; line-height:54px; background:#f59e0b; color:#121214 !important; font:800 16px var(--font-sans); border-radius:12px; box-shadow:0 8px 26px rgba(245,158,11,.42); transition:transform .14s; }
.cq-exit-btn:hover { transform:translateY(-1px); }
.cq-exit-dismiss { display:block; margin:16px auto 0; background:none; border:0; cursor:pointer; font:400 13px var(--font-sans); color:rgba(255,255,255,.45); transition:color .15s; }
.cq-exit-dismiss:hover { color:rgba(255,255,255,.75); }

/* ===== WIDGET "Kết quả học viên" → VIDEO REVIEW ===== */
.cq-rv-main { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; cursor:pointer; }
.cq-rv-main img.cq-rv-thumb { width:100%; height:100%; object-fit:cover; display:block; }
.cq-rv-main iframe { width:100%; height:100%; border:0; display:block; }
.cq-rv-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border:0; border-radius:50%; background:rgba(229,72,77,.95); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.4); transition:transform .15s, background .15s; padding-left:3px; }
.cq-rv-main:hover .cq-rv-play { transform:translate(-50%,-50%) scale(1.08); background:#e5484d; }
.cq-rv-strip { display:flex; gap:8px; margin-top:10px; }
.cq-rv-t { flex:1; min-width:0; padding:0; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:none; line-height:0; opacity:.55; transition:opacity .15s, border-color .15s; }
.cq-rv-t img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; display:block; }
.cq-rv-t.is-active { opacity:1; border-color:var(--cobalt-500,#1060ff); }
.cq-rv-t:hover { opacity:1; }

/* ===== MOBILE OFF-CANVAS MENU ===== */
#main-menu .nav-sidebar.cq-mnav { padding:4px 0 8px; }
#main-menu .nav-sidebar.cq-mnav > li { border:0; margin:0; }
/* search box */
#main-menu .header-search-form { padding:16px 18px 12px; border:0; }
#main-menu .header-search-form .searchform, #main-menu form.searchform { width:100%; }
#main-menu form.searchform input.search-field, #main-menu .header-search-form input[type=search] { border-radius:10px; border:1px solid #e2e8f2; height:46px; background:#f6f8fc; box-shadow:none; }
#main-menu .header-search-form .button.icon { border-radius:0 10px 10px 0; }
/* menu items */
#main-menu .cq-mitem { border-bottom:1px solid #eef2f7; }
#main-menu .nav-sidebar.cq-mnav .cq-mitem > a { display:flex; align-items:center; padding:15px 22px; font:600 15.5px/1.3 var(--font-sans,'Be Vietnam Pro'); text-transform:none; letter-spacing:0; color:#121214; transition:color .15s, background .15s, padding .15s; }
#main-menu .nav-sidebar.cq-mnav .cq-mitem > a:hover, #main-menu .nav-sidebar.cq-mnav .cq-mitem > a:focus { color:#1060ff; background:#f4f8ff; padding-left:27px; }
/* newsletter */
#main-menu .header-newsletter-item > a { display:flex; align-items:center; gap:8px; padding:14px 22px; font:600 14.5px var(--font-sans); color:#475067; text-transform:none; border-bottom:1px solid #eef2f7; }
#main-menu .header-newsletter-item > a:hover { color:#1060ff; }
/* social row */
#main-menu .cq-msocial { padding:16px 20px; }
#main-menu .cq-msocial .social-icons { display:flex; gap:10px; margin:0; }
#main-menu a.cq-msoc { width:40px; height:40px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:transform .15s, box-shadow .15s; }
#main-menu a.cq-msoc:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(18,23,41,.22); }
/* bottom login + CTA */
#main-menu .html_top_right_text { padding:8px 18px 18px; border-top:1px solid #eef2f7; margin-top:2px; }
#main-menu .cq-header-actions { display:flex; flex-direction:column; align-items:stretch; gap:10px; width:100%; }
#main-menu .cq-header-actions .cq-login { display:block; width:100%; text-align:center; padding:12px; border:1px solid #d9e1ee; border-radius:10px; font-weight:700; color:#121214; background:#fff; }
#main-menu .cq-header-actions .cq-login:hover { border-color:#1060ff; color:#1060ff; }
#main-menu .cq-header-actions .cq-btn-cta { display:block; width:100%; text-align:center; margin:0; background:#f59e0b !important; color:#121214 !important; border-radius:10px; padding:13px; font-weight:800; line-height:1.2; box-shadow:0 8px 22px rgba(245,158,11,.4); }
#main-menu .cq-header-actions .cq-btn-cta:hover { transform:translateY(-1px); }