@font-face {
  font-family: 'Roboto';
  src: url('/public/themes/viettel/font/Roboto/subset-Roboto-Regular.woff2') format('woff2'),
       url('/public/themes/viettel/font/Roboto/subset-Roboto-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/public/themes/viettel/font/Roboto/subset-Roboto-Bold.woff2') format('woff2'),
       url('/public/themes/viettel/font/Roboto/subset-Roboto-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}



.scroll-top-btn,
a,
a:focus,
a:hover {
    text-decoration: none;
}
.box-img {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f9f9f9;
    overflow: hidden;
}
#wrapper {
    overflow: hidden;
}
.box-img img,
img {
    height: auto;
    max-width: 100%;
}
.box-img img {
    width: auto;
    max-height: 100%;
}
.banner:after,
.home-slider .owl-item:after,
.link-overlay:after,
.section-title:after,
.service-item-title:after,
.service-item:after,
.skew-box:before,
.top-header:before,
.top-menu-content .navbar-nav > li:not(:last-child) > a:before,
.top-menu-content:before {
    content: "";
}

/* ==============================
   GLOBAL FONT – OPTIMIZED
   ============================== */
html, body {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #000;

    /* Tối ưu hiển thị chữ (UX + Ads) */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', Arial, Helvetica, sans-serif;
    font-weight: 700;
}

/*chiều rộng tối đa của nội dung*/
.mw-1800 {   
    max-width: 1800px;
    width: 100%;
    margin: 0 auto;
}
/*khoảng cách trên – dưới cho mỗi section */
.p-section {
    padding-top: 40px;
    padding-bottom: 60px;
}
/*định dạng tiêu đề của từng section (khối nội dung) */
.section-title {
    font-size: 24px; /*36*/
    font-weight: 700;
    line-height: 32px; /*40*/
    margin-top: 0;
    margin-bottom: 21px;
    color: #000;
    position: relative;
    padding-bottom: 20px;
}
/*class, nut, gioi thieu*/
.lh-24,
.main-btn,
.section-intro {
    line-height: 24px; /*khoảng cách dòng chữ */
}
/* =============================
   COLOR & TEXT
============================= */
.cl-white, /*Class tiện ích (utility class)*/
.main-btn,
.main-btn.btn-v1:focus, /*bấm,tab vào*/
.main-btn.btn-v1:hover {  /*Khi rê chuột vào nút */
    color: #fff; /* chữ màu trắng */
}

.cl-orange {
    color: #d58330; /*mau cam */
}

.section-intro { /* gioi thieu*/
    font-size: 16px;
    font-weight: 300;
}

.fw-700, /*Là class tiện ích (utility class) để làm chữ đậm. */
.main-btn {
    font-weight: 700;
}

/* =============================
   SECTION TITLE
============================= */

.section-title:after { /*phần tử giả: gạch chân trang trí, đường line màu.. */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 74px;
    height: 3px;
    background-color: #008f8c;
}

.section-title.cl-white:after {
    background-color: #fff;
}

.section-title.border-orange:after {
    background-color: #d58330;
}

/* =============================
   BUTTONS
============================= */

.main-btn {
    text-transform: uppercase;
    padding: 14px 36px;
    font-size: 16px;
    white-space: nowrap;
    letter-spacing: .06em;
    transition: .3s;
    backface-visibility: hidden;
    display: inline-block;
    border: 1px solid transparent;
}

/* --- Button V1 --- */
.main-btn.btn-v1 {
    border-color: #d58330;
    background-color: #d58330;
}

.main-btn.btn-v1:focus,
.main-btn.btn-v1:hover,
.main-btn.btn-v2 {
    background-color: #008f8c;
    border-color: #008f8c;
}

/* --- Button V2 --- */
.main-btn.btn-v2:focus,
.main-btn.btn-v2:hover {
    color: #fff;
    background-color: #d58330;
    border-color: #d58330;
}

/* =============================
   SKEW BOX EFFECT
============================= */

.skew-box { /*hiệu ứng nghiêng */
    position: relative;
}

.skew-box:before { /*là phần tử giả (pseudo-element) được tạo ra phía trước nội dung */
    position: absolute;
    background: inherit;
    top: -28px;
    right: -1%;
    width: 39.8%;
    height: 30px;
    display: block;
    transform: skew(-34deg);
    z-index: 10;
}

.skew-box-white:before {
    background: #fff;
}

.skew-box-wide:before {
    width: 62.24%;
}




.bg-main {
  background-color: #008f8c;
}
.bg-gray {
  background-color: #f9f9f9;
}
.pt-65 {
  padding-top: 65px;
}
.pt-40 {
  padding-top: 40px;
}
.pt-20 {
  padding-top: 20px;
}
.pbt-90 {
  padding-bottom: 90px;
}
.pbt-120 {
  padding-bottom: 120px;
}
.pbt-60 {
  padding-bottom: 60px;
}
.pbt-80 {
  padding-bottom: 80px;
}
.pbt-20 {
  padding-bottom: 20px;
}
.mt-50 {
  margin-top: 50px;
}
.mbt-8 {
  margin-bottom: 8px;
}
.mt-70 {
  margin-top: 70px;
}
.mt-20 {
  margin-top: 20px;
}
.mbt-70 {
  margin-bottom: 70px;
}
.mbt-20 {
  margin-bottom: 20px;
}
.mbt-15 {
  margin-bottom: 15px;
}
.socials-icon ul,
.top-menu {
  margin-bottom: 0;
}
.fs-22 {
  font-size: 22px;
}
.fs-20 {
  font-size: 20px;
}
.fs-16 {
  font-size: 16px;
}
.fs-14 {
  font-size: 14px;
}
.fw-300 {
  font-weight: 300;
}
.d-flex {
  display: flex;
}
.info-contact {
  padding-left: 0;
  list-style-type: none;
}
.info-contact li a,
.most-view-news li a {
  display: block;
  transition: 0.4s;
}


.lh-26 {
  line-height: 26px;
}
.logo .box-img {
  background-color: unset;
}
.link-overlay {
  position: relative;
}
.link-overlay:after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(61, 183, 239, 0.6);
  background-image: url(../images/icon/link-symbol.png);
  background-position: center;
  background-size: 24px;
  background-repeat: no-repeat;
  transition: 0.4s;
  cursor: pointer;
}
.link-overlay:hover:after {
  top: 0;
}
.rotate90 {
  transform: rotate(90deg);
}
.info-contact li {
  padding-left: 30px;
  position: relative;
}
.info-contact li .info-contact-icon {
  position: absolute;
  top: 0;
  left: 0;
  color: #d58330;
}
.info-contact li a {
  color: #fff;
  word-break: break-all;
}
.info-contact li a:hover,
.info-contact li a:focus {
  color: #fff;
  transform: translateX(20px);
}
.list-style-type-disc li {
  list-style-type: disc;
}
.most-view-news {
  padding-left: 40px;
}
.most-view-news li {
  color: #fff;
}
.most-view-news li a:hover,
.most-view-news li a:focus {
  transform: translateX(20px);
  color: #fff;
}
.footer-logo {
  float: left;
  background-color: unset;
}
.footer-logo img {
  max-height: 78px;
}
.socials-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.socials-icon ul {
  padding-left: 0;
}
.socials-icon li {
  display: inline-block;
}
.socials-icon li a {
  color: #b7b7b7;
  padding: 0 6px;
  transition: 0.4s;
}
.socials-icon li a:hover {
  color: #008f8c;
}
.clear-both {
  clear: both;
}
.bottom-footer {
  padding-top: 10px;
  padding-bottom: 10px;
}
.top-header {
  padding-top: 10px;
  position: relative;
  z-index: 2;
}
.top-header:before {
  position: absolute;
  top: 0;
  bottom: -24px;
  width: 10000px;
  background: #eeeff1;
  z-index: -1;
  right: 68%;
  transform: skew(-36deg);
}
.header-title {
  color: #d5832f;
  font-weight: 700;
  margin-top: 10px;
}
.header-info .mail {
  padding-top: 6px;
}
.header-info .link {
  display: flex;
  font-size: 30px;
}
.header-info .phone .icon {
  font-size: 30px;
  font-weight: 700;
  margin-right: 10px;
  color: #d58330;
}
.header-info .phone span {
  animation: change-color 1s infinite;
  line-height: 1;
}
@keyframes change-color {
  from {
    color: #188f8c;
  }
  to {
    color: #d58330;
  }
}
.header-info .mail .icon {
  font-size: 18px;
  color: #d58330;
  margin-right: 10px;
}
.top-header-content .right ul {
  list-style-type: none;
  padding-left: 0;
}
.header-info .mail span,
.top-header-content .right li {
  color: #008f8c;
  font-size: 16px;
}
.top-header-content .right li {
  line-height: 24px;
}
.top-header-content .right li span {
  margin-right: 8px;
}
.top-header-content .right li:nth-child(2) {
  padding-left: 20px;
}
.top-header-content .right li:nth-child(3) {
  padding-left: 40px;
}
.top-header-content .right li:nth-child(4) {
  padding-left: 60px;
}
.top-menu {
  border: 0;
}
.top-menu-content .dropdown .dropdown-menu {
  width: max-content;
}
.top-menu-content .dropdown .menu-rank-1 {
  left: 0;
}
.top-menu-content .dropdown .menu-rank-2 {
  left: 100%;
  max-height: 200px;
  overflow-y: auto;
  border-radius: 0;
}
.top-menu-content .dropdown .menu-rank-2::-webkit-scrollbar {
  width: 6px;
}
.top-menu-content .dropdown .menu-rank-2::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.top-menu-content .dropdown .menu-rank-2::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #d58330;
}
.top-menu-content {
    position: relative;
}
.top-menu-content:before {
    position: absolute;
    width: 10000px;
    background-color: #008f8c;
    transition: .35s all ease;
    left: 30%;
    -moz-transform: skew(-36deg);
    -webkit-transform: skew(-36deg);
    -o-transform: skew(-36deg);
    -ms-transform: skew(-36deg);
    transform: skew(-36deg);
}

.top-menu-content .navbar-nav > li > a {
    color: #fff;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 700;
    text-transform: capitalize;
    text-shadow: none;
    transition: .4s;
}


.top-menu-content .navbar-nav > li:not(:last-child) > a:after {
    position: absolute;
    content: "";
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 25px;
    background: rgba(255, 255, 255, .2);
}

.top-menu-content .navbar-nav > li:not(:last-child) > a:before {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 2px;
    background-color: #d58330;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}

.top-menu-content .navbar-nav > li.active a:before,
.top-menu-content .navbar-nav > li:hover > a:before {
    opacity: 1;
    visibility: visible;
}

.top-menu-content .dropdown-menu {
    max-width: 400px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 6px 0 rgba(0,0,0,.15);
    padding: 0;
}


.top-menu-content .dropdown-menu li a:hover .caret {
    border-left-color: #fff;
}


.mobile-logo,
.switchboard-btn {
    top: 0;
    height: 56px;
    justify-content: center;
    position: absolute;
}

.search-form .form-control:focus {
    border-color: #188f8c;
}

.mobile-logo {
    float: none;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

.mobile-logo img {
    max-height: 45px;
}

.switchboard-btn {
    right: 11px;
    align-items: center;
    display: none;
}

.switchboard-btn-off,
.switchboard-btn-on {
    font-size: 28px;
    color: #000;
    transition: .4s;
}

.switchboard-btn-on {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) rotate(-90deg);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.switchboard-btn-off {
    z-index: 2;
}

.switchboard-btn.active .switchboard-btn-on {
    transform: translateY(-50%) rotate(0);
    opacity: 1;
    visibility: visible;
}

.switchboard-btn.active .switchboard-btn-off {
    transform: rotate(90deg);
    opacity: 0;
    visibility: hidden;
}

.switchboard-popup {
    position: absolute;
    right: 0;
    top: 100%;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .22);
    padding: 30px 20px;
    margin-top: 0;
    border-bottom-left-radius: 50%;
    transition: .35s all ease;
    display: flex;
}

.switchboard-popup.active {
    opacity: 1;
    visibility: visible;
    border-bottom-left-radius: 0;
}

.switchboard-popup .left {
    width: 70%;
}

.switchboard-popup .right {
    width: 30%;
}

.popup-title {
    color: #d5832f;
    font-size: 36px;
    font-weight: 700;
    line-height: 48px;
    margin-bottom: 10px;
}

.switchboard-popup .left li {
    padding-left: 25px;
    margin-bottom: 10px;
    position: relative;
}

.switchboard-popup .left li:first-child {
    padding-left: 0;
}

.switchboard-popup .left li .mail-icon,
.switchboard-popup .left li .phone-icon {
    color: #188f8c;
    font-size: 18px;
    position: absolute;
    top: 3px;
    left: 0;
}

.switchboard-popup .right li .right-text,
.switchboard-popup li a {
    font-size: 16px;
    font-weight: 300;
    color: #000;
    line-height: 24px;
}

.switchboard-popup .right li {
    margin-bottom: 6px;
}

.switchboard-popup .right li:nth-child(2) {
    padding-left: 10px;
}

.switchboard-popup .right li:nth-child(3) {
    padding-left: 20px;
}

.switchboard-popup .right li:nth-child(4) {
    padding-left: 30px;
}

.switchboard-popup .like-icon-box {
    background-color: #d58330;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-right: 8px;
}

.switchboard-popup .right .like-icon {
    color: #fff;
    font-size: 14px;
}

.section-slide {
    position: relative;
}

.home-slider .owl-item:after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
}

.home-slider .item .slide-text-box,
.home-slider .owl-nav,
.register-form-box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.home-slider .owl-nav {
    width: 100%;
}

.home-slider .owl-nav button {
    position: absolute;
}

.home-slider .owl-nav .owl-prev {
    left: 0;
}

.home-slider .owl-nav .owl-next {
    right: 0;
}

.home-slider .owl-dots {
    position: absolute;
    bottom: 20%;
    width: 100%;
    padding-left: 20%;
    z-index: 3;
}

.home-slider .owl-dot {
    width: 16px;
    height: 16px;
    background-color: #008f8c !important;
    border-radius: 100%;
}

.home-slider .owl-dot.active {
    background-color: #d58330 !important;
}

.home-slider .owl-dot:not(:last-child) {
    margin-right: 20px;
}

.home-slider .owl-dot:focus {
    outline: 0;
}

.register-form-box {
    background: rgba(33, 33, 33, .65);
    padding: 30px 40px 40px;
    right: 20%;
    z-index: 10;
    max-width: 400px;
    width: 100%;
    max-height: 476px;
    height: 100%;
}

/*chưa biết làm gì?*/
.submit-btn,
.view-more-btn {
    padding: 14px 36px;
    transition: .4s;
}

.register-form-box h2 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.register-form-box > p {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 20px;
}

.register-form .form-control {
    border-radius: 0;
    box-shadow: none;
    border: 0;
    color: #d58330;
    font-size: 16px;
}

.register-form input {
    height: 54px;
}

.register-form .form-control:focus {
    outline: 0;
    border: 0;
}

.register-form .form-control::placeholder {
    font-size: 18px;
    color: #d58330;
    font-weight: 300;
}

.register-form textarea {
    height: 70px;
}

.submit-btn {
    color: #fff;
    background-color: #008f8c;
    border-color: #008f8c;
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    border-radius: 0;
}

.submit-btn:focus,
.submit-btn:hover {
    color: #fff;
    background-color: #00716f;
    border-color: #00716f;
    outline: 0;
    box-shadow: none;
}

.home-slider .owl-item .item {
    height: 630px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.home-slider .slide-title a {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    line-height: 48px;
    margin-bottom: 15px;
    display: block;
}

.home-slider .item .slide-text-box {
    left: 20px;
    z-index: 10;
    max-width: 500px;
    width: 100%;
}

.view-more-btn {
    font-size: 14px;
    line-height: 14px;
    color: #fff; /*trắng*/
    display: inline-block;
    background-color: #d58330; /*vàng*/
    border: 2px solid #d58330;
}


.service-item-title,
.service-item:after {
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    position: absolute;
}

.view-more-btn:focus,
.view-more-btn:hover {
    background-color: #fff;
    color:#d58330;   /*xanh:#008F8C*/
}

.btn-call-popup {
    background-color: #008f8c;
    border-color: #008f8c;
}

.btn-call-popup:focus,
.btn-call-popup:hover {
    background-color: #fff;
    color: #008f8c;
    border-color: #008f8c;
}

.service-box {
    margin-bottom: 30px;
}

.news-item .box-img,
.news-item .news-info,
.news-item .news-title {
    margin-top: 0;
    margin-bottom: 15px;
}

.service-item {
    display: block;
    overflow: hidden;
    position: relative;
}

.service-item:after {
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(246, 233, 210, .15);
    opacity: 1;
}

.service-item:hover:after {
    opacity: 0;
}

.service-item-title {
    padding: 8px 30px;
    bottom: 20px;
    left: -30px;
    z-index: 10;
    font-size: 20px;
    font-weight: 300;
    color: #fff;
}

.service-item-title .arrow-icon {
    color: #fff;
    margin-right: 10px;
    font-size: 18px;
    -webkit-transition: .3s all ease;
    -o-transition: .3s all ease;
    transition: .3s all ease;
    opacity: 0;
}

.service-item:hover .service-item-title {
    left: 0;
}

.service-item:hover .arrow-icon {
    opacity: 1;
}

.service-item-title:after {
    z-index: -1;
    position: absolute;
    top: 0;
    left: -10%;
    bottom: 0;
    background-color: #d58330;
    -webkit-transform: skew(-32deg);
    transform: skew(-32deg);
}

.wcu-item .left {
    margin-right: 15px;
}

.wcu-item .left .wcu-icon {
    font-size: 40px;
    color: #fff;
}

.wcu-item .left > span {
    background-color: #d58330;
    border-radius: 100%;
    width: 80px;
    height: 80px;
    text-align: center;
    line-height: 80px;
    box-sizing: border-box;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mobile-navbar,
.mobile-search-form {
    padding-left: 15px;
    padding-right: 15px;
}

.news-item .news-content .news-text,
.wcu-item .right > p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
}

.wcu-item .right > p {
    -webkit-line-clamp: 6;
}

.wcu-item .right a {
    color: #fff;
}

.about-us-logo {
    padding-top: 50px;
}

.news-item .news-title a {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    /*color: #d58330;*/
    /*color: #b36b22; /* Màu đậm hơn để đạt chuẩn tương phản */
    /*color: #b36b22; /* Màu cam đậm hơn để đạt chuẩn */
    color: #8b4a0b;
    transition: .4s;
}

.news-item .news-title:hover a {
    color: #008f8c;
}

.news-info .news-date,
.news-info .news-user {
    color: #595959;
    font-size: 16px;
    font-weight: 300;
}

.news-info .news-date .icon,
.news-info .news-user .icon {
    margin-right: 10px;
    font-size: 16px;
}

.news-item .news-content .news-text {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    -webkit-line-clamp: 4;
}

.mobile-navbar {
    display: none;
    background-color: #fff;
    height: 56px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    box-shadow: 0 0 10px 0 rgba(67, 67, 69, .35);
    z-index: 20;
    justify-content: space-between;
    align-items: center;
}

.mobile-navbar .mobile-menu-btn a {
    display: block;
}

.mobile-navbar .mobile-menu-btn span {
    height: 4px;
    width: 24px;
    background-color: #000;
    display: block;
    margin-bottom: 5px;
}

.mobile-navbar .mobile-menu-btn span:last-child {
    margin-bottom: 0;
}

.mobile-menu .mm-listitem a,
.mobile-menu .mm-listitem > span {
    padding-top: 15px;
    padding-bottom: 15px;
    text-transform: uppercase;
}

.mobile-menu .mm-listitem.active a {
    background-color: #fff;
    color: #188f8c;
}

.mobile-menu .mm-navbar__title {
    color: #fff !important;
}

.mobile-search-form {
    padding-top: 20px;
    overflow: hidden;
}

.mobile-search-form:after {
    display: none;
}

.mobile-search-form .form-control {
    border-radius: 0;
    box-shadow: none;
    height: 46px;
    width: calc(100% - 46px);
    float: left;
}

.mobile-search-form .mobile-submit-btn {
    width: 46px;
    height: 46px;
    float: left;
    box-shadow: none;
    background-color: #d58330;
    color: #fff;
    border: 1px solid #d58330;
}

.mobile-menu .mm-listitem_selected > a:not(.mm-btn_next),
.mobile-menu .mm-listitem_selected > span {
    background: #d58330;
}

.scroll-top-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #434345;
    z-index: 100;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 100%;
    transition: .3s;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.22);
}
/* Gom nhóm cho Search Form */
.top-menu-content .search-form,
.lz-top-menu-content .search-form {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 100%;
    right: 0;
    bottom: 0;
    z-index: 99;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    width: 370px;
    height: 54px;
    box-shadow: 0 4px 6px 0 rgba(0,0,0,.2);
}
/* Gom nhóm cho Active Search Form */
.top-menu-content .search-form.active,
.lz-top-menu-content .search-form.active {
    opacity: 1;
    visibility: visible;
    
}
/* Gom nhóm cho Active Search Form 
.top-menu-content .search-form.active,
.lz-top-menu-content .search-form.active {
    opacity: 1;
    visibility: visible;
}*/

.lz-top-menu-content .search-form.active,
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-top-btn:focus,
.scroll-top-btn:hover {
    background-color: #008f8c;
    color: #fff;
}

.scroll-top-btn.visible {
    display: flex;
    justify-content: center;
    align-items: center;
}

.call-popup-fixed {
    position: fixed;
    top: 250px;
    z-index: 999;
    -webkit-transition: all ease .4s;
    transition: all ease .4s;
}

.call-popup-fixed:hover {
    right: 0;
}

.call-popup-fixed .call-popup-fixed-btn {
    height: 55px;
    position: relative;
    transition: all ease .4s;
    -webkit-transition: all ease .4s;
    background-color: #d58330;
    padding-right: 10px;
    padding-left: 60px;
    line-height: auto;
    color: #fff;
}

.call-popup-fixed .call-popup-fixed-btn:focus {
    outline: 0;
}

.call-popup-fixed .call-popup-fixed-btn:hover {
    background-color: #f7a14a;
}
.mm-slideout {
    z-index: auto;
}

#register-modal .modal-body {
    background-color: #008f8c;
}

#register-modal .close {
    color: #fff;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 40px;
    z-index: 2;
    opacity: 1;
    line-height: .5;
}

#register-modal .close:focus {
    outline: 0;
}

#register-modal .register-form-box {
    display: block !important;
    max-width: unset;
    position: static;
    transform: translateY(0);
    margin: 0 auto;
    background: 0 0;
}

.banner-content .m-breadcrumb li:not(:last-child),
.m-breadcrumb .breadcrumb-icon {
    margin-right: 20px;
}

#register-modal .submit-btn {
    background-color: #d58330;
}

#register-modal .submit-btn:focus,
#register-modal .submit-btn:hover {
    background-color: #fff;
    border-color: #d58330;
    color: #d58330;
    box-shadow: none;
    outline: 0;
}



.banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: none !important; /* NGẮT background-image */
}
.banner:after {
    display: none !important; /* NGẮT overlay */
}


/*chung all*/
/*.banner-content {
    padding: 72px 15px 35px;
    z-index: 3;
   /* position: relative;/*absolute;relative;
}*/

.wcu-item .right h3 {
    margin-top: 0;
}
/*Đây là style desktop.*/
.banner-content .banner-title {
    color: #fff;
    font-size: 54px; /*54 */
    line-height: 70px;
    font-weight: 700;
    margin-bottom: 30px;
    /*padding-top: 10px;
    /*margin-top: 20px;*/
}

.about-page .about-content .section-title,
.contact-info-box .intro,
.contact-info-box .section-title {
    margin-bottom: 50px;
}

.banner-content .m-breadcrumb li {
    display: inline-block;
    list-style-type: none;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
}

.banner-content .m-breadcrumb li a {
    font-size: 16px;
    font-weight: 300;
    color: #d58330;
    transition: .3s;
}

.banner-content .m-breadcrumb ul {
    margin-bottom: 0;
    padding-left: 0;
}

.child-page-content {
    padding-bottom: 120px;
}

.about-content .content ul {
    padding-left: 40px;
}

.about-content .content li {
    list-style-type: disc;
}

.contact-page .banner {
    background-image: url(../images/contact/bg-contact.png);
}

.contact-info .left ul {
    padding-left: 0;
    list-style-type: none;
}

.contact-info .left ul li {
    font-size: 16px;
    font-weight: 300;
    line-height: 24px;
    margin-bottom: 15px;
    position: relative;
    padding-left: 40px;
}

.contact-info h5,
.form-contact h5 {
    font-weight: 700;
    font-size: 20px;
}

.contact-info .contact-info-icon {
    position: absolute;
    left: 5px;
    top: 5px;
    color: #188f8c;
}

.contact-info h5 {
    margin-bottom: 15px;
}

.blog-page .section-title,
.contact-info,
.form-contact h5 {
    margin-bottom: 40px;
}

.contact-info .left li a {
    color: #188f8c;
    transition: .4s;
    word-wrap: break-word;
}

.contact-info .left li a:hover {
    color: #00716f;
}

.contact-info .right h5 {
    padding-left: 40px;
    position: relative;
}

.contact-info .right h5 .share-icon {
    position: absolute;
    left: 5px;
    top: 0;
    color: #188f8c;
}

.contact-info .socials-icon {
    position: static;
    transform: translate(0, 0);
    padding-left: 40px;
}

.contact-info .socials-icon li:not(:last-child) {
    margin-right: 10px;
}

.form-contact .form-control {
    border-radius: 0;
    outline: 0;
    border: 1px solid #e1e1e1;
    box-shadow: none;
    height: 54px;
    resize: none;
}

.form-contact .form-group {
    position: relative;
}

.form-contact .form-group label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 300;
    color: #b7b7b7;
    transition: .4s;
}

.form-contact .form-group label.focus {
    font-size: 13px;
    top: 10px;
}

.form-contact .form-group.address .form-control {
    height: 80px;
    padding-top: 15px;
}

.form-contact .form-group.content .form-control {
    height: 152px;
    padding-top: 20px;
}

.form-contact .form-group.address label,
.form-contact .form-group.content label {
    top: 15px;
    transform: translateY(0);
}

.form-contact .form-group.address label.focus,
.form-contact .form-group.content label.focus {
    top: 5px;
}

.contact-content .map-canvas {
    height: 1015px;
    width: 100%;
}

.blog-page .blog-content .news-info,
.blog-page .news-box,
.sidebar-title {
    margin-bottom: 30px;
}

.news-info .news-date {
    margin-right: 20px;
}

.sidebar-title {
    font-size: 20px;
    font-weight: 700;
}

.sidebar-title-border {
    padding-bottom: 18px;
    margin-top: 0;
    position: relative;
    border-bottom: 1px solid #d0d0d0;
}

.sidebar-title-border:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 1px;
    background-color: #3db7ef;
}

.sidebar .category li {
    margin-bottom: 20px;
    list-style-type: none;
}

.sidebar .category li a {
    /*color: #188f8c;*/
    color: #006b69;
    font-weight: 300;
    font-size: 16px;
    text-decoration: none;
    padding-left: 24px;
    position: relative;
}

.sidebar .category li a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 9px;
    height: 9px;
    background-image: url(../images/icon/dropdown-d.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100%;
    transition: .4s;
}

.sidebar .category li a:hover:before {
    left: 5px;
}

.sidebar-box:not(:last-child) {
    margin-bottom: 60px;
}

.tags-box .tags-item {
    margin-right: 10px;
    display: inline-block;
}

.tags-box .tags-item a {
    padding: 14px 15px;
    background-color: #f9f9f9;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    transition: .4s;
    display: block;
}

.tags-box .tags-item a:hover,
.m-pagination li a {
    background-color: #188f8c;
    color: #fff;
}

.sub-category {
    padding-left: 40px;
    padding-top: 20px;
}

.sub-category li a {
    display: -webkit-box;
    height: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar .category li.active > a:before {
    transform: rotate(90deg);
}

.m-pagination {
    text-align: center;
    margin-top: 40px;
}

.m-pagination li {
    list-style-type: none;
    display: inline-block;
}

.m-pagination li:not(:last-child) {
    margin-right: 10px;
}

.m-pagination li a {
    border: 1px solid #188f8c;
    width: 54px;
    height: 54px;
    text-align: center;
    display: block;
    transition: .4s;
}

.m-pagination li a:hover,
.m-pagination li.active a {
    background-color: #00716f;
    color: #fff;
}

.blog-page .news-item .news-title a {
    /*color: #188f8c;*/
    color: #b36b22; /* Màu đậm hơn để đạt chuẩn tương phản */
    color: #188f8c;
    transition: .3s;
}

.post-page .left .section-title {
    margin-bottom: 30px;
    font-size: 32px;/*16 */
    font-weight: 700;
    padding-bottom: 10;
    line-height: 1.3;/*1.6 */
}

.post-content .another-news {
    margin-top: 60px;
}

.post-content .share-box {
    margin-top: 30px;
}

.post-content .share-box span a {
    color: #d58330;
}

/* ============================
   RESPONSIVE
   ============================ */

@media only screen and (max-width: 1600px) {
    .top-header:before {
        right: 70%;
    }
    .top-menu-content:before {
        left: 28%;
    }
}

@media only screen and (max-width: 1366px) {
    .home-slider:after,
    .service.skew-box:before {
        display: none;
    }
    .top-header:before {
        right: 74%;
    }
    .register-form-box {
        right: 2%;
    }
    .top-menu-content:before {
        left: 24%;
    }
    .home-slider .owl-item .item {
        height: 550px;
    }
    .section-slide .register-form-box {
        right: 8%;
    }
}

@media only screen and (min-width: 1201px) {
    .btn-call-popup {
        display: none;
    }
}

@media only screen and (max-width: 1200px) {
    .home-slider .btn-1,
    .register-form-box {
        display: none;
    }
    .top-menu-content:before {
        left: 20%;
    }
    .top-header:before {
        right: 77%;
    }
    .home-slider,
    .home-slider .item {
        height: 100vh !important;
        min-height: 480px !important;
    }
    .home-slider .item .slide-text-box {
        max-width: 100%;
        width: 90%;
        left: 10%;
    }
    .home-slider .btn-2 {
        display: inline-block;
    }
    .home-slider .owl-dots {
        bottom: 15px;
        padding-left: 0;
        text-align: center;
    }
    .home-slider .slide-title a {
        margin-bottom: 35px;
    }
}
/*Tablet & iPad*/
@media only screen and (max-width: 1024px) {
    .top-header:before {
        bottom: 0;
        right: 76%;
    }
    .top-menu-content:before {
        left: -100px;
    }
    .top-header-content {
        margin-bottom: 20px;
    }
    .top-header .container {
        width: 100%;
    }
    .top-header-content .right li:nth-child(2),
    .top-header-content .right li:nth-child(3),
    .top-header-content .right li:nth-child(4) {
        padding-left: 0;
    }
    .service-item-title {
        padding: 8px 14px;
        font-size: 18px;
    }
    .mt-70 {
        margin-top: 50px;
    }
    .mt-50 {
        margin-top: 30px;
    }
    .pbt-120 {
        padding-bottom: 90px;
    }
    .mbt-70 {
        margin-bottom: 50px;
    }
    .banner-content .banner-title,
    .form-contact h5 {
        margin-bottom: 30px;
    }
    .section-title {
        font-size: 34px;
        line-height: 40px;
    }
        /*Tablet & iPad*/
    .banner-content {
        padding-top: 35px;
    }
    .child-page .why-choose-us {
        padding-bottom: 40px;
    }
    .contact-content .map-canvas {
        height: 1045px;
    }
    .blog-page .news-item .news-title a {
        font-size: 20px;
    }
}

/*xoa 991*/

.logo {
    padding-bottom: 10px;
}

.about-us-logo {
    padding-top: 0;
}
.banner .container {
    width: 100%;
}

.contact-content .contact-info-box {
    margin-bottom: 60px;
}

.contact-content .map-canvas {
    height: 500px;
}

.contact-info .left,
.contact-info-box .intro,
.contact-info-box .section-title {
    margin-bottom: 40px;
}

.pbt-80 {
    padding-bottom: 40px;
}

.pbt-90 {
    padding-bottom: 50px;
}

.wcu-box:not(:last-child) {
    margin-bottom: 30px;
}

.wcu-item {
    display: block;
}

.wcu-item .left {
    margin-bottom: 15px;
}

.wcu-item .left span {
    margin: 0 auto;
}


.call-popup-fixed .call-popup-fixed-btn {
    padding-left: 55px;
}

.call-popup-fixed {
    top: 350px;
}


/*xoa 990*/
/* xoa 768*/
/*xoa 767*/
/*xoa 580*/
/*xoa 430*/




.call-popup-fixed .call-popup-fixed-btn {
    height: 45px;
    line-height: 45px;
    padding-left: 45px;
}

.scroll-top-btn {
    padding: 14px;
}

.register-form input {
    height: 45px;
}

.banner-content .m-breadcrumb li:not(:last-child),
.m-breadcrumb .breadcrumb-icon {
    margin-right: 10px;
}
} /*??  dư */ 


/* Gom nhóm Menu Cấp 1: Active/Open và Hover */
.top-menu-content .open > a,
.top-menu-content .open > a:focus,
.top-menu-content .open > a:hover,
.top-menu-content .navbar-nav > li:hover > a,
.top-menu-content .navbar-nav > li > a:focus,
.top-menu-content .navbar-nav > li > a:hover,
.lz-top-menu-content li.active a,
.lz-top-menu-content li:hover a {
    background-color: #188f8c;
    color: #fff;
}
/* Gom nhóm Dropdown Box Container */
.top-menu-content .dropdown-menu,
.lz-top-menu .childmenu {
    max-width: 400px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 6px 0 rgba(0,0,0,.15);
    padding: 0;
    width: max-content; 
}
/* Gom nhóm Mục Menu Con (Link) */
.top-menu-content .dropdown-menu li a,
.lz-top-menu .childmenu a {
    padding: 10px 30px;
    color: #188f8c;
    font-weight: 300;
    font-size: 14px;
    text-transform: uppercase;
    white-space: normal;
    position: relative;
    display: block; /* Đảm bảo padding hoạt động đúng */
}
/* Gom nhóm Hover Mục Menu Con */
.top-menu-content .dropdown-menu li a:hover,
.lz-top-menu .childmenu a:hover {
    background-color: #008f8c;
    color: #fff;
    background-image: none;
}
/* Gom nhóm Mũi tên (Caret) */
.top-menu-content .dropdown-menu li a .caret,
.lz-top-menu .childmenu a .caret {
    border-left-color: #008f8c;
    float: none;
    margin-top: 0;
    position: absolute;
    top: 15px;
    right: 5px;
}
.top-menu-content .dropdown-menu li a:hover .caret {
    border-left-color: #fff;
}

/* Gom nhóm Icon Dropdown Menu */
.top-menu-content .dropdown-menu li a .dropdown-menu-icon,
.lz-top-menu .childmenu a .dropdown-menu-icon {
    position: absolute;
    top: 12px;
    left: 10px;
}
/* ----------------------------- */
/* ẨN 1 SỐ PHẦN TRÊN MOBILE      */
/* ----------------------------- */

.about-page .sidebar .sidebar-box:nth-child(2),
.mobile-menu {
    display: none;
}

.mobile-menu.mm-menu_opened,
.top-menu a {
    display: block;
}

/* ----------------------------- */
/* MAX-WIDTH 380px               */
/* ----------------------------- */
/* xoa 380*/
/* xoa 320*/

/* ----------------------------- */
/* COMMON PARAGRAPH SPACING      */
/* ----------------------------- */

.about-page .about-content .left .content p,
.post-page .post-content .left .content p {
    margin: 10px 0;
    line-height: 24px;
}



.sidebar .sidebar-box ul {
    padding-left: 0;
    list-style: none;
}

.service-item-title {
    padding-left: 50px;
    line-height: 20px;
    padding-right: 40px;
}

.service-item-title .arrow-icon {
    position: absolute;
    top: 9px;
    left: 22px;
}

.bottom-footer ul,
.contact-content .content .contact-info .right ul,
.contact-content .content .contact-info ul,
.main-footer .info-contact,
.main-footer .most-view-news,
.switchboard-popup .left,
.switchboard-popup .right,
.top-header .right ul {
    list-style: none;
    padding-left: 0;
}

.main-footer .most-view-news {
    padding-left: 40px;
}

.service-item-title:after {
    width: 400px;
}

.contact-info h5,
.form-contact h5 {
    line-height: 24px;
}

.top-menu-content .caret {
    margin-left: 7px;
}

.call-popup-fixed {
    right: -148px;
}

.sidebar .sidebar-box ul .sub-category {
    display: none;
    padding-left: 30px;
}

.tags-box .tags-item {
    margin-bottom: 10px;
}

.top-menu-content .dropdown .menu-rank-1,
.top-menu-content .dropdown .menu-rank-2 {
    border: 0;
}

.sidebar .category li a {
    line-height: normal;
}

.news-box .box-img,
.service-box .box-img {
    height: 258px;
}

/*.box-img: khung chứa hình*/
.blog-content.child-page-content .news-box .news-item .box-img {  
    height: 212px;
}

#register-modal {
    padding-right: 0 !important;
}

.post-page .post-content .post-text img {
    height: auto !important;
}

.sub-category li a {
    font-size: 15px;
}

.blog-page .news-item .news-title a:hover {
    color: #00716f;
}

.banner-content .m-breadcrumb li,
.banner-content .m-breadcrumb li a {
    line-height: 20px;
}

.m-pagination li a {
    padding: 0;
    line-height: 54px !important;
}

.m-pagination .pagination-nav .pagination li .arrow-btn:hover {
    border: 1px solid #188f8c !important;
}


.mobile-search-btn {
    border-radius: 0;
    width: 46px;
    height: 46px;
    background-color: #fff;
    border: 1px solid #fff;
    color: #000;
}

.mobile-search-form .form-control,
.mobile-search-form .form-control:focus {
    border-color: #fff;
}

@media only screen and (max-width: 1024px) {
    .service-item-title {
        padding-left: 45px;
    }
    .service-item-title .arrow-icon {
        left: 20px;
    }
    .service-item-title:after {
        width: 330px;
    }
    .news-box .box-img,
    .service-box .box-img {
        height: 210px;
    }
    .blog-content.child-page-content .news-box .news-item .box-img {
        height: 172px;
    }
}
/*xoa 991 lan 2*/
/*xoa 768 lan 2*/
/*xoa 767 lan 2*/


/*xoa 580 lan 2*/
/*xoa 430 lan 2*/
/*xoa 380 lan 2*/
/*xoa 320 lan 2*/

/*XOA 768 LAN 3 -COPY Y CHANG BO VAO CUOI FILE, DOI QUA 575->OK*/
/*XOA 767 LAN 3*/
/*XOA 430 LAN 3*/

/* =======================================================
   MEDIA QUERY max-width: 430px
   ======================================================= */

/*XOA 380 LAN 3*/
/* =======================================================
   MEDIA QUERY max-width: 380px
   ======================================================= */

/*XOA 320 LAN 3*/
/* =======================================================
   MEDIA QUERY max-width: 320px
   ======================================================= */


.blog-content.child-page-content .news-box .news-item .box-img,
.news-box .box-img,
.service-box .box-img {
    height: 196px;
}



.post-text {
    overflow: hidden;
}

.mobile-menu {
    background-color: #188f8c !important;
}

.mobile-menu .mm-listitem a,
.mobile-menu .mm-listitem > span {
    color: #fff !important;
}

.mobile-menu .mm-btn:after,
.mobile-menu .mm-btn:before,
.mobile-menu .mm-listview .mm-btn_next:after {
    border-color: #fff !important;
}

.mobile-menu .mobile-search-form.mm-listitem {
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 20px;
}
/* dan stick menu*/
/* Gom nhóm chung cho Sticky Menu */
.top-menu.sticky,
.lz-top-menu.sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.15);
}
/* Gom nhóm chung cho hiệu ứng Skewed Background khi Sticky */
.top-menu.sticky .top-menu-content:before,
.lz-top-menu.sticky .lz-top-menu-content:before {
    left: -100px;
}

.lz-top-menu-content {
    position: relative;
}

.lz-top-menu-content:before {
    content: '';
    height: 100%;
    position: absolute;
    width: 10000px;
    background-color: #008f8c;
    transition: .35s all ease;
    left: 30%;
    transform: skew(-36deg);
}



.has-childmenu:after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translate(0, -50%);
    right: 15px;
    border-top: 4px dashed #fff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    transition: .3s;
}

.has-childmenu .has-childmenu:after {
    border-top: 4px dashed #188f8c;
    right: 10px;
    transform: translate(0,-50%) rotate(-90deg);
}

.has-childmenu .has-childmenu:hover:after {
    border-top: 4px dashed #fff;
}

.has-childmenu:hover > ul {
    display: block;
}

.call-popup-fixed .call-popup-fixed-btn {
    display: flex;
    align-items: center;
}

@media only screen and (max-width: 1365px) {
    .lz-top-menu-content:before {
        left: -100px;
    }
    .top-header:before {
        bottom: 0;
        right: 76%;
    }
    .lz-top-header-content {
        margin-bottom: 15px;
    }
    .lz-top-header-content .right li {
        padding-left: 0 !important;
    }
}

@media only screen and (max-width: 1024px) {
    .lz-top-header-content {
        margin-bottom: 10px;
    }
    .lz-top-header-content .right li span {
        margin-right: 5px;
    }
}

/*xoa 990px lan 2 */


@media only screen and (max-width: 1480px) {
    .lz-top-menu-content:before {
        left: -100px;
    }
}

.child-page-content {
    padding-top: 40px;
}
/*kích thước banner cho all thiết bị */
.banner-img {
    width: 100%;
    height: 300px; /* nếu muốn cao 450px đổi thành 450px */
    object-fit: cover;
    display: block;
}
/*kích thước banner cho all loại mobile-> doi ma khong tc dung */
/*xoa 767 lan 3 */



/* Fix position text over banner image */
.banner {
    position: relative;
}
/*tac dung o may tinh ban*/
.banner-content {
    position: absolute;
    top: 45%;/*40*/
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 5;
    padding: 0 15px;
}

/* GOM NHÓM: MENU CẤP 1 LIST/ITEM/LINK */
.top-menu ul,
.lz-top-menu ul {
    padding-left: 0;
}

.top-menu li,
.lz-top-menu li {
    list-style-type: none;
    position: relative;
}

.top-menu a,
.lz-top-menu a {
    color: #fff;
    display: block;
}

/* GOM NHÓM: MENU CONTENT FLEX & PADDING/FONT SIZE */
.top-menu .top-menu-content,
.lz-top-menu .lz-top-menu-content {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    z-index: 100;
}

.top-menu-content .navbar-nav > li > a,
.lz-top-menu-content .menu-lv1,
.lz-top-menu-content .search-btn {
    position: relative;
    font-size: 14px;
    padding: 18px 28px;
}

/* Khối GOM NHÓM ĐẦY ĐỦ cho Dropdown Container */
.top-menu-content .dropdown-menu,
.lz-top-menu .childmenu {
    /* Các thuộc tính CẦN THIẾT từ khối LZ- */
    position: absolute;
    top: 100%;
    left: 0; 
    z-index: 30; /* Giá trị Z-index cao hơn */
    
    /* Các thuộc tính đã có sẵn */
    max-width: 400px;
    width: max-content; /* Từ style top-menu */
    background-color: #fff;
    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,.15);
    box-shadow: 0 0 6px 0 rgba(0,0,0,.15);
    padding: 0;
    
    /* Các thuộc tính khác cần thiết */
    min-width: 250px;
    display: none;
    transition: .3s ease;
}

/*14H00 - 21/11/2025 =======================================================
   QUY TẮC CHUNG CHO MOBILE (Base Styles - Thường là 320px)
   Các giá trị này được áp dụng mặc định và ghi đè cho thiết bị nhỏ.
   ======================================================= */
.mobile-navbar {
    display: none; /* Chỉ hiển thị trong media query 990px */
    height: 56px;
    padding-left: 15px;
    padding-right: 15px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background-color: #fff;
    box-shadow: 0 0 10px 0 rgba(67, 67, 69, .35);
    justify-content: space-between;
    align-items: center;
}

.switchboard-btn {
    top: 0;
    height: 56px;
    right: 11px;
    align-items: center;
    justify-content: center;
    position: absolute;
    display: none; /* Chỉ hiển thị trong media query 990px */
}

.call-popup-fixed {
    right: -148px;
    top: 350px;
}
.call-popup-fixed .call-popup-fixed-btn {
    height: 45px;
    line-height: 45px;
    padding-left: 45px;
}
.scroll-top-btn {
    padding: 14px;
}
.main-btn {
    padding: 8px 20px;
}
.register-form input {
    height: 45px;
}
.banner-img {
    height: 300px;
}
.news-box .box-img,
.service-box .box-img,
.blog-content.child-page-content .news-box .news-item .box-img {
    height: 196px;
}

/* =======================================================
   MEDIA QUERY max-width: 990px (Mobile/Tablet Landscape)
   Ẩn Desktop Navigation, Bật Mobile Navigation
   ======================================================= */
/*xoa 990 lan 3 */
/*XOA 768 LAN  3*/

/* =======================================================
   MEDIA QUERY max-width: 768px (Tablet Portrait)
   ======================================================= */

/* 25/11/25 Định vị menu cấp 3 (lồng trong menu cấp 2) */
.childmenu .childmenu {
    max-height: 200px;
    overflow-y: auto;
    left: 100%;
    /* Sửa lỗi: đảm bảo menu cấp 3 bung sang phải */
    top: 0;
    /* Đảm bảo menu cấp 3 bắt đầu cùng vị trí dọc */
    right: auto;
    /* Đảm bảo không bị ghi đè sang trái */
    border-radius: 0;
}
/*XOA 991*/
/* =======================
   MEDIA QUERY max-width: 580->576px
========================== */
@media only screen and (max-width: 576px) {
        /*ẩn các menu desktop*/
        .top-header,
        .top-menu,
        .lz-top-menu,
        .skew-box:before {
            display: none;
        }
        /*bật menu trên mobile, logo "VNPT" và các lợi ích*/
        .mobile-navbar,
        .switchboard-btn {
            display: flex;
        }
         /* Tiêu đề H1 bài viết trên mobile */
        .post-page .left .section-title {
        font-size: 28px !important; /* Bằng H2 hiện tại của bạn */
        font-weight: 800 !important; /* Để cực đậm để phân biệt với H2 */
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
        }
        
        /*làm cho tiêu đề và văn bản được canh giữa, Why Choose Us-wcu*/
        .header-title,
        .wcu-item {
            text-align: center;
        }
        .about-page .about-content .left,
        .about-page .about-content .section-title,
        .about-us-logo,
        .main-footer .left {
            margin-bottom: 40px;
        }

        /*các tiêu đề ngoài trang chủ: về chúng tôi, tin tức, liên hệ*/
        .section-title {
            font-size: 24px; /*32px;*/
            line-height: 32px; /* 38px;*/
        }
         /*cai liên hệ*/
        .contact-content .contact-info-box {
            margin-bottom: 60px;/*60px;*/
        }
         /*cái bản đồ*/
        .contact-content .map-canvas {
            height: 500px;/*500*/
        }
         /*canh từ trên xuống cho các mục Tin, tức, thông tin liên hệ*/
        body {
            padding-top: 50px;
            /* tùy chỉnh theo đúng chiều cao header mobile */
        }
        .home-slider .slide-title a {
            font-size: 32px; 
            line-height: 42px;
        }

        .service-box {
            width: 100%;
            
        }
        /*tạo đường trang trí*/
        .service-item-title:after {
            width: 320px;/* 580*/
        }
        /*canh chiều cao khung hình*/
        .service-box .box-img {
            height: 328px;
        }
        /*các phần tử hình ảnh (hoặc container chứa hình ảnh) trong các khối tin tức (news-box) */
        .blog-content.child-page-content .news-box .news-item .box-img,
        .news-box .box-img {
            height: 216px;
        } 
      /*phần tử giả được chèn vào trước nội dung của phần tử .skew-box */
        .skew-box:before {
            right: -3%;
        }
        /*thông tin liên hệ (contact-info) */
         .contact-info .left,
         .contact-info-box .intro,
         .contact-info-box .section-title {
             margin-bottom: 40px;
         }
        /*các biểu tượng mạng xã hội (socials-icon) trong lien he */
        .contact-info .socials-icon {
            text-align: left;
        }          
         .pbt-80 {
             padding-bottom: 40px;
         }
    
         .pbt-90 {
             padding-bottom: 50px;
         }
    
         .wcu-box:not(:last-child) {
             margin-bottom: 30px;
         }
         /* "Why Choose Us"- Tại sao chọn chúng tôi).*/
         .wcu-item {
             display: block;
         }
    
         .wcu-item .left {
             margin-bottom: 15px;
         }
    
         .wcu-item .left>span {
             margin: 0 auto;
         }

        /*kích thước của một cửa sổ bật lên */
        .switchboard-popup {
            display: block;
            max-width: 450px;
            width: 100%;
            padding-bottom: 20px;
        }

        .switchboard-popup .left,
        .switchboard-popup .right {
            width: 100%;
        }

        .switchboard-popup .right li:nth-child(2),
        .switchboard-popup .right li:nth-child(3),
        .switchboard-popup .right li:nth-child(4) {
            padding-left: 0;
        }
        /*định dạng tiêu đề của một cửa sổ bật lên (popup) */
        .popup-title {
            font-size: 18px;
            line-height: 24px;
        }
       /*thiết lập kích thước chữ là 15 pixel cho một số thành phần văn bản trong cửa sổ bật lên (popup) c */
        .switchboard-popup .right li .right-text,
        .switchboard-popup li a {
            font-size: 15px;
        }
        .banner {
        height: 250px; /* Chiều cao nhỏ hơn cho mobile để banner không quá to */
        }
        /*thêm một khoảng đệm (padding) 20 pixel ở phía trên nội dung của phần tử banner. */
        .banner-content {
            padding-top: 5px; /*20 */        
            position: absolute;/* !important; /*de noi dung luon nam tre anh*/
            top: 190px;/*80 !important;*/
            left: 10px; /*!important;*/
            transform: unset !important;

            display: block;/*flex;*/
            flex-direction: column;
            /* Sắp xếp các mục theo chiều dọc */
            justify-content: center;
            /* Căn giữa nội dung theo chiều dọc */
            align-items: center;
            /* Căn giữa nội dung theo chiều ngang */
        
            /* Cần thêm chiều cao tối thiểu để căn giữa dọc hoạt động */
            min-height: unset; /*280px;*/
            /* Điều chỉnh giá trị này theo chiều cao banner thực tế trên mobile */
        }
        /*định dạng tiêu đề chính của banne  -co tac dung*/
        .banner-content .banner-title {
            font-size: 28px; /*28 */
            line-height: 1.3; /*chieu cao dong: 28px * 1.3=36.4px. */     
            text-align: center;
            margin-bottom: 10px;
        }
        /*thường là nội dung của một trang con hoặc một trang được lồng vào */
        .child-page-content {
            padding-top: 40px;
            padding-bottom: 80px;
        }
        /*trang giới thiệu. */
        .about-page .about-content .section-title {
            margin-bottom: 30px;
        }
        /*nút bấm */
        .call-popup-fixed .call-popup-fixed-btn {
            padding-left: 50px;
            height: 50px;
            line-height: 50px;
        }
}   

.main-footer {
    background-color: #007673 !important;
}
/*25/12/2025*/
#quickForm {
  scroll-margin-top: 180px;
}
/* CTA cuối bảng giá */
/*.table-cta {
  text-align: center;
  margin-top: 16px;
  padding: 20px 16px;
  background: #f9fbff;
}*/
.table-cta {
  background: #f9fbff;
  padding: 24px 16px;
  border-top: 1px solid #e6eaf2;
}
.table-cta strong {
  font-size: 16px;
  display: block;
  margin-bottom: 8px;
}


.btn-tu-van {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 22px;
  background: #0b5ed7;
  color: #fff;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  font-size: 15px;
}

.btn-tu-van:hover {
  background: #094cb8;
}


/* Mặc định: bảng canh giữa */
.post-content table {
  text-align: center;
}

/* Không ghi đè canh trái từ editor */
.post-content table td[style*="text-align:left"],
.post-content table th[style*="text-align:left"],
.post-content table .has-text-align-left {
  text-align: left;
}

/* Tùy chọn: padding cho nội dung trái */
.post-content table td[style*="text-align:left"] {
  padding-left: 12px;
}