/* src/header.css */

.header-nav {
    justify-content: center;
    align-items: center;
    width: 100%;
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    /* Responsive gap: 51px on large screens, scales down on smaller screens */
    gap: clamp(10px, 3.5vw, 51px);
}

.header-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    font-weight: 500;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    position: relative;
    flex-shrink: 0;
}

.header-circle:hover {
    transform: scale(1.1);
    z-index: 50 !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6);
}

/* 
  Sử dụng clamp() để tự động co giãn kích thước (width, height) và chữ (font-size).
  Giá trị (Min, Tỷ lệ hiển thị (vw), Max).
*/
.circle-home {
    width: clamp(72px, 9vw, 128px);
    height: clamp(72px, 9vw, 128px);
    font-size: clamp(11px, 1.1vw, 16px);
    font-weight: bold;
    background: radial-gradient(circle at 30% 30%, #204b5a 0%, #0d222b 100%);
    z-index: 30;
}

.circle-business {
    width: clamp(62px, 7.8vw, 112px);
    height: clamp(62px, 7.8vw, 112px);
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.2;
    background: radial-gradient(circle at 30% 30%, #438194 0%, #295766 100%);
    z-index: 20;
}

.circle-company {
    width: clamp(72px, 9vw, 128px);
    height: clamp(72px, 9vw, 128px);
    font-size: clamp(11px, 1.1vw, 16px);
    font-weight: bold;
    background: radial-gradient(circle at 30% 30%, #204b5a 0%, #0d222b 100%);
    z-index: 30;
}




.circle-products {
    width: clamp(62px, 7.8vw, 112px);
    height: clamp(62px, 7.8vw, 112px);
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.2;
    background: radial-gradient(circle at 30% 30%, #438194 0%, #295766 100%);
    z-index: 20;
}

.circle-recruit {
    width: clamp(72px, 9vw, 128px);
    height: clamp(72px, 9vw, 128px);
    font-size: clamp(11px, 1.1vw, 16px);
    font-weight: bold;
    background: radial-gradient(circle at 30% 30%, #204b5a 0%, #0d222b 100%);
    z-index: 30;
}

.circle-corporate {
    width: clamp(62px, 7.8vw, 112px);
    height: clamp(62px, 7.8vw, 112px);
    font-size: clamp(11px, 0.9vw, 14px);
    line-height: 1.2;
    background: radial-gradient(circle at 30% 30%, #438194 0%, #295766 100%);
    z-index: 20;
}

/* Nút đỏ kiểu viên thuốc chuẩn ảnh 2 */
.header-btn-red {
    display: inline-block;
    padding: clamp(4px, 0.5vw, 8px) clamp(20px, 3vw, 45px);
    background-color: #c9171e;
    color: white;
    font-weight: bold;
    font-size: clamp(11px, 1.25vw, 18px);
    text-decoration: none;
    border-radius: 60px;
    box-shadow: 0 4px 15px rgba(201, 23, 30, 0.3);
    transition: all 0.3s ease;
    text-align: center;
    line-height: 1.3;
}

.header-btn-red:hover {
    background-color: #e31a22;
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(201, 23, 30, 0.4);
}