/* ==========================================================================
   pages.css — phần riêng cho các trang con (giới thiệu, bảng giá, đặt xe,
   liên hệ) và cột "Trang" ở footer. Dùng chung biến màu, bezel, nút từ style.css.
   ========================================================================== */

/* ---------------------------------------------------------------- mở đầu trang con */
.phero{padding:clamp(40px,6vw,84px) 0 clamp(32px,5vw,56px)}
.phero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:40px 56px;align-items:center}
.phero h1{font-size:clamp(2.2rem,5vw,4rem)}
.phero__lede{margin-top:22px;font-size:1.1rem;color:var(--ink-2);max-width:50ch;line-height:1.7}
.phero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.phero__art img{width:100%;height:auto}
.phero .quote{grid-area:auto}

/* ---------------------------------------------------------------- lý do / dịch vụ: lưới 3 cột, gạch kẻ */
.why,.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
.why li,.services li{padding:26px 0 28px;border-top:1px solid var(--hair-2)}
.why h3,.services h3{font-size:1.12rem;margin-bottom:8px}
.why p,.services p{color:var(--ink-2);font-size:.95rem;line-height:1.65}
.services{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}

/* ---------------------------------------------------------------- bảng giá: gồm / chưa gồm */
.incl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.incl .core{padding:26px 28px;height:100%}
.incl h3{font-size:1.15rem;margin-bottom:10px}
.incl li{position:relative;padding:10px 0 10px 24px;border-top:1px solid var(--hair);color:var(--ink-2);font-size:.95rem}
.incl li:first-of-type{border-top:0}
.incl li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:10px;border-radius:50%;background:var(--sea)}
.incl--no li::before{background:var(--sun)}
.ledger__table td.num--na{font-family:var(--body);font-weight:500;font-size:.9rem;color:var(--muted);white-space:normal}

/* ---------------------------------------------------------------- liên hệ: thẻ kênh */
.contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.contact .core{padding:26px;height:100%;display:flex;flex-direction:column;gap:8px}
.contact small{font-size:.8rem;font-weight:600;color:var(--muted)}
.contact b{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.4vw,1.9rem);letter-spacing:-.03em;color:var(--deep);line-height:1.1;overflow-wrap:anywhere}
.contact b+b{margin-top:-2px}
.contact p{color:var(--ink-2);font-size:.95rem;flex:1}
.contact .btn{align-self:flex-start;margin-top:10px}
.contact--hot{grid-column:span 2}
.contact--hot .core{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label label" "num btn" "text btn";align-items:center;gap:8px 24px}
.contact--hot small{grid-area:label}
.contact--hot .contact__nums{grid-area:num;display:flex;flex-wrap:wrap;gap:4px 28px}
.contact--hot p{grid-area:text}
.contact--hot .btn{grid-area:btn;align-self:center;margin:0}
.contact--mail b{font-size:1.15rem;letter-spacing:-.01em}
.contact--wa b{color:#128C4A}
.contact--zalo b{color:#0068FF}
.area-title{margin-top:44px}
.area{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.area li{padding:8px 14px;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--ink);background:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px var(--hair)}

/* ---------------------------------------------------------------- đặt xe: chọn loại hình thuê dạng viên */
.field--pills{grid-column:1/-1}
.field--pills fieldset{border:0;min-width:0}
.field__legend{font-size:.82rem;font-weight:600;color:rgba(220,234,240,.85);padding:0;margin-bottom:8px}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.pills label{position:relative;cursor:pointer}
.pills input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pills span{display:block;padding:10px 16px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;font-weight:500;font-size:.92rem;transition:background .35s var(--ease),color .35s,box-shadow .35s}
.pills input:checked+span{background:var(--sun);color:var(--ink);box-shadow:none;font-weight:600}
.pills input:focus-visible+span{outline:3px solid var(--sun);outline-offset:2px}
.book--page .book__grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr)}

/* ---------------------------------------------------------------- dải kêu gọi cuối trang */
.cta .core{padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:center}
.cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.3rem)}
.cta p{color:rgba(220,234,240,.8);margin-top:10px;max-width:48ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:10px}

/* footer có thêm cột "Trang" */
.foot__grid{grid-template-columns:1.2fr 1fr 1fr .7fr}
.foot__nav a.is-here{color:var(--sun)}

/* ---------------------------------------------------------------- responsive */
@media (max-width:1040px){
  .why{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contacts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .phero__grid{grid-template-columns:1fr;gap:28px}
  .cta .core{grid-template-columns:1fr}
  .book--page .book__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .why,.services,.incl,.contacts{grid-template-columns:1fr}
  .contact--hot{grid-column:auto}
  .contact--hot .core{display:flex}
  .foot__grid{grid-template-columns:1fr}
}
@media (prefers-color-scheme:dark){
  .contact b{color:var(--sea-ink)}
  .contact--zalo b{color:#7DB4FF}
  .contact--wa b{color:#5EE19A}
  .area li{background:rgba(255,255,255,.06)}
}
.phero--solo .phero__grid{grid-template-columns:minmax(0,1fr)}
.phero--solo .phero__lede{max-width:56ch}
.sec__head a{color:var(--sea-ink);text-decoration:underline;text-underline-offset:3px}