/* ============================================================
   TÂM LÝ HỌC ĐƯỜNG — tamlyhocduong.vn
   File CSS dùng chung cho toàn site (base + components)
   Dự án vì cộng đồng của Viện Tâm lý Giáo dục BrainCare
   ------------------------------------------------------------
   Cách dùng: mỗi trang HTML chỉ cần
     <link rel="stylesheet" href="tamlyhocduong-base.css">
   rồi viết HTML theo các class bên dưới — KHÔNG viết lại CSS.
   ------------------------------------------------------------
   MỤC LỤC
   00. Tokens (biến màu / brand)      08. Card lưới (ct-card)
   01. Reset & base                   09. Trụ dịch vụ (offer)
   02. Tiện ích (wrap, brand, mono)   10. Nguyên tắc / hình thức
   03. Topbar                         11. Quy trình (steps)
   04. Header + nav                   12. Tháp 3 cấp (tier)
   05. Breadcrumb                     13. Băng CTA / tuân thủ
   06. Nút (buttons)                  14. Module CKCare + chip
   07. Hero + thẻ văn bản + facts     15. FAQ · Nguồn · Đối tượng
   + 16. Footer  + 17. Responsive
   ============================================================ */

/* ===== 00. TOKENS ========================================= */
:root{
  --navy:#1d6495;          /* Brain — màu thẩm quyền */
  --navy-d:#15517d;        /* navy sạch hơn (bỏ ám teal xẩm) */
  --navy-dd:#0f3a5c;       /* deep navy sạch — thay #0d3149 xẩm */
  --green:#4d9d37;         /* Care — hành động / miễn phí */
  --green-d:#3c7d2a;
  --green-soft:#67ac2f;    /* xanh lá CKCare (bản trường) */
  --amber:#ff8c00;         /* mốc thời gian / việc gấp */
  --seal:#b8332a;          /* dấu đỏ pháp lý — dùng rất ít */
  --blue:#2f6fb0;          /* tầng chuyên sâu */
  --ink:#1c2630;
  --body:#3a4754;
  --muted:#6b7884;
  --line:#e3e9ef;
  --line-2:#d3dde6;
  --wash:#f3f7fb;
  --wash-2:#eef4f9;
  --paper:#ffffff;
  --paper-2:#fbfdff;
  --shadow:0 1px 2px rgba(16,42,67,.05),0 8px 24px rgba(16,42,67,.06);
  --shadow-lg:0 2px 6px rgba(16,42,67,.08),0 24px 48px rgba(16,42,67,.12);
  --radius:16px;
  --radius-s:11px;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --maxw:1080px;
}

/* ===== 01. RESET & BASE =================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro',system-ui,sans-serif;
  color:var(--body);background:var(--paper);
  line-height:1.68;font-size:16.5px;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;font-weight:800;letter-spacing:-.01em}
a{color:var(--navy);text-decoration:none}
img{max-width:100%;display:block}

/* ===== 02. TIỆN ÍCH ======================================= */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.brand-brain{color:var(--navy)}
.brand-care{color:var(--green)}
b,strong{color:var(--navy)}
.mono{font-family:var(--mono)}
.center{text-align:center}
.alt{background:var(--wash)}                /* nền section xen kẽ */


/* ===== 05. BREADCRUMB ===================================== */
.crumb{background:var(--wash);border-bottom:1px solid var(--line)}
.crumb .wrap{display:flex;gap:8px;align-items:center;height:42px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--navy)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink);font-weight:600}

/* ===== 06. NÚT =========================================== */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:13px 20px;border-radius:11px;transition:.18s;cursor:pointer;border:0}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 6px 16px rgba(77,157,55,.28)}
.btn-primary:hover{background:var(--green-d);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--navy);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--navy);background:var(--wash)}
.btn-amber{background:var(--amber);color:#fff;box-shadow:0 6px 16px rgba(255,140,0,.32)}
.btn-amber:hover{background:#e87d00;transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--wash);transform:translateY(-1px)}

/* ===== 07. HERO + THẺ VĂN BẢN + FACTS ==================== */
.hero{background:
   radial-gradient(1100px 460px at 82% -10%,rgba(77,157,55,.10),transparent 60%),
   radial-gradient(900px 500px at 5% 0%,rgba(29,100,149,.10),transparent 58%),
   linear-gradient(180deg,var(--paper) 0%,var(--wash) 100%);
  padding:46px 0 54px;border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.25fr .9fr;gap:42px;align-items:start}
.hero.solo .wrap{grid-template-columns:1fr;max-width:780px;text-align:center}
.hero.solo .hero-cta{justify-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--navy);background:#fff;border:1px solid var(--line-2);padding:6px 12px;border-radius:100px;box-shadow:var(--shadow)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--green)}
.hero h1{font-size:38px;margin:18px 0 16px}
.hero h1 .hl{color:var(--navy)}
.lede{font-size:17.5px;color:var(--body);max-width:36em}
.hero.solo .lede{margin:0 auto}
.lede b{color:var(--navy);font-weight:700}
.hl-date{background:linear-gradient(transparent 52%,rgba(255,140,0,.32) 52%);font-weight:700;color:var(--ink);padding:0 2px;border-radius:2px}
.hero-cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* Thẻ văn bản pháp lý (signature trang Pillar) */
.doccard{background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.doccard .dc-top{background:linear-gradient(135deg,var(--navy-d),var(--navy));color:#fff;padding:20px 22px 18px;position:relative;overflow:hidden}
.doccard .dc-top::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent,transparent 22px,rgba(255,255,255,.05) 22px,rgba(255,255,255,.05) 23px);opacity:.6}
.dc-org{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#bcd6ec;font-weight:600;position:relative}
.dc-num{font-family:var(--mono);font-size:25px;font-weight:700;letter-spacing:.01em;margin-top:6px;position:relative}
.dc-title{font-size:13px;color:#d6e6f3;margin-top:7px;line-height:1.45;position:relative}
.dc-body{padding:6px 22px 8px}
.dc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px dashed var(--line-2)}
.dc-row:last-child{border-bottom:0}
.dc-k{font-size:13px;color:var(--muted);font-weight:600}
.dc-v{font-size:14px;color:var(--ink);font-weight:700;font-family:var(--mono);text-align:right}
.dc-v.dc-hot{color:var(--amber)}
.dc-status{display:inline-flex;align-items:center;gap:7px}
.dc-status .pip{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(77,157,55,.18)}
.dc-status b{color:var(--green-d);font-weight:700;font-size:13.5px}
.seal{position:absolute;top:14px;right:16px;width:62px;height:62px;border-radius:50%;border:2px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;text-align:center;transform:rotate(-12deg);z-index:2}
.seal span{font-size:8.5px;font-weight:800;letter-spacing:.06em;color:#fff;line-height:1.15}
.dc-foot{background:var(--wash);border-top:1px solid var(--line);padding:11px 22px;font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:7px}

/* Dải số liệu (nền tối) */
.facts{background:var(--navy-dd);color:#fff}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0}
.fact{padding:26px 20px;border-left:1px solid rgba(255,255,255,.09)}
.fact:first-child{border-left:0}
.fact .fnum{font-family:var(--mono);font-size:26px;font-weight:700;color:#fff;line-height:1}
.fact .fnum em{color:#86e063;font-style:normal}
.fact .flab{font-size:13px;color:#a9c4da;margin-top:8px;font-weight:500}
.fact.key{box-shadow:inset 0 3px 0 var(--amber);background:rgba(255,140,0,.05)}
.fact.key .fnum em{color:#ffb154}

/* Dải cam kết cộng đồng (nền trắng) */
.commit{background:#fff;border-bottom:1px solid var(--line)}
.commit .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.commit-item{display:flex;gap:13px;align-items:center;padding:20px 22px;border-left:1px solid var(--line)}
.commit-item:first-child{border-left:0}
.commit-item .cic{flex-shrink:0;width:40px;height:40px;border-radius:11px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;color:var(--green-d)}
.commit-item .cic svg{width:21px;height:21px}
.commit-item b{display:block;font-size:14.5px;color:var(--navy);line-height:1.2}
.commit-item span{font-size:12.5px;color:var(--muted)}

/* ===== SECTION BASE ====================================== */
section{padding:60px 0}
.sec-head{max-width:42em;margin-bottom:34px}
.sec-head.center{margin-left:auto;margin-right:auto}
.kicker{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d);margin-bottom:12px}
.sec-head h2{font-size:29px;margin-bottom:12px}
.sec-head p{font-size:16.5px;color:var(--body)}

/* Bối cảnh (ctx) + trích dẫn */
.ctx-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:26px;align-items:center}
.ctx-list{display:flex;flex-direction:column;gap:14px}
.ctx-item{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:16px 18px;box-shadow:var(--shadow)}
.ctx-item .ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.ctx-item .ic svg{width:20px;height:20px}
.ctx-item h4{font-size:15.5px;margin-bottom:3px}
.ctx-item p{font-size:14px;color:var(--muted);line-height:1.55}
.ctx-quote{background:linear-gradient(150deg,var(--navy),var(--navy-dd));color:#eaf2f9;border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-lg)}
.ctx-quote .qm{font-family:var(--mono);font-size:13px;color:#86e063;letter-spacing:.04em;font-weight:700}
.ctx-quote p{font-size:18px;line-height:1.6;margin:14px 0 0;color:#fff;font-weight:500}
.ctx-quote .src{font-size:12.5px;color:#a9c4da;margin-top:16px}

/* Trước / Sau */
.ba{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.ba-col{padding:26px 24px}
.ba-col.old{background:var(--paper-2)}
.ba-col.new{background:linear-gradient(180deg,#f4fbf0,#fff)}
.ba-tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:100px;margin-bottom:18px}
.ba-tag.t-old{background:#f1e7e6;color:var(--seal)}
.ba-tag.t-new{background:#e4f4dc;color:var(--green-d)}
.ba-col h3{font-size:16px;margin-bottom:14px;color:var(--ink)}
.ba-col .docs{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:16px;line-height:1.7}
.ba-li{display:flex;gap:10px;font-size:14.5px;padding:8px 0;border-top:1px dashed var(--line)}
.ba-li:first-of-type{border-top:0}
.ba-li svg{width:17px;height:17px;flex-shrink:0;margin-top:3px}
.ba-li.minus svg{color:#bb8a87}
.ba-li.plus svg{color:var(--green)}
.ba-mid{display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;width:64px}
.ba-mid svg{width:26px;height:26px}

/* ===== 08. CARD LƯỚI (ct-card) ========================== */
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ct-grid.cols-2{grid-template-columns:repeat(2,1fr)}
.ct-grid.cols-4{grid-template-columns:repeat(4,1fr)}
.ct-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:20px 18px;box-shadow:var(--shadow);transition:.18s;position:relative}
.ct-card:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.ct-card.link:hover{border-color:var(--green)}
.ct-n{position:absolute;top:16px;right:16px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--line-2)}
.ct-ic{width:42px;height:42px;border-radius:11px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;color:var(--navy);margin-bottom:13px}
.ct-ic svg{width:22px;height:22px}
.ct-card h4{font-size:16px;margin-bottom:5px}
.ct-card p{font-size:13.5px;color:var(--muted);line-height:1.55}
/* card có giao diện để xem (mở lightbox) */
.ct-card[data-img]{cursor:pointer}
.ct-see{display:inline-flex;align-items:center;gap:4px;margin-top:11px;font-size:12.5px;font-weight:600;color:var(--green-d)}
.ct-card[data-img]:hover .ct-see{text-decoration:underline}
/* lightbox tài liệu giao diện */
.lb-overlay{position:fixed;inset:0;z-index:1000;background:rgba(16,32,48,.72);display:none;align-items:center;justify-content:center;padding:24px}
.lb-overlay.open{display:flex}
.lb-box{background:#fff;border-radius:16px;max-width:1080px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.lb-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--wash-2);border-bottom:1px solid var(--line);flex:0 0 auto}
.lb-bar i{width:11px;height:11px;border-radius:50%;background:#d6dee6}
.lb-bar i:nth-child(1){background:#ff5f57}.lb-bar i:nth-child(2){background:#febc2e}.lb-bar i:nth-child(3){background:#28c840}
.lb-bar span{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-left:6px}
.lb-close{margin-left:auto;border:0;background:none;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.lb-imgwrap{overflow:auto;background:#eef2f6;flex:1 1 auto;min-height:0}
.lb-imgwrap img{display:block;width:100%;height:auto}
.lb-foot{padding:16px 20px;border-top:1px solid var(--line);flex:0 0 auto}
.lb-foot h4{font-size:18px;margin-bottom:5px;color:var(--navy)}
.lb-foot p{font-size:14.5px;color:var(--body);line-height:1.6}
.lb-pii{display:inline-block;margin-top:9px;font-size:12.5px;color:var(--green-d);background:rgba(77,157,55,.1);padding:4px 11px;border-radius:999px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(255,255,255,.92);width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:24px;color:var(--navy);box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center}
.lb-prev{left:18px}.lb-next{right:18px}
@media(max-width:640px){.lb-overlay{padding:10px}.lb-nav{width:38px;height:38px;font-size:20px}.lb-prev{left:4px}.lb-next{right:4px}}

/* ===== 09. TRỤ DỊCH VỤ (offer) ========================= */
.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.offer{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow);transition:.18s;border-top:4px solid var(--navy)}
.offer:nth-child(2){border-top-color:var(--green)}
.offer:nth-child(3){border-top-color:var(--amber)}
.offer:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.offer .onum{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--muted)}
.offer .oic{width:52px;height:52px;border-radius:14px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;color:var(--navy);margin:14px 0 16px}
.offer .oic svg{width:27px;height:27px}
.offer h3{font-size:19px;margin-bottom:9px}
.offer p{font-size:14.5px;color:var(--body);line-height:1.6;flex-grow:1}
.offer .ct-more{align-self:flex-start}
/* hành trình nhu cầu → giải pháp (4 giai đoạn) */
.jpath{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.jpath span{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--navy);background:var(--wash-2);border-radius:999px;padding:5px 13px}
.jpath i{width:16px;height:2px;background:var(--green);border-radius:2px;flex:0 0 auto}
.jgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.jstep{border-top-color:var(--navy)}
.jstep .onum{font-size:14px;color:var(--navy)}
.jstep:nth-child(1){border-top-color:var(--navy)}
.jstep:nth-child(2){border-top-color:var(--green)}
.jstep:nth-child(3){border-top-color:var(--amber)}
.jstep:nth-child(4){border-top-color:var(--navy)}
.jstep:nth-child(2) .oic{color:var(--green)}
.jstep:nth-child(3) .oic{color:var(--amber)}

/* ===== 10. NGUYÊN TẮC / HÌNH THỨC ====================== */
.pf{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.prin-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prin{display:flex;gap:11px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 15px;box-shadow:var(--shadow)}
.prin svg{width:19px;height:19px;color:var(--green);flex-shrink:0;margin-top:2px}
.prin span{font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
.format-box{background:var(--navy);color:#fff;border-radius:var(--radius);padding:26px 24px;box-shadow:var(--shadow-lg)}
.format-box h3{color:#fff;font-size:17px;margin-bottom:16px}
.fmt-row{display:flex;gap:13px;padding:14px 0;border-top:1px solid rgba(255,255,255,.12)}
.fmt-row:first-of-type{border-top:0;padding-top:4px}
.fmt-row .fic{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.fmt-row .fic svg{width:19px;height:19px;color:#86e063}
.fmt-row b{display:block;color:#fff;font-size:14.5px}
.fmt-row p{font-size:13px;color:#bcd6ec;margin-top:2px;line-height:1.5}

/* ===== 11. QUY TRÌNH (steps) =========================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:22px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-10px;right:6px;font-family:var(--mono);font-size:54px;font-weight:700;color:var(--wash-2)}
.step .st-bar{width:30px;height:4px;border-radius:3px;background:var(--green);margin-bottom:14px}
.step h4{font-size:15.5px;margin-bottom:6px;position:relative}
.step p{font-size:13.5px;color:var(--muted);line-height:1.55;position:relative}
.step .st-mod{display:inline-block;margin-top:10px;font-size:11.5px;font-weight:700;color:var(--green-d);background:#e4f4dc;padding:3px 9px;border-radius:100px;position:relative}

/* ===== 12. THÁP 3 CẤP (tier) =========================== */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:22px 20px;box-shadow:var(--shadow);border-top:4px solid var(--green)}
.tier.t2{border-top-color:var(--amber)}
.tier.t3{border-top-color:var(--blue)}
.tier .tlevel{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-d);margin-bottom:12px}
.tier.t2 .tlevel{color:#c4690a}
.tier.t3 .tlevel{color:var(--blue)}
.tier .tlevel .tdot{width:9px;height:9px;border-radius:50%;background:var(--green)}
.tier.t2 .tlevel .tdot{background:var(--amber)}
.tier.t3 .tlevel .tdot{background:var(--blue)}
.tier h4{font-size:17px;margin-bottom:6px}
.tier p{font-size:14px;color:var(--muted);line-height:1.55}

/* ===== 13. BĂNG CTA / TUÂN THỦ ========================= */
.comply{background:linear-gradient(160deg,var(--navy-dd),var(--navy));color:#fff;border-radius:var(--radius);padding:38px 34px;box-shadow:var(--shadow-lg);display:grid;grid-template-columns:1fr 1fr;gap:30px 40px;align-items:center}
.comply.single{grid-template-columns:1fr;text-align:center;max-width:760px;margin:0 auto}
.comply h2{color:#fff;font-size:25px;margin-bottom:10px}
.comply .clead{color:#cfe0ee;font-size:15.5px}
.comply .deadline{display:inline-flex;align-items:center;gap:9px;margin-top:18px;background:rgba(255,140,0,.16);border:1px solid rgba(255,140,0,.4);color:#ffce8a;font-size:13.5px;font-weight:600;padding:9px 14px;border-radius:10px}
.comply .deadline b{font-family:var(--mono);color:#ffb154}
.ck-list{display:flex;flex-direction:column;gap:10px}
.ck{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:13px 15px}
.ck .cbox{flex-shrink:0;width:22px;height:22px;border-radius:6px;background:var(--green);display:flex;align-items:center;justify-content:center;margin-top:1px}
.ck .cbox svg{width:14px;height:14px;color:#fff}
.ck span{font-size:14px;color:#eaf2f9;font-weight:500;line-height:1.45}
.comply-cta{display:flex;gap:12px;flex-wrap:wrap;padding-top:24px;margin-top:4px;border-top:1px solid rgba(255,255,255,.13)}
.comply-cta.span2{grid-column:1/-1}
.comply.single .comply-cta{justify-content:center;border-top:0;padding-top:8px}

/* ===== 14. MODULE CKCARE + CHIP ======================== */
.ckc{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center}
.ckc.rev{grid-template-columns:1.1fr 1fr}
.ckc-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;font-weight:700;color:var(--green-d);background:#e4f4dc;padding:6px 12px;border-radius:100px;letter-spacing:.04em}
.ckc h2{font-size:27px;margin:14px 0 12px}
.ckc h2 .br{color:var(--navy)}.ckc h2 .ca{color:var(--green)}
.ckc p.lead{font-size:16px;color:var(--body)}
.ckc-cta{margin-top:22px}
.ckc-feats{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.feat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 16px;box-shadow:var(--shadow)}
.feat .fnum{font-family:var(--mono);font-size:11px;color:var(--green-d);font-weight:700}
.feat h4{font-size:15px;margin:7px 0 4px;display:flex;align-items:center;gap:8px}
.feat h4 svg{width:18px;height:18px;color:var(--navy)}
.feat p{font-size:13px;color:var(--muted);line-height:1.5}
.free-tag{display:inline-block;font-size:11px;font-weight:700;color:#fff;background:var(--green);padding:2px 8px;border-radius:6px;margin-left:6px;vertical-align:middle}

/* Chip công cụ chuẩn hóa */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line-2);padding:8px 13px;border-radius:100px;box-shadow:var(--shadow)}
.chip .cdot{width:7px;height:7px;border-radius:50%;background:var(--green)}

/* Mock cửa sổ phần mềm (khung trang trí) */
.mock{background:#fff;border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--wash);border-bottom:1px solid var(--line)}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:var(--line-2);display:block}
.mock-bar i:nth-child(1){background:#f0a3a0}.mock-bar i:nth-child(2){background:#f3cd8a}.mock-bar i:nth-child(3){background:#9ed6a0}
.mock-bar span{margin-left:8px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.mock-body{display:grid;grid-template-columns:120px 1fr;min-height:230px}
.mock-side{background:var(--navy-dd);padding:16px 12px;display:flex;flex-direction:column;gap:7px}
.mock-side .ms{font-size:11px;color:#9ec3e2;padding:7px 9px;border-radius:7px}
.mock-side .ms.on{background:var(--green-soft);color:#fff;font-weight:600}
.mock-main{padding:18px}
.mock-main .mh{height:11px;width:42%;background:var(--line-2);border-radius:4px;margin-bottom:14px}
.mock-row{display:flex;gap:8px;margin-bottom:9px}
.mock-row .mc{height:42px;border-radius:8px;background:var(--wash-2);flex:1}
.mock-row .mc.g{background:#e4f4dc}.mock-row .mc.o{background:#ffe6c7}

/* ===== 15. FAQ · NGUỒN · ĐỐI TƯỢNG ==================== */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:700;font-size:16px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex-shrink:0;width:26px;height:26px;border-radius:7px;background:var(--wash-2);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:18px;transition:.2s}
.faq[open] summary .pl{background:var(--navy);color:#fff;transform:rotate(45deg)}
.faq .ans{padding:0 20px 20px;font-size:15px;color:var(--body);line-height:1.65}
.faq .ans b{color:var(--navy)}

.eeat{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.src-card,.auth-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}
.src-card h3,.auth-card h3{font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.src-card h3 svg,.auth-card h3 svg{width:19px;height:19px;color:var(--navy)}
.src-link{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.src-link:first-of-type{border-top:0}
.src-link svg{width:16px;height:16px;color:var(--green);flex-shrink:0;margin-top:3px}
.src-link a{font-weight:600}
.src-link .meta{display:block;font-size:12px;color:var(--muted);font-weight:400;margin-top:1px}
.auth-card .by{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.auth-card .av{width:50px;height:50px;border-radius:12px;background:linear-gradient(135deg,var(--navy),var(--green));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:19px;flex-shrink:0}
.auth-card .by b{font-size:15.5px;color:var(--navy);display:block}
.auth-card .by span{font-size:13px;color:var(--muted)}
.auth-card p{font-size:14px;color:var(--body);line-height:1.6}
.auth-card .alink{font-size:13.5px;font-weight:600;margin-top:12px;display:inline-flex;align-items:center;gap:6px}
.disclaimer{margin-top:26px;background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:15px 18px;font-size:13px;color:var(--muted);line-height:1.6}
.disclaimer b{color:var(--navy)}

/* Đối tượng phục vụ (who) */
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.who{background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:22px 18px;box-shadow:var(--shadow);text-align:center}
.who .wic{width:48px;height:48px;border-radius:13px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;color:var(--navy);margin:0 auto 13px}
.who .wic svg{width:24px;height:24px}
.who h4{font-size:15.5px;margin-bottom:5px}
.who p{font-size:13px;color:var(--muted);line-height:1.5}

/* ===== 17. RESPONSIVE ================================== */
@media(max-width:920px){
  .hero .wrap{grid-template-columns:1fr;gap:30px}
  .ctx-grid,.pf,.ckc,.ckc.rev,.eeat,.comply{grid-template-columns:1fr;gap:24px}
  .ct-grid,.ct-grid.cols-4,.offer-grid,.tier-grid,.jgrid{grid-template-columns:1fr 1fr}
  .who-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .facts .wrap{grid-template-columns:1fr 1fr}
  .fact:nth-child(2){border-left:0}
}
@media(max-width:640px){
  body{font-size:16px}
  .hero h1{font-size:29px}
  .sec-head h2{font-size:24px}
  .ct-grid,.ct-grid.cols-2,.ct-grid.cols-4,.offer-grid,.tier-grid,.jgrid,.prin-list,.ckc-feats,.who-grid,.commit .wrap{grid-template-columns:1fr}
  .steps,.facts .wrap{grid-template-columns:1fr}
  .ba{grid-template-columns:1fr}
  .ba-mid{width:auto;height:54px}
  .ba-mid svg{transform:rotate(90deg)}
  .comply{padding:28px 22px}
  .comply h2{font-size:22px}
  .commit-item{border-left:0;border-top:1px solid var(--line)}
  .commit-item:first-child{border-top:0}
  .mock-body{grid-template-columns:1fr}.mock-side{flex-direction:row;flex-wrap:wrap}
  section{padding:46px 0}
}

/* ============================================================
   18. COMPONENT BỔ SUNG (hub pháp lý · timeline · mẫu biểu ·
       tin tức · form đăng ký)
   ============================================================ */

/* --- Danh sách văn bản pháp lý (doclist) --- */
.doclist{display:flex;flex-direction:column;gap:12px}
.docitem{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:18px 20px;box-shadow:var(--shadow);transition:.18s}
.docitem:hover{border-color:var(--navy);box-shadow:var(--shadow-lg)}
.docitem .dnum{flex-shrink:0;width:54px;height:54px;border-radius:12px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.docitem .dnum svg{width:26px;height:26px}
.docitem .dmain{flex-grow:1;min-width:0}
.docitem .dcode{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-weight:700}
.docitem h4{font-size:16px;margin:3px 0 4px}
.docitem p{font-size:13.5px;color:var(--muted);line-height:1.5}
.docitem .dright{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap}
.badge.live{background:#e4f4dc;color:var(--green-d)}
.badge.dead{background:#f1e7e6;color:var(--seal)}
.badge.rel{background:var(--wash-2);color:var(--navy)}
.badge .bdot{width:7px;height:7px;border-radius:50%;background:currentColor}
.docitem .dlink{font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
@media(max-width:640px){.docitem{flex-wrap:wrap}.docitem .dright{flex-direction:row;align-items:center;width:100%;justify-content:space-between}}

/* --- Timeline dọc (vstep) --- */
.vtimeline{position:relative;padding-left:8px}
.vstep{position:relative;padding:0 0 26px 56px}
.vstep::before{content:"";position:absolute;left:19px;top:6px;bottom:-6px;width:2px;background:var(--line-2)}
.vstep:last-child::before{display:none}
.vstep .vnum{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;font-family:var(--mono);z-index:1}
.vstep h4{font-size:16.5px;margin-bottom:5px}
.vstep p{font-size:14.5px;color:var(--body);line-height:1.6}

/* --- Tải mẫu biểu (dl) --- */
.dl-group{margin-bottom:28px}
.dl-group .dgh{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}
.dl-group .dgh svg{width:18px;height:18px}
.dl-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dl-item{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);padding:15px 16px;box-shadow:var(--shadow);transition:.18s}
.dl-item:hover{border-color:var(--green);box-shadow:var(--shadow-lg)}
.dl-item .ft{flex-shrink:0;width:40px;height:46px;border-radius:7px;background:var(--wash-2);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:700;color:var(--navy);position:relative}
.dl-item .ft.docx{color:#2563a8;background:#e7f0fa}
.dl-item .ft.xlsx{color:var(--green-d);background:#e7f5e0}
.dl-item .ft.pdf{color:var(--seal);background:#fae9e7}
.dl-item .dlm{flex-grow:1;min-width:0}
.dl-item h5{font-size:14px;color:var(--ink);font-weight:600;line-height:1.35}
.dl-item span{font-size:12px;color:var(--muted)}
.dl-item .dlbtn{flex-shrink:0;width:38px;height:38px;border-radius:9px;background:var(--green);display:flex;align-items:center;justify-content:center;color:#fff;transition:.18s}
.dl-item .dlbtn:hover{background:var(--green-d)}
.dl-item .dlbtn svg{width:18px;height:18px}
@media(max-width:640px){.dl-list{grid-template-columns:1fr}}

/* --- Tin tức / bài viết (post) --- */
.fchip-bar{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:28px}
.fchip{font-size:13.5px;font-weight:600;color:var(--body);background:#fff;border:1px solid var(--line-2);padding:8px 15px;border-radius:100px;cursor:pointer;transition:.16s}
.fchip:hover{border-color:var(--navy);color:var(--navy)}
.fchip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;box-shadow:var(--shadow);transition:.18s}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.post-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--navy),var(--green));display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85)}
.post-thumb svg{width:40px;height:40px}
.post-thumb.v2{background:linear-gradient(135deg,#2f6fb0,#4d9d37)}
.post-thumb.v3{background:linear-gradient(135deg,#15517d,#67ac2f)}
.post-body{padding:18px;display:flex;flex-direction:column;flex-grow:1}
.post-cat{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--green-d)}
.post-card h4{font-size:16px;margin:8px 0 8px;line-height:1.35}
.post-card p{font-size:13.5px;color:var(--muted);line-height:1.55;flex-grow:1}
.post-meta{font-size:12px;color:var(--muted);margin-top:14px;font-family:var(--mono)}
@media(max-width:920px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.post-grid{grid-template-columns:1fr}}

/* --- Form đăng ký --- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-lg)}
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:6px}
.field label .req{color:var(--seal)}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:var(--paper-2);border:1.5px solid var(--line-2);border-radius:10px;padding:12px 14px;transition:.16s;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);background:#fff;box-shadow:0 0 0 3px rgba(77,157,55,.13)}
.field textarea{resize:vertical;min-height:90px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.check{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink);background:var(--paper-2);border:1.5px solid var(--line-2);border-radius:10px;padding:11px 13px;cursor:pointer;transition:.16s}
.check:hover{border-color:var(--green)}
.check input{width:18px;height:18px;accent-color:var(--green);flex-shrink:0}
.form-note{font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.55}
.info-panel{background:linear-gradient(160deg,var(--navy),var(--navy-dd));color:#eaf2f9;border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow-lg)}
.info-panel h3{color:#fff;font-size:18px;margin-bottom:16px}
.info-row{display:flex;gap:12px;padding:13px 0;border-top:1px solid rgba(255,255,255,.12)}
.info-row:first-of-type{border-top:0}
.info-row .iic{flex-shrink:0;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center}
.info-row .iic svg{width:18px;height:18px;color:#86e063}
.info-row b{display:block;color:#fff;font-size:14.5px}
.info-row span{font-size:13px;color:#bcd6ec}
.info-contact{margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;line-height:1.9;color:#cfe0ee}
.info-contact b{color:#fff;font-family:var(--mono)}
@media(max-width:920px){.split{grid-template-columns:1fr;gap:24px}}
@media(max-width:640px){.field-row,.checks{grid-template-columns:1fr}}

/* ===== 19. MOBILE POLISH (bổ sung — tối ưu trải nghiệm điện thoại) ===== */

/* Chống tràn ngang + ngắt chuỗi dài (email, mã văn bản) */
@media(max-width:640px){
  html,body{overflow-x:clip}
  .badge{white-space:normal}
  .nap,.info-contact,.dcode{word-break:break-word}
}



/* Tiêu đề co giãn mượt + CTA dễ chạm */
@media(max-width:640px){
  .hero h1{font-size:clamp(25px,7.4vw,31px);line-height:1.18}
  .hero .lede,.lede{font-size:15.5px}
  .sec-head h2{font-size:clamp(21px,5.6vw,25px)}
}
@media(max-width:480px){
  .wrap{padding:0 16px}
  .hero-cta,.comply-cta,.ckc-cta{flex-direction:column;width:100%}
  .hero-cta .btn,.comply-cta .btn,.ckc-cta .btn{width:100%;justify-content:center}
  .btn{padding:14px 18px}
}

/* Mockup CKCare gọn trên mobile */
@media(max-width:640px){
  .mock-body{grid-template-columns:1fr;min-height:0}
  .mock-side{flex-direction:row;flex-wrap:wrap;gap:6px}
}

/* ===== 22. LIGHT THEME — làm nhẹ nhàng, bỏ các khối tối nặng ====== */


/* --- Band thống kê (facts): tối -> sáng --- */
.facts{background:var(--wash-2);color:var(--ink)}
.fact{border-left-color:var(--line)}
.fact .fnum{color:var(--navy)}
.fact .fnum em{color:var(--green)}
.fact.key .fnum em{color:var(--amber)}
.fact .flab{color:var(--muted)}

/* --- CTA "comply": gradient tối -> pastel sáng, chữ navy --- */
.comply{background:linear-gradient(160deg,#e9f1fb,#f5faff);color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow)}
.comply h2{color:var(--ink)}
.comply .clead{color:var(--muted)}
.comply-cta{border-top-color:var(--line)}
.comply .btn-white{background:#fff;color:var(--navy);border:1.5px solid var(--line-2)}
.comply .btn-white:hover{border-color:var(--navy);background:var(--wash)}

/* --- Quote (ctx-quote): tối -> tint --- */
.ctx-quote{background:var(--wash-2);color:var(--body);border:1px solid var(--line);box-shadow:var(--shadow)}
.ctx-quote .qm{color:var(--green-d)}
.ctx-quote p{color:var(--ink)}
.ctx-quote .src{color:var(--muted)}

/* --- Info panel (trang đăng ký): tối -> tint --- */
.info-panel{background:var(--wash-2);color:var(--body);border:1px solid var(--line);box-shadow:var(--shadow)}
.info-panel h3{color:var(--ink)}
.info-row{border-top-color:var(--line)}
.info-row .iic{background:#e4f0e0}
.info-row .iic svg{color:var(--green-d)}
.info-row b{color:var(--navy)}
.info-contact{border-top-color:var(--line);color:var(--muted)}
.info-contact b{color:var(--navy)}

/* ===== 23. LIGHT: doccard hero + mockup app ====== */
/* Thẻ văn bản hero: header navy -> tint sáng, chữ navy */
.doccard .dc-top{background:var(--wash-2);color:var(--ink);border-bottom:1px solid var(--line)}
.doccard .dc-top::after{background:none}
.dc-org{color:var(--green-d)}
.dc-num{color:var(--navy)}
.dc-title{color:var(--body)}
.seal{border-color:var(--green)}
.seal span{color:var(--green-d)}

/* Mockup phần mềm: sidebar navy -> sáng, mục active giữ xanh lá */
.mock-side{background:var(--wash-2);border-right:1px solid var(--line)}
.mock-side .ms{color:var(--muted)}
.mock-side .ms.on{background:var(--green-soft);color:#fff}

/* ===== 25. Form liên hệ: thông báo + honeypot ====== */
.cf-alert{padding:13px 16px;border-radius:10px;font-size:14px;font-weight:600;margin-bottom:18px}
.cf-ok{background:#e4f4dc;color:var(--green-d);border:1px solid #c8e8b8}
.cf-err{background:#fbeaea;color:var(--seal);border:1px solid #f0c9c6}
.cf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ===== 26. FOOTER REDESIGN (.site-footer / .sf-*) ===== */
footer.site-footer{padding:0;margin:0}   /* vô hiệu rule footer{} cũ */
.site-footer{
  --sf-navy:#1D6495; --sf-navyd:#0D3149; --sf-green:#4D9D37; --sf-greend:#3C7D2A;
  --sf-ink:#1C2630; --sf-body:#4A5662; --sf-muted:#6B7884;
  --sf-line:#E3E9EF; --sf-line2:#EDF1F5; --sf-wash:#EFF4F9;
  font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--sf-body);background:var(--sf-wash);
}
.sf-wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---- DẢI CHỨNG NHẬN (có khung) ---- */
.sf-credband{padding:38px 0 4px}
.sf-creds{
  background:#fff;border:1px solid var(--sf-line);border-radius:18px;
  box-shadow:0 2px 6px rgba(16,42,67,.05),0 16px 38px rgba(16,42,67,.09);
  display:grid;grid-template-columns:1fr 1fr 1fr;overflow:hidden;
}
.sf-cred{display:flex;gap:15px;align-items:center;padding:22px 28px}
.sf-cred + .sf-cred{border-left:1px solid var(--sf-line2)}
.sf-cred .ic{flex-shrink:0;width:46px;height:46px;border-radius:12px;background:#eef4f9;display:flex;align-items:center;justify-content:center}
.sf-cred .ic svg{width:22px;height:22px;color:var(--sf-navy)}
.sf-cred .nm{font-weight:700;font-size:14px;color:var(--sf-ink);line-height:1.3}
.sf-cred .sub{font-size:12px;color:var(--sf-muted);margin:2px 0 9px}
.sf-pill{display:inline-flex;align-items:center;gap:5px;background:#E4F4DC;color:var(--sf-greend);border:1px solid #CCE8BD;font-size:11.5px;font-weight:700;padding:4px 11px;border-radius:100px;font-family:'JetBrains Mono',monospace;letter-spacing:-.01em}
.sf-pill svg{width:12px;height:12px}

/* ---- THÂN FOOTER ---- */
.sf-main{padding:42px 0 38px}
.sf-grid{display:grid;grid-template-columns:1.7fr 1fr 1.15fr 1.2fr;gap:42px}
.sf-fl{font-size:22px;font-weight:800;letter-spacing:-.01em}
.sf-fl .a{color:var(--sf-navy)} .sf-fl .b{color:var(--sf-green)} .sf-fl .vn{color:var(--sf-muted);font-weight:700}
.sf-logo svg{height:54px;width:auto;display:block;margin-bottom:2px}
.sf-desc{font-size:13.5px;color:var(--sf-body);line-height:1.75;margin:14px 0 20px;max-width:30em}
.sf-desc b{color:var(--sf-navy)}
.sf-social{display:flex;gap:10px}
.sf-soc{width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid var(--sf-line);display:flex;align-items:center;justify-content:center;color:var(--sf-navy);transition:.16s;text-decoration:none}
.sf-soc:hover{background:var(--sf-navy);border-color:var(--sf-navy);color:#fff;transform:translateY(-2px)}
.sf-soc svg{width:18px;height:18px}
.sf-col h4{font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--sf-navy);margin:4px 0 16px}
.sf-col a{display:block;font-size:14px;color:var(--sf-body);padding:6px 0;text-decoration:none;transition:.14s}
.sf-col a:hover{color:var(--sf-navy);transform:translateX(2px)}
.sf-eco a{padding:8px 0}
.sf-eco .el{display:block;font-size:14px;font-weight:600;color:var(--sf-ink)}
.sf-eco .ed{display:block;font-size:12px;color:var(--sf-muted);font-family:'JetBrains Mono',monospace;margin-top:1px}
.sf-eco a:hover .el{color:var(--sf-navy)}
.sf-contact .row{display:flex;gap:11px;padding:7px 0;font-size:13.5px;line-height:1.55;color:var(--sf-body)}
.sf-contact .row svg{flex-shrink:0;width:17px;height:17px;color:var(--sf-green);margin-top:3px}
.sf-contact .row b{color:var(--sf-navy);font-family:'JetBrains Mono',monospace;font-size:14px}
.sf-contact a{color:var(--sf-body);text-decoration:none}
.sf-contact a:hover{color:var(--sf-navy)}

/* ---- THANH ĐÁY ---- */
.sf-bottom{background:var(--sf-greend)}
.sf-bottom .sf-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:15px;padding-bottom:15px;flex-wrap:wrap}
.sf-copy{font-size:12.5px;color:#E7F6DF}
.sf-legal{display:flex;gap:20px}
.sf-legal a{font-size:12.5px;color:#fff;text-decoration:none;font-weight:500}
.sf-legal a:hover{text-decoration:underline}

@media(max-width:860px){
  .sf-creds{grid-template-columns:1fr}
  .sf-cred + .sf-cred{border-left:0;border-top:1px solid var(--sf-line2)}
  .sf-grid{grid-template-columns:1fr 1fr;gap:30px}
  .sf-brand{grid-column:1 / -1}
}
@media(max-width:540px){
  .sf-grid{grid-template-columns:1fr}
  .sf-bottom .sf-wrap{flex-direction:column;align-items:flex-start;gap:10px}
}
.sf-logo img{height:54px;width:auto;display:block;margin-bottom:2px}

/* ===== 27. HEADER REDESIGN (.site-header / .sh-*) ===== */
.site-header{
  --navy:#1D6495;--navyd:#0D3149;--green:#4D9D37;--greend:#3C7D2A;--amber:#FF8C00;
  --ink:#1C2630;--body:#34404B;--muted:#6B7884;--line:#E8EDF2;--line2:#E3E9EF;--wash:#F1F6FB;
  font-family:'Be Vietnam Pro',system-ui,sans-serif;position:relative;z-index:50;
}
.sh-wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---- TOPBAR ---- */
.sh-topbar{background:var(--wash);border-bottom:1px solid var(--line2);font-size:13px;color:var(--muted)}
.sh-topbar .sh-wrap{display:flex;align-items:center;justify-content:space-between;height:42px;gap:16px}
.sh-tleft{display:flex;align-items:center;gap:12px;min-width:0}
.sh-pill{display:inline-flex;align-items:center;gap:6px;background:#E4F4DC;color:var(--greend);border:1px solid #CCE8BD;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:100px;white-space:nowrap}
.sh-pill .d{width:6px;height:6px;border-radius:50%;background:var(--green)}
.sh-eco{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-eco b{color:var(--navy)}
.sh-tright{display:flex;align-items:center;gap:14px;flex-shrink:0}
.sh-tlink{display:inline-flex;align-items:center;gap:7px;color:var(--body);text-decoration:none;font-weight:600;transition:.14s}
.sh-tlink:hover{color:var(--navy)}
.sh-tlink svg{width:15px;height:15px}
.sh-tdiv{width:1px;height:16px;background:#dbe3ea}
.sh-tphone b{color:var(--navy);font-family:'JetBrains Mono',monospace}

/* ---- MAIN BAR ---- */
.sh-bar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;box-shadow:0 2px 14px rgba(16,42,67,.05)}
.sh-bar .sh-wrap{display:flex;align-items:center;gap:22px;height:76px}
.sh-logo{flex-shrink:0;text-decoration:none;display:block}
.sh-logo svg{height:48px;width:auto;display:block}
.sh-burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line2);border-radius:11px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.sh-burger span{width:20px;height:2px;background:var(--navy);border-radius:2px;transition:.2s}
.site-header.open .sh-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.site-header.open .sh-burger span:nth-child(2){opacity:0}
.site-header.open .sh-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.sh-nav{display:flex;align-items:center;gap:3px;margin-left:auto}
.sh-item{position:relative}
.sh-item > a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;font-size:15px;font-weight:600;color:var(--body);text-decoration:none;border-radius:10px;transition:.14s;white-space:nowrap}
.sh-item > a:hover{color:var(--navy);background:var(--wash)}
.sh-item .car{width:14px;height:14px;transition:.2s;opacity:.7}
.sh-item.has-drop:hover > a .car,.sh-item.has-drop:focus-within > a .car{transform:rotate(180deg)}

.sh-drop{position:absolute;top:calc(100% + 6px);left:0;width:330px;background:#fff;border:1px solid var(--line2);border-radius:16px;box-shadow:0 18px 44px rgba(16,42,67,.16);padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.17s;z-index:60}
.sh-item.has-drop:hover .sh-drop,.sh-item.has-drop:focus-within .sh-drop{opacity:1;visibility:visible;transform:none}
.sh-drop a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:11px;text-decoration:none;transition:.12s}
.sh-drop a:hover{background:var(--wash)}
.sh-drop .di{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:#eaf2f9;display:flex;align-items:center;justify-content:center;transition:.12s}
.sh-drop a:hover .di{background:var(--navy)}
.sh-drop .di svg{width:18px;height:18px;color:var(--navy);transition:.12s}
.sh-drop a:hover .di svg{color:#fff}
.sh-drop .dt{display:block;font-size:14px;font-weight:700;color:var(--ink);line-height:1.3}
.sh-drop .dd{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4}

.sh-cta{flex-shrink:0;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:11px;text-decoration:none;box-shadow:0 6px 16px rgba(77,157,55,.28);transition:.16s;white-space:nowrap}
.sh-cta:hover{background:var(--greend);transform:translateY(-1px)}
.sh-cta svg{width:16px;height:16px}

@media(max-width:1040px){
  .sh-eco{display:none}
  .sh-burger{display:flex}
  .sh-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 18px 34px rgba(16,42,67,.13);padding:12px 16px 18px;margin:0;display:none}
  .site-header.open .sh-nav{display:flex}
  .sh-item > a{padding:13px 12px;font-size:16px;justify-content:space-between}
  .sh-drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;width:auto;padding:0 0 8px 14px}
  .sh-drop .dd{display:none}
  .sh-cta{margin-top:12px;justify-content:center;width:100%;box-sizing:border-box}
}
@media(max-width:520px){.sh-bar .sh-wrap{height:66px}.sh-logo svg{height:42px}}
.sh-logo img{height:48px;width:auto;display:block}
@media(max-width:520px){.sh-logo img{height:42px}}

/* ===== 28. HERO REDESIGN trang chủ (.site-hero) — scope để không đụng .hero/.btn toàn site ===== */
.site-hero{
  --sh-navy:#1D6495;--sh-green:#4D9D37;--sh-greend:#3C7D2A;--sh-amber:#FF8C00;
  --sh-ink:#16212C;--sh-body:#46535F;--sh-muted:#6B7884;--sh-line:#E3E9EF;--sh-wash:#F1F6FB;
  background:
    radial-gradient(900px 420px at 84% -10%,rgba(77,157,55,.12),transparent 60%),
    radial-gradient(820px 460px at 2% 0%,rgba(29,100,149,.10),transparent 58%),
    linear-gradient(180deg,#fff 0%,#eef4f9 100%);
  border-bottom:1px solid var(--sh-line);
}
.site-hero .hero-wrap{max-width:1080px;margin:0 auto;padding:54px 22px 60px;display:grid;grid-template-columns:1.12fr .88fr;gap:50px;align-items:center}
.site-hero .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-greend);background:#fff;border:1px solid #d6e6cc;padding:7px 14px;border-radius:100px;box-shadow:0 4px 12px rgba(16,42,67,.05)}
.site-hero .hero-eyebrow .d{width:7px;height:7px;border-radius:50%;background:var(--sh-green)}
.site-hero .hero-content h1{font-size:42px;line-height:1.16;font-weight:800;color:var(--sh-ink);margin:20px 0 18px;letter-spacing:-.01em}
.site-hero .hero-content h1 .hl{color:var(--sh-navy)}
.site-hero .hero-sub{font-size:17px;line-height:1.6;color:var(--sh-body);max-width:33em;margin:0 0 26px}
.site-hero .hero-sub b{color:var(--sh-navy);font-weight:700}
.site-hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.site-hero .btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 24px;border-radius:12px;text-decoration:none;transition:.16s;border:1.5px solid transparent;cursor:pointer}
.site-hero .btn svg{width:17px;height:17px}
.site-hero .btn-green{background:var(--sh-green);color:#fff;box-shadow:0 8px 20px rgba(77,157,55,.28)}
.site-hero .btn-green:hover{background:var(--sh-greend);transform:translateY(-1px)}
.site-hero .btn-ghost{background:#fff;color:var(--sh-navy);border-color:var(--sh-line)}
.site-hero .btn-ghost:hover{border-color:var(--sh-navy);background:var(--sh-wash)}
.site-hero .hero-trust{display:flex;flex-wrap:wrap;gap:18px}
.site-hero .hero-trust .t{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--sh-body)}
.site-hero .hero-trust .t svg{width:18px;height:18px;color:var(--sh-green);flex-shrink:0}
.site-hero .policy{background:#fff;border:1px solid var(--sh-line);border-radius:20px;box-shadow:0 4px 10px rgba(16,42,67,.04),0 24px 50px rgba(16,42,67,.10);padding:26px 26px 8px;position:relative}
.site-hero .policy-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.site-hero .policy-kick{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sh-muted)}
.site-hero .policy h3{font-family:'JetBrains Mono',monospace;font-size:25px;font-weight:700;color:var(--sh-navy);margin:6px 0 8px}
.site-hero .policy-desc{font-size:13.5px;color:var(--sh-body);line-height:1.5;margin:0 0 6px;max-width:24em}
.site-hero .policy-badge{flex-shrink:0;width:62px;height:62px;border-radius:50%;border:2px dashed #bcdcae;display:flex;align-items:center;justify-content:center;text-align:center}
.site-hero .policy-badge span{font-size:8.5px;font-weight:800;letter-spacing:.05em;color:var(--sh-greend);line-height:1.25;text-transform:uppercase}
.site-hero .policy-rows{margin-top:14px}
.site-hero .policy-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px dashed #e4ebf1}
.site-hero .policy-row .k{font-size:14px;color:var(--sh-body)}
.site-hero .policy-row .v{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;color:var(--sh-ink)}
.site-hero .policy-row .v.amber{color:var(--sh-amber)}
.site-hero .policy-row .v.green{display:inline-flex;align-items:center;gap:6px;color:var(--sh-greend)}
.site-hero .policy-row .v.green::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sh-green)}
.site-hero .policy-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px -26px 0;padding:15px 26px;border-top:1px solid var(--sh-line);background:var(--sh-wash);border-radius:0 0 20px 20px}
.site-hero .policy-foot .l{font-size:12.5px;color:var(--sh-muted)}
.site-hero .policy-foot a{font-size:13px;font-weight:700;color:var(--sh-navy);text-decoration:none;white-space:nowrap}
.site-hero .policy-foot a:hover{text-decoration:underline}
@media(max-width:900px){
  .site-hero .hero-wrap{grid-template-columns:1fr;gap:36px;padding:42px 22px 50px}
  .site-hero .hero-content h1{font-size:33px}
}

/* Brand spans trên nền tối/màu -> dùng màu chữ của container (tránh chữ xanh trên nền xanh) */
.sf-bottom .brand-brain,.sf-bottom .brand-care,
.sh-cta .brand-brain,.sh-cta .brand-care,
.btn-green .brand-brain,.btn-green .brand-care,
.btn-amber .brand-brain,.btn-amber .brand-care,
.btn-primary .brand-brain,.btn-primary .brand-care{color:inherit}


/* Topbar: nút "Tải mẫu biểu miễn phí" -> nền cam, chữ trắng cho nổi */
.sh-topbar .sh-tlink.dl{background:#FF8C00;color:#fff;padding:6px 14px;border-radius:100px;font-weight:700}
.sh-topbar .sh-tlink.dl:hover{background:#e87d00;color:#fff;transform:translateY(-1px)}
.sh-topbar .sh-tlink.dl svg{color:#fff}

/* Topbar mobile (≤640): gọn nút cam + tổng đài (ẩn pill trang trí, canh giữa, cho wrap) */
@media(max-width:640px){
  .sh-topbar .sh-wrap{justify-content:center;gap:8px 14px;flex-wrap:wrap;height:auto;min-height:42px;padding-top:7px;padding-bottom:7px}
  .sh-tleft{display:none}
  .sh-tright{gap:12px;flex-wrap:wrap;justify-content:center}
  .sh-topbar .sh-tlink.dl{font-size:12.5px;padding:6px 13px}
  .sh-tphone{font-size:12.5px}
}

/* Topbar mobile: ẩn chữ "Tổng đài" + vạch ngăn cho gọn (chỉ còn ☎ số) */
@media(max-width:640px){
  .sh-tlabel{display:none}
  .sh-tdiv{display:none}
}

/* ===== Mobile UI/UX polish: nhịp khoảng cách gọn, thoáng hơn ===== */
@media(max-width:640px){
  section{padding:40px 0}
  .sec-head{margin-bottom:22px}
  .sec-head p{font-size:15px;line-height:1.6}
  .wrap{padding:0 18px}
  .hero-trust{gap:10px 16px}
}

/* ===== Ảnh chụp app thật (browser frame) ===== */
.appshot{max-width:100%;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg);background:#fff}
.appshot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--wash);border-bottom:1px solid var(--line)}
.appshot-bar i{width:11px;height:11px;border-radius:50%;background:var(--line-2);display:block}
.appshot-bar i:nth-child(1){background:#f0a3a0}.appshot-bar i:nth-child(2){background:#f3cd8a}.appshot-bar i:nth-child(3){background:#9ed6a0}
.appshot-bar span{margin-left:8px;font-size:12.5px;color:var(--muted);font-family:var(--mono)}
.appshot img{display:block;width:100%;height:auto}
.appshot-cap{text-align:center;font-size:13.5px;color:var(--muted);margin-top:14px;max-width:680px;margin-left:auto;margin-right:auto}

/* Mobile: cho cuộn ngang ảnh app để xem rõ (ảnh rộng hơn khung) */
@media(max-width:640px){
  .appshot{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .appshot img{min-width:820px}
}

/* Gallery ảnh app 2 cột */
.appshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
@media(max-width:760px){.appshot-grid{grid-template-columns:1fr;gap:16px}}

/* ===== Topbar xanh lá ĐỒNG MÀU với thanh đáy footer (#3C7D2A) ===== */
.sh-topbar{background:#3C7D2A;border-bottom:0;color:#E7F6DF}
.sh-topbar .sh-eco{color:#E7F6DF}
.sh-topbar .sh-eco b{color:#fff}
.sh-topbar .sh-eco .brand-brain,.sh-topbar .sh-eco .brand-care{color:#fff}
.sh-topbar .sh-pill{background:#fff;color:#3C7D2A;border-color:#fff}
.sh-topbar .sh-pill .d{background:#3C7D2A}
.sh-topbar .sh-tlink{color:#E7F6DF}
.sh-topbar .sh-tphone b{color:#fff}
.sh-topbar .sh-tdiv{background:rgba(255,255,255,.35)}

/* Header dính cố định khi cuộn (cả topbar + menu) */
.site-header{position:sticky;top:0;z-index:100}

/* ===== 29. MASCOT BrainCare chào khách ================== */
.bcm-root{position:fixed;right:18px;bottom:18px;z-index:900}
.bcm-card{width:330px;max-width:88vw;background:#fff7fb;border-radius:22px;box-shadow:0 18px 50px rgba(80,40,90,.22);padding:16px 16px 18px;position:relative;animation:bcmCardIn .5s ease both}
@keyframes bcmCardIn{from{transform:translateY(60px);opacity:0}to{transform:translateY(0);opacity:1}}
.bcm-card.bcm-hide{display:none}
.bcm-close,.bcm-replay{position:absolute;top:10px;border:none;background:transparent;cursor:pointer;line-height:1;color:#bca9b6;z-index:5}
.bcm-close{right:12px;font-size:19px}.bcm-replay{right:40px;font-size:15px}
.bcm-close:hover,.bcm-replay:hover{color:#8a7682}
.bcm-bubble{background:#fff;border:2px solid #f0dce8;border-radius:16px;padding:13px 15px;font-size:14.5px;line-height:1.5;min-height:58px;position:relative;margin-bottom:6px;color:#4a3a44;box-shadow:0 4px 14px rgba(214,106,150,.10)}
.bcm-bubble .bcm-cursor{display:inline-block;width:2px;height:1.05em;background:#d96a96;vertical-align:-2px;margin-left:1px;animation:bcmBlink .7s steps(1) infinite}
@keyframes bcmBlink{50%{opacity:0}}
.bcm-bubble::after{content:"";position:absolute;bottom:-10px;left:42px;width:18px;height:18px;background:#fff;border-right:2px solid #f0dce8;border-bottom:2px solid #f0dce8;transform:rotate(45deg)}
.bcm-stage{display:flex;justify-content:center;margin:2px 0;height:150px;align-items:flex-end;overflow:hidden}
.bcm-mascot{width:132px;height:150px;transform-origin:50% 94%;opacity:0}
.bcm-mascot.run-in{animation:bcmRunIn 1.15s ease-out forwards}
@keyframes bcmRunIn{0%{transform:translateX(240px) rotate(4deg);opacity:0}12%{opacity:1}25%{transform:translateX(170px) translateY(-10px) rotate(-4deg)}50%{transform:translateX(110px) rotate(4deg)}75%{transform:translateX(46px) translateY(-10px) rotate(-4deg)}100%{transform:translateX(0) rotate(0);opacity:1}}
.bcm-mascot.bow{animation:bcmBow .9s ease forwards}
@keyframes bcmBow{0%{transform:rotate(0)}35%,65%{transform:rotate(18deg) translateY(7px)}100%{transform:rotate(0)}}
.bcm-mascot.idle{animation:bcmBob 3s ease-in-out infinite;opacity:1}
@keyframes bcmBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}
.bcm-leg{transform-box:fill-box;transform-origin:50% 0}
.bcm-mascot.run-in .bcm-leg-l{animation:bcmStepA .28s linear infinite}
.bcm-mascot.run-in .bcm-leg-r{animation:bcmStepB .28s linear infinite}
@keyframes bcmStepA{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes bcmStepB{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
.bcm-arm-r{transform-origin:78% 58%}
.bcm-mascot.idle .bcm-arm-r{animation:bcmWave 2.4s ease-in-out infinite}
@keyframes bcmWave{0%,100%{transform:rotate(0)}10%{transform:rotate(-22deg)}20%{transform:rotate(8deg)}30%{transform:rotate(-18deg)}40%{transform:rotate(0)}}
.bcm-eye-lid{transform-origin:center;transform-box:fill-box;animation:bcmBlinkEye 4s infinite}
@keyframes bcmBlinkEye{0%,94%,100%{transform:scaleY(0)}96%,98%{transform:scaleY(1)}}
.bcm-cta{display:flex;flex-direction:column;gap:7px;margin-top:8px;opacity:0;transform:translateY(10px);transition:.4s;pointer-events:none}
.bcm-cta.show{opacity:1;transform:translateY(0);pointer-events:auto}
.bcm-btn{display:block;text-align:center;border-radius:12px;padding:9px 12px;font-size:13.5px;font-weight:600;text-decoration:none;transition:.15s}
.bcm-btn-1{background:#4d9d37;color:#fff}
.bcm-btn-1:hover{background:#3c7d2a;transform:translateY(-2px)}
.bcm-btn-2{background:#fff;color:#1d6495;border:1.5px solid #cfe0fb}
.bcm-btn-2:hover{transform:translateY(-2px);border-color:#1d6495}
.bcm-btn-3{background:transparent;color:#8a7682;font-weight:500;font-size:12.5px;padding:3px}
.bcm-btn-3:hover{color:#1d6495}
.bcm-launch{width:64px;height:64px;border-radius:50%;border:none;background:#fff7fb;box-shadow:0 10px 28px rgba(80,40,90,.28);cursor:pointer;padding:7px;position:relative;animation:bcmCardIn .4s ease both}
.bcm-launch svg{width:100%;height:100%;display:block}
.bcm-launch:hover{transform:translateY(-3px)}
.bcm-launch .bcm-dot{position:absolute;top:4px;right:4px;width:13px;height:13px;background:#4d9d37;border:2px solid #fff7fb;border-radius:50%}
@media(max-width:560px){.bcm-root{right:10px;bottom:10px}.bcm-card{width:286px}}
@media(prefers-reduced-motion:reduce){.bcm-mascot,.bcm-card,.bcm-launch{animation:none!important}.bcm-mascot{opacity:1}}

/* FAQ summary layout fix 2026-07: title flows inline (CKCare liền), toggle ghim phải */
.faq summary{display:block;position:relative;padding-right:56px}
.faq summary .pl{position:absolute;right:20px;top:50%;transform:translateY(-50%)}
.faq[open] summary .pl{transform:translateY(-50%) rotate(45deg)}