/* --- Tối ưu Section About tổng thể --- */
.about {
  padding: 3.75rem 0; /* 60px 0 */
}

/* Fix vỡ tiêu đề và mô tả */
.about .section-header h2 {
  font-size: 0.8125rem; /* 13px */
  letter-spacing: 0.125rem;
  margin-bottom: 1.25rem;
}

.about .section-header p {
  font-size: 3rem; /* Tương đương 48px nhưng dùng rem để co giãn */
  font-family: var(--heading-font);
}

/* --- Xử lý Content (Hình ảnh & Văn bản) --- */
.about .content h3 {
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  color: #ce1212;
  margin-bottom: 1.5rem;
}

.about .content p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-bottom: 0.625rem;
  display: flex;
  align-items: flex-start;
  font-size: 1rem;
}

.about .content ul i {
  font-size: 1.25rem;
  margin-right: 0.625rem;
  color: #ce1212;
}

/* --- Fix hình ảnh bị vỡ/tràn trên Mobile --- */
.about .about-img {
  position: relative;
  margin-bottom: 2rem;
}

.about .about-img img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
}

/* --- Tối ưu Mobile (Dưới 768px) --- */


/* menu */
/* Container bao ngoài */
.about-tabs-container {
    max-width: 1000px;
    margin: 0 auto;
    margin-bottom: 3rem !important; /* 48px */
}


.nav-wrapper {
    background: #ffffff;
    border-radius: 50px; /* Bo tròn cực đại tạo vẻ hiện đại */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Đổ bóng nhẹ nhàng */
    border: 1px solid #f0f0f0;
}

.custom-about-tabs {
    display: flex;
    flex-wrap: nowrap !important; /* Ép 1 hàng */
    align-items: center;
    width: max-content;
    margin: 0 auto;
    border: none;
    gap: 0.5rem; /* Khoảng cách giữa các tab */
}
.custom-about-tabs .nav-item {
    flex: 0 0 auto;
}
.custom-about-tabs .nav-link {
    white-space: nowrap;
    padding: 0.75rem 1.5rem; /* 12px 24px */
    font-weight: 700;
    font-size: 0.875rem; /* 14px */
    letter-spacing: 0.0313rem; /* 0.5px */
    color: #333;
    border-radius: 3.125rem; /* 50px - bo tròn hoàn toàn */
    transition: all 0.3s ease;
    border: none;
    background: transparent;
}

/* Hiệu ứng khi Active (Màu đỏ nâu Thiên Hương) */
.custom-about-tabs .nav-link.active {
    background: linear-gradient(135deg, #96302c 0%, #7a2522 100%) !important;
    color: #fff !important;
    box-shadow: 0 0.25rem 0.9375rem rgba(150, 48, 44, 0.3);
    transform: translateY(-2px);
}

/* Hiệu ứng Hover cho các tab chưa active */
.custom-about-tabs .nav-link:hover:not(.active) {
    background-color: #fceaea;
    color: #96302c;
}

@media (max-width: 48rem) {
    .nav-wrapper {
        /* 15px -> 0.9375rem */
        border-radius: 0.9375rem;
        /* 10px -> 0.625rem */
        padding: 0.625rem;
    }

    .custom-about-tabs .nav-link {
        /* 10px 15px -> 0.625rem 0.9375rem */
        padding: 0.625rem 0.9375rem;
        /* 11px -> 0.6875rem */
        font-size: 0.6875rem;
    }
    .recruitment-heading {
        font-size: 2.1rem;
        font-weight: 900 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .job-img-box {
        height: 12.5rem; /* ~200px */
    }
    
    .btn-apply-now {
        padding: 0.75rem;
        font-size: 1rem;
        width: 100%; /* Full width cho dễ bấm trên mobile */
    }
    .company-title-red {
        font-size: 1.25rem;
        text-align: center;
    }
    
    .company-detail {
        text-align: center;
    }

    .company-socials {
        justify-content: center;
    }

    .about-company-item {
        margin-bottom: 4rem !important;
        border-bottom: 1px solid #444; /* Thêm đường kẻ chia giữa 2 cty trên mobile */
        padding-bottom: 2rem;
    }
    
    .about-company-item:last-child {
        border-bottom: none;
    }

    /* Đảm bảo ảnh không quá to trên mobile */
    .company-img-frame img {
        max-height: 15rem;
        width: 100%;
        object-fit: cover;
    }
    .company-img-frame {
        max-width: 90%;      /* Không cho ảnh chạm sát mép màn hình mobile */
        margin: 0 auto;      /* Căn giữa toàn bộ khối ảnh */
    }
}

/* Hiệu ứng hover cho Desktop */
@media (min-width: 62rem) {
    .job-card:hover {
        transform: translateY(-0.5rem);
        box-shadow: 0 0.9375rem 1.875rem rgba(0,0,0,0.1) !important;
    }
}

/* CSS để giao diện giống hình bạn gửi */
.about-tabs-container {
    background: #ebedef;
    padding: 10px;
    border-radius: 8px;
}
.about-tabs-container .nav-wrapper {
    width: 100%;
    padding: 0.5rem !important; /* 8px */
    overflow-x: auto; /* Cho phép cuộn ngang nếu màn hình quá nhỏ */
    scrollbar-width: none; /* Ẩn thanh cuộn trên Firefox */
    -ms-overflow-style: none; /* Ẩn thanh cuộn trên IE/Edge */
}

/* Ẩn thanh cuộn trên Chrome/Safari */
.about-tabs-container .nav-wrapper::-webkit-scrollbar {
    display: none;
}
.custom-about-tabs {
    border: none;
    display: flex;
    flex-wrap: nowrap !important; /* Ép tất cả nằm trên 1 hàng */
    width: max-content; /* Đảm bảo wrapper nở theo chiều rộng nội dung */
    justify-content: space-between;
}
.custom-about-tabs .nav-link {
    color: #444;
    font-weight: 700;
    background: transparent;
    border: none;
    padding: 12px 25px;
    transition: 0.3s;
    border-radius: 6px;
}
/* Màu đỏ đậm theo hình của bạn */
.custom-about-tabs .nav-link.active {
    background-color: #96302c !important; 
    color: white !important;
}
.custom-about-tabs .nav-link:hover:not(.active) {
    background: #d1d4d7;
}
/* Container chính cho History */
.history-parallax-container {
    position: relative;
    padding: 100px 0;
    background-image: url('/frontend/img/banner/history-bg.jpg'); /* Thay đường dẫn ảnh của bạn */
    background-attachment: fixed; /* Hiệu ứng Parallax */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    overflow: hidden;
    min-height: 600px;
}

/* Lớp phủ mờ để làm nổi bật nội dung */
.history-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Đen mờ 60% */
    z-index: 1;
}

.history-content-inner {
    position: relative;
    z-index: 2; /* Đẩy nội dung lên trên lớp phủ */
}

/* Style cho Timeline */
.timeline-modern {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-item {
    display: flex;
    margin-bottom: 50px;
    align-items: flex-start;
}

.timeline-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #96302c; /* Màu đỏ của Thiên Hương */
    background: white;
    padding: 10px 20px;
    border-radius: 10px;
    margin-right: 30px;
    min-width: 150px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.timeline-text {
    color: white;
}

.timeline-text h5 {
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.timeline-text p {
    font-size: 1.1rem;
    opacity: 0.9;
}

/* archimvent */

#about-us-content .certificate-item {
text-align: center;
padding: 15px;
background: #fff;
transition: all 0.3s ease-in-out;
}

#about-us-content .cert-img-box {
    padding: 10px;
    border: 1px solid #eee;
    background: #fdfdfd;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 15px;
}

#about-us-content .cert-img-box img {
    transition: transform 0.5s ease;
    filter: grayscale(20%); /* Hơi xám nhẹ để tạo nét cổ điển */
}

/* Hiệu ứng khi di chuột vào */
#about-us-content .certificate-item:hover .cert-img-box {
    box-shadow: 0 10px 25px rgba(165, 42, 42, 0.2); /* Đổ bóng màu đỏ nhạt */
    border-color: #A52A2A;
}

#about-us-content .certificate-item:hover img {
    transform: scale(1.08); /* Phóng to nhẹ hình ảnh */
    filter: grayscale(0%); /* Trả lại màu gốc rực rỡ */
}

#about-us-content .cert-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-top: 10px;
    text-transform: uppercase;
}

/* vision */
/* Badge năm thành lập */
.vision-badge {
    display: inline-block;
    background: #f8d7da;
    color: #96302c;
    padding: 5px 15px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 2px;
}

/* Tiêu đề chính */
.vision-title {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -1px;
}

/* Khối màu đỏ chủ đạo cho mục tiêu */
.vision-main-goal {
    background: linear-gradient(135deg, #96302c 0%, #d32f2f 100%);
    border-left: 5px solid #ffc107;
    border-radius: 0 15px 15px 0;
    box-shadow: 10px 10px 30px rgba(150, 48, 44, 0.2);
}

/* Chữ mô tả chính */
.lead-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    border-left: 3px solid #eee;
    padding-left: 20px;
}

/* Các item tính năng con */
.animate__animated {
--animate-duration: 1s; /* Thời gian chạy hiệu ứng là 1 giây */
}

/* Đảm bảo các khối nội dung không bị giật khi bắt đầu chạy */
.tab-pane .animate__animated {
    visibility: visible;
}

/* CSS cho các khối điểm nhấn (Vision Points) */
.vision-points .shadow-sm {
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

.vision-points .shadow-sm:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Tổng thể trang với Pattern chìm */
    #about-page-main {
        background-color: #ffffff;
        background-image: radial-gradient(#96302c0d 1px, transparent 1px);
        background-size: 30px 30px;
        font-family: var(--default-font) !important; 
    }

    /* Menu Glassmorphism "Sang Xịn Mịn" */
    .nav-wrapper {
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        border-radius: 100px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
        border: 1px solid rgba(0, 0, 0, 0.03);
    }

    .custom-about-tabs .nav-link {
        border: none;
        color: #555;
        font-weight: 700;
        font-size: 13px;
        padding: 12px 25px;
        border-radius: 100px;
        transition: all 0.4s ease;
        background: transparent;
    }

    .custom-about-tabs .nav-link.active {
        background: #96302c !important;
        color: #fff !important;
        box-shadow: 0 8px 20px rgba(150, 48, 44, 0.3);
        transform: translateY(-2px);
    }

    /* Vision Section Styling */
    .vision-badge {
        display: inline-block;
        background: #fceaea;
        color: #96302c;
        padding: 6px 16px;
        border-radius: 50px;
        font-weight: 800;
        font-size: 12px;
        letter-spacing: 2px;
    }

    .vision-title {
        font-size: 2.1rem;
        font-weight: 900;
        color: #333;
    }

    .vision-main-goal {
        background: linear-gradient(135deg, #96302c 0%, #d32f2f 100%);
        border-left: 6px solid #ffc107;
        border-radius: 0 20px 20px 0;
        box-shadow: 10px 10px 30px rgba(150, 48, 44, 0.15);
    }

    .lead-text {
        font-size: 1.15rem;
        line-height: 1.8;
        color: #555;
        border-left: 4px solid #f0f0f0;
        padding-left: 20px;
    }
    
    .vision-feature-item {
        padding: 20px;
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        transition: all 0.3s ease;
    }

    .vision-feature-item:hover {
        border-color: #96302c;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    }

    .vision-feature-item i {
        font-size: 24px;
        color: #96302c;
        margin-bottom: 15px;
        display: block;
    }

    .vision-feature-item h5 {
        font-weight: 700;
        font-size: 16px;
        text-transform: uppercase;
        text-align: left;
    }

    .vision-feature-item p {
        font-size: 14px;
        color: #777;
        margin: 0;
        text-align: justify; 
        /* Giúp các từ không bị dính vào nhau quá khi giãn dòng */
        text-justify: inter-word; 
        line-height: 1.6; /* Tăng độ giãn dòng cho dễ đọc */
    }

    .vision-feature-item {
        padding: 25px;
        background: #fff;
        border: 1px solid #f0f0f0;
        border-radius: 15px;
        transition: 0.3s;
        height: 100%;
    }

    .vision-feature-item:hover {
        border-color: #96302c;
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    }

    .vision-feature-item i {
        font-size: 28px;
        color: #96302c;
        margin-bottom: 15px;
        display: block;
    }

    /* History & Companies Image Style */
    .history-full-img {
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.1);
        transition: 0.5s;
    }

    /* Certificate Styling */
    .certificate-item {
        transition: 0.3s;
        text-align: center;
    }

    .cert-img-box {
        background: #fff;
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 12px;
        margin-bottom: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    }

    .certificate-item:hover .cert-img-box {
        border-color: #96302c;
        transform: scale(1.05);
    }

    .cert-title {
        font-weight: 700;
        color: #444;
        font-size: 14px;
    }

    Để đồng bộ với cấu trúc website hiện tại của bạn, mình đã chuyển đổi toàn bộ đơn vị từ px sang rem (dựa trên chuẩn 1rem = 16px). Việc dùng rem sẽ giúp giao diện co giãn tốt hơn trên các thiết bị có độ phân giải cao như S24 Ultra.

1. CSS cho Tab Tuyển dụng (Đã chuyển sang rem)
CSS

/* Màu chủ đạo */
:root {
    --primary-red: #96302c;
}

.recruitment-heading {
    color: var(--primary-red);
    font-size: 1.5rem; /* ~24px */
    margin-bottom: 2.5rem !important; /* ~40px */
}

.job-card {
    background: #fff;
    border-radius: 0.75rem; /* ~12px */
    border: 0.0625rem solid #f0f0f0; /* ~1px */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.job-img-box {
    position: relative;
    height: 11.25rem; /* ~180px */
    border-radius: 0.75rem 0.75rem 0 0;
    overflow: hidden;
}

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

.job-badge {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    background: var(--primary-red);
    color: #fff;
    padding: 0.125rem 0.625rem;
    border-radius: 1.25rem;
    font-size: 0.75rem;
    font-weight: bold;
}

.job-title {
    font-size: 1.125rem; /* ~18px */
    color: #333;
    margin-bottom: 0.9375rem;
}

.job-desc {
    font-size: 0.875rem; /* ~14px */
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.btn-apply-now {
    display: inline-block;
    border: 0.0625rem solid var(--primary-red);
    color: var(--primary-red);
    font-weight: 600;
    border-radius: 0.5rem;
    padding: 0.5rem 1.25rem;
    text-decoration: none;
    transition: all 0.3s;
    text-align: center;
}

.btn-apply-now:hover {
    background: var(--primary-red);
    color: #fff;
}


/* Màu đỏ tiêu đề đặc trưng */
.company-title-red {
    color: #E31D1C; /* Thay bằng mã màu đỏ chính xác của logo */
    font-size: 1.5rem; /* ~24px */
    letter-spacing: 0.05rem;
    margin-bottom: 1rem;
}

.company-addr, .company-tel {
    font-size: 1rem; /* ~16px */
    color: #333;
    line-height: 1.6;
    margin-bottom: 0.2rem;
}

/* Kích thước icon mạng xã hội */
.social-link img {
    height: 2.5rem; /* ~40px */
    width: auto;
    transition: transform 0.3s ease;
}

.social-link img:hover {
    transform: translateY(-3px);
}

.company-img-frame {
    display: flex;
    justify-content: center; /* Căn giữa hình theo chiều ngang */
    align-items: center;     /* Căn giữa hình theo chiều dọc */
    padding: 0.5rem;         /* Khoảng cách giữa ảnh và viền ngoài */
    background: #ffffff;     /* Tạo nền trắng cho viền */
    border-radius: 0.75rem;  /* Bo góc khung ngoài (12px) */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Đổ bóng sâu để nổi khối */
    transition: transform 0.3s ease;
}

.company-img-frame img {
    width: 100%;             /* Ép ảnh rộng hết cỡ khung */
    height: auto;
    display: block;
    object-fit: cover;       /* Đảm bảo ảnh đầy đặn không bị méo */
    border: 2px solid #fff;  /* Thêm một lớp viền trắng sát ảnh */
}

.company-img-frame:hover {
    transform: scale(1.03); /* Phóng to nhẹ 3% */
}

@media (max-width: 450px) {
    .vision-text-mobile {
        font-size: 1.1rem !important;
    }
}

@media (max-width: 400px) {
    .vision-text-mobile {
        font-size: 0.9rem !important;
    }
}