/*
Theme Name: VinOlympicPro
Theme URI: https://vinhomesngochoi.com/
Author: VinOlympicPro
Description: Ultra-light landing theme with fixed topbar, full-width banner, footer widgets, CTA dock, popup + inline forms, SEO fields, OG/Twitter, JSON-LD, and month/year shortcode.
Version: 2.1.3
Text Domain: vinolympicpro
*/

html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans',sans-serif;color:#1a1a1a;line-height:1.65;background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:#caa25b;text-decoration:none}
a:hover{opacity:.9}
h1,h2,h3,h4{font-weight:800;margin:0 0 .6rem;line-height:1.25;color:#182a57}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.container.full{max-width:none;width:100%}

/* Topbar */
.site-topbar{position:fixed;left:0;right:0;top:0;z-index:9999;background:#fff;border-bottom:1px solid #e9eef5}
body{padding-top:64px}
@media(max-width:1024px){body{padding-top:58px}}
.admin-bar .site-topbar{top:32px}
.site-header--wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.logo img{height:38px}
.primary-nav{display:flex;gap:24px}
.primary-nav li{list-style:none}
.primary-nav a{padding:20px 14px;border-bottom:3px solid transparent;color:#182a57;font-weight:700;transition:border-color .25s ease}
.site-topbar .primary-nav > li > a:hover{border-color:#caa25b!important}
.site-topbar .primary-nav > li.current-menu-item > a,
.site-topbar .primary-nav > li.current_page_item > a,
.site-topbar .primary-nav > li > a[aria-current="page"],
.site-topbar .primary-nav > li > a.is-active{border-color:#caa25b!important}
.site-topbar .primary-nav > li.current_page_parent > a,
.site-topbar .primary-nav > li.current_page_ancestor > a,
.site-topbar .primary-nav > li.current-menu-parent > a,
.site-topbar .primary-nav > li.current-menu-ancestor > a{border-color:transparent!important}

.header-banner{padding:0;background:#f7f5ef;border-top:1px solid #ece5d7;border-bottom:1px solid #ece5d7}
.header-banner .container{max-width:none;width:100%;padding:0}
.header-banner img{width:100%;height:auto;display:block}
.header-banner .banner-inner{display:flex;align-items:center;gap:12px;justify-content:center;font-weight:700}
.header-banner .badge{display:inline-block;padding:4px 8px;border:1px solid #caa25b;border-radius:999px;color:#8a6a2d}

.hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer}
.hamburger span{width:26px;height:2px;background:#182a57;display:block}
.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,320px);background:#fff;box-shadow:-8px 0 24px rgba(0,0,0,.15);transform:translateX(100%);transition:.25s ease;z-index:10000;display:flex;flex-direction:column}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer .top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee}
.mobile-drawer nav a{display:block;padding:14px 18px;border-bottom:1px solid #f2f2f2;font-weight:700;color:#182a57}
.mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.2s;z-index:9998}
.mobile-overlay.show{opacity:1;pointer-events:auto}

.section{padding:54px 0}
.section--tight{padding:32px 0}
.hero{position:relative}
.hero .headline{background:#fff;max-width:640px;margin:-80px auto 24px;box-shadow:0 2px 18px rgba(0,0,0,.08);padding:20px;border-radius:6px}
@media(max-width:768px){.hero .headline{margin:12px 16px 0;border-radius:10px}}

.table-wrap{overflow:auto;border:1px solid #e7e7e7;border-radius:8px}
.pricing{width:100%;border-collapse:collapse;font-size:15px}
.pricing th,.pricing td{padding:14px 12px;border-bottom:1px solid #eee;text-align:left;white-space:nowrap}
.pricing thead th{background:#8a6a2d;color:#fff;font-weight:800;position:sticky;top:0}
.pricing tbody tr:nth-child(even){background:#faf8f3}

.site-footer{background:#0f2a7a;color:#f1f6ff}
.site-footer a {
  color: #cfda f7;
}
.site-footer .tl-network-links__head {
  font-weight: 700;
  font-size: 16px;
  color: #1f2937; /* xám đậm */
  margin-bottom: 12px;
}
.tl-network-links__item a {
  color: #222;
}
.site-footer a:hover{color:#ffffff}
.footer-top{background:#ffffff}
.footer-top .container{padding:24px 16px}
.footer-top .card{background:#ffffff;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:20px}
@media (min-width: 768px){ .footer-top .card{padding:26px} }
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:38px;padding:36px 0}
.site-footer h4{color:#fff;margin-bottom:10px;letter-spacing:.08em;text-transform:uppercase}
.footer-block ul{list-style:none;padding:0;margin:0}
.footer-block li{margin:14px 0;display:flex;gap:10px;align-items:flex-start}
.footer-block li:before{content:"•";color:#f2b11a;font-weight:900;margin-right:8px}
.footer-logo{max-width:220px;margin-bottom:14px}
.footer-meta{margin:10px 0 0 0}
.footer-meta .icon{width:18px;display:inline-block;margin-right:8px;color:#f2b11a}
.copyright{border-top:1px solid rgba(255,255,255,.12);padding:16px 0;color:#c9d5ff;text-align:center}

/* Bottom CTA dock */
.cta-dock{position:fixed;left:0;right:0;bottom:18px;z-index:9998;display:flex;justify-content:center;pointer-events:none}
.cta-dock .wrap{display:flex;gap:10px;pointer-events:auto;background:transparent}
.cta-dock a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:16px;color:#fff;text-decoration:none;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cta-dock a .ico{font-style:normal}
.cta-dock a:nth-child(1){background:#c62828}
.cta-dock a:nth-child(2){background:#0b68ff}
.cta-dock a:nth-child(3){background:#caa25b;color:#0f2248}
.cta-dock.compact a{padding:8px 10px}
@media(max-width:768px){
  .cta-dock{bottom:0}
  .cta-dock .wrap{width:100%;gap:2px}
  .cta-dock a{flex:1;justify-content:center;border-radius:0}
  .cta-dock.compact a{padding:8px 6px}
}
@media(max-width:1024px){.primary-nav{display:none}.hamburger{display:flex}}
@media(max-width:768px){.site-footer .cols{grid-template-columns:1fr}}

/* ==== Forms (inline + modal) ==== */
.oi-form-card{background:#fff;border:1px solid #e9eef5;border-radius:14px;padding:20px;box-shadow:0 10px 30px rgba(0,0,0,.06);max-width:760px;margin:16px auto}
.oi-form-head{margin-bottom:12px}
.oi-form-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8a6a2d}
.oi-form-title{margin:.25rem 0 .5rem;font-weight:800;color:#182a57}
.oi-form-sub{margin:0 0 .5rem;color:#49506b}
.oi-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.oi-form input{width:100%;padding:12px 12px;border:1px solid #d7dce3;border-radius:10px;font-size:15px}
.oi-form input:focus{outline:0;border-color:#8a6a2d;box-shadow:0 0 0 3px rgba(202,162,91,.2)}
.oi-btn{grid-column:1/-1;appearance:none;border:0;background:#caa25b;color:#0f2248;font-weight:700;line-height:1.15;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;border-radius:14px;padding:12px 16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.oi-btn .oi-ico{display:inline-block;width:18px;height:18px;vertical-align:-2px}
.oi-btn:hover{filter:brightness(.98)}
.oi-form-note{grid-column:1/-1;color:#65708d;font-size:12px}
.oi-form-ok{margin-top:10px;padding:12px;border-radius:10px;background:#eaf7f0;color:#0f6b3a;font-weight:600}
.oi-modal{position:fixed;inset:0;z-index:10050;display:none}
.oi-modal.is-open{display:block}
.oi-modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.oi-modal__panel{position:relative;z-index:1;max-width:720px;margin:6vh auto;background:#fff;border-radius:16px;padding:18px 18px 20px;box-shadow:0 30px 80px rgba(0,0,0,.35);border:1px solid #ece7d8}
.oi-modal__close{position:absolute;top:10px;right:10px;border:0;background:#f2f4f8;border-radius:999px;width:34px;height:34px;cursor:pointer}
@media (max-width: 768px){
  .oi-form{grid-template-columns:1fr}
  .oi-modal__panel{margin:10px}
}

/* Chips + badges */
.oi-file-badges{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.oi-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f4ead5;color:#7a5a20;font-weight:700;font-size:13px;border:1px solid #e8d7b5}
.oi-chip .oi-ico{width:16px;height:16px}
.oi-benefits{margin:4px 0 8px;padding-left:18px;color:#49506b}
.oi-benefits li{margin:2px 0}

/* Style cho button */
.btn-outline{
  display:inline-block;
  padding:10px 18px;
  border:2px solid #d4af37;
  color:#d4af37;
  border-radius:6px;
  font-weight:600;
  text-decoration:none;
  transition:all .2s;
}
.btn-outline:hover{
  background:#eac74c;
  color:#fff;
}