body {
    font-family: "Roboto Regular",sans-serif !important;
    background-color: #000;
    min-height: 100vh;
}

@font-face {
    font-family: "Roboto Regular";
    font-display: auto;
    src: local("Roboto Regular"),url("../fonts/Merriweather_Sans/static/MerriweatherSans-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Bold";
    font-display: auto;
    src: local("Roboto Bold"),url("../fonts/Merriweather_Sans/static/MerriweatherSans-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Bold Italic";
    font-display: auto;
    src: local("Roboto Bold Italic"),url("../fonts/Merriweather_Sans/static/MerriweatherSans-BoldItalic.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Arial Regular";
    font-display: auto;
    src: local("Arial Regular"),url("../fonts/Arial/arial.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Verdana Regular";
    font-display: auto;
    src: local("Verdana Regular"),url("../fonts/Fonts/Verdana.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Verdana Bold";
    font-display: auto;
    src: local("Verdana Bold"),url("../fonts/Fonts/Verdana-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Regular";
    font-display: auto;
    src: local("Roboto Regular"),url("../fonts/Fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Black";
    font-display: auto;
    src: local("Roboto Black"),url("../fonts/Fonts/Roboto-Black.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Bold Italic";
    font-display: auto;
    src: local("Roboto Bold Italic"),url("../fonts/Fonts/Roboto-BoldItalic.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Bold";
    font-display: auto;
    src: local("Roboto Bold"),url("../fonts/Fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Medium";
    font-display: auto;
    src: local("Roboto Medium"),url("../fonts/Fonts/Roboto-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: "Roboto Light Italic";
    font-display: auto;
    src: local("Roboto Light Italic"),url("../fonts/Fonts/Roboto-LightItalic.ttf") format("truetype");
    font-weight: normal;
    font-style: normal
}

.banner-icon-prev svg, .banner-icon-next svg{
    color: #ffffff;
    
}

.header-top-mobile li{
    padding-left: 5px !important;
}

.nav-top-items span{
    font-family: "Roboto Bold", sans-serif;
}

.header-top-mobile a{
    margin-left: 0px !important;
}

.header-top-mobile li::after{
    width: 100% !important;
}

.header-top-mobile .sidebar{
    width: 60%; 
    padding: 0; 
    padding-left: 45px;
}

.sidebar  a{
    font-size: 14px !important;
    font-family: 'Roboto Regular';
}

.sidebar li{
    position: relative;
}

.sidebar li img{
    display: none;
    position: absolute;
    left: -20px;
    top: 40%;
}

.sidebar li.active img {
    display: block;
}

.menu-top{
    background: #D9D9D9;
    padding: 10px;
}
.menu-top-details a {
    display: inline-flex; /* Dùng inline-flex để căn chỉnh */
    align-items: center; /* Căn giữa nội dung theo chiều dọc */
    padding: 5px 15px; /* Tạo khoảng cách giữa các thẻ */
    position: relative; /* Định vị phần tử pseudo */
    text-decoration: none; /* Bỏ gạch chân */
    font-family: 'Roboto Medium';
    color: #000 ;
}

/* Thêm thanh dọc giữa các thẻ a, trừ thẻ cuối cùng */
.menu-top-details a:not(:last-child)::after {
    content: "";
    display: block;
    width: 1px; /* Độ rộng thanh dọc */
    height: 60%; /* Độ cao thanh dọc (nhỏ hơn chiều cao thẻ a) */
    background-color: #707070; /* Màu thanh dọc */
    position: absolute;
    right: 0;
    top: 20%; /* Căn chỉnh để thanh dọc không chạm đỉnh */
}

@media (max-width: 959px){
    .menu-top{
        background: transparent;
    }
    
    .menu-top-details a{
        color: #ffffff;
    }
}





@media (min-width: 640px){
   
    
    .header-top-mobile .sidebar{
        width: 40%;
    }
    
    .sidebar  a{
    font-size: 16px !important;
    font-family: 'Roboto Regular';
}
}

.header__search {
    width: calc(100vw - 105px);
    padding-left: 10px;
}
@media (min-width: 960px) {
    .header__search {
        width: inherit;
    }
}
.header__search__input {
    font-size: 14px !important;
}
.header__top {
    background: #101010;
    font-family: "Roboto Medium";
}
.header__top .uk-logo img {
    height: 40px !important;
}
@media screen and (min-width: 640px) {
    .header__top .uk-logo img {
        height: calc(40px + 8 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .header__top .uk-logo img {
        height: 48px !important;
    }
}
.header__top .uk-navbar-nav > li > a,
.header__top__dc,
.header__top__navitem {
    min-height: 56px;
    font-family: "Roboto Bold", sans-serif;
}
.header__top__linkTxt {
    color: #ffffff;
    font-family: "Roboto Bold", sans-serif;
}
.header__top__linkTxt {
    font-size: 13px !important;
}
@media screen and (min-width: 640px) {
    .header__top__linkTxt {
        font-size: calc(13px + 1 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .header__top__linkTxt {
        font-size: 14px !important;
    }
}
.header__bottom {
    background: #2c0b2d;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
}
.header__bottom .uk-navbar-nav > li > a,
.header__bottom__dc {
    min-height: 50px;
}
.header__bottom .uk-navbar-nav > li > a {
    position: relative;
    white-space: nowrap;
    color: #cfc3ca;
    font-family: "Roboto Medium", sans-serif;
    text-transform: inherit;
}
.header__bottom .uk-navbar-nav > li > a {
    font-size: 13px !important;
}
@media screen and (min-width: 640px) {
    .header__bottom .uk-navbar-nav > li > a {
        font-size: calc(13px + 1 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .header__bottom .uk-navbar-nav > li > a {
        font-size: 14px !important;
    }
}
.header__bottom .uk-navbar-nav > li > a.uk-open,
.header__bottom .uk-navbar-nav > li > a:hover {
    color: #ff0091;
}
.header__bottom .uk-navbar-nav > li > a.uk-open:before {
    content: "";
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid #0f0815;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.header__bottom__dropbar {
    padding: 40px;
    background: rgba(15, 6, 16, 0.95);
    background: linear-gradient(90deg, rgba(15, 6, 16, 0.95) 0, rgba(59, 1, 63, 0.95));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="$StartColorMix",endColorstr="$EndColorMix",GradientType=1);
}
.header__bottom__itemMenu {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header__bottom__itemMenu:hover {
    transform: translateZ(0) scale(1.05);
}
.header__bottom__menu1__a:hover,
.header__bottom__menu1__dc,
.uk-active > .header__bottom__menu1__a {
    background: #2c0b2d;
    color: #ff0091 !important;
}
.header__bottom__menu1__li:nth-child(n + 2) {
    margin-top: 20px;
}
.header__bottom__menu1__a {
    padding: 9px 12px !important;
    display: block;
    position: relative;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-family: "Roboto Regular", sans-serif;
}
.footer {
    background: #141414;
    padding-top: 20px;
    padding-bottom: 20px;
}
@media (min-width: 960px) {
    .footer {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
.footer__txt1 {
    color: #d8d8d8;
    font-family: "Roboto Bold", sans-serif;
}
.footer__txt1 {
    font-size: 11px !important;
}

.footer-container{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.footer-desc{
     grid-column: span 1;
}

.footer-page{
    grid-column: span 3;
    width: 100%;
}

.footer-page a{
    color: #ffffff;
    margin-left: 10px;
}

.footer-page-item{
    margin: 10px;
}
.footer-mobile{
    padding: 15px;
}

.footer-mobile .footer-mobile-desc {
    font-size: 10px; 
    padding-left: 0;
}
 .footer-mobile-desc p, .footer-mobile-desc div{
        color: #fff !important; 
        margin-bottom: 5px;
        margin-top: 5px;
        font-family: 'Roboto Regular';
}
@media screen and (min-width: 640px) {
    .footer__txt1 {
        font-size: calc(11px + 3 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .footer__txt1 {
        font-size: 14px !important;
    }
}
.footer__social {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    border-radius: 6px;
}
.facebook .footer__social:hover {
    background: #3c5a99;
}
.instagram .footer__social:hover {
    background: #dd2a7b;
}
.twitter .footer__social:hover {
    background: #1da1f2;
}
.youtube .footer__social:hover {
    background: #c4302b;
}
.footer__siteMap > li:before {
    height: 13px;
}
.footer__siteMap > li > a {
    color: #ffffff;
    font-size: 12px !important;
    font-family: "Roboto Regular", sans-serif;
    text-transform: inherit !important;
}
@media (min-width: 1600px) {
    .uk-grid-0-xl {
        margin-left: -0px !important;
    }
    .uk-grid-0-xl > * {
        padding-left: 0px !important;
    }
    .uk-grid-0-xl > .uk-grid-margin {
        margin-top: 0px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-0-l {
        margin-left: -0px !important;
    }
    .uk-grid-0-l > * {
        padding-left: 0px !important;
    }
    .uk-grid-0-l > .uk-grid-margin {
        margin-top: 0px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-0-m {
        margin-left: -0px !important;
    }
    .uk-grid-0-m > * {
        padding-left: 0px !important;
    }
    .uk-grid-0-m > .uk-grid-margin {
        margin-top: 0px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-0-s {
        margin-left: -0px !important;
    }
    .uk-grid-0-s > * {
        padding-left: 0px !important;
    }
    .uk-grid-0-s > .uk-grid-margin {
        margin-top: 0px !important;
    }
}
.uk-grid-0 {
    margin-left: -0px;
}
.uk-grid-0 > * {
    padding-left: 0px;
}
.uk-grid-0 > .uk-grid-margin {
    margin-top: 0px;
}
@media (min-width: 1600px) {
    .uk-grid-7-xl {
        margin-left: -7px !important;
    }
    .uk-grid-7-xl > * {
        padding-left: 7px !important;
    }
    .uk-grid-7-xl > .uk-grid-margin {
        margin-top: 7px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-7-l {
        margin-left: -7px !important;
    }
    .uk-grid-7-l > * {
        padding-left: 7px !important;
    }
    .uk-grid-7-l > .uk-grid-margin {
        margin-top: 7px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-7-m {
        margin-left: -7px !important;
    }
    .uk-grid-7-m > * {
        padding-left: 7px !important;
    }
    .uk-grid-7-m > .uk-grid-margin {
        margin-top: 7px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-7-s {
        margin-left: -7px !important;
    }
    .uk-grid-7-s > * {
        padding-left: 7px !important;
    }
    .uk-grid-7-s > .uk-grid-margin {
        margin-top: 7px !important;
    }
}
.uk-grid-7 {
    margin-left: -7px;
}
.uk-grid-7 > * {
    padding-left: 7px;
}
.uk-grid-7 > .uk-grid-margin {
    margin-top: 7px;
}
@media (min-width: 1600px) {
    .uk-grid-10-xl {
        margin-left: -10px !important;
    }
    .uk-grid-10-xl > * {
        padding-left: 10px !important;
    }
    .uk-grid-10-xl > .uk-grid-margin {
        margin-top: 10px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-10-l {
        margin-left: -10px !important;
    }
    .uk-grid-10-l > * {
        padding-left: 10px !important;
    }
    .uk-grid-10-l > .uk-grid-margin {
        margin-top: 10px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-10-m {
        margin-left: -10px !important;
    }
    .uk-grid-10-m > * {
        padding-left: 10px !important;
    }
    .uk-grid-10-m > .uk-grid-margin {
        margin-top: 10px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-10-s {
        margin-left: -10px !important;
    }
    .uk-grid-10-s > * {
        padding-left: 10px !important;
    }
    .uk-grid-10-s > .uk-grid-margin {
        margin-top: 10px !important;
    }
}
.uk-grid-10 {
    margin-left: -10px;
}
.uk-grid-10 > * {
    padding-left: 10px;
}
.uk-grid-10 > .uk-grid-margin {
    margin-top: 10px;
}
@media (min-width: 1600px) {
    .uk-grid-16-xl {
        margin-left: -16px !important;
    }
    .uk-grid-16-xl > * {
        padding-left: 16px !important;
    }
    .uk-grid-16-xl > .uk-grid-margin {
        margin-top: 16px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-16-l {
        margin-left: -16px !important;
    }
    .uk-grid-16-l > * {
        padding-left: 16px !important;
    }
    .uk-grid-16-l > .uk-grid-margin {
        margin-top: 16px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-16-m {
        margin-left: -16px !important;
    }
    .uk-grid-16-m > * {
        padding-left: 16px !important;
    }
    .uk-grid-16-m > .uk-grid-margin {
        margin-top: 16px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-16-s {
        margin-left: -16px !important;
    }
    .uk-grid-16-s > * {
        padding-left: 16px !important;
    }
    .uk-grid-16-s > .uk-grid-margin {
        margin-top: 16px !important;
    }
}
.uk-grid-16 {
    margin-left: -16px;
}
.uk-grid-16 > * {
    padding-left: 16px;
}
.uk-grid-16 > .uk-grid-margin {
    margin-top: 16px;
}
@media (min-width: 1600px) {
    .uk-grid-20-xl {
        margin-left: -20px !important;
    }
    .uk-grid-20-xl > * {
        padding-left: 20px !important;
    }
    .uk-grid-20-xl > .uk-grid-margin {
        margin-top: 20px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-20-l {
        margin-left: -20px !important;
    }
    .uk-grid-20-l > * {
        padding-left: 20px !important;
    }
    .uk-grid-20-l > .uk-grid-margin {
        margin-top: 20px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-20-m {
        margin-left: -20px !important;
    }
    .uk-grid-20-m > * {
        padding-left: 30px !important;
    }
    .uk-grid-20-m > .uk-grid-margin {
        margin-top: 20px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-20-s {
        margin-left: -20px !important;
    }
    .uk-grid-20-s > * {
        padding-left: 20px !important;
    }
    .uk-grid-20-s > .uk-grid-margin {
        margin-top: 20px !important;
    }
}
.uk-grid-20 {
    margin-left: -20px;
}
.uk-grid-20 > * {
    padding-left: 20px;
}
.uk-grid-20 > .uk-grid-margin {
    margin-top: 20px;
}
@media (min-width: 1600px) {
    .uk-grid-25-xl {
        margin-left: -25px !important;
    }
    .uk-grid-25-xl > * {
        padding-left: 25px !important;
    }
    .uk-grid-25-xl > .uk-grid-margin {
        margin-top: 25px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-25-l {
        margin-left: -25px !important;
    }
    .uk-grid-25-l > * {
        padding-left: 25px !important;
    }
    .uk-grid-25-l > .uk-grid-margin {
        margin-top: 25px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-25-m {
        margin-left: -25px !important;
    }
    .uk-grid-25-m > * {
        padding-left: 25px !important;
    }
    .uk-grid-25-m > .uk-grid-margin {
        margin-top: 25px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-25-s {
        margin-left: -25px !important;
    }
    .uk-grid-25-s > * {
        padding-left: 25px !important;
    }
    .uk-grid-25-s > .uk-grid-margin {
        margin-top: 25px !important;
    }
}
.uk-grid-25 {
    margin-left: -25px;
}
.uk-grid-25 > * {
    padding-left: 25px;
}
.uk-grid-25 > .uk-grid-margin {
    margin-top: 25px;
}
@media (min-width: 1600px) {
    .uk-grid-30-xl {
        margin-left: -30px !important;
    }
    .uk-grid-30-xl > * {
        padding-left: 30px !important;
    }
    .uk-grid-30-xl > .uk-grid-margin {
        margin-top: 30px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-30-l {
        margin-left: -30px !important;
    }
    .uk-grid-30-l > * {
        padding-left: 30px !important;
    }
    .uk-grid-30-l > .uk-grid-margin {
        margin-top: 30px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-30-m {
        margin-left: -30px !important;
    }
    .uk-grid-30-m > * {
        padding-left: 30px !important;
    }
    .uk-grid-30-m > .uk-grid-margin {
        margin-top: 30px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-30-s {
        margin-left: -30px !important;
    }
    .uk-grid-30-s > * {
        padding-left: 30px !important;
    }
    .uk-grid-30-s > .uk-grid-margin {
        margin-top: 30px !important;
    }
}
.uk-grid-30 {
    margin-left: -30px;
}
.uk-grid-30 > * {
    padding-left: 30px;
}
.uk-grid-30 > .uk-grid-margin {
    margin-top: 30px;
}
@media (min-width: 1600px) {
    .uk-grid-40-xl {
        margin-left: -40px !important;
    }
    .uk-grid-40-xl > * {
        padding-left: 40px !important;
    }
    .uk-grid-40-xl > .uk-grid-margin {
        margin-top: 40px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-40-l {
        margin-left: -40px !important;
    }
    .uk-grid-40-l > * {
        padding-left: 40px !important;
    }
    .uk-grid-40-l > .uk-grid-margin {
        margin-top: 40px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-40-m {
        margin-left: -40px !important;
    }
    .uk-grid-40-m > * {
        padding-left: 40px !important;
    }
    .uk-grid-40-m > .uk-grid-margin {
        margin-top: 40px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-40-s {
        margin-left: -40px !important;
    }
    .uk-grid-40-s > * {
        padding-left: 40px !important;
    }
    .uk-grid-40-s > .uk-grid-margin {
        margin-top: 40px !important;
    }
}
.uk-grid-40 {
    margin-left: -40px;
}
.uk-grid-40 > * {
    padding-left: 40px;
}
.uk-grid-40 > .uk-grid-margin {
    margin-top: 40px;
}
@media (min-width: 1600px) {
    .uk-grid-50-xl {
        margin-left: -50px !important;
    }
    .uk-grid-50-xl > * {
        padding-left: 50px !important;
    }
    .uk-grid-50-xl > .uk-grid-margin {
        margin-top: 50px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-50-l {
        margin-left: -50px !important;
    }
    .uk-grid-50-l > * {
        padding-left: 50px !important;
    }
    .uk-grid-50-l > .uk-grid-margin {
        margin-top: 50px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-50-m {
        margin-left: -50px !important;
    }
    .uk-grid-50-m > * {
        padding-left: 50px !important;
    }
    .uk-grid-50-m > .uk-grid-margin {
        margin-top: 50px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-50-s {
        margin-left: -50px !important;
    }
    .uk-grid-50-s > * {
        padding-left: 50px !important;
    }
    .uk-grid-50-s > .uk-grid-margin {
        margin-top: 50px !important;
    }
}
.uk-grid-50 {
    margin-left: -50px;
}
.uk-grid-50 > * {
    padding-left: 50px;
}
.uk-grid-50 > .uk-grid-margin {
    margin-top: 50px;
}
@media (min-width: 1600px) {
    .uk-grid-60-xl {
        margin-left: -60px !important;
    }
    .uk-grid-60-xl > * {
        padding-left: 60px !important;
    }
    .uk-grid-60-xl > .uk-grid-margin {
        margin-top: 60px !important;
    }
}
@media (min-width: 1200px) {
    .uk-grid-60-l {
        margin-left: -60px !important;
    }
    .uk-grid-60-l > * {
        padding-left: 60px !important;
    }
    .uk-grid-60-l > .uk-grid-margin {
        margin-top: 60px !important;
    }
}
@media (min-width: 960px) {
    .uk-grid-60-m {
        margin-left: -60px !important;
    }
    .uk-grid-60-m > * {
        padding-left: 60px !important;
    }
    .uk-grid-60-m > .uk-grid-margin {
        margin-top: 60px !important;
    }
}
@media (min-width: 640px) {
    .uk-grid-60-s {
        margin-left: -60px !important;
    }
    .uk-grid-60-s > * {
        padding-left: 60px !important;
    }
    .uk-grid-60-s > .uk-grid-margin {
        margin-top: 60px !important;
    }
}
.uk-grid-60 {
    margin-left: -60px;
}
.uk-grid-60 > * {
    padding-left: 60px;
}
.uk-grid-60 > .uk-grid-margin {
    margin-top: 60px;
}
@media (min-width: 1600px) {
    .mb-0-xl {
        margin-bottom: 0px !important;
    }
}
@media (min-width: 1200px) {
    .mb-0-l {
        margin-bottom: 0px !important;
    }
}
@media (min-width: 960px) {
    .mb-0-m {
        margin-bottom: 0px !important;
    }
}
@media (min-width: 640px) {
    .mb-0-s {
        margin-bottom: 0px !important;
    }
}
.mb-0 {
    margin-bottom: 0px;
}
@media (min-width: 1600px) {
    .mb-5-xl {
        margin-bottom: 5px !important;
    }
}
@media (min-width: 1200px) {
    .mb-5-l {
        margin-bottom: 5px !important;
    }
}
@media (min-width: 960px) {
    .mb-5-m {
        margin-bottom: 5px !important;
    }
}
@media (min-width: 640px) {
    .mb-5-s {
        margin-bottom: 5px !important;
    }
}
.mb-5 {
    margin-bottom: 5px;
}
@media (min-width: 1600px) {
    .mb-10-xl {
        margin-bottom: 10px !important;
    }
}
@media (min-width: 1200px) {
    .mb-10-l {
        margin-bottom: 10px !important;
    }
}
@media (min-width: 960px) {
    .mb-10-m {
        margin-bottom: 10px !important;
    }
}
@media (min-width: 640px) {
    .mb-10-s {
        margin-bottom: 10px !important;
    }
}
.mb-10 {
    margin-bottom: 10px;
}
@media (min-width: 1600px) {
    .mb-15-xl {
        margin-bottom: 15px !important;
    }
}
@media (min-width: 1200px) {
    .mb-15-l {
        margin-bottom: 15px !important;
    }
}
@media (min-width: 960px) {
    .mb-15-m {
        margin-bottom: 15px !important;
    }
}
@media (min-width: 640px) {
    .mb-15-s {
        margin-bottom: 15px !important;
    }
}
.mb-15 {
    margin-bottom: 15px;
}
@media (min-width: 1600px) {
    .mb-20-xl {
        margin-bottom: 20px !important;
    }
}
@media (min-width: 1200px) {
    .mb-20-l {
        margin-bottom: 20px !important;
    }
}
@media (min-width: 960px) {
    .mb-20-m {
        margin-bottom: 20px !important;
    }
}
@media (min-width: 640px) {
    .mb-20-s {
        margin-bottom: 20px !important;
    }
}
.mb-20 {
    margin-bottom: 20px;
}
@media (min-width: 1600px) {
    .mb-25-xl {
        margin-bottom: 25px !important;
    }
}
@media (min-width: 1200px) {
    .mb-25-l {
        margin-bottom: 25px !important;
    }
}
@media (min-width: 960px) {
    .mb-25-m {
        margin-bottom: 25px !important;
    }
}
@media (min-width: 640px) {
    .mb-25-s {
        margin-bottom: 25px !important;
    }
}
.mb-25 {
    margin-bottom: 25px;
}
@media (min-width: 1600px) {
    .mb-30-xl {
        margin-bottom: 30px !important;
    }
}
@media (min-width: 1200px) {
    .mb-30-l {
        margin-bottom: 30px !important;
    }
}
@media (min-width: 960px) {
    .mb-30-m {
        margin-bottom: 30px !important;
    }
}
@media (min-width: 640px) {
    .mb-30-s {
        margin-bottom: 30px !important;
    }
}
.mb-30 {
    margin-bottom: 30px;
}
@media (min-width: 1600px) {
    .mb-40-xl {
        margin-bottom: 40px !important;
    }
}
@media (min-width: 1200px) {
    .mb-40-l {
        margin-bottom: 40px !important;
    }
}
@media (min-width: 960px) {
    .mb-40-m {
        margin-bottom: 40px !important;
    }
}
@media (min-width: 640px) {
    .mb-40-s {
        margin-bottom: 40px !important;
    }
}
.mb-40 {
    margin-bottom: 40px;
}
@media (min-width: 1600px) {
    .mb-50-xl {
        margin-bottom: 50px !important;
    }
}
@media (min-width: 1200px) {
    .mb-50-l {
        margin-bottom: 50px !important;
    }
}
@media (min-width: 960px) {
    .mb-50-m {
        margin-bottom: 50px !important;
    }
}
@media (min-width: 640px) {
    .mb-50-s {
        margin-bottom: 50px !important;
    }
}
.mb-50 {
    margin-bottom: 50px;
}
@media (min-width: 1600px) {
    .mb-100-xl {
        margin-bottom: 100px !important;
    }
}
@media (min-width: 1200px) {
    .mb-100-l {
        margin-bottom: 100px !important;
    }
}
@media (min-width: 960px) {
    .mb-100-m {
        margin-bottom: 100px !important;
    }
}
@media (min-width: 640px) {
    .mb-100-s {
        margin-bottom: 100px !important;
    }
}
.mb-100 {
    margin-bottom: 100px;
}
@media (min-width: 1600px) {
    .mt-0-xl {
        margin-top: 0px !important;
    }
}
@media (min-width: 1200px) {
    .mt-0-l {
        margin-top: 0px !important;
    }
}
@media (min-width: 960px) {
    .mt-0-m {
        margin-top: 0px !important;
    }
}
@media (min-width: 640px) {
    .mt-0-s {
        margin-top: 0px !important;
    }
}
.mt-0 {
    margin-top: 0px;
}
@media (min-width: 1600px) {
    .mt-10-xl {
        margin-top: 10px !important;
    }
}
@media (min-width: 1200px) {
    .mt-10-l {
        margin-top: 10px !important;
    }
}
@media (min-width: 960px) {
    .mt-10-m {
        margin-top: 10px !important;
    }
}
@media (min-width: 640px) {
    .mt-10-s {
        margin-top: 10px !important;
    }
}
.mt-10 {
    margin-top: 10px;
}
@media (min-width: 1600px) {
    .mt-20-xl {
        margin-top: 20px !important;
    }
}
@media (min-width: 1200px) {
    .mt-20-l {
        margin-top: 20px !important;
    }
}
@media (min-width: 960px) {
    .mt-20-m {
        margin-top: 20px !important;
    }
}
@media (min-width: 640px) {
    .mt-20-s {
        margin-top: 20px !important;
    }
}
.mt-20 {
    margin-top: 20px;
}
@media (min-width: 1600px) {
    .mt-30-xl {
        margin-top: 30px !important;
    }
}
@media (min-width: 1200px) {
    .mt-30-l {
        margin-top: 30px !important;
    }
}
@media (min-width: 960px) {
    .mt-30-m {
        margin-top: 30px !important;
    }
}
@media (min-width: 640px) {
    .mt-30-s {
        margin-top: 30px !important;
    }
}
.mt-30 {
    margin-top: 30px;
}
@media (min-width: 1600px) {
    .mt-40-xl {
        margin-top: 40px !important;
    }
}
@media (min-width: 1200px) {
    .mt-40-l {
        margin-top: 40px !important;
    }
}
@media (min-width: 960px) {
    .mt-40-m {
        margin-top: 40px !important;
    }
}
@media (min-width: 640px) {
    .mt-40-s {
        margin-top: 40px !important;
    }
}
.mt-40 {
    margin-top: 40px;
}
@media (min-width: 1600px) {
    .mt-50-xl {
        margin-top: 50px !important;
    }
}
@media (min-width: 1200px) {
    .mt-50-l {
        margin-top: 50px !important;
    }
}
@media (min-width: 960px) {
    .mt-50-m {
        margin-top: 50px !important;
    }
}
@media (min-width: 640px) {
    .mt-50-s {
        margin-top: 50px !important;
    }
}
.mt-50 {
    margin-top: 50px;
}
.menuZee .uk-nav-default > li:nth-child(n + 2) {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.menuZee .uk-nav-default > li > a {
    padding: 10px 15px;
    font-family: "Roboto Bold", sans-serif;
}
.uk-offcanvas-page #m_ham_1 {
    transform: rotate(45deg);
    margin-top: 13px;
}
.uk-offcanvas-page #m_ham_2 {
    transform: rotate(-45deg);
    margin-top: -7px;
}
.uk-offcanvas-page #m_ham_3 {
    opacity: 0;
}
.m_nav_ham {
    width: 24px;
    height: 2px;
    background: #897c8a;
    margin: 5px auto;
    transition-duration: 0.3s;
}
.m_nav_ham_2_open {
    transform: rotate(-45deg);
    margin-top: -7px;
}
.m_nav_ham_1_open {
    transform: rotate(45deg);
    margin-top: 13px;
}
.m_nav_ham_3_open {
    opacity: 0;
}
.btn_mn {
    text-transform: inherit;
}
.uk-offcanvas .uk-offcanvas-bar {
    background: #1d001d !important;
}
.uk-offcanvas-bar {
    width: 100vw;
    left: -100vw;
}
.uk-open > .uk-offcanvas-bar {
    left: 0;
}
.menumobile__02 {
    padding-top: 28px;
    padding-bottom: 28px;
}
.menumobile__01 {
    padding-top: 15px;
    padding-bottom: 15px;
    background: #2c1b2e;
}
.menumobile__login {
    width: 96px;
}
.menumobile__login__txt {
    background: #2c1b2e;
    color: #ff0091;
    margin: 1px;
}
.menumobile__signup {
    color: #ffffff !important;
}
.menumobile__dc,
.menumobile__login,
.menumobile__signup {
    border-right: none;
    line-height: 48px;
    height: 48px;
    text-transform: inherit;
    font-family: "Roboto Bold", sans-serif;
    background: linear-gradient(90deg, red 0, #a100ff);
}
@media (max-width: 959.98px) {
    .home__dotnav {
        right: 15px !important;
        position: absolute;
        bottom: 0;
        margin-bottom: 10px;
    }
}


.home__item__page{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.home__item__page.visible {
  opacity: 1;
  transform: translateY(0);
}

.home__item:nth-child(n + 2) {
    margin-top: 20px;
}

.home__item{
    margin: 0px 10px;
}

.home__item:last-child{
    margin-bottom: 20px;
}
@media (min-width: 960px) {
    .home__item:nth-child(n + 2) {
        margin-top: 50px;
    }
    
    .home__item:last-child{
        margin-bottom: 50px !important;
    }
    
    .home__item__page{
        margin-bottom: 50px !important;
    }
}

.movie-item {
    opacity: 0;
    transform: translateY(20px); /* Dịch chuyển phần tử xuống dưới */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.movie-item.show {
    opacity: 1;
    transform: translateY(0); /* Phần tử trở về vị trí ban đầu */
}
.home__box1 {
    margin: 15px;
}
@media (min-width: 960px) {
    .home__box1 {
        margin: 72px;
    }
}
.home__box1__title {
    font-family: "Roboto Medium", sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
    color: #ffffff;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 24px;
}
.home__box1__title {
    font-size: 14px !important;
}
@media screen and (min-width: 640px) {
    .home__box1__title {
        font-size: calc(14px + 26 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .home__box1__title {
        font-size: 40px !important;
    }
}
.home__box1__desc {
    font-size: 16px;
    color: #ffffff;
    line-height: 1.625;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    overflow: hidden;
}
.home__box1__btn1 {
    line-height: 30px;
    position: relative;
    padding-left: 40px;
    padding-right: 20px;
    font-family: "Roboto Bold", sans-serif;
    text-transform: inherit;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.7);
}
@media (min-width: 960px) {
    .home__box1__btn1 {
        line-height: 38px;
    }
}
.home__box1__btn1 {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .home__box1__btn1 {
        font-size: calc(12px + 4 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .home__box1__btn1 {
        font-size: 16px !important;
    }
}
.home__box1__btn1:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 10px solid #fff;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
}
.home__box3__title {
    font-family: "Roboto Medium", sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 16px !important;
}

@media screen and (min-width: 640px) {
    .home__box3__title {
        font-size: calc(14px + 16 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .home__box3__title {
        font-size: 24px !important;
    }
}
.home__box3__more {
    font-family: "Roboto Regular", sans-serif;
    color: #fff !important;
}
.home__box3__more:hover{
    color: #fff !important;
}
.home__box3__more {
    font-size: 10px !important;
}
@media screen and (min-width: 640px) {
    .home__box3__more {
        font-size: 15px !important;
    }
}
@media screen and (min-width: 1200px) {
    .home__box3__more {
        font-size: 15px !important;
    }
}


@media (max-width: 959.98px) {
    .home__box4 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .clip-details-watch{
        width: 100%;
        text-align: center;
    }
}
.home__box2 {
    /*background: rgba(255, 255, 255, 0.06);*/
 
}
.home__box2__movie{
    max-width: 162px;
}

.home__box2__clip{
    max-width: 219px;
}
    
@media (max-width: 676px){
    .home__box2__movie{
        max-width: 112px;
    }
    
    .home__box2__clip{
        max-width: 169px !important;
    }
}
.home__box2__icon:hover {
    color: #ff0091 !important;
}
.home__box2__title {
    font-family: "Roboto Medium";
    -webkit-line-clamp: 2;
    overflow-y: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    font-size: 13px;
}

@media screen and (min-width: 640px){
    .home__box2__title{
        font-size: 15px;
    }
}
.home__box2__overlay {
    cursor: pointer;
    padding: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0, #000);
}
@media (max-width: 959.98px) {
    .home__box2__overlay {
        opacity: 0 !important;
    }
}
.home__box2__img {
/*    max-height: 60%;
    max-width: 60%;*/
/*    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;*/
    margin: auto;
    background-color: transparent;
}

.home__box2__img__movie{
     height: 230px !important;
     /*width: 100% !important;*/
     width: 162px;
}

.home__box2__img__clip{
    height: 123px !important;
    /*width: 100% !important;*/
    width: 219px;
}

@media (max-width: 676px){
    .home__box2__img__movie{
     height: 152px !important;
     /*width: 100% !important;*/
     width: 112px;
}

    .home__box2__img__clip{
        height: 95px !important;
        /*width: 100% !important;*/
        width: 169px;
    }
}
@media (max-width: 959.98px) {
    .home__box5 {
        padding-left: 15px;
        padding-right: 15px;
        width: -webkit-max-content;
        width: max-content;
    }
}
@media (max-width: 959.98px) {
    .home__box5__width {
        width: 320px !important;
    }
}
.home__box5__title {
    font-family: "Roboto Bold", sans-serif;
}
.home__box5__title {
    font-size: 11px !important;
}
@media screen and (min-width: 640px) {
    .home__box5__title {
        font-size: calc(11px + 5 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .home__box5__title {
        font-size: 16px !important;
    }
}
.home__box5__title a {
    color: #ffffff;
}
.catalog__section {
    padding-top: 20px;
    padding-bottom: 20px;
}
@media (min-width: 960px) {
    .catalog__section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
.catalog__title {
    font-family: "Roboto Bold", sans-serif;
}
.catalog__title {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .catalog__title {
        font-size: calc(12px + 6 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .catalog__title {
        font-size: 18px !important;
    }
}
.catalog__title a {
    color: #ffffff;
}
.catalog__desc {
    color: rgba(255, 255, 255, 0.5);
}
.catalog__desc {
    font-size: 14px !important;
}
@media screen and (min-width: 640px) {
    .catalog__desc {
        font-size: calc(14px + 4 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .catalog__desc {
        font-size: 18px !important;
    }
}
.catalog__tags {
    color: rgba(255, 255, 255, 0.5);
}
.catalog__tags {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .catalog__tags {
        font-size: calc(12px + 4 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .catalog__tags {
        font-size: 16px !important;
    }
}
.catalog__tags > :not(:last-child):after {
    content: ",";
}
.detail__section {
    padding-top: 0;
}
@media (min-width: 960px) {
    .detail__section {
        padding-top: 20px;
    }
}
.detail__list1 > li {
    color: rgba(255, 255, 255, 0.5);
    position: relative;
}
.detail__list1 > li {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .detail__list1 > li {
        font-size: calc(12px + 6 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__list1 > li {
        font-size: 18px !important;
    }
}
.detail__list1 > li:nth-child(n + 2):before {
    content: "";
    opacity: 0.2;
    background-color: #fff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
}
.detail__boxShare {
    background: rgba(255, 255, 255, 0.04);
    padding: 15px 20px;
}
.detail__boxShare__txt {
    color: rgba(255, 255, 255, 0.5);
}
.detail__boxShare__txt {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .detail__boxShare__txt {
        font-size: calc(12px + 2 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__boxShare__txt {
        font-size: 14px !important;
    }
}
.detail__box1 {
    color: #d8d8d8;
}
.detail__box1 {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .detail__box1 {
        font-size: calc(12px + 6 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__box1 {
        font-size: 18px !important;
    }
}
.detail__box2 {
    color: rgba(255, 255, 255, 0.5);
}
.detail__box2 {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .detail__box2 {
        font-size: calc(12px + 6 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__box2 {
        font-size: 18px !important;
    }
}
.detail__box2 span {
    color: #d8d8d8;
}
.detail__box3__txt {
    color: #d8d8d8;
    font-family: "Roboto Bold", sans-serif;
}
.detail__box3__txt {
    font-size: 16px !important;
}
@media screen and (min-width: 640px) {
    .detail__box3__txt {
        font-size: calc(16px + 8 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__box3__txt {
        font-size: 24px !important;
    }
}
.detail__box3__img {
    border-radius: 6px;
}
.detail__box3__title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    overflow: hidden;
}
.detail__box3__title {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .detail__box3__title {
        font-size: calc(12px + 4 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__box3__title {
        font-size: 16px !important;
    }
}
.detail__box3__title a {
    color: #d8d8d8;
}
.detail__box4 {
    margin-bottom: 20px;
}
@media (max-width: 959.98px) {
    .detail__box4 {
        margin-left: -15px;
        margin-right: -15px;
    }
}
.detail__box4__tags {
    font-size: 12px;
}
.detail__box4__title {
    color: #ffffff;
    font-family: "Roboto Bold", sans-serif;
    margin-bottom: 10px;
}
.detail__box4__title {
    font-size: 14.4px !important;
}
@media screen and (min-width: 640px) {
    .detail__box4__title {
        font-size: calc(14.4px + 3.6 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__box4__title {
        font-size: 18px !important;
    }
}
.detail__box4__link {
    color: #aaaaaa !important;
    text-decoration: none;
}
.detail__box4__txt {
    font-size: 14px;
}
.detail__box4__view > li {
    display: inline-flex;
    align-items: center;
}
.detail__box4__view > li:nth-child(n + 2):before {
    content: "" !important;
    margin: 0 7px !important;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #aaaaaa;
}
.detail__box4__view span {
    color: #aaaaaa !important;
    position: relative;
}
.detail__box4__view span {
    font-size: 12px !important;
}
@media screen and (min-width: 640px) {
    .detail__box4__view span {
        font-size: calc(12px + 2 * ((100vw - 640px) / 560)) !important;
    }
}
@media screen and (min-width: 1200px) {
    .detail__box4__view span {
        font-size: 14px !important;
    }
}
.detail__box5 {
    border-bottom: 1px solid;
    padding-bottom: 15px;
}
.detail__box6 {
    padding: 20px 0;
    border-bottom: 1px solid;
}
.detail__box6__txt {
    color: #ffffff;
    font-size: 14px;
}
.detail__box6__title {
    font-size: 14px;
    font-family: "Roboto Bold", sans-serif;
    color: #ffffff;
}
.detail__box6__regis {
    font-size: 13px;
    color: #aaaaaa;
}
.detail__box6__btn {
    background-color: #2f2f2f;
}
.detail__box7 {
    padding-top: 20px;
}
.detail__box7__txt1 {
    font-size: 16px;
    color: #ffffff;
    font-family: "Roboto Bold", sans-serif;
}
.detail__box7__txt2 {
    font-size: 14px;
    color: #aaaaaa;
}
.detail__box7__input {
    background-color: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 14px;
    color: white;
}
.detail__box7__input:focus {
    background-color: transparent;
}
.detail__box7__btn {
    background-color: #555555;
    font-size: 14px;
}
.detail__box7__cancel {
    color: #aaaaaa;
    font-size: 14px;
}
.uk-active > .detail__box8__tab__a {
    color: #ffffff !important;
}
.detail__box8__title {
    font-size: 12px;
    color: #ffffff;
    font-family: "Roboto Bold", sans-serif;
}
@media (max-width: 639.98px) {
    .movie__01 {
        width: 29% !important;
    }
}

@media (min-width: 1200px) {
    .custom-width-1-8 {
        width: calc(100% / 8); /* Chia chiều rộng thành 1/8 */
    }
    
    .custom-width-1-7 {
        width: calc(100% / 7); /* Chia chiều rộng thành 1/6 */
    }
}

/* Để thêm chút hiệu ứng chuyển động */
#moreText {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#moreText.show {
    display: block !important;
    opacity: 1 !important;
}


/*# sourceMappingURL=style.css.map */



/*------------inc_top---------------*/

  .uk-offcanvas-bar {
        background-color: #303030; /* Customize the background */
        color: #fff; /* Customize the text color */
    }

    .uk-offcanvas-bar .uk-nav a {
        color: #fff; /* Make the menu links white */
        font-size: 18px; /* Adjust font size */
    }

    .uk-offcanvas-bar .uk-nav a:hover {
        background-color: #3EB3FC; /* Hover effect */
    }

    #offcanvas-nav {
        margin-top: 62px;
    }

    .uk-offcanvas-bar.uk-offcanvas-bar-animation.uk-offcanvas-slide {
        background: linear-gradient(to bottom, #000000, #1E1E1E) !important;
    }

    #offcanvas-nav .uk-nav li a {
        display: flex; /* Giúp căn chỉnh nội dung và ảnh ngang hàng */
        align-items: center; /* Căn giữa theo chiều dọc */
        justify-content: space-between; /* Tạo khoảng cách giữa văn bản và ảnh */
    }

    #offcanvas-nav .uk-nav li a .list-icon {
        width: 16px; /* Kích thước ảnh, tùy chỉnh theo ý muốn */
        height: 16px;
        margin-left: 8px; /* Khoảng cách giữa văn bản và ảnh */
    }

    .uk-nav.uk-nav-default li {
        padding: 7%;
        text-transform: uppercase;
        position: relative;
    }

    .uk-nav.uk-nav-default li::after {
        content: ""; /* Tạo pseudo-element */
        position: absolute;
        bottom: 0; /* Đặt ở dưới cùng của thẻ li */
        right: 0; /* Căn đường viền về bên phải */
        width: 85%; /* Độ dài của đường viền là 70% */
        border-bottom: 1px solid #505050; /* Độ dày và màu sắc của đường viền */
    }

    .uk-nav.uk-nav-default li a {
        margin-left: 9%;
    }

    .list-icon {
        height: 30px !important;
        width: 30px !important;
    }

    /* Input OTP Styles */
    #otp-container input {
        width: 40px;
        height: 40px;
        text-align: center;
        border: none;
        font-size: 20px;
        background-color: transparent;
        color: #000;
        border-bottom: 2px solid #000;
        outline: none;
        transition: border-color 0.3s ease;
    }

    #otp-container input:focus {
        border-bottom: 2px solid #3EB3FC;
    }
    
    @media screen and (max-width: 676px){
        #otp-container input {
            max-width: 22px;
            font-size: 15px;
        }
    }

    /* Countdown Timer */
    #otp-timer {
        font-size: 14px;
        color: #FF0000;
    }

    .search-container {
        display: flex;
        align-items: center;
        position: relative; /* Để kiểm soát dropdown */
    }

    /* Style cho input */
    #search-input, #search-input-mobile {
        width: 300px; /* Chiều rộng input */
        height: 40px;
        font-size: 16px;
        color: #444444;
        background-color: #fff; /* Nền tối */
        border: none; /* Không viền */
        outline: none; /* Không khung khi focus */
        padding: 0 10px;
        display: block; /* Hiển thị mặc định trên tablet/desktop */
        border-radius: 4px; /* Bo góc */
        transition: all 0.3s ease-in-out; /* Hiệu ứng mượt */
        max-width: 100%;
    }

    #search-input::placeholder, #search-input-mobile::placeholder {
        color: #444444;
        font-size: 15px;
        font-family: "Roboto Regular";
        font-style: italic;

    }

    /* Style biểu tượng tìm kiếm */
    #search-icon {
        cursor: pointer;
        margin-left: 10px;
    }
    
    #search-container-mobile{
        display:  none;
    }
    
    @media (max-width: 1300px){
        #search-input{
            width: 200px !important;
        }
    }
    
    

    /* Mobile: Chỉ hiển thị biểu tượng tìm kiếm */
    @media (max-width: 640px) {
          #search-container-mobile{
            visibility: hidden; 
            opacity: 0; 
            max-height: 0;
            transition: visibility 0s 0.5s, opacity 0.5s ease, max-height 0.5s ease-out; 
          }
        
        #search-container-mobile.active-container{
            padding: 15px 0;
            display: flex;
            justify-content: space-around;
            background-color: #000;
            visibility: visible; 
            opacity: 1; 
            max-height: 200px; 
            transition: visibility 0s 0s, opacity 0.5s ease, max-height 0.5s ease-out; 
        }
        
        .search-container-wrap{
            background-color: #fff;
            display: flex;
            border-radius: 4px;
        }
        
        
        #search-input-mobile {
            max-width: 90%;
            background-color: #fff;
            overflow: hidden; 
        }


        .search-container {
            justify-content: flex-end; /* Canh phải icon trong header */
        }
    }
  
    .check-pack-container{
        margin-top: 20px;
    }
    
    @media (max-width: 640px) {
    .check-pack-container {
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
        overflow-x: scroll;
        width: 100%;
        gap: 15px;
        padding: 10px;
    }
    
    .check-pack-item {
        width: 230px;
        height: auto;
        border: none;
        outline: none;
        font-size: 15px;
        font-family: "Roboto Regular", sans-serif;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        padding: 10px;
        min-height: 250px;
    }
    
    .check-pack-item a{
        width: 100%;
        text-align: center;
    }
    
    .check-pack-item button {
        width: 80%;
        padding: 5px;
        background-color: #3EB3FC;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
        font-family: "Roboto Bold", sans-serif;
        text-align: center;
    }
}
    
    
    .package-item{
        border: none !important;
    }
    
    @media (max-width: 640px){
        .package-item{
            max-width: 330px !important;
        }
        
        .package-expand-item{
            max-width: 350px !important;
        }
    }
    .view-user-description{
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: repeat(3, 1fr); 
        align-items: center;
    }
    
    @media (min-width: 1200px){
        .video-player-container{
            min-height: 60vh;
        }
    }
    
    . content-container{
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    @media (min-width: 640px){
        . content-container{
            padding-left: 30px !important;
            padding-right: 30px !important;
        }
    }

    @media (min-width: 960px){
        . content-container{
            padding-left: 40px !important;
            padding-right: 40px !important;
        }
    }
    
    .view-page-about{
        
        h2{
            font-size: 20px;
            color: #ffffff;
            margin-bottom: 10px;
            margin-top: 20px;
            font-family: 'Roboto Medium';
        }
        
        p{
            margin: 0;
            font-size: 16px;
        }
    }
    
    .view-page-container *{
        color: #ffffff !important;
        background-color: transparent !important;
    }
    
    .page-table{
        border-spacing: 0;
        width: 70%;
    }
    
   .page-table td, .page-table table, .page-table tbody{
        border: solid 1px #ffffff !important;
    }
    
    .page-table td{
        padding: 5px 10px;
    }
    
   

/*------------inc_top---------------*/