/* ===== Tokens (DESIGN.md – Financial Flow Precision) ===== */
:root{
--navy:#0d2854; --navy-light:#1b3a6b; --navy-surface:#f4f7fb;
--orange:#ff7427; --orange-hover:#ea580c; --orange-surface:#fff7ed;
--cyan:#0e7490; --cyan-surface:#ecfeff;
--canvas:#f8f9ff; --white:#fff;
--text:#0d1c2e; --text-2:#475569; --text-3:#64748b; --text-4:#94a3b8;
/* chữ gợi ý + icon trong ô nhập: đạt 4,5:1 trên nền trắng */
--field-hint:#64748b;
--success:#16a34a; --success-bg:#f0fdf4; --success-border:#bbf7d0;
--warning:#d97706; --warning-bg:#fffbeb;
--danger:#dc2626; --danger-bg:#fef2f2;
--border:#e2e8f0; --border-strong:#cbd5e1;
--r-sm:.25rem; --r:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.5rem;
--sh-1:0 2px 8px -2px rgba(13,40,84,.05),0 1px 3px -1px rgba(13,40,84,.03);
--sh-2:0 12px 24px -6px rgba(13,40,84,.08),0 4px 8px -2px rgba(13,40,84,.04);
--sh-3:0 20px 35px -8px rgba(13,40,84,.16);
--header-h:72px;
--gutter:1.25rem;
}
@media (min-width:768px){:root{--gutter:1.5rem}}
@media (min-width:1200px){:root{--gutter:2rem}}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-size:15px;line-height:1.6;color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5,h6,p,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
.hidden,.hide,.d-none{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.ms{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;text-transform:none;letter-spacing:normal;font-size:20px;line-height:1;display:inline-block;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;vertical-align:middle;user-select:none;flex-shrink:0;overflow:hidden;width:1em}
.ms.fill{font-variation-settings:"FILL" 1,"wght" 400,"GRAD" 0,"opsz" 24}
.container{max-width:1280px;margin:0 auto;padding:0 var(--gutter)}
.section{padding:4rem 0}
@media (min-width:1024px){.section{padding:6rem 0}}
.bg-canvas{background:var(--canvas)}
.bg-tint{background:var(--navy-surface)}
.bg-navy{background:var(--navy);color:#fff}
/* Typography */
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-hover)}
.bg-navy .eyebrow{color:var(--orange)}
.h-display{font-size:36px;line-height:44px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.h-lg{font-size:28px;line-height:36px;font-weight:700;letter-spacing:-.01em;color:var(--navy)}
.final .h-display{font-size:28px;line-height:34px}
.final .h-lg{font-size:22px;line-height:30px}
@media (min-width:768px){
.h-display{font-size:48px;line-height:56px;letter-spacing:-.03em}
.final .h-display{font-size:48px;line-height:56px}
.h-lg{font-size:36px;line-height:44px;letter-spacing:-.02em}
.final .h-lg{font-size:28px;line-height:38px}
}
@media (min-width:1200px){
.h-display{font-size:56px;line-height:64px}
.final .h-display{font-size:56px;line-height:64px}
.h-lg{font-size:40px;line-height:48px}
.final .h-lg{font-size:32px;line-height:42px}
}
.bg-navy .h-lg,.bg-navy .h-display,.bg-navy .h-md{color:#fff}
.lead{font-size:17px;line-height:28px;color:var(--text-2)}
@media (min-width:768px){.lead{font-size:18px}}
.bg-navy .lead{color:#cbd5e1}
/* Chữ trên mọi nền navy khác (hero trang hướng dẫn, khối hỗ trợ…) */
.help-hero .h-lg,.help-hero .h-md,.support .h-md,.support .h-lg{color:#fff}
.help-hero .lead{color:#cbd5e1}
.section-head{max-width:760px;margin:0 auto 3rem;text-align:center;display:grid;gap:.75rem}
.section-head.left{margin-left:0;text-align:left}
.num{font-variant-numeric:tabular-nums}
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:var(--r);font-weight:700;font-size:15px;line-height:24px;border:1.5px solid transparent;transition:background .2s,color .2s,box-shadow .2s,transform .2s,border-color .2s;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn-lg{padding:1rem 1.75rem;font-size:16px}
.btn-block{width:100%}
.btn-accent{background:var(--orange);color:#fff;font-weight:800;box-shadow:0 2px 4px rgba(255,116,39,.2)}
.btn-accent:hover{background:var(--orange-hover);color:#fff;box-shadow:0 8px 20px -6px rgba(234,88,12,.45)}
.btn-accent .ms{transition:transform .25s}
.btn-accent:hover .ms{transform:translateX(4px)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-light)}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy-surface)}
.btn-ghost{color:var(--text-2)}
.btn-ghost:hover{color:var(--navy);background:var(--navy-surface)}
.btn-soft{background:#f1f5f9;color:var(--navy)}
.btn-soft:hover{background:#e2e8f0}
/* Pills */
.pill{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .75rem;border-radius:9999px;font-size:12px;font-weight:700;line-height:16px;white-space:nowrap}
.pill .ms{font-size:15px}
.pill-orange{background:var(--orange);color:#fff}
.pill-orange-soft{background:var(--orange-surface);color:#9a3412;border:1px solid #fed7aa}
.pill-navy-soft{background:#eaf1ff;color:var(--navy);border:1px solid #d5e3fc}
.pill-cyan{background:var(--cyan-surface);color:var(--cyan);border:1px solid #a5f3fc}
.pill-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
.pill-danger{background:var(--danger-bg);color:var(--danger);border:1px solid #fecaca}
/* Cards */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:box-shadow .25s,transform .25s,border-color .25s}
.card-hover:hover{box-shadow:var(--sh-2);transform:translateY(-4px);border-color:#fdba74}
.card-featured{border:2px solid var(--orange);box-shadow:var(--sh-2)}
.icon-box{width:48px;height:48px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0;transition:transform .25s,background .25s,color .25s}
.icon-box .ms{font-size:26px}
.icon-navy{background:#eaf1ff;color:var(--navy);border:1px solid #d5e3fc}
.icon-orange{background:var(--orange-surface);color:var(--orange-hover);border:1px solid #fed7aa}
.icon-solid-orange{background:var(--orange);color:#fff}
.icon-white{background:#fff;color:var(--navy);border:1px solid var(--border);box-shadow:var(--sh-1)}
.card-hover:hover .icon-box{transform:scale(1.06)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--success);display:inline-block;position:relative;flex-shrink:0}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
.dot-orange{background:var(--orange)}
.dot-warning{background:var(--warning)}
@keyframes ping{75%,100%{transform:scale(2.4);opacity:0}}
/* ===== Header ===== */
.header{position:fixed;inset:0 0 auto 0;z-index:1060;height:var(--header-h);background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.header.scrolled{border-bottom-color:var(--border);box-shadow:var(--sh-1)}
.header .container{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:22px;letter-spacing:-.03em;color:var(--navy)}
.logo-mark{width:34px;height:34px}
.logo b{color:var(--orange-hover);font-weight:800}
.nav{display:none;gap:1.25rem;font-size:15px;font-weight:600;color:var(--text-2);white-space:nowrap}
.nav a{position:relative;padding:.25rem 0;transition:color .2s}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .2s;border-radius:2px}
.nav a:hover{color:var(--navy)}
.nav a:hover::after{transform:scaleX(1)}
.header-cta{display:flex;align-items:center;gap:.5rem}
.header-cta .login{display:none}
.header-cta .btn-accent{display:inline-flex;gap:.25rem;padding:.45rem .7rem;font-size:12px;line-height:17px}
@media (max-width:419px){.header .container{gap:.5rem}.header-cta .btn-accent .cta-more{display:none}}
@media (min-width:420px){.header-cta .btn-accent{padding:.5rem .8rem;font-size:12.5px}}
.menu-btn{width:42px;height:42px;padding:0 0 0 14px;border:0;background:0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;cursor:pointer;transition:all .3s cubic-bezier(.25,1,.5,1)}
.menu-btn .line{display:block;height:2px;border-radius:2px;background:var(--orange);transition:all .3s cubic-bezier(.25,1,.5,1)}
.menu-btn .line-1{width:100%;animation:lineWave 1.2s infinite ease-in-out}
.menu-btn .line-2{width:70%;animation:lineWave 1.2s infinite ease-in-out .2s}
.menu-btn .line-3{width:100%;animation:lineWave 1.2s infinite ease-in-out .4s}
@keyframes lineWave{0%,100%{width:100%}50%{width:40%}}
.menu-btn.open .line{width:100%;animation:none}
.menu-btn.open .line-1{transform:translateY(7px) rotate(45deg)}
.menu-btn.open .line-2{opacity:0;transform:scaleX(0)}
.menu-btn.open .line-3{transform:translateY(-7px) rotate(-45deg)}
@media (min-width:640px){.header-cta .login{display:inline-flex}}
@media (min-width:1200px){
.nav{display:flex}
.menu-btn{display:none}
.header-cta .btn-accent{gap:.5rem;padding:.65rem 1.25rem;font-size:15px;line-height:24px}
}
@media (min-width:1400px){.nav{gap:1.75rem}}
.mobile-nav{position:fixed;top:var(--header-h);left:0;right:0;z-index:1059;background:#fff;border-bottom:1px solid var(--border);box-shadow:var(--sh-3);padding:.5rem var(--gutter) 1.25rem;display:none}
.mobile-nav.open{display:block;animation:slideDown .2s ease}
.mobile-nav a{display:block;padding:.85rem 0;font-weight:600;color:var(--navy);border-bottom:1px solid #f1f5f9}
.mobile-nav .btn{margin-top:1rem}
.mobile-nav-backdrop{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;z-index:1058;background:rgba(13,40,84,.45);display:none}
.mobile-nav-backdrop.open{display:block;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}}
/* ===== Hero ===== */
.hero{padding:calc(var(--header-h) + 3rem) 0 4.5rem;background:radial-gradient(1200px 500px at 85% -10%,#e6eeff 0%,transparent 60%),radial-gradient(800px 400px at -10% 110%,var(--orange-surface) 0%,transparent 60%),var(--canvas);border-bottom:1px solid var(--border);overflow:hidden}
.hero-grid{display:grid;gap:3.5rem;align-items:center}
@media (min-width:1024px){.hero{padding:calc(var(--header-h) + 5rem) 0 6rem}.hero-grid{grid-template-columns:7fr 5fr;gap:3.5rem}}
.hero-copy{display:grid;gap:1.5rem}
.hero-badge{justify-self:start;display:inline-flex;align-items:center;gap:.6rem;padding:.4rem .9rem;border-radius:9999px;background:#fff;border:1px solid #d5e3fc;color:var(--navy);font-size:13px;font-weight:700;box-shadow:var(--sh-1)}
.hero h1 .accent,.ct-hero h1 .accent{color:var(--orange-hover);background:linear-gradient(90deg,var(--orange-hover),var(--orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .lead{max-width:600px}
.hero-actions{display:flex;flex-direction:column;gap:.75rem}
@media (min-width:560px){.hero-actions{flex-direction:row}}
.hero-actions .btn-outline{background:#fff}
@media (max-width:559px){
.hero-actions{gap:.6rem}
.hero-actions .btn-lg{padding:.7rem 1.25rem;font-size:14px;line-height:20px;gap:.35rem}
.hero-actions .btn-lg .ms{font-size:18px}
}
.checks{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;font-size:14px;font-weight:500;color:var(--text-2)}
.checks span{display:inline-flex;align-items:center;gap:.4rem}
.checks .ms{color:var(--success);font-size:18px}
/* Hero mockup */
.mock-wrap{position:relative;padding-bottom:2.5rem}
.mock{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:1.25rem;display:grid;gap:1rem}
@media (min-width:480px){.mock{padding:1.5rem}}
.mock-bar{display:flex;align-items:center;justify-content:space-between;padding-bottom:.85rem;border-bottom:1px solid #f1f5f9;gap:.5rem}
.mock-bar .lights{display:flex;align-items:center;gap:6px}
.mock-bar .lights i{width:10px;height:10px;border-radius:50%;display:block}
.mock-bar .lights span{margin-left:.5rem;font-size:12px;font-weight:700;color:var(--text-3)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.stat{background:var(--navy-surface);border:1px solid #edf2f7;border-radius:var(--r-md);padding:.75rem}
.stat small{display:block;font-size:11px;font-weight:600;color:var(--text-3);line-height:16px}
.stat strong{display:block;font-size:17px;font-weight:800;color:var(--navy);margin-top:.15rem;letter-spacing:-.01em}
.stat em{font-style:normal;font-size:11px;font-weight:600;color:var(--text-3)}
.stat .up{color:var(--success)}
.ledger-head{display:flex;justify-content:space-between;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-4);padding:0 .25rem}
.ledger{display:grid;gap:.5rem}
.row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.7rem .75rem;border-radius:var(--r-md);border:1px solid #edf2f7;background:#fff;transition:background .4s,border-color .4s}
.row.matched{background:var(--success-bg);border-color:var(--success-border)}
.row.new{animation:rowIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes rowIn{from{opacity:0;transform:translateY(-8px)}}
.row .who{display:flex;align-items:center;gap:.65rem;min-width:0}
.avatar{width:36px;height:36px;border-radius:var(--r-md);display:grid;place-items:center;font-size:12px;font-weight:800;flex-shrink:0}
.row .name{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .meta{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .amt{text-align:right;flex-shrink:0}
.row .amt b{display:block;font-size:13px;font-weight:800;color:var(--navy)}
.row.matched .amt b{color:var(--success)}
.row .amt span{font-size:11px;font-weight:700;color:var(--text-3);display:inline-flex;align-items:center;gap:.3rem}
.row.matched .amt span{color:var(--success)}
.row .status-dot{width:6px;height:6px;border-radius:50%;background:var(--warning)}
.row.matched .status-dot{background:var(--success)}
.toast{position:absolute;left:1rem;right:1rem;bottom:0;background:#fff;border:1px solid var(--success-border);border-left:4px solid var(--success);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:.8rem 1rem;display:flex;gap:.75rem;align-items:flex-start}
@media (min-width:480px){.toast{left:auto;right:-.5rem;max-width:370px}}
.toast.pop{animation:toastPop .6s cubic-bezier(.28,.84,.42,1)}
@keyframes toastPop{0%{opacity:0;transform:translateY(14px) scale(.96)}60%{opacity:1;transform:translateY(-4px) scale(1.01)}100%{transform:none}}
.toast .ic{width:38px;height:38px;border-radius:50%;background:var(--success-bg);color:var(--success);display:grid;place-items:center;border:1px solid var(--success-border)}
.toast .ic .ms{font-size:20px}
.toast .t1{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:14px;font-weight:800;color:var(--success)}
.toast .t1 small{font-size:11px;font-weight:700;color:var(--success);background:var(--success-bg);padding:.1rem .5rem;border-radius:9999px;white-space:nowrap}
.toast p{font-size:12px;line-height:18px;color:var(--text-2);margin-top:.15rem}
.toast p strong{color:var(--navy)}
/* ===== Integrations strip ===== */
.integrations{padding:2.25rem 0 2.5rem;border-bottom:1px solid var(--border);background:#fff}
.integrations .container{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.integrations p{font-size:13px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.logos{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem 1rem;width:100%;max-width:1100px;align-items:center;justify-items:center}
@media (min-width:1024px){.logos{grid-template-columns:repeat(8,auto);justify-content:space-between;gap:2rem}}
.logos img{display:block;height:var(--h,26px);width:auto;max-width:100%;object-fit:contain;transition:transform .2s}
.logos img:hover{transform:scale(1.06)}
@media (max-width:1023px){.logos img{height:calc(var(--h,26px) * .8)}}
/* ===== Pain points ===== */
.pain-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
@media (max-width:899px){.pain.card-featured{grid-column:1 / -1}}
@media (min-width:900px){.pain-grid{grid-template-columns:repeat(3,1fr)}}
.pain{padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;position:relative}
.pain h3{font-size:17px;font-weight:700;color:var(--navy);margin-top:1rem;line-height:24px}
.pain p{font-size:14px;line-height:22px;color:var(--text-2);margin-top:.5rem}
.pain footer{padding-top:1rem;border-top:1px solid #f1f5f9}
.pain.card-featured{background:linear-gradient(180deg,var(--orange-surface),#fff 70%)}
.pain.card-featured footer{border-top-color:#fed7aa}
/* Mobile: 2 cards per row, compact */
@media (max-width:639px){
.pain-grid{gap:.75rem}
.pain{padding:1rem;gap:.85rem;min-width:0}
.pain .icon-box{width:40px;height:40px}
.pain .icon-box .ms{font-size:22px}
.pain h3{font-size:15px;line-height:21px;margin-top:.75rem}
.pain p{font-size:12.5px;line-height:19px;margin-top:.35rem}
.pain footer{padding-top:.75rem}
.pain footer .pill{white-space:normal;font-size:11px;padding:.2rem .55rem;line-height:15px}
.pain footer .pill .ms{font-size:13px}
.pain.card-featured{margin-top:.5rem}
.pain.card-featured h3{font-size:16px}
.pain.card-featured p{font-size:13.5px;line-height:20px}
}
.float-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:.2rem .8rem;border-radius:9999px;background:var(--orange);color:#fff;box-shadow:0 4px 10px -2px rgba(255,116,39,.4);white-space:nowrap}
@media (min-width:1200px){.pain.card-featured{transform:translateY(-8px)}.pain.card-featured:hover{transform:translateY(-12px)}}
.answer{margin-top:3rem;border-radius:var(--r-xl);background:var(--navy);color:#fff;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start;position:relative;overflow:hidden}
.answer::before{content:"";position:absolute;right:-80px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(255,116,39,.25),transparent 65%);pointer-events:none}
@media (min-width:900px){.answer{flex-direction:row;align-items:center;justify-content:space-between;padding:2.5rem 3rem}}
.answer .eyebrow{display:inline-flex;align-items:center;gap:.4rem}
.answer h3{font-size:24px;line-height:32px;font-weight:700;margin-top:.5rem;letter-spacing:-.01em}
@media (min-width:768px){.answer h3{font-size:28px;line-height:36px}}
.answer p{color:#cbd5e1;margin-top:.35rem}
.answer > *{position:relative}
/* ===== Flow steps ===== */
.steps{display:grid;gap:1.25rem;position:relative}
@media (min-width:768px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){
.steps{grid-template-columns:repeat(4,1fr);gap:1.5rem}
.steps::before{content:"";position:absolute;top:52px;left:12%;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--border-strong) 0 8px,transparent 8px 16px);z-index:0}
}
.step{padding:1.75rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.25rem;position:relative;z-index:1}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-num{width:44px;height:44px;border-radius:var(--r-md);background:var(--navy);color:#fff;font-weight:800;font-size:18px;display:grid;place-items:center;transition:background .25s,color .25s}
.step:hover .step-num{background:var(--orange);color:#fff}
.step-top .ms{font-size:32px;color:var(--orange-hover)}
.step h3{font-size:18px;font-weight:700;color:var(--navy);margin-top:1rem;line-height:26px}
.step p{font-size:14px;line-height:22px;color:var(--text-2);margin-top:.5rem}
.step footer{padding-top:1rem;border-top:1px solid #f1f5f9;font-size:13px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:.35rem}
.step.card-featured .step-num{background:var(--orange);color:#fff}
.step.card-featured footer{color:var(--success)}
.step .float-badge{left:auto;right:1.5rem;transform:none}
/* Mobile: swipeable single-row carousel, auto-advancing */
@media (max-width:767px){
.steps{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:1.25rem var(--gutter) .75rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.steps::-webkit-scrollbar{display:none}
.step{flex:0 0 82%;scroll-snap-align:center;padding:1.5rem;cursor:pointer}
.steps > .step{transition:opacity .3s,transform .3s,border-color .25s,box-shadow .25s}
.steps > .step:not(.is-active){opacity:.6;transform:scale(.96)}
.steps > .step.is-active{border-color:var(--orange);box-shadow:var(--sh-2)}
}
/* ===== Features bento ===== */
.bento{display:grid;gap:1.25rem}
@media (min-width:768px){.bento{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.bento{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.feat{padding:1.75rem;display:flex;flex-direction:column;gap:1rem;background:var(--canvas)}
.feat-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.feat h3{font-size:18px;font-weight:700;color:var(--navy);line-height:26px}
.feat p{font-size:14px;line-height:22px;color:var(--text-2)}
.ticks{display:grid;gap:.6rem;font-size:14px;line-height:21px;color:var(--text-2)}
.ticks li{display:flex;gap:.6rem;align-items:flex-start}
.ticks .ms{font-size:18px;color:var(--orange-hover);margin-top:1px}
.feat-wide{background:linear-gradient(135deg,#fff 0%,#eef4ff 55%,var(--success-bg) 100%)}
@media (min-width:768px){.feat-wide{grid-column:span 2}}
.feat-wide-inner{display:grid;gap:1.5rem;align-items:center}
@media (min-width:900px){.feat-wide-inner{grid-template-columns:7fr 5fr}}
.feat-wide h3{font-size:20px;line-height:28px}
.mini{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;box-shadow:var(--sh-1);display:grid;gap:.75rem}
.mini-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;padding-bottom:.6rem;border-bottom:1px solid #f1f5f9}
.mini-head span:last-child{display:inline-flex;align-items:center;gap:.4rem;color:var(--success)}
.qr-box{display:flex;gap:.85rem;align-items:center}
.qr{width:76px;height:76px;flex-shrink:0;border-radius:var(--r);border:1px solid var(--border);padding:6px;background:#fff}
.mini .row{padding:.75rem 1rem;border-radius:var(--r)}
.mini .row .name,.mini .row .meta{white-space:normal;overflow:visible;text-overflow:clip}
.feat > .mini,.feat > .funnel{margin-top:auto}
.funnel{display:grid;gap:.6rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:.85rem;box-shadow:var(--sh-1)}
.funnel-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:13px;font-weight:700;color:var(--navy);padding:.6rem .8rem;border-radius:var(--r-sm);background:#eef2f7;overflow:hidden}
.funnel-row i{position:absolute;inset:0;z-index:0;background:#fed7aa;border-radius:var(--r-sm)}
.funnel-row span,.funnel-row b{position:relative;z-index:1}
.funnel-row span{color:var(--navy);font-weight:600}
.funnel-row b{color:var(--orange-hover);font-size:15px}
.feat-featured{background:linear-gradient(160deg,var(--orange-surface),#fff 55%)}
.feat-featured .ticks .ms{color:var(--orange-hover)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;padding-top:1rem;border-top:1px solid var(--border);margin-top:auto}
.chips span{font-size:12px;font-weight:700;color:var(--text-2);background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:.15rem .55rem}
.prompt{margin-top:auto;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem;display:grid;gap:.5rem}
.prompt small{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-4)}
.prompt .q{font-size:13px;font-weight:600;color:var(--navy);background:#eef4ff;border:1px solid #d5e3fc;border-radius:var(--r);padding:.5rem .65rem;font-style:italic}
.prompt .a{font-size:12.5px;color:var(--text-2);display:flex;gap:.4rem;align-items:flex-start}
.prompt .a .ms{font-size:16px;color:var(--orange-hover)}
.domain{margin-top:auto;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:.75rem;display:flex;align-items:center;gap:.5rem;font-size:13px;font-weight:700;color:var(--navy);overflow:hidden}
.domain .ms{font-size:16px;color:var(--success)}
.domain span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.domain span b{color:var(--orange-hover)}
.domain i{font-style:normal}
/* Mobile: swipeable single-row carousel */
@media (max-width:767px){
.bento{display:flex;grid-template-columns:none;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter) .25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.bento::-webkit-scrollbar{display:none}
.bento.is-pinned{overflow-x:hidden;scroll-snap-type:none}
.feat{flex:0 0 78%;scroll-snap-align:center;cursor:pointer}
.feat-wide,.feat-featured{flex:0 0 88%}
.feat-wide{order:-1}
.feat{padding:1rem;gap:.65rem;min-width:0}
.bento > .feat{transition:opacity .3s,transform .3s,border-color .25s,box-shadow .25s}
.bento > .feat:not(.is-active){opacity:.6;transform:scale(.96)}
.bento > .feat.is-active{border-color:var(--orange);box-shadow:var(--sh-2)}
.feat:not(.feat-wide):not(.feat-featured) .feat-top .pill{display:none}
.feat .icon-box{width:40px;height:40px}
.feat .icon-box .ms{font-size:22px}
.feat h3{font-size:15px;line-height:21px}
.feat p{font-size:12.5px;line-height:19px}
.ticks{gap:.45rem;font-size:12.5px;line-height:18px}
.ticks li{gap:.4rem}
.ticks .ms{font-size:15px}
.feat-wide h3{font-size:18px;line-height:25px}
.feat-wide .ticks,.feat-featured .ticks{font-size:13.5px;line-height:20px}
.chips{gap:.3rem;padding-top:.65rem}
.chips span{font-size:11px;padding:.1rem .4rem}
.prompt{padding:.55rem}
.prompt .q{font-size:12px;padding:.4rem .5rem}
.prompt .a{display:none}
.domain{padding:.5rem;font-size:11px;gap:.3rem}
.domain .ms{font-size:14px}
.domain .url-x{display:none}
.domain span{white-space:normal;overflow-wrap:anywhere}
}
/* ===== White-label ===== */
.wl{position:relative;overflow:hidden}
.wl::before{content:"";position:absolute;left:-200px;bottom:-260px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(27,58,107,.9),transparent 70%);pointer-events:none}
.wl-grid{display:grid;gap:3rem;align-items:center;position:relative}
@media (min-width:1024px){.wl-grid{grid-template-columns:7fr 5fr;gap:4rem}}
.wl-copy{display:grid;gap:1.25rem}
.pill-glass{justify-self:start;display:inline-flex;align-items:center;gap:.45rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--orange);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .9rem;border-radius:9999px}
.pill-glass .ms{flex-shrink:0}
.wl-points{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;font-size:15px;font-weight:600;color:#e2e8f0;padding-top:.5rem}
.wl-points span{display:inline-flex;align-items:center;gap:.45rem}
.wl-points .ms{color:var(--orange)}
.wl-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-xl);padding:1.25rem;box-shadow:0 30px 60px -20px rgba(0,0,0,.4)}
@media (min-width:480px){.wl-card{padding:1.5rem}}
.browser-bar{display:flex;align-items:center;gap:.6rem;background:rgba(255,255,255,.08);border-radius:var(--r);padding:.5rem .75rem;font-size:12.5px;color:#cbd5e1;margin-bottom:1rem;overflow:hidden}
.browser-bar .ms{font-size:15px;color:#86efac}
.browser-bar b{color:#fff;font-weight:700}
.pay{background:#fff;color:var(--text);border-radius:var(--r-lg);padding:1.25rem;display:grid;gap:1rem}
.pay-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.pay-brand{display:flex;align-items:center;gap:.6rem;font-size:14px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.pay-brand i{width:32px;height:32px;border-radius:var(--r);background:#7c3aed;color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
.pay-total{background:var(--navy-surface);border-radius:var(--r-md);text-align:center;padding:.85rem}
.pay-total small{font-size:12px;color:var(--text-3)}
.pay-total strong{display:block;font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.pay-qr{display:flex;gap:1rem;align-items:center}
.pay-qr .qr{width:112px;height:112px}
.pay-info{display:grid;gap:.4rem;font-size:12.5px;color:var(--text-2)}
.pay-info b{color:var(--navy)}
.pay-note{font-size:12px;color:var(--text-3);text-align:center;display:flex;align-items:center;justify-content:center;gap:.35rem}
.pay-note .ms{font-size:15px;color:var(--success)}
/* ===== Pricing ===== */
.toggle{display:inline-flex;padding:4px;border-radius:var(--r-md);background:#f1f5f9;border:1px solid var(--border);margin-top:1rem;justify-self:center}
.toggle button{border:0;background:transparent;padding:.55rem 1rem;border-radius:var(--r);font-size:14px;font-weight:700;color:var(--text-2);display:inline-flex;align-items:center;gap:.35rem;transition:background .2s,color .2s,box-shadow .2s}
@media (min-width:480px){.toggle button{padding:.6rem 1.25rem}}
.toggle button[aria-pressed="true"]{background:#fff;color:var(--navy);box-shadow:var(--sh-1)}
.toggle .save{font-size:11px;font-weight:800;color:var(--success)}
.plans{display:grid;gap:1.5rem;align-items:stretch}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan{padding:2rem;display:flex;flex-direction:column;gap:1.5rem;border-radius:var(--r-lg);position:relative}
.plan h3{font-size:24px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.plan .desc{font-size:14px;color:var(--text-3);margin-top:.25rem;min-height:44px}
.price{padding:1rem 0;border-top:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9}
.price .amount{font-size:34px;line-height:42px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.price .amount small{font-size:15px;font-weight:600;color:var(--text-3);letter-spacing:0}
.price .sub{font-size:13px;color:var(--text-3);font-weight:500;margin-top:.15rem;min-height:20px}
.price .sub s{color:var(--text-4)}
.price .sub .save-tag{color:var(--success);font-weight:700}
.limits{display:grid;gap:.75rem;font-size:14px;color:#334155}
.limits > p{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--text-4)}
.limits li{display:flex;gap:.65rem;align-items:flex-start}
.limits .ms{font-size:18px;color:var(--success);margin-top:1px}
.limits li.off{color:var(--text-4)}
.limits li.off .ms{color:var(--text-4)}
.limits li.hl{font-weight:700;color:var(--success)}
.limits li.hl .ms{color:var(--success)}
.plan footer{margin-top:auto;padding-top:1.25rem;border-top:1px solid #f1f5f9;font-size:13px;font-weight:600;color:var(--text-3)}
.plans > .plan{cursor:pointer;border-width:2px;transition:border-color .25s,box-shadow .25s,transform .3s,opacity .3s}
.plans > .plan:hover{border-color:#fdba74}
.plans > .plan.is-active{border-color:var(--orange);box-shadow:var(--sh-2)}
.plan.is-active footer{color:var(--success);font-weight:700}
@media (min-width:900px){.plans > .plan.is-active{transform:translateY(-8px)}}
.plan .float-badge{font-size:12px;padding:.3rem 1rem}
/* Mobile: swipeable plans, active card centered */
.plan-dots{display:none}
@media (max-width:899px){
.plans{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--gutter));padding:1.25rem var(--gutter) .75rem;scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;overscroll-behavior-x:contain}
.plans::-webkit-scrollbar{display:none}
.plan{flex:0 0 min(84%,380px);scroll-snap-align:center;padding:1.5rem}
.plans > .plan:not(.is-active){opacity:.55;transform:scale(.96)}
.plans > .plan{transition:opacity .3s,transform .3s}
.plan-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem}
.plan-dots button{border:0;padding:0;height:8px;width:8px;border-radius:9999px;background:var(--border-strong);transition:width .25s,background .25s}
.plan-dots button[aria-current="true"]{width:24px;background:var(--orange)}
}
.included{margin-top:2rem;padding:1.5rem;border-radius:var(--r-lg);background:#fff;border:1px solid var(--border);display:flex;flex-direction:column;gap:1rem;font-size:14px;color:var(--text-2)}
@media (min-width:900px){.included{flex-direction:row;align-items:center;justify-content:space-between}}
.included b{color:var(--navy);display:block;margin-bottom:.2rem}
/* ===== Blog ===== */
.blog{display:grid;gap:1.5rem}
@media (min-width:1024px){.blog{grid-template-columns:7fr 5fr}}
.post-main{padding:2rem;display:flex;flex-direction:column;gap:1.5rem;background:var(--canvas)}
@media (min-width:640px){.post-main{padding:2.5rem}}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.post-meta .time{font-size:12px;font-weight:600;color:var(--text-3);display:inline-flex;align-items:center;gap:.3rem}
.post-meta .time .ms{font-size:15px}
.post-main h3{font-size:24px;line-height:32px;font-weight:800;color:var(--navy);letter-spacing:-.01em;transition:color .2s}
@media (min-width:640px){.post-main h3{font-size:28px;line-height:36px}}
.post-main:hover h3{color:var(--orange-hover)}
.flow3{display:grid;gap:.75rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem}
@media (min-width:560px){.flow3{grid-template-columns:repeat(3,1fr)}}
.flow3 div{border-radius:var(--r-md);padding:.85rem;text-align:center;display:grid;gap:.25rem;justify-items:center}
.flow3 .ms{font-size:20px}
.flow3 b{font-size:13px}
.flow3 small{font-size:11.5px;color:var(--text-3)}
.post-foot{display:flex;flex-direction:column;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--border);margin-top:auto}
@media (min-width:640px){.post-foot{flex-direction:row;align-items:center;justify-content:space-between}}
.author{display:flex;align-items:center;gap:.65rem}
.author i{width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:12px}
.author b{display:block;font-size:13px;color:var(--navy)}
.author small{font-size:12px;color:var(--text-3)}
.author .author-img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author b a{color:inherit}
.author b a:hover{color:var(--orange-hover)}
.post-side{display:grid;gap:1rem;align-content:start}
.post{padding:1.25rem 1.5rem;display:grid;gap:.85rem;background:var(--canvas)}
.post .body{display:flex;gap:1rem;align-items:flex-start}
.post h4{font-size:15.5px;font-weight:700;line-height:22px;color:var(--navy);transition:color .2s}
.post:hover h4{color:var(--orange-hover)}
.post p{font-size:13px;line-height:20px;color:var(--text-2);margin-top:.35rem}
.post .more{font-size:13px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:.25rem;padding-top:.75rem;border-top:1px solid var(--border)}
.post .more .ms{font-size:16px;transition:transform .2s}
.post:hover .more .ms{transform:translateX(4px)}
.lead-magnet{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;border-radius:var(--r-lg);border:1px dashed #fdba74;background:var(--orange-surface)}
.lead-magnet .l{display:flex;align-items:center;gap:.85rem}
.lead-magnet small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#9a3412}
.lead-magnet b{display:block;font-size:14px;color:var(--navy);line-height:20px}
.dl{width:40px;height:40px;border-radius:var(--r);background:var(--navy);color:#fff;display:grid;place-items:center;flex-shrink:0;transition:background .2s,color .2s}
.dl:hover{background:var(--orange);color:#fff}
/* ===== FAQ ===== */
.faq{max-width:860px;margin:0 auto;display:grid;gap:.75rem}
.faq details{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);transition:border-color .2s,background .2s}
.faq details:hover{border-color:#fdba74}
.faq details[open]{background:#fff;border-color:var(--border-strong);box-shadow:var(--sh-1)}
.faq summary{list-style:none;cursor:pointer;padding:1.15rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:16px;font-weight:700;color:var(--navy);line-height:24px}
@media (min-width:640px){.faq summary{padding:1.35rem 1.5rem}}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ms{transition:transform .25s;color:var(--text-3)}
.faq details[open] summary .ms{transform:rotate(180deg);color:var(--orange-hover)}
.faq .ans{padding:0 1.25rem 1.25rem;font-size:15px;line-height:24px;color:var(--text-2)}
@media (min-width:640px){.faq .ans{padding:0 1.5rem 1.5rem}}
.faq .ans strong{color:var(--navy)}
.faq-more{text-align:center;margin-top:2rem;font-size:15px;color:var(--text-2)}
.faq-more a{color:var(--navy);font-weight:700;border-bottom:2px solid var(--orange)}
/* ===== Final CTA ===== */
.final{text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:640px;height:440px;border-radius:50%;background:radial-gradient(circle,rgba(255,116,39,.22),transparent 65%);pointer-events:none}
.final .container{position:relative;display:grid;gap:1.5rem;justify-items:center;max-width:860px}
.final .checks{justify-content:center;color:#cbd5e1}
.final .checks .ms{color:#4ade80}
/* ===== Footer ===== */
.footer{background:var(--navy-surface);border-top:1px solid var(--border);padding:4rem 0 2rem;color:var(--text-2);font-size:14px}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 1.25rem}
.footer-grid > :first-child{grid-column:1 / -1}
@media (min-width:768px){.footer-grid > :first-child{grid-column:auto}}
@media (min-width:768px){.footer-grid{grid-template-columns:5fr 3fr 4fr}}
.footer h4{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);margin-bottom:1rem}
.footer ul{display:grid;gap:.2rem}
.footer ul a{display:inline-block;padding:.3rem 0}
.footer a:hover{color:var(--orange-hover)}
.footer .about{max-width:400px;line-height:22px;margin-top:1rem}
.footer .ok{display:inline-flex;align-items:center;gap:.5rem;font-size:12.5px;font-weight:700;color:var(--success);margin-top:1rem}
.footer-bottom{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:.5rem;font-size:12.5px;color:var(--text-3)}
@media (min-width:768px){.footer-bottom{flex-direction:row;justify-content:space-between}}
/* ===== Sticky mobile CTA ===== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:.75rem var(--gutter) calc(.75rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);box-shadow:0 -8px 24px -12px rgba(13,40,84,.2);transform:translateY(110%);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.sticky-cta.show{transform:none}
@media (min-width:768px){.sticky-cta{display:none}}
/* ===== Reveal ===== */
/* Hidden only when JS can reveal them; without JS content stays visible */
@media (scripting:enabled){
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
.reveal{opacity:1;transform:none}
}
/* ===== Small component helpers ===== */
.light-red{background:#f87171}
.light-amber{background:#fbbf24}
.light-green{background:#34d399}
.av-green{background:#dcfce7;color:#15803d}
.av-indigo{background:#e0e7ff;color:#3730a3}
.av-orange{background:#ffedd5;color:#c2410c}
.av-pink{background:#fce7f3;color:#9d174d}
.av-sky{background:#e0f2fe;color:#075985}
.icon-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
.bg-success-soft{background:var(--success-bg)}
.bg-orange-soft{background:var(--orange-surface)}
.bg-navy-soft{background:#eef4ff}
.feat-head{display:flex;gap:.85rem;align-items:center}
.qr-meta{display:grid;gap:.2rem;font-size:12px;color:var(--text-2)}
.post-lead{font-size:15px;line-height:24px;margin-top:.75rem}
.footer-addr{font-size:13px;color:var(--text-3);padding-top:.25rem}
.logo-h24{--h:24px}.logo-h26{--h:26px}.logo-h30{--h:30px}.logo-h32{--h:32px}.logo-h34{--h:34px}
/* ===== Utilities ===== */
.u-navy{color:var(--navy)!important}
.u-success{color:var(--success)!important}
.u-orange{color:var(--orange-hover)!important}
.u-orange-dark{color:#9a3412!important}
.u-normal{font-style:normal}
.u-fs16{font-size:16px!important}
.u-fs18{font-size:18px!important}
.u-fs28{font-size:28px!important}
.u-min0{min-width:0}
.u-nowrap{white-space:nowrap}
.u-flex1{flex:1}
.u-mw640{max-width:640px}
.u-mt025{margin-top:.25rem}
.u-mt035{margin-top:.35rem}
.u-jstart{justify-self:start}
.u-astart{align-self:flex-start}
.u-stack{display:grid;gap:1rem}
.u-pills{display:flex;gap:.5rem;flex-wrap:wrap}
/* ===== Brand logo image ===== */
.logo-img{height:32px;width:auto}
@media (min-width:480px){.logo-img{height:36px}}
@media (min-width:768px){.logo-img{height:44px}}
.footer .logo-img{height:40px}
/* ===== Shared additions ===== */
.nav a[aria-current="page"]{color:var(--navy)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.mobile-nav a[aria-current="page"]{color:var(--orange-hover)}
.h-md{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.015em;color:var(--navy)}
@media (min-width:768px){.h-md{font-size:28px;line-height:36px}}
.btn-glass{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}
.btn-glass:hover{background:rgba(255,255,255,.18)}
.see-all{text-align:center;margin-top:2.5rem}
.final-actions{display:flex;flex-direction:column;gap:.75rem;width:100%;max-width:420px}
@media (min-width:560px){.final-actions{flex-direction:row;justify-content:center;max-width:none}}
@media (max-width:559px){
.final-actions{flex-direction:row;justify-content:center;gap:.5rem;max-width:none}
.final-actions .btn-lg{flex:1 1 0;min-width:0;width:auto;padding:.65rem .6rem;font-size:12.5px;line-height:17px;white-space:normal;text-align:center}
.final-actions .btn-lg .ms{display:none}
}
/* ===== Blog: hero + search ===== */
.blog-hero{padding:calc(var(--header-h) + 3rem) 0 2.5rem;background:radial-gradient(900px 420px at 100% 0%,var(--orange-surface) 0%,transparent 60%),radial-gradient(800px 400px at 0% 100%,#e6eeff 0%,transparent 60%),var(--canvas);border-bottom:1px solid var(--border)}
@media (min-width:1024px){.blog-hero{padding:calc(var(--header-h) + 4.5rem) 0 3rem}}
.blog-hero-copy{max-width:780px;margin:0 auto;text-align:center;display:grid;gap:1rem;justify-items:center}
.blog-hero-copy .hero-badge{justify-self:center}
.search{max-width:680px;margin:2rem auto 0;display:flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--border-strong);border-radius:var(--r-md);padding:.4rem .4rem .4rem .85rem;box-shadow:var(--sh-2);transition:box-shadow .2s,border-color .2s}
.search:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,40,84,.12),var(--sh-2)}
.search > .ms{color:var(--field-hint);font-size:22px}
.search > .search-ic{color:var(--field-hint);flex-shrink:0}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--text);padding:.5rem .25rem}
.search input::placeholder{color:var(--field-hint)}
.search input::-webkit-search-cancel-button{cursor:pointer}
.search .btn{padding:.6rem 1.1rem;width:auto;flex:0 0 auto}
@media (max-width:479px){.search .btn{padding:.6rem .8rem;font-size:14px}}
.keywords{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:.4rem;margin-top:.9rem;font-size:13px;color:var(--text-3)}
.keywords span{font-weight:600;flex-shrink:0;padding-top:.3rem}
.keywords-list{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.keywords a,.keywords button{display:inline-flex;align-items:center;flex-shrink:0;white-space:nowrap;border:1px solid var(--border);background:#fff;color:var(--navy);font-size:13px;font-weight:600;padding:.25rem .65rem;border-radius:9999px;transition:border-color .2s,background .2s}
.keywords a:hover,.keywords button:hover{border-color:var(--orange);background:var(--orange-surface)}
.cat-tabs{display:flex;gap:.5rem;margin:2.25rem calc(-1 * var(--gutter)) 0;padding:0 var(--gutter) .25rem;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cat-tabs::-webkit-scrollbar{display:none}
@media (min-width:1024px){.cat-tabs{justify-content:center;flex-wrap:wrap;margin-left:0;margin-right:0;padding:0}}
.cat-tabs a,.cat-tabs button{display:inline-flex;align-items:center;flex-shrink:0;border:1px solid var(--border);background:#fff;color:var(--text-2);font-size:14px;font-weight:700;padding:.55rem 1rem;border-radius:9999px;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.cat-tabs a:hover,.cat-tabs button:hover{color:var(--navy);border-color:var(--border-strong)}
.cat-tabs a[aria-pressed="true"],.cat-tabs button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
/* ===== Blog: featured post ===== */
.blog-featured{padding:2.5rem 0 0}
@media (min-width:1024px){.blog-featured{padding-top:3.5rem}}
.feature-post{display:grid;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2)}
@media (min-width:1024px){.feature-post{grid-template-columns:5fr 7fr}}
.fp-visual{background:var(--navy);color:#fff;padding:1.75rem;display:flex;flex-direction:column;gap:1.5rem;position:relative;overflow:hidden}
@media (min-width:640px){.fp-visual{padding:2.5rem}}
.fp-visual::before{content:"";position:absolute;right:-90px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,116,39,.28),transparent 65%);pointer-events:none}
.fp-visual > *{position:relative}
.fp-top{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.fp-time{display:inline-flex;align-items:center;gap:.3rem;font-size:13px;color:#cbd5e1}
.fp-time .ms{font-size:16px}
.fp-flow{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.fp-flow li{display:flex;align-items:center;gap:.8rem;padding:.8rem .9rem;border-radius:var(--r-md);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.fp-flow li.ok{background:rgba(22,163,74,.18);border-color:rgba(74,222,128,.35)}
.fp-flow li > div{flex:1;min-width:0}
.fp-flow b{display:block;font-size:14px;line-height:20px}
.fp-flow small{display:block;font-size:12.5px;color:#cbd5e1}
.fp-ic{width:38px;height:38px;border-radius:var(--r);display:grid;place-items:center;flex-shrink:0;font-style:normal}
.fp-ic .ms{font-size:21px}
.fp-ic-white{background:#fff;color:var(--navy)}
.fp-ic-orange{background:var(--orange);color:#fff}
.fp-ic-green{background:var(--success);color:#fff}
.fp-arrow{color:var(--orange);font-size:18px}
.fp-tag{font-size:11px;font-weight:800;background:var(--success);color:#fff;padding:.15rem .5rem;border-radius:9999px;white-space:nowrap}
.fp-note{display:flex;align-items:center;gap:.45rem;font-size:13px;color:#cbd5e1;margin-top:auto}
.fp-note .ms{color:#4ade80;font-size:18px}
.fp-body{padding:1.75rem;display:flex;flex-direction:column;gap:1rem}
@media (min-width:640px){.fp-body{padding:2.5rem}}
.fp-meta{display:flex;align-items:center;gap:.75rem;font-size:13px;color:var(--text-3)}
.fp-body h2{font-size:22px;line-height:30px;font-weight:800;letter-spacing:-.015em;color:var(--navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:768px){.fp-body h2{font-size:28px;line-height:36px}}
.fp-body h2 a{transition:color .2s}
.fp-body h2 a:hover{color:var(--orange-hover)}
.fp-body > p,.fp-body .fp-desc{font-size:15px;line-height:24px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fp-body .fp-desc > *{margin:0}
.fp-stats{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.fp-stats div{background:var(--navy-surface);border:1px solid #edf2f7;border-radius:var(--r-md);padding:.8rem .9rem}
.fp-stats b{display:block;font-size:16px;color:var(--navy)}
.fp-stats small{display:block;font-size:12.5px;line-height:18px;color:var(--text-3);margin-top:.15rem}
.fp-foot{display:flex;flex-direction:column;gap:1rem;padding-top:1.25rem;border-top:1px solid var(--border);margin-top:auto}
@media (min-width:640px){.fp-foot{flex-direction:row;align-items:center;justify-content:space-between}}
/* ===== Blog: post grid ===== */
.list-head{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;margin-bottom:2rem}
@media (min-width:768px){.list-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:1.5rem}}
.list-head p{color:var(--text-2);margin-top:.25rem}
.list-count{font-size:13px;font-weight:700;color:var(--text-3);background:var(--navy-surface);border:1px solid var(--border);border-radius:9999px;padding:.3rem .8rem;align-self:flex-start}
@media (min-width:768px){.list-count{align-self:auto}}
.post-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:1024px){.post-grid{grid-template-columns:repeat(3,1fr);gap:1.75rem}}
.bpost{display:flex;flex-direction:column;overflow:hidden;padding:0}
.bpost[hidden]{display:none}
.bthumb{position:relative;aspect-ratio:3/2;display:grid;place-items:center;overflow:hidden}
.bthumb::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.35) 1px,transparent 1.2px);background-size:14px 14px;opacity:.6}
.bthumb > .ms{position:relative;font-size:44px;width:84px;height:84px;display:grid;place-items:center;border-radius:var(--r-lg);background:rgba(255,255,255,.95);box-shadow:var(--sh-2);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.bpost:hover .bthumb > .ms{transform:scale(1.08) rotate(-4deg)}
.t-invoice{background:linear-gradient(135deg,#1b3a6b,#0d2854)}.t-invoice > .ms{color:var(--navy)}
.t-debt{background:linear-gradient(135deg,#ffb27a,#ff7427)}.t-debt > .ms{color:var(--orange-hover)}
.t-bank{background:linear-gradient(135deg,#22d3ee,#0e7490)}.t-bank > .ms{color:var(--cyan)}
.t-sme{background:linear-gradient(135deg,#a5b4fc,#4f46e5)}.t-sme > .ms{color:#4338ca}
.t-brand{background:linear-gradient(135deg,#86efac,#16a34a)}.t-brand > .ms{color:var(--success)}
.t-ai{background:linear-gradient(135deg,#fde68a,#f59e0b)}.t-ai > .ms{color:#b45309}
.btag{position:absolute;top:.75rem;left:.75rem;font-size:11.5px;font-weight:800;padding:.25rem .6rem;border-radius:9999px;background:var(--navy);color:#fff}
.btag-orange{background:var(--orange);color:#fff}
.btag-orange-soft{background:#fff;color:#9a3412}
.bread{position:absolute;right:.75rem;bottom:.75rem;font-size:11.5px;font-weight:700;padding:.15rem .55rem;border-radius:9999px;background:rgba(255,255,255,.92);color:var(--navy)}
.bbody{padding:1.25rem 1.35rem 1.35rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.bbody time{font-size:12.5px;font-weight:600;color:var(--text-4)}
.bbody h3{font-size:17px;line-height:24px;font-weight:700;color:var(--navy);transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bpost:hover .bbody h3{color:var(--orange-hover)}
.bbody p,.bbody .bdesc{font-size:14px;line-height:22px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bbody .bdesc > *{margin:0}
.bbody .more{margin-top:auto;padding-top:.85rem;border-top:1px solid #f1f5f9;font-size:13.5px;font-weight:700;color:var(--navy);display:flex;align-items:center;justify-content:space-between}
.bbody .more .ms{font-size:18px;transition:transform .2s}
.bpost:hover .more .ms{transform:translateX(4px)}
.post-empty{text-align:center;padding:3rem 1rem;border:1px dashed var(--border-strong);border-radius:var(--r-lg);display:grid;gap:.75rem;justify-items:center;color:var(--text-2)}
.post-empty[hidden]{display:none}
/* Từ khóa khớp trong kết quả tìm kiếm */
.keyword{background:var(--orange-surface);color:var(--orange-hover);border-radius:var(--r-sm);padding:0 .15em;font-weight:700}
.post-empty > .ms{font-size:40px;color:var(--text-4)}
.post-empty b{color:var(--navy)}
/* ===== Blog: trang chủ đề / tag / nhóm tin / tác giả ===== */
.hero-badge > .ms{font-size:18px;color:var(--orange-hover)}
.topic-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:var(--sh-2)}
.blog-hero-copy .lead > *{margin:0}
.author-stats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.author-stats li{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:9999px;background:#fff;border:1px solid var(--border);font-size:13.5px;color:var(--text-2)}
.author-stats .ms{font-size:18px;color:var(--orange-hover)}
.author-stats b{color:var(--navy)}
.topic-other{margin-top:2.5rem;padding:1.5rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg)}
.topic-other h3{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:.75rem}
.topic-other ul{list-style:none;margin:0;padding:0;display:grid}
.topic-other li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.65rem 0;border-top:1px solid #f1f5f9}
.topic-other li:first-child{border-top:0}
.topic-other a{font-size:14.5px;font-weight:600;color:var(--text);min-width:0}
.topic-other a:hover{color:var(--orange-hover)}
.topic-other time{font-size:12.5px;color:var(--text-4);flex-shrink:0}
.group-block + .group-block{margin-top:3rem}
.group-block .list-head a{font-size:14px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:.25rem}
.group-block .list-head a:hover{color:var(--orange-hover)}
/* ===== Blog: resource kit ===== */
.kit{display:grid;gap:2rem;align-items:center;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:1.75rem;box-shadow:var(--sh-1)}
@media (min-width:640px){.kit{padding:2.5rem}}
@media (min-width:1024px){.kit{grid-template-columns:7fr 5fr;gap:3rem;padding:3rem}}
.kit-copy{display:grid;gap:1rem;justify-items:start}
.kit-copy > p{color:var(--text-2)}
.kit-list{gap:.6rem;font-size:14.5px}
@media (min-width:640px){.kit-list{grid-template-columns:1fr 1fr}}
.kit-form{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;display:grid;gap:.5rem}
.kit-form h3{font-size:18px;font-weight:700;color:var(--navy)}
.kit-form > p{font-size:13.5px;color:var(--text-2);margin-bottom:.5rem}
.kit-form label{font-size:13px;font-weight:600;color:var(--navy);margin-top:.35rem}
.kit-form label small{font-weight:500;color:var(--text-3)}
.kit-form input{font:inherit;font-size:15px;padding:.7rem .85rem;border:1px solid var(--border-strong);border-radius:var(--r);background:#fff;color:var(--text);outline:0;transition:border-color .2s,box-shadow .2s}
.kit-form input::placeholder{color:var(--field-hint)}
.kit-form input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,40,84,.12)}
.kit-form .btn{margin-top:.75rem}
.kit-note{text-align:center;font-size:12px;color:var(--text-3)}
/* Blog mobile: 2 posts per row, compact */
@media (max-width:639px){
.post-grid{gap:.75rem}
.bpost{min-width:0}
.bthumb{padding-top:14px}
.bthumb::before{background-size:10px 10px}
.bthumb > .ms{font-size:28px;width:52px;height:52px;border-radius:var(--r-md)}
.btag{top:.5rem;left:.5rem;font-size:10px;padding:.15rem .45rem;max-width:calc(100% - 1rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bread{right:.5rem;bottom:.5rem;font-size:10px;padding:.1rem .4rem}
.bbody{padding:.75rem .8rem .85rem;gap:.35rem}
.bbody time{font-size:11px}
.bbody h3{font-size:14px;line-height:19px;-webkit-line-clamp:2}
.bbody p,.bbody .bdesc{font-size:12px;line-height:17px;-webkit-line-clamp:3}
.bbody .more{padding-top:.6rem;font-size:12px}
.bbody .more .ms{font-size:16px}
}
/* Blog: date + views */
.bmeta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.bmeta time{font-size:12.5px;font-weight:600;color:var(--text-4)}
.views,.bauthor{display:inline-flex;align-items:center;gap:.25rem;font-size:12.5px;font-weight:600;color:var(--text-3);white-space:nowrap}
.views .ms,.bauthor .ms{font-size:16px;color:var(--text-4)}
.fp-meta{flex-wrap:wrap}
.fp-meta .views{margin-left:auto}
@media (max-width:639px){
.bmeta{gap:.15rem .5rem}
.bmeta time,.bmeta .views{font-size:11px}
.bmeta .views .ms{font-size:14px}
}
/* ===================================================================
ARTICLE DETAIL PAGE
=================================================================== */
/* Reading progress bar under header */
.read-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent;pointer-events:none}
.read-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--orange-hover));transition:width .1s linear}
/* Hero */
.art-hero{padding:calc(var(--header-h) + 2.5rem) 0 2rem;background:radial-gradient(900px 400px at 85% -10%,#e6eeff 0%,transparent 60%),var(--canvas);border-bottom:1px solid var(--border)}
@media (min-width:1024px){.art-hero{padding:calc(var(--header-h) + 3.5rem) 0 2.5rem}}
.art-hero .container{max-width:1100px}
.crumbs ol{display:flex;flex-wrap:nowrap;align-items:center;gap:.3rem;margin:0;padding:0;list-style:none;font-size:13px;color:var(--text-3);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.crumbs ol::-webkit-scrollbar{display:none}
.crumbs li{display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0;white-space:nowrap}
.crumbs a{display:inline-flex;align-items:center;gap:.3rem;transition:color .2s}
.crumbs a:hover{color:var(--orange-hover)}
.crumbs .ms{font-size:16px}
.crumbs .sep{color:var(--border-strong);font-size:18px}
.crumbs li[aria-current]{color:var(--navy);font-weight:600}
.art-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.art-title{font-size:28px;line-height:36px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:1rem;max-width:900px}
@media (min-width:768px){.art-title{font-size:38px;line-height:48px}}
@media (min-width:1200px){.art-title{font-size:44px;line-height:54px;letter-spacing:-.025em}}
.art-lead{font-size:16px;line-height:26px;color:var(--text-2);margin-top:1rem;max-width:760px}
@media (min-width:768px){.art-lead{font-size:18px;line-height:30px}}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.art-stats{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem;font-size:13px;font-weight:600;color:var(--text-3)}
.art-stats > span{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.art-stats .ms{font-size:16px;color:var(--text-4)}
.share{display:flex;align-items:center;gap:.4rem;margin-left:auto}
.share-label{font-size:13px;font-weight:600;color:var(--text-3)}
.share-btn{width:38px;height:38px;border-radius:var(--r);border:1px solid var(--border);background:#fff;color:var(--navy);display:grid;place-items:center;transition:border-color .2s,background .2s,color .2s}
.share-btn:hover{border-color:var(--orange);background:var(--orange-surface);color:var(--orange-hover)}
.share-btn .ms{font-size:19px}
/* Layout: body + sidebar */
.art-wrap{display:grid;gap:2.5rem;padding-top:2.5rem;padding-bottom:3rem;max-width:1200px}
@media (min-width:1100px){.art-wrap{grid-template-columns:minmax(0,1fr) 340px;gap:3rem;padding-top:3rem;padding-bottom:4.5rem}}
.art-body{min-width:0;display:grid;gap:2.5rem;align-content:start}
@media (max-width:767px){.art-body{gap:1.5rem}}
/* Figure */
.art-figure{margin:0;display:grid;gap:.75rem}
.art-figure img{width:100%;height:auto;border-radius:var(--r-xl);border:1px solid var(--border);display:block}
.art-figure figcaption{font-size:13px;line-height:20px;color:var(--text-3);text-align:center}
/* Table of contents */
.toc{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem 1.5rem}
.toc-head{display:flex;align-items:center;gap:.5rem;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:.85rem}
.toc-head .ms{font-size:18px;color:var(--orange-hover)}
.toc ol{list-style:none;counter-reset:toc;display:grid;gap:.5rem;padding-left:0}
.toc li{counter-increment:toc}
.toc a{display:flex;gap:.6rem;font-size:15px;font-weight:600;color:var(--navy);transition:color .2s}
.toc a::before{content:counter(toc,decimal-leading-zero);color:var(--orange-hover);font-weight:800;flex-shrink:0}
.toc a:hover{color:var(--orange-hover)}
/* Author bio */
.bio{background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;display:grid;gap:.85rem;justify-items:start}
.bio-head{display:flex;align-items:center;gap:.85rem}
.bio-head i{width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;font-style:normal;font-weight:800;font-size:15px;display:grid;place-items:center;flex-shrink:0}
.bio-head h3{font-size:16px;font-weight:700;color:var(--navy)}
.bio-head p{font-size:13px;color:var(--text-3)}
.bio-head .author-img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.bio-head h3 a{color:inherit}
.bio-head h3 a:hover{color:var(--orange-hover)}
.bio > p{font-size:14.5px;line-height:23px;color:var(--text-2)}
.bio .btn{justify-self:center;width:auto}
/* Article footer: tags + share */
.art-foot{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:1rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.art-foot .hashtags{flex:1;min-width:0}
.hashtags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font-size:13.5px}
.hashtags > span{font-weight:700;color:var(--text-3);margin-right:.2rem}
.hashtags a{font-weight:600;color:var(--navy);background:var(--navy-surface);border:1px solid var(--border);border-radius:9999px;padding:.25rem .7rem;transition:border-color .2s,background .2s,color .2s}
.hashtags a:hover{border-color:var(--orange);background:var(--orange-surface);color:var(--orange-hover)}
.art-foot .share{margin-left:auto;gap:.5rem;flex-shrink:0}
/* ===== Sidebar ===== */
.art-side{min-width:0}
.side-sticky{display:grid;gap:1.25rem;align-content:start}
@media (min-width:1100px){.side-sticky{position:sticky;top:calc(var(--header-h) + 20px)}}
.side-cta{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:1.5rem;display:grid;gap:.75rem;justify-items:start;position:relative;overflow:hidden}
.side-cta::before{content:"";position:absolute;right:-70px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,116,39,.3),transparent 65%);pointer-events:none}
.side-cta > *{position:relative}
.side-cta h3{font-size:19px;line-height:27px;font-weight:700;color:#fff}
.side-cta > p{font-size:14px;line-height:22px;color:#cbd5e1}
.side-cta .btn{margin-top:.35rem}
.side-cta-notes{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:12.5px;color:#cbd5e1}
.side-cta-notes span{display:inline-flex;align-items:center;gap:.25rem}
.side-cta-notes .ms{font-size:15px;color:#4ade80}
/* Mobile/tablet: sidebar trải ngang nên nút chỉ cần vừa nội dung */
@media (max-width:1099px){
.side-cta{padding:1.25rem}
.side-cta h3{font-size:17px;line-height:24px}
.side-cta > p{font-size:13px;line-height:20px}
.side-cta .btn-block{width:auto;justify-self:center;padding:.55rem 1rem;font-size:13.5px}
}
.side-toc{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1)}
.side-toc h4{display:flex;align-items:center;gap:.45rem;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:.85rem}
.side-toc h4 .ms{font-size:18px;color:var(--orange-hover)}
.side-toc ul{list-style:none;display:grid;gap:.15rem;padding-left:0}
.side-toc a{display:block;font-size:14px;line-height:21px;font-weight:600;color:var(--text-2);padding:.45rem .65rem;border-left:2px solid var(--border);transition:color .2s,border-color .2s,background .2s}
.side-toc a:hover{color:var(--navy);background:var(--navy-surface)}
.side-toc a.active{color:var(--navy);border-left-color:var(--orange);background:var(--orange-surface)}
/* Mobile: bài viết đã có mục lục inline ở đầu, ẩn mục lục trong sidebar để khỏi lặp */
@media (max-width:1099px){.art-side .side-toc{display:none}}
/* Desktop: ngược lại, dùng mục lục neo ở sidebar nên ẩn mục lục inline */
@media (min-width:1100px){.art-body > .toc{display:none}}
.side-related{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1);display:grid;gap:.85rem}
.side-related-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem}
.side-related-head h4{font-size:15px;font-weight:700;color:var(--navy)}
.side-related-head a{font-size:13px;font-weight:600;color:var(--orange-hover)}
.srp{display:flex;gap:.75rem;align-items:flex-start;padding-top:.85rem;border-top:1px solid #f1f5f9}
.side-related .srp:first-of-type{padding-top:0;border-top:0}
.srp-ic{width:44px;height:44px;border-radius:var(--r-md);display:grid;place-items:center;flex-shrink:0}
.srp-ic .ms{font-size:22px;color:#fff}
.srp h5{font-size:13.5px;line-height:19px;font-weight:700;color:var(--navy);transition:color .2s;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.srp:hover h5{color:var(--orange-hover)}
.srp small{display:block;font-size:12px;color:var(--text-4);margin-top:.25rem}
.side-magnet{background:linear-gradient(160deg,var(--orange-surface),#fff 65%);border:1px dashed #fdba74;border-radius:var(--r-lg);padding:1.25rem;display:grid;gap:.5rem;justify-items:start}
.side-magnet > .ms{font-size:30px;color:var(--orange-hover)}
.side-magnet small{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#9a3412}
.side-magnet h4{font-size:15px;line-height:21px;font-weight:700;color:var(--navy)}
.side-magnet p{font-size:13px;line-height:20px;color:var(--text-2)}
.side-magnet .btn{margin-top:.35rem}
/* Related articles grid at bottom */
.rel-grid{margin-top:0}
/* Copy toast */
.toast-copy{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:1070;display:flex;align-items:center;gap:.5rem;background:var(--navy);color:#fff;font-size:14px;font-weight:600;padding:.7rem 1.1rem;border-radius:9999px;box-shadow:var(--sh-3);animation:toastUp .3s cubic-bezier(.16,1,.3,1)}
.toast-copy[hidden]{display:none}
.toast-copy .ms{font-size:19px;color:#4ade80}
@keyframes toastUp{from{opacity:0;transform:translate(-50%,12px)}}
@media (max-width:767px){.toast-copy{bottom:5.5rem}}
/* Blog list head: compact "see all" link on small screens */
@media (max-width:767px){
.list-head .btn-outline{border:0;padding:0;color:var(--navy);font-size:14px;gap:.3rem}
.list-head .btn-outline:hover{background:transparent;color:var(--orange-hover)}
.list-head .btn-outline .ms{font-size:18px}
}
/* ===================================================================
RICH TEXT CONTENT (.rte)
Ruột bài viết đổ từ CMS. Chỉ dùng thẻ cơ bản, không cần class.
=================================================================== */
.rte{--rte-lh:28px;--rte-marker:1.45rem;font-size:16px;line-height:var(--rte-lh);color:var(--text-2);overflow-wrap:break-word}
@media (min-width:768px){.rte{--rte-lh:30px;font-size:17px}}
.rte > *{margin:0 0 1.25rem}
.rte > *:last-child{margin-bottom:0}
/* Headings */
.rte h2,.rte h3,.rte h4{color:var(--navy);letter-spacing:-.015em}
.rte h2{font-size:19px;line-height:27px;font-weight:800;margin:2rem 0 .85rem;padding-left:.75rem;border-left:4px solid var(--orange);scroll-margin-top:calc(var(--header-h) + 20px)}
@media (min-width:768px){.rte h2{font-size:28px;line-height:38px;margin:2.5rem 0 1rem;padding-left:.9rem;border-left-width:5px}}
.rte h3{font-size:17px;line-height:25px;font-weight:700;margin:1.6rem 0 .6rem;scroll-margin-top:calc(var(--header-h) + 20px)}
@media (min-width:768px){.rte h3{font-size:21px;line-height:30px;margin:2rem 0 .75rem}}
.rte h4{font-size:17px;line-height:26px;font-weight:700;margin:1.5rem 0 .5rem}
.rte > h2:first-child,.rte > h3:first-child{margin-top:0}
/* Inline */
.rte strong,.rte b{color:var(--navy);font-weight:700}
.rte a{color:var(--navy);font-weight:600;border-bottom:2px solid var(--orange);transition:color .2s,border-color .2s}
.rte a:hover{color:var(--orange-hover)}
.rte em,.rte i{font-style:italic}
.rte small{font-size:.85em;color:var(--text-3)}
.rte code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--navy-surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:.1em .4em;color:var(--navy)}
.rte pre{background:var(--navy);color:#e2e8f0;border-radius:var(--r-md);padding:1rem 1.25rem;overflow-x:auto;font-size:14px;line-height:22px}
.rte pre code{background:none;border:0;padding:0;color:inherit}
/* Lists */
.rte ul,.rte ol{list-style:none;padding-left:0;margin-left:0;display:grid;gap:.6rem}
.rte li{position:relative;padding-left:1.9rem}
.rte ul > li::before{content:"";position:absolute;left:calc((var(--rte-marker) - 8px) / 2);top:calc((var(--rte-lh) - 8px) / 2);width:8px;height:8px;border-radius:50%;background:var(--orange)}
.rte ol{counter-reset:rte-ol}
.rte ol > li{counter-increment:rte-ol}
.rte ol > li::before{content:counter(rte-ol);position:absolute;left:0;top:calc((var(--rte-lh) - var(--rte-marker)) / 2);width:var(--rte-marker);height:var(--rte-marker);border-radius:50%;background:var(--navy);color:#fff;font-size:12.5px;font-weight:800;display:grid;place-items:center;line-height:1}
.rte li > ul,.rte li > ol{margin-top:.6rem}
.rte li ul > li::before{background:var(--border-strong);width:6px;height:6px;left:calc((var(--rte-marker) - 6px) / 2);top:calc((var(--rte-lh) - 6px) / 2)}
/* Blockquote = khối ghi chú / tóm tắt */
.rte blockquote{margin:1.75rem 0;background:linear-gradient(160deg,var(--orange-surface),#fff 70%);border:1px solid #fed7aa;border-left:5px solid var(--orange);border-radius:var(--r-lg);padding:1.25rem 1.35rem;font-size:15.5px;line-height:26px}
@media (min-width:768px){.rte blockquote{padding:1.5rem 1.75rem;font-size:16px;line-height:27px}}
.rte blockquote > *{margin:0 0 .85rem}
.rte blockquote > *:last-child{margin-bottom:0}
.rte blockquote ul > li::before{background:var(--orange-hover)}
/* Tables */
.rte table{width:100%;border-collapse:collapse;font-size:15px;line-height:23px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;display:table}
.rte thead th{background:var(--navy-surface);color:var(--navy);font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--border)}
.rte td{padding:.75rem 1rem;border-bottom:1px solid var(--border);vertical-align:top}
.rte tbody tr:last-child td{border-bottom:0}
.rte tbody tr:nth-child(even){background:#fbfcfe}
.rte td + td{border-left:1px solid var(--border)}
.rte thead th + th{border-left:1px solid var(--border)}
@media (max-width:639px){
.rte table{font-size:13.5px;line-height:20px}
.rte thead th,.rte td{padding:.55rem .65rem}
}
/* Chú thích ngay dưới bảng — CMS xuất ra …
, cho cỡ chữ
bằng figcaption và kéo sát bảng thay vì để như một đoạn văn bình thường. */
.rte table + p:has(> em:only-child),
.rte table + p:has(> i:only-child){margin-top:-.75rem;font-size:13.5px;line-height:21px;color:var(--text-3)}
/* Media */
.rte img{max-width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--border)}
.rte figure{margin:1.75rem 0;display:grid;gap:.6rem;justify-items:center}
.rte figcaption{font-size:13.5px;line-height:21px;color:var(--text-3);text-align:center}
.rte iframe,.rte video{max-width:100%;border-radius:var(--r-md);border:0;aspect-ratio:16/9;width:100%;height:auto}
.rte hr{border:0;border-top:1px solid var(--border);margin:2.25rem 0}
/* ===================================================================
SLIDER (vuốt ngang) — dùng được cho bất kỳ danh sách thẻ nào
=================================================================== */
.slider{position:relative}
.slider-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--gutter));padding:.25rem var(--gutter) .5rem}
.slider-track::-webkit-scrollbar{display:none}
.slider-track > *{flex:0 0 86%;scroll-snap-align:center;min-width:0}
@media (min-width:640px){
.slider-track{gap:1.25rem}
.slider-track > *{flex-basis:calc((100% - 1.25rem) / 2);scroll-snap-align:start}
}
@media (min-width:1024px){
.slider-track{gap:1.75rem;margin:0;padding:.25rem 0 .5rem}
.slider-track > *{flex-basis:calc((100% - 3.5rem) / 3)}
}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.5rem}
.slider-nav[hidden]{display:none}
.slider-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--border-strong);background:#fff;color:var(--navy);display:grid;place-items:center;flex-shrink:0;transition:border-color .2s,background .2s,color .2s,opacity .2s}
.slider-btn .ms{font-size:22px}
.slider-btn:hover:not(:disabled){border-color:var(--orange);background:var(--orange-surface);color:var(--orange-hover)}
.slider-btn:disabled{opacity:.35;cursor:default}
.slider-dots{display:flex;align-items:center;gap:.5rem}
.slider-dots button{width:8px;height:8px;padding:0;border:0;border-radius:9999px;background:var(--border-strong);transition:width .25s,background .25s}
.slider-dots button[aria-current="true"]{width:24px;background:var(--orange)}
.av-teal{background:#ccfbf1;color:#0f766e}
.av-amber{background:#fef3c7;color:#b45309}
.av-violet{background:#ede9fe;color:#6d28d9}
/* ===================================================================
HELP CENTER (huong-dan.html)
=================================================================== */
.help-hero{background:var(--navy);color:#fff;padding:calc(var(--header-h) + 3rem) 0 6rem;position:relative;overflow:hidden;text-align:center}
@media (min-width:1024px){.help-hero{padding:calc(var(--header-h) + 4rem) 0 7rem}}
.help-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,116,39,.5) 1px,transparent 1px);background-size:24px 24px;opacity:.25;pointer-events:none}
.help-hero::after{content:"";position:absolute;top:-160px;right:12%;width:460px;height:460px;border-radius:50%;background:radial-gradient(circle,rgba(255,116,39,.3),transparent 65%);pointer-events:none}
.help-hero .container{position:relative;display:grid;gap:1rem;justify-items:center;max-width:900px}
.help-hero .lead{max-width:720px}
.search-lg{max-width:720px;width:100%;margin-top:1.5rem;padding:.5rem .5rem .5rem 1rem;border-radius:var(--r-lg);border-color:transparent;box-shadow:0 24px 48px -16px rgba(0,0,0,.45)}
.search-lg input{padding:.65rem .25rem;font-size:15px}
@media (min-width:768px){.search-lg input{font-size:16px}}
.search-lg .btn{padding:.7rem 1.25rem}
@media (max-width:479px){.search-lg{padding-left:.75rem}.search-lg > .ms,.search-lg > .search-ic{display:none}.search-lg .btn{padding:.6rem .85rem;font-size:14px}}
.keywords-dark{color:#94a3b8;margin-top:1rem}
.keywords-dark span{color:#cbd5e1}
.keywords-dark a,.keywords-dark button{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:#fff}
.keywords-dark a:hover,.keywords-dark button:hover{background:rgba(255,116,39,.22);border-color:var(--orange);color:#fff}
/* Category cards lifted over the hero */
.cat-section{margin-top:-4rem;position:relative;z-index:2;padding-bottom:1rem}
.cat-grid{display:grid;gap:1rem}
@media (min-width:640px){.cat-grid{grid-template-columns:repeat(2,1fr);gap:1.25rem}}
@media (min-width:1024px){.cat-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.cat-card{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem;background:#fff}
.cat-card[hidden]{display:none}
.cat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;margin-top:.25rem}
.cat-card h2{font-size:17px;line-height:24px;font-weight:700;color:var(--navy);transition:color .2s}
.cat-card:hover h2{color:var(--orange-hover)}
.cat-card p{font-size:14px;line-height:22px;color:var(--text-2)}
.cat-more{margin-top:auto;padding-top:1rem;border-top:1px solid #f1f5f9;font-size:13px;font-weight:700;color:var(--orange-hover);display:flex;align-items:center;gap:.35rem}
.cat-more .ms{font-size:17px;transition:transform .2s}
.cat-card:hover .cat-more .ms{transform:translateX(4px)}
@media (max-width:639px){
.cat-grid{grid-template-columns:repeat(2,1fr);gap:.75rem}
.cat-card{padding:1rem;gap:.5rem}
.cat-card .icon-box{width:40px;height:40px}
.cat-card .icon-box .ms{font-size:22px}
.cat-card h2{font-size:14px;line-height:20px}
.cat-card p{font-size:12.5px;line-height:19px}
.cat-more{padding-top:.65rem;font-size:12px}
.cat-more .ms{font-size:15px}
}
.icon-indigo{background:#e0e7ff;color:#4338ca;border:1px solid #c7d2fe}
.icon-amber{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
.icon-violet{background:#ede9fe;color:#6d28d9;border:1px solid #ddd6fe}
.icon-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success-border)}
/* Guide rows */
.guides-section .eyebrow{display:inline-flex;align-items:center;gap:.35rem}
.guides{display:grid;gap:1rem}
.guide{padding:1.25rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}
@media (min-width:640px){.guide{padding:1.5rem;flex-wrap:nowrap}}
.guide[hidden]{display:none}
.guide-main{flex:1;min-width:0;display:grid;gap:.5rem}
.guide-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.guide-time{display:inline-flex;align-items:center;gap:.25rem;font-size:12.5px;font-weight:600;color:var(--text-3)}
.guide-time .ms{font-size:15px;color:var(--text-4)}
.guide h3{font-size:16px;line-height:24px;font-weight:700;color:var(--navy)}
@media (min-width:768px){.guide h3{font-size:18px;line-height:26px}}
.guide h3 a{transition:color .2s}
.guide h3 a:hover{color:var(--orange-hover)}
.guide p{font-size:14px;line-height:22px;color:var(--text-2)}
.guide-side{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding-top:.85rem;border-top:1px solid #f1f5f9}
@media (min-width:1024px){
.guide-side{width:auto;flex-shrink:0;flex-direction:column;align-items:flex-end;gap:.6rem;padding-top:0;border-top:0;padding-left:1.25rem;border-left:1px solid #f1f5f9;align-self:stretch;justify-content:center}
}
@media (max-width:639px){
.guides{grid-template-columns:repeat(2,1fr);gap:.75rem}
.guide{padding:1rem;flex-direction:column;flex-wrap:nowrap;gap:.6rem}
.guide .icon-box{width:40px;height:40px}
.guide .icon-box .ms{font-size:22px}
.guide-main{gap:.35rem;width:100%}
.guide-tags{gap:.3rem}
.guide-tags .pill{font-size:10.5px;padding:.1rem .45rem}
.guide h3{font-size:13.5px;line-height:19px}
.guide p{font-size:12px;line-height:18px}
.guide-side{padding-top:.6rem;gap:.5rem}
.guide-side .btn{width:100%;padding:.5rem .7rem;font-size:12px}
.guide-side .btn .ms{font-size:15px}
}
.guide-level{display:grid;gap:.1rem;font-size:12px}
@media (min-width:1024px){.guide-level{text-align:right}}
.guide-level span{font-weight:600;color:var(--text-4)}
.guide-level b{font-size:12.5px;font-weight:700}
.u-warning{color:var(--warning)!important}
/* Support callout */
.support-section{padding-top:1rem}
.support{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:1.75rem;display:flex;flex-direction:column;gap:1.75rem;position:relative;overflow:hidden}
@media (min-width:640px){.support{padding:2.5rem}}
@media (min-width:1024px){.support{flex-direction:row;align-items:center;justify-content:space-between;gap:2.5rem;padding:3rem}}
.support::before{content:"";position:absolute;right:-90px;bottom:-130px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(255,116,39,.32),transparent 65%);pointer-events:none}
.support > *{position:relative}
.support-copy{display:grid;gap:1rem;justify-items:start;max-width:640px}
.support-copy > p{font-size:15px;line-height:25px;color:#cbd5e1}
.support-notes{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:14px;font-weight:600;color:#e2e8f0}
.support-notes span{display:inline-flex;align-items:center;gap:.4rem}
.support-notes .ms{font-size:19px;color:var(--orange)}
.support-actions{display:flex;flex-direction:column;gap:.75rem;flex-shrink:0}
@media (min-width:560px) and (max-width:1023px){.support-actions{flex-direction:row}}
.support-actions .btn{justify-content:center}
/* ===================================================================
GUIDE DETAIL (huong-dan-*.html)
=================================================================== */
.doc-bar{background:var(--navy-surface);border-bottom:1px solid var(--border);padding:calc(var(--header-h) + .9rem) 0 .9rem}
.doc-head{background:#fff;border-bottom:1px solid var(--border);padding:1.75rem 0 2rem}
@media (min-width:768px){.doc-head{padding:2.25rem 0 2.5rem}}
.doc-head .container{max-width:1200px}
.doc-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.doc-title{font-size:26px;line-height:34px;font-weight:800;letter-spacing:-.02em;color:var(--navy);margin-top:1rem;max-width:900px}
@media (min-width:768px){.doc-title{font-size:34px;line-height:44px}}
@media (min-width:1200px){.doc-title{font-size:38px;line-height:48px}}
.doc-meta{margin-top:1.5rem;background:var(--canvas);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem 1.15rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.doc-facts{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:13.5px;color:var(--text-2)}
.doc-facts > span{display:inline-flex;align-items:center;gap:.4rem}
.doc-facts .ms{font-size:18px;color:var(--orange-hover)}
.doc-facts b{color:var(--navy);font-weight:700}
.doc-tools{display:flex;align-items:center;gap:.5rem}
.doc-tool{height:40px;min-width:40px;padding:0 .6rem;border-radius:var(--r);border:1px solid var(--border);background:#fff;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-size:13.5px;font-weight:600;transition:border-color .2s,background .2s,color .2s}
.doc-tool:hover{border-color:var(--orange);background:var(--orange-surface);color:var(--orange-hover)}
.doc-tool .ms{font-size:20px}
.doc-tool[aria-pressed="true"]{border-color:var(--orange);background:var(--orange-surface);color:var(--orange-hover)}
.doc-tool[aria-pressed="true"] .ms{font-variation-settings:"FILL" 1}
@media (max-width:479px){.doc-tool-wide span:not(.ms){display:none}.doc-tool-wide{padding:0;min-width:40px}}
/* Layout */
.doc-grid{display:grid;gap:2.5rem;padding-top:2.5rem;padding-bottom:3rem;max-width:1200px}
@media (min-width:1100px){.doc-grid{grid-template-columns:minmax(0,1fr) 330px;gap:3rem;padding-top:3rem;padding-bottom:4.5rem}}
.doc-body{min-width:0;display:grid;gap:2.5rem;align-content:start}
.doc-side{min-width:0}
/* Mobile/tablet: mục lục lên trên nội dung, CTA vẫn ở cuối */
@media (max-width:1099px){
.doc-side,.doc-side > .side-sticky{display:contents}
.doc-side .side-toc{order:-1}
}
/* Prerequisites */
.prereq{background:var(--navy);color:#fff;border-radius:var(--r-xl);padding:1.5rem;display:grid;gap:1rem;justify-items:start;position:relative;overflow:hidden}
@media (min-width:640px){.prereq{padding:2rem}}
.prereq::before{content:"";position:absolute;right:-80px;bottom:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,116,39,.25),transparent 65%);pointer-events:none}
.prereq > *{position:relative}
.prereq-title{font-size:19px;line-height:27px;font-weight:700;color:#fff}
@media (min-width:768px){.prereq-title{font-size:21px;line-height:29px}}
.prereq-list{display:grid;gap:.75rem;font-size:14.5px;line-height:23px;color:#cbd5e1}
.prereq-list li{display:flex;gap:.65rem;align-items:flex-start}
.prereq-list .ms{font-size:20px;flex-shrink:0;margin-top:1px}
.prereq-list .ok{color:#4ade80}
.prereq-list .warn{color:var(--orange)}
.prereq-list strong{color:#fff}
/* Khóa chìm trang trí */
.prereq-lock{position:absolute;right:-26px;bottom:-56px;font-size:220px;line-height:1;color:#fff;opacity:.06;pointer-events:none;user-select:none;width:auto;overflow:visible}
@media (max-width:639px){.prereq-lock{font-size:150px;right:-20px;bottom:-34px}}
/* Khối cam kết bảo mật */
.safe{width:100%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--orange);border-radius:var(--r-lg);padding:1.1rem 1.25rem;display:grid;gap:.75rem}
@media (min-width:640px){.safe{padding:1.35rem 1.5rem}}
.safe-head{display:flex;align-items:center;gap:.6rem}
.safe-head .ms{font-size:24px;color:var(--orange);flex-shrink:0}
.safe-head b{font-size:16px;line-height:23px;color:#fff;font-weight:800;letter-spacing:-.01em}
@media (min-width:768px){.safe-head b{font-size:17px;line-height:24px}}
.safe > p{font-size:14.5px;line-height:23px;color:#cbd5e1}
.safe p strong{color:#fff;font-weight:700}
.no-grid{display:grid;gap:.5rem;list-style:none;padding:0}
@media (min-width:768px){.no-grid{grid-template-columns:repeat(3,1fr)}}
.no-grid li{display:flex;align-items:center;gap:.6rem;background:rgba(255,116,39,.12);border:1px solid rgba(255,116,39,.28);border-radius:var(--r);padding:.6rem .75rem}
.no-grid li > div{display:grid;gap:.05rem;min-width:0}
.no-grid .ms{font-size:20px;color:var(--orange);flex-shrink:0}
.no-grid b{color:#fff;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.04em;line-height:17px}
.no-grid span:not(.ms){font-size:13px;line-height:18px;color:#fde4d3}
.safe-note{display:flex;gap:.5rem;align-items:flex-start;font-size:13px;line-height:20px;color:#94a3b8;border-top:1px solid rgba(255,255,255,.1);padding-top:.75rem}
.safe-note .ms{font-size:18px;color:#4ade80;flex-shrink:0}
/* Flow overview */
.flowcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1);display:grid;gap:1rem}
@media (min-width:640px){.flowcard{padding:1.5rem}}
.flowcard-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.flow4{list-style:none;padding:0;display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
@media (min-width:640px){.flow4{grid-template-columns:repeat(4,1fr)}}
.flow4 li{background:var(--navy-surface);border:1px solid #edf2f7;border-radius:var(--r-md);padding:.9rem;display:grid;gap:.2rem;justify-items:center;text-align:center}
.flow4 li.hl{background:var(--navy);border-color:var(--navy)}
.flow4 .ms{font-size:26px;color:var(--navy)}
.flow4 li.hl .ms{color:var(--orange)}
.flow4 b{font-size:13.5px;color:var(--navy)}
.flow4 li.hl b{color:#fff}
.flow4 small{font-size:12px;line-height:17px;color:var(--text-3)}
@media (max-width:639px){
.flow4 li{padding:.75rem .6rem}
.flow4 .ms{font-size:22px}
.flow4 b{font-size:12.5px;line-height:17px}
.flow4 small{font-size:11px;line-height:15px}
}
.flow4 li.hl small{color:#cbd5e1}
/* Steps */
.doc-step{display:grid;gap:1.1rem;scroll-margin-top:calc(var(--header-h) + 20px)}
.step-head{display:flex;align-items:flex-start;gap:.85rem}
.step-badge{width:44px;height:44px;border-radius:var(--r-md);background:var(--navy);color:#fff;font-size:19px;font-weight:800;display:grid;place-items:center;flex-shrink:0}
.step-badge.accent{background:var(--orange);color:#fff}
.step-where{display:block;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-hover)}
.step-head h2{font-size:19px;line-height:27px;font-weight:800;letter-spacing:-.015em;color:var(--navy);margin-top:.15rem}
@media (min-width:768px){.step-head h2{font-size:23px;line-height:31px}}
.doc-step > p{font-size:15.5px;line-height:27px;color:var(--text-2)}
@media (min-width:768px){.doc-step > p{font-size:16px;line-height:28px}}
.doc-step p strong{color:var(--navy);font-weight:700}
.doc-step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--navy-surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:.1em .4em;color:var(--navy)}
/* Credentials */
.cred{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1);display:grid;gap:1rem}
.cred-row{display:grid;gap:.45rem}
.cred-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;font-size:13.5px;font-weight:700;color:var(--navy)}
.cred-row > code{display:block;background:var(--navy-surface);border:1px solid var(--border);border-radius:var(--r);padding:.7rem .85rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;line-height:20px;color:var(--navy);overflow-x:auto;white-space:nowrap}
.cred-row > code em{font-style:normal;color:var(--orange-hover);font-weight:700}
.cred-note{display:flex;gap:.45rem;align-items:flex-start;font-size:13px;line-height:20px;color:var(--text-3);background:var(--warning-bg);border:1px solid #fde68a;border-radius:var(--r);padding:.6rem .75rem}
.cred-note .ms{font-size:17px;flex-shrink:0;color:var(--warning)}
/* Screenshot placeholder */
.shot{margin:0;display:grid;gap:.6rem}
.shot-ph{aspect-ratio:16/8;border-radius:var(--r-lg);border:1px dashed var(--border-strong);background:var(--navy-surface) repeating-linear-gradient(45deg,rgba(203,213,225,.18) 0 10px,transparent 10px 20px);display:grid;place-items:center;align-content:center;gap:.5rem;text-align:center;padding:1rem;color:var(--text-3);font-size:13.5px;font-weight:600}
.shot-ph .ms{font-size:32px;color:var(--text-4)}
.shot img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--border);display:block}
.shot figcaption{font-size:13px;line-height:20px;color:var(--text-3)}
/* Two methods */
.methods{display:grid;gap:1rem}
@media (min-width:768px){.methods{grid-template-columns:1fr 1fr}}
.method{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1);display:grid;gap:.85rem;align-content:start}
.method-head{display:flex;align-items:center;gap:.6rem}
.method-letter{width:32px;height:32px;border-radius:var(--r);background:var(--orange-surface);color:var(--orange-hover);font-weight:800;display:grid;place-items:center;flex-shrink:0}
.method h3{font-size:16px;font-weight:700;color:var(--navy)}
.method ol{list-style:none;padding:0;counter-reset:m;display:grid;gap:.55rem;font-size:14px;line-height:22px;color:var(--text-2)}
.method ol li{counter-increment:m;position:relative;padding-left:1.75rem}
.method ol li::before{content:counter(m);position:absolute;left:0;top:.15em;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--navy-surface);border:1px solid var(--border);color:var(--navy);font-size:11.5px;font-weight:800;display:grid;place-items:center}
.method strong{color:var(--navy)}
/* Syntax cards */
.syntax{display:grid;gap:.85rem}
@media (min-width:640px){.syntax{grid-template-columns:1fr 1fr}}
.syn{border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;background:var(--navy-surface);display:grid;gap:.45rem;align-content:start}
.syn-ok{background:var(--success-bg);border-color:var(--success-border)}
.syn-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:12.5px;font-weight:800;color:var(--navy)}
.syn-ok .syn-tag{color:var(--success)}
.syn-tag .ms{font-size:17px}
.syn > code{display:block;background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:.5rem .7rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;font-weight:700;color:var(--navy)}
.syn p{font-size:13.5px;color:var(--text-2)}
.syn p b{color:var(--navy);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.syn small{font-size:12.5px;line-height:18px;color:var(--text-3)}
/* Doc table */
.doc-table{width:100%;border-collapse:collapse;font-size:14px;line-height:21px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:#fff}
.doc-table caption{caption-side:top;text-align:left;font-size:13.5px;font-weight:700;color:var(--navy);padding:.85rem 1rem;background:var(--canvas);border-bottom:1px solid var(--border)}
.doc-table th{background:var(--navy-surface);color:var(--navy);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;text-align:left;padding:.7rem .85rem;border-bottom:1px solid var(--border)}
.doc-table td{padding:.7rem .85rem;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:top}
.doc-table tbody tr:last-child td{border-bottom:0}
.doc-table td b{color:var(--navy)}
.doc-table code{font-size:12.5px;white-space:nowrap}
@media (max-width:639px){
.doc-table{display:block;overflow-x:auto;white-space:nowrap}
.doc-table td,.doc-table th{white-space:normal;min-width:130px}
.doc-table caption{white-space:normal;padding:.7rem .8rem;font-size:13px;position:sticky;left:0}
}
.pill-warning{background:var(--warning-bg);color:var(--warning);border:1px solid #fde68a}
/* Checklist */
.check-list{list-style:none;padding:0;display:grid;gap:.75rem}
.check-list li{display:flex;gap:.75rem;align-items:flex-start;font-size:15px;line-height:24px;color:var(--text-2)}
.check-list .ck{width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;flex-shrink:0;margin-top:.1rem}
.check-list strong{color:var(--navy)}
/* Demo toast */
.demo-toast{background:var(--success-bg);border:1px solid var(--success-border);border-radius:var(--r-lg);padding:.9rem 1rem;display:flex;align-items:center;gap:.85rem;flex-wrap:wrap}
.demo-ic{width:42px;height:42px;border-radius:50%;background:var(--success);color:#fff;display:grid;place-items:center;flex-shrink:0}
.demo-ic .ms{font-size:22px}
.demo-toast > div{flex:1;min-width:140px}
.demo-toast b{display:block;font-size:15px;color:var(--success)}
.demo-toast small{font-size:12.5px;color:var(--text-2)}
.demo-note{font-size:12.5px;color:var(--text-3);margin-top:-.5rem}
/* Tip callout */
.tip{background:linear-gradient(160deg,var(--orange-surface),#fff 65%);border:1px solid #fed7aa;border-radius:var(--r-xl);padding:1.5rem;display:flex;gap:1.1rem;align-items:flex-start}
@media (min-width:640px){.tip{padding:2rem}}
.tip > div{display:grid;gap:.6rem}
.tip h2{font-size:18px;line-height:26px;font-weight:700;color:var(--navy)}
.tip p{font-size:14.5px;line-height:23px;color:var(--text-2)}
.tip strong{color:var(--navy)}
.tip-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.25rem}
/* FAQ title inside doc */
.faq-title{display:flex;align-items:center;gap:.5rem;font-size:19px;line-height:27px;font-weight:800;color:var(--navy)}
.faq-title .ms{color:var(--orange-hover)}
.doc-step .faq{max-width:none;margin:0}
.doc-step .faq .ans ul{display:grid;gap:.4rem;margin-top:.5rem;padding-left:1.1rem;list-style:disc}
/* Feedback */
.feedback{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.feedback b{display:block;font-size:15px;color:var(--navy)}
.feedback small{font-size:13px;color:var(--text-3)}
.feedback-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.feedback-done{display:inline-flex;align-items:center;gap:.4rem;font-size:14px;font-weight:700;color:var(--success);background:var(--success-bg);border:1px solid var(--success-border);border-radius:9999px;padding:.5rem 1rem}
/* Next article */
.next-doc{background:var(--navy-surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;transition:border-color .2s,box-shadow .2s}
@media (min-width:768px){.next-doc{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem;padding:2rem}}
.next-doc:hover{border-color:var(--orange);box-shadow:var(--sh-2)}
.next-doc > div{display:grid;gap:.4rem}
.next-label{display:inline-flex;align-items:center;gap:.3rem;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--orange-hover)}
.next-label .ms{font-size:15px}
.next-doc h2{font-size:18px;line-height:26px;font-weight:700;color:var(--navy)}
.next-doc p{font-size:14px;line-height:22px;color:var(--text-2)}
.next-doc .btn{flex-shrink:0;align-self:flex-start}
/* Sidebar boxes */
.side-box{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1);display:grid;gap:.75rem}
.side-box h4{display:flex;align-items:center;gap:.45rem;font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.side-box h4 .ms{font-size:18px;color:var(--orange-hover)}
.agent{display:flex;align-items:center;gap:.7rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:.65rem}
.agent i{width:38px;height:38px;border-radius:50%;background:var(--orange);color:#fff;font-style:normal;font-weight:800;font-size:13px;display:grid;place-items:center;flex-shrink:0}
.agent b{display:block;font-size:13.5px;color:#fff}
.agent small{font-size:12px;color:#cbd5e1}
.dl-item{display:flex;align-items:center;gap:.7rem;padding:.65rem;border-radius:var(--r-md);background:var(--navy-surface);border:1px solid #edf2f7;transition:border-color .2s,background .2s}
.dl-item:hover{border-color:var(--orange);background:var(--orange-surface)}
.dl-item > div{flex:1;min-width:0}
.dl-item b{display:block;font-size:13px;line-height:18px;color:var(--navy)}
.dl-item small{font-size:11.5px;color:var(--text-4)}
.dl-item > .ms{font-size:22px;flex-shrink:0}
.dl-item > .ms:last-child{font-size:18px;color:var(--text-3)}
.u-danger{color:var(--danger)!important}
.series-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.series{list-style:none;padding:0;display:grid;gap:.2rem;counter-reset:none}
.series li a,.series li > span{display:flex;align-items:flex-start;gap:.5rem;font-size:13.5px;line-height:20px;padding:.5rem .55rem;border-radius:var(--r);color:var(--text-2);transition:color .2s,background .2s}
.series li a:hover{color:var(--navy);background:var(--navy-surface)}
.series .ms{font-size:17px;flex-shrink:0;margin-top:1px;color:var(--text-4)}
.series .done .ms{color:var(--success)}
.series .now > span{background:var(--orange-surface);color:var(--navy);font-weight:700}
.series .now .ms{color:var(--orange-hover)}
/* Print */
@media print{
.header,.mobile-nav,.mobile-nav-backdrop,.sticky-cta,.doc-side,.doc-tools,.feedback,.next-doc,.footer,.toast-copy,.tip-actions{display:none!important}
body{background:#fff}
.doc-grid{display:block;padding:0;max-width:none}
.doc-bar{padding-top:0}
.prereq,.flow4 li.hl{background:#fff!important;color:#000!important;border:1px solid #999}
.prereq-title,.prereq-list,.prereq-list strong,.flow4 li.hl b,.flow4 li.hl small{color:#000!important}
.faq details{break-inside:avoid}
.faq .ans{display:block!important}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:11px;color:#555}
}
/* ===================================================================
CONTACT PAGE (lien-he.html)
=================================================================== */
.ct-hero{padding:calc(var(--header-h) + 3rem) 0 2.5rem;background:radial-gradient(900px 420px at 100% 0%,var(--orange-surface) 0%,transparent 60%),radial-gradient(800px 420px at 0% 100%,#e6eeff 0%,transparent 60%),var(--canvas);border-bottom:1px solid var(--border)}
@media (min-width:1024px){.ct-hero{padding:calc(var(--header-h) + 4rem) 0 3rem}}
.ct-hero .container{display:grid;gap:1rem;justify-items:start;max-width:900px}
.ct-hero .lead{max-width:720px}
.ct-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;margin-top:.5rem;font-size:14px;font-weight:600;color:var(--navy)}
.ct-strip > span{display:inline-flex;align-items:center;gap:.4rem}
.ct-strip .ms{font-size:19px;color:var(--orange-hover)}
.ct-strip i{width:1px;height:16px;background:var(--border-strong);display:none}
@media (min-width:768px){.ct-strip i{display:block}}
.ct-main{padding-top:2.5rem}
.ct-grid{display:grid;gap:1.5rem;align-items:start}
@media (min-width:1100px){.ct-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem}}
/* ----- Form card ----- */
.ct-form-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--sh-1)}
@media (min-width:640px){.ct-form-card{padding:2rem}}
@media (min-width:1200px){.ct-form-card{padding:2.5rem}}
.ct-form-head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.75rem}
.ct-form-head h2{margin-bottom:.35rem}
.ct-form-head p{font-size:14.5px;line-height:23px;color:var(--text-2)}
.ct-form{display:grid;gap:1.25rem}
.f-row{display:grid;gap:1.25rem}
@media (min-width:560px){.f-row{grid-template-columns:1fr 1fr}}
.field{display:grid;gap:.45rem;border:0;padding:0;margin:0;min-width:0}
.field > label,.field > legend{font-size:13.5px;font-weight:700;color:var(--navy);padding:0}
/*