/* =========================================================
   HELIOS BIOTECH - MAIN LAYOUT
   File: main.css

   Chức năng:
   - Thiết lập biến màu và kích thước dùng chung
   - Định dạng Header cố định
   - Định dạng Menu chính
   - Chuyển đổi ngôn ngữ VN / EN
   - Menu Responsive trên Tablet / Mobile
   - Vùng nội dung được main.js tải động
   - Footer dùng chung toàn website
========================================================= */


/* =========================================================
   1. VARIABLES - BIẾN GIAO DIỆN DÙNG CHUNG
   =========================================================
   Khai báo toàn bộ màu sắc, chiều cao Header và chiều rộng
   tối đa của website. Các biến này giúp sửa giao diện
   đồng bộ mà không cần thay đổi từng vị trí riêng lẻ.
========================================================= */

:root {

    --green-dark: #003b2d;          /* Xanh đậm thương hiệu HELIOS */

    --green: #06523d;               /* Xanh chính dùng cho icon, hover */

    --green-light: #0a6b4d;         /* Xanh sáng phụ */

    --gold: #dca832;                /* Vàng thương hiệu */

    --gold-light: #f0c35c;          /* Vàng sáng dùng cho Footer, highlight */

    --text: #18251f;                /* Màu chữ chính */

    --text-soft: #65716b;           /* Màu chữ mô tả/phụ */

    --white: #ffffff;               /* Màu trắng */

    --line: #e8ece9;                /* Màu đường viền */

    --header-height: 76px;          /* Chiều cao Header Desktop */

    --content-width: 1440px;        /* Chiều rộng tối đa nội dung */

}


/* =========================================================
   2. RESET - CHUẨN HÓA CSS
   =========================================================
   Loại bỏ sự khác biệt mặc định của trình duyệt và giúp
   việc tính kích thước phần tử chính xác hơn.
========================================================= */

*,
*::before,
*::after {

    box-sizing: border-box;         /* Padding và border nằm trong kích thước */

}


html {

    width: 100%;                    /* HTML phủ toàn màn hình */

    min-height: 100%;               /* Chiều cao tối thiểu toàn trang */

    margin: 0;                      /* Bỏ khoảng ngoài mặc định */

    padding: 0;                     /* Bỏ khoảng trong mặc định */

    scroll-behavior: smooth;        /* Cuộn trang mượt */

}


/* =========================================================
   3. BODY - KHUNG TOÀN WEBSITE
   =========================================================
   Body dùng Flexbox theo chiều dọc:
   Header -> Main Content -> Footer.

   Vì Header là fixed nên phải chừa khoảng phía trên bằng
   đúng chiều cao Header để nội dung không bị che.
========================================================= */

body {

    width: 100%;                    /* Phủ hết chiều ngang */

    min-height: 100vh;              /* Tối thiểu bằng chiều cao màn hình */

    margin: 0;                      /* Bỏ margin mặc định */

    padding: 0;                     /* Reset padding */

    padding-top:
        var(--header-height);       /* Chừa vị trí cho Header fixed */

    display: flex;                  /* Dùng Flexbox */

    flex-direction: column;         /* Header/Main/Footer xếp dọc */

    overflow-x: hidden;             /* Không xuất hiện thanh cuộn ngang */

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;                 /* Font chung của website */

    color:
        var(--text);                /* Màu chữ mặc định */

    background:
        var(--white);               /* Nền trắng */

}


/* =========================================================
   4. BASIC ELEMENTS - THIẾT LẬP PHẦN TỬ CƠ BẢN
========================================================= */

a {

    color: inherit;                 /* Link kế thừa màu phần tử cha */

    text-decoration: none;          /* Bỏ gạch chân mặc định */

}


button,
input {

    font: inherit;                  /* Button/Input dùng font chung */

}


button {

    cursor: pointer;                /* Hiện bàn tay khi rê chuột */

}


img {

    display: block;                 /* Loại bỏ khoảng trắng dưới ảnh */

    max-width: 100%;                /* Không cho ảnh vượt khỏi khung */

}


/* =========================================================
   5. FIXED HEADER - HEADER CỐ ĐỊNH
   =========================================================
   Header luôn nằm ở đầu màn hình ngay cả khi người dùng
   kéo trang xuống.

   z-index cao để Header luôn nằm trên nội dung trang.
========================================================= */

.site-header {

    width: 100%;                    /* Header phủ toàn chiều ngang */

    height:
        var(--header-height);       /* Lấy chiều cao từ biến */

    position: fixed;                /* Giữ Header cố định */

    top: 0;                         /* Sát mép trên */

    left: 0;                        /* Sát trái */

    right: 0;                       /* Sát phải */

    z-index: 9999;                  /* Nằm trên nội dung khác */

    background:
        rgba(
            255,
            255,
            255,
            0.98
        );                          /* Nền trắng hơi trong suốt */

    border-bottom:
        1px solid
        var(--line);                /* Đường phân cách Header */

    box-shadow:
        0 3px 14px
        rgba(
            0,
            40,
            30,
            0.07
        );                          /* Tạo bóng nhẹ dưới Header */

    backdrop-filter:
        blur(12px);                 /* Làm mờ nội dung phía sau */

    -webkit-backdrop-filter:
        blur(12px);                 /* Hỗ trợ Safari */

}


/* =========================================================
   6. HEADER CONTAINER
   =========================================================
   Khung chứa:
   Logo + Menu + Search + Language + Mobile button.
========================================================= */

.header-container {

    width:
        min(
            var(--content-width),
            94%
        );                          /* Không vượt quá 1440px */

    height: 100%;                   /* Cao bằng Header */

    margin:
        0 auto;                     /* Căn giữa */

    display: flex;                  /* Các thành phần nằm ngang */

    align-items: center;            /* Căn giữa theo chiều dọc */

    gap: 24px;                      /* Khoảng cách giữa các nhóm */

}


/* =========================================================
   7. LOGO HEADER
========================================================= */

.site-logo {

    width: 175px;                   /* Chiều rộng logo */

    flex:
        0 0 auto;                   /* Không cho Logo co lại */

    cursor: pointer;                /* Logo có thể click về Trang chủ */

}


.site-logo img {

    width: 100%;                    /* Ảnh phủ khung Logo */

    height: auto;                   /* Giữ đúng tỷ lệ */

    max-height: 58px;               /* Không cao quá Header */

    object-fit: contain;            /* Không crop Logo */

}


/* =========================================================
   8. MAIN NAVIGATION - MENU CHÍNH
========================================================= */

.main-navigation {

    flex: 1;                        /* Chiếm không gian còn lại */

    height: 100%;                   /* Cao bằng Header */

    display: flex;                  /* Menu nằm ngang */

    align-items: stretch;           /* Link cao bằng Menu */

    justify-content: center;        /* Căn menu ở giữa */

    gap: 3px;                       /* Khoảng cách giữa menu item */

}


/* =========================================================
   9. NAVIGATION LINK - TỪNG NÚT MENU
========================================================= */

.nav-link {

    height: 100%;                   /* Cao bằng Header */

    padding:
        0 13px;                     /* Khoảng cách trái/phải */

    position: relative;             /* Làm mốc cho đường active */

    display: flex;                  /* Căn chữ bằng Flexbox */

    align-items: center;            /* Căn giữa theo chiều dọc */

    justify-content: center;        /* Căn giữa theo chiều ngang */

    color:
        #23342d;                    /* Màu menu mặc định */

    font-size: 14px;                /* Cỡ chữ */

    font-weight: 500;               /* Độ đậm */

    white-space: nowrap;            /* Không cho menu xuống dòng */

    transition:
        color 0.2s ease,
        background 0.2s ease;       /* Hiệu ứng hover */

}


/* Menu đang chọn hoặc rê chuột */

.nav-link:hover,
.nav-link.active {

    color:
        var(--green-dark);          /* Đổi sang xanh đậm */

}


/* Menu đang được chọn */

.nav-link.active {

    font-weight: 650;               /* Chữ đậm hơn */

}


/* =========================================================
   10. MENU ACTIVE LINE - ĐƯỜNG VÀNG DƯỚI MENU
========================================================= */

.nav-link::after {

    content: "";                    /* Tạo phần tử giả */

    position: absolute;             /* Định vị trong nav-link */

    left: 50%;                      /* Bắt đầu từ tâm */

    bottom: 10px;                   /* Cách đáy Header */

    width: 0;                       /* Mặc định chưa hiện */

    height: 2px;                    /* Độ dày đường */

    border-radius: 2px;             /* Bo nhẹ */

    background:
        var(--gold);                /* Màu vàng HELIOS */

    transform:
        translateX(-50%);           /* Căn chính giữa */

    transition:
        width 0.2s ease;            /* Hiệu ứng mở rộng */

}


/* Hiện đường vàng khi hover hoặc active */

.nav-link:hover::after,
.nav-link.active::after {

    width:
        calc(
            100% - 26px
        );                          /* Chiều rộng theo Menu */

}


/* =========================================================
   11. HEADER ACTIONS
   =========================================================
   Nhóm chức năng nằm bên phải:
   Search + Language.
========================================================= */

.header-actions {

    flex:
        0 0 auto;                   /* Không co */

    display: flex;                  /* Nằm ngang */

    align-items: center;            /* Căn dọc */

    gap: 8px;                       /* Khoảng cách */

}


/* =========================================================
   12. SEARCH BUTTON
========================================================= */

.search-button {

    width: 36px;                    /* Kích thước ngang */

    height: 36px;                   /* Kích thước dọc */

    padding: 0;                     /* Bỏ padding mặc định */

    border: 0;                      /* Không viền */

    border-radius: 50%;             /* Nút hình tròn */

    display: inline-flex;           /* Dùng Flex */

    align-items: center;            /* Căn icon dọc */

    justify-content: center;        /* Căn icon ngang */

    background:
        transparent;                /* Không nền */

    color:
        #123b2d;                    /* Màu icon */

    font-size: 20px;                /* Cỡ kính lúp */

    transition:
        background 0.2s ease,
        color 0.2s ease;            /* Hiệu ứng hover */

}


.search-button:hover {

    background:
        #f3f6f4;                    /* Nền xám xanh khi hover */

    color:
        var(--green);               /* Icon đổi xanh */

}


/* =========================================================
   13. HEADER DIVIDER
   =========================================================
   Đường dọc phân cách Search với khu vực ngôn ngữ.
========================================================= */

.header-divider {

    width: 1px;

    height: 22px;

    margin:
        0 3px;

    background:
        #d7ddd9;

}


/* =========================================================
   14. LANGUAGE SWITCH
   =========================================================
   Nhóm nút chuyển đổi:
   [VN] | [EN]
========================================================= */

.language-switch {

    display: flex;

    align-items: center;

    gap: 4px;

}


/* =========================================================
   15. LANGUAGE BUTTON
========================================================= */

.language-button {

    min-width: 50px;                /* Giữ đủ chỗ cho cờ + chữ */

    height: 34px;

    padding:
        0 6px;

    border: 0;

    border-radius: 5px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;                       /* Khoảng giữa cờ và VN/EN */

    background:
        transparent;

    color:
        #425149;

    font-size: 13px;

    font-weight: 500;

    transition:
        color 0.2s ease,
        background 0.2s ease;

}


/* Hover nút ngôn ngữ */

.language-button:hover {

    color:
        var(--green);

    background:
        #f4f6f5;

}


/* Ngôn ngữ đang được chọn */

.language-button.active {

    color:
        var(--green-dark);

    font-weight: 700;

}


/* =========================================================
   16. LANGUAGE FLAG
========================================================= */

.language-flag {

    width: 22px;                    /* Chiều rộng cờ */

    height: 15px;                   /* Chiều cao cờ */

    object-fit: cover;              /* Phủ kín khung */

    border-radius: 2px;             /* Bo nhẹ */

    box-shadow:
        0 0 0 1px
        rgba(
            0,
            0,
            0,
            0.08
        );                          /* Viền cờ nhẹ */

}


.language-text {

    line-height: 1;                 /* Giữ chữ VN/EN gọn */

}


.language-separator {

    color:
        #a6ada9;                    /* Màu dấu | */

    font-size: 13px;

}


/* =========================================================
   17. MOBILE MENU BUTTON
   =========================================================
   Nút hamburger chỉ hiện khi màn hình <= 1024px.
========================================================= */

.mobile-menu-button {

    width: 38px;

    height: 38px;

    flex:
        0 0 38px;

    padding: 0;

    border: 0;

    border-radius: 6px;

    display: none;                  /* Desktop không hiển thị */

    align-items: center;

    justify-content: center;

    background:
        transparent;

    color:
        var(--green-dark);

    font-size: 21px;

}


.mobile-menu-button:hover {

    background:
        #f3f6f4;

}


/* =========================================================
   18. MAIN CONTENT
   =========================================================
   Đây là nơi main.js nạp:
   01-vn.html
   01-en.html
   02-vn.html...
========================================================= */

.main-content {

    width: 100%;

    flex:
        1 0 auto;                   /* Tự mở rộng theo nội dung */

    min-height:
        calc(
            100vh -
            var(--header-height) -
            260px
        );                          /* Giữ Footer dưới màn hình */

    position: relative;             /* Làm mốc cho Loading */

    background:
        var(--white);

}


/*
   Khi nhảy đến section bằng anchor,
   chừa một khoảng phía trên để Header fixed không che tiêu đề.
*/

.main-content section {

    scroll-margin-top:
        calc(
            var(--header-height) +
            10px
        );

}


/* Khi đang tải trang */

.main-content.loading {

    min-height: 300px;

}


/* =========================================================
   19. PAGE LOADING
========================================================= */

.page-loading {

    min-height: 300px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    color:
        var(--text-soft);

    font-size: 14px;

}


/* =========================================================
   20. LOADING SPINNER
========================================================= */

.page-loading-spinner {

    width: 34px;

    height: 34px;

    border:
        3px solid
        #e4ebe7;                    /* Màu vòng ngoài */

    border-top-color:
        var(--green);               /* Phần chuyển động màu xanh */

    border-radius: 50%;             /* Hình tròn */

    animation:
        helios-spin
        0.8s
        linear
        infinite;                   /* Quay liên tục */

}


/* Animation quay */

@keyframes helios-spin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   21. PAGE ERROR
   =========================================================
   Hiển thị khi main.js không tải được file HTML con.
========================================================= */

.page-load-error {

    min-height: 280px;

    padding: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    color:
        #9b2c2c;

    text-align: center;

}


.page-load-error i {

    font-size: 22px;

}


/* =========================================================
   22. FOOTER
========================================================= */

.site-footer {

    width: 100%;

    flex:
        0 0 auto;

    margin-top:
        auto;                       /* Đẩy Footer xuống cuối trang */

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #003c2f,
            #002c22
        );                          /* Gradient xanh HELIOS */

}


/* =========================================================
   23. FOOTER CONTAINER
   =========================================================
   Desktop gồm 5 cột:
   1. Logo
   2. Thông tin công ty
   3. Liên kết nhanh
   4. Thông tin
   5. Mạng xã hội
========================================================= */

.footer-container {

    width:
        min(
            var(--content-width),
            94%
        );

    margin:
        0 auto;

    padding:
        30px 0 22px;

    display: grid;

    grid-template-columns:
        1.15fr
        2.1fr
        1.25fr
        1.1fr
        1.25fr;

    gap: 28px;

}


.footer-column {

    min-width: 0;                   /* Tránh nội dung làm tràn Grid */

}


.footer-column h3 {

    margin:
        0 0 12px;

    color:
        var(--gold-light);

    font-size: 13px;

    font-weight: 700;

    line-height: 1.4;

}


/* =========================================================
   24. FOOTER BRAND
========================================================= */

.footer-brand {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}


.footer-logo {

    width: 170px;

    height: auto;

    max-height: 70px;

    object-fit: contain;

}


.footer-slogan {

    margin-top: 10px;

    color:
        var(--gold-light);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 2px;

}


/* =========================================================
   25. COMPANY INFO
   =========================================================
   Địa chỉ
   Điện thoại
   Email
   Website
========================================================= */

.company-info {

    margin: 0;

    padding: 0;

    list-style: none;               /* Bỏ dấu bullet */

}


.company-info li {

    margin-bottom: 7px;

    display: flex;

    align-items: flex-start;

    gap: 10px;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );

    font-size: 13px;

    line-height: 1.45;

}


.company-info li:last-child {

    margin-bottom: 0;

}


.company-info i {

    width: 18px;

    flex:
        0 0 18px;

    margin-top: 2px;

    color:
        var(--gold);

    font-size: 13px;

    text-align: center;

}


/* =========================================================
   26. QUICK LINKS
========================================================= */

.quick-links {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.quick-links a {

    color:
        rgba(
            255,
            255,
            255,
            0.85
        );

    font-size: 13px;

    line-height: 1.45;

    transition:
        color 0.2s ease,
        transform 0.2s ease;

}


.quick-links a:hover {

    color:
        var(--gold-light);

    transform:
        translateX(3px);            /* Dịch nhẹ khi hover */

}


/* =========================================================
   27. SOCIAL NETWORK
========================================================= */

.social-links {

    display: flex;

    align-items: center;

    gap: 9px;

}


.social-links a {

    width: 33px;

    height: 33px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 5px;

    background:
        var(--white);

    color:
        var(--green-dark);

    font-size: 18px;

    transition:
        transform 0.2s ease,
        background 0.2s ease;

}


.social-links a:hover {

    background:
        var(--gold-light);

    transform:
        translateY(-2px);

}


/* =========================================================
   28. FOOTER MINI SLOGAN
========================================================= */

.footer-mini-slogan {

    margin-top: 18px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        var(--gold-light);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 1.6px;

    white-space: nowrap;

}


.footer-mini-line {

    width: 26px;

    height: 2px;

    flex:
        0 0 26px;

    background:
        var(--gold);

}


/* =========================================================
   29. COPYRIGHT
========================================================= */

.footer-bottom {

    width: 100%;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.footer-bottom-container {

    width:
        min(
            var(--content-width),
            94%
        );

    margin:
        0 auto;

    padding:
        9px 0;

    color:
        rgba(
            255,
            255,
            255,
            0.60
        );

    font-size: 12px;

    line-height: 1.4;

}


/* =========================================================
   30. RESPONSIVE - DESKTOP <= 1280px
   =========================================================
   Thu nhỏ khoảng cách Header/Menu.
   Footer chuyển từ 5 cột xuống 3 cột.
========================================================= */

@media (max-width: 1280px) {

    .header-container {

        gap: 16px;

    }


    .nav-link {

        padding:
            0 8px;

        font-size: 13px;

    }


    .footer-container {

        grid-template-columns:
            repeat(
                3,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* =========================================================
   31. RESPONSIVE - TABLET <= 1024px
   =========================================================
   Menu Desktop chuyển thành Menu Mobile.

   Menu Mobile:
   - Cố định dưới Header
   - Ban đầu ẩn
   - main.js thêm class .open để hiện
========================================================= */

@media (max-width: 1024px) {


    .main-navigation {

        position: fixed;            /* Menu vẫn cố định khi cuộn */

        top:
            var(--header-height);   /* Bắt đầu ngay dưới Header */

        left: 0;

        right: 0;

        z-index: 9998;              /* Dưới Header nhưng trên nội dung */

        height: auto;

        max-height:
            calc(
                100vh -
                var(--header-height)
            );                      /* Không vượt màn hình */

        padding: 10px;

        display: none;              /* Đóng Menu mặc định */

        flex-direction: column;     /* Các item xếp dọc */

        overflow-y: auto;           /* Cho phép scroll nếu Menu dài */

        background:
            rgba(
                255,
                255,
                255,
                0.99
            );

        border-top:
            1px solid
            #eeeeee;

        border-bottom:
            1px solid
            #eeeeee;

        box-shadow:
            0 8px 24px
            rgba(
                0,
                0,
                0,
                0.10
            );

        backdrop-filter:
            blur(12px);

    }


    /* main.js thêm class open để mở menu */

    .main-navigation.open {

        display: flex;

    }


    .nav-link {

        width: 100%;

        height: 46px;

        padding:
            0 14px;

        flex:
            0 0 46px;

        justify-content:
            flex-start;

        border-radius: 5px;

        font-size: 14px;

    }


    /* Mobile không cần đường vàng dưới Menu */

    .nav-link::after {

        display: none;

    }


    .nav-link:hover,
    .nav-link.active {

        background:
            #f3f7f5;

    }


    /* Hiện nút Hamburger */

    .mobile-menu-button {

        display:
            inline-flex;

    }


    /* Footer Tablet còn 2 cột */

    .footer-container {

        grid-template-columns:
            repeat(
                2,
                minmax(
                    0,
                    1fr
                )
            );

    }

}


/* =========================================================
   32. RESPONSIVE - MOBILE <= 700px
========================================================= */

@media (max-width: 700px) {


    :root {

        --header-height: 66px;       /* Header Mobile thấp hơn */

    }


    .header-container {

        width: 94%;

        gap: 9px;

    }


    /* Logo Mobile nhỏ hơn */

    .site-logo {

        width: 135px;

    }


    .site-logo img {

        max-height: 50px;

    }


    /* Các nút bên phải dồn sát phải */

    .header-actions {

        margin-left:
            auto;

        gap: 3px;

    }


    /*
        Mobile:
        - Ẩn Search
        - Ẩn đường phân cách
        - Ẩn chữ VN/EN
        - Chỉ giữ hai lá cờ
    */

    .search-button,
    .header-divider,
    .language-text,
    .language-separator {

        display: none;

    }


    .language-switch {

        gap: 2px;

    }


    .language-button {

        width: 34px;

        min-width: 34px;

        height: 32px;

        padding: 4px;

    }


    .language-flag {

        width: 23px;

        height: 16px;

    }


    .main-content {

        min-height: 240px;

    }


    /* Footer Mobile xếp thành 1 cột */

    .footer-container {

        padding:
            28px 0 22px;

        grid-template-columns:
            1fr;

        gap: 24px;

    }


    .footer-column h3 {

        font-size: 14px;

    }


    .footer-mini-slogan {

        white-space: normal;

    }

}


/* =========================================================
   33. RESPONSIVE - MOBILE NHỎ <= 420px
========================================================= */

@media (max-width: 420px) {


    .site-logo {

        width: 118px;               /* Thu nhỏ Logo */

    }


    .header-actions {

        gap: 1px;

    }


    .language-button {

        width: 30px;

        min-width: 30px;

        height: 30px;

    }


    .language-flag {

        width: 21px;

        height: 14px;

    }


    .mobile-menu-button {

        width: 34px;

        height: 34px;

    }


    .footer-logo {

        width: 155px;

    }


    .footer-bottom-container {

        font-size: 11px;

    }

}