/* ProofofOnward — Guides (blog) styles. Khớp brand: navy #1F368D + teal #75E1D5. */
:root{ --blue:#1F368D; --blue2:#2a49c0; --mint:#75E1D5; --ink:#141c33; --muted:#5b6579; --line:#e9edf7; --soft:#f4f8ff; }
*{ box-sizing:border-box }
body{ margin:0; font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; color:var(--ink); line-height:1.7; background:#fff; -webkit-font-smoothing:antialiased }
a{ color:var(--blue2) }
.wrap{ max-width:760px; margin:0 auto; padding:0 20px }

/* header */
header{ border-bottom:1px solid var(--line); background:#fff; position:sticky; top:0; z-index:20 }
header .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1000px }
.logo{ display:flex; align-items:center; gap:9px; text-decoration:none; font-weight:800; font-size:20px; color:var(--blue) }
.logo .dot{ width:30px; height:30px; border-radius:9px; background:var(--mint); display:grid; place-items:center }
.logo span.b{ color:#141c33 }
header .r a{ text-decoration:none; font-weight:700; font-size:15px }
header .btn{ background:var(--blue); color:#fff !important; padding:9px 18px; border-radius:999px }

/* article */
article{ padding:36px 0 10px }
.eyebrow{ text-transform:uppercase; letter-spacing:1.5px; font-size:12px; font-weight:800; color:var(--blue2); margin-bottom:10px }
article h1{ font-size:clamp(28px,5vw,40px); line-height:1.15; letter-spacing:-.02em; margin:0 0 18px; text-wrap:balance }
article h2{ font-size:clamp(22px,3.4vw,28px); line-height:1.25; margin:38px 0 12px; letter-spacing:-.01em }
article h3{ font-size:19px; margin:26px 0 8px }
article p{ font-size:17px; margin:0 0 16px; color:#242c3d }
article ul{ padding-left:22px; margin:0 0 18px }
article li{ font-size:17px; margin:0 0 9px; color:#242c3d }
article strong{ color:var(--ink) }
article em{ color:#33415c }
hr{ border:0; border-top:1px solid var(--line); margin:26px 0 }

/* callout / warning */
.callout{ background:var(--soft); border:1px solid #e3ebfa; border-left:4px solid var(--blue); border-radius:12px; padding:16px 20px; margin:22px 0; font-size:16px }
.warn{ background:#fff8e6; border:1px solid #f2e3b3; border-left:4px solid #e8a300; border-radius:12px; padding:16px 20px; margin:22px 0; font-size:16px; color:#5c4a12 }
.warn b{ color:#8a6d3b }

/* CTA buttons */
.cta{ text-align:center; margin:28px 0 }
.cta a{ display:inline-block; text-decoration:none; font-weight:800; font-size:17px; padding:16px 34px; border-radius:999px; color:#fff !important }
.cta .navy{ background:var(--blue) }
.cta .orange{ background:#EA580C }
.cta a:hover{ filter:brightness(1.06) }

/* booking box nhúng trong bài */
.bookbox{ background:linear-gradient(180deg,#f4f8ff,#eef4ff); border:1.5px solid #dbe6ff; border-radius:18px; padding:22px; margin:30px 0; box-shadow:0 8px 30px rgba(31,54,141,.08) }
.bookbox h3{ margin:0 0 4px; font-size:19px; color:var(--blue) }
.bookbox .sub{ margin:0 0 16px; color:var(--muted); font-size:14px }
.bb-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.bb-grid .full{ grid-column:1 / -1 }
.bookbox label{ display:block; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:5px }
.bookbox input{ width:100%; padding:12px 14px; border:1.5px solid #dbe4fb; border-radius:11px; font-size:15px; font-family:inherit; background:#fff; color:var(--ink) }
.bookbox input:focus{ outline:none; border-color:var(--blue2); box-shadow:0 0 0 3px rgba(42,73,192,.12) }
.bb-btn{ grid-column:1 / -1; margin-top:4px; background:var(--blue); color:#fff; border:0; padding:15px; border-radius:12px; font-size:16px; font-weight:800; cursor:pointer; font-family:inherit }
.bb-btn:hover{ background:var(--blue2) }
.bb-note{ text-align:center; font-size:12.5px; color:var(--muted); margin:10px 0 0 }

/* comparison table */
.tblwrap{ overflow-x:auto; margin:22px 0; -webkit-overflow-scrolling:touch; border-radius:12px }
table.cmp{ border-collapse:collapse; width:100%; min-width:580px; font-size:15px }
table.cmp th, table.cmp td{ border:1px solid var(--line); padding:11px 14px; text-align:left; vertical-align:top }
table.cmp thead th{ background:var(--soft); color:var(--blue); font-weight:800; font-size:14px }
table.cmp tbody th{ background:#fbfcfe; font-weight:700; white-space:nowrap }
table.cmp .yes{ color:#16a34a; font-weight:800 }
table.cmp .no{ color:#c0392b; font-weight:800 }
table.cmp .mid{ color:#b7791f; font-weight:700 }

/* numbered steps */
ol.steps{ padding-left:0; counter-reset:s; list-style:none; margin:18px 0 }
ol.steps li{ position:relative; padding:0 0 14px 46px; font-size:17px; color:#242c3d }
ol.steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:-2px; width:30px; height:30px; background:var(--blue); color:#fff; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:15px }

/* related + footer */
.related{ border-top:1px solid var(--line); margin-top:40px; padding-top:24px }
.related h3{ font-size:16px; text-transform:uppercase; letter-spacing:1px; color:var(--muted) }
.related a{ display:block; padding:9px 0; font-weight:600; text-decoration:none; border-bottom:1px solid var(--line) }
footer{ background:#0f1830; color:#aeb8d0; margin-top:50px; padding:30px 0 40px; font-size:13px; line-height:1.7 }
footer a{ color:#c9d3ea }
footer .fl{ display:flex; gap:18px; flex-wrap:wrap; margin-bottom:12px }
footer .fl a{ text-decoration:none; font-weight:600 }

/* guides index */
.ghead{ text-align:center; padding:44px 0 10px }
.ghead h1{ font-size:clamp(30px,5vw,42px); margin:0 0 10px; letter-spacing:-.02em }
.ghead p{ color:var(--muted); font-size:18px; margin:0 auto; max-width:560px }
.glist{ display:grid; gap:16px; padding:24px 0 10px }
.gcard{ border:1.5px solid var(--line); border-radius:14px; padding:20px 22px; text-decoration:none; color:inherit; transition:.15s; display:block }
.gcard:hover{ border-color:var(--blue2); box-shadow:0 8px 24px rgba(31,54,141,.08); transform:translateY(-2px) }
.gcard .tag{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--blue2) }
.gcard h2{ font-size:20px; margin:6px 0 6px; line-height:1.3 }
.gcard p{ margin:0; color:var(--muted); font-size:15px }

@media(max-width:560px){ .bb-grid{ grid-template-columns:1fr } header .r a.support{ display:none } }