/* Trung tâm Học Toán Qstudy – qstudy.com.vn · Phong cách C: Đỏ đô – Vàng (Sếp chọn 09/11/2026) */
:root{
  --main:#8f1515;      /* đỏ đô */
  --main2:#c2200f;     /* đỏ tươi đậm */
  --accent:#ffc800;    /* vàng rực */
  --accent-d:#c99400;
  --soft:#fff4d6;      /* kem vàng đậm */
  --ink:#1f1714;
  --muted:#5c4f49;
  --line:#ead9b8;
  --zalo:#0068ff;
  --radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.65;font-size:17px;padding-bottom:58px}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.narrow{max-width:780px}

/* ===== Đầu trang ===== */
.topbar{background:var(--main);color:#fff;font-size:14px}
.topbar .wrap{display:flex;gap:14px;justify-content:space-between;align-items:center;padding-top:6px;padding-bottom:6px;flex-wrap:wrap}
.topbar a{text-decoration:none;font-weight:700;color:var(--accent)}
.head{background:#fff;border-bottom:3px solid var(--accent);position:sticky;top:0;z-index:40;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.head .wrap{display:flex;align-items:center;gap:14px;padding-top:10px;padding-bottom:10px}
.logo{text-decoration:none;display:flex;align-items:center;gap:10px}
.logo-mark{width:44px;height:44px;border-radius:10px;background:var(--main);color:var(--accent);font-weight:900;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--accent)}
.logo-text b{display:block;font-weight:900;font-size:22px;color:var(--main);letter-spacing:1px;line-height:1}
.logo-text small{display:block;font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.menu{display:none;gap:4px;margin-left:auto}
.menu a{text-decoration:none;font-weight:700;font-size:15px;padding:8px 10px;border-radius:6px}
.menu a:hover,.menu a.on{background:var(--soft);color:var(--main)}
.head-cta{margin-left:auto;background:var(--main2);color:#fff;text-decoration:none;font-weight:800;padding:10px 14px;border-radius:var(--radius);white-space:nowrap;font-size:15px}
.burger{background:none;border:2px solid var(--main);color:var(--main);border-radius:6px;font-size:20px;width:42px;height:40px;cursor:pointer}
.mnav{display:none;background:#fff;border-top:1px solid var(--line)}
.mnav.open{display:block}
.mnav a{display:block;padding:13px 18px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:700}

/* ===== Nút ===== */
.btn{display:inline-block;background:var(--accent);color:#1a1200;text-decoration:none;font-weight:900;font-size:18px;padding:15px 26px;border-radius:var(--radius);box-shadow:0 6px 0 var(--accent-d);border:0;cursor:pointer;font-family:inherit;transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 3px 0 var(--accent-d)}
.btn-red{background:var(--main2);color:#fff;box-shadow:0 6px 0 #6d0f0f}
.btn-out{display:inline-block;color:#fff;font-weight:800;border:2px solid rgba(255,255,255,.85);padding:12px 20px;border-radius:var(--radius);text-decoration:none}
.btn-zalo{display:inline-block;background:var(--zalo);color:#fff;font-weight:800;padding:13px 20px;border-radius:var(--radius);text-decoration:none}

/* ===== Hero ===== */
.hero{background:linear-gradient(135deg,var(--main) 0%,var(--main2) 100%);color:#fff;padding:44px 0 54px;position:relative;overflow:hidden}
.hero::after{content:"∑ √ π ∫ ÷ ×";position:absolute;right:-30px;bottom:-40px;font-size:140px;font-weight:900;opacity:.08;white-space:nowrap;pointer-events:none}
.hero .grid{display:grid;gap:28px;align-items:center;position:relative;z-index:1}
.kicker{display:inline-block;background:var(--accent);color:#1a1200;font-weight:800;padding:5px 12px;border-radius:999px;font-size:13px;margin-bottom:14px}
.hero h1{font-size:clamp(31px,6.6vw,56px);line-height:1.1;font-weight:900;margin-bottom:14px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .sub{font-size:clamp(16px,2.4vw,19px);max-width:620px;margin-bottom:24px;opacity:.96}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.page-hero{padding:34px 0 40px}
.page-hero h1{font-size:clamp(28px,5.4vw,44px)}

/* ===== Form ===== */
.card-form{background:#fff;color:var(--ink);border-radius:12px;padding:22px;box-shadow:0 22px 44px rgba(0,0,0,.28);border-top:8px solid var(--accent)}
.card-form h3{color:var(--main);font-size:22px;line-height:1.2;margin-bottom:4px}
.card-form p{color:var(--muted);font-size:15px;margin-bottom:10px}
.card-form label{display:block;font-size:14px;font-weight:700;margin:9px 0 4px}
.card-form input,.card-form select,.card-form textarea{width:100%;padding:11px 12px;border:2px solid var(--line);border-radius:8px;font:inherit;font-size:16px;background:#fff}
.card-form input:focus,.card-form select:focus,.card-form textarea:focus{outline:none;border-color:var(--main2)}
.card-form .btn{width:100%;margin-top:16px;text-align:center}
.tiny{font-size:12.5px;color:var(--muted);margin-top:9px}
.tiny a{color:var(--main)}
.form-ok{display:none;background:#e9f9ee;border:2px solid #2e9e57;color:#14532d;border-radius:8px;padding:12px;margin-top:12px;font-size:15px}

/* ===== Dải con số ===== */
.stats{background:var(--accent);border-bottom:4px solid var(--main)}
.stats .wrap{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding-top:18px;padding-bottom:18px}
.stat{text-align:center}
.stat b{display:block;font-size:clamp(30px,6vw,46px);font-weight:900;color:var(--main);line-height:1}
.stat span{font-size:14px;color:#3d2a00;font-weight:700}

/* ===== Khối chung ===== */
section{padding:54px 0}
h2{font-size:clamp(26px,4.8vw,40px);line-height:1.18;color:var(--main);font-weight:900;margin-bottom:8px}
h2 .hl{background:linear-gradient(transparent 62%,var(--accent) 62%)}
.lead{color:var(--muted);margin-bottom:26px;max-width:740px;font-size:18px}
.soft{background:var(--soft)}
.dark{background:var(--main);color:#fff}
.dark h2{color:#fff}
.dark .lead{color:#ffe7c2}

/* Con đang ở đâu */
.groups{display:grid;gap:16px}
.group{border:3px solid var(--main);border-radius:12px;padding:22px;background:#fff;display:flex;flex-direction:column;box-shadow:6px 6px 0 var(--accent)}
.group .tag{align-self:flex-start;background:var(--main);color:var(--accent);font-size:13px;font-weight:900;padding:4px 11px;border-radius:999px;margin-bottom:10px}
.group h3{font-size:23px;color:var(--main);margin-bottom:6px;line-height:1.25}
.group ul{margin:6px 0 16px 20px;color:var(--muted)}
.group a{margin-top:auto;font-weight:900;color:var(--main2);text-decoration:none}

/* Người dẫn dắt */
.leader{display:grid;gap:26px;align-items:center}
.photo{aspect-ratio:4/5;border-radius:12px;background:repeating-linear-gradient(45deg,#f1e2c2,#f1e2c2 12px,#f8eedb 12px,#f8eedb 24px);display:flex;align-items:center;justify-content:center;color:#8a6d3b;font-weight:800;text-align:center;padding:20px;border:4px solid var(--main);box-shadow:8px 8px 0 var(--accent)}
.photo-img{border-radius:12px;border:4px solid var(--main);box-shadow:8px 8px 0 var(--accent);overflow:hidden;background:#fff}
.photo-img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:60% 0%}
.covers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.covers img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:4px;box-shadow:3px 3px 0 var(--accent);border:1px solid var(--line);background:#fff}
.gallery{display:grid;gap:14px}
.gallery figure{margin:0;border-radius:12px;overflow:hidden;border:3px solid var(--main);background:#fff}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:8px 12px;font-weight:700;color:var(--main);font-size:15px}
@media(min-width:880px){.covers{grid-template-columns:repeat(9,1fr)}.gallery{grid-template-columns:1fr 1fr}}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 18px}
.team figure{margin:0;background:#fff;border:3px solid var(--main);border-radius:12px;overflow:hidden;box-shadow:5px 5px 0 var(--accent)}
.team img{width:100%;aspect-ratio:4/5;object-fit:cover}
.team figcaption{padding:8px 8px 10px;text-align:center}
.team b{display:block;color:var(--main);font-size:17px}
.team span{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.msgs{display:grid;gap:14px}
.msg{margin:0;background:#fff;color:var(--ink);border-radius:16px 16px 16px 4px;padding:18px 18px 14px;position:relative;box-shadow:5px 5px 0 var(--accent)}
.msg .score{display:inline-block;background:var(--main2);color:#fff;font-weight:900;font-size:20px;padding:3px 12px;border-radius:8px;margin-bottom:8px}
.msg blockquote{margin:0;font-size:16px;line-height:1.55}
.msg blockquote small{display:block;color:var(--muted);margin-top:4px}
.msg figcaption{margin-top:10px;font-size:13.5px;font-weight:800;color:var(--main)}
@media(min-width:880px){.msgs{grid-template-columns:repeat(3,1fr)}}
.quote{border-left:7px solid var(--accent);background:#fff;padding:12px 16px;font-size:20px;font-weight:800;margin:16px 0;color:var(--main)}
.books{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.book{width:54px;height:76px;border-radius:4px;background:var(--main);color:#fff;font-size:10px;display:flex;align-items:flex-end;padding:5px;font-weight:800;box-shadow:3px 3px 0 var(--accent)}

/* Vì sao */
.whys{display:grid;gap:14px}
.why{background:#fff;border:2px solid var(--line);border-radius:12px;padding:20px;border-top:7px solid var(--main2)}
.why .ico{font-size:30px;line-height:1;margin-bottom:8px}
.why b{display:block;font-size:19px;color:var(--main);margin-bottom:4px}
.why span{color:var(--muted)}

/* Quy trình */
.steps{display:grid;gap:14px;counter-reset:s}
.step{position:relative;background:var(--main);color:#fff;border-radius:12px;padding:20px 18px 20px 76px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:16px;top:18px;width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--main);font-weight:900;font-size:24px;display:flex;align-items:center;justify-content:center}
.step b{display:block;font-size:18px;color:var(--accent)}
.step span{opacity:.95;font-size:15px}
.note-fee{margin-top:18px;font-weight:800;color:var(--main);font-size:18px}

/* Phiếu nhận xét */
.report{display:grid;gap:24px;align-items:center}
.phone{max-width:340px;margin:0 auto;background:#1c1c1e;border-radius:34px;padding:14px;box-shadow:0 20px 40px rgba(0,0,0,.25)}
.screen{background:#e9eef5;border-radius:24px;padding:14px;min-height:360px}
.zhead{font-weight:800;font-size:14px;color:var(--zalo);margin-bottom:10px}
.bubble{background:#fff;border-radius:14px;padding:12px;font-size:14px;line-height:1.55;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.demo{font-size:12px;color:#8a7b70;text-align:center;margin-top:8px}
.ticks{list-style:none}
.ticks li{padding:8px 0 8px 36px;position:relative;font-weight:700}
.ticks li::before{content:"✓";position:absolute;left:0;top:7px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--main);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:15px}

/* Hỏi đáp */
details{border:2px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:10px;background:#fff}
summary{font-weight:800;cursor:pointer;color:var(--main);font-size:17px}
details p{margin-top:8px;color:var(--muted)}

/* Bài viết */
.posts{display:grid;gap:16px}
.post{border:2px solid var(--line);border-radius:12px;padding:20px;background:#fff;text-decoration:none;display:block;transition:border-color .15s}
.post:hover{border-color:var(--main2)}
.post .cat{font-size:13px;font-weight:800;color:var(--main2);text-transform:uppercase;letter-spacing:.5px}
.post h3{font-size:20px;color:var(--main);line-height:1.3;margin:6px 0}
.post p{color:var(--muted);font-size:15px}
.article{padding:40px 0 50px}
.article h1{font-size:clamp(27px,5vw,40px);line-height:1.2;color:var(--main);font-weight:900;margin-bottom:10px}
.article .meta{color:var(--muted);font-size:14px;margin-bottom:24px}
.article h2{font-size:clamp(22px,3.6vw,28px);margin:30px 0 10px}
.article p,.article li{margin-bottom:12px}
.article ul,.article ol{padding-left:24px}
.article .box{background:var(--soft);border-left:7px solid var(--accent);padding:16px 18px;border-radius:8px;margin:20px 0}
.crumb{font-size:14px;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--main);text-decoration:none;font-weight:700}

/* CTA cuối bài / cuối trang */
.cta-band{background:linear-gradient(135deg,var(--main),var(--main2));color:#fff;border-radius:14px;padding:26px;margin-top:30px;text-align:center}
.cta-band h3{font-size:24px;color:var(--accent);margin-bottom:6px}
.cta-band p{margin-bottom:16px}
.cta-band .row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* Liên hệ cuối */
.final .grid{display:grid;gap:26px}
.map{border-radius:12px;overflow:hidden;min-height:260px;border:4px solid var(--accent);background:#fff}
.map iframe{width:100%;height:100%;min-height:260px;border:0;display:block}
.contact-list{list-style:none;margin-top:14px}
.contact-list li{padding:6px 0;font-size:17px}

/* Chân trang */
footer{background:#2a0606;color:#e9cfc4;font-size:14.5px;padding:34px 0 26px}
footer .cols{display:grid;gap:22px}
footer b{color:var(--accent);display:block;margin-bottom:8px;font-size:16px}
footer a{color:#fff;text-decoration:none}
footer ul{list-style:none}
footer li{padding:3px 0}
footer .copy{border-top:1px solid rgba(255,255,255,.15);margin-top:24px;padding-top:14px;font-size:13px;color:#b9958a}

/* Nút nổi trên điện thoại */
.float{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;z-index:60;box-shadow:0 -4px 16px rgba(0,0,0,.2)}
.float a{text-align:center;text-decoration:none;font-weight:900;padding:15px 4px;font-size:15px;color:#fff}
.f1{background:var(--main)}.f2{background:var(--zalo)}.f3{background:var(--accent);color:#1a1200!important}

@media(min-width:880px){
  .menu{display:flex}.head-cta{margin-left:10px}.burger{display:none}
  .hero .grid{grid-template-columns:1.2fr 1fr}
  .stats .wrap{grid-template-columns:repeat(4,1fr)}
  .groups{grid-template-columns:repeat(3,1fr)}
  .leader{grid-template-columns:.8fr 1.2fr}
  .whys{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{padding:76px 18px 20px}
  .report{grid-template-columns:1fr 1fr}
  .posts{grid-template-columns:repeat(3,1fr)}
  .final .grid{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}
  .float{display:none}body{padding-bottom:0}
}
@media(max-width:879px){.topbar span{display:none}.topbar .wrap{justify-content:center}.menu{display:none}.head-cta{display:none}.burger{margin-left:auto}}
/* Đội ngũ có tiểu sử */
.team-bio{display:grid;gap:16px;margin:22px 0}
.team-bio figure{margin:0;background:#fff;border:3px solid var(--main);border-radius:14px;overflow:hidden;box-shadow:7px 7px 0 var(--accent);display:grid;grid-template-columns:118px 1fr;align-items:start}
.team-bio img{width:100%;aspect-ratio:4/5;object-fit:cover;align-self:start;border-bottom-right-radius:10px}
.team-bio figcaption{padding:14px 16px}
.team-bio figcaption>b{display:block;color:var(--main);font-size:22px;font-weight:900;line-height:1.1}
.team-bio i{display:block;font-style:normal;color:var(--main2);font-weight:800;font-size:13.5px;margin:3px 0 8px}
.team-bio p{font-size:15.5px;line-height:1.55}
@media(min-width:880px){.team-bio{grid-template-columns:repeat(3,1fr)}.team-bio figure{grid-template-columns:1fr;grid-template-rows:auto 1fr}.team-bio img{aspect-ratio:4/5;height:auto}}
/* Người sáng lập (khối đội ngũ) */
.founder{display:grid;grid-template-columns:118px 1fr;gap:0;align-items:start;background:var(--main);color:#fff;border-radius:14px;overflow:hidden;box-shadow:7px 7px 0 var(--accent);margin:22px 0 4px;max-width:780px}
.founder img{width:100%;aspect-ratio:4/5;object-fit:cover}
.founder>div{padding:14px 16px}
.founder b{display:block;font-size:21px;font-weight:900;color:var(--accent);line-height:1.15}
.founder i{display:block;font-style:normal;font-weight:800;font-size:13.5px;margin:3px 0 8px;opacity:.95}
.founder p{font-size:15px;line-height:1.5}
/* Khoảnh khắc thầy trò */
.kn{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.kn img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;border:2px solid var(--line)}
@media(min-width:880px){.kn{grid-template-columns:repeat(4,1fr);gap:10px}.founder{grid-template-columns:200px 1fr}}
/* Xem tin nhắn gốc */
.msg[data-img]{cursor:pointer;transition:transform .12s}
.msg[data-img]:hover{transform:translateY(-3px)}
.msg .see{margin-top:12px;background:var(--accent);color:#1a1200;border:0;border-radius:8px;padding:8px 12px;font:inherit;font-weight:900;font-size:14px;cursor:pointer}
.lightbox{position:fixed;inset:0;background:rgba(20,5,5,.88);z-index:100;display:none;align-items:center;justify-content:center;flex-direction:column;padding:16px}
.lightbox.open{display:flex}
.lightbox img{max-width:min(560px,100%);max-height:82vh;border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff}
.lightbox p{color:#ffe7c2;font-size:13.5px;margin-top:10px;text-align:center}
.lb-close{position:absolute;top:12px;right:14px;background:var(--accent);border:0;border-radius:50%;width:42px;height:42px;font-size:20px;font-weight:900;cursor:pointer}
/* Sách thầy Quang */
.books-hero{width:100%;max-width:900px;border-radius:12px;border:4px solid var(--main);box-shadow:8px 8px 0 var(--accent);margin-bottom:22px}
.bookshelf{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.bookshelf figure{margin:0;background:#fff;border:2px solid var(--line);border-radius:10px;padding:10px;text-align:center}
.bookshelf img{width:100%;aspect-ratio:3/4;object-fit:contain;background:#fff}
.bookshelf figcaption{font-size:13.5px;font-weight:800;color:var(--main);margin-top:8px;line-height:1.35}
@media(min-width:880px){.bookshelf{grid-template-columns:repeat(5,1fr)}}
/* Video thầy Quang */
.vids{display:grid;gap:18px}
.vid{margin:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:7px 7px 0 var(--accent)}
.vid-box{position:relative;aspect-ratio:16/9;background:#000}
.vid-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid figcaption{padding:12px 14px;color:var(--ink)}
.vid figcaption b{display:block;color:var(--main);font-size:17px;line-height:1.3}
.vid figcaption span{font-size:14px;color:var(--main2);font-weight:800}
@media(min-width:880px){.vids{grid-template-columns:1fr 1fr}}
/* Chọn theo lớp */
.grades{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.grades a{display:block;text-decoration:none;background:#fff;border:3px solid var(--main);border-radius:12px;padding:14px;box-shadow:5px 5px 0 var(--accent)}
.grades b{display:block;color:var(--main);font-size:20px;font-weight:900}
.grades span{color:var(--muted);font-size:14px}
@media(min-width:880px){.grades{grid-template-columns:repeat(4,1fr)}}