/*! MPSG CSS v1.0 - dùng chung toàn site */

/* ===== 0. BIẾN MÀU & KÍCH THƯỚC (đổi 1 chỗ, đổi cả site) ===== */
:root{--mp-green:#02ae3e;--mp-dark:#0a3d26;--mp-soft:#f2f7f4;--mp-text:#1f2a24;--mp-muted:#6b7870;--mp-line:#e3ebe6;--mp-r:12px}

/* ===== 1. TIÊU ĐỀ MỤC ===== */
.mpsg-eyebrow{display:flex;align-items:center;gap:10px;color:var(--mp-green);font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;margin-bottom:6px}
.mpsg-eyebrow:before{content:"";width:28px;height:6px;border-radius:4px;background:var(--mp-green)}
.mpsg-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:22px}
.mpsg-sec{margin-bottom:18px}
.mpsg-head h2,.mpsg-sec h2{margin:0;font-size:1.7rem;font-weight:800;color:var(--mp-text)}
.mpsg-sec h2{margin-bottom:4px}
.mpsg-sec p{margin:0;color:var(--mp-muted);font-size:.92rem}
.mpsg-head a.more{color:var(--mp-green);font-weight:700;font-size:.9rem;white-space:nowrap}

/* ===== 2. HERO TRANG CHỦ + FORM TÌM XE ===== */
.mpsg-hero .mpsg-hero-row{padding:50px 0}
.mpsg-hero-tag{font-size:.8rem;font-weight:700;color:var(--mp-green);letter-spacing:.04em;margin-bottom:.6em}
.mpsg-hero h1,.mpsg-pagehero h1{font-weight:800;color:var(--mp-text);margin-bottom:.2em}
.mpsg-hero h1{font-size:3.2rem;line-height:1.08}
.mpsg-hero h1 span{color:var(--mp-green)}
.mpsg-hero-sub{font-size:1.15rem;font-weight:700;color:var(--mp-text);margin-bottom:.4em}
.mpsg-pills span{display:inline-block;background:#fff;border:1px solid #cfe3d6;border-radius:30px;padding:6px 12px;margin:0 6px 6px 0;font-size:.8rem;font-weight:600}
.mpsg-hero-form .col-inner{background:#fff;border-radius:16px;padding:26px;box-shadow:0 10px 40px rgba(0,0,0,.18)}
.mpsg-form-title{color:var(--mp-green);font-weight:800;font-size:1.15rem;margin-bottom:16px}
.mpsg-form label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:.9rem;font-weight:600}
.mpsg-form input,.mpsg-form select{flex:0 0 62%;width:62%;max-width:62%;height:40px;margin:0 !important;border-radius:8px;background:#f7faf8}
.mpsg-btn{width:100%;margin:6px 0 0;padding:14px;border:0;border-radius:8px;background:var(--mp-green);color:#fff;font-size:1rem;font-weight:800;cursor:pointer}
.mpsg-btn:hover{background:var(--mp-dark)}

/* ===== 3. HERO TRANG CON (Về MPSG, Danh sách xe...) ===== */
.mpsg-pagehero{border-radius:16px;overflow:hidden}
.mpsg-pagehero .overlay{background:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.8) 38%,rgba(255,255,255,0) 68%) !important;opacity:1 !important}
.mpsg-crumb{margin-bottom:10px;font-size:.8rem;color:var(--mp-muted)}
.mpsg-crumb a{color:var(--mp-muted)}
.mpsg-pagehero h1{font-size:2.4rem}
.mpsg-pagehero h2{margin-bottom:.5em;font-size:1.7rem;font-weight:800;line-height:1.2;color:var(--mp-green)}
.mpsg-pagehero p{font-size:.95rem}

/* ===== 4. HỆ THỐNG THẺ DÙNG CHUNG ===== */
/* Khung thẻ: nền trắng + viền + bo góc */
.mpsg-card>.col-inner,.mpsg-team>.col-inner,.mpsg-info>.col-inner,.mpsg-review>.col-inner,.mpsg-step,.mpsg-vm,.mpsg-act{background:#fff;border:1px solid var(--mp-line);border-radius:var(--mp-r)}
/* Các thẻ trong cùng hàng cao bằng nhau */
.mpsg-card,.mpsg-team,.mpsg-info,.mpsg-why,.mpsg-step-col{display:flex}
.mpsg-card>.col-inner,.mpsg-team>.col-inner,.mpsg-info>.col-inner,.mpsg-why>.col-inner{flex:1}
.mpsg-vm-col>.col-inner,.mpsg-act-col>.col-inner,.mpsg-step-col>.col-inner{display:flex}
.mpsg-vm-col>.col-inner>*,.mpsg-act-col>.col-inner>*,.mpsg-step-col>.col-inner>*{flex:1}
.mpsg-vm,.mpsg-act,.mpsg-step{height:100%}
/* Thẻ có ảnh (dịch vụ, con người) */
.mpsg-card>.col-inner,.mpsg-team>.col-inner{overflow:hidden}
.mpsg-card>.col-inner{display:flex;flex-direction:column}
.mpsg-card .img,.mpsg-card .ux-image,.mpsg-team .img,.mpsg-team .ux-image{flex-shrink:0}
.mpsg-card-body{flex:1 1 auto;padding:14px 14px 0}
.mpsg-team-body{padding:12px 14px 14px}
.mpsg-card-body h3{min-height:2.6em}
.mpsg-card-body p{margin-bottom:.5em}
.mpsg-card .button.is-link{align-self:flex-start;margin:auto 0 12px;padding-left:14px;font-size:.9rem;font-weight:700;text-transform:none;color:var(--mp-green)}
/* Tiêu đề + mô tả trong thẻ */
.mpsg-card-body h3,.mpsg-team-body h4,.mpsg-info h4,.mpsg-why h4,.mpsg-vm h4,.mpsg-act h4,.mpsg-step strong{margin:0 0 .3em;font-size:.95rem;font-weight:800}
.mpsg-card-body p,.mpsg-team-body p,.mpsg-info p,.mpsg-why p,.mpsg-vm p,.mpsg-act p,.mpsg-step p{margin:0;font-size:.85rem;color:var(--mp-muted)}
.mpsg-card-body p{margin-bottom:.5em}
/* Icon trong thẻ */
.mpsg-icon,.mpsg-info .ic{margin-bottom:8px;font-size:2rem;line-height:1}

/* ===== 5. BIẾN THỂ TỪNG LOẠI THẺ ===== */
.mpsg-info>.col-inner{padding:18px 14px;text-align:center}
.mpsg-why>.col-inner{padding:18px 12px;border-radius:10px;background:var(--mp-soft)}
.mpsg-review>.col-inner{padding:18px}
.mpsg-car{border-radius:var(--mp-r);overflow:hidden}
.mpsg-car h3{margin-bottom:.4em;font-size:1.4rem;font-weight:800;color:#fff}
.mpsg-step-col{position:relative}
.mpsg-step{display:flex;align-items:flex-start;gap:14px;padding:16px}
.mpsg-step strong{display:block}
.mpsg-step .num{flex:0 0 38px;display:flex;align-items:center;justify-content:center;height:38px;border-radius:50%;background:var(--mp-green);color:#fff;font-weight:800}
.mpsg-vm,.mpsg-act{display:flex;align-items:center}
.mpsg-vm{gap:16px;padding:18px}
.mpsg-vm h4{font-size:1rem}
.mpsg-vm .ic{flex:0 0 64px;display:flex;align-items:center;justify-content:center;height:64px;border-radius:50%;background:var(--mp-soft);font-size:1.9rem}
.mpsg-act{gap:12px;padding:14px;border-radius:10px}
.mpsg-act p{font-size:.8rem}
.mpsg-act .ic{flex:0 0 44px;font-size:1.9rem;line-height:1;text-align:center}
.mpsg-story-img img{border-radius:14px}
.mpsg-story h2{font-size:1.5rem;font-weight:800}
.mpsg-story p{font-size:.95rem;color:var(--mp-muted)}

/* ===== 6. CTA (khối kêu gọi cuối trang) ===== */
.mpsg-cta h2{margin-bottom:.3em;color:#fff;font-weight:800}
.mpsg-cta p{margin:0;color:#e3f1e8}
.mpsg-cta .button{border-radius:10px;font-weight:800;white-space:nowrap}
.mpsg-cta-btns .col-inner{text-align:right}
.mpsg-cta-btns .col-inner>p{display:inline;margin:0}
.mpsg-cta-btns .button{margin:0 0 8px 10px}

/* ===== 7. HEADER ===== */
.header-main{box-shadow:0 1px 0 var(--mp-line)}
.header-nav-main>li>a{font-size:.9rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mp-text)}
.header-nav-main>li>a:hover,.header-nav-main>li.current-menu-item>a,.header-nav-main>li.current-menu-ancestor>a{color:var(--mp-green)}
.header-nav-main>li.current-menu-item>a,.header-nav-main>li.current-menu-ancestor>a{box-shadow:inset 0 -2px 0 var(--mp-green)}
.mpsg-hotline{display:inline-flex;align-items:center;gap:10px;padding:7px 18px 7px 14px;border-radius:8px;background:var(--mp-green);color:#fff !important;line-height:1.15;text-align:left}
.mpsg-hotline:hover{background:var(--mp-dark)}
.mpsg-hotline i{font-size:1.3rem}
.mpsg-hotline span{display:block;font-size:.65rem;font-weight:600;letter-spacing:.04em;opacity:.9}
.mpsg-hotline strong{display:block;font-size:1.05rem;font-weight:800}

/* ===== 8. FOOTER ===== */
.mpsg-footer h5{margin-bottom:.8em;font-size:.95rem;font-weight:800;color:#fff}
.mpsg-footer p{margin-bottom:.6em;font-size:.88rem;color:#cfe3d6}
.mpsg-footer ul{margin:0;list-style:none}
.mpsg-footer li{margin-bottom:7px;font-size:.88rem}
.mpsg-footer a{color:#cfe3d6}
.mpsg-footer a:hover{color:#fff}
.mpsg-footer .mpsg-brand{margin-bottom:2px;font-size:1rem;font-weight:800;color:#fff}
.mpsg-social a{display:inline-block;margin:0 6px 6px 0;padding:6px 14px;border:1px solid rgba(255,255,255,.35);border-radius:30px;font-size:.8rem;font-weight:600;color:#fff}
.mpsg-social a:hover{background:#fff;color:var(--mp-dark)}
.mpsg-branch{height:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(255,255,255,.06)}
.mpsg-branch strong{display:block;margin-bottom:4px;color:#fff}
.mpsg-branch p{margin:0 0 6px}
.mpsg-copy{margin-top:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.mpsg-copy p{margin:0;font-size:.8rem;color:#9fb8a8}

/* ===== 9. THANH LIÊN HỆ MOBILE (ẩn trên máy tính) ===== */
.mpsg-fixbar{display:none}

/* ===== 10. RESPONSIVE ===== */
/* Máy tính (từ 850px) */
@media(min-width:850px){
.mpsg-step-col:not(:last-child):after{content:"→";position:absolute;right:-4px;top:50%;transform:translateY(-50%);z-index:2;color:var(--mp-green);font-weight:700}
}
/* Tablet (dưới 850px) */
@media(max-width:849px){
.mpsg-hero h1{font-size:2.5rem}
.mpsg-pagehero h1{font-size:1.9rem}
.mpsg-pagehero h2{font-size:1.3rem}
.mpsg-pagehero .overlay{background:rgba(255,255,255,.82) !important}
.mpsg-head h2,.mpsg-sec h2{font-size:1.4rem}
.mpsg-hero-form{margin-top:20px}
.mpsg-cta-btns .col-inner{text-align:left}
.mpsg-cta-btns .button{margin:0 10px 8px 0}
.mpsg-footer .col{padding-bottom:10px}
.mpsg-fixbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.18)}
.mpsg-fixbar a{flex:1;padding:12px 4px;font-size:.85rem;font-weight:700;text-align:center;color:#fff}
.mpsg-fixbar .call{background:var(--mp-green)}
.mpsg-fixbar .zalo{background:#0068ff}
.mpsg-fixbar .mess{background:#a334fa}
body{padding-bottom:48px}
}
/* Điện thoại (dưới 550px) */
@media(max-width:549px){
.mpsg-hero .mpsg-hero-row{padding:28px 0}
.mpsg-hero h1{font-size:2rem}
.mpsg-hero-form .col-inner{padding:18px}
.mpsg-form label{flex-direction:column;align-items:stretch;gap:4px}
.mpsg-form input,.mpsg-form select{flex:none;width:100%;max-width:100%}
.mpsg-head{flex-direction:column;align-items:flex-start}
.mpsg-head h2,.mpsg-sec h2{font-size:1.35rem}
.mpsg-cta-btns .button{display:block;width:100%;margin:0 0 10px;text-align:center}
.mpsg-hotline{gap:6px;padding:8px 11px}
.mpsg-hotline span{display:none}
.mpsg-hotline strong{font-size:.85rem}
}