/* General */
body {
    max-width: 100%;
    overflow-x: hidden; /* tránh kéo ngang */
    word-wrap: break-word; /* text tự xuống dòng */
  }
.navbar-nav .nav-link {
    color: white;
    font-weight: 500;
}

.navbar-light.scrolled .nav-link {
    color: black !important;
}

/* Đổi color item trong collapse */
.navbar-collapse.show .nav-link {
    background-color: rgb(255, 255, 255);
    color: #000;
}
/* CONTACT */
.contact .contact-right button {
    border: 0.5px black solid;
}

.contact .contact-right button:hover {
    background-color: black;
    color: white;
}

.news .news-title {
    padding-bottom: 0;
}

.news .news-content {
    padding-top: 0;
}

.news .news-content a {
    text-decoration: none;
}

.news .news-content a:hover {
    font-weight: 700;
}

/* footer */
footer .copyright {
    text-decoration: none;
}

/* <= 375px */
@media (max-width: 375px) {
    * {
        box-sizing: border-box;
        
    }


    /* Pop-up */
    .popup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup .container {
        padding: 20px;
        text-align: center;
        max-width: 900px;
        position: relative;
    }

    .popup .btn-popup-close {
        border: none;
        width: 2rem;
        position: absolute;
        top: 20px;
        right: 130px;
        border-radius: 10px;
        color: black;
        background-color: #FFBC2C;
    }

    .popup .btn-popup-close:hover {
        color: white;
    }

    .popup .container img {
        width: 400px;
        height: auto;
        padding: 10px 0;
    }

    .popup .container a {
        display: block;
        letter-spacing: 0.2px;
        font-size: 1.5rem;
        color: #FFBC2C;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 900;
        text-shadow:
            1px 1px 0 #000,
            -1px 1px 0 #000,
            1px -1px 0 #000,
            -1px -1px 0 #000,
            3px 3px 0 #aaa,
            4px 4px 0 #999,
            5px 5px 0 #888,
            6px 6px 0 #777;
    }

    .popup .container a:hover {
        font-size: 2rem;
    }

    /* NAVBAR */
    .navbar .navbar-brand img {
        width: 6rem;
        height: auto;
        margin-left: 1rem;
    }

    .navbar button {
        margin-right: 2rem;
    }

    /* CAROUSEL */
    .carousel .col {
        margin-left: 1rem;
    }

    .carousel h1 {
        font-family: hanzel, sans-serif;
    }

    .carousel p {
        font-size: 0.8rem;
        font-weight: 500;
        color: white;
    }

    .carousel .btn {
        border-radius: 0.7rem;
        padding: 0.4rem;
        background-color: transparent;
        border: white 1px solid;
    }

    .carousel a {
        font-size: 0.5rem;
    }

    /* CONTACT */
    .contact {
        width: 100vw;
        padding: 2rem;
    }

    .contact .contact-left {
        display: none;
        width: 0;
    }

    .contact .contact-right {
        width: 80vw;
        margin: 0 auto;
        align-items: center;
        padding-right: 1rem;
    }
}
/* >= 375 */
@media (min-width: 320px) {

    /* Pop-up */
    .popup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup .container {
        padding: 20px;
        text-align: center;
        max-width: 900px;
        position: relative;
    }

    .popup .btn-popup-close {
        border: none;
        width: 2rem;
        position: absolute;
        top: 20px;
        right: 130px;
        border-radius: 10px;
        color: black;
        background-color: #FFBC2C;
    }

    .popup .btn-popup-close:hover {
        color: white;
    }

    .popup .container img {
        width: 400px;
        height: auto;
        padding: 10px 0;
    }

    .popup .container a {
        display: block;
        letter-spacing: 0.2px;
        font-size: 1.5rem;
        color: #FFBC2C;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 900;
        text-shadow:
            1px 1px 0 #000,
            -1px 1px 0 #000,
            1px -1px 0 #000,
            -1px -1px 0 #000,
            3px 3px 0 #aaa,
            4px 4px 0 #999,
            5px 5px 0 #888,
            6px 6px 0 #777;
    }

    .popup .container a:hover {
        font-size: 2rem;
    }
    /* .our-partner */
    .our-partner{
        display: none;
    }
}
/* >= 375 */
@media (min-width: 375px) {

    /* Pop-up */
    .popup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 9999;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .popup .container {
        padding: 20px;
        text-align: center;
        max-width: 900px;
        position: relative;
    }

    .popup .btn-popup-close {
        border: none;
        width: 2rem;
        position: absolute;
        top: 20px;
        right: 130px;
        border-radius: 10px;
        color: black;
        background-color: #FFBC2C;
    }

    .popup .btn-popup-close:hover {
        color: white;
    }

    .popup .container img {
        width: 400px;
        height: auto;
        padding: 10px 0;
    }

    .popup .container a {
        display: block;
        letter-spacing: 0.2px;
        font-size: 1.5rem;
        color: #FFBC2C;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 900;
        text-shadow:
            1px 1px 0 #000,
            -1px 1px 0 #000,
            1px -1px 0 #000,
            -1px -1px 0 #000,
            3px 3px 0 #aaa,
            4px 4px 0 #999,
            5px 5px 0 #888,
            6px 6px 0 #777;
    }

    .popup .container a:hover {
        font-size: 2rem;
    }

    /* NAV */
    .navbar {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
        padding: 1rem 0;
    }

    .navbar .navbar-brand img {
        width: 6rem;
        padding-left: 1rem;
    }

    .navbar button.navbar-toggler {
        margin-right: 2rem;
    }

    /* navar - dropdown */
    .dropdown-menu {
        opacity: 0;
        background-color: rgba(255, 255, 255, 0.644);
        padding: 1rem;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        position: absolute;
        border-radius: 10px;
        margin-top: 0.5rem;
    }

    .dropdown-menu li {
        padding-left: 1rem;
    }

    .no-bullet {
        list-style-type: none;
        padding-left: 0;
        /* (tuỳ chọn) bỏ thụt đầu dòng */
    }

    .nav-item:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-item a {
        text-decoration: none;
    }

    .nav-decor {
        position: relative;
        display: inline-block;
        padding-bottom: 5px;
        background-image: linear-gradient(to right, white, white);
        background-size: 0% 2px;
        background-repeat: no-repeat;
        background-position: left bottom;
        transition: background-size 0.5s ease;
    }

    .nav-decor:hover {
        background-size: 100% 2px;
    }

    .nav-item-style {
        font-weight: 500;
        color: black;
    }

    /* CAROUSEL */
    .carousel .col {
        margin-left: 1rem;
    }

    .carousel h1 {
        font-family: hanzel, serif;
    }

    .carousel p {
        color: white;
        font-weight: 600;
    }

    .carousel .btn {
        background-color: transparent;
        border: none;
        font-weight: 600;
    }

    .carousel .btn:hover {
        text-decoration: underline;
    }

    /* SLOGAN */
    .slogan h1 {
        padding-bottom: 0.5rem;
    }

    .slogan h2 {
        padding-bottom: 1rem;
    }

    .value .col-3,
    .value .col-2 {
        padding-top: 0;
    }

    /* CONTACT */
    .contact {
        width: 100vw;
        padding: 2rem;
    }

    .contact .contact-left {
        display: none;
    }

    .contact .contact-right {
        width: 80vw;
        margin: 0 auto;
        align-items: center;
        padding: 0 1rem;
    }

    .contact .contact-right h3 {
        text-align: center;
        padding: 1rem 0;
    }

    /* OUR partner */
}

@media (min-width: 425px) {

    /* Pop-up */
    .popup {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .popup .container {
        padding: 20px;
        max-width: 900px;
    }

    .popup .btn-popup-close {
        width: 2rem;
        top: 20px;
        right: 130px;
    }

    .popup .container img {
        width: 400px;
    }

    /* NAV */
    .navbar .navbar-brand img {
        width: 8rem;
    }

    .navbar-toggler {
        margin-right: 4rem;
    }

    /* CAROUSEL */
    .carousel h1 {
        font-family: hanzel, sans-serif;
    }

    .carousel p {
        color: white;
        font-size: 1.5rem;
    }

    .carousel .btn {
        text-decoration: none;
        color: white;
        font-size: 1rem;
        font-weight: 700;
        padding: 0.5rem;
        border-radius: 0.8rem;
        background-color: transparent;
    }

    .carousel i {
        color: white;
    }

    /* NEWS */
    .news .news-content a {
        display: inline-block;
        text-overflow: ellipsis;
        width: 100%;
        height: 6rem;
        margin: 1rem 0;
    }

    /* CONTACT */
    .contact {
        width: 100vw;
        padding: 2rem;
    }

    /* left */
    .contact .contact-left {
        display: none;
    }

    /* right */
    .contact .contact-right {
        width: 100%;
        margin: 0 auto;
        align-items: center;
    }

    .contact .contact-right h3 {
        font-size: 1rem;
        font-weight: 700;
    }

    .contact .contact-right .form-label {
        font-size: 0.6rem;
    }

    .contact .contact-right textarea {
        font-size: 0.5rem;
    }

    /* footer */
    footer {
        width: 100vw;
    }

    /* partner */
    .carousel-partner {
        overflow: hidden;
        width: 500px;
    }

    .wrap {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 200px;
        justify-items: stretch;
        animation: slide 15s linear infinite;
    }

    .wrap img {
        width: 50%;
        height: auto;
        padding: 0px 4px;
        object-fit: contain;
    }
}

/* <=770px */
@media (min-width: 768px) {

    /* Pop-up */
    .popup .btn-popup-close {
        right: 180px;
    }

    .popup .container img {
        width: 500px;
    }

    /* NAV */
    .navbar .navbar-brand img {
        width: 8rem;
    }

    /* NEWS */
    .news .news-content a {
        display: inline-block;
        text-overflow: ellipsis;
        width: 100%;
        height: 6rem;
        margin: 1rem 0;
    }

    /* value */
    .value .col-2 {
        padding-top: 1.5rem;
    }

    .value .col-3 {
        padding-top: 2rem;
    }

    /* CONTACT */
    /* left */
    .contact .contact-left {
        display: grid;
        align-items: center;
    }
    .contact-left img{
        width: 100%;
        margin-top: 1rem;
    }
    /* right */
    .contact .contact-right {
        margin: 0 auto;
        align-items: center;
        width: 50%;
    }

    .contact .contact-right h3 {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .contact .contact-right .form-label {
        font-size: 0.8rem;
    }

    .contact .contact-right textarea {
        font-size: 0.6rem;
    }

    .contact .contact-right button {
        font-size: 0.6rem;
        font-weight: 500;
    }

    /* OUR partner */
    .our-partner{
        display: contents;
    }
 
}

/* >=992px */
@media (min-width: 992px) {

    /* Pop-up */
    .popup .btn-popup-close {
        right: 200px;
    }

    .popup .container img {
        width: 500px;
    }

    /* NAV */
    .navbar .navbar-brand img {
        width: 8rem;
    }

    .navbar .navbar-collapse {
        display: flex;
        justify-content: flex-end;
    }

    /* CAROUSEL */
    .carousel p {
        color: black;
        font-weight: 500;
        font-size: 1.5rem;
    }

    .carousel .btn {
        color: black;
        border: 1px black solid;
    }

    .carousel i {
        color: black;
    }

    /* NEWS */
    .news .news-content a {
        display: inline-block;
        text-overflow: ellipsis;
        width: 100%;
        height: 6rem;
        margin: 1rem 0;
    }

    /* value */
    .value .col-2 {
        padding-top: 10rem;
    }

    .value .col-3 {
        padding-top: 2rem;
    }

    /* CONTACT */
    .contact .row {
        padding: 2rem 0;
    }

    /* left */
    .contact .contact-left {
        display: grid;
        align-items: center;
    }

    /* right */
    .contact .contact-right {
        width: 50%;
        margin: 0 auto;
        align-items: center;
    }

    .contact .contact-right h3 {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .contact .contact-right .form-label {
        font-size: 0.8rem;
    }

    .contact .contact-right textarea {
        font-size: 0.6rem;
    }

    .contact .contact-right button {
        font-size: 0.6rem;
        font-weight: 500;
    }

}

/* >= 1024px */
@media (min-width: 1024px) {

    /* Pop-up */
    .popup .btn-popup-close {
        right: 200px;
    }

    .popup .container img {
        width: 700px;
    }

    /* NAV */
    .navbar-nav .nav-link {
        color: white;
        font-weight: 500;
    }

    .navbar-light.scrolled .nav-link {
        color: black !important;
    }

    .navbar .navbar-brand img {
        width: 8rem;
    }

    .navbar .navbar-collapse {
        display: flex;
        justify-content: flex-end;
        margin-right: 4rem;
    }

    /* CAROUSEL */
    .carousel h1 span {
        font-family: hanzel, sans-serif;
    }

    .carousel .btn {
        border: none;
        font-size: 1rem;
        font-weight: 400;
    }

    .carousel .btn:hover {
        font-size: 1.1rem;
    }

    /* SLOGAN */
    .slogan h1 {
        font-weight: 700;
        font-size: 3rem;
    }

    /* NEWS */
    .news .news-content a {
        display: inline-block;
        text-overflow: ellipsis;
        width: 100%;
        height: 6rem;
        margin: 1rem 0;
    }

    .news .news-content img {
        height: 15rem;
    }

    /* CONTACT */
    .contact .row {
        padding: 2rem 0;
    }

    /* left */
    .contact .contact-left {
        display: grid;
        align-items: center;
    }

    /* right */
    .contact .contact-right {
        width: 50%;
        margin: 0 auto;
        align-items: center;
    }

    .contact .contact-right h3 {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .contact .contact-right .form-label {
        font-size: 0.8rem;
    }

    .contact .contact-right textarea {
        font-size: 0.6rem;
    }

    .contact .contact-right button {
        font-size: 0.6rem;
        font-weight: 500;
    }

    /* OUR partner */
    .our-partner {
        margin: 0;
        background: white;
        height: 50vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .our-partner .tittle {
        color: black;
        font-weight: 800;
        text-align: center;
        padding: 4rem;
    }

    .carousel-partner {
        margin: auto;
        width: 650px;
        padding-bottom: 4rem;
    }

    .wrap {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 250px;
        justify-items: stretch;
        animation: slide 10s linear infinite;
    }

    .wrap img {
        width: 80%;
        height: 10rem;
        padding: 0px 20px;
        object-fit: contain;
    }

    @keyframes slide {
        to {
            translate: calc(-4 * 250px);
        }
    }
}