@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --bg:#0a0e17;
  --bg-2:#0f1521;
  --panel:#121a28;
  --panel-2:#161f30;
  --ink:#eef2f8;
  --ink-dim:#9aa8bd;
  --ink-faint:#5c6a80;
  --line:#20293a;
  --line-strong:#2b3648;
  --gold:#eda511;
  --gold-soft:#f5c451;
  --gold-ink:#f5c451;      /* màu chữ nhấn - sáng ở dark theme */
  --code-ink:#f5c451;      /* màu chữ trong inline-code */
  --code-bg:#0d1420;       /* nền badge/code */
  --code-bd:#2b3648;
  --accent-soft-bg:rgba(237,165,17,.10);
  --accent-soft-bd:rgba(237,165,17,.25);
  /* 4 màu lệnh - LẤY ĐÚNG từ GcOptionsBubble.mq5 */
  --long-call:#065195;
  --short-call:#f2495c;
  --long-put:#eda511;
  --short-put:#73bf69;
  --radius:14px;
  --maxw:1080px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6fa; --bg-2:#eceef4; --panel:#ffffff; --panel-2:#f4f6fb;
    --ink:#10161f; --ink-dim:#3a4759; --ink-faint:#6b7789;
    --line:#dbe1ec; --line-strong:#c2cad9;
    /* vàng đậm hơn để chữ đọc rõ trên nền sáng */
    --gold-ink:#9a6a02;
    --code-ink:#5b3f00;
    /* badge/code ở light: nền be đậm + chữ nâu đậm cho tương phản mạnh */
    --code-bg:#fbf2dd;
    --code-bd:#e5cf95;
    --accent-soft-bg:rgba(237,165,17,.16);
    --accent-soft-bd:rgba(154,106,2,.38);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(237,165,17,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(6,81,149,.10), transparent 55%),
    var(--bg);
  color:var(--ink);
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.num{font-variant-numeric:tabular-nums;font-family:'JetBrains Mono',ui-monospace,monospace}
/* Nhãn chỉ dành cho trình đọc màn hình: nút hamburger là icon thuần, không có chữ nào
   để đọc. Không dùng `display:none` — thứ đó bị trình đọc màn hình bỏ qua luôn. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--gold-ink);text-decoration:none}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
.topbar .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:11px;font-family:'Roboto';font-weight:700;letter-spacing:-.01em}
.brand .dot{width:11px;height:11px;border-radius:3px;background:var(--gold);box-shadow:0 0 0 4px rgba(237,165,17,.15)}
.brand small{display:block;font-family:'Roboto';font-weight:500;font-size:12px;color:var(--ink-faint);letter-spacing:.02em}
/* 🔴 KHÔNG `flex-wrap` ở đây. Bản tiếng Việt có nhãn dài gấp rưỡi bản tiếng Anh
   ("Bảng điều khiển" vs "Control panel"), nên 7 mục xếp ngang tràn chiều rộng rồi
   XUỐNG DÒNG THỨ HAI — dòng đó tràn ra khỏi thanh cao 64px và đè lên nội dung bên
   dưới. Giải pháp: chỉ 4 mục chính nằm thẳng trên thanh, 3 mục còn lại gom vào nút
   "Thêm"; tổng bề rộng vì thế không phụ thuộc ngôn ngữ đang chọn. */
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;white-space:nowrap}
.nav a,.nav-more>button{
  display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-dim);
  background:none;border:0;cursor:pointer;
  padding:7px 12px;border-radius:9px;transition:.18s;
}
.nav a:hover,.nav-more>button:hover{color:var(--ink);background:var(--panel)}
.nav a:focus-visible,.nav-more>button:focus-visible,.navtoggle:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}

/* ----- nhóm "Thêm" (desktop) ----- */
.nav-more{position:relative}
.nav-more>button svg{transition:transform .18s}
.nav-more[data-open="true"]>button{color:var(--ink);background:var(--panel)}
.nav-more[data-open="true"]>button svg{transform:rotate(180deg)}
.nav-more-panel{
  position:absolute;top:calc(100% + 8px);right:0;min-width:190px;
  display:none;flex-direction:column;gap:2px;padding:6px;
  background:var(--panel);border:1px solid var(--line-strong);
  border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.nav-more[data-open="true"] .nav-more-panel{display:flex}
.nav-more-panel a{width:100%;padding:8px 12px}

/* ----- menu mobile -----
   🔴 Bản cũ chỉ có `@media(max-width:760px){.nav{display:none}}`: dưới 760px trang
   KHÔNG còn menu nào cả, mà đây là trang dài 7 mục — người đọc trên điện thoại phải
   cuộn tay qua toàn bộ. Nay thanh ngang nhường chỗ cho nút hamburger mở đủ 7 mục.  */
.navtoggle{
  display:none;margin-left:auto;
  align-items:center;justify-content:center;width:38px;height:38px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--ink-dim);cursor:pointer;transition:.18s;
}
.navtoggle:hover{color:var(--ink)}
.navsheet{
  display:none;border-top:1px solid var(--line);
  background:color-mix(in srgb, var(--bg) 96%, transparent);
}
.navsheet[data-open="true"]{display:block}
.navsheet .wrap{display:flex;flex-direction:column;gap:2px;padding-top:10px;padding-bottom:14px}
.navsheet a{
  font-size:15px;font-weight:600;color:var(--ink-dim);
  padding:11px 12px;border-radius:10px;
}
.navsheet a:hover{color:var(--ink);background:var(--panel)}

@media(max-width:860px){
  .nav{display:none}
  .navtoggle{display:inline-flex}
  /* Phụ đề brand xuống 2 dòng ở màn hẹp và TRÀN khỏi thanh 64px — chữ dòng hai nằm
     dưới đường viền, trông như lỗi render. Tên sản phẩm ở lại là đủ để định danh.
     `nowrap`: đo ở 360px thì chính TÊN cũng tự ngắt làm hai dòng. */
  .brand small{display:none}
  .brand>span{white-space:nowrap}
  .brand{min-width:0}
  /* `.langsw` giữ `margin-left:auto` của riêng nó sẽ đẩy hamburger dính sát nó;
     ở mobile thứ tự mong muốn là: brand — (khoảng trống) — VI/EN — hamburger. */
  .nav + .langsw{margin-left:auto}
  .navtoggle{margin-left:8px}
}
@media(min-width:861px){.navsheet{display:none !important}}

/* ---------- chuyển ngôn ngữ ----------
   🔴 Ẩn/hiện bằng CSS theo `html[lang]`, KHÔNG bằng JS gỡ thuộc tính `hidden`:
   JS lỗi hoặc chậm thì user thấy CẢ HAI bản chồng nhau. Quy tắc này chạy ngay khi
   CSS parse xong, trước cả khi body render.                                        */
html[lang="vi"] [data-lang="en"]{display:none !important}
html[lang="en"] [data-lang="vi"]{display:none !important}
/* 🔴 SVG <text> KHÔNG ẩn bằng `display:none` một cách đáng tin — đã đo trên Chromium:
   6 phần tử <text data-lang="en"> vẫn hiện khi html[lang="vi"], tức CHỒNG hai bản chữ
   lên nhau trong mockup. Dùng thêm `visibility:hidden` (thuộc tính SVG hiểu chắc chắn)
   để bịt. Giữ cả hai: display lo layout HTML, visibility lo SVG.                     */
html[lang="vi"] text[data-lang="en"],
html[lang="en"] text[data-lang="vi"]{visibility:hidden !important}

/* 🔴 KHÔNG đặt nút trong `.nav` — `.nav` bị `display:none` dưới 760px, đặt vào đó
   là mobile mất luôn nút đổi ngôn ngữ. Đây là khối riêng, luôn hiện.               */
.langsw{
  margin-left:auto;display:flex;gap:2px;flex-shrink:0;
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:2px;
}
.nav + .langsw{margin-left:8px}
.langsw button{
  font-family:inherit;font-size:12.5px;font-weight:700;letter-spacing:.03em;
  color:var(--ink-dim);background:none;border:0;cursor:pointer;
  padding:5px 10px;border-radius:7px;transition:.18s;
}
.langsw button:hover{color:var(--ink)}
.langsw button[aria-pressed="true"]{background:var(--gold);color:#1a1200}
.langsw button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- hero ---------- */
.hero{padding:76px 0 40px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);background:var(--accent-soft-bg);
  border:1px solid var(--accent-soft-bd);padding:6px 12px;border-radius:100px;
}
h1{
  font-family:'Roboto';font-weight:800;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(34px,5.6vw,58px);margin:18px 0 18px;
}
h1 .hl{color:var(--gold)}
.lede{font-size:19px;color:var(--ink-dim);max-width:46ch;margin-bottom:28px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Roboto';font-weight:600;font-size:15px;
  padding:13px 20px;border-radius:11px;border:1px solid transparent;
  cursor:pointer;transition:.2s;
}
.btn-primary{background:var(--gold);color:#1a1204;box-shadow:0 8px 22px -10px rgba(237,165,17,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(237,165,17,.75)}
.btn-ghost{background:var(--panel);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--panel-2);border-color:var(--gold)}

/* hero mockup */
.chart-card{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:14px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);
  position:relative;overflow:hidden;
}
.chart-card .chart-head{display:flex;align-items:center;gap:8px;padding:4px 6px 12px;font-size:12px;color:var(--ink-faint)}
.chart-card .chart-head .tk{color:var(--gold-soft);font-weight:700;font-family:'JetBrains Mono'}
.chart-card svg{display:block;width:100%;height:auto;border-radius:8px}

/* ---------- section frame ---------- */
section.block{padding:56px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:34px}
.sec-ico{
  flex:none;width:52px;height:52px;border-radius:13px;
  display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line-strong);
  color:var(--gold);
}
.sec-ico svg{width:26px;height:26px}
.sec-titles .kicker{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.sec-titles h2{font-family:'Roboto';font-weight:700;font-size:clamp(24px,3.4vw,33px);letter-spacing:-.02em;margin-top:3px}
.sec-titles p{color:var(--ink-dim);margin-top:8px;max-width:62ch}

/* steps */
.steps{display:grid;gap:16px}
.step{
  display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;transition:.2s;
}
.step:hover{border-color:var(--line-strong);background:var(--panel-2)}
.step .n{
  width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  font-family:'JetBrains Mono';font-weight:700;font-size:18px;
  background:var(--accent-soft-bg);color:var(--gold-ink);border:1px solid var(--accent-soft-bd);
}
.step h3{font-family:'Roboto';font-weight:600;font-size:18px;margin-bottom:6px}
.step p{color:var(--ink-dim);font-size:15.5px}
.step code, .inline-code{
  font-family:'JetBrains Mono';font-size:.86em;font-weight:600;
  background:var(--code-bg);border:1px solid var(--code-bd);border-radius:6px;
  padding:2px 7px;color:var(--code-ink);white-space:nowrap;
}
.path{color:var(--ink);font-weight:600}

/* callout */
.note{
  display:flex;gap:13px;align-items:flex-start;
  border-radius:12px;padding:15px 17px;margin-top:16px;font-size:14.5px;
  background:rgba(237,165,17,.07);border:1px solid rgba(237,165,17,.22);color:var(--ink-dim);
}
.note.info{background:rgba(6,81,149,.10);border-color:rgba(52,140,224,.28)}
.note svg{flex:none;width:19px;height:19px;color:var(--gold);margin-top:2px}
.note.info svg{color:#4f9de0}
.note b{color:var(--ink)}

/* bubble legend */
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
@media(max-width:560px){.legend{grid-template-columns:1fr}}
.leg{
  display:flex;align-items:center;gap:13px;padding:14px 16px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
}
.leg .sw{width:26px;height:26px;border-radius:50%;flex:none;box-shadow:0 0 0 4px rgba(255,255,255,.03)}
.leg .lg-t{font-family:'Roboto';font-weight:600;font-size:15px}
.leg .lg-s{font-size:13px;color:var(--ink-faint)}
.legend-mono{grid-column:1/-1;display:flex;gap:20px;flex-wrap:wrap;padding-top:6px;font-size:13.5px;color:var(--ink-dim)}
.legend-mono b{color:var(--ink)}

/* two-col explainer */
.explain{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin-top:8px}
@media(max-width:820px){.explain{grid-template-columns:1fr;gap:24px}}
.mock{
  background:linear-gradient(180deg,var(--panel),var(--bg-2));
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:16px;
  box-shadow:0 24px 48px -28px rgba(0,0,0,.55);
}
.mock svg{display:block;width:100%;height:auto}
.mock .cap{margin-top:10px;font-size:12.5px;color:var(--ink-faint);text-align:center}

/* panel tabs mockup grid */
.tab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:8px}
@media(max-width:820px){.tab-grid{grid-template-columns:1fr}}
.tabcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tabcard .tc-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.tabcard .tc-head .tg{font-family:'JetBrains Mono';font-size:11px;font-weight:700;color:var(--code-ink);background:var(--code-bg);border:1px solid var(--code-bd);padding:2px 8px;border-radius:6px}
.tabcard .tc-head h4{font-family:'Roboto';font-weight:600;font-size:16px}
.tabcard .tc-body{padding:16px 18px}
.tabcard .tc-body svg{display:block;width:100%;height:auto;margin-bottom:12px;border-radius:8px}
.tabcard ul{list-style:none;display:grid;gap:9px}
.tabcard li{display:flex;gap:10px;font-size:14px;color:var(--ink-dim);align-items:flex-start}
.tabcard li .k{font-family:'JetBrains Mono';font-size:11.5px;font-weight:600;color:var(--code-ink);background:var(--code-bg);border:1px solid var(--code-bd);border-radius:5px;padding:1px 6px;white-space:nowrap;flex:none;margin-top:1px}
.tabcard li b{color:var(--ink)}

/* advanced */
.adv{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
@media(max-width:820px){.adv{grid-template-columns:1fr}}
.adv .ac{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.adv .ac .ai{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:rgba(6,81,149,.14);color:#5aa6e6;margin-bottom:13px}
.adv .ac .ai svg{width:22px;height:22px}
.adv .ac h4{font-family:'Roboto';font-weight:600;font-size:16.5px;margin-bottom:7px}
.adv .ac p{font-size:14.5px;color:var(--ink-dim)}

/* troubleshoot */
.trouble{display:grid;gap:12px;margin-top:8px}
.trb{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--short-call);border-radius:10px;padding:16px 18px}
.trb h4{font-family:'Roboto';font-weight:600;font-size:15.5px;margin-bottom:5px;display:flex;align-items:center;gap:9px}
.trb h4 svg{width:17px;height:17px;color:var(--short-call);flex:none}
.trb p{font-size:14.5px;color:var(--ink-dim)}
.trb .fix{color:var(--short-put);font-weight:600}

/* bảng thông số EA (#inputs) */
.inp-grp{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
.inp-grp>summary,.inp-grp>.inp-hd{
  font-family:'Roboto';font-weight:600;font-size:15.5px;padding:14px 18px;
  background:var(--panel-2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px}
.inp-grp>summary{cursor:pointer;list-style:none}
.inp-grp>summary::-webkit-details-marker{display:none}
.inp-grp>summary::after{content:'▾';margin-left:auto;color:var(--ink-faint);font-size:13px;transition:transform .2s}
.inp-grp[open]>summary::after{transform:rotate(180deg)}
.inp-grp .tag{font-family:'JetBrains Mono';font-size:10.5px;font-weight:600;color:var(--ink-faint);
  border:1px solid var(--line-strong);border-radius:20px;padding:2px 9px;margin-left:auto}
.inp-grp[open]>summary .tag{margin-left:0}
/* Cuộn NGANG trong khung riêng: bảng 3 cột không co được dưới ~520px mà không làm
   tên input xuống dòng giữa chừng — cuộn cả trang thì tệ hơn nhiều. */
.inp-wrap{overflow-x:auto}
table.inp{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px}
table.inp th{text-align:left;font-family:'Roboto';font-weight:600;font-size:12.5px;
  color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;
  padding:10px 18px;border-bottom:1px solid var(--line)}
table.inp td{padding:11px 18px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-dim)}
table.inp tr:last-child td{border-bottom:none}
table.inp td:first-child{white-space:nowrap}
table.inp .nm{font-family:'JetBrains Mono';font-size:12.5px;font-weight:600;color:var(--code-ink);
  background:var(--code-bg);border:1px solid var(--code-bd);border-radius:5px;padding:2px 7px}
table.inp td.dv{font-family:'JetBrains Mono';font-size:12.5px;color:var(--ink);white-space:nowrap}
table.inp .warn{color:var(--short-call);font-weight:600}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 60px;margin-top:20px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;color:var(--ink-faint);font-size:13.5px}
footer .brand{font-size:15px}

/* reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* bubble float anim */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.hero svg .fb{animation:floaty 4s ease-in-out infinite}
.hero svg .fb2{animation:floaty 5.2s ease-in-out infinite .6s}
.hero svg .fb3{animation:floaty 4.6s ease-in-out infinite 1.1s}
@media(prefers-reduced-motion:reduce){.hero svg .fb,.hero svg .fb2,.hero svg .fb3{animation:none}}