/* Biến thiết kế: dễ chỉnh một chỗ */
:root {
    /* Font co giãn: min 13px, max 18px, tăng theo viewport */
    --subnav-font-size: clamp(13.5px, 1.6vw, 19px);
    /* Padding co giãn theo viewport */
    --subnav-pad-y: clamp(6px, 0.9vw, 10px);
    --subnav-pad-x: clamp(10px, 1.4vw, 16px);
    /* Khoảng cách icon-text và giữa các items */
    --subnav-gap-item: clamp(16px, 2vw, 24px);
    --subnav-gap-icon: clamp(6px, 1vw, 8px);
    /* Underline thickness co giãn */
    --underline-thin: clamp(2px, 0.35vw, 3px);
    --underline-thick: clamp(3px, 0.5vw, 4px);
    /* Khoảng cách underline với chữ */
    --underline-offset: clamp(3px, 0.6vw, 6px);
    /* Glow nhẹ cho vệt chạy */
    --underline-glow: 0 0 6px rgba(2, 33, 95, 0.6);
}

/* Khu vực chứa */
.sub_wrap .qual_short.quality {
    display: grid;
    min-height: 220px;
    color: #fff;
    align-content: center;
    justify-content: center;
    /* nền ảnh vẫn theo inline style của bạn */
}

    /* Thanh điều hướng con: nằm giữa */
    .sub_wrap .qual_short.quality .sub-nav {
        place-self: center center;
    }

.sub-nav {
    display: flex;
    gap: var(--subnav-gap-item);
    list-style: none;
    padding: calc(var(--subnav-pad-y) + 4px) calc(var(--subnav-pad-x) + 4px);
    margin: 0;
}

        /* Span làm nhãn: để underline theo đúng bề rộng text */
    .sub-nav li a span {
        position: relative;
        display: inline-block; /* quan trọng: kích thước bằng chữ */
        vertical-align: middle;
        /* thêm padding & bo góc để khung nhìn như một ô theo chữ */
        padding: var(--subnav-pad-y) var(--subnav-pad-x);
        border-radius: 8px;
        /* tùy chọn để inset không bị lộ viền góc do antialias */
        background-clip: padding-box;
    }


        /* Underline nền: theo span (độ dài chữ) */
        .sub-nav li a span::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(var(--underline-offset) * -1);
            height: var(--underline-thin);
            background: rgba(255, 255, 255, 0.7);
            pointer-events: none;
            border-radius: var(--underline-thin);
        }

        /* Vệt chạy: theo span (độ dài chữ) */
        .sub-nav li a span::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: calc(var(--underline-offset) * -1);
            height: var(--underline-thick);
            background: #fff;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .6s ease;
            pointer-events: none;
            box-shadow: var(--underline-glow);
            border-radius: var(--underline-thick);
        }
    /* KHUNG CHỮ NHẬT TRÊN SPAN (không phải trên a) */
    .sub-nav li a:hover span,
    .sub-nav li a:focus-visible span,
    .sub-nav li.on a span {
        box-shadow: 0 0 0 2px #fff inset;
        background-color: rgba(255, 255, 255, 0.09);
        color: #fff; /* màu chữ khi có khung */
    }
    /* Kích hoạt vệt chạy khi hover/focus/active/on */
    .sub-nav li a:hover span::before,
    .sub-nav li a:focus-visible span::before,
    .sub-nav li.on a span::before {
        transform: scaleX(1);
    }

/* Active icon rõ hơn */
.sub-nav li.on a .xi-plus-thin {
    opacity: 1;
}

/* Cho phép wrap khi màn hình chưa đủ rộng */
.sub-nav {
    display: flex;
    flex-wrap: wrap; /* <-- quan trọng để tự xuống dòng */
    gap: var(--subnav-gap-item);
}

    /* Mỗi item co giãn theo nội dung, không quá to */
    .sub-nav li {
        /* Không ép chiều rộng; dùng auto để bám nội dung */
        flex: 0 1 auto;
    }

/* Ở màn hình hẹp: chuyển sang 1 cột (bạn đã có) + canh giữa*/
@media (max-width: 640px) {
    .sub-nav {
        flex-direction: column; /* xếp dọc */
        flex-wrap: nowrap; /* không cần wrap khi đã là cột */
        align-items: center; /* <— canh giữa cả item trong container */
    }
        .sub-nav li {
            width: 100%; /* để a có thể full width khi cần */
            display: flex;
            justify-content: center; /* giữ item ở giữa */
        }

            .sub-nav li a {
                width: 100%;
                justify-content: center; /* <— canh giữa nội dung trong a */
                text-align: center; /* text canh giữa */
            }
        /*.sub-nav li a {
            width: 100%;*/ /* khung hover & underline theo chiều rộng item */
        /*}*/
}

/* DESKTOP-ONLY: hiệu ứng hover và underline chạy chỉ trên môi trường có hover */
@media (hover: hover) {
    /* Khung + underline chạy khi hover / focus-visible / .on */
    .sub-nav li a:hover span,
    .sub-nav li a:focus-visible span,
    .sub-nav li.on a span {
        box-shadow: 0 0 0 2px #fff inset;
        background-color: rgba(255, 255, 255, 0.09);
        color: #fff;
    }

        .sub-nav li a:hover span::before,
        .sub-nav li a:focus-visible span::before,
        .sub-nav li.on a span::before {
            transform: scaleX(1);
        }
}

/* MOBILE-ONLY: khi tap/focus CHỈ hiện khung, KHÔNG underline */
@media (hover: none) {
    /* Hiện khung chữ nhật khi tap/focus */
    .sub-nav li a:active span,
    .sub-nav li a:focus span {
        box-shadow: 0 0 0 2px #fff inset;
        background-color: rgba(255, 255, 255, 0.09);
        color: #fff;
    }

        /* TẮT vệt chạy khi tap/focus */
        .sub-nav li a:active span::before,
        .sub-nav li a:focus span::before {
            transform: scaleX(0);
        }

        /* TẮT underline nền mờ khi tap/focus (nếu bạn muốn ẩn hoàn toàn) */
        .sub-nav li a:active span::after,
        .sub-nav li a:focus span::after {
            opacity: 0;
        }

    /* NGĂN .on bật underline trên mobile: chỉ giữ đậm chữ, KHÔNG vệt chạy */
    .sub-nav li.on a span::before {
        transform: scaleX(0) !important;
    }

    .sub-nav li.on a span::after {
        opacity: 0 !important;
    }

    .sub-nav li.on a {
        font-weight: 600;
    }
    /* vẫn giữ đậm chữ */
}


/*view broucher*/

/* Khối link cơ bản (giữ nguyên phần bạn đã có) */
.qual_policy-file a {
    display: inline-flex; /* để căn giữa chữ và icon đẹp hơn */
    align-items: center;
    gap: 8px; /* khoảng cách chữ ↔ icon */
    border: 1px solid #333;
    padding: 8px 16px;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1rem; /* cỡ chữ; SVG sẽ theo cỡ này */
    line-height: 1.2; /* line-height hợp lý để baseline ổn */
    transition: background-color 0.2s ease, color 0.2s ease;
}

    /* Màu khi hover: chữ và icon đều đổi vì SVG dùng currentColor */
    .qual_policy-file a:hover {
        background-color: #f0f0f0;
        color: #02215f;
    }

/* SVG mũi tên: kích thước theo chữ + căn baseline */
.qual_policy-file .arrow svg {
    width: 1em; /* bằng chiều cao chữ hiện tại */
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em; /* chỉnh nhẹ để thẳng hàng baseline */
    transition: transform 0.25s ease;
}

    /* Nếu nét mũi tên thấy hơi dày/nhạt, tinh chỉnh stroke-width theo em */
    .qual_policy-file .arrow svg path {
        stroke-width: 0.28em; /* tỷ lệ theo font-size, sắc nét */
    }

/* Hiệu ứng: mũi tên trượt nhẹ + rung một lượt khi hover */
.qual_policy-file a:hover .arrow svg {
    transform: translateX(2px);
    animation: wobble-arrow 350ms ease-in-out;
}

/* Keyframes rung nhẹ cho mũi tên */
@keyframes wobble-arrow {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    30% {
        transform: translateX(2px) rotate(3deg);
    }

    60% {
        transform: translateX(-1px) rotate(-2deg);
    }

    100% {
        transform: translateX(2px) rotate(0deg);
    }
}

/* Truy cập: hiển thị focus rõ ràng khi dùng bàn phím */
.qual_policy-file a:focus {
    outline: 2px solid #02215f;
    outline-offset: 2px;
}

/* Tôn trọng cài đặt “giảm chuyển động” */
@media (prefers-reduced-motion: reduce) {
    .qual_policy-file .arrow svg {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}

/*module supply list*/