@font-face {
    font-family: 'Averta';
    font-weight: normal;
    font-style: normal;
    src: url(../../dist/fonts/Averta-Regular.woff2) format("woff2");
}

@font-face {
    font-family: 'Averta';
    font-weight: bold;
    font-style: normal;
    src: url(../../dist/fonts/Averta-Semibold.woff2) format("woff2");
}

body,

b,
.b,
p,
.p,
span,
.span,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: "Averta", sans-serif !important;
    /* font-weight: 600;
    line-height: 1.5; */
}

.material-symbols-outlined {
  visibility: hidden; /* ẩn mặc định */
}

html.fonts-loaded .material-symbols-outlined {
  visibility: visible; /* chỉ hiện khi font đã load */
}

.material-symbols-outlined {
    /* KHÔNG đặt font-size ở đây */
    font-family: 'Material Symbols Outlined', "Averta", sans-serif !important;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-size: inherit !important;
    /* nhận size theo Tailwind */
    /* tuỳ biến trục variable font */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
    /* 48 cho icon lớn nhìn “đằm” hơn */
}

/* Tuỳ chọn: ẩn cho đến khi font load để tránh nhá chữ */
.material-symbols-outlined {
    visibility: hidden;
}

.fonts-loaded .material-symbols-outlined {
    visibility: visible;
}

#layout {
    --sidebar-open: 20%;
    --sidebar-closed: 1%;
    --sidebar-width: var(--sidebar-open);
}

/* Mobile (<768px): sidebar 80% */
@media (max-width: 767px) {
    #layout {
        --sidebar-open: 80%;
        --sidebar-closed: 1%;
        /* nếu muốn ẩn hẳn */
        --sidebar-width: var(--sidebar-open);
    }
}

#layout.sb-open {
    --sidebar-width: var(--sidebar-open);
}

#layout.sb-closed {
    --sidebar-width: var(--sidebar-closed);
}

/* Sidebar */
#sidebar {
    width: var(--sidebar-width);
}

#layout.sb-closed #sidebar .sidebar-content {
    display: none;
    /* ẩn nội dung khi thu */
}

/* Tuỳ chọn: ẩn mũi tên mặc định của Swiper để tự style */
.swiper-button-next,
.swiper-button-prev {
    color: inherit;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    display: none;
}

.w-fill {
    width: -webkit-fill-available;
    /* Chrome, Safari */
    width: -moz-available;
    /* Firefox */
    width: fill-available;
    /* Spec (tương lai) */
}

/* Line vẽ từ trái → phải */
@keyframes drawLine {
    from {
        transform: scaleX(0)
    }

    to {
        transform: scaleX(1)
    }
}

/* Ảnh chạy bằng transform (mượt, không giật) */
@keyframes pendRight {
    from {
        transform: translateX(calc(-1 * var(--pend-dist, 0px)));
    }

    to {
        transform: translateX(0);
    }
}

/* Pause mặc định, chỉ chạy khi thêm .run-anim vào container */
[class*="animate-[drawLine_"] {
    animation-play-state: paused;
    will-change: transform;
}

[class*="animate-[pendRight_"] {
    animation-play-state: paused;
    will-change: transform;
}

.run-anim [class*="animate-[drawLine_"],
.run-anim [class*="animate-[pendRight_"] {
    animation-play-state: running;
}

@media (max-width: 768px) {

    /* #diagTrack phủ từ y=-40 đến đáy + 75, rộng = chiều rộng container */
    #diagTrack {
    position: absolute;
    top: -10px;   /* A: top:-40px so với parent */
    left: 0;
    width: 100%;  /* theo yêu cầu */
    height: 336px;/* theo yêu cầu */
    pointer-events: none;
    }
    /* SVG full vùng của #diagTrack */
    #diagTrack .diag-line {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
    }

    /* Vẽ đường */
    #diagTrack line {
        stroke: #000;
        stroke-width: 2;
        fill: none;
        /* Giữ độ dày 2px kể cả khi scale */
        vector-effect: non-scaling-stroke;
    }


    /* Ảnh chạy thẳng A -> B (đúng cùng đường) */
    #diagPend {
        position: absolute;
        bottom: 262px;
        right: calc(100% - 150px);
        animation: pend-move 1.5s ease-in-out forwards;
    }

    @keyframes pend-move {
        from {
            bottom: 262px;
            right: calc(100% - 150px) !important;
        }

        /* tương đương bottom:-75; right:0 */
        to {
            bottom: -75px;
            right: 0px;
        }
    }
}


/* Mờ -> rõ */
[data-aos] {
  opacity: 0;
  transition-property: transform, opacity;
  transition-timing-function: ease-out;
}