Global CSS Custom Properties */
:root {
    
    --primary-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Colors */
    --primary-color: #007bff;
    --primary-dark-color: #0056b3;
    --secondary-color: #28a745;
    --secondary-dark-color: #218838;
    
    --accent-color-darkblue: #003366; /* Tiêu đề, nền footer */
    --accent-color-lightblue: #a7d9f2; /* Viền, chữ footer */
    --accent-color-verylightblue: #e0f7fa; /* Nền hero, chữ footer */
    --accent-color-lightgreen: #90ee90; /* Nhấn nhá ở footer */
    --hover-bg-light-blue: #e6f7ff; /* Nền hover cho menu dropdown */

    --text-color-base: #333;
    --text-color-muted: #555;
    --text-color-subtle: #777;
    --text-color-inverted: #fff;
    --text-color-greenish: #004d40; /* Mô tả sản phẩm, hero */

    --bg-color-body: #f8f9fa;
    --bg-color-header: #fff;
    --bg-color-card: #fff;
    --bg-color-section-light: #f0f4c3; /* Section .bg-light */
    --bg-color-hero-gradient-start: #e0f7fa;
    --bg-color-hero-gradient-end: #b2ebf2;

    --border-color-soft: #ddd; /* Viền header */
    --border-color-menu: #e0e0e0; /* Viền dropdown */
    --border-color-input: var(--accent-color-lightblue);

    /* Box Shadows */
    --box-shadow-header: 0 2px 5px rgba(0, 0, 0, 0.05);
    --box-shadow-dropdown: 0 4px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
    --box-shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.2);
    --box-shadow-hero-content: 0 5px 15px rgba(0, 0, 0, 0.1);

    /* Sizing & Spacing */
    --line-height-base: 1.6;
    --max-width-container: 1200px;
    --padding-container: 20px;
    --padding-section: 80px 0;
    --padding-card: 20px;
    --padding-button-vertical: 8px;
    --padding-button-horizontal: 15px;
    --padding-button-large-vertical: 12px;
    --padding-button-large-horizontal: 24px;
    --gap-grid: 30px;
    --header-logo-max-height: 50px;

    /* Borders */
    --border-radius-small: 5px;
    --border-radius-medium: 8px;
    --border-radius-large: 10px;
    --border-radius-xlarge: 15px;

    /* Transitions */
    --transition-bg: background-color 0.3s ease;
    --transition-color: color 0.3s ease;
    --transition-transform: transform 0.2s ease;
    --transition-opacity: opacity 0.3s ease;
    --transition-visibility: visibility 0.3s ease;
    --transition-box-shadow: box-shadow 0.3s ease;
}

/* Basic Reset & Body */
body {
    font-family: var(--primary-font);
    margin: 0;
    padding: 0;
    line-height: var(--line-height-base);
    color: var(--text-color-base);
    background-color: var(--bg-color-body);
}

.container {
    max-width: var(--max-width-container);
    margin: 0 auto;
    padding: var(--padding-container);
}

/* Header */
header {
    background-color: var(--bg-color-header, #fff);
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color-soft, #ddd);
    box-shadow: var(--box-shadow-header);
    position: relative; /* Giữ nguyên */
}

header .container {
    display: flex;          /* Sử dụng Flexbox để sắp xếp các mục con */
    align-items: center;    /* Căn các mục con theo chiều dọc */
    /* justify-content: space-between; /* Tạm thời bỏ qua để kiểm soát bằng flex-grow và margin */
    width: 100%;            /* Đảm bảo container chiếm đủ chiều rộng */
    padding: 0 var(--padding-container, 20px); /* Áp dụng padding trực tiếp cho container này */
    box-sizing: border-box; /* Quan trọng khi có padding */
    /* flex-wrap: wrap; /* Bỏ comment dòng này để kiểm tra: nếu các mục xuống dòng tức là chúng quá rộng */
}

.logo {
    flex-shrink: 0;         /* QUAN TRỌNG: Không cho phép logo bị co lại */
    /* Tùy chọn: Đặt chiều rộng tối thiểu nếu logo của bạn có thể bị co quá nhỏ */
    /* min-width: 100px; */
    margin-right: 20px;     /* Tạo khoảng cách cố định bên phải logo */
    /* Đảm bảo không có position: absolute từ các thử nghiệm trước */
    position: static;
    transform: none;
}

.logo img {
    max-height: 350px(--header-logo-max-height, 500px); /* Giữ chiều cao logo */
    display: block; /* Tránh khoảng trống thừa bên dưới ảnh */
}

.search-box {
    display: flex;
    align-items: center;    /* Căn input và button bên trong nó */
    flex-grow: 1;           /* Cho phép ô tìm kiếm co giãn để chiếm không gian còn lại */
    flex-shrink: 1;         /* Cho phép ô tìm kiếm co lại nếu cần (quan trọng) */
    max-width: 250px;       /* Giới hạn độ rộng tối đa */
    min-width: 180px;       /* QUAN TRỌNG: Chiều rộng tối thiểu cho ô tìm kiếm để không bị biến mất hoặc quá hẹp */
    /* margin-left: 20px; /* Đã có margin-right từ logo */
    margin-right: 20px;     /* Khoảng cách với thông tin liên hệ */
    /* Đảm bảo không có position: absolute */
    position: static;
    transform: none;
}

/* CSS cho input và button bên trong .search-box giữ nguyên như bạn đã làm đẹp */
.search-box input[type="text"] {
    padding: 10px 15px;
    border: 1px solid var(--border-color-menu, #e0e0e0);
    border-right: none;
    border-radius: 20px 0 0 20px; /* Hoặc var(--border-radius-small, 5px) 0 0 var(--border-radius-small, 5px) */
    flex-grow: 1;
    font-size: 0.9em;
    color: var(--text-color-base, #333);
    background-color: var(--bg-color-header, #fff);
    transition: var(--transition-border-color), var(--transition-box-shadow);
    outline: none;
}
.search-box input[type="text"]:focus {
    border-color: var(--primary-color, #007bff);
    box-shadow: var(--box-shadow-focus);
}
.search-box input[type="text"]::placeholder {
    color: var(--text-color-subtle, #999);
    opacity: 1;
}

.search-box button {
    padding: 10px 15px;
    background-color: var(--primary-color, #007bff);
    color: var(--text-color-inverted, #fff);
    border: 1px solid var(--primary-color, #007bff);
    border-radius: 0 20px 20px 0; /* Hoặc var(--border-radius-small, 5px) var(--border-radius-small, 5px) 0 */
    cursor: pointer;
    transition: var(--transition-bg), var(--transition-border-color), var(--transition-box-shadow);
    font-size: 0.9em;
    line-height: normal;
    outline: none;
}
.search-box button:hover {
    background-color: var(--primary-dark-color, #0056b3);
    border-color: var(--primary-dark-color, #0056b3);
}
.search-box button:focus {
    border-color: var(--primary-dark-color, #0056b3);
    box-shadow: var(--box-shadow-focus);
}


.contact-info-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;         /* QUAN TRỌNG: Không cho phép khối thông tin liên hệ bị co lại */
    white-space: nowrap;    /* Ngăn không cho chữ bên trong xuống dòng, giữ chiều rộng ổn định */
    /* Đảm bảo không có position: absolute */
    position: static;
    transform: none;
}

/* CSS cho các mục con của .contact-info-header giữ nguyên như bạn đã làm đẹp */
.contact-info-header .phone-item,
.contact-info-header .email-item {
    display: flex;
    align-items: center;
    margin-left: 25px;
    padding: 5px 0;
}
.contact-info-header .phone-item:first-child,
.contact-info-header .email-item:first-child {
    margin-left: 0;
}
.contact-info-header i {
    margin-right: 8px;
    color: var(--primary-color, #007bff);
    font-size: 1em;
    line-height: 1;
}
.contact-info-header a {
    text-decoration: none;
    color: var(--text-color-muted, #555);
    font-size: 0.9em;
    font-weight: 500;
    transition: color 0.3s ease;
}
.contact-info-header a:hover {
    color: var(--primary-color, #007bff);
    text-decoration: underline;
}

/* Responsive cho mobile (phần này giữ nguyên như trước) */
@media (max-width: 992px) {
    header .container {
        flex-direction: column;
        align-items: center;
        padding: var(--padding-container, 20px); /* Đảm bảo padding trên mobile */
        /* position: static; /* Đã bỏ ở trên, không cần thiết nếu không dùng absolute nữa */
    }

    .logo,
    .search-box,
    .contact-info-header {
        /* position: static; /* Đã set ở trên */
        /* transform: none; /* Đã set ở trên */
        width: 100%;
        margin-left: 0; /* Reset margin ngang */
        margin-right: 0; /* Reset margin ngang */
        margin-bottom: 15px;
        min-width: unset; /* Reset min-width cho mobile */
    }

    .logo {
        text-align: center;
        margin-right: 0; /* Reset margin phải của logo */
        margin-bottom: 20px;
    }
    
    .search-box {
        order: 2;
        max-width: 100%;
        /* min-width: unset; /* Đã bao gồm trong khối chung ở trên */
    }

    .contact-info-header {
        order: 1;
        flex-direction: column;
        align-items: center;
        white-space: normal; /* Cho phép chữ xuống dòng trên mobile nếu cần */
    }

    .contact-info-header .phone-item,
    .contact-info-header .email-item {
        margin-left: 0; /* Reset margin cho các mục con */
        margin-bottom: 10px;
    }
     .contact-info-header .email-item:last-child, /* Hoặc div:last-child */
     .contact-info-header .phone-item:last-child {
        margin-bottom: 0;
    }
}

/* Icon (hình điện thoại, thư) */
.contact-info-header i {
    margin-right: 8px; /* Tăng khoảng cách giữa icon và chữ */
    color: var(--primary-color, #007bff); /* Màu xanh chủ đạo cho icon (sử dụng biến nếu có) */
    font-size: 1em; /* Kích thước icon cân đối với chữ */
    line-height: 1; /* Đảm bảo icon căn chỉnh tốt */
}

/* Chữ (số điện thoại, email) - giờ là các thẻ <a> */
.contact-info-header a {
    text-decoration: none; /* Bỏ gạch chân mặc định của link */
    color: var(--text-color-muted, #555); /* Màu chữ xám nhẹ (sử dụng biến nếu có) */
    font-size: 0.9em; /* Kích thước chữ vừa phải */
    font-weight: 500; /* Chữ hơi đậm một chút cho dễ đọc hơn */
    transition: color 0.3s ease; /* Hiệu ứng chuyển màu chữ mượt mà khi rê chuột */
}

.contact-info-header a:hover {
    color: var(--primary-color, #007bff); /* Chuyển sang màu xanh chủ đạo khi rê chuột */
    text-decoration: underline; /* Thêm gạch chân khi rê chuột để rõ hơn là link */
}

/* Responsive cho mobile - QUAN TRỌNG: Override lại các style absolute */
@media (max-width: 992px) {
    header .container {
        display: flex;          /* Giữ lại flex để dễ dàng xếp chồng */
        flex-direction: column;
        align-items: center;    /* Căn giữa các mục khi xếp chồng */
        position: static;       /* Bỏ position relative */
        min-height: unset;      /* Reset min-height */
        /* padding: var(--padding-container); /* Đảm bảo padding được áp dụng */
    }

    .logo,
    .search-box,
    .contact-info-header {
        position: static;       /* Bỏ định vị tuyệt đối */
        transform: none;        /* Reset transform */
        width: 100%;            /* Chiếm toàn bộ chiều rộng */
        margin-left: auto;      /* Căn giữa các block nếu chúng không phải 100% */
        margin-right: auto;
        margin-bottom: 15px;
    }

    .logo {
        /* align-self: center; /* Không cần nếu width 100% và text-align center cho img */
        margin-bottom: 20px; /* Khoảng cách với mục tiếp theo */
        /* width: auto; /* Cho phép logo có kích thước tự nhiên nếu không muốn full width */
        text-align: center; /* Căn giữa ảnh logo nếu width 100% */
    }
    .logo img {
        /* max-height: var(--header-logo-max-height); /* Giữ nguyên */
    }

    .search-box {
        order: 2;               /* Thứ tự hiển thị */
        max-width: 70%;        /* Cho phép chiếm full width */
        /* width: 90%; /* Hoặc một % cụ thể nếu không muốn 100% */
    }

    .contact-info-header {
        order: 1;               /* Hiển thị trước ô tìm kiếm trên mobile */
        flex-direction: column; /* Các mục con (phone, email) xếp chồng */
        align-items: center;    /* Căn giữa các mục con */
    }

    .contact-info-header div {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .contact-info-header div:last-child {
        margin-bottom: 0; /* Mục cuối không cần margin bottom */
    }
}

/* Responsive cho mobile - QUAN TRỌNG: Override lại các style absolute */
@media (max-width: 992px) {
    header .container {
        display: flex;          /* Giữ lại flex để dễ dàng xếp chồng */
        flex-direction: column;
        align-items: center;    /* Căn giữa các mục khi xếp chồng */
        position: static;       /* Bỏ position relative */
        min-height: unset;      /* Reset min-height */
        /* padding: var(--padding-container); /* Đảm bảo padding được áp dụng */
    }

    .logo,
    .search-box,
    .contact-info-header {
        position: static;       /* Bỏ định vị tuyệt đối */
        transform: none;        /* Reset transform */
        width: 100%;            /* Chiếm toàn bộ chiều rộng */
        margin-left: auto;      /* Căn giữa các block nếu chúng không phải 100% */
        margin-right: auto;
        margin-bottom: 15px;
    }

    .logo {
        /* align-self: center; /* Không cần nếu width 100% và text-align center cho img */
        margin-bottom: 20px; /* Khoảng cách với mục tiếp theo */
        /* width: auto; /* Cho phép logo có kích thước tự nhiên nếu không muốn full width */
        text-align: center; /* Căn giữa ảnh logo nếu width 100% */
    }
    .logo img {
        /* max-height: var(--header-logo-max-height); /* Giữ nguyên */
    }

    .search-box {
        order: 2;               /* Thứ tự hiển thị */
        max-width: 100%;        /* Cho phép chiếm full width */
        /* width: 90%; /* Hoặc một % cụ thể nếu không muốn 100% */
    }

    .contact-info-header {
        order: 1;               /* Hiển thị trước ô tìm kiếm trên mobile */
        flex-direction: column; /* Các mục con (phone, email) xếp chồng */
        align-items: center;    /* Căn giữa các mục con */
    }

    .contact-info-header div {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .contact-info-header div:last-child {
        margin-bottom: 0; /* Mục cuối không cần margin bottom */
    }
}

/* Main Navigation */
nav {
    width: 100%;
    margin-top: 15px; /* Giữ nguyên hoặc điều chỉnh nếu cần */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-start; /* Hoặc center nếu bạn muốn menu ở giữa */
    flex-wrap: wrap;
}

nav ul li {
    position: relative;
    margin-right: 10px; /* Giảm một chút margin nếu padding của <a> đã đủ */
}
nav ul li:last-child {
    margin-right: 0;
}

nav ul li a { /* Hoặc #main-nav li a */
    text-decoration: none;
    color: var(--text-color-base, #ff0000);
    font-weight: 600;
    padding: 12px 18px;
    display: block;
    border-radius: var(--border-radius-small, 5px);
    transition: color 0.3s ease, background-color 0.2s ease;
    text-transform: uppercase; /* THÊM DÒNG NÀY ĐỂ VIẾT HOA */
    /* letter-spacing: 0.5px; */ /* Nếu bạn muốn, có thể giữ lại hoặc thêm giãn cách chữ */
}

nav ul li a:hover,
nav ul li a:focus {
    color: var(--primary-color, #007bff);
    background-color: var(--hover-bg-light-blue, #e6f7ff); /* Thêm nền nhạt khi hover */
}

/* Kiểu cho mục menu đang active (trang hiện tại) - BẠN CẦN THÊM CLASS "active" VÀO HTML */
nav ul li.active > a, /* Nếu class 'active' nằm trên <li> */
nav ul li a.active {  /* Nếu class 'active' nằm trên <a> */
    color: var(--primary-color, #007bff);
    font-weight: bold; /* Làm cho mục active đậm hơn */
    background-color: var(--hover-bg-light-blue, #e6f7ff); /* Có thể có hoặc không nền */
}
/* Common Dropdown Styles */
.dropdown-menu,
.sub-menu {
    display: none; /* Controlled by JS/hover */
    position: absolute;
    background-color: var(--bg-color-card);
    border: 1px solid var(--border-color-menu);
    box-shadow: var(--box-shadow-dropdown);
    list-style: none;
    padding: 10px 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-opacity), var(--transition-visibility), transform 0.3s ease;
}

.dropdown-menu {
    top: 100%;
    left: 0;
    min-width: 220px;
    z-index: 100;
    transform: translateY(10px);
}

.sub-menu {
    left: 100%;
    top: 0;
    min-width: 200px;
    z-index: 110; 
    transform: translateX(10px);
}

/* Show dropdown on hover/open */
.dropdown:hover > .dropdown-menu,
.dropdown.open > .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-dropdown:hover > .sub-menu,
.sub-dropdown.open > .sub-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Links within dropdowns */
.dropdown-menu li a,
.sub-menu li a {
    font-weight: normal;
    padding: 8px 20px;
    color: var(--text-color-muted);
    display: block; 
    transition: background-color 0.2s ease, color 0.2s ease;
    text-decoration: none; 
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus,
.sub-menu li a:hover,
.sub-menu li a:focus {
    background-color: var(--hover-bg-light-blue);
    color: var(--primary-color);
}

/* Arrow for Sub-dropdown */
.sub-dropdown > a::after {
    content: "\25B8"; /* Right arrow */
    margin-left: 10px;
    float: right;
    color: var(--text-color-subtle);
    font-size: 0.7em;
    line-height: 1.5;
}

/* Hero Section (Slider Banner) */
#hero {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    background-color: var(--bg-color-hero-gradient-start);
    background-image: linear-gradient(to bottom, var(--bg-color-hero-gradient-start), var(--bg-color-hero-gradient-end));
}

.slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none; 
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}

.slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-color-inverted);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px 30px;
    border-radius: var(--border-radius-large);
}

.slide-text h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
    color: var(--text-color-inverted);
}

.slide-text p {
    font-size: 1.2em;
    color: var(--text-color-inverted);
}

.hero-content-overlay {
    position: relative;
    z-index: 2; 
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    color: var(--accent-color-darkblue); 
    background-color: rgba(255, 255, 255, 0.8); 
    padding: 30px 40px;
    border-radius: var(--border-radius-xlarge);
    box-shadow: var(--box-shadow-hero-content);
}

.hero-content h1 {
    font-size: 2.8em;
    margin-bottom: 20px;
    color: var(--accent-color-darkblue);
}

.hero-content p {
    font-size: 1.3em;
    margin-bottom: 30px;
    color: var(--text-color-greenish);
}

/* General Button Styles */
.button {
    display: inline-block;
    padding: var(--padding-button-large-vertical) var(--padding-button-large-horizontal);
    text-decoration: none;
    border-radius: var(--border-radius-small);
    transition: var(--transition-bg), var(--transition-transform);
    font-weight: bold;
    cursor: pointer;
    border: none;
    text-align: center;
    color: var(--text-color-inverted);
}

.button:hover {
    transform: translateY(-2px);
}

.button.primary {
    background-color: var(--primary-color);
}
.button.primary:hover {
    background-color: var(--primary-dark-color);
}

.button.secondary {
    background-color: var(--secondary-color);
}
.button.secondary:hover {
    background-color: var(--secondary-dark-color);
}

.hero-actions .button.primary {
    margin-right: 10px;
}


/* Section Styles */
.section {
    padding: var(--padding-section);
}

.section h2 {
    font-size: 2.5em;
    margin-bottom: 30px;
    text-align: center;
    color: var(--accent-color-darkblue);
}

.bg-light {
    background-color: var(--bg-color-section-light);
}

/* Common Card Styles (for Product, Service, News items) */
.product-item,
.service-item,
.news-item {
    background-color: var(--bg-color-card);
    padding: var(--padding-card);
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-card);
    transition: var(--transition-transform), var(--transition-box-shadow);
}

.product-item:hover,
.service-item:hover,
.news-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-card-hover);
}

.product-item,
.service-item {
    text-align: center; /* News items are not always centered */
}

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gap-grid);
    margin-top: 30px;
}

.product-item img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-medium);
    margin-bottom: 15px;
}

.product-item h3 {
    margin-bottom: 10px;
    font-size: 1.3em;
    color: var(--accent-color-darkblue);
}

.product-item p {
    color: var(--text-color-greenish);
    font-size: 0.95em;
    margin-bottom: 15px;
}

.product-link {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--text-color-inverted);
    padding: var(--padding-button-vertical) var(--padding-button-horizontal);
    text-decoration: none;
    border-radius: var(--border-radius-small);
    transition: var(--transition-bg);
    font-weight: bold;
    font-size: 0.9em;
}
.product-link:hover {
    background-color: var(--primary-dark-color);
}

/* Service Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gap-grid);
    margin-top: 30px;
}

.service-item img {
    max-width: 80px;
    margin-bottom: 15px;
}

.service-item h3 {
    margin-bottom: 10px;
    font-size: 1.3em;
    color: var(--accent-color-darkblue);
}

.service-item p {
    color: var(--text-color-greenish);
    font-size: 0.95em;
    margin-bottom: 15px;
}

.service-link {
    display: inline-block;
    background-color: var(--secondary-color);
    color: var(--text-color-inverted);
    padding: var(--padding-button-vertical) var(--padding-button-horizontal);
    text-decoration: none;
    border-radius: var(--border-radius-small);
    transition: var(--transition-bg);
    font-weight: bold;
    font-size: 0.9em;
}
.service-link:hover {
    background-color: var(--secondary-dark-color);
}

/* News Section */
#news-section .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--gap-grid);
    margin-top: 30px;
}

/* .news-item common styles are already defined above */

.news-item img {
    width: 100%;
    height: 200px; 
    object-fit: cover;
    border-radius: var(--border-radius-medium);
    margin-bottom: 15px;
}

.news-item h3 {
    font-size: 1.4em;
    margin-bottom: 10px;
}

.news-item h3 a {
    text-decoration: none;
    color: var(--accent-color-darkblue);
    transition: var(--transition-color);
}

.news-item h3 a:hover {
    color: var(--primary-color);
}

.news-item p {
    font-size: 0.95em;
    color: var(--text-color-muted);
    margin-bottom: 10px;
}

.news-date {
    font-size: 0.85em;
    color: var(--text-color-subtle);
}

/* Utility Classes */
.text-center {
    text-align: center;
}

.mt-4 { /* Assuming this means margin-top, 1rem or 1.5rem based on context */
    margin-top: 20px; /* Or use a variable like var(--spacing-4) if defined */
}

/* Map Section */
#map-section .map-container {
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--box-shadow-card);
    margin-top: 30px;
}

#map-section iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/* Contact Form Section */
.contact-form {
    max-width: 600px;
    margin: 30px auto 0;
    background-color: var(--bg-color-card);
    padding: 30px;
    border-radius: var(--border-radius-large);
    box-shadow: var(--box-shadow-card);
}

.contact-form .form-group {
    margin-bottom: 20px;
}

.contact-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--accent-color-darkblue);
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: var(--padding-button-large-vertical); /* Consistent padding */
    border: 1px solid var(--border-color-input);
    border-radius: var(--border-radius-small);
    box-sizing: border-box;
    font-size: 1em;
    transition: border-color 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form textarea:focus {
    border-color: var(--primary-color);
    outline: none;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form .button.primary { /* Uses general button styles */
    padding: var(--padding-button-large-vertical) 30px; /* Slightly different horizontal padding */
    font-size: 1.1em;
}

/* Footer */
footer {
    background-color: var(--accent-color-darkblue);
    color: var(--text-color-inverted);
    padding: 40px 0;
    font-size: 0.9em;
}

footer .footer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--gap-grid);
    margin-bottom: 30px;
}

footer .footer-col h3 {
    font-size: 1.3em;
    margin-bottom: 15px;
    color: var(--accent-color-lightgreen); 
}

footer .footer-col p {
    margin-bottom: 10px;
    color: var(--accent-color-verylightblue);
}

footer .footer-col i {
    margin-right: 8px;
    color: var(--accent-color-lightgreen);
}

footer .footer-col a {
    color: var(--accent-color-verylightblue);
    text-decoration: none;
    transition: var(--transition-color);
}

footer .footer-col a:hover {
    color: var(--primary-color);
}

.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #004d80; /* Specific color, can be a variable */
    color: var(--text-color-inverted);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
    transition: var(--transition-bg);
}

.social-links a:hover {
    background-color: var(--primary-color);
}

.copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 30px;
    color: var(--accent-color-lightblue);
}


/* Responsive menu */
.menu-toggle {
    display: none; 
    background: none;
    border: none;
    color: var(--accent-color-darkblue); 
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1.5em;
    order: 3; 
}

/* Ensure #main-nav is targeted correctly based on your HTML structure.
   If ul.main-menu has the ID, then it should be #main-nav.
   If nav has the ID, then #main-nav ul.
   The provided HTML has <ul class="main-menu" id="main-nav"> */
#main-nav { /* Hoặc nav ul, hoặc ul.main-menu */
    display: flex;
    width: 100%;
    /* margin-top: 15px; /* Có thể bạn có dòng này */
    justify-content: space-evenly; /* CHÚNG TA SẼ THAY ĐỔI DÒNG NÀY */
    flex-wrap: wrap; /* Giữ lại để menu xuống dòng trên màn hình hẹp nếu cần */
    list-style: none;
    padding: 0;
    margin: 0; /* Hoặc margin-top: 15px; đã có */
}


@media (max-width: 992px) { /* Cho tablet và mobile */
    header .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .logo, .search-box, .contact-info-header {
        margin-right: 0;
        width: 100%;
        margin-bottom: 10px;
    }
    .search-box {
        order: 2; 
    }
    .contact-info-header {
        order: 1; 
        justify-content: center;
        margin-left: 0;
    }
    .contact-info-header div {
        margin: 0 10px;
    }
    
    nav { /* The parent container of .menu-toggle and #main-nav */
        order: 4; 
        margin-top: 0;
        /* display: flex; flex-direction: column; align-items: flex-end; /* For toggle positioning if needed */
    }

    #main-nav { /* This is the ul.main-menu */
        flex-direction: column;
        display: none; /* Ẩn menu mặc định trên mobile */
        width: 100%;
        background-color: var(--bg-color-header);
        box-shadow: var(--box-shadow-dropdown);
        border-top: 1px solid var(--border-color-menu);
    }
    #main-nav.open { /* Hiện menu khi có class 'open' */
        display: flex; 
    }

    #main-nav li {
        margin: 0;
        border-bottom: 1px solid var(--border-color-menu);
    }
    #main-nav li:last-child {
        border-bottom: none;
    }
    #main-nav li a {
        padding: 12px 20px;
    }
    .menu-toggle {
        display: block; 
        align-self: flex-end; 
        /* margin-top: -50px; Removed, as it depends on exact HTML structure and positioning goals.
           Positioning of menu-toggle is relative to its container (nav).
           If nav is full width, align-self: flex-end works if nav is display:flex.
           In current header .container, the nav is a block item.
           The menu-toggle is inside <nav><div class="container"><button class="menu-toggle"> ... </button></div></nav>
           The provided HTML puts .menu-toggle inside nav > .container, alongside ul#main-nav.
           So align-self should work on it if nav > .container becomes a flex container for menu-toggle and ul.
           Original CSS puts .menu-toggle at order:3 in header .container, this is for the overall header items.
        */
         /* Simplified positioning: ensure it's within header flow */
         position: absolute; /* Or adjust based on exact placement desired */
         top: 15px; /* Align with header padding */
         right: var(--padding-container); /* Align with container padding */
         margin-top: 0; /* Reset if any */
    }

    /* Dropdown trên Mobile */
    .dropdown-menu, .sub-menu {
        position: static; 
        display: none; /* Start hidden, toggle with JS */
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        padding-left: 20px; 
        width: 100%; /* Take full width */
    }

    .dropdown.open > .dropdown-menu,
    .sub-dropdown.open > .sub-menu {
        display: block; 
    }

    .sub-dropdown > a::after {
        content: "\25BE"; /* Down arrow for mobile */
    }
}

@media (max-width: 480px) {
    .search-box input[type="text"] {
        width: auto; 
    }
    .contact-info-header div {
        margin: 0 5px;
    }
    .hero-content h1 {
        font-size: 1.8em;
    }
    .hero-content p {
        font-size: 1em;
    }
    .hero-actions .button {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .section h2 {
        font-size: 1.8em;
    }
    .product-grid, .service-grid, .news-grid {
        grid-template-columns: 1fr; 
    }
    footer .footer-info {
        grid-template-columns: 1fr;
        text-align: center;
    }
    footer .footer-col {
        margin-bottom: 20px;
    }
    .menu-toggle { /* Adjust if needed for very small screens */
        top: 10px;
        right: 10px;
        padding: 8px 12px;
    }
}
/* ----- CSS cho Chấm Tròn Điều Hướng Banner (Slider Dots) ----- */
#hero {
    position: relative; /* Đảm bảo #hero là gốc để định vị tuyệt đối cho dots-container */
}

.slider-dots-container {
    text-align: center;
    position: absolute; /* Định vị tuyệt đối so với #hero */
    bottom: 15px;       /* Cách lề dưới của banner 15px (bạn có thể điều chỉnh) */
    left: 50%;
    transform: translateX(-50%); /* Căn giữa theo chiều ngang */
    z-index: 15;        /* Đảm bảo các chấm nằm trên hình ảnh banner */
    padding: 5px;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 5px; /* Khoảng cách giữa các chấm */
    background-color: rgba(255, 255, 255, 0.6); /* Màu chấm không active (trắng mờ) */
    border-radius: 50%; /* Làm cho nó thành hình tròn */
    display: inline-block;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.1); /* Viền nhẹ cho chấm (tùy chọn) */
}

.dot:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Sáng hơn khi rê chuột */
}

.dot.active {
    background-color: var(--primary-color, #007bff); /* Màu của chấm đang active (sử dụng màu chính của bạn) */
    /* Hoặc một màu trắng đục: background-color: #fff; */
    border-color: var(--primary-dark-color, #0056b3); /* Viền cho chấm active (tùy chọn) */
}
/* Tin tức - Bố cục layout giống giaoxuchinhtoadanang.org */
.news-layout-gxtd {
    display: flex;
    flex-wrap: wrap; /* Cho phép xuống dòng trên màn hình nhỏ */
    gap: 30px; /* Khoảng cách giữa cột trái và cột phải */
}

/* Cột trái - Bài viết chính */
.main-article-column-gxtd {
    flex: 2; /* Chiếm 2/3 không gian, hoặc bạn có thể dùng % ví dụ: flex-basis: 65%; */
    min-width: 300px; /* Đảm bảo có độ rộng tối thiểu */
}

.main-article-item-gxtd {
    background-color: var(--bg-color-card, #fff);
    border-radius: var(--border-radius-medium, 8px);
    box-shadow: var(--box-shadow-card, 0 4px 8px rgba(0,0,0,0.1));
    overflow: hidden; /* Đảm bảo ảnh bo góc đúng */
    transition: var(--transition-transform), var(--transition-box-shadow);
}
.main-article-item-gxtd:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow-card-hover, 0 8px 16px rgba(0,0,0,0.2));
}

.main-article-item-gxtd .main-article-image-link-gxtd img {
    width: 100%;
    height: auto; /* Điều chỉnh theo tỷ lệ ảnh của bạn, ví dụ: 350px hoặc 400px */
    max-height: 400px;
    object-fit: cover;
    display: block;
}

.main-article-item-gxtd .main-article-content-gxtd {
    padding: 20px 25px;
}

.main-article-item-gxtd .main-article-title-gxtd {
    font-size: 1.8em; /* Kích thước tiêu đề lớn */
    margin-bottom: 10px;
    line-height: 1.3;
}
.main-article-item-gxtd .main-article-title-gxtd a {
    color: var(--accent-color-darkblue, #003366);
    text-decoration: none;
}
.main-article-item-gxtd .main-article-title-gxtd a:hover {
    color: var(--primary-color, #007bff);
}

.main-article-item-gxtd .main-article-meta-gxtd {
    font-size: 0.85em;
    color: var(--text-color-subtle, #777);
    margin-bottom: 15px;
}
.main-article-item-gxtd .main-article-meta-gxtd .news-date i,
.main-article-item-gxtd .main-article-meta-gxtd .news-category i {
    margin-right: 5px;
}
.main-article-item-gxtd .main-article-meta-gxtd .news-category a {
    color: var(--text-color-subtle, #777);
    text-decoration: none;
}
.main-article-item-gxtd .main-article-meta-gxtd .news-category a:hover {
    color: var(--primary-color, #007bff);
}


.main-article-item-gxtd .main-article-excerpt-gxtd {
    font-size: 1em;
    color: var(--text-color-muted, #555);
    line-height: 1.6;
    margin-bottom: 15px;
}

.main-article-item-gxtd .read-more-gxtd {
    display: inline-block;
    color: var(--primary-color, #007bff);
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
}
.main-article-item-gxtd .read-more-gxtd:hover {
    text-decoration: underline;
}
.main-article-item-gxtd .read-more-gxtd i {
    margin-left: 3px;
    font-size: 0.9em;
}

/* Cột phải - Danh sách bài viết phụ */
.secondary-articles-column-gxtd {
    flex: 1; 
    min-width: 280px; 
    /* Các style khác giữ nguyên */
}
.secondary-articles-column-gxtd .secondary-column-title-gxtd {
    /* Giữ nguyên style hiện tại */
    font-size: 1.5em;
    color: var(--accent-color-darkblue, #003366);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color, #007bff);
    display: inline-block;
}

/* THAY ĐỔI BẮT ĐẦU TỪ ĐÂY CHO DANH SÁCH BÀI VIẾT PHỤ */
.secondary-articles-column-gxtd .secondary-article-list-gxtd {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid; /* Sử dụng CSS Grid */
    grid-template-columns: repeat(2, 1fr); /* Tạo 2 cột bằng nhau */
    gap: 20px; /* Khoảng cách giữa các bài viết (cả ngang và dọc) */
}

/* Bỏ margin-bottom của li vì đã có 'gap' của grid xử lý khoảng cách */
.secondary-articles-column-gxtd .secondary-article-list-gxtd li {
    margin-bottom: 0; 
    /* padding-bottom: 0; */ /* Bỏ nếu bạn đã dùng border-bottom trước đó */
    /* border-bottom: none; */ /* Bỏ nếu bạn đã dùng border-bottom trước đó */
}
/* Các style cho .secondary-article-item-gxtd, .secondary-article-image-link-gxtd img, 
   .secondary-article-content-gxtd, .secondary-article-title-gxtd, 
   .secondary-article-meta-gxtd giữ nguyên như trước, vì chúng định dạng nội dung BÊN TRONG mỗi bài viết phụ.
   Tuy nhiên, bạn có thể cần điều chỉnh kích thước ảnh hoặc font chữ nếu thấy không gian quá chật hẹp.
*/

.secondary-article-item-gxtd {
    display: flex; 
    gap: 15px; 
    align-items: flex-start; 
    /* Tùy chọn: thêm nền và bo góc nếu muốn mỗi item nổi bật hơn trong grid */
    /* background-color: #f9f9f9; */
    /* border-radius: var(--border-radius-small); */
    /* padding: 10px; */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.05); */
    height: 100%; /* Giúp các card trong cùng một hàng có chiều cao bằng nhau nếu nội dung khác nhau */
}

.secondary-article-item-gxtd .secondary-article-image-link-gxtd img {
    width: 100px; /* Có thể giảm nhẹ nếu 2 cột làm ảnh quá to */
    height: 70px; /* Có thể giảm nhẹ */
    object-fit: cover;
    border-radius: var(--border-radius-small, 5px);
    display: block;
    transition: opacity 0.3s ease;
}
/* Style cho .secondary-article-title-gxtd có thể cần font nhỏ hơn một chút nếu không gian hẹp */
.secondary-article-item-gxtd .secondary-article-title-gxtd {
    font-size: 1em; /* Điều chỉnh nếu cần */
    /* ... các style khác giữ nguyên ... */
}


/* Responsive cho bố cục mới */
/* Khi cột chính và cột phụ xếp chồng lên nhau (main layout stacks) */
@media (max-width: 992px) {
    /* .main-article-column-gxtd và .secondary-articles-column-gxtd đã có flex-basis: 100% */
    /* Lúc này, cột phụ .secondary-articles-column-gxtd sẽ rộng ra.
       Chúng ta có thể vẫn giữ 2 cột cho danh sách bài phụ nếu không gian đủ,
       hoặc chuyển về 1 cột nếu muốn. */
    .secondary-articles-column-gxtd .secondary-article-list-gxtd {
        /* Giữ 2 cột nếu vẫn ổn, hoặc chuyển về 1 cột nếu muốn */
        /* grid-template-columns: repeat(2, 1fr); */ /* Ví dụ giữ 2 cột */
        /* Nếu muốn 1 cột khi cột phụ rộng 100% trên tablet: */
        /* grid-template-columns: 1fr; */
    }
}

/* Khi màn hình rất nhỏ (điện thoại), nên chuyển danh sách bài phụ về 1 cột */
@media (max-width: 767px) {
    .secondary-articles-column-gxtd .secondary-article-list-gxtd {
        grid-template-columns: 1fr; /* Chuyển về 1 cột */
    }

    /* Tùy chỉnh lại cách hiển thị item phụ trên mobile nếu cần */
    .secondary-article-item-gxtd {
        /* Ví dụ: ảnh có thể to hơn một chút khi chỉ có 1 cột */
    }
    .secondary-article-item-gxtd .secondary-article-image-link-gxtd img {
        width: 120px; /* Có thể tăng lại kích thước ảnh */
        height: 80px;
    }
}