/* Mặc định < 576px */
:root {
    --width: 320px;
    --height: 240px;
    /* 4:3 ratio */
    --height-menu: 24.14px;
    --width-menu: 137px;
    --bottom-menu: 6px;
}

/* >= 576px */
@media (min-width: 576px) {
    :root {
        --width: 426.67px;
        --height: 320px;
        --height-menu: 30.14px; 
        --width-menu: 137px;
    }
}

/* >= 768px */
@media (min-width: 768px) {
    :root {
        --width: 700px;
        --height: 525px;
        --height-menu: 60px;
        --width-menu: 150px;
        --bottom-menu: 10px;
    }
}

/* >= 992px */
@media (min-width: 992px) {
    :root {
        --width: 960px;
        --height: 720px;
        --height-menu: 70px;
        --width-menu: 137px;
        --bottom-menu: 15px;
    }
}

/* >= 1200px */
@media (min-width: 1200px) {
    :root {
        --width: 960px;
        --height: 720px;
        --height-menu: 70px;
        --width-menu: 137px;
        --bottom-menu: 15px;
    }
}

/* >= 1400px */
@media (min-width: 1400px) {
    :root {
        --width: 960px;
        --height: 600px;
        --height-menu: 70px;
        --width-menu: 137px;
        --bottom-menu: 15px;
    }
}


* {
    box-sizing: border-box;
}

body,
html {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: Arial, sans-serif;
    transition: all 0.3s ease;
}

.container-w {
    width: var(--width);
    max-width: 100%;
    margin: 0 auto;
    height: var(--height);
    margin-top: calc(49vh - var(--height) / 2);
    position: relative;
}

.box-content {
    height: 100%;
    width: 100%;
}

.box-images {
    position: relative;
}

.box-images,
.box-images .box-image,
.simple-slider,
.simple-slider .slides {
    width: 100%;
    height: 100%
}

.box-menus {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    height: var(--height-menu);
    position: relative;
    top: -8%;
    z-index: 99;
}

.box-menus .menu-onlick-slider {
    position: absolute;
    bottom: var(--bottom-menu);
    left: 0;
    width: 8%;
    height: calc(var(--height-menu));
    display: inline-block;
    color: transparent;
}

.box-menus .menu-onlick-slider-02 {
    left: 8%;
    width: 18.5%;
}

.box-menus .menu-onlick-slider-03 {
    left: 26.5%;
    width: 31.5%;
}

.box-menus .menu-onlick-slider-04 {
    left: 58%;
    width: 19%;
}

.box-menus .menu-onlick-slider-05 {
    left: 77%;
    width: 23%;
}

.scale-up-center {
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scale-up-center {
    0% {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.left-nav {
    left: 0;
}

.right-nav {
    right: 0;
}

.left-nav,
.right-nav {
    height: calc(var(--height) - var(--height-menu));
    top: 0;
    width: calc(var(--width)/100*30);
    cursor: pointer;
    position: absolute;
}

.left-nav a,
.right-nav a {
    display: block;
    height: 100%;
    text-decoration: none;
}

@media (min-width: 576px) {
    .simple-slider button {
        padding: 0.2rem;
        font-size: .5rem;
    }
}

@media (min-width: 768px) {
    .simple-slider button {
        padding: 0.5rem;
        font-size: 1rem;
    }
}

@media (min-width: 992px) {
    .simple-slider button {
        padding: 0.4rem;
        font-size: .8rem;
    }
}

@media (min-width: 1200px) {
    .simple-slider button {
        padding: 0.5rem;
        font-size: 1.2rem;
    }
}

@media (min-width: 1400px) {
    .simple-slider button {
        padding: 0.5rem;
        font-size: 1.2rem;
    }
}