/*
Theme Name: Geely Binh Duong
Theme URI: https://geelybinhduong.com
Author: Geely Binh Duong
Description: Giao dien landing page mot trang cho dai ly Geely Binh Duong. Bao gom bang gia day du cac dong xe, cong cu tinh gia lan banh va tra gop, form nhan bao gia va thanh lien he dinh day tren dien thoai.
Version: 1.1
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: geely-binh-duong
Tags: one-column, custom-menu, landing-page
*/

/* ============================================================
   BẢNG MÀU & FONT — sửa ở đây là đổi toàn bộ giao diện
   ============================================================ */
:root{
  --ink:#0A0E17;          /* nền tối chủ đạo */
  --ink-2:#141C2B;        /* nền tối phụ */
  --paper:#FFFFFF;
  --mist:#EEF1F6;         /* nền sáng phụ */
  --line:#D7DEE9;
  --blue:#1450C8;         /* xanh thương hiệu */
  --blue-deep:#0C3A96;
  --electric:#17D2B4;     /* nhấn cho dòng xe điện */
  --gold:#C9A15A;         /* nhấn cho dòng cao cấp */
  --text-dim:#6B7891;
  --radius:14px;
  --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  font-family:'Inter','Be Vietnam Pro',system-ui,sans-serif;
  color:var(--ink);background:var(--paper);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Be Vietnam Pro',sans-serif;font-weight:800;line-height:1.15;letter-spacing:-.02em}
.mono{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:14px;
}
.eyebrow.on-dark{color:var(--electric)}
section{padding:78px 0}
.sec-head{max-width:660px;margin-bottom:40px}
.sec-head h2{font-size:clamp(28px,4vw,42px)}
.sec-head p{color:var(--text-dim);margin-top:14px;font-size:17px}

/* ---------- Nút ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:13px 24px;border-radius:999px;font-weight:600;font-size:15px;
  border:1.5px solid transparent;cursor:pointer;transition:.18s;font-family:inherit;
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-deep)}
.btn-ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ink);background:var(--mist)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--mist)}
.btn-outline-light{border-color:rgba(255,255,255,.35);color:#fff}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.1)}
:focus-visible{outline:3px solid var(--electric);outline-offset:2px}

/* ============ THANH TRÊN + MENU ============ */
.topbar{background:var(--ink);color:#9FB0CA;font-size:13px;padding:9px 0}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar a:hover{color:#fff}
header.nav{
  position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:28px;height:70px}
.logo{font-family:'Be Vietnam Pro';font-weight:800;font-size:21px;letter-spacing:-.03em;line-height:1.05}
.logo span{display:block;font-family:'IBM Plex Mono';font-size:10px;font-weight:500;
  letter-spacing:.22em;color:var(--blue);text-transform:uppercase}
.menu{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:500}
.menu a:hover{color:var(--blue)}
.nav-cta{display:flex;gap:10px;align-items:center}
.hotline-top{font-family:'IBM Plex Mono';font-weight:600;font-size:15px;color:var(--blue)}
.burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;margin-left:auto}

/* ============ HERO ============ */
.hero{background:var(--ink);color:#fff;padding:0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:0;align-items:stretch}
.hero-copy{padding:72px 56px 72px 0}
.hero h1{font-size:clamp(34px,5vw,58px);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--electric)}
.hero-lede{color:#A9B8D1;font-size:17px;max-width:460px;margin-bottom:26px}
.hero-price{
  display:flex;align-items:baseline;gap:12px;padding:18px 0 22px;
  border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);
  margin-bottom:26px;
}
.hero-price .lbl{font-size:13px;color:#8FA0BC;font-family:'IBM Plex Mono';letter-spacing:.1em;text-transform:uppercase}
.hero-price .val{font-family:'IBM Plex Mono';font-size:clamp(26px,3.4vw,36px);font-weight:600;color:#fff}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.hero-visual{
  position:relative;min-height:440px;background:linear-gradient(150deg,var(--ink-2),#22314D 60%,#0F1726);
  display:flex;align-items:flex-end;justify-content:center;
}
.hero-visual::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(closest-side at 50% 62%,rgba(23,210,180,.20),transparent 72%);
}
.ph{
  position:relative;z-index:1;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;color:#7E90AE;text-align:center;padding:24px;
}
.ph .ph-name{font-family:'Be Vietnam Pro';font-weight:800;font-size:clamp(28px,4vw,46px);color:rgba(255,255,255,.16);letter-spacing:-.03em}
.ph .ph-note{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.hero-img{
  position:relative;z-index:2;width:100%;height:100%;object-fit:cover;object-position:center 60%;
}
.hero-visual.has-img .ph{display:none}

/* ảnh trong thẻ dòng xe */
.card-thumb{
  position:relative;height:190px;margin:-28px -28px 20px;border-radius:var(--radius) var(--radius) 0 0;
  overflow:hidden;background:linear-gradient(140deg,var(--ink-2),#2A3B5C);
  display:flex;align-items:center;justify-content:center;
}
.card-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.svc-card:hover .card-thumb img{transform:scale(1.04)}
.card-thumb .thumb-fallback{
  font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.42);text-align:center;padding:0 16px;line-height:1.9;
}
.svc-card.has-photo{overflow:hidden}

/* ảnh nhỏ trong đầu bảng giá */
.price-thumb{
  width:96px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;
  background:var(--ink-2);border:1px solid var(--line);
}
@media (max-width:520px){
  .price-thumb{width:64px;height:42px}
  .card-thumb{height:160px}
}
/* tab chọn dòng xe */
.model-tabs{display:flex;gap:8px;flex-wrap:wrap;padding:20px 0 0}
.tab{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#C7D3E6;
  padding:9px 16px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer;transition:.16s;font-family:inherit;
}
.tab:hover{background:rgba(255,255,255,.14);color:#fff}
.tab[aria-selected="true"]{background:#fff;color:var(--ink);border-color:#fff;font-weight:600}

/* ============ DẢI ƯU ĐÃI ============ */
.promo{background:var(--electric);color:#04241F;padding:16px 0;font-weight:600}
.promo .wrap{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;text-align:center}
.promo .tag{background:#04241F;color:var(--electric);padding:3px 11px;border-radius:999px;
  font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ============ THẺ LỢI ÍCH ============ */
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.perk{background:#fff;padding:30px 26px}
.perk h4{font-size:17px;margin-bottom:6px}
.perk p{font-size:14px;color:var(--text-dim)}
.perk .num{font-family:'IBM Plex Mono';font-size:12px;color:var(--blue);letter-spacing:.14em;margin-bottom:14px;display:block}

/* ============ BẢNG GIÁ ============ */
.price-block{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:20px;background:#fff}
.price-head{
  display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--mist);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.price-head h3{font-size:21px}
.badge{
  font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 10px;border-radius:6px;font-weight:600;
}
.badge-ev{background:rgba(23,210,180,.16);color:#0A7A67}
.badge-gas{background:rgba(20,80,200,.12);color:var(--blue-deep)}
.badge-hyb{background:rgba(201,161,90,.18);color:#8A6A26}
.price-head .from{margin-left:auto;font-family:'IBM Plex Mono';font-size:14px;color:var(--text-dim)}
table{width:100%;border-collapse:collapse}
th,td{padding:14px 24px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FAFBFD}
td.price{font-family:'IBM Plex Mono';font-weight:600;white-space:nowrap}
td.spec{color:var(--text-dim);font-size:14px}
td.act a{color:var(--blue);font-weight:600;font-size:14px;white-space:nowrap}
td.act a:hover{text-decoration:underline}
.note{font-size:13px;color:var(--text-dim);margin-top:18px;padding-left:14px;border-left:3px solid var(--line)}

/* ============ CÔNG CỤ TÍNH ============ */
.calc-sec{background:var(--ink);color:#fff}
.calc-sec .sec-head h2{color:#fff}
.calc-sec .sec-head p{color:#9FB0CA}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.calc-panel{background:var(--ink-2);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:28px}
.calc-panel h3{font-size:19px;margin-bottom:20px;color:#fff}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#9FB0CA;margin-bottom:6px;font-weight:500}
.field input,.field select{
  width:100%;padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#fff;font-family:'IBM Plex Mono';font-size:15px;
}
.field input:focus,.field select:focus{border-color:var(--electric);background:rgba(255,255,255,.09)}
.field select option{background:var(--ink-2);color:#fff}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.result{border-top:1px solid rgba(255,255,255,.12);margin-top:20px;padding-top:18px}
.result-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px;color:#B7C4DA}
.result-row .v{font-family:'IBM Plex Mono';color:#fff;font-weight:500}
.result-row.total{border-top:1px dashed rgba(255,255,255,.18);margin-top:10px;padding-top:14px;font-size:16px}
.result-row.total .v{color:var(--electric);font-size:20px;font-weight:600}
.hint{font-size:12px;color:#7E90AE;margin-top:14px;line-height:1.55}

/* ============ DỊCH VỤ ============ */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.svc-card{border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.18s;background:#fff}
.svc-card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 12px 28px rgba(10,14,23,.08)}
.svc-card h4{font-size:18px;margin-bottom:10px}
.svc-card p{font-size:14.5px;color:var(--text-dim)}
.svc-card ul{margin-top:14px;font-size:14px;color:var(--text-dim);list-style:none}
.svc-card li{padding-left:18px;position:relative;margin-bottom:5px}
.svc-card li::before{content:'—';position:absolute;left:0;color:var(--blue)}

/* ============ QUY TRÌNH ============ */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border-top:2px solid var(--ink)}
.step{padding:26px 20px 0 0}
.step .n{font-family:'IBM Plex Mono';font-size:12px;color:var(--blue);font-weight:600;letter-spacing:.1em}
.step h4{font-size:16px;margin:10px 0 6px}
.step p{font-size:13.5px;color:var(--text-dim)}

/* ============ FORM ============ */
.lead{background:var(--mist);border-radius:var(--radius);padding:40px;display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:start}
.lead h2{font-size:clamp(26px,3.4vw,34px);margin-bottom:14px}
.lead .lead-copy p{color:var(--text-dim);margin-bottom:18px}
.contact-line{display:flex;gap:10px;font-size:15px;margin-bottom:10px}
.contact-line b{min-width:74px;color:var(--text-dim);font-weight:500;font-size:14px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:5px;font-weight:500}
.form-grid input,.form-grid select,.form-grid textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font-family:inherit;font-size:15px;background:#fff;color:var(--ink);
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--blue)}
.form-msg{grid-column:1/-1;font-size:14px;padding:12px 14px;border-radius:10px;display:none}
.form-msg.ok{display:block;background:rgba(23,210,180,.15);color:#0A6153;border:1px solid rgba(23,210,180,.4)}
.form-msg.err{display:block;background:#FDECEC;color:#9B1C1C;border:1px solid #F3C0C0}

/* ============ FAQ ============ */
.faq details{border-bottom:1px solid var(--line);padding:18px 0}
.faq summary{font-weight:600;font-size:17px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-family:'Be Vietnam Pro'}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--blue);font-weight:600;font-size:22px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:12px;color:var(--text-dim);font-size:15px;max-width:820px}

/* ============ TIN TỨC ============ */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;transition:.18s}
.news-card:hover{box-shadow:0 12px 28px rgba(10,14,23,.08);transform:translateY(-3px)}
.news-thumb{height:170px;background:linear-gradient(140deg,var(--ink-2),#2A3B5C);display:flex;align-items:center;justify-content:center}
.news-thumb span{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.14em;color:rgba(255,255,255,.4);text-transform:uppercase}
.news-body{padding:20px}
.news-body .date{font-family:'IBM Plex Mono';font-size:12px;color:var(--blue)}
.news-body h4{font-size:17px;margin:8px 0 8px;line-height:1.35}
.news-body p{font-size:14px;color:var(--text-dim)}

/* ============ FOOTER ============ */
footer{background:var(--ink);color:#9FB0CA;padding:60px 0 0;font-size:14.5px}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:40px}
footer h5{color:#fff;font-family:'Be Vietnam Pro';font-size:15px;font-weight:800;margin-bottom:14px;letter-spacing:0}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer a:hover{color:#fff}
.f-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}
.map-embed{border:1px solid rgba(255,255,255,.12);border-radius:10px;height:150px;
  display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono';font-size:11px;
  letter-spacing:.12em;color:#5F708D;text-transform:uppercase;background:var(--ink-2)}

/* ============ NÚT NỔI ============ */
/* nút cuộn lên đầu trang, chỉ hiện sau khi cuộn xuống */
.to-top{
  position:fixed;left:18px;bottom:22px;z-index:85;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;background:rgba(10,14,23,.82);
  color:#fff;border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;transform:translateY(10px);transition:.25s;cursor:pointer;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top svg{width:20px;height:20px}

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:52px 0 40px}
  .hero-visual{min-height:280px;margin:0 -20px}
  .perks{grid-template-columns:repeat(2,1fr)}
  .calc{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .lead{grid-template-columns:1fr;padding:28px}
  .news{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .menu{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;
    padding:16px 20px;border-bottom:1px solid var(--line);gap:14px}
  .menu.open{display:flex}
  .burger{display:block}
  .nav-cta .btn{display:none}

  .to-top{left:14px;bottom:calc(16px + env(safe-area-inset-bottom));width:40px;height:40px}

  section{padding:56px 0}
  th,td{padding:12px 14px;font-size:14px}
  td.spec{display:none} th.spec{display:none}
}
@media (max-width:520px){
  .perks{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;animation:none!important}
}