/* ===== FalconX — light theme =====
 * Activated by <html data-theme="light"> (toggle in the header, default set in Tuỳ biến → FalconX → Header & logo).
 * Colour tokens are redefined first; the rules below cover places where the dark design hard-codes colours.
 * Code boxes intentionally stay dark in both themes.
 */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#F5F7FB;--bg2:#ECF1F8;--bg3:#E3EAF5;--panel:#FFFFFF;--panel2:#F4F7FC;
  --line:rgba(12,28,56,.10);--line2:rgba(12,28,56,.18);
  --ink:#0B1730;--text:#2A3953;--muted:#52627E;--faint:#76859F;
  --red:#D91A2A;--red2:#E0303F;--red3:#A5101C;--redsoft:rgba(217,26,42,.09);
  --green:#12945A;--amber:#B87406;--sky:#2F6FD6;
  --card-shadow:0 1px 2px rgba(12,28,56,.05),0 8px 24px rgba(12,28,56,.06);
}
html[data-theme="dark"]{color-scheme:dark}

/* generic light surfaces (replace translucent white-on-dark panels) */
html[data-theme="light"] :is(.stat,.std,.ip,.lk,.vp,.feat,.card,.sol,.res,.partner .box,.fx-faq-item,.fx-quote,.fx-form,.comment-body,.fxc-doc,.entry-content blockquote){background:var(--panel);box-shadow:var(--card-shadow)}
html[data-theme="light"] :is(.card,.sol):hover{background:var(--panel)}
html[data-theme="light"] .prod,html[data-theme="light"] .fx-plan{background:linear-gradient(180deg,#fff,var(--panel2));box-shadow:var(--card-shadow)}
html[data-theme="light"] .partner{background:linear-gradient(135deg,#fff,var(--bg2))}
html[data-theme="light"] .fx-faq-item[open]{background:#fff}

/* text that is hard-coded white in the dark design */
html[data-theme="light"] :is(.ghstars b,.announce b,.wordmark,.dd-t,.hero h1,.stat .n,.std,.prod h3,.prod .more,.lk b,.card .k,.res .m,footer h5,.mrel,.fxc-head .t,.fxc-bub b,.fxc-doc b,.fxc-chip,.page-title,.entry-content strong,.entry-content b,.entry-content th,.fx-card-link,.fx-faq-item summary,.fx-plan h3,.fx-price b,.fx-quote figcaption b,.nav-item.is-current>a,.lang-opt.active){color:var(--ink)}
html[data-theme="light"] :is(.nav-item>a:hover,.lang-btn:hover,footer li a:hover,.modal-x:hover,.fxc-ib:hover,.entry-content a:hover,.fx-contact-mail a:hover){color:var(--red)}
html[data-theme="light"] .prod .more:hover,html[data-theme="light"] .fx-card-link:hover{color:var(--red)}
html[data-theme="light"] .hero h1 .g{background-image:linear-gradient(100deg,#E0303F,#7A0F18,#E0303F)}

/* header, menus */
html[data-theme="light"] .announce{background:linear-gradient(90deg,#fff,#EEF2FA);color:var(--text)}
html[data-theme="light"] header.nav{background:rgba(255,255,255,.86)}
html[data-theme="light"] :is(.nav-item>a:hover,.dd-link:hover,.lang-opt:hover){background:rgba(12,28,56,.05)}
html[data-theme="light"] :is(.dropdown,.lang-menu){background:#fff;box-shadow:0 24px 60px rgba(12,28,56,.16)}
html[data-theme="light"] .nav-toggle span{background:var(--ink)}
@media(max-width:980px){html[data-theme="light"] .nav-open .nav-links{background:#fff}}
html[data-theme="light"] .btn-line{background:#fff}
html[data-theme="light"] .btn-line:hover{background:#fff;color:var(--red)}

/* section backgrounds */
html[data-theme="light"] .hero{background:radial-gradient(1000px 560px at 80% -10%,rgba(225,29,44,.12),transparent 60%),radial-gradient(700px 400px at 10% 110%,rgba(47,111,214,.08),transparent 60%),linear-gradient(180deg,#fff,var(--bg))}
html[data-theme="light"] .hero .fx-net{opacity:.55}
html[data-theme="light"] .loop-sec{background:radial-gradient(900px 500px at 50% 30%,rgba(225,29,44,.07),transparent 60%),var(--bg2)}
html[data-theme="light"] .oss{background:linear-gradient(150deg,#fff,var(--bg2))}
html[data-theme="light"] .finalcta,html[data-theme="light"] .fx-bg-glow{background:radial-gradient(800px 420px at 50% 100%,rgba(225,29,44,.12),transparent 60%),var(--bg2)}
html[data-theme="light"] .page-hero{background:radial-gradient(900px 420px at 80% -20%,rgba(225,29,44,.1),transparent 60%),linear-gradient(180deg,#fff,var(--bg))}
html[data-theme="light"] footer{background:#fff}

/* loop diagram (SVG presentation attributes are overridden by CSS) */
html[data-theme="light"] .loop-svg{filter:drop-shadow(0 16px 36px rgba(12,28,56,.12))}
html[data-theme="light"] .loop-svg .nd-bg{fill:#fff;stroke:rgba(12,28,56,.16)}
html[data-theme="light"] .loop-svg .nd-t{fill:var(--ink)}
html[data-theme="light"] .loop-svg .nd-s{fill:var(--muted)}
html[data-theme="light"] .loop-svg .core-bg{fill:#fff}
html[data-theme="light"] .loop-svg .core-title{fill:var(--ink)}
html[data-theme="light"] .loop-svg .core-sub{fill:var(--text)}
html[data-theme="light"] .loop-svg .core-tags,html[data-theme="light"] .loop-svg .cap{fill:var(--faint)}
html[data-theme="light"] .loop-svg .ring-soft{stroke:rgba(12,28,56,.08)}
html[data-theme="light"] .loop-svg .spokes{stroke:rgba(12,28,56,.14)}
html[data-theme="light"] .loop-legend i[style*="#fff"]{background:var(--ink)!important}
html[data-theme="light"] .loop-svg circle[fill="#fff"]{fill:var(--ink)}

/* popup */
html[data-theme="light"] .modal-ov{background:rgba(12,28,56,.45)}
html[data-theme="light"] .modal{background:#fff;box-shadow:0 30px 80px rgba(12,28,56,.25)}
html[data-theme="light"] .mrel{background:var(--bg2)}

/* forms */
html[data-theme="light"] :is(.fx-field input,.fx-field select,.fx-field textarea,.fx-search input,.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea,.fxc-in){background:#fff;color:var(--ink)}
html[data-theme="light"] .fx-field select option{background:#fff}

/* content */
html[data-theme="light"] .entry-content th{background:var(--bg2)}

/* chatbot */
html[data-theme="light"] .fxc{background:#fff;box-shadow:0 30px 80px rgba(12,28,56,.22)}
html[data-theme="light"] .fxc-head{background:linear-gradient(135deg,#fff,var(--bg2))}
html[data-theme="light"] .fxc-foot{background:var(--panel2)}
html[data-theme="light"] .fxc-msg.bot .fxc-bub{background:var(--bg2)}
html[data-theme="light"] .fxc-chip{background:#fff}
html[data-theme="light"] .fxc-chip:hover{color:var(--red)}
html[data-theme="light"] .fxc-hint,html[data-theme="light"] .fxc-hint::after{background:#fff;color:var(--ink)}
html[data-theme="light"] .fxc-bub code{background:rgba(12,28,56,.07);color:var(--red3)}

/* logo: dark-text version on light backgrounds */
.logo-light{display:none}
html[data-theme="light"] .logo-light{display:block}
html[data-theme="light"] .logo-dark{display:none}

/* ===== theme toggle button (both themes) ===== */
.theme-btn{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;border:1px solid var(--line2);background:transparent;color:var(--text);cursor:pointer;transition:.15s;flex:none}
.theme-btn:hover{border-color:var(--red2);color:var(--red2)}
.theme-btn svg{width:18px;height:18px}
.theme-btn .i-sun{display:none}
html[data-theme="dark"] .theme-btn .i-sun{display:block}
html[data-theme="dark"] .theme-btn .i-moon{display:none}

/* ===== language switcher flags (both themes) ===== */
.flag{width:24px;height:16px;border:0;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center;flex:none}
.flag-svg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.18);shape-rendering:geometricPrecision}
.lang-btn{padding:7px 10px;gap:8px;height:38px}
.lang-opt{padding:10px 12px;gap:12px}
.lang-opt:focus-visible{outline:2px solid var(--red2);outline-offset:-2px}
.nav-cta{gap:8px}