.page-title-txt {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    z-index: 5;
    color: #fff;
}
.tagline-small {
    font-weight: 600;
    padding-bottom: 1rem;
}
.page-title-txt .main-title {
    font-size: 48px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    letter-spacing: 0.05em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
    background: none;
    padding: 0;
    color: #fff;
}

.sub-hero-bg img{
    width: 100%;
}
.overlay-blue {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #251f1d7d;
    z-index: 2;
}
.zairyo-img {
    display: block;
    text-align: center;
    margin: 3rem 0;
    width: 75%;
}
.button-wrap {
    text-align: center;
  }
.btn-red {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 20px 60px;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(90deg, #2b0505 0%, #db0000 80%, #ff1a1a 100%);
    border: 2px solid #ffffff;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}
.btn-red::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border: 4px solid rgb(255 255 255);
    border-radius: 44px;
    pointer-events: none;
}
  /* Mũi tên */
  .btn-red span {
    margin-left: 10px;
    font-weight: bold;
    font-size: 1.1em;
  }

  /* Hiệu ứng khi di chuột vào (Hover) */
  .btn-red:hover {
    opacity: 0.9;
    transform: translateY(-2px); /* Nút nảy lên nhẹ */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
  }
/* =========================================
   Factory Layout (Thay thế Grid System)
   ========================================= */
.factory-layout-container {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    padding:70px 30px;
}

.factory-sidebar {
    width: 200px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    align-self: flex-start;
    padding: 5rem 1.5rem 0 1.5rem;
}

.sidebar-item {
    margin-bottom: 20px; /* Tăng khoảng cách một chút cho thoáng */
}

.sidebar-item a {
    position: relative; /* Để căn chỉnh mũi tên tuyệt đối theo thẻ a */
    display: block;
    text-decoration: none;
    color: #cccccc; /* Màu xám nhạt khi chưa chọn (giống ảnh mẫu) */
    font-weight: 600;
    font-size: 16px;
    padding-left: 25px; /* Chừa khoảng trống bên trái để chứa mũi tên */
    transition: all 0.3s ease;
}

/* Tạo mũi tên bằng CSS pseudo-element */
.sidebar-item a::before {
    content: "→"; /* Ký tự mũi tên */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%); /* Căn giữa theo chiều dọc */
    color: #e7191f; /* Màu xanh dương của mũi tên */
    font-weight: bold;
    opacity: 0; /* Ẩn mặc định */
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

/* TRẠNG THÁI HOVER (Di chuột vào) */
.sidebar-item a:hover {
    color: #2b5ac9; /* Đổi màu chữ sang xanh nhạt hơn chút hoặc giữ xám tùy ý */
}

.sidebar-item a:hover::before {
    opacity: 1; /* Hiện mũi tên */
    left: 5px; /* Hiệu ứng đẩy mũi tên nhẹ sang phải */
}

/* TRẠNG THÁI ACTIVE (Đang được chọn) */
.sidebar-item a.active {
    color: #333333; /* Màu chữ đậm lên khi được chọn */
    font-weight: 700;
}

.sidebar-item a.active::before {
    opacity: 1; /* Luôn hiện mũi tên */
    color: #e7191f; /* Màu mũi tên xanh */
    left: 0; /* Vị trí cố định */
}
.sidebar-item a {
    text-decoration: none;
    color: #ccc;
    font-weight: 500;
    display: block;
    transition: color 0.3s;
}
.sidebar-item a.active, .sidebar-item a:hover {
    color: #e7191f;
    font-weight: bold;
}
.nt-label {
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, 
        rgba(59, 38, 38, 0.75) 0%,      
        rgba(139, 69, 69, 0.75) 30%,   
        rgba(220, 88, 88, 0.75) 60%,   
        rgba(255, 71, 71, 0.75) 100%    
    );
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    padding: 7px 40px;
    z-index: 2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    width: 100%;
    text-align: center;
}
/* --- CLEAN ROOM SECTION STYLE --- */
.clean-room-container {
    position: relative;
    width: 100%;
    margin-top: 40px; /* Khoảng cách với tiêu đề bên trên */
    margin-bottom: 80px;
    overflow: hidden; /* Bo gọn nếu cần */
}

/* Flexbox để xếp 2 ảnh nằm ngang hàng nhau */
.cr-image-group {
    display: flex;
    width: 100%;
    height: 400px; /* Chiều cao cố định cho khung ảnh */
}

.cr-img-box {
    width: 50%; /* Mỗi ảnh chiếm 1 nửa màn hình */
    height: 100%;
    position: relative;
}

.cr-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh phủ kín khung mà không bị méo */
    display: block;
}

/* --- THANH ĐỎ OVERLAY --- */
.cr-overlay-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 0;
    text-align: center;
    z-index: 10;
    background: linear-gradient(90deg, rgba(59, 38, 38, 0.75) 0%, rgb(170 75 75 / 75%) 30%, rgba(220, 88, 88, 0.75) 60%, rgb(255 42 42 / 65%) 100% );
}

.cr-text {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-family: 'Noto Sans JP', sans-serif;
}
/* --- CHỈNH SỬA VỊ TRÍ TEXT HÀNG 2 --- */

/* Đẩy nội dung chữ của hàng đảo ngược (Row 2) sang phải để sát ảnh hơn */
.facility-row.reverse .fac-text-col {
    padding-left: 80px; /* Tăng/giảm số này để chỉnh độ sát */
    box-sizing: border-box;
}

/* (Tùy chọn) Nếu muốn hàng 1 cũng sát ảnh hơn thì thêm đoạn này */
.facility-row:not(.reverse) .fac-text-col {
    padding-right: 80px; 
}
/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .cr-image-group {
        height: auto; /* Chiều cao tự động trên mobile */
        flex-direction: column; /* Xếp dọc 2 ảnh nếu màn hình quá nhỏ */
    }
    .cr-img-box {
        width: 100%; /* Ảnh full màn hình */
        height: 250px;
    }
    .cr-text {
        font-size: 18px;
    }
}
/* =========================================
   NEW FACILITY STYLE (Giống ảnh mẫu)
   ========================================= */
.facility-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 80px; /* Khoảng cách giữa 2 mục trên dưới */
    margin-bottom: 60px;
    padding: 20px 0;
}

.facility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* --- CỘT ẢNH --- */
.fac-img-col {
    position: relative;
    width: 48%; /* Ảnh chiếm khoảng một nửa */
    z-index: 1;
}

.fac-img-col img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    max-height: 480px;
    object-fit: cover;
}
/* Hộp nền màu hồng */
.fac-bg-shape {
    position: absolute;
    top: 20px;  /* Dịch xuống dưới */
    left: -20px; /* Dịch sang trái */
    width: 100%;
    height: 100%;
    background-color: #f6b3b5; /* Màu hồng giống ảnh */
    border-radius: 12px;
    z-index: 1; /* Nằm dưới ảnh */
}
.fac-label {
    position: absolute;
    top: 25px;
    right: -260px;
    background: linear-gradient(90deg, #3a1c1c 0%, #e7191f 100%);
    color: #fff;
    padding: 10px 30px;
    font-size: 35px;
    font-weight: 700;
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    white-space: nowrap;
}
/* --- CỘT CHỮ --- */
.fac-text-col {
    width: 50%;
}

.fac-text-col p {
    margin-bottom: 10px;
    line-height: 1.8;
    color: #444;
    font-size: 18px;
    padding-top: 5rem;
}

/* --- STYLE RIÊNG CHO DÒNG ĐẢO NGƯỢC (Item 2) --- */
/* Khi dòng có class .reverse thì hộp hồng và nhãn sẽ đổi bên */
.facility-row.reverse .fac-bg-shape {
    left: auto;
    right: -20px; /* Hộp hồng dịch sang phải */
}

.facility-row.reverse .fac-label {
    right: auto;
    left: -260px; /* Nhãn dịch sang trái */
    /* Đảo chiều gradient cho đẹp mắt (Đỏ -> Đen) */
    background: linear-gradient(90deg, #e7191f 0%, #3a1c1c 100%); 
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
.facility-row, .facility-row.reverse {
    flex-direction: row;
    gap: 20px;
}
.zairyo-img {
    width: 75%;
}
.fac-img-col img {
    max-height: 280px;
}
.facility-row:not(.reverse) .fac-text-col {
    padding-right: 0px;
}
.facility-row.reverse .fac-text-col {
    padding-left: 0px;
}
    .fac-img-col, 
    .fac-text-col {
        width: 100%;
        padding: 0 10px; /* Thêm chút lề để hộp hồng không bị cắt */
    }

    /* Điều chỉnh lại vị trí hộp hồng trên mobile cho gọn */
    .fac-bg-shape, 
    .facility-row.reverse .fac-bg-shape {
        top: 15px;
        left: 23px; /* Căn đều hơn trên mobile */
        width: 95%;
    }

    /* Nhãn nhỏ lại chút trên mobile */
    .fac-label, 
    .facility-row.reverse .fac-label {
        font-size: 16px;
        padding: 8px 20px;
        right: 0;
        left: auto;
        top: 20px;
    }
}


/* Ẩn sidebar trên mobile nếu cần */
@media (max-width: 768px) {
    .factory-layout-container { flex-direction: column; }
    .factory-sidebar { width: 100%; display: none; gap: 15px; overflow-x: auto; }
.custom-spec-table thead th {
    text-wrap: nowrap;
}
.facility-list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 60px;
    padding: 20px 0;
}


}

/* Main Content Area */
.factory-main {
    flex-grow: 1;
    width: 100%; /* Đảm bảo chiếm hết không gian còn lại */
}

/* =========================================
   Section Header (Giống ảnh mẫu)
   ========================================= */
.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.header-border {
    width: 5px;
    height: 70px;
    background-color: #E7191F;
    margin-right: 15px;
    border-radius: 3px;
}

.en-title {
    color: #E7191F;
    font-size: 35px;
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
}
.jp-title {
    color: #666; /* Màu chữ tiếng Nhật xám */
    font-size: 18px;
    margin: 5px 0 0 0;
    font-weight: bold;
}

/* =========================================
   Image Gallery (3 ảnh ngang)
   ========================================= */
.image-gallery {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
}

.img-item {
    flex: 1; /* Chia đều 3 cột */
    position: relative;
}

.img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 1px solid #eee; /* Viền mỏng cho ảnh */
}

/* Mobile responsive cho ảnh */
@media (max-width: 767.98px) {
    .image-gallery { flex-direction: column; }
    .facility-row, .facility-row.reverse {
    flex-direction: column;
    gap: 20px;
}
.zairyo-img {
    width: 100%;
}
.fac-text-col p {
    padding-top: 1rem;
}
.facility-row.reverse .fac-text-col{
    order: 2;
}


}

/* =========================================
   Table Styles (Giống ảnh mẫu)
   ========================================= */
.spec-table-container {
    margin-top: 30px;
    margin-bottom: 50px;
}

.table-caption-bar {
    background-color: #cb252a;
    color: #fff;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
}

.table-scroll-wrapper {
    overflow-x: auto; /* Cho phép cuộn ngang trên mobile */
}

.custom-spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px; /* Cỡ chữ nhỏ vừa phải */
    color: #333;
}

.custom-spec-table th, .custom-spec-table td {
    border: 1px solid #ddd;
    padding: 8px 5px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.9rem;
}
/* Header của bảng */
.custom-spec-table thead th {
    background-color: #f8f9fa; /* Màu nền xám nhạt cho header */
    font-weight: bold;
    color: #333;
    text-wrap: nowrap;
}

.custom-spec-table thead tr.unit-row th {
    font-size: 13px;
    color: #494949;
}

/* Zebra Striping (Dòng kẻ sọc chẵn lẻ) */
.custom-spec-table tbody tr:nth-child(even) {
    background-color: #f9f9f9; /* Màu xám rất nhạt */
}

.custom-spec-table tbody tr:hover {
    background-color: #f1f1f1; /* Hiệu ứng khi di chuột */
}

.custom-spec-table td:first-child {
    width: 40px;
    font-weight: bold;
    color: #666;
    text-wrap: nowrap;
}