/* vsisremote.vsis.net — màu lấy từ logo VsisRemote (assets/branding/svg):
   teal #1c6c86 · navy #0d2c36 · cyan nhấn #7ad3e6; VSIS: #146478 / #0064b4 / #073140 / vàng #ffbe20 */
:root {
  --brand: #1c6c86;
  --brand-2: #146478;
  --accent: #0064b4;
  --cyan: #7ad3e6;
  --navy: #0d2c36;
  --navy-2: #073140;
  --gold: #ffbe20;
  --bg: #f4f7f9;
  --card: #ffffff;
  --text: #1f2a30;
  --muted: #5f7179;
  --border: #e2e8ec;
  --radius: 14px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
svg.i { width: 18px; height: 18px; flex-shrink: 0; }

/* Thanh trên */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(13,44,54,.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav .wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.nav .brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 18px; letter-spacing: -.3px; }
.nav .brand img { width: 32px; height: 32px; border-radius: 8px; }
.nav .brand span { color: var(--cyan); }
.nav .brand:hover { text-decoration: none; }
.nav .links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav .links a { color: rgba(255,255,255,.82); font-size: 14px; font-weight: 500; }
.nav .links a:hover { color: #fff; text-decoration: none; }
@media (max-width: 760px) { .nav .links a.hide-m { display: none; } .nav .links { gap: 14px; } }

/* Nút */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; transition: transform .15s, box-shadow .15s, opacity .15s; font-family: inherit; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; box-shadow: 0 6px 18px rgba(20,100,120,.28); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.btn-outline { background: #fff; color: var(--brand); border: 1px solid var(--brand); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; box-shadow: none; }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 85% -10%, rgba(122,211,230,.25), transparent 60%), linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 45%, var(--brand) 100%); color: #fff; padding: 72px 0 84px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero h1 { font-size: 46px; line-height: 1.15; margin: 0 0 16px; letter-spacing: -1px; font-weight: 800; }
.hero h1 em { font-style: normal; color: var(--cyan); }
.hero p.lead { font-size: 18px; opacity: .88; margin: 0 0 28px; max-width: 560px; }
.hero .tags { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 13px; letter-spacing: 3px; color: var(--cyan); margin-bottom: 18px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .note { margin-top: 18px; font-size: 13.5px; opacity: .75; display: flex; gap: 8px; align-items: center; }
.hero .shots { position: relative; height: 520px; }
.hero .shots img { position: absolute; width: 250px; border-radius: 26px; border: 6px solid #0b232b; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.hero .shots img:nth-child(1) { left: 6%; top: 30px; transform: rotate(-5deg); }
.hero .shots img:nth-child(2) { right: 4%; top: 0; transform: rotate(4deg); }
@media (max-width: 900px) {
  .hero { padding: 48px 0 56px; }
  .hero .wrap { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .hero .shots { height: 380px; }
  .hero .shots img { width: 190px; }
}

/* Khối nội dung */
section.block { padding: 72px 0; }
section.block.alt { background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.sec-head h2 { font-size: 32px; margin: 0 0 10px; color: var(--navy); letter-spacing: -.5px; }
.sec-head p { margin: 0; color: var(--muted); font-size: 16px; }
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }

/* Lưới tính năng */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .features { grid-template-columns: 1fr; } }
.feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; }
.feature .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: rgba(28,108,134,.1); color: var(--brand); margin-bottom: 14px; }
.feature .ic svg { width: 22px; height: 22px; }
.feature h3 { font-size: 17px; margin: 0 0 6px; color: var(--navy); }
.feature p { margin: 0; color: var(--muted); font-size: 14.5px; }
.feature ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 14px; }

/* Ảnh chụp */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery figure { margin: 0; }
.gallery img { border-radius: 18px; border: 1px solid var(--border); box-shadow: 0 10px 30px rgba(13,44,54,.08); }
.gallery figcaption { text-align: center; font-size: 13.5px; color: var(--muted); margin-top: 10px; }

/* Bảng gói */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 980px; margin: 0 auto; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; max-width: 460px; } }
.plan { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 26px 22px; display: flex; flex-direction: column; position: relative; }
.plan.hl { border-color: var(--gold); }
.plan .badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--gold); color: var(--navy); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.plan h3 { margin: 0; font-size: 20px; color: var(--navy); }
.plan .sub { color: var(--muted); font-size: 13.5px; margin: 2px 0 14px; }
.plan .price { font-size: 28px; font-weight: 800; color: var(--brand); margin-bottom: 14px; }
.plan .price small { font-size: 14px; font-weight: 500; color: var(--muted); }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan li { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; font-size: 14.5px; }
.plan li svg { width: 16px; height: 16px; color: var(--brand); margin-top: 4px; flex-shrink: 0; }
.plan li.off { color: var(--muted); }
.plan li.off svg { color: #a3b1b7; }
.plans-note { text-align: center; color: var(--muted); font-size: 14px; margin-top: 22px; }

/* Thẻ tải */
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 980px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dl-grid { grid-template-columns: 1fr; } }
.dl { background: var(--card); border: 2px solid var(--border); border-radius: 16px; padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; position: relative; transition: border-color .2s, box-shadow .2s; }
.dl.mine { border-color: var(--brand); box-shadow: 0 12px 30px rgba(28,108,134,.16); }
.dl .mine-tag { display: none; position: absolute; top: -11px; left: 18px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px; }
.dl.mine .mine-tag { display: block; }
.dl .os { display: flex; align-items: center; gap: 12px; }
.dl .os svg { width: 34px; height: 34px; color: var(--navy); }
.dl h3 { margin: 0; font-size: 19px; color: var(--navy); }
.dl .meta { font-size: 13px; color: var(--muted); min-height: 40px; }
.dl .btns { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.dl .soon { display: inline-block; align-self: flex-start; background: #eef2f4; color: var(--muted); font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: .4px; }

/* Các bước */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; position: relative; }
.step::before { counter-increment: s; content: counter(s); position: absolute; top: 18px; right: 20px; font-size: 40px; font-weight: 800; color: rgba(28,108,134,.12); line-height: 1; }
.step h3 { margin: 0 0 6px; font-size: 17px; color: var(--navy); }
.step p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Hộp ghi chú */
.callout { display: flex; gap: 14px; background: rgba(28,108,134,.07); border: 1px solid rgba(28,108,134,.22); border-radius: 12px; padding: 16px 18px; font-size: 14.5px; color: var(--navy); }
.callout svg { width: 22px; height: 22px; color: var(--brand); flex-shrink: 0; margin-top: 1px; }
.callout.warn { background: rgba(255,190,32,.1); border-color: rgba(255,190,32,.45); }
.callout.warn svg { color: #b7860b; }

/* Hỏi đáp */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0 20px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; transition: transform .2s; color: var(--brand); flex-shrink: 0; margin-top: 3px; }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { margin: 0 0 16px; color: var(--muted); font-size: 14.5px; }

/* Dải kêu gọi */
.band { background: linear-gradient(135deg, var(--navy-2), var(--brand)); color: #fff; border-radius: 20px; padding: 40px; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.band h2 { margin: 0 0 6px; font-size: 26px; }
.band p { margin: 0; opacity: .85; }

/* Chân trang */
footer { background: var(--navy); color: rgba(255,255,255,.72); padding: 40px 0 28px; font-size: 14px; margin-top: 72px; }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { footer .cols { grid-template-columns: 1fr; } }
footer h4 { color: #fff; margin: 0 0 10px; font-size: 14px; }
footer a { color: rgba(255,255,255,.72); display: block; padding: 3px 0; }
footer a:hover { color: #fff; }
footer .copy { border-top: 1px solid rgba(255,255,255,.1); margin-top: 28px; padding-top: 18px; font-size: 13px; }

/* Tiêu đề trang con */
.page-head { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, var(--brand) 100%); color: #fff; padding: 56px 0 60px; text-align: center; }
.page-head h1 { margin: 0 0 10px; font-size: 38px; letter-spacing: -.8px; }
.page-head p { margin: 0 auto; opacity: .85; max-width: 640px; }
@media (max-width: 600px) { .page-head h1 { font-size: 30px; } }

/* ── Nút tải kiểu huy hiệu store (theo note.vsis.net) ── */
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.stores.center { justify-content: center; }
.store { display: inline-flex; align-items: center; gap: 11px; background: #000; color: #fff !important; text-decoration: none !important; border-radius: 12px; padding: 9px 18px 9px 14px; border: 1px solid #333; transition: transform .15s, box-shadow .15s; min-width: 168px; }
.store:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font-size: 10.5px; line-height: 1.2; opacity: .85; font-weight: 500; }
.store b { display: block; font-size: 17px; line-height: 1.2; font-weight: 600; letter-spacing: -.2px; }
.store.full { width: 100%; justify-content: flex-start; }
.store[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.store.alt { background: #fff; color: var(--navy) !important; border-color: var(--border); }
.store.alt:hover { box-shadow: 0 10px 22px rgba(13,44,54,.12); }

/* ── Thẻ nền tảng (thiết kế lại) ── */
.dl2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1040px) { .dl2-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .dl2-grid { grid-template-columns: 1fr; } }
.dl2 { background: var(--card); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; }
.dl2:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(13,44,54,.10); }
.dl2.mine { border-color: var(--brand); box-shadow: 0 18px 40px rgba(28,108,134,.18); }
.dl2 .top { padding: 26px 22px 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; background: linear-gradient(180deg, var(--tint, #f4f7f9) 0%, #fff 100%); }
.dl2 .tile { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; background: var(--tile, #fff); box-shadow: 0 6px 16px rgba(13,44,54,.12), inset 0 0 0 1px rgba(13,44,54,.06); }
.dl2 .tile svg { width: 34px; height: 34px; }
.dl2 h3 { margin: 0; font-size: 21px; color: var(--navy); letter-spacing: -.3px; }
.dl2 .meta { font-size: 13.5px; color: var(--muted); margin-top: -8px; }
.dl2 .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(28,108,134,.1); color: var(--brand); }
.dl2 .chip.grey { background: #eef2f4; color: var(--muted); }
.dl2 .chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.dl2 .bottom { padding: 0 22px 24px; margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.dl2 .sub-link { font-size: 13.5px; text-align: center; font-weight: 600; }
.dl2 .mine-tag { position: absolute; top: 14px; right: 14px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 99px; display: none; }
.dl2.mine .mine-tag { display: block; }
.dl2.win { --tint: #eef6fd; --tile: #fff; }
.dl2.mac { --tint: #f1f2f4; --tile: linear-gradient(160deg, #3a3d42, #111); }
.dl2.android { --tint: #eafaf1; --tile: #fff; }
.dl2.ios { --tint: #eef3fb; --tile: #000; }

.page-head .app-icon { width: 84px; height: 84px; border-radius: 20px; margin: 0 auto 18px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.page-head .stores { margin-top: 26px; }
.store span { text-align: left; }
.dl2 .sub-link { font-size: 12.5px; white-space: nowrap; }

/* Nhật ký thay đổi (/change-log/, sinh bởi build_changelog.py) */
.rel-wrap { max-width: 860px; }
.rel { display: grid; grid-template-columns: 150px 1fr; gap: 24px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 16px; scroll-margin-top: 80px; }
.rel-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rel-ver { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 500; color: var(--navy); }
.rel-ver:hover { text-decoration: none; color: var(--brand); }
.rel-side time { color: var(--muted); font-size: 14px; }
.rel-badge { margin-top: 6px; background: var(--gold); color: var(--navy); font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.rel-sum p { margin: 0 0 8px; font-size: 16px; }
.rel-sum ul { margin: 0 0 8px; padding-left: 20px; }
.rel-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.rel-file { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; font-size: 13.5px; color: var(--text); background: var(--bg); }
.rel-file:hover { border-color: var(--brand); text-decoration: none; }
.rel-file > svg:first-child { width: 16px; height: 16px; flex-shrink: 0; }
.rel-file.mac > svg:first-child { color: var(--navy); }
.rel-file .i { width: 15px; height: 15px; color: var(--brand); }
.rel-more { margin-top: 10px; font-size: 14px; color: var(--muted); }
.rel-more summary { cursor: pointer; color: var(--brand); font-weight: 500; }
.rel-more h4 { margin: 12px 0 4px; color: var(--text); font-size: 14.5px; }
.rel-more p, .rel-more ul { margin: 4px 0; }
.rel-more ul { padding-left: 20px; }
.rel-foot { color: var(--muted); font-size: 14px; text-align: center; margin-top: 24px; }
@media (max-width: 640px) {
  .rel { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; }
  .rel-side { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .rel-badge { margin-top: 0; }
  .rel-file { width: 100%; }
}
.page-head .cta { margin-top: 24px; display: flex; justify-content: center; }

/* Hướng dẫn (/huong-dan/, sinh bởi build_changelog.py) */
.g-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 980px; margin: 0 auto; }
.g-card { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.g-card:hover { border-color: var(--brand); box-shadow: 0 10px 26px rgba(13,44,54,.08); text-decoration: none; }
.g-card h2, .g-card h3 { margin: 0; font-size: 18px; color: var(--navy); line-height: 1.35; }
.g-card p { margin: 0; color: var(--muted); font-size: 14.5px; flex: 1; }
.g-card span { color: var(--brand); font-weight: 700; font-size: 14px; }
.page-head.sm { padding: 40px 0 44px; }
.page-head.sm h1 { font-size: 32px; max-width: 820px; margin: 10px auto 6px; line-height: 1.25; }
.page-head .crumbs { font-size: 13.5px; opacity: .85; }
.page-head .crumbs a { color: var(--cyan); }
.page-head .g-date { font-size: 13.5px; opacity: .75; margin: 0 auto; }
.g-wrap { max-width: 800px; }
.prose { font-size: 16.5px; line-height: 1.75; }
.prose h2 { font-size: 24px; color: var(--navy); margin: 36px 0 12px; letter-spacing: -.3px; line-height: 1.3; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose code { font-family: 'JetBrains Mono', monospace; font-size: .86em; background: #e9eff2; border-radius: 5px; padding: 1px 6px; word-break: break-word; }
.prose table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15px; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--border); padding: 9px 12px; text-align: left; vertical-align: top; }
.prose th { background: #eef4f6; color: var(--navy); }
.prose td { background: var(--card); }
.prose .note, .prose .tip, .prose .warn { border-left: 4px solid var(--brand); background: #e9f3f6; border-radius: 0 10px 10px 0; padding: 12px 16px; margin: 0 0 18px; font-size: 15.5px; }
.prose .tip { border-left-color: #1a9a6b; background: #e8f6f0; }
.prose .warn { border-left-color: #d98a00; background: #fff5e0; }
.g-faq details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 0 16px; margin-bottom: 8px; }
.g-faq summary { cursor: pointer; padding: 12px 0; font-weight: 700; color: var(--navy); }
.g-faq details p { color: var(--muted); }
.g-cta { display: flex; align-items: center; gap: 16px; background: var(--navy); color: #fff; border-radius: var(--radius); padding: 20px 22px; margin: 32px 0 24px; }
.g-cta img { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; }
.g-cta div { flex: 1; }
.g-cta b { font-size: 17px; }
.g-cta p { margin: 2px 0 0; opacity: .8; font-size: 14.5px; }
.g-more { border-top: 1px solid var(--border); padding-top: 18px; }
.g-more ul { padding-left: 20px; margin: 8px 0 0; }
.g-more li { margin-bottom: 6px; }
@media (max-width: 760px) {
  .g-grid { grid-template-columns: 1fr; }
  .page-head.sm h1 { font-size: 25px; }
  .g-cta { flex-direction: column; align-items: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   proxy.vsis.net — các khối riêng của trang proxy
   Phần trên kế thừa từ vsisremote.vsis.net; chỉ thêm, không sửa, để hai site
   còn so sánh được với nhau khi cần.
   ═══════════════════════════════════════════════════════════════════════════ */

.nav .links a.dang { color: #fff; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Khối mô phỏng thông tin proxy ở hero */
.hero .term { background: #07202a; border: 1px solid rgba(122,211,230,.22); border-radius: 16px; box-shadow: 0 26px 60px rgba(0,0,0,.4); overflow: hidden; }
.hero .term-bar { display: flex; align-items: center; gap: 7px; padding: 11px 16px; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.08); }
.hero .term-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.2); }
.hero .term-bar b { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.65); letter-spacing: .2px; }
.hero .term pre { margin: 0; padding: 20px 18px 16px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 13px; line-height: 2; color: var(--cyan); overflow-x: auto; }
.hero .term-note { margin: 0; padding: 0 18px 16px; font-size: 12.5px; color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .hero .term pre { font-size: 11.5px; line-height: 1.9; } }

/* Dải số liệu */
.strip { background: var(--navy-2); color: #fff; }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 16px; }
.strip div { text-align: center; }
.strip b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.5px; color: var(--cyan); }
.strip span { font-size: 13.5px; opacity: .72; }
@media (max-width: 700px) { .strip .wrap { grid-template-columns: repeat(2, 1fr); gap: 18px; } .strip b { font-size: 21px; } }

/* Bảng giá */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
table.gia { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 760px; }
table.gia th, table.gia td { padding: 13px 14px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
table.gia thead th { background: #eef4f6; color: var(--navy); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; text-align: right; vertical-align: bottom; }
table.gia thead th small { display: block; font-size: 10.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); margin-top: 2px; }
table.gia thead th:first-child, table.gia tbody th { text-align: left; }
table.gia tbody th { font-weight: 700; color: var(--navy); font-size: 15px; background: #fbfcfd; }
table.gia tbody tr:last-child th, table.gia tbody tr:last-child td { border-bottom: 0; }
table.gia tbody tr:hover th, table.gia tbody tr:hover td { background: #f4fafb; }
table.gia td.hl { font-weight: 700; color: var(--navy); background: rgba(255,190,32,.1); }
table.gia tbody tr:hover td.hl { background: rgba(255,190,32,.18); }
table.gia td.don { color: var(--brand); font-weight: 700; }
table.gia td.act { text-align: center; }
table.gia td.act .btn { white-space: nowrap; }

/* Lưới ứng dụng */
.uc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .uc-grid { grid-template-columns: 1fr; } }
.uc { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px; }
.uc h3 { margin: 0 0 5px; font-size: 16px; color: var(--navy); }
.uc p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* Trong giá / ngoài giá */
.inc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 920px; margin: 0 auto; }
@media (max-width: 800px) { .inc-grid { grid-template-columns: 1fr; } }
.inc { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; }
.inc h3 { margin: 0 0 14px; font-size: 17px; color: var(--navy); }
.inc ul { list-style: none; padding: 0; margin: 0; }
.inc li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; font-size: 14.5px; color: var(--text); }
.inc li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 5px; }
.inc.yes li svg { color: #1a9a6b; }
.inc.no li { color: var(--muted); }
.inc.no li svg { color: #c2626b; }

/* Hub tài liệu */
.doc-cot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: start; }
@media (max-width: 860px) { .doc-cot { grid-template-columns: 1fr; } }
.doc-nhom { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; }
.doc-head h2 { margin: 0 0 4px; font-size: 18px; color: var(--navy); }
.doc-head p { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); }
.doc-ds { list-style: none; padding: 0; margin: 0; }
.doc-ds li { border-top: 1px solid var(--border); }
.doc-ds li a { display: block; padding: 11px 0; color: var(--text); }
.doc-ds li a:hover { text-decoration: none; }
.doc-ds li a:hover b { color: var(--brand); }
.doc-ds b { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.doc-ds span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Danh sách việc làm được trong tài khoản */
.viec-ds { display: flex; flex-direction: column; gap: 14px; margin: 30px 0; }
.viec { display: flex; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; }
.viec .so { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 500; color: var(--brand); opacity: .55; flex-shrink: 0; line-height: 1.5; }
.viec h3 { margin: 0 0 5px; font-size: 17px; color: var(--navy); }
.viec p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.viec p code { font-family: 'JetBrains Mono', monospace; font-size: .87em; background: #e9eff2; border-radius: 5px; padding: 1px 6px; }
.viec p b { color: var(--text); }
@media (max-width: 560px) { .viec { flex-direction: column; gap: 6px; } }

/* Hỏi đáp theo nhóm */
.faq-nhom { max-width: 820px; margin: 0 auto 36px; }
.faq-nhom > h2 { font-size: 20px; color: var(--navy); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid var(--brand); }

/* Thẻ phần mềm */
.pm-y { list-style: none; padding: 0; margin: 4px 0 0; }
.pm-y li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--muted); padding: 3px 0; }
.pm-y li svg { width: 14px; height: 14px; color: var(--brand); flex-shrink: 0; margin-top: 4px; }
.dl2 .bottom .store { width: 100%; }
.dl2.chrome { --tint: #eef6fd; --tile: #fff; }
.dl2.firefox { --tint: #fff4ec; --tile: #fff; }


/* Bảng giá trên màn hình hẹp: xếp mỗi gói thành một thẻ, khỏi phải vuốt ngang.
   Khách mua proxy phần lớn vào bằng điện thoại nên đây là bố cục chính, không phải bố cục dự phòng. */
@media (max-width: 760px) {
  .tbl-wrap { border: 0; background: transparent; overflow: visible; }
  table.gia { min-width: 0; display: block; }
  table.gia thead { display: none; }
  table.gia tbody { display: block; }
  table.gia tbody tr { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; }
  table.gia tbody th { display: block; background: #eef4f6; border-bottom: 1px solid var(--border); font-size: 16px; padding: 12px 16px; }
  table.gia tbody td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; text-align: right; padding: 9px 16px; border-bottom: 1px solid #f0f4f6; white-space: normal; }
  table.gia tbody td::before { content: attr(data-nhan); font-size: 13px; font-weight: 600; color: var(--muted); text-align: left; }
  table.gia tbody td.don::before { color: var(--brand); }
  table.gia tbody td.hl { background: rgba(255,190,32,.12); }
  table.gia tbody td.act { display: block; text-align: center; padding: 14px 16px; border-bottom: 0; background: #fbfcfd; }
  table.gia tbody td.act .btn { width: 100%; }
  table.gia tbody tr:hover th, table.gia tbody tr:hover td { background: inherit; }
  table.gia tbody tr:hover td.hl { background: rgba(255,190,32,.12); }
}