@font-face {
    font-family: 'Roboto-Bold';
    src: url('templates/fonts/Roboto-Bold.woff2') format('woff2'),
         url('templates/fonts/Roboto-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('templates/fonts/Roboto-Regular.woff2') format('woff2'),
         url('templates/fonts/Roboto-Regular.woff') format('woff');
    font-weight:normal;
    font-style: normal;
}

body {
    font-family: 'Roboto-Regular', sans-serif;
    transition: var(--trans);
    max-width: 1920px;
    overflow-x: hidden;
}

a {
    color: #000;
}

.hover-color:hover {
    color: #FF99A8;
}
h1{font-size: 2rem;}
.menu-mobile{display: none;}
/* Menu */
.menu{position:relative;z-index:10;}
.menu ul.menu-pc{width:100%;padding:0px;margin:auto;list-style:none;}
.menu ul.menu-pc li{position:relative;z-index:1;}
.menu ul.menu-pc li.line{width:1px;height:15px;background-color:rgba(0,0,0,0.1);}
.menu ul.menu-pc li a{display:block;position:relative;color:#fff;padding:0px 25px;font-weight:500;text-transform:uppercase;text-decoration:none!important;white-space: nowrap;}
.menu ul.menu-pc li a.has-child{padding-right:16px;margin-right:8px;}
.menu ul.menu-pc li a.has-child:after{content:'';position:absolute;bottom:calc(50% - 4px/2);right:5xpx;width:5px;height:5px;border:1px solid #fafafa;border-top:0px;border-left:0px;-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all 0.4s ease-out;-moz-transition:all 0.4s ease-out;-o-transition:all 0.4s ease-out;-ms-transition:all 0.3s ease-out;transition:all 0.3s ease-out;border-color:#FF99A8;}
.menu ul.menu-pc li ul{position:absolute;min-width:250px;background:#FF99A8;border-radius:0.25rem;-webkit-box-shadow:1px 1px 15px rgb(0 0 0 / 15%);box-shadow:1px 1px 15px rgb(0 0 0 / 15%);-webkit-transform:perspective(600px) rotateX(-90deg);transform:perspective(600px) rotateX(-90deg);-webkit-transform-origin:0 0 0;transform-origin:0 0 0;opacity:0;visibility:hidden;transition:all .5s;list-style: none;margin: auto;padding: 0;}
.menu ul.menu-pc li:hover > ul{-webkit-transform:perspective(600px) rotateX(0);transform:perspective(600px) rotateX(0);-webkit-transform-origin:0 0 0;opacity:1;visibility:visible;transition:all .7s;}
.menu ul.menu-pc li ul li{padding-left:10px;padding-right:10px;}
.menu ul.menu-pc li ul li a{font-weight:400;font-size:14px;text-align:left;border-bottom:1px solid #eee;text-transform: capitalize;}
.menu ul.menu-pc li ul li:last-child > a{border-bottom:0px;}
.menu ul.menu-pc li ul li a.has-child{margin-right:0px;}
.menu ul.menu-pc li ul li a.has-child:after{-moz-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);}
.menu ul.menu-pc li ul li a{line-height: 20px;padding: 0px;}
.menu ul.menu-pc li ul li ul{left: 100%;top: 0;}
.menu ul.menu-pc li a:hover,.menu ul.menu-pc li a.active{
    color: #194E9E!important;
}

.menu.fixed ul.menu-pc{justify-content: space-between!important;}
.dropdown-menu {
    width: 100%;
    min-width: auto;
    padding: 1px;
}
.dropdown-item {padding: 0;text-align: center;}
.dropdown-item:focus, .dropdown-item:hover{background-color: #FF99A8;}

.dropdown-menu li a img{max-width: 26px;}

.list-none {list-style: none;}

.text-about {
    padding-left: 60px;
}
.text-about:after{
    position: absolute;
    content: "";
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    background: #FF99A8;
    width: 53px;
    height: 1px;
}
.question-txt{position: relative;padding-bottom: 20px;}
.question-txt:after{
    position: absolute;
    content: "";
    background: url('templates/images/icon-title.png') no-repeat;
    left: 0;
    bottom: 0;
    width: 292px;
    height: 6px;
}
ul.accordion {list-style: none;}
ul.accordion li {border-bottom: 1px solid rgba(0,0,0,0.3);}
ul.accordion li:last-child{border: none;}
.accordion-title {transition: background 0.3s;}
.accordion-content {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.4s ease;
}
ul.accordion li.active .accordion-content {opacity: 1;max-height: 100%;margin-top: 1rem;}

.cursor-pointer {cursor: pointer;}

.title-question{position: relative;}
ul.accordion li:hover .title-question{color: #FF99A8;}
.title-question span{display: block;width: 10px;height: 10px;position: relative;}
.title-question span:after,.title-question span:before{
    position: absolute;
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.3);
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
}

.title-question span:before {
    left: 50%;
    top: 0;
    transform: translate(-50%,0);
    width: 1px;
    height: 100%;
}

ul.accordion li.active .title-question span:before{
    transform: translate(0,-50%) rotate(90deg);
    top: 50%;
    transition: 0.8s all;
}

.fixed{position: fixed!important;z-index: 9999;top: 0px;left: 0px;right: 0px;}

.breadCrumb{background-color: #F4F4F4;padding: 10px 0;}
.breadCrumb .breadcrumb{margin-bottom: 0;text-transform: uppercase;}
.breadCrumb .breadcrumb a{text-decoration: none;color: #000;}
.breadCrumb .breadcrumb li.active a{color: rgba(0, 0, 0, 0.5);}

.breadcrumbDetail .breadcrumb-item a, .breadcrumbDetail .breadcrumb-item+.breadcrumb-item::before {
    color: #0052A5;
}

.form-search {
    position: absolute;
    bottom: -41px;
    right: 110px;
    z-index: 99;
    border: 1px solid #FF99A8;
    opacity: 0;
    transition: 0.7s;
}

.form-search.active {
    opacity: 1;
    transition: 0.7s;
}

.mb-8{margin-bottom: 10rem;}

.scrollToTop{width:41px;height:41px;text-align:center;color:#fff;text-decoration:none;position:fixed;bottom:15px;right:15px;display:none;z-index:10;cursor:pointer;background: #FF99A8;line-height: 41px;border-radius: 10px;}

.thumb-pro-detail{display:block!important;border:1px solid #eee;padding:5px;border-radius:3px;cursor:pointer;background-color:#ffffff;}
.thumb-pro-detail.mz-thumb.mz-thumb-selected{border-color:#cecfd2;}
.thumb-pro-detail img{box-shadow:none!important;filter:brightness(100%)!important;border-bottom:0px!important;padding-bottom:0px!important;}

.bg-footer:after{
    background: url('templates/images/bg-footer.png')no-repeat;    
    width: 100%;
    height: 165px;
    position: absolute;
    content: "";
    top: -165px;
    left: 0;
}

.bg-body {
    background: linear-gradient(
        to bottom,
        rgba(255, 153, 168, 0),
        rgba(255, 153, 168, 0.1),
        rgba(255, 153, 168, 0.1),
        rgba(255, 153, 168, 0.3), 
        rgba(255, 153, 168, 0)
      );
}
#b-sendtv, .btn-contact {
    position: relative;
    background: url('templates/images/bg-more.png')no-repeat;
    width: 100%;
    max-width: 233px;
    height: 59px;
}

.items-why{position: relative;width: 100%;max-width: 243px;height: 243px;border:15px solid #FF99A8 ;
display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 0 20px;}
.items-why img{max-width: 60px; }
.owl-carousel-why{background: url('templates/images/bg-why.png')no-repeat;padding: 26px 0;background-size: 100%;}
.pt-6{padding-top: 7rem;}

.btn-advise {position: absolute;left: 0;bottom: -15px;background: url('templates/images/bg-more.png')no-repeat;
width: 100%;max-width: 193px;height: 49px;line-height: 49px;cursor: pointer;}

.title-underline-footer:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 32px;
    height: 2px;
}

.widget-desktop-items { border-radius: 50%; position: relative;background-color: #fff;width: 100%;max-width: 55px;margin: auto;height: 55px;line-height: 50px; }
.widget-desktop-items img{position: relative;z-index: 999;}
.widget-desktop-items:before { position: absolute; content: ""; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: scaleIn1 1s; animation: scaleIn1 1s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
.widget-desktop-items:after { position: absolute; content: ""; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(0, #fff), to(#fff)); background: linear-gradient(90deg, #fff 0, #fff 100%); border-radius: 50%; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: scaleIn 1.2s; animation: scaleIn 1.2s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }
@-webkit-keyframes scaleIn { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } }

@keyframes scaleIn { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.2); transform: translate(-50%, -50%) scale(1.2); } }
@-webkit-keyframes scaleIn1 { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.4); transform: translate(-50%, -50%) scale(1.4); } }
@keyframes scaleIn1 { from { -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  60% { -webkit-transform: translate(-50%, -50%) scale(1.4); transform: translate(-50%, -50%) scale(1.4); } }
@-webkit-keyframes shake { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); }
  10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); }
  20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); transform: rotate(25deg) scale(1) skew(1deg); }
  30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); }
  40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); transform: rotate(25deg) scale(1) skew(1deg); }
  50% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); }
  100% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } }

@keyframes shake { 0% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); }
  10% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); }
  20% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); transform: rotate(25deg) scale(1) skew(1deg); }
  30% { -webkit-transform: rotate(-25deg) scale(1) skew(1deg); transform: rotate(-25deg) scale(1) skew(1deg); }
  40% { -webkit-transform: rotate(25deg) scale(1) skew(1deg); transform: rotate(25deg) scale(1) skew(1deg); }
  50% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); }
  100% { -webkit-transform: rotate(0) scale(1) skew(1deg); transform: rotate(0) scale(1) skew(1deg); } }
.shake { -webkit-animation: shake 1s infinite ease-in-out; animation: shake 1s infinite ease-in-out; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; }

.contact__info {border: 1px dashed #fff;}
.form-contact{padding: 5rem 2rem;}

.modal{z-index: 9999;}

.Swiper_spct {
    height: 400px;
}

.swiper-wrapper{
    height: auto!important;
}

.swiper-button-next, .swiper-button-prev {
    background-color: #fff;
    border-radius: 4px;
}

.icon-search {
    padding: 5px 10px;
}

#tabMenu {background-color: #E7E7E7;}

#tabMenu li {
    display: inline-block;
    padding: 8px 15px;
    cursor: pointer;
}
#tabMenu li.active,#tabMenu li:hover {background-color: #fff;border-top: 2px solid #FF99A8;}
.tab-pane {display: none;margin-top: 15px;}
.tab-pane.active {display: block;}

.grecaptcha-badge {display: none!important}


.navbar .active,  .navbar a:hover{
    background-color: #fff;
    color: #0052A5!important;
}

input::placeholder {
    color: gray;
    font-size: 16px;
}
.detail_content p {
    margin-bottom: 0;
}
.map_footer iframe{
    width: 100%;
}
.product__grid { display: grid; grid-template-columns: repeat(3, calc(33.33% - (15px * 2 / 3))); grid-gap: 15px; }
.news__grid { display: grid; grid-template-columns: repeat(2, calc(50% - (20px / 2))); grid-gap: 20px; }
.RobotoBold {
    font-family: 'Roboto-Bold';
}

.bg-main {
    background-color: #FF99A8;
}
.bg-hotline {
    background: url('templates/images/bg-hotline.png') no-repeat;
    width: 100%;
    max-width: 233px;
    min-height: 59px;
}
.items-news {border-bottom: 1px dashed rgba(0, 0, 0, 0.25);}
.img-new {width: 100%;max-width: 234px;}
.items-content-new{width: calc(100% - 234px);}
.items-content-new .desc{font-size: 14px;}
.color-main {
    color: #FF99A8;
}
.color-gray {
    color: rgba(0, 0, 0, 0.5);
}
.rounded-button {
    border-radius: 0 2rem 2rem 2rem;
  }
.text-justify {
    text-align: justify;
}
.line-height-ssm {
    line-height: 12px;
}
.logo-header {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 300px;
    background: #fff;
    z-index: 99;
    text-align: right;
    padding: 23px 30px;
    border-top-right-radius: 5rem;
    border-bottom-right-radius: 5rem;
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
}
.title-underline:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0);
    background: url(templates/images/icon-title.png);
    width: 292px;
    height: 6px;
}
.title-underline-about:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    background-color: #0052A5;
    width: 46px;
    height: 3px;
}

.overflow-hidden {
    overflow: hidden !important;
}
.shadow-bottom {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.rounded-top-left {
    border-top-left-radius: 1rem;
}
.rounded-top-right {
    border-top-right-radius: 1rem;
}
.rounded-top-left-new {
    border-top-left-radius: 3rem;
}
.bg-linear {
    background: linear-gradient(to top, rgba(0, 82, 165, 1), rgba(0, 82, 165, 0));
}
img.zoom-hover {
    transition: transform 0.4s ease;
}

img.zoom-hover:hover {
    transform: scale(1.2);
}
.arrow {
    list-style-type: "→ ";
}

.item-content-news {
    max-width: 90%;
    background-color: #fff;
    margin-top: -1rem;
    z-index: 99;
    position: relative;
    margin-left: auto;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
}

.line-secondary::after {
    position: absolute;
    content: "";
    right: 0;
    bottom:0;
    background-color: rgba(0, 0, 0, 0.3);
    width: 1px;
    height: 40px;
}
.owl-nav {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0,-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.owl-prev {
    margin-left: -15px;
}
.owl-next {
    margin-right: -15px;
}
.custom-prev, .custom-next {
    background: #EFEEEE;
    border: none;
    padding: 3px 7px;
    border-radius: 50%;
    cursor: pointer;
} 
.custom-prev:hover, .custom-next:hover {
    background: #003d7a;
    color: #fff;
}
.main-achievements {
    width: 100%;
    max-width: 1054px;
    position: absolute;
    bottom: -4rem;
    right: 0;
}
.bg-more {
    background: url("templates/images/bg-more.png") no-repeat;
    background-size:100% 100%;
    width: 100%;
    max-width: 210px;
    text-align: center;
    min-height: 56px;
    line-height: 56px;
}
.content-feeback {
    top: 50%;
    right: 0;
    transform: translate(0,-50%);

}
.border-bottom-sm {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.items-feeback {
    border-top-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    margin-top: 25px;
}
.icon-feeback {
    top: -1.5rem;
    position: absolute;
    width: 100%;
    max-width: 53px;
}
.mw-avt {
    max-width: 64px;
}
.px-feeback {
    padding: 1.5rem 2.5rem;
    padding-top: 3rem;
}
.owl-carousel-feeback {
    position: absolute;
    right: -340px;
    top: 0;
    z-index: 1;
}
.text-2line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Hiển thị 2 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
    height: 45px;
}
.text-4line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* Hiển thị 2 dòng */
    overflow: hidden;
    text-overflow: ellipsis;
    height: 90px;
}
.owl-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.owl-dots button span {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #C5C5C5;
    margin: 0 3px;
}
.owl-dots button.active span {
    background-color: #fff;
}
.grid-list{display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;}
.item-list{border: 1px solid #eee;position: relative;overflow: hidden;}
.item-list::before,
.item-list::after {content: '';position: absolute;width: 0;height: 0;transition: 0.6s ease;}
.item-list::before {top: 0;left: 0;}
.item-list::after{bottom: 0;right: 0;}
.item-list:hover::after{border-right: 1px solid #FF99A8;width: 100%;height: 100%;border-bottom: 1px solid #FF99A8;}
.item-list:hover::before{border-left: 1px solid #FF99A8;width: 100%;height: 100%;border-top: 1px solid #FF99A8;}
.item-list:hover{color: var(--color-blue);}
a{text-decoration: none;}