
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
/* HEADER  MENU TRÊN */
 .banertop{
		width:100%; 
		height:auto;
		display:block;
	}
.header-barmenu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    color: #fff;
    margin: 0 auto;      /* căn giữa */
    width: 100%;         /* vẫn full khi nhỏ hơn */
}
.header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 20px;
    color: #fff;
     
    max-width: 1450px;   /* giới hạn 1400px */
    margin: 0 auto;      /* căn giữa */
    width: 100%;         /* vẫn full khi nhỏ hơn */
}

/* HOTLINE */
.hotline strong{
  font-size:20px;
}

/* SEARCH */
.search-box{
  display:flex;
  align-items:center;
  gap:8px;
}

.search-box input{
  width:350px;
  padding:10px;
  border:none;
  outline:none;
}

.search-box button{
  padding:10px 15px;
  border:none;
  border-radius:5px;
  cursor:pointer;
}

.consult-btn{
  background:#00c2ff;
  color:#fff;
}

/* BUTTON */
.schedule-btn{
  background:#00d084;
  border:none;
  padding:10px 15px;
  border-radius:20px;
  color:#fff;
  cursor:pointer;
}
.titledv{
	    font-size: 22px;
    font-weight: 600;
    padding-bottom: 12px
}
/* MODAL */
.modal{
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  justify-content:center;
  align-items:center;
      z-index: 999999;
}

.modal-box{
  background:#fff;
  padding:20px;
  border-radius:12px;
  color:#000;
}

.modal-box h3{
  margin-top:0;
}

.modal-box input{
  width:100%;
  padding:10px;
  margin:6px 0;
  border:1px solid #ddd;
  border-radius:8px;
}

.modal-box button{
  width:100%;
  padding:10px;
  background:#00c853;
  border:none;
  color:#fff;
  border-radius:8px;
  cursor:pointer;
  margin-top:10px;
}

.close{
  display:block;
  text-align:center;
  margin-top:10px;
  color:red;
  cursor:pointer;
}

/* ===== MOBILE ===== */
/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    /* Header */
    .banertop{
		width:100%; 
		height:auto;
		display:none;
	}
    .header-barmenu{
        padding:8px 12px;
    }

    .header-bar{
        padding:10px 12px;
        display:flex;
        flex-direction:column;
        gap:12px;
    }

    /* Hotline */

    .hotline{
        display:none;
    }

    /* Search */

    .search-box{
        width:100%;
        display:flex;
        align-items:center;
        gap:8px;
        margin:0;
    }

    .search-box input{
        flex:1;
        height:44px;
        padding:0 14px;
        border:1px solid #ddd;
        border-radius:8px;
        font-size:15px;
    }

    .search-box button{

        width:46px;
        height:44px;

        padding:0;

        border-radius:8px;
    }

    /* Button */

    .consult-btn{
        display:none;
    }

    .schedule-btn{

        width:100%;

        height:46px;

        border-radius:8px;

        font-size:15px;

        font-weight:600;
    }

    /* MENU */

    .menuatv-container{

        height:68px;

        padding:0 12px;
    }

    .menuatv-logo img{

        width:130px;
    }

    .menuatv-toggle{

        display:block;

        font-size:30px;

        color:#222;

        line-height:1;
    }

    /* Mobile Menu */

    .menuatv-mobile{

        width:290px;

        padding:18px;
    }

    .menuatv-mobile ul li a{

        padding:15px 0;

        font-size:15px;
    }

    /* Sticky */

    #menuatv-header{

        box-shadow:0 3px 10px rgba(0,0,0,.08);
    }

}

/* HEADER  MENU WEB  */



/* RESET */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================
   HEADER
========================= */

#menuatv-header{

    width:100%;

    background:#fff;

    position:sticky;
    top:0;

    z-index:99999;

    box-shadow:0 2px 12px rgba(0,0,0,0.06);

    transition:0.35s ease;
}

/* KHI SCROLL */

#menuatv-header.menu-scroll{

    box-shadow:0 5px 25px rgba(0,0,0,0.08);

    animation:menuFade 0.4s ease;
}

@keyframes menuFade{

    from{
        transform:translateY(-15px);
        opacity:0;
    }

    to{
        transform:translateY(0);
        opacity:1;
    }

}
/* ICON MENU */

.menuatv-nav ul li a{

    display:flex;

    align-items:center;

    gap:6px;
}

/* ARROW */

.menuatv-arrow{

    font-size:13px;

    transition:0.3s ease;
}

/* XOAY ICON */

.menuatv-nav ul li:hover > a .menuatv-arrow{

    transform:rotate(180deg);

    color:#e60000;
}
/* =========================
   CONTAINER
========================= */

.menuatv-container{

    max-width:1450px;

    margin:auto;

    padding:0 5px;

    display:flex;

    align-items:center;

    justify-content:space-between;
}

/* =========================
   LOGO
========================= */

.menuatv-logo img{

    width:180px;

    display:block;
}

/* =========================
   DESKTOP MENU
========================= */

.menuatv-nav ul{

    list-style:none;
}

.menuatv-nav > ul{

    display:flex;

    align-items:center;
}

/* ITEM */

.menuatv-nav > ul > li{

    position:relative;
}

/* LINK */

.menuatv-nav > ul > li > a{

       display: block;
    padding: 18px 15px;
    color: #222;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: 0.3s ease;
}

/* HOVER */

.menuatv-nav > ul > li:hover > a{

    color:#e60000;
}

/* =========================
   SUBMENU
========================= */
/* MENU */

.menuatv-ul{

    list-style:none;

    margin:0;
    padding:0;

    display:flex;

    align-items:center;
}

/* ITEM */

.menuatv-li{

    position:relative;
}

/* LINK */

.menuatv-li > a{

    display:flex;

    align-items:center;

    gap:6px;

    padding:24px 18px;

    text-decoration:none;

    color:#222;

    font-size:16px;

    font-weight:600;

    transition:0.3s ease;
}

/* HOVER */

.menuatv-li:hover > a{

    color:#e60000;
}

/* SUBMENU */

.menuatv-submenu{

    position:absolute;

    top:120%;
    left:0;

    width:340px;

    background:#fff;

    border-radius:14px;

    padding:12px 0;

    box-shadow:0 10px 35px rgba(0,0,0,0.08);

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:all 0.35s ease;

    z-index:9999;

    list-style:none;
}

/* SHOW */

.menuatv-li:hover > .menuatv-submenu{

    opacity:1;
    visibility:visible;

    top:100%;

    transform:translateY(0);
}

/* SUB ITEM */

.menuatv-sub-li{

    width:100%;
}

/* SUB LINK */

.menuatv-sub-li a{

    display:block;

    padding:15px 22px;

    color:#222;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    border-bottom:1px solid #f2f2f2;

    transition:0.25s ease;
}

/* HOVER */

.menuatv-sub-li a:hover{

    background:#e60000;

    color:#fff;

    padding-left:30px;
}

.menuatv-nav ul li ul{

    position:absolute;

    top:120%;
    left:0;

    width:340px;

    background:#fff;

    border-radius:14px;

    padding:12px 0;

    box-shadow:0 10px 35px rgba(0,0,0,0.08);

    opacity:0;
    visibility:hidden;

    transform:translateY(10px);

    transition:all 0.35s ease;

    z-index:9999;
}

/* SHOW */

.menuatv-nav ul li:hover > ul{

    opacity:1;
    visibility:visible;

    top:100%;

    transform:translateY(0);
}

/* ITEM */

.menuatv-nav ul li ul li{

    width:100%;

    position:relative;
}

/* LINK CON */

.menuatv-nav ul li ul li a{

    display:block;

    width:100%;

    padding:15px 22px;

    color:#222;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    line-height:1.5;

    border-bottom:1px solid #f2f2f2;

    transition:all 0.25s ease;
}

/* LAST */

.menuatv-nav ul li ul li:last-child a{
    border-bottom:none;
}

/* HOVER */

.menuatv-nav ul li ul li a:hover{

    background:#f6f6f6;

    color:#fff;

    padding-left:30px;
}

/* =========================
   SUBMENU LEVEL 2
========================= */

.menuatv-nav ul li ul li ul{

    top:0;
    left:100%;

    opacity:0;
    visibility:hidden;
}

/* SHOW */

.menuatv-nav ul li ul li:hover > ul{

    top:0;
    left:100%;

    opacity:1;
    visibility:visible;
}

/* =========================
   MOBILE BUTTON
========================= */

.menuatv-toggle{

    display:none;

    font-size:30px;

    cursor:pointer;
}

/* =========================
   MOBILE MENU
========================= */

.menuatv-mobile{

    position:fixed;

    top:0;
    left:-100%;

    width:300px;
    height:100%;

    background:#fff;

    z-index:999999;

    overflow-y:auto;

    transition:0.35s ease;

    padding:20px;
}

/* ACTIVE */

.menuatv-mobile.active{
    left:0;
}

/* CLOSE */

.menuatv-close{

    font-size:35px;

    text-align:right;

    cursor:pointer;

    margin-bottom:20px;
}

/* LIST */

.menuatv-mobile ul{
    list-style:none;
}

/* ITEM */

.menuatv-mobile ul li{

    border-bottom:1px solid #eee;
}

/* LINK */

.menuatv-mobile ul li a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px 0;

    color:#222;

    text-decoration:none;

    font-size:15px;

    font-weight:600;
}

/* SUB MOBILE */

.menuatv-mobile ul li ul{

    display:none;

    padding-left:15px;
}

/* ACTIVE */

.menuatv-mobile ul li.active > ul{
    display:block;
}

/* =========================
   OVERLAY
========================= */

.menuatv-overlay{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.5);

    opacity:0;
    visibility:hidden;

    transition:0.3s ease;

    z-index:999998;
}

/* ACTIVE */

.menuatv-overlay.active{

    opacity:1;
    visibility:visible;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px){

    .menuatv-nav{
        display:none;
    }

    .menuatv-toggle{
        display:block;
    }

    .menuatv-logo img{
        width:140px;
    }

}