/* Shared Study navigation. Keep the learning workspace beside the rail.
   Vidi game style (vidi-game.css, 1 Nov 2026): the rail is the Arena's night panel with the logo's violet and aqua
   glows and bevelled corners; the current page glows aqua; hovers tint violet. The bevel is drawn by ::before so the
   account popover (position: fixed inside the rail) is never clipped. Colours repeat vidi-game.css on purpose: the
   rail is on every Study page, most of which do not load it. */
body[data-study-navigation] { padding-left:112px; box-sizing:border-box; }
.study-navigation { font:14px/1.4 Arial,sans-serif; --rail-night:#140f2e; --rail-aqua:#56dadc; --rail-violet:#8a72f6; --rail-violet-lite:#b9a8ff; --rail-text:#b8c4e6; }
.study-menu-toggle,.study-menu-backdrop { display:none; }
.study-rail { position:fixed; z-index:200; top:14px; bottom:14px; left:16px; width:84px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:8px; padding:22px 8px 14px; background:transparent; color:#fff; border-radius:0!important; box-shadow:none; isolation:isolate; }
.study-rail::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),radial-gradient(150px 240px at 50% -8%,rgba(138,114,246,.6),transparent 70%),radial-gradient(150px 220px at 50% 108%,rgba(86,218,220,.32),transparent 70%),var(--rail-night);
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); }
.study-rail svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; transition:transform .18s; }
.study-rail a { text-decoration:none; color:var(--rail-text); }
.study-rail-logo { font:800 34px/1 Arial,sans-serif; padding:4px 0 16px; }
.study-rail-logo img { display:block; width:42px; height:42px; object-fit:contain; filter:drop-shadow(0 0 10px rgba(86,218,220,.55)); transition:transform .18s; }
.study-rail-logo:hover img { transform:translateY(-2px) rotate(-4deg); }
.study-rail-links { display:flex; flex-direction:column; gap:5px; list-style:none; margin:0; padding:0; overflow:auto; min-height:0; scrollbar-width:none; }
.study-rail-links li { margin:0; padding:0; }
.study-rail-links a,.study-rail-exit,.study-rail-account>summary { display:flex; align-items:center; justify-content:center; gap:16px; width:50px; min-height:46px; box-sizing:border-box; color:var(--rail-text); border-radius:0!important; cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); transition:background-color .18s,color .18s; }
.study-rail-links a:hover,.study-rail-exit:hover,.study-rail-account>summary:hover { background:rgba(138,114,246,.28); color:#fff; }
.study-rail-links a:hover svg,.study-rail-exit:hover svg,.study-rail-account>summary:hover svg { transform:translateY(-2px); }
.study-rail-links a[aria-current],.study-rail-exit[aria-current] { background:linear-gradient(180deg,rgba(86,218,220,.26),rgba(86,218,220,.1)); color:var(--rail-aqua); box-shadow:inset 0 0 0 1.5px rgba(86,218,220,.75),inset 0 0 18px rgba(86,218,220,.25); text-shadow:0 0 10px rgba(86,218,220,.8); }
.study-rail-links a[aria-current] svg,.study-rail-exit[aria-current] svg { filter:drop-shadow(0 0 6px rgba(86,218,220,.9)); }
.study-rail :is(a,summary,button):focus-visible { outline:3px solid var(--rail-aqua); outline-offset:-3px; }
.study-rail-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.study-rail-account { margin-top:auto; flex-shrink:0; }
.study-rail-account>summary { list-style:none; }
.study-rail-account>summary::-webkit-details-marker { display:none; }
.study-rail-account[open]>summary { background:rgba(138,114,246,.28); color:#fff; }
.study-rail-popover { position:fixed; left:116px; bottom:18px; width:260px; box-sizing:border-box; padding:20px; border:0; background:white; color:#111; box-shadow:none; border-radius:0!important; outline:1px solid #e3def5; outline-offset:-1px;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
.study-rail-popover .header-account { display:flex!important; flex-direction:column; align-items:stretch; gap:12px; margin:0; }
.study-rail-popover .header-account a { color:#141225; text-align:center; padding:10px; border:0; border-radius:0!important; background:#f7f5fd; outline:1.5px solid #e3def5; outline-offset:-1.5px; font-weight:700;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.study-rail-popover .header-account a:hover { background:#f1edff; outline-color:var(--rail-violet); }
.study-rail-popover .study-language-switch { margin:16px auto 0; color:#111; }
.study-rail [data-lang="vi"] { display:none; }
body[data-study-language="vi"] .study-rail [data-lang="en"] { display:none; }
body[data-study-language="vi"] .study-rail [data-lang="vi"] { display:inline; }
body[data-study-navigation] .dash-shell { grid-template-columns:minmax(0,1fr) minmax(280px,340px); }
body[data-study-navigation] .dash-roadmap { grid-column:1/-1; }
body[data-study-navigation] .dash-main { padding-top:12px; }
@media(max-width:1080px) { body[data-study-navigation] .dash-shell { padding-bottom:24px; } }
@media(max-width:760px) {
 body[data-study-navigation] { padding-left:0; padding-top:60px; }
 .study-menu-toggle { display:flex; position:fixed; z-index:202; top:10px; left:12px; align-items:center; gap:8px; padding:10px 14px; border-radius:0!important; color:#fff; cursor:pointer; list-style:none; font-weight:700;
  background:radial-gradient(90px 40px at 85% -20%,rgba(138,114,246,.7),transparent 70%),var(--rail-night); box-shadow:inset 0 0 0 1.5px rgba(86,218,220,.6);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
 .study-menu-toggle svg { color:var(--rail-aqua); }
 .study-menu-toggle::-webkit-details-marker { display:none; }
 .study-navigation[open] .study-menu-backdrop { display:block; position:fixed; z-index:199; inset:0; width:100%; height:100%; border:0; background:rgba(20,15,46,.55); }
 .study-rail { top:64px; bottom:14px; left:12px; width:240px; align-items:stretch; padding:16px; box-shadow:none; }
 .study-rail-logo { padding-left:12px; }
 .study-rail-links a,.study-rail-exit,.study-rail-account>summary { justify-content:flex-start; padding:0 12px; width:100%; min-height:42px; }
 .study-rail-label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; }
 .study-rail-popover { left:264px; right:12px; width:auto; bottom:20px; }
}
@media(max-width:560px) { .study-rail-account[open] .study-rail-popover { left:24px; right:24px; bottom:80px; z-index:203; width:auto; } }
/* Six labelled destinations: the name sits under each icon. */
@media(min-width:761px) {
 .study-rail-links a { flex-direction:column; gap:3px; width:72px; min-height:58px; padding:6px 2px; text-align:center; }
 .study-rail-links .study-rail-label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; font:600 10.5px/1.15 Arial,sans-serif; }
 .study-rail-links a[aria-current] .study-rail-label { font-weight:800; }
 .study-rail { width:92px; }
 body[data-study-navigation] { padding-left:120px; }
 .study-rail-popover { left:124px; }
}
/* Pro in the rail (3 Nov 2026): a gold tile with a moving shine for everyone without Pro. */
.study-rail .study-rail-pro { position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; width:72px; min-height:64px; margin-top:auto; flex-shrink:0; padding:6px 2px; box-sizing:border-box;
  color:#2a1a00; background:linear-gradient(160deg,#ffe58a,#ffc83d 45%,#f39c12); text-align:center; font:800 13px/1 Arial,sans-serif; letter-spacing:.06em;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); animation:rail-pro-glow 2.4s ease-in-out infinite; }
.study-rail .study-rail-pro::after { content:''; position:absolute; top:-20%; bottom:-20%; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent); transform:skewX(-18deg); animation:rail-pro-shine 3.2s ease-in-out infinite; }
.study-rail .study-rail-pro svg { width:20px; height:20px; stroke:#2a1a00; fill:rgba(255,255,255,.35); }
.study-rail .study-rail-pro:hover { color:#000; filter:brightness(1.06); }
.study-rail .study-rail-pro .study-rail-pro-label { position:static; width:auto; height:auto; overflow:visible; clip-path:none; font:700 10.5px/1.1 Arial,sans-serif; letter-spacing:0; }
.study-rail-pro-price { display:inline-block; margin-top:2px; padding:2px 5px; background:#140f2e; color:#ffc83d; font:800 10px/1 Arial,sans-serif; letter-spacing:0; }
.study-rail-pro ~ .study-rail-account { margin-top:6px; }
@keyframes rail-pro-shine { 0%,55% { left:-60%; } 85%,100% { left:130%; } }
@keyframes rail-pro-glow { 50% { filter:drop-shadow(0 0 10px rgba(255,200,61,.75)); } }
@media(max-width:760px) {
 .study-rail .study-rail-pro { flex-direction:row; justify-content:flex-start; gap:10px; width:100%; min-height:46px; padding:0 12px; }
 .study-rail .study-rail-pro .study-rail-pro-label { font-size:14px; }
}
/* The new-account offer (159.000đ → 49.000đ for the first month) above the page, with a countdown. */
.study-offer { position:relative; z-index:5; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:12px 16px 0; padding:10px 14px; box-sizing:border-box; color:#fff;
  background:radial-gradient(220px 80px at 8% 0%,rgba(255,200,61,.35),transparent 70%),linear-gradient(90deg,#1d1645,#140f2e); box-shadow:inset 0 0 0 1.5px rgba(255,200,61,.65);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px); font:600 15px/1.35 "Be Vietnam Pro",Arial,sans-serif; }
.study-offer p { margin:0; }
.study-offer-gift { font-size:22px; }
.study-offer-text { flex:1 1 260px; }
.study-offer s { color:#b8c4e6; font-weight:400; }
.study-offer-tag { display:inline-block; margin-right:6px; padding:3px 8px; background:#ff4d6d; color:#fff; font-weight:800; letter-spacing:.02em;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px); }
.study-offer-text small { display:block; margin-top:2px; color:#b8c4e6; font-size:13px; font-weight:400; }
.study-offer strong { color:#ffc83d; font-size:18px; }
.study-offer-clock { color:#56dadc; font-weight:700; white-space:nowrap; }
.study-offer-time { font-family:"Martian Mono",ui-monospace,monospace; font-size:16px; color:#fff; }
.study-offer-go { padding:9px 16px; color:#2a1a00; background:linear-gradient(160deg,#ffe58a,#ffc83d 45%,#f39c12); font-weight:800; text-decoration:none; white-space:nowrap;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.study-offer-go:hover { filter:brightness(1.07); }
.study-offer [data-lang="vi"] { display:none; }
body[data-study-language="vi"] .study-offer [data-lang="en"] { display:none; }
body[data-study-language="vi"] .study-offer [data-lang="vi"] { display:inline; }
.study-offer.is-ended { display:none; }
@media(max-width:760px) { .study-offer { margin:4px 12px 0; padding:10px 12px; gap:6px 10px; font-size:14px; } .study-offer-gift { display:none; } .study-offer-text { flex-basis:100%; } .study-offer-clock { flex:1 1 auto; } .study-offer-go { padding:8px 12px; } }
@media(prefers-reduced-motion:reduce) { .study-rail .study-rail-pro,.study-rail .study-rail-pro::after { animation:none; } .study-rail svg,.study-rail-logo img,.study-rail-links a,.study-rail-exit,.study-rail-account>summary { transition:none; } }
@media print { .study-navigation { display:none!important; } body[data-study-navigation] { padding:0; } }

/* Shared wide sidebar: match the IELTS home on every Study page. */
@media(min-width:761px){body[data-study-navigation]{padding-left:210px}body[data-study-navigation] .study-rail{left:0;top:0;bottom:0;width:210px;align-items:stretch;padding:30px 18px}body[data-study-navigation] .study-rail:before{clip-path:none;background:#140f2e}body[data-study-navigation] .study-rail-logo{padding-left:14px;margin-bottom:15px}body[data-study-navigation] .study-rail-links a{flex-direction:row;justify-content:flex-start;width:100%;min-height:48px;padding:10px 12px;gap:12px}body[data-study-navigation] .study-rail-links .study-rail-label{font:550 13px/1.4 'Be Vietnam Pro',sans-serif;text-align:left}body[data-study-navigation] .study-rail-popover{left:220px}body[data-study-navigation] .study-rail-pro{width:100%;flex-direction:row;gap:8px;min-height:46px}body[data-study-navigation] .study-rail-pro:after{animation:none}body[data-study-navigation] .study-rail-pro{animation:none}}