:root{ /* MỰC & NỀN — nền giấy kem cho ảnh hoà vào trang */ --navy:#22306B;--navy2:#1B2650;--navy3:#2F4088;--ink:#1B2340;--muted:#5A6478;--faint:#656E82; --bg:#F7F4EE;--paper:#FFFFFF;--bg2:#EFEBE2;--cream:#FBF7EE;--line:#E3DDD1; /* ĐIỂM NHẤN — lấy đúng từ bộ ảnh mới */ --teal:#2E9E8F;--teal-d:#1E6E64;--gold:#E3B23C;--gold-l:#F0C862;--gold-pale:#F7E3AE;--coral:#E8593F; --blue:#1E6E64;--sky:#3FBFA8;--green:#0B7650;--red:#C4452F; /* 27/09 CHUAN-NEN-TOI: token doi mau theo che do. --navy-text = chu navy (KHONG dung var(--navy*) cho color:); --tint-* = nen nhat theo tong (thay cho hex #e7f5ee/#fbedea/#fff8e6/#f4f6fb) */ --navy-text:#1B2650;--tint-good:#E7F5EE;--tint-bad:#FBEDEA;--tint-warn:#FFF8E6;--tint-info:#F4F6FB; --font-head:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:70px} body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.65;font-size:16.5px} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} .narrow{max-width:760px;margin:0 auto;padding:0 24px} a{color:var(--blue)} h1,h2,h3{font-family:var(--font-head);color:var(--navy2);line-height:1.25} h1{font-size:36px}h2{font-size:26px;margin:0 0 14px}h3{font-size:19px;margin:0 0 6px} p{margin-bottom:14px} nav{border-bottom:1px solid var(--line);background:rgba(247,244,238,.94);position:sticky;top:0;z-index:50;backdrop-filter:blur(6px)} nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px} /* 27/09 anh Cuong: 'khong keo duoc ra phan ngoai cung ben phai — muon bam doi nen web ma khong bam duoc' -> thanh menu 11 muc + 4 nut rong ~1.090px, .wrap 1.080px nen nut ☀/🌐 bi day ra ngoai man hinh (html overflow-x:clip). Menu duoc rong toi 1.400px; man hep hon thi chu nho + khoang cach nho; <1120px an chu 'Cycle Method'. */ @media(min-width:761px){nav .wrap{max-width:1400px}.navlinks{flex-wrap:nowrap;min-width:0}} @media(min-width:761px) and (max-width:1120px){.navlinks a{margin-left:9px;font-size:13px}.navlinks a.cta,.navlinks a.dexcta{padding:7px 11px}.navlinks .nav-ssc span+span{display:none}#tp-acct{margin-left:9px}nav .logo{font-size:18px!important}} @media(min-width:761px) and (max-width:900px){.navlinks a{margin-left:7px;font-size:12.5px}nav .logo span,nav .logo em{display:none}} .logo{font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--navy2);text-decoration:none;letter-spacing:-.01em} .logo span{color:var(--gold)} .navlinks{display:flex;align-items:center} .navlinks a{color:var(--muted);text-decoration:none;font-size:14.5px;font-weight:600;margin-left:20px} .navlinks a:hover{color:var(--navy2)} .navlinks a.cta{background:var(--navy);color:#fff;padding:8px 16px;border-radius:10px} .hero{background:linear-gradient(180deg,#FBF8F1 0%,var(--bg) 100%);color:var(--ink);padding:64px 0 56px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)} .hero .wrap{position:relative;z-index:2} .hero .candles{position:absolute;right:-40px;bottom:-10px;opacity:.10;z-index:1;filter:grayscale(1)} .kicker{font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);margin-bottom:12px} .hero h1{color:var(--navy2);font-size:44px;max-width:640px} .hero h1 em{font-style:normal;color:var(--teal-d)} .hero .lead{color:var(--muted);font-size:19px;max-width:560px;margin:16px 0 26px} .btn{display:inline-block;background:linear-gradient(160deg,var(--gold-l),var(--gold));box-shadow:0 6px 18px rgba(227,178,60,.32);color:var(--navy2);font-weight:800;padding:14px 28px;border-radius:12px;text-decoration:none;font-size:16px} .btn:hover{filter:brightness(1.07)} /* Nut vang nam trong the nen navy: .brief-card a{color:gold-pale} tung de len chu nut -> chu vang nhat tren nen vang = nhot, kho doc. Ep lai chu navy dam (CHUAN muc 6). */ .brief-card .btn,.brief-card a.btn:hover{color:#1B2650!important;background:var(--gold);box-shadow:0 4px 14px rgba(0,0,0,.28);text-shadow:none} .btn.ghost{background:transparent;border:1.5px solid var(--navy3);color:var(--navy2);font-weight:700} .hero .sub{color:var(--faint);font-size:13.5px;margin-top:14px} .section{padding:52px 0} .section.alt{background:var(--bg2)} .section.paper{background:var(--paper)} .section.cream{background:var(--cream)} .sec-head{margin-bottom:26px} .sec-head .kicker{color:var(--teal-d)} .sec-head p{color:var(--muted);max-width:640px} .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 24px;transition:.18s;box-shadow:0 2px 8px rgba(27,38,80,.04)} .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(27,38,80,.10);border-color:var(--teal)} a.card{text-decoration:none;color:var(--ink);display:block} .card p{font-size:14.6px;color:var(--muted);margin:0} .stage{position:relative;padding-top:18px} .stage .num{font-family:var(--font-head);font-size:30px;font-weight:700;color:var(--navy2);border-bottom:3px solid var(--gold-l);display:inline-block;line-height:1.2;margin-bottom:8px} .stage .count{position:absolute;top:16px;right:20px;font-size:11.5px;font-weight:700;color:var(--teal-d);background:var(--cream);padding:3px 10px;border-radius:999px} .pillbar{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px} .pill{background:var(--bg2);border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:13px;color:var(--muted);font-weight:600} .brief-card{background:var(--navy2);color:#fff;border-radius:16px;padding:24px 26px} .brief-card .tag{display:inline-block;background:rgba(226,201,122,.18);color:var(--gold-pale);font-size:11.5px;font-weight:800;letter-spacing:.08em;padding:4px 12px;border-radius:999px;margin-bottom:10px} .brief-card h3{color:#fff} .brief-card p{color:#B9C9DE;font-size:14.6px} .brief-card a{color:var(--gold-pale)} .notice,.sq-notice{background:var(--bg2);border-left:3px solid var(--gold);padding:14px 18px;font-size:14.5px;color:var(--muted);margin:20px 0} .risk{background:#FBEFED;border-left:3px solid var(--red);padding:14px 18px;font-size:14.5px;color:#7A2A1E;margin:20px 0} .risk b,.notice b{color:inherit} .lesson-list{list-style:none} .lesson-list li{border-bottom:1px solid var(--line);padding:11px 4px;font-size:15.3px;display:flex;gap:12px;align-items:baseline} .lesson-list .n{font-family:var(--font-head);font-weight:700;color:var(--faint);min-width:30px;text-align:right} .lesson-list .soon{margin-left:auto;font-size:11.5px;color:var(--faint);white-space:nowrap} .lesson-list a{text-decoration:none;color:var(--ink);font-weight:600} .lesson-list a:hover{color:var(--blue)} /* Khoi "Latest" — the o vuong co anh, bai moi nhat truoc (sinh boi build-latest.py) */ .latest-wrap{margin:26px 0 30px} .latest-h{font-size:12.5px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);font-family:var(--font-body);font-weight:700;margin:0 0 14px!important;padding-bottom:9px;border-bottom:1px solid var(--line)} .latest-grid{margin:0} .latest-card{display:block;padding:0;overflow:hidden} .latest-card img{display:block;width:100%;height:168px;object-fit:cover;border-radius:0;margin:0 0 2px;background:var(--bg2)} .latest-card .kicker,.latest-card h3,.latest-card p{padding:0 20px} .latest-card .kicker{margin-top:16px;color:var(--teal-d)} .latest-card h3{margin:7px 0 8px;font-size:19.5px;line-height:1.3} .latest-card p{color:var(--muted);font-size:14.6px;line-height:1.55;margin:0} .latest-card .go{color:var(--teal-d);font-weight:700;font-size:13px;margin:12px 0 20px} .latest-card .new{background:var(--gold);color:#2A2208;font-size:10px;font-weight:800;letter-spacing:.06em;border-radius:5px;padding:2px 6px;margin-left:8px} .latest-card .nocover{display:flex;align-items:center;justify-content:center;height:104px;background:linear-gradient(135deg,#1E7368,#1E6E64);color:#EAF6F3;font-size:12.5px;font-weight:800;letter-spacing:.18em} @media(max-width:560px){.latest-card img{height:150px}} /* Ngay dang duoi tieu de bai — de doc gia biet bai moi hay cu */ .pubdate{color:var(--faint);white-space:normal}.pubdate time{white-space:nowrap}/* 19/09: nowrap ca span lam tran ngang 375px khi co Published+Updated (SO-CHAT-LUONG 18/09) */ .calc{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px} .calc label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin:0 0 5px} .calc input{width:100%;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;font-size:16px;font-family:var(--font-body)} input:focus{outline:none;border-color:var(--teal)} .calc input:focus{outline:none;border-color:var(--gold)} .calc .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px} .calc-out{background:var(--navy2);border-radius:12px;padding:18px 20px;color:#fff;margin-top:6px} .calc-out .big{font-size:26px;font-family:var(--font-head);color:var(--gold-pale)} .calc-out .lbl{font-size:12px;color:#8FA6C2;text-transform:uppercase;letter-spacing:.07em} .calc-out .r2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px} .calc-out .r2 div{background:rgba(255,255,255,.07);border-radius:8px;padding:9px 12px;font-size:14px} table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px} th,td{border:1px solid var(--line);padding:10px 13px;text-align:left;background:var(--paper)} /* 27/09 anh Cuong (cong cu ve khong chon/xoa duoc): bang BEN TRONG thu vien chart (lightweight-charts) bi luat table/td o tren day them margin 16px + vien 1px -> pane lech 17px so voi lop ve, truc thoi gian bi cat 17px. Tra ve nguyen ban cho moi chart. */ .tv-lightweight-charts table{margin:0!important;border-collapse:separate!important;border-spacing:0!important;display:table!important;font-size:inherit;box-shadow:none} .tv-lightweight-charts tr{display:table-row!important;border:0!important} .tv-lightweight-charts td,.tv-lightweight-charts th{border:0!important;padding:0!important;background:transparent!important;display:table-cell!important;white-space:normal} th{background:var(--bg2);border:1px solid var(--line);font-size:13.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)} /* GLOSSARY gon: luoi o thay vi danh sach doc dai le the (lenh anh Cuong 29/08) */ .term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:0 30px;margin:6px 0 8px} .term{border-bottom:1px solid var(--line);padding:15px 0} .term h3{font-size:17.5px;margin:0 0 5px} .term p{font-size:14.5px;line-height:1.52;color:var(--ink);max-width:none;margin:0} .term-grid .term p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .term .rel{font-size:13px;color:var(--faint)} /* Giu dong "Related" (dieu huong noi bo + SEO) nhung thu nho lai cho luoi do nang */ .term-grid .term p+p{margin-top:6px;-webkit-line-clamp:none;display:block} .term-grid .rel{font-size:12.2px;line-height:1.45;margin-top:5px} .chiprow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 6px;font-size:13px;color:var(--faint)} .chiprow a{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;border:1px solid var(--line);background:var(--paper);padding:6px 13px;border-radius:999px} .chiprow a:hover{border-color:var(--teal);color:var(--teal-d)} footer{background:var(--navy);color:#B9C9DE;margin-top:0;padding:44px 0 34px;font-size:14px} footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px;margin-bottom:26px} footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px} footer a{color:#B9C9DE;text-decoration:none;display:block;padding:3px 0} footer a:hover{color:var(--gold-pale)} footer .brand{font-family:var(--font-head);font-size:20px;color:#fff;font-weight:700} footer .brand span{color:var(--gold-l)} footer .fineprint{border-top:1px solid rgba(255,255,255,.14);padding-top:16px;font-size:12.5px;color:#B9C9DE} .meta{font-size:13.5px;color:var(--muted);margin-top:30px} figure{margin:20px 0}figure img{max-width:100%;border-radius:12px;border:1px solid var(--line)} figcaption{font-size:13px;color:var(--muted);margin-top:6px} pre,code{background:var(--bg2);border-radius:8px;font-size:14.5px} pre{padding:14px 16px;overflow-x:auto;margin:16px 0} .quiz{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:22px;margin:26px 0} .quiz .q{font-weight:700;margin-bottom:10px} .quiz button{display:block;width:100%;text-align:left;background:var(--bg);border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;font-size:15px;margin-bottom:8px;cursor:pointer;font-family:var(--font-body)} .quiz button:hover{border-color:var(--gold)} .quiz button.ok{border-color:var(--green);background:#E6F3ED} .quiz button.no{border-color:var(--red);background:#FBEFED} .breadcrumb{font-size:13px;color:var(--faint);margin:22px 0 0} .breadcrumb a{color:var(--faint);text-decoration:none} @media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}footer .cols{grid-template-columns:1fr 1fr}} @media(max-width:640px){.hero h1{font-size:31px}h1{font-size:28px}.grid2,.grid3{grid-template-columns:1fr}.navlinks a{margin-left:11px;font-size:13px}.calc .row{grid-template-columns:1fr}.hero{padding:44px 0 40px}} /* v11: EMBED MODE — ?embed=1 trong iframe web khac: chi giu tool + risk note */ html.embed nav,html.embed footer,html.embed .breadcrumb,html.embed .kicker, html.embed #tp-fbx,html.embed .kl-wrap,html.embed #tp-ref-pop,html.embed #tp-progress,html.embed #tp-top, html.embed #gt-pop,html.embed #gt-globe,html.embed #tp-search-btn,html.embed #tp-theme-btn, html.embed #tp-embedbox,html.embed #tp-sharebar,html.embed #syncbox,html.embed .notice, html.embed h2,html.embed .narrow>p,html.embed .narrow>table,html.embed figure{display:none!important} html.embed h1{font-size:22px;margin:4px 0 10px} html.embed .narrow,html.embed .wrap{padding-top:10px} html.embed .risk{font-size:12px;padding:10px 14px} /* v10: scroll reveal + focus polish */ /* 02/09/2026: reveal KHONG duoc an noi dung (truoc opacity:0 -> cuon nhanh/anh chup thay khoang trang). Chi truot nhe. */ .rv{opacity:1;transform:translateY(8px);transition:transform .35s ease} @media print{.rv{opacity:1!important;transform:none!important}} @media (prefers-reduced-motion:reduce){.rv{opacity:1!important;transform:none!important;transition:none}} .rv-in{opacity:1;transform:none} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:4px} /* v9: DARK MODE — html.dark do theme.js + snippet inline trong head gan */ html.dark{--bg:#0B1626;--bg2:#111F35;--paper:#122238;--cream:#14233C;--ink:#D9E2F0;--muted:#9FAEC6;--faint:#8A9DBA;--line:#24344F;--blue:#5FCBB8;--teal:#5FCBB8;--teal-d:#7FD9C8;--navy-text:#E7EDF7;--tint-good:rgba(127,199,168,.13);--tint-bad:rgba(240,150,138,.13);--tint-warn:rgba(240,200,98,.13);--tint-info:rgba(159,174,198,.15);color-scheme:dark} html.dark body{background:var(--bg)} html.dark h1,html.dark h2,html.dark h3{color:#E7EDF7} html.dark nav{background:rgba(11,22,38,.97);border-color:var(--line)} html.dark .logo{color:#E7EDF7} html.dark .navlinks a:hover{color:#E7EDF7} html.dark #menu-btn span{background:#E7EDF7} html.dark .navlinks a.cta{background:var(--gold);color:#12294A;font-weight:800} html.dark .kicker{color:#D9AE3E!important} html.dark .stage .num{color:#E7EDF7} html.dark .stage .count{color:#F0C862} html.dark .risk{background:var(--tint-bad);color:var(--ink);border-color:rgba(240,150,138,.35);border-left-color:var(--coral)} html.dark .calc input{background:#0B1626;color:var(--ink);border-color:var(--line)} html.dark .quiz button{background:#0B1626;color:var(--ink);border-color:var(--line)} html.dark .quiz button.ok{background:var(--tint-good);border-color:var(--green-text)} html.dark .quiz button.no{background:var(--tint-bad);border-color:var(--red-text)} html.dark .toc{background:#14233C;border-color:var(--line)} html.dark .toc a{color:#D9E2F0} html.dark .toc b,html.dark .toc a:hover{color:#D9AE3E} html.dark .ref-inline{background:#14233C;border-color:var(--line);border-left-color:#E3B23C} html.dark .ref-inline .ri-kick{color:#D9AE3E} html.dark .ref-inline .ri-btns a{color:#F0C862} html.dark .ref-inline .ri-btns a:hover{color:#1B2650} html.dark .share-row a,html.dark .share-row button{background:#111F35;color:#D9E2F0;border-color:var(--line)} html.dark .lesson-list a{color:var(--ink)} html.dark .card:hover{box-shadow:0 12px 30px rgba(0,0,0,.4)} html.dark figure img{border-color:var(--line)} html.dark .term p{color:var(--ink)} html.dark #gt-pop .goog-te-combo{background:#1B2650} @media(max-width:760px){html.dark .navlinks{background:rgba(11,22,38,.99);border-color:var(--line)}} /* hop goi y ref trong than bai */ .ref-inline{background:#FDFAF1;border:1px solid var(--line);border-left:3px solid #E3B23C;border-radius:12px;padding:18px 20px 14px;margin:28px 0} .ref-inline .ri-kick{color:var(--teal-d);font-size:11.5px;letter-spacing:.12em;font-weight:800;margin:0 0 6px} .ref-inline p{margin:0 0 12px;font-size:15.5px} .ref-inline .ri-btns{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px} .ref-inline .ri-btns a{border:1.5px solid #E3B23C;color:#1B2650;font-weight:700;text-decoration:none;padding:7px 16px;border-radius:999px;font-size:13.5px;transition:all .15s} .ref-inline .ri-btns a:hover{background:linear-gradient(180deg,#F0C862,#E3B23C)} .ref-inline .ri-fine{color:var(--faint);font-size:11.5px;margin:0} /* v7: mobile + editorial components */ .toc{position:static;background:#FDFAF1;border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:20px 0;font-size:14.5px} .toc b{color:var(--teal-d);font-size:11.5px;letter-spacing:.12em;display:block;margin-bottom:8px} .toc a{display:block;padding:3px 0;color:var(--navy2);text-decoration:none} .toc a:hover{color:var(--teal-d)} .tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .share-row{display:flex;gap:10px;align-items:center;margin:26px 0 10px;flex-wrap:wrap} .share-row a,.share-row button{border:1.5px solid var(--line);background:#fff;color:var(--navy2);font-weight:700;text-decoration:none;padding:8px 16px;border-radius:999px;font-size:13.5px;cursor:pointer;font-family:inherit} .share-row a:hover,.share-row button:hover{border-color:#E3B23C} #menu-btn{display:none;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto} #menu-btn span{display:block;width:22px;height:2.5px;background:var(--navy2);margin:4.5px 0;border-radius:2px;transition:.2s} @media(max-width:760px){ #menu-btn{display:block} .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,.99);border-bottom:1px solid var(--line);padding:10px 22px 16px;box-shadow:0 10px 24px rgba(14,33,64,.08)} .navlinks.open{display:block} .navlinks a{display:block;margin:0;padding:11px 2px;font-size:15.5px;border-bottom:1px solid var(--line)} .navlinks a.cta{display:inline-block;margin-top:12px;border-bottom:0} .navlinks #gt-globe{padding:11px 2px;font-size:18px} nav .wrap{position:relative;height:60px} .logo{font-size:18px!important}.logo img{width:36px!important;height:36px!important} article .wrap,.narrow{padding-left:18px;padding-right:18px} h1{font-size:25px!important} .hero h1{font-size:27px!important} #tp-ref-pop{left:12px;right:12px;max-width:none!important;bottom:12px} .share-row{gap:8px} } /* === HỆ ẢNH MỚI (28/08) — ảnh nền kem hoà vào trang === */ article figure img,article > .narrow img,.narrow figure img{border-radius:16px;border:1px solid var(--line);background:var(--paper)} article figcaption,figcaption{font-size:13.6px;color:var(--faint);margin-top:8px;text-align:center;font-style:italic} /* khối nội dung nổi trên nền kem */ article .narrow > p,article .narrow > h2,article .narrow > h3,article .narrow > table,article .narrow > ol,article .narrow > ul{background:transparent} .risk{background:#FDF1EE;border:1px solid #F3C9BF;border-left:4px solid var(--coral);border-radius:12px;padding:14px 18px;font-size:14.6px} .notice,.sq-notice{background:var(--cream);border:1px solid var(--line);border-radius:12px;padding:14px 18px} .dark .card{background:var(--paper);box-shadow:none} .dark .dark .notice{background:var(--paper)} .dark .risk{background:#2A1A18;border-color:#5A2E27} .dark article figure img,.dark .narrow figure img{background:var(--paper);border-color:var(--line)} .dark .hero{background:linear-gradient(180deg,#101F35 0%,var(--bg) 100%)} .dark .hero h1{color:#E7EDF7} /* === KEY TAKEAWAYS (làm lại 28/08 — bản cũ chữ kem trên nền trắng nên tàng hình) === */ .takeaways{position:relative;background:linear-gradient(180deg,#FFFDF8 0%,var(--paper) 100%);color:var(--ink);border:1px solid var(--line);border-left:5px solid var(--teal);border-radius:16px;padding:22px 24px 20px;margin:26px 0;box-shadow:0 4px 16px rgba(27,38,80,.05)} .takeaways h4{display:flex;align-items:center;gap:8px;color:var(--teal-d);font-family:var(--font-body);font-size:11.8px;letter-spacing:.13em;margin:0 0 12px;font-weight:800;text-transform:uppercase} .takeaways h4::before{content:"";width:16px;height:16px;flex:none;border-radius:4px;background:var(--teal);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat} .takeaways ul{margin:0;padding:0;list-style:none} .takeaways li{position:relative;margin:0 0 11px;padding-left:24px;font-size:15.6px;line-height:1.62;color:var(--ink)} .takeaways li:last-child{margin-bottom:0} .takeaways li::before{content:"";position:absolute;left:6px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--gold)} .takeaways b,.takeaways strong{color:var(--navy2)} .dark .takeaways{background:var(--paper);color:var(--ink)} .dark .takeaways li{color:var(--ink)} /* 01/09/2026: chu trong KEY TAKEAWAYS dung var(--navy2) = #1B2650, ma --navy2 KHONG duoc dinh nghia lai o dark mode -> chu navy dam nam tren nen #122238, do duoc contrast 1.10:1 (gan nhu vo hinh). Sang mau --ink giong tien le da co o `html.dark .lq b` va `html.dark .sub-box h4`; o light mode navy2 (#1B2650) va ink (#1B2340) von gan nhu trung nhau nen nhan manh von la do font-weight, khong phai do mau. */ html.dark .takeaways b,html.dark .takeaways strong{color:var(--ink)} /* quiz — trạng thái chạm */ .lq-c:hover{border-color:var(--teal)!important;background:var(--cream)!important} .lq-c:hover .lq-let{background:var(--teal)!important;color:#fff!important} #tp-lquiz{scroll-margin-top:80px} /* logo phẳng navy — dark mode đảo thành kem ấm, không loá */ .dark .logo img{filter:none} .dark footer .cols img{filter:none} /* === QUICK ANSWER BOX (bắt buộc mọi bài, 29/08) === */ .quick-answer{background:linear-gradient(180deg,#F2FAF8 0%,var(--paper) 100%);border:1px solid #BFE3DB;border-left:5px solid var(--teal);border-radius:14px;padding:16px 20px;margin:18px 0 22px;font-size:16.4px;line-height:1.62;color:var(--ink)} .quick-answer b{color:var(--teal-d);font-weight:800;letter-spacing:.02em} .dark .quick-answer{background:#12262A;border-color:#2A4C48} /* mục lục dính */ #tp-stoc a:hover{color:var(--teal-d)!important} @media(max-width:1199px){#tp-stoc{display:none!important}} /* === Ô NHẬN BÀI MỚI (29/08) === */ .sub-box{background:linear-gradient(180deg,#FFFDF6 0%,var(--paper) 100%);border:1px solid var(--line);border-left:5px solid var(--gold);border-radius:16px;padding:22px 24px;margin:30px 0;box-shadow:0 4px 16px rgba(27,38,80,.05)} .sub-box h4{font-family:var(--font-head);font-size:19px;color:var(--navy2);margin:0 0 6px} .sub-box p{font-size:14.6px;color:var(--muted);margin:0 0 14px} .sub-box .sub-fine{font-size:12.8px;color:var(--muted);opacity:.82;margin:12px 0 0;line-height:1.55} .sub-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:5px 5px 5px 6px;box-shadow:inset 0 1px 2px rgba(27,38,80,.04);transition:border-color .18s,box-shadow .18s} .sub-row:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(46,158,143,.13)} .sub-row input{flex:1 1 210px;width:auto;min-width:0;background:transparent;border:0;border-radius:9px;padding:10px 10px;font-size:15.4px;font-family:var(--font-body);color:var(--ink)} .sub-row input:focus,.sub-row input:focus-visible{outline:none;border-color:transparent} .sub-row input::placeholder{color:#9CA7B8} .sub-row button{flex:0 0 auto;background:var(--gold);color:var(--navy2);border:0;border-radius:9px;padding:10px 19px;font-size:14.6px;font-weight:700;letter-spacing:.005em;cursor:pointer;font-family:inherit;transition:background .18s,transform .12s} .sub-row button:hover{background:var(--gold-l);transform:translateY(-1px)} .sub-row button:active{transform:none} @media(max-width:430px){.sub-row{gap:8px}.sub-row button{flex:1 1 100%}} .sub-msg{font-size:13.8px;margin:10px 0 0;min-height:20px;font-weight:600} .sub-fine{font-size:12.6px;color:var(--faint);margin:10px 0 0} /* ĐIỀU HƯỚNG LỘ TRÌNH cuối bài (pathnav) — thay dòng prev/next chữ trần. Dùng đúng token brand: thẻ trắng trên nền kem, viền --line, hover viền teal. */ .pathnav{margin:34px 0 4px;border-top:1px solid var(--line);padding-top:22px} .pathnav .pn-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px} .pathnav .pn-top .kicker{margin:0} .pathnav .pn-top a{font-size:13.5px;color:var(--teal-d);font-weight:700;text-decoration:none;white-space:nowrap} .pathnav .pn-top a:hover{text-decoration:underline} .pn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch} @media(max-width:640px){.pn-grid{grid-template-columns:1fr}} .pn-card{display:flex;flex-direction:column;justify-content:center;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:14px 18px;text-decoration:none;color:var(--ink);transition:.18s;box-shadow:0 2px 8px rgba(27,38,80,.04)} .pn-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:0 10px 24px rgba(27,38,80,.09)} .pn-dir{display:block;font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-d);margin-bottom:5px} .pn-t{display:block;font-family:var(--font-head);font-size:16.5px;line-height:1.3;color:var(--navy2)} .pn-card.pn-next{border-left:4px solid var(--teal)} .pn-soon{background:var(--bg2);border:1px dashed var(--line);border-radius:14px;padding:14px 18px} .pn-soon .pn-dir{color:var(--muted)} .pn-soon .pn-t{color:var(--muted);font-size:15.5px} .pn-soon p{font-size:13.5px;color:var(--muted);margin:7px 0 0} .pn-soon a{color:var(--teal-d);font-weight:600} html.dark .pn-card{background:#14233C;border-color:#24344F} html.dark .pn-t{color:#E7EDF7} html.dark .pn-soon{background:#101D33;border-color:#24344F} /* MOT DONG dieu huong dau /learn/ — chi thang vao bai dau, khong liet ke danh sach (danh sach se trung lap voi ban do 56 bai ngay ben duoi khi viet du). */ .pathstart{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:22px 0 6px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px} .pathstart-lead{color:var(--muted);font-size:15.5px} .pathstart-cta{font-family:var(--font-head);font-size:17px;color:var(--navy2);text-decoration:none;font-weight:600;border-bottom:2px solid var(--gold);padding-bottom:1px} .pathstart-cta:hover{color:var(--teal-d);border-color:var(--teal)} .pathstart-prog{margin-left:auto;font-size:12.5px;color:var(--faint);white-space:nowrap} @media(max-width:640px){.pathstart-prog{margin-left:0}} html.dark .pathstart{background:#14233C;border-color:#24344F;border-left-color:var(--teal)} html.dark .pathstart-cta{color:#E7EDF7} /* BYLINE dau bai — truoc day dung inline `margin:-6px 0 16px`, margin-top AM keo dong tac gia DINH SAT vao tieu de (anh Cuong bao 29/08: "dinh sat nhau qua, nhin ko dep, hoi roi"). Cho no tho ra, va tho hon nua tren mobile vi tieu de xuong nhieu dong nen cang chat. */ .byline{font-size:13.6px;color:var(--faint);margin:14px 0 22px;line-height:1.6} .byline a{color:var(--teal-d);font-weight:600} .byline .pubdate{white-space:normal} h1+.byline{margin-top:16px} @media(max-width:640px){ .byline{margin:16px 0 24px;font-size:13.2px} article h1{line-height:1.22;margin-bottom:2px} } /* NHOM NUT CTA — truoc day nut thu 2 dung `margin-left:10px` viet thang trong HTML. Tren desktop do la khoang cach ngang; xuong mobile nut xuong dong thi no bien thanh THUT LE, hai nut khong thang hang (anh Cuong bao 29/08). Dung flex + gap de khoang cach dung nghia o ca hai kho. */ .btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px} .btnrow .btn{margin:0} @media(max-width:640px){ /* Mobile: xep doc, CUNG LE, cung chieu rong — de bam bang ngon tay cai. */ .btnrow{display:grid;grid-template-columns:1fr;gap:12px;margin-top:22px} .btnrow .btn{width:100%;text-align:center;padding:15px 20px} .hero .sub{margin-top:16px} } /* BANG SO SANH — dung o /exchanges. Tren mobile bang 3 cot se tran ngang, nen chuyen thanh cac KHOI XEP DOC co nhan truoc moi o (khong cuon ngang). */ .tblwrap{margin:20px 0 26px} table.cmp{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper); border:1px solid var(--line);border-radius:14px;overflow:hidden} table.cmp th{text-align:left;font-family:var(--font-body);font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--teal-d);background:var(--bg2);padding:12px 16px;font-weight:800} table.cmp td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top;line-height:1.55} table.cmp td:first-child{white-space:nowrap;color:var(--navy2)} @media(max-width:720px){ table.cmp,table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:100%} table.cmp thead{display:none} table.cmp tr{border-top:1px solid var(--line);padding:6px 0 10px} table.cmp tr:first-child{border-top:0} table.cmp td{border:0;padding:6px 16px} table.cmp td:first-child{font-family:var(--font-head);font-size:18px;padding-top:14px} table.cmp td[data-nhan]:before{content:attr(data-nhan);display:block;font-size:11px; letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);font-weight:800;margin-bottom:3px} } html.dark table.cmp{background:#14233C;border-color:#24344F} html.dark table.cmp th{background:#101D33} /* ===== CHẾ ĐỘ TỐI: vá chữ tàng hình (29/08/2026) ===== Sau khi chuẩn hoá bảng màu, một số khối do JS chèn vẫn dùng màu MỰC NAVY — đúng trên nền kem, nhưng ở chế độ tối thì navy trên nền navy = gần như vô hình. Soi mắt phát hiện: CÂU HỎI QUIZ chỉ đọc được số thứ tự, phần câu hỏi chìm hẳn (contrast 1.10) — người dùng dark mode thấy 4 đáp án mà không biết câu hỏi là gì. Hộp "Get the next lesson by email" cũng vậy ⇒ phễu lead hỏng ở chế độ tối. */ html.dark .lq p, html.dark .lq-q, html.dark .lq b{color:var(--ink)} html.dark .lq-num, html.dark .lq strong{color:var(--gold)} html.dark .sub-box{background:linear-gradient(180deg,#14233C 0%,#101D33 100%); border-color:#24344F;border-left-color:var(--gold)} html.dark .sub-box h4{color:var(--ink)} html.dark .sub-row{background:#0B1626;border-color:#24344F} html.dark .sub-row input{background:transparent;color:var(--ink);border-color:transparent} html.dark .sub-row input::placeholder{color:#7487A3} html.dark .lq-c{background:#14233C!important;border-color:#24344F!important} html.dark .lq-c:hover{background:#1A2B48!important;border-color:var(--teal)!important} html.dark .tblwrap table.cmp td{color:var(--ink)} html.dark .pathstart-lead{color:#9FAEC6} /* ===== NGHE BÀI (listen.js) — 29/08/2026, anh Cường yêu cầu ===== Đặt ngay dưới byline: đúng chỗ người đọc quyết định "đọc hay nghe". */ .listen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-8px 0 22px} .listen button{font-family:inherit;cursor:pointer;border-radius:999px;transition:.15s} .listen-go{display:inline-flex;align-items:center;gap:8px;background:var(--paper); border:1px solid var(--line);color:var(--navy2);font-size:13.6px;font-weight:700;padding:8px 16px} .listen-go:hover{border-color:var(--teal);color:var(--teal-d)} .listen-ic{font-size:11px;color:var(--teal-d)} .listen-rate,.listen-stop{background:transparent;border:1px solid var(--line); color:var(--muted);font-size:12.5px;font-weight:700;padding:7px 12px} .listen-rate:hover,.listen-stop:hover{border-color:var(--teal);color:var(--teal-d)} .listen-note{font-size:12.5px;color:var(--faint)} /* đoạn đang được đọc — đủ rõ để bám theo, đủ nhẹ để không chói */ .listen-on{background:linear-gradient(90deg,rgba(227,178,60,.20),rgba(227,178,60,.05)); box-shadow:-10px 0 0 rgba(227,178,60,.20);border-radius:3px} html.dark .listen-go{background:#14233C;border-color:#24344F;color:var(--ink)} html.dark .listen-rate,html.dark .listen-stop{border-color:#24344F} html.dark .listen-on{background:linear-gradient(90deg,rgba(227,178,60,.22),rgba(227,178,60,.06)); box-shadow:-10px 0 0 rgba(227,178,60,.22)} @media(max-width:640px){.listen{margin:-4px 0 20px}.listen-go{padding:10px 18px}} @media print{.listen{display:none}} .listen-restart{background:transparent;border:1px solid var(--line);color:var(--muted); font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:999px} .listen-restart:hover{border-color:var(--teal);color:var(--teal-d)} html.dark .listen-restart{border-color:#24344F} /* --- .gcard — the huong dan co THUMBNAIL NHO, dung cho /how-to/ va cac muc TRA CUU (them 29/08/2026). Co y KHAC .card cua /wisdom/ (anh bia lon full-width): wisdom la duyet/kham pha nen anh to keo su chu y; how-to la tra cuu co chu dich nen MAT DO quan trong hon — anh to lam moi man hinh chi hien 2 bai thay vi 6. Thumbnail giu duoc ca hai: co hinh de nhan dien, van quet nhanh. --- */ .gcard{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding:16px 0} .gcard-img{flex:0 0 132px;border-radius:10px;overflow:hidden;line-height:0;background:var(--cream);border:1px solid var(--line)} .gcard-img img{width:132px;height:88px;object-fit:cover;display:block;transition:.18s} .gcard:hover .gcard-img img{transform:scale(1.04)} .gcard-body{min-width:0} .gcard h3{font-size:17.5px;margin:0 0 5px;line-height:1.3} .gcard h3 a{text-decoration:none} .gcard p{font-size:14.5px;line-height:1.52;color:var(--ink);margin:0} .gcard .rel{font-size:12.2px;color:var(--faint);margin-top:5px;line-height:1.45} @media(max-width:560px){.gcard{gap:12px;padding:14px 0}.gcard-img{flex:0 0 88px}.gcard-img img{width:88px;height:66px}.gcard h3{font-size:16.4px}} /* SO DO SVG TREN MOBILE (30/08/2026) — do that: viewBox 760 co xuong 327px o man 375 => chu 12.5px trong so do chi con ~5.4px THAT, gan nhu khong doc noi. Chu than bai la 16.5px. Khong font nao cuu duoc o ty le 0.43, nen cho so do giu be rong toi thieu doc duoc va vuot ngang trong khung. Chi ap cho
CO svg — figure chua khong dung. */ @media (max-width:640px){ figure:has(svg){overflow-x:auto;-webkit-overflow-scrolling:touch; background:linear-gradient(90deg,transparent 92%,rgba(27,38,80,.05));border-radius:12px} figure:has(svg) svg{min-width:760px} /* SUA 31/08 (bien tap dem): 660 khien nhan 11px ra 9,55px — DUOI chuan 10px, dinh 14 so do tren 11 trang. Moi viewBox deu la 760, nen min-width:760 lam font-size tro thanh px THAT: 11 -> 11,0px · 12,5 -> 12,5px. Het phai va tay tung bai. */ figure:has(svg) figcaption{position:sticky;left:0} } /* DOAN VAN NGAY SAU DANH SACH (30/08/2026) — do that: