/* Chỉnh giao diện CHUNG cho các trang công khai (nạp sau CSS riêng trong từng trang). */

/* Chữ nội dung dùng ĐEN TUYỆT ĐỐI cho nổi bật (user 17/10/2026) — thay các tông xám/xám đen cũ */
:root {
    --dark: #000;
    --gray: #000;
    --text-dark: #000;
    --text-muted: #000;
}
body { color: #000; }
/* các chữ nội dung đang ghi cứng màu xám trong từng trang */
.vm-card p, .vm-core-values ul li, .media-card-excerpt, .ct-hours-list li, .ct-address-text, .ct-address-text a,
.ct-form-group label, .pdf-viewer-status, .about-text p, .news-excerpt, .news-card p { color: #000 !important; }

/* Menu con "Lĩnh vực hoạt động" trong "Giới thiệu": mục này nằm gần mép trái màn hình
   nên bung sang PHẢI (kiểu bung sang trái của menu con Tin tức sẽ bị cắt mất). */
@media (min-width: 992px) {
    .dropdown-menu li.has-submenu.submenu-right > ul.submenu {
        left: 100% !important;
        right: auto !important;
        border-right: none;
        border-left: 3px solid var(--primary);
        border-radius: 0 8px 8px 0;
        box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.15);
        transform: translateX(10px);
    }
    .dropdown-menu li.has-submenu.submenu-right:hover > ul.submenu { transform: translateX(0); }
    .dropdown-menu li.has-submenu.submenu-right > a { padding-left: 24px; padding-right: 30px; }
    .dropdown-menu li.has-submenu.submenu-right > a .submenu-arrow { left: auto; right: 12px; }
}

/* ===== Bố cục gọn (18/10/2026 — user: "dư nhiều khoảng trống", "thông tin quá xa nhau") ===== */

/* Dải số liệu + dải kêu gọi (Lĩnh vực, Chi tiết lĩnh vực): nền SÁNG thay xanh đậm (user không thích dải nền tối) */
.stats-section { background: linear-gradient(135deg, #f1f8f3, #eaf5f6) !important; color: #000 !important; border-top: 1px solid #dcebe1; border-bottom: 1px solid #dcebe1; padding: 26px 0 !important; }
.stats-section .stat-item::after { background: #cfe2d5 !important; }
.stats-section .stat-number, .stats-section .stat-item .stat-number { color: #0f4a26 !important; font-weight: 800 !important; }
.stats-section .stat-number span, .stats-section .stat-unit { color: #1f9a46 !important; }
.stats-section .stat-label { color: #000 !important; opacity: .8 !important; }
.cta-section { background: radial-gradient(700px 300px at 85% 0%, rgba(18,161,168,.10), transparent 70%), linear-gradient(180deg, #f4faf6, #fff) !important; color: #000 !important; padding: 40px 0 !important; border-top: 1px solid #e3efe6; }
.cta-section h2, .cta-section h3 { color: #0f4a26 !important; font-weight: 800 !important; }
.cta-section p { color: #000 !important; opacity: .85 !important; }
.cta-section .cta-btn-primary, .cta-section a.btn-white, .cta-section .btn-primary { background: #1f9a46 !important; color: #fff !important; border-color: #1f9a46 !important; }
.cta-section .cta-btn-outline, .cta-section .btn-outline-white, .cta-section a[class*="outline"] { color: #146b3a !important; border-color: #1f9a46 !important; background: #fff !important; }

/* Chi tiết lĩnh vực: ảnh thành lưới (ảnh đầu to, ảnh sau chia đôi) — trước: 3 ảnh xếp dọc rất cao, cột chữ hụt */
.overview-grid .overview-images { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px !important; }
.overview-grid .overview-images img { height: 210px !important; object-fit: cover; }
.overview-grid .overview-images img:first-child { grid-column: 1 / -1; height: 280px !important; }
.overview-grid .overview-images img:only-child { height: auto !important; max-height: 460px; }
.overview-grid .overview-images img:nth-child(2):last-child { grid-column: 1 / -1; }
.overview-grid:has(.overview-images) { align-items: center !important; }
.other-fields-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 991px) { .other-fields-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 576px) {
    .other-fields-grid { grid-template-columns: 1fr !important; }
    .overview-grid .overview-images img, .overview-grid .overview-images img:first-child { height: 200px !important; }
}

/* Tin tức: nút chuyển hai bên khung bài (trước: một nút trên, một nút dưới) */
.news-category-section { margin-bottom: 44px !important; }
@media (min-width: 992px) {
    .category-slider { display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 14px; }
    .category-slider > .slider-prev { grid-column: 1; grid-row: 1; }
    .category-slider > .slider-viewport { grid-column: 2; grid-row: 1; }
    .category-slider > .slider-next { grid-column: 3; grid-row: 1; }
}

/* Giới thiệu: ảnh ghép cao bằng cột chữ (trước: ảnh căn giữa, hở trên dưới) */
.gt-intro-top { align-items: stretch !important; }
.gt-intro-top .gt-collage { height: auto !important; min-height: 440px; }
.about-intro-video-wrap { max-width: 1040px; margin-left: auto !important; margin-right: auto !important; }

/* ===== Điện thoại (18/10/2026 — user: "giao diện chưa tự thích ứng với màn hình điện thoại") ===== */
/* Hiệu ứng trượt vào (AOS fade-left, lệch 100px) làm trang Giới thiệu/PTBV rộng 472px trên màn 390px
   → trình duyệt điện thoại thu nhỏ cả trang. Chặn tràn ngang ở cả html (trang chủ đã làm vậy từ trước). */
html, body { overflow-x: hidden; max-width: 100%; }
/* Thanh trên: tên công ty không co nên đẩy nút ☰ ra ngoài màn hình (x=394 trên màn 390) → không mở được menu */
@media (max-width: 991px) {
    .header-top { gap: 10px; }
    .header-top .logo { min-width: 0 !important; flex: 1 1 auto !important; }
    .header-top .logo-text { min-width: 0 !important; }
    .header-top .header-right { flex: 0 0 auto !important; margin-left: auto; }
}
@media (max-width: 480px) {
    .header-top .logo { gap: 8px !important; }
    .header-top .logo-img { height: 46px !important; }
    .logo-text .company-name { white-space: normal !important; font-size: 12.5px !important; line-height: 1.25 !important; letter-spacing: 0 !important; }
    .logo-text .company-slogan { font-size: 10.5px !important; letter-spacing: 0 !important; overflow: hidden; text-overflow: ellipsis; }
    .header-top .menu-toggle { font-size: 24px !important; padding: 6px 4px !important; }
    /* Banner đầu trang (máy ~360px): "Cao su Phước / Hòa", "Phát triển bền / vững", dòng nhỏ "… TỪ / 1982" bị bẻ (user 18/10: "nhìn kỳ") */
    h1, h2, h3 { text-wrap: balance; }
    .pb-grad { white-space: nowrap; }
    .gt-eyebrow, .iv-eyebrow { letter-spacing: 2px !important; font-size: 11.5px !important; gap: 10px !important; white-space: nowrap; }
    .gt-eyebrow::before, .iv-eyebrow::before { width: 26px !important; }
    .gt-banner-text h1 { font-size: 30px !important; }
    .gt-banner-text p { font-size: 17px !important; }
}

/* ===== Bỏ ô biểu tượng gradient "kiểu AI" ở các trang con (18/10/2026, user duyệt) ===== */
/* Lĩnh vực: thẻ đã có ảnh lớn → bỏ biểu tượng chồng lên ảnh */
.field-card .field-icon { display: none !important; }
/* Chi tiết lĩnh vực: Điểm nổi bật dùng số thứ tự; Lĩnh vực khác bỏ ô biểu tượng, thêm vạch màu */
.highlights-grid { counter-reset: hl; }
.highlights-grid .highlight-card { counter-increment: hl; }
.highlight-card .highlight-icon { background: none !important; box-shadow: none !important; width: auto !important; height: auto !important; margin: 0 auto 6px !important; transform: none !important; }
.highlight-card .highlight-icon i { display: none !important; }
.highlight-card .highlight-icon::before { content: counter(hl, decimal-leading-zero); font-size: 1.7rem; font-weight: 800; color: #1f9a46; line-height: 1; }
.other-field-icon { display: none !important; }
/* Giới thiệu: ô số liệu chỉ còn con số */
.gt-stat { grid-template-columns: 1fr !important; }
.gt-stat > i { display: none !important; }
/* Phòng ban: bỏ ô biểu tượng */
.dp-intro-ic { display: none !important; }
.dp-app > i { display: none !important; }
.dp-app { border-left: 4px solid #1f9a46 !important; }