/* ================================================= */
/* 1. THIẾT LẬP CHUNG & BIẾN CSS */
/* ================================================= */
:root {
    --primary-color: #212121; 
    --accent-color: #f2694b;   
    --hero-bg-color: #ffc1a7;
    --news-bg-color: #fff9e3; /* Màu nền vàng nhạt */
    --date-color: var(--accent-color);
    --main-font: "Noto Sans CJK JP", "Roboto", Arial, sans-serif; 
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ================================================= */
/* 2. HEADER/NAVIGATION (FIX LOGO VÀ MENU NGANG) */
/* ================================================= */
#main-header { padding: 20px 0 0; }

.site-header-inner {
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important;
}

/* 🎯 FIX LOGO: Căn chỉnh kích thước ảnh Logo */
.site-branding { 
    margin: 0; 
    padding: 0; 
    flex-shrink: 0; /* Ngăn Logo bị co lại */
}
.custom-logo {
    height: auto; 
    max-width: 180px; /* GIẢM KÍCH THƯỚC LOGO để khớp thiết kế */
    display: block;
}

/* Menu Ngang (Đảm bảo) */
.main-navigation { 
    flex-grow: 1; /* Cho Menu chiếm hết không gian còn lại */
    text-align: right; 
}

.main-navigation ul.main-menu {
    display: flex !important; 
    justify-content: flex-end !important; /* Đẩy Menu sang phải */
    gap: 30px !important; 
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.main-navigation ul.main-menu a {
    text-decoration: none;
    color: var(--primary-color); 
    font-size: 0.95em;
    font-weight: 500;
    display: block; 
    padding: 5px 0;
}
/* ================================================= */
/* 3. HERO SECTION (FIX VỊ TRÍ CHỮ) */
/* ================================================= */
.hero-section {
    background: url('assets/images/top_hero_pc.png') center center no-repeat;
    background-color: var(--hero-bg-color); 
    background-size: cover; 

    min-height: 600px; 
    display: flex;
    align-items: center; 
    position: relative;
    padding: 0;
    overflow: hidden; 
}

.hero-content { 
    /* FIX CUỐI CÙNG: Căn chỉnh vị trí chữ chính xác như PDF */
    max-width: 50%; 
    padding: 0; 
    z-index: 2; 
    
    /* Điều chỉnh vị trí chữ trên Banner */
    transform: translateX(100px); /* Dịch chuyển chữ vào trong container */
    margin-top: -100px; /* Đẩy chữ lên trên (dựa trên thiết kế) */
}

.hero-title { font-size: 2.8em; font-weight: 700; line-height: 1.4; color: var(--primary-color); }


/* ================================================= */
/* 4. NEWS BOX (FIX BỐ CỤC & MŨI TÊN) */
/* ================================================= */
.latest-news-section { 
    position: relative; 
    padding: 0; 
    z-index: 10; 
    margin-top: 80px; 
}

.news-box {
    /* STYLE NỀN VÀNG ĐỒNG NHẤT */
    background-color: var(--news-bg-color); 
    border-radius: 15px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);    
    padding: 30px; 
    margin-top: 20px; 
}
.section-title { font-size: 1.6em; font-weight: 700; text-align: center; margin-bottom: 30px; }

/* Định dạng các mục tin tức */
.news-list-item {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    
    background-color: #ffffff; 
    padding: 10px 15px; 
    border-radius: 8px; 
    margin-bottom: 8px; 
    border: 1px solid #f0f0f0; 
    
    /* 横幅をコンテナに合わせるため、マージンを削除 */
    max-width: 100%; 
    margin-left: 0;
    margin-right: 0;
}

.news-list-item:last-of-type { border-bottom: 1px solid #f0f0f0; } /* Khắc phục lỗi border-bottom */

.news-meta {
    display: flex; 
    align-items: center; 
    font-size: 1.0em;
}

/* Khung Ngày tháng (Bo tròn dài - Pill Shape) */
.news-date-label {
    display: inline-block; 
    background-color: var(--date-color); 
    color: #ffffff; 
    padding: 4px 22px; /* Tăng padding ngang */
    border-radius: 15px; /* TĂNG ĐỘ BO TRÒN */
    font-size: 0.85em; 
    font-weight: 600; 
    margin-right: 15px;
}

.arrow-icon { color: var(--accent-color); font-size: 1.2em; font-weight: 700; }

/* Nút "お知らせ一覧を見る" (Căn giữa và Bo tròn) */
.view-all-link {
    text-align: center; 
    margin-top: 20px;
}
.link-button {
    background-color: var(--accent-color); color: #ffffff !important;
    border: none; font-size: 0.95em; display: inline-block; 
    padding: 12px 30px;
    text-decoration: none; font-weight: 700; 
    border-radius: 25px; /* Bo tròn */
}
/* 🎯 FIX 1: Căn giữa Tiêu đề お知らせ */
.news-box h2.section-title { 
    text-align: center; 
    margin-bottom: 30px; 
}

.news-list-item {
    display: flex; 
    align-items: center; 
    justify-content: space-between;
    
    background-color: #ffffff; 
    padding: 10px 15px; 
    border-radius: 8px; 
    margin-bottom: 8px; 
    border: 1px solid #f0f0f0; 
    
    text-decoration: none;
    color: var(--primary-color);
    transition: box-shadow 0.2s;
}

.news-date-label {
    display: inline-block; 
    background-color: var(--date-color); 
    color: #ffffff; 
    padding: 4px 12px; 
    border-radius: 15px; 
    font-size: 0.85em; 
    font-weight: 600; 
    margin-right: 15px;
}

/* 🎯 FIX 2: Mũi tên màu cam */
.arrow-icon { 
    color: var(--accent-color); /* Sử dụng màu cam từ biến CSS */
    font-size: 1.2em; 
    font-weight: 700; 
}

/* ================================================= */
/* 5. SỨ MỆNH & TÍNH NĂNG (FINAL FIX) */
/* ================================================= */

/* Khối Giới thiệu và Tính năng (Wrapper cho nền vàng) */
.mission-features-box {
    background-color: var(--news-bg-color); 
    border-radius: 15px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    
    padding: 30px; /* Padding NGANG/DỌC cho cả khối */
    margin-top: 20px; 
}



/* Tiêu đề chính (Màu cam) */
.section-title.mission-title-accent {
    color: var(--accent-color); 
    font-size: 1.8em; 
    font-weight: 700;
    text-align: center;
    margin-bottom: 30px; 
}

/* 🎯 FIX: Ảnh 2 cụ già (top_illust_1) - Đảm bảo căn giữa */
.main-mission-illust { text-align: center; margin-bottom: 0px; }
.main-mission-illust img { 
    max-width: 200px; 
    height: auto;
    display: inline-block; /* Quan trọng: để text-align: center hoạt động */
}

/* Khối Giới thiệu và Tính năng (Box Style giống お知らせ) */
.mission-features-box {
    background-color: var(--news-bg-color); 
    border-radius: 15px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
    
    padding: 30px; 
    margin-top: -20px; 
}

/* Khối Giới thiệu Chung (Text) */
.mission-intro-box {
    font-size: 1.3em;
    text-align: center;    
    padding: 10px 0; 
}


* 🎯 FIX 2: Hộp trắng của các dịch vụ (健康情報の提供, 認知症コールセンター) の幅を統一 */
.benefits-rows-container .benefit-row.white-box-feature {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    max-width: 950px; 
    margin-left: auto; 
    margin-right: auto; 
}

/* Đảm bảo hàng cuối cùng không có margin dưới nếu nó là hàng trắng */
.benefits-rows-container .benefit-row.white-box-feature:last-child {
    margin-bottom: 30px;
}


.benefit-row {
    display: flex;
    align-items: center; 
    gap: 40px;
    margin-bottom: 50px; 
}

/* 🎯 FIX 1: Giảm kích thước ảnh và căn trái */
.row-image {
    flex-shrink: 0; 
    width: 150px; /* GIẢM KÍCH THƯỚC ẢNH MINH HỌA */
    max-width: 150px; 
}
.row-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 🎯 FIX 2: Nội dung hiển thị bên phải, H3 không in đậm */
.row-content {
    flex-grow: 1; 
    text-align: left;
}

.row-content h3 {
    font-size: 1.5em; /* Giảm kích thước tiêu đề */
    font-weight: 700; /* IN ĐẬM */
    color: var(--accent-color); /* Màu cam */
    margin-top: 0;
    margin-bottom: 10px;
}
.row-content p {
    font-size: 1.05em;
    line-height: 1.7;
    margin: 0;
}
/* FIX: Thu nhỏ hộp trắng và căn chỉnh */
.benefits-rows-container .benefit-row.white-box-feature {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 30px; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    
    /* Thu nhỏ hộp trắng bằng cách giới hạn chiều rộng bên trong container */
    max-width: 80%; /* Giới hạn chiều rộng hộp trắng */
    margin-left: auto; /* Căn phải (nếu cần) */
    margin-right: auto; /* Căn giữa */
}
/* (Responsive rules) */
@media (max-width: 768px) {
    .highlight-inner {
        flex-direction: column; 
        text-align: center;
    }
    .highlight-image {
        max-width: 150px; 
        margin-bottom: 20px;
    }
    .highlight-content {
        text-align: center;
        max-width: 100%;
    }
}
/* ================================================= */
/* 6. MOBILE RESPONSIVE FIXES (< 768px) */
/* ================================================= */

@media (max-width: 768px) {
    
    /* --- 6.1 HEADER/NAVIGATION --- */
    .site-header-inner {
        flex-direction: column; /* Xếp Logo và Menu dọc */
        align-items: center !important;
        gap: 15px;
    }
    
    /* Logo */
    .custom-logo { max-width: 120px; }
    
    /* Menu */
    .main-navigation { 
        text-align: center;
        margin-left: 0;
        width: 100%;
    }
    .main-navigation ul.main-menu {
        flex-direction: column; /* Xếp Menu dọc */
        gap: 10px !important;
        align-items: center;
    }

    /* --- 6.2 HERO SECTION --- */
    .hero-section {
        min-height: 400px; 
        background-position: center bottom; 
    }
    
    .hero-content {
        max-width: 100%;
        text-align: center;
        transform: none; /* Hủy bỏ transform */
        margin-top: 0;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .hero-title { font-size: 2em; line-height: 1.3; }

    /* --- 6.3 NEWS BOX (お知らせ) --- */
    .latest-news-section {
        margin-top: -50px; /* Điều chỉnh chồng lấn */
    }
    .news-box {
        padding: 20px;
    }
    .news-list-item {
        flex-direction: column; /* Xếp nội dung tin tức dọc */
        align-items: flex-start;
        padding: 10px;
    }
    .news-list-item .news-meta {
        margin-bottom: 5px;
    }
    .news-list-item .arrow-icon {
        position: absolute;
        right: 15px;
        top: 15px;
    }

    /* --- 6.4 FEATURE ROWS (SỨ MỆNH) --- */
.mission-section {
    padding-top: 50px;
    padding-bottom: 100px;
}
    
    /* Giới thiệu chung */
.mission-intro-box p {
    font-size: 1.25em;    
    font-weight: 500;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 100%; 
    text-align: center;    
}

    /* Hộp trắng dịch vụ */
    .benefits-rows-container .benefit-row.white-box-feature {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 20px;
    }
/* 🎯 FIX 1: Nội dung Giới thiệu (Đặt trực tiếp trong Box Vàng) */
.intro-text-final {
    text-align: center; 
    padding-bottom: 30px; /* Khoảng cách dưới đường phân cách */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Đường kẻ phân cách */
    margin-bottom: 30px; /* Khoảng cách giữa text và feature rows */
}

.intro-text-final p {
    font-size: 1.25em; 
    font-weight: 500;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 90%; 
    text-align: center; 
}

    /* Hàng tính năng độc lập (Xếp dọc) */
    .benefit-row {
        flex-direction: column; /* Xếp ảnh và nội dung dọc */
        text-align: center;
        gap: 20px;
        margin-bottom: 30px;
    }
    .row-image {
        max-width: 120px; /* Thu nhỏ ảnh minh họa */
        width: 100%;
        margin: 0 auto;
    }
    .row-content {
        text-align: center;
        max-width: 100%;
    }
    .row-content h3 {
        font-size: 1.3em;
    }

    /* Ảnh 2 cụ già */
    .main-mission-illust img { max-width: 150px; }
}