/* 5. Booking boxes. The in-post boxes carry inline styles (written that way because the old cache stripped <style>),
   so their look is overridden with !important here; their links are untouched. */
.van .top-cta-box, .van .qa-cta-box, .van .pilot-shortanswer, .van .pilot-pickif, .van .pilot-itinstay, .van .ttn-related-articles {
  background: var(--mat) !important; border: 2px solid var(--reu) !important; border-radius: 12px !important; color: var(--muc) !important;
  padding: 16px 18px !important; font-size: 15.5px !important; box-shadow: none !important;
}
.van .vs-verdict-box { border-color: var(--nghe) !important; background: var(--nghe-nhat) !important; }
/* Box text was written with inline colours for the old light boxes (some white-on-dark); force readable theme colours. */
.van .top-cta-box :not(a), .van .qa-cta-box :not(a), .van .pilot-shortanswer :not(a), .van .pilot-pickif :not(a), .van .pilot-itinstay :not(a) { color: var(--muc) !important; }
.van .pilot-shortanswer a:not([href*="stay22"]), .van .pilot-pickif a:not([href*="stay22"]), .van .pilot-itinstay a:not([href*="stay22"]) { color: var(--link) !important; background: var(--mat) !important; }
.van .pilot-pickif > div, .van .pilot-itinstay > div, .van .pilot-shortanswer > div { background: transparent !important; border-color: var(--ke) !important; }
.van .top-cta-box a[href*="stay22"], .van .qa-cta-box a[href*="stay22"], .van .pilot-shortanswer a[href*="stay22"],
.van .pilot-pickif a[href*="stay22"], .van .pilot-itinstay a[href*="stay22"], .van .map-cta-btn a, .van .s22map a[href*="stay22"] {
  background: var(--reu) !important; color: var(--tren-reu) !important; -webkit-text-fill-color: var(--tren-reu) !important;
  border-radius: 8px !important; font-weight: 700 !important; text-decoration: none !important; padding: 10px 14px !important; display: inline-block !important;
}
.van .s22map { background: var(--reu-nhat) !important; border: 0 !important; border-radius: 12px !important; padding: 16px !important; }
.van .s22map h3 { margin-top: 0 !important; font: 600 22px var(--de) !important; color: var(--muc) !important; }
.van .s22map p { color: var(--muc2) !important; }
.van .ttn-related-articles a { color: var(--link) !important; }

/* Where-to-stay area cards. */
.khu-chon { display: flex; flex-direction: column; gap: 12px; }
.khu-chon-de { font: 600 24px var(--de); margin: 0; }
.khu-the { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.kt { border: 1px solid var(--ke); border-radius: 12px; background: var(--mat); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.kt.goi-y-chon { border: 2px solid var(--nghe); background: var(--nghe-nhat); }
.kt .nhan-nho { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.kt-ten { font: 600 21px var(--de); color: var(--muc); text-decoration: none; }
.kt-ten:hover { text-decoration: underline; }
.kt > span:not(.nhan-nho) { font-size: 14px; color: var(--muc2); }
.kt .nut { margin-top: auto; }

.nut-khu { margin: 1.1em 0 1.6em; }
.nut-ks { margin: -.2em 0 1.4em; }
.nut.nut-nho { padding: 7px 11px; font-size: 13px; white-space: nowrap; }

/* X vs Y: two "Pick this if" cards at the top (links are the post's own, inline-styled -> overridden). */
.doi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.phe { border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.phe.sang { background: var(--mat); border: 2px solid var(--reu); }
.phe.toi { background: #24392D; color: #E7EFE9; }
.phe .nhan-nho { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.phe.sang .nhan-nho { color: var(--link); }
.phe.toi .nhan-nho { color: #F0CF7A; }
.phe b { font: 700 26px var(--de); }
.phe.sang b { color: var(--reu); }
.phe.toi b { color: #fff; }
.phe p { margin: 0; font-size: 15px; line-height: 1.5; }
.phe a[href*="stay22"] { margin: auto 0 0 !important; align-self: flex-start; background: var(--reu) !important; color: #fff !important; -webkit-text-fill-color: #fff !important;
  border-radius: 8px !important; font-weight: 700 !important; padding: 10px 14px !important; text-decoration: none !important; }
.phe.toi a[href*="stay22"] { background: #D9A21B !important; color: #2B2002 !important; -webkit-text-fill-color: #2B2002 !important; }

/* Destination guide: your guides grid. */
.cum { border: 2px solid var(--reu); border-radius: 12px; background: var(--mat); overflow: hidden; }
.cum-dau { background: var(--reu); color: var(--tren-reu); padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.cum-dau span { color: var(--nghe); letter-spacing: 0; text-transform: none; }
@media (prefers-color-scheme: dark) { .cum-dau { background: #1F3328; color: #fff; } }
.cum-luoi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cum-luoi a { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-top: 1px solid var(--ke2); border-left: 1px solid var(--ke2); text-decoration: none; color: inherit; }
.cum-luoi a:nth-child(3n+1) { border-left: 0; }
.cum-luoi small { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--link); }
.cum-luoi b { font: 600 16px/1.3 var(--de); color: var(--muc); }
.cum-luoi a.tien { background: var(--nghe-nhat); }
.cum-luoi a.tien small { color: var(--nghe-dam); }

/* Keep planning. */
.giu-ke { max-width: var(--khung); margin: 30px auto 0; padding: 0 var(--le); display: flex; flex-direction: column; gap: 16px; }
.giu-ke h2 { font: 600 28px var(--de); }
.goc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; background: #24392D; color: #E7EFE9; border-radius: 12px; padding: 16px 18px; }
.goc b { display: block; font: 600 21px var(--de); color: #fff; }
.goc span { font-size: 14px; }
.goc .nut { background: var(--nghe); border-color: var(--nghe); color: #2B2002; -webkit-text-fill-color: #2B2002; }