/* ==============================================================
   1. BIẾN MÀU SẮC & THIẾT LẬP CHUNG
   ============================================================== */
:root {
    --primary: #00b8d4;    /* Xanh Cyan - Đặc trưng xe điện VinFast/Lado */
    --secondary: #2c3e50;  /* Xanh đen - Tạo sự uy tín, trang trọng */
    --accent: #ffc107;     /* Vàng - Điểm nhấn nổi bật */
    --light: #f4f7f6;
    --white: #ffffff;
    --text: #333333;
    --zalo-color: #1182fc;
    --phone-color: #e60808;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; }
body { background: var(--light); color: var(--text); line-height: 1.6; overflow-x: hidden; }
.container { max-width: 1140px; margin: auto; padding: 0 15px; }
a { text-decoration: none; transition: 0.3s; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ==============================================================
   2. HEADER & LOGO (TRANG TRỌNG)
   ============================================================== */
header { 
    background: var(--white); 
    padding: 12px 0; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: sticky; top: 0; z-index: 1000; 
}
.header-flex { display: flex; justify-content: space-between; align-items: center; }
.logo a { font-size: 22px; font-weight: 900; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.accent-color { color: var(--primary); }
.header-info { font-size: 15px; color: #555; }
.header-info b { color: var(--primary); font-size: 17px; }

/* ==============================================================
   3. HERO SECTION & CTA BOX
   ============================================================== */
.hero { padding: 100px 0; color: #fff; background-size: cover; background-position: center; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero-text h1 { font-size: 40px; font-weight: 900; margin-bottom: 20px; line-height: 1.2; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.hero-text h1 span { color: var(--primary); }
.hero-badges { display: flex; gap: 12px; margin-top: 25px; flex-wrap: wrap; }
.hero-badges span { background: rgba(0,0,0,0.6); padding: 8px 18px; border-radius: 5px; border-left: 4px solid var(--primary); font-size: 14px; backdrop-filter: blur(5px); }

.hero-cta-box { 
    background: var(--white); padding: 40px 30px; border-radius: 20px; 
    text-align: center; color: #333; box-shadow: 0 25px 50px rgba(0,0,0,0.2); 
    border-top: 6px solid var(--primary); 
}
.hero-cta-box h3 { font-size: 28px; font-weight: 900; color: var(--phone-color); margin-bottom: 15px; }
.hero-cta-box p { font-size: 15px; color: #666; margin-bottom: 25px; }

.cta-btns { display: flex; flex-direction: column; gap: 15px; }
.btn-cta { 
    padding: 18px; border-radius: 12px; font-weight: bold; font-size: 18px; 
    color: #fff !important; display: flex; align-items: center; justify-content: center; gap: 10px; 
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.btn-cta.call { background: var(--phone-color); box-shadow: 0 6px 20px rgba(230, 8, 8, 0.3); }
.btn-cta.zalo { background: var(--zalo-color); box-shadow: 0 6px 20px rgba(17, 130, 252, 0.3); }
.btn-cta:hover { transform: translateY(-5px); filter: brightness(1.1); }

/* ==============================================================
   4. TOURS, GALLERY & BẢNG GIÁ
   ============================================================== */
.section-title { text-align: center; margin: 70px 0 40px; }
.section-title h2 { font-size: 30px; font-weight: 900; text-transform: uppercase; padding-bottom: 15px; position: relative; color: var(--secondary); }
.section-title h2::after { content: ''; width: 70px; height: 4px; background: var(--primary); position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.section-title p { color: #777; margin-top: 10px; font-size: 16px; }

.tour-grid, .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.tour-card, .gallery-item { background: #fff; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.05); transition: 0.4s; }
.tour-card:hover, .gallery-item:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
.tour-img img, .gallery-item img { width: 100%; height: 230px; object-fit: cover; transition: 0.6s; }
.tour-card:hover img, .gallery-item:hover img { transform: scale(1.08); }
.tour-info { padding: 25px; }
.tour-info h4 { color: var(--secondary); margin-bottom: 10px; font-size: 19px; }
.tour-info p { font-size: 14.5px; color: #666; line-height: 1.5; }

/* Accordion */
.accordion { max-width: 900px; margin: auto; }
.acc-item { background: #fff; margin-bottom: 15px; border-radius: 10px; overflow: hidden; border: 1px solid #eee; box-shadow: 0 5px 15px rgba(0,0,0,0.02); }
.acc-header { 
    width: 100%; padding: 20px 30px; text-align: left; background: #fff; border: none; 
    font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 15px; 
    font-size: 17px; color: var(--secondary); transition: 0.3s;
}
.acc-header i { color: var(--primary); transition: 0.3s; font-size: 18px; }
.acc-header.active { background: #f0fbff; color: var(--primary); }
.acc-header.active i { transform: rotate(180deg); }
.acc-content { max-height: 0; overflow: hidden; transition: 0.4s ease-out; background: #fff; }
.acc-content table { width: 100%; border-collapse: collapse; }
.acc-content td { padding: 18px 30px; border-top: 1px solid #f0f0f0; font-size: 15px; color: #555; }
.acc-content td:last-child { text-align: right; font-weight: bold; color: var(--primary); font-size: 16px; }

/* ==============================================================
   5. BẢN ĐỒ MAPS (MỚI)
   ============================================================== */
.maps { margin-bottom: 60px; }
.map-box { width: 100%; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.1); line-height: 0; }
.map-box iframe { width: 100%; height: 400px; border: none; }

/* ==============================================================
   6. FOOTER & PHÁP LÝ
   ============================================================== */
footer { background: var(--secondary); color: #bdc3c7; padding: 70px 0 30px; margin-top: 80px; position: relative; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 50px; }
.footer-col h4 { color: #fff; margin-bottom: 25px; text-transform: uppercase; font-size: 18px; letter-spacing: 1px; }
.footer-col p { font-size: 14.5px; margin-bottom: 12px; }
.footer-col p i { margin-right: 10px; color: var(--primary); width: 15px; text-align: center; }
.policy-links a { display: block; margin-bottom: 12px; color: #bdc3c7; font-size: 14px; transition: 0.3s; }
.policy-links a:hover { color: var(--primary); padding-left: 8px; }
.footer-certified img { height: 48px; background: #fff; padding: 4px; border-radius: 6px; margin-top: 20px; }
.copy { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 30px; margin-top: 50px; font-size: 13px; text-align: center; }

/* ==============================================================
   7. BỘ NÚT LIÊN HỆ CỐ ĐỊNH
   ============================================================== */
.zalo-container { position: fixed; width: 45px; height: 45px; bottom: 120px; right: 33px; z-index: 999999; }
.zalo-container span { 
    display: flex; align-items: center; justify-content: center; 
    width: 45px; height: 45px; border-radius: 50%; background: #1182fc; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.zalo-container img { width: 85%; padding: 4px; }

.hotline-phone-ring-wrap { position: fixed; bottom: 10px; right: 10px; z-index: 999999; }
.hotline-phone-ring { position: relative; width: 100px; height: 100px; cursor: pointer; display: block; }
.hotline-phone-ring-circle { 
    width: 80px; height: 80px; top: 10px; left: 10px; position: absolute; 
    border-radius: 100%; border: 2px solid #e60808; opacity: .5;
    animation: phonering-alo-circle-anim 1.2s infinite ease-in-out; 
}
.hotline-phone-ring-circle-fill { 
    width: 50px; height: 50px; top: 25px; left: 25px; position: absolute; 
    background-color: rgba(230,8,8,.7); border-radius: 100%;
    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out; 
}
.hotline-phone-ring-img-circle { 
    background-color: #e60808; width: 34px; height: 34px; top: 33px; left: 33px; 
    position: absolute; border-radius: 100%; display: flex; align-items: center; justify-content: center;
    animation: phonering-alo-circle-img-anim 1s infinite ease-in-out; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.hotline-phone-ring-img-circle img { width: 20px; height: 20px; }

@keyframes zoomIn_zalo { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
.zoomIn_zalo { animation-name: zoomIn_zalo; }
.animated_zalo { animation-duration: 1s; animation-fill-mode: both; }
.animated_zalo.infinite { animation-iteration-count: infinite; }
@keyframes pulse_zalo { 0% { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.1, 1.1, 1.1); } 100% { transform: scale3d(1, 1, 1); } }
.pulse_zalo { animation-name: pulse_zalo; }
@keyframes phonering-alo-circle-anim { 0% { transform: rotate(0) scale(.5); opacity: .1; } 30% { transform: rotate(0) scale(.7); opacity: .5; } 100% { transform: rotate(0) scale(1); opacity: .1; } }
@keyframes phonering-alo-circle-fill-anim { 0% { transform: rotate(0) scale(.7); opacity: .6; } 50% { transform: rotate(0) scale(1); opacity: .6; } 100% { transform: rotate(0) scale(.7); opacity: .6; } }
@keyframes phonering-alo-circle-img-anim { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-20deg); } 20%, 40% { transform: rotate(20deg); } }

/* ==============================================================
   8. RESPONSIVE MOBILE
   ============================================================== */
@media (max-width: 768px) {
    header { padding: 10px 0; }
    .header-info { display: none; }
    .hero { padding: 60px 0; }
    .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
    .hero-text h1 { font-size: 30px; }
    .hero-badges { justify-content: center; }
    .hero-cta-box { padding: 30px 20px; margin-top: 10px; }
    .hero-cta-box h3 { font-size: 24px; }
    .section-title h2 { font-size: 24px; }
    .footer-grid { grid-template-columns: 1fr; gap: 30px; }
    .zalo-container { right: 20px; bottom: 110px; }
    .hotline-phone-ring-wrap { right: -15px; bottom: 0; }
}