/* === ROBOTO SELF-HOST (TỐI ƯU NHẤT) === */

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

@font-face {
  font-family: 'Roboto';
  src: url('/viettel/font/Roboto/subset-Roboto-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('/viettel/font/Roboto/subset-Roboto-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
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%;
}
.hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}
.box-img img {
    width: auto;
    max-height: 100%;
}
.banner: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;
}
html {
    
    font-display: swap;
}

body {
    font-synthesis: none;
}
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 */
    /*color: #008f8c;*/
}
.cl-dark { color: #000000; }


.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: #005da4;
    border-color: #005da4;
    transition: all 0.3s ease; /* Làm hiệu ứng mượt mà */
}

/* --- Button V2 --- */
.main-btn.btn-v2:focus,
.main-btn.btn-v2:hover {
    color: #005da4;
    background-color: #ffcc00;
    border-color: #ffcc00;
    border-color: #d58330;
    border-radius: 4px !important; /* Bo góc nhẹ nhìn hiện đại hơn */
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 93, 164, 0.3) !important; /* Đổ bóng xanh nhẹ */
    transform: translateY(-3px) !important; /* Nút nảy nhẹ lên */
}
/* =============================
   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("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'%3E%3C/path%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'%3E%3C/path%3E%3C/svg%3E");
  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;*/
   color: #ff9900;
}
.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;*/
    color: #006b69;
  }
  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;
     min-height: 70px;
}

.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 {
    width: auto;
    height: 45px;
}


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

.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;
}
.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;
}
.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-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: #333333;*/
    color: #8b4a0b;
    transition: .4s;
}

/*.news-item .news-title:hover a {
    color: #005da4; /*008f8c*/
}*/
.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;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    box-shadow: 0 0 10px 0 rgba(67, 67, 69, .35);
    z-index: 20; /*cu 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;
}
/* 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 {
    opacity: 1;
    visibility: visible;
}

.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 */
    /* --- Code thêm vào để fix lỗi CLS --- */
    min-height: 300px; /* Bằng chiều cao của ảnh banner ở dòng 1041 */
    aspect-ratio: 1490 / 312; /* Tỷ lệ khung hình dự phòng (giả sử ảnh 1920x600-thuc te 1490x312) */
    display: block;
}

.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: 60px; /*120*/
}

.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 .news-box,
.sidebar-title {
    margin-bottom: 30px;
}
.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: #005da4; /*006b69*/
    font-weight: 300;
    font-size: 16px;
    text-decoration: none;
    padding-left: 24px;
    position: relative;
}
.sidebar .category li a:hover {
    color: #ffcc00; /* Đổi sang màu vàng khi rê chuột */
    font-weight: 500;
}

.sidebar .category li a:before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 9px;
    height: 9px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");    
    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 {
    background-color: #188f8c;
    color: #fff;
}
/* ========================================================= */
/* ĐỒNG BỘ & TỐI ƯU NÚT PHÂN TRANG (PAGINATION) CHUẨN VNPT   */
/* ========================================================= */

/* 1. Trạng thái mặc định (Gộp chung kích thước và màu sắc) */
.m-pagination li a {
    display: block;
    width: 54px;
    height: 54px;
    line-height: 54px; /* Ép chữ nằm chính giữa theo chiều dọc */
    padding: 0;
    text-align: center;
    background-color: #005da4; /* Nền xanh VNPT */
    color: #ffffff; /* Chữ trắng */
    border: 1px solid #005da4; /* Viền xanh VNPT (ghi đè viền xanh ngọc cũ) */
    border-radius: 4px; /* Bo góc hiện đại */
    transition: all 0.3s ease; /* Chuyển động mượt */
}

/* 2. Trạng thái khi rê chuột (Hover) và Trang đang chọn (Active) */
.m-pagination li a:hover,
.m-pagination li.active a {
    background-color: #ffcc00; /* Nền Vàng VNPT */
    border-color: #ffcc00;
    color: #005da4; /* Chữ Xanh VNPT */
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 93, 164, 0.2);
    transform: translateY(-2px); /* Hiệu ứng nảy nhẹ lên */
}
.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;
}
.blog-page .news-item .news-title a {
    color: #333333; /*màu đen tiêu đề danh sách bài viết*/
    /*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) {
    .service.skew-box:before {
        display: none;
    }
    .top-header:before {
        right: 74%;
    }
    .register-form-box {
        right: 2%;
    }
    .top-menu-content:before {
        left: 24%;
    }
    .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) {
    .register-form-box {
        display: none;
    }
    .top-menu-content:before {
        left: 20%;
    }
    .top-header:before {
        right: 77%;
    }
}
/*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;
}

.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;*/
    color: #006b69;
    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;
    display: none !important;    
}
/* ----------------------------- */
/* Ẩ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;*/
    color: #005da4;
}

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


.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: 100vw;
    background-color: #004B91; /*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 {
    content: ''; /* Đảm bảo có content để hiển thị phần tử giả */
    display: block;
    width: 8px; /* Chỉnh lên 8px một chút cho cân đối với chữ */
    height: 8px;
    border: none; /* Xóa sạch các viền rác cũ (bao gồm cả nét đứt) */
    border-right: 2px solid #ffffff; /* Tạo cạnh phải mũi tên */
    border-bottom: 2px solid #ffffff; /* Tạo cạnh dưới mũi tên */
    transform: translateY(-50%) rotate(-45deg); /* Xoay để chĩa sang phải */
    position: absolute;
    top: 50%;
    right: 15px;
    transition: all 0.3s ease;
}

.has-childmenu .has-childmenu:hover:after {
    border-right-color: #ffcc00; /* Đổi viền phải sang màu vàng khi hover */
    border-bottom-color: #ffcc00; /* Đổi viền dưới sang màu vàng khi hover */
}
.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: 20px; /*40*/
}
/*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;
}*/
.banner-img {
    width: 100%;
    height: 100%; 
    object-fit: cover;
    display: block;
    aspect-ratio: 1490 / 312; /* Thay 1920/600 bằng tỷ lệ thật của ảnh banner bạn đang dùng */
}
/*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: 50%;/*40*/
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 5;
    padding: 0 15px;
}
.child-page-content .section-title {
    color: #005da4; /* Đổi màu chữ sang Xanh VNPT cho uy tín - TIÊU ĐỀ NHÓM */
    font-size: 32px; 
    text-transform: uppercase;
}
.child-page-content .section-title:after {
    content: '';
    display: block;
    background-color: #ffcc00; /* VẠCH KẺ NGANG - ĐỔI MÀU Ở ĐÂY (Màu vàng) */
    width: 80px;
    height: 4px;
    margin-top: 10px;
    border-radius: 4px;
}
/* Ẩn title lặp ngay dưới banner */
          /*  .child-page-content .section-title,
            .child-page-content h1 {
                display: none !important;
                margin: 0 !important;
                padding: 0 !important;
                height: 0 !important;
                overflow: hidden !important;
            }*/
           /* 1. Ẩn tiêu đề bài viết (Dòng chữ "DÀNH CHO...") */
    /* Dùng dấu > để chỉ tác động đến thẻ h2 nằm TRỰC TIẾP trong khung .left */
/*    .child-page-content .left > h2.section-title {
        display: none !important;
    }   */

/* 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;
}
.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 {
width: 100% !important;
    /* Ép khung luôn theo tỷ lệ 3:2 (ngang 3 đứng 2) */
    aspect-ratio: 3 / 2 !important; 
    height: auto !important; /* Bỏ cao cố định để không bị khoảng trắng */
    overflow: hidden;
    background-color: #f8f9fa;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 6px;
}
.news-item .box-img img {
    width: 100% !important;
    height: 100% !important;
    /* Dùng lại cover để lấp đầy, nhưng mình sẽ chỉ bạn cách up ảnh để không mất hình */
    object-fit: cover !important; 
    transition: transform 0.4s ease;
}
/* Hiệu ứng phóng nhẹ hình khi rê chuột vào ô bài viết */
.news-item:hover .box-img img {
    transform: scale(1.05);
}

/* =======================================================
   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;
        }
        .top-menu-content {
        min-height: 56px;
            }

        body {
          
            padding-top: 56px !important;
          
        }
         
        
        .mobile-navbar {
            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;
    }
        
    .news-item .box-img img {
        object-fit: contain !important; /* Hiện toàn bộ ảnh trên mobile */
        background-color: #ffffff; /* Nền trắng cho sạch */
    }

        /*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ệ*/
        .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;
        }
        
/* 1. Khung bao ngoài Mobile: Tự động co giãn, xóa bỏ khoảng trắng */
    .banner {
        margin-top: 0px;
        width: 100% !important;
        height: auto !important; 
        min-height: unset !important; /* CHÌA KHÓA: Tiêu diệt khoảng trắng thừa ở dưới */
        aspect-ratio: auto !important; /* Hủy tỷ lệ dẹp của máy tính */
        overflow: hidden;   
        display: block;      
    }

    /* 2. Ảnh Banner Mobile: Hiển thị 100% không cắt xén một milimet nào */
    .banner-img {
        width: 100% !important;
        height: auto !important; /* Cho phép ảnh tự quyết định chiều cao gốc */
        aspect-ratio: auto !important; /* Hủy tỷ lệ dẹp của máy tính */
        object-fit: contain !important; /* CHÌA KHÓA: Ép hiển thị trọn vẹn 100% tấm ảnh */
        border-radius: 8px;
        display: block;
    }
/*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; /*5px-20*/         
            position: absolute;/* !important; /*de noi dung luon nam tre anh*/
            top: 100px;/*40 !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: 20px; /*80*/
        }
        /*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: #0000FF !important;
}
.logo-img {
   width: 120px;
   height: auto;
}
/* Hiển thị menu con khi mục cha được click (active) */
.sidebar .category li.active .sub-category {
    display: block !important;
}
#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: 14px 30px;
  background: #0b57d0;
  color: #ffffff;
  border-radius: 30px;
  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;
}
/* Fix CLS cho icon check */
.check-icon,
img[src*="check"] {
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    display: inline-block;
}
.table td,
.table th {
    min-height: 32px;
    vertical-align: middle;
}
/*muc DICH VU o trang chu */
.service-item {
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-title {
    font-size: 16px;
    font-weight: 600;
    margin: 12px 0 6px;
    min-height: 44px;
}

.service-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    flex-grow: 1;
}

.service-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background: #0234fcfd;
    color: #ffffff;
    font-weight: 600;
    border-radius: 4px;
    text-align: center;
}

.service-intro {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 6px;
}

.service-sub {
    font-size: 15px;
    color: #555;
    margin-bottom: 8px;
}

.service-highlight {
    font-size: 15px;
    color: #00857c;
    font-weight: 500;
}
.service-btn {
    background: #2b50ff;
    color: #fff;
    font-weight: 600;
}

.service-btn:hover {
    background: #1e3ee0;
}
.service-item {
    transition: all 0.25s ease;
}

.service-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
/* ===== 27/02/26-HOME STATIC BANNER ===== */

.home-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.banner-media {
    position: relative;
    width: 100%;
    aspect-ratio: 1490 / 630;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay gradient */
.banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0.75) 0%,
        rgba(0,0,0,0.55) 40%,
        rgba(0,0,0,0.15) 70%,
        rgba(0,0,0,0) 100%
    );
}

/* Text box */
.banner-text-box {
    max-width: 600px;
    color: #fff;
}

.banner-title {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 25px;
}

.banner-title a {
    color: #fff;
    text-decoration: none;
}

.banner-title a:hover {
    opacity: 0.9;
}


/* ===== DESKTOP BANNER FINAL FIX ===== */

@media (min-width: 992px) {

    .banner-media {
        aspect-ratio: unset !important;
        height: auto !important;
    }

    .banner-img {
        width: 100%;
        height: auto !important;
        object-fit: unset !important;
    }

    .banner-overlay {
        align-items: center;
        padding-left: 8%;
    }

}

@media (max-width: 768px) {

    .banner-overlay {
        justify-content: center;
        text-align: center;
        background: rgba(0,0,0,0.55);
    }

    .banner-text-box {
        padding: 0 20px;
    }

    .banner-title {
        font-size: 24px;
    }
    .news-item .box-img img {
        object-fit: contain !important; /* Hiện toàn bộ ảnh trên mobile */
        background-color: #ffffff; /* Nền trắng cho sạch */
    }

}
/* 9/3/26-Hiệu ứng chớp nhanh và hình nền ngôi sao HOT thu nhỏ */
.icon-hot-starburst {
    display: inline-block;
    vertical-align: middle;
    width: 30px;  /* Đã thu nhỏ từ 40px xuống 30px */
    height: 30px; /* Đã thu nhỏ từ 40px xuống 30px */
    margin-right: 3px;
    margin-bottom: 2px; /* Chỉnh lại lề một chút cho cân đối với size mới */
    
    /* Mã SVG ngôi sao nổ được giấu trong CSS để không bị lỗi */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 62,30 90,15 75,42 98,60 72,70 75,95 50,80 25,95 28,70 2,60 25,42 10,15 38,30' fill='%23FFFF00' stroke='%23FF0000' stroke-width='4' stroke-linejoin='round'/%3E%3Ctext x='50' y='61' font-family='Arial,sans-serif' font-size='30' font-weight='900' fill='%23FF0000' text-anchor='middle' transform='rotate(-15, 50, 50)'%3EHOT%3C/text%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Tốc độ chớp nhanh (0.3 giây) */
    animation: chop-ngoi-sao 0.2s infinite alternate; 
}

@keyframes chop-ngoi-sao {
    0% { transform: scale(0.95); }
    100% { transform: scale(1.15); }
}
/* ========================================================================= */
/*18/03/26-TỐI ƯU MENU CHÍNH (LEVEL 1) - ROBOTO, MÀU TRẮNG TRÊN NỀN XANH VNPT */
/* ========================================================================= */

/* 1. Tối ưu Chữ Menu (.menu-lv1) - Roboto, IN HOA, 16px, Đậm */
.menu-lv1 {
    font-family: 'Roboto', sans-serif !important;
    
    /* Cỡ chữ (chọn 16px cho rõ ràng) */
    font-size: 16px !important;
    
    /* Độ đậm (Bold - 700) */
    font-weight: 700 !important;
    
    /* Định dạng IN HOA */
    text-transform: uppercase !important;
    
    /* Bổ sung để chữ in hoa dễ đọc hơn */
    letter-spacing: 0.5px !important;
    
    /* Màu chữ tĩnh (Màu Trắng - để đảm bảo độ tương phản) */
    color: #ffffff !important;
    
    /* Loại bỏ gạch chân */
    text-decoration: none !important;
    
    /* Khoảng trống (padding - điều chỉnh lại cho phù hợp) */
    padding: 15px 20px !important; 
    display: block !important;
    
    /* Hiệu ứng chuyển đổi mượt mà khi rê chuột */
    transition: color 0.3s ease !important;
}

/* 2. Hiệu ứng khi rê chuột vào (Hover) - Đổi màu chữ sang màu vàng cam */
.menu-lv1:hover {
    color: #ffb800 !important; 
}
/* ========================================================================= */
/* TỐI ƯU MENU CẤP 2, CẤP 3 - HIỆN ĐẠI, BAY MƯỢT MÀ, KHÔNG THANH CUỘN */
/* ========================================================================= */

/* 1. Sửa màu nền Hover của Menu Cấp 1 (Đổi từ xanh lá cũ sang Xanh VNPT) */
.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,
.lz-top-menu-content li.active a,
.lz-top-menu-content li:hover > a {
    background-color: #005da4 !important; /* Xanh VNPT chuẩn */
    color: #fff !important;
}

/* 2. Khung Box Dropdown (Cấp 2 và Cấp 3) */
.top-menu-content .dropdown-menu,
.lz-top-menu .childmenu,
.top-menu-content .dropdown .menu-rank-2 {
    background-color: #35a8e0 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important; /* Bóng đổ siêu mượt, hiện đại */
    padding: 0 !important;
    min-width: 270px !important;
    border: none !important;
    border-top: 3px solid #ffcc00 !important; /* Viền vàng điểm nhấn VNPT */
    border-radius: 0 0 6px 6px !important; /* Bo góc mềm mại ở đáy */
}

/* 3. Từng dòng Menu con (Items) */
.top-menu-content .dropdown-menu li a,
.lz-top-menu .childmenu a {
    padding: 14px 20px !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    text-transform: none !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    display: block !important;
    transition: all 0.3s ease !important; /* Chuyển động mượt */
    background-image: none !important;
}

/* Bỏ đường kẻ ngang ở mục menu cuối cùng */
.top-menu-content .dropdown-menu li:last-child > a,
.lz-top-menu .childmenu li:last-child > a {
    border-bottom: none !important;
}

/* 4. Hiệu ứng Thu hút khi trỏ chuột (Hover) vào Menu con */
.top-menu-content .dropdown-menu li a:hover,
.lz-top-menu .childmenu a:hover {
    background-color: #278fc0 !important; /* Nền xanh lam nhạt rất sang */
    color: #ffffff !important; /* Chữ đậm Xanh VNPT */
    padding-left: 28px !important; /* Chữ trượt nhẹ sang phải tạo cảm giác tương tác cực tốt */
}
/* 5. Menu Cấp 3: Giới hạn chiều cao và làm đẹp thanh cuộn */
.top-menu-content .dropdown .menu-rank-2,
.childmenu .childmenu {
    position: absolute !important;
    top: -3px !important; 
    left: 100% !important; 
    max-height: 400px !important; /* Giới hạn chiều cao bằng 70% màn hình thiết bị */
    overflow-y: auto !important; /* Bật lại thanh cuộn dọc */
    border-top: 3px solid #005da4 !important; 
}

/* Tùy chỉnh thanh cuộn cho mượt và đẹp (không bị thô) */
.top-menu-content .dropdown .menu-rank-2::-webkit-scrollbar,
.childmenu .childmenu::-webkit-scrollbar {
    width: 5px; /* Làm cho thanh cuộn thật mỏng */
}

.top-menu-content .dropdown .menu-rank-2::-webkit-scrollbar-track,
.childmenu .childmenu::-webkit-scrollbar-track {
    background: #278fc0; /* Nền thanh cuộn tiệp màu với menu */
}

.top-menu-content .dropdown .menu-rank-2::-webkit-scrollbar-thumb,
.childmenu .childmenu::-webkit-scrollbar-thumb {
    background-color: #ffcc00; /* Kéo thả màu vàng VNPT cho nổi bật */
    border-radius: 10px;
}


/* 6. Tính năng thông minh: Ép menu cấp 3 bay sang TRÁI nếu nó nằm ở các mục cuối (tránh tràn màn hình) */
.lz-top-menu-content > li:nth-child(n+4) .childmenu .childmenu,
.top-menu-content .navbar-nav > li:nth-child(n+4) .dropdown .menu-rank-2 {
    right: 100% !important;
    left: auto !important;
    box-shadow: -10px 10px 30px rgba(0,0,0,0.08) !important; /* Đổ bóng ngược lại */
}
/* ========================================================================= */
/* TỐI ƯU MENU MOBILE (ĐIỆN THOẠI) - ĐỒNG BỘ MÀU VNPT */
/* ========================================================================= */

/* 1. Đổi màu nền toàn bộ Menu Mobile sang Xanh VNPT */
.mobile-menu {
    background-color: #005da4 !important; 
}

/* 2. Căn chỉnh chữ, tạo không gian thở cho các mục (Dễ bấm hơn) */
.mobile-menu .mm-listitem a,
.mobile-menu .mm-listitem > span {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
}

/* 3. Đường kẻ ngang chia các mục mờ đi cho tinh tế (Không bị cứng) */
.mobile-menu .mm-listview > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* 4. Trạng thái Đang Chọn (Mục hiện tại) -> Đổi sang nền Vàng, chữ Xanh */
.mobile-menu .mm-listitem_selected > a:not(.mm-btn_next),
.mobile-menu .mm-listitem_selected > span {
    background-color: #ffcc00 !important; 
    color: #005da4 !important; 
}

/* Đảm bảo mũi tên > của mục đang chọn cũng đổi sang màu xanh */
.mobile-menu .mm-listitem_selected > .mm-btn_next:after {
    border-color: #005da4 !important;
}

/* 5. Trạng thái Active khi chạm vào */
.mobile-menu .mm-listitem.active > a {
    background-color: #ffffff !important;
    color: #005da4 !important;
}

/* 6. Đổi màu viền nút mũi tên (Back/Next) trên mobile thành màu trắng */
.mobile-menu .mm-btn:after,
.mobile-menu .mm-btn:before,
.mobile-menu .mm-listview .mm-btn_next:after {
    border-color: #ffffff !important;
}

/* 7. Màu nền phần thanh Top của menu mobile (khi trượt vào cấp 2, 3) */
.mobile-menu .mm-navbar,
.mobile-menu .mm-navbars_top {
    background-color: #004b87 !important; /* Xanh đậm hơn 1 tông để phân biệt */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.mobile-menu .mm-navbar__title {
    color: #ffffff !important;
}

/* ========================================================= */
/* SỬA LỖI MENU CẤP 1 BỊ KHUẤT VÀ MŨI TÊN DÍNH SÁT CHỮ       */
/* ========================================================= */

/* 1. Kéo mảng nền xanh dãn thêm sang trái để lót dưới chữ "Trang Chủ" */
.lz-top-menu-content:before,
.top-menu-content:before {
    left: -5000px !important; /* Kéo dải màu xanh tràn về bên trái vô tận */
    width: 10000px !important; /* Kéo dải màu xanh tràn về bên phải vô tận */
    transform: none !important; /* Tắt hiệu ứng cắt xéo */
}

/* 2. Ép khoảng cách giữa các mục Menu gọn lại một chút để không bị tràn màn hình */
.menu-lv1,
.top-menu-content .navbar-nav > li > a {
    padding: 15px 14px !important; /* Giảm lề hai bên chữ xuống 14px */
    letter-spacing: 0 !important; /* Tắt khoảng cách từng nốt chữ để tiết kiệm diện tích */
}

/* 3. Đẩy mũi tên sổ xuống (caret) cách xa chữ ra cho thoáng */
.menu-lv1 .caret,
.top-menu-content .navbar-nav > li > a .caret {
    margin-left: 8px !important; /* Tạo khoảng trống 8px giữa chữ và mũi tên */
}
/* 4. Khôi phục và làm đẹp mũi tên sổ xuống của menu cấp 1 */
.lz-top-menu-content > li.has-childmenu > a,
.top-menu-content .navbar-nav > li.has-childmenu > a {
    padding-right: 24px !important; /* Chừa một khoảng trống bên phải chữ để mũi tên có chỗ đứng */
}

.lz-top-menu-content > li.has-childmenu:after,
.top-menu-content .navbar-nav > li.has-childmenu:after {
    content: '';
    display: block !important;
    position: absolute;
    top: 50%;
    right: 8px !important; /* Căn mũi tên vào đúng khoảng trống vừa chừa */
    
    /* Tạo hình mũi tên chữ V chỉ xuống */
    width: 7px;
    height: 7px;
    border: none !important; /* Xóa bỏ hình tam giác cũ */
    border-right: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    transform: translateY(-50%) rotate(45deg) !important; /* Xoay 45 độ để chỉ xuống dưới */
    transition: all 0.3s ease;
}

/* Đổi sang màu vàng VNPT khi rê chuột vào mũi tên */
.lz-top-menu-content > li.has-childmenu:hover:after,
.top-menu-content .navbar-nav > li.has-childmenu:hover:after {
    border-right-color: #ffcc00 !important;
    border-bottom-color: #ffcc00 !important;
}
/* ========================================================= */
/* THÊM ICON BÊN TRÁI CHO CÁC MENU CẤP 1                     */
/* ========================================================= */
/* 1. Đẩy chữ sang phải để lấy chỗ trống đặt icon (CHỈ ÁP DỤNG 7 MỤC ĐẦU) */
.lz-top-menu-content > li:nth-child(-n+6) > a,
.top-menu-content .navbar-nav > li:nth-child(-n+6) > a {
    padding-left: 36px !important; 
    position: relative;
}
/* 2. Thiết lập định dạng chung cho icon (CHỈ ÁP DỤNG 7 MỤC ĐẦU) */
.lz-top-menu-content > li:nth-child(-n+6) > a:before,
.top-menu-content .navbar-nav > li:nth-child(-n+6) > a:before {
    content: '' !important;
    position: absolute !important;
    left: 12px !important; 
    top: 50% !important;
    bottom: auto !important; 
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #ffffff !important; 
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease !important;
}
/* Đổi màu icon sang Vàng VNPT khi rê chuột (CHỈ ÁP DỤNG 7 MỤC ĐẦU) */
.lz-top-menu-content > li:nth-child(-n+6):hover > a:before,
.top-menu-content .navbar-nav > li:nth-child(-n+6):hover > a:before {
    background-color: #ffcc00 !important;
}
/* 3. Gắn hình dáng Icon cho 7 mục menu theo thứ tự (từ trái qua phải) */

/* Mục 1: Trang Chủ (Ngôi nhà) */
.lz-top-menu-content > li:nth-child(1) > a:before, .top-menu-content .navbar-nav > li:nth-child(1) > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Mục 2: Sản Phẩm (Hộp hàng hóa/Sản phẩm) */
.lz-top-menu-content > li:nth-child(2) > a:before, .top-menu-content .navbar-nav > li:nth-child(2) > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.89 1.45l8 4A2 2 0 0 1 22 7.24v9.53a2 2 0 0 1-1.11 1.79l-8 4a2 2 0 0 1-1.79 0l-8-4a2 2 0 0 1-1.1-1.8V7.24a2 2 0 0 1 1.11-1.79l8-4a2 2 0 0 1 1.78 0z'%3E%3C/path%3E%3Cpolyline points='2.32 6.16 12 11 21.68 6.16'%3E%3C/polyline%3E%3Cline x1='12' y1='22.76' x2='12' y2='11'%3E%3C/line%3E%3C/svg%3E");
}

/* Mục 3: Dịch Vụ (Bánh răng / Cờ lê - Tượng trưng cho sửa chữa) */
.lz-top-menu-content > li:nth-child(3) > a:before, .top-menu-content .navbar-nav > li:nth-child(3) > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E");
}

/* Mục 4: Bảng Giá (Thẻ Giá / Tag) */
.lz-top-menu-content > li:nth-child(4) > a:before, .top-menu-content .navbar-nav > li:nth-child(4) > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'%3E%3C/line%3E%3C/svg%3E");
}

/* Mục 5: Giải Pháp (Dấu Check chọn - Giải pháp tối ưu) */
.lz-top-menu-content > li:nth-child(5) > a:before, .top-menu-content .navbar-nav > li:nth-child(5) > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Mục 6: Hỗ Trợ (Tai nghe tổng đài viên) */
.lz-top-menu-content > li:nth-child(6) > a:before, .top-menu-content .navbar-nav > li:nth-child(6) > a:before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'%3E%3C/path%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'%3E%3C/path%3E%3C/svg%3E");
}

/* Xóa mục 7 cũ của VNPT đi vì bạn chỉ dùng 6 mục */
.lz-top-menu-content > li:nth-child(7) > a:before, .top-menu-content .navbar-nav > li:nth-child(7) > a:before {
    display: none !important;
}
/* ========================================================= */
/* THÊM ICON MENU MOBILE (CHUẨN XÁC: CHỈ CẤP 1, KHÔNG BỊ LẶP) */
/* ========================================================= */

/* 1. Tạo khoảng trống chữ (Chỉ áp dụng Cấp 1 & Bỏ qua nút mũi tên >) */
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(-n+6) > a:not(.mm-btn_next),
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(-n+6) > span {
    padding-left: 46px !important;
    position: relative;
}

/* 2. Cài đặt khung icon (Chỉ áp dụng Cấp 1) */
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(-n+6) > a:not(.mm-btn_next):before,
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(-n+6) > span:before {
    content: '' !important;
    position: absolute !important;
    left: 18px !important; 
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 20px !important; 
    height: 20px !important;
    background-color: #ffffff !important; 
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: all 0.3s ease !important;
    display: block !important;
}

/* 3. Đổi màu icon khi mục đang được chọn (Active) -> Đổi sang Xanh VNPT */
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listitem_selected > a:not(.mm-btn_next):before,
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listitem_selected > span:before,
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listitem.active > a:not(.mm-btn_next):before {
    background-color: #005da4 !important;
}

/* 4. Gắn SVG Icon (Chỉ áp dụng Cấp 1) */
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(1) > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(1) > span:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'%3E%3C/path%3E%3Cpolyline points='9 22 9 12 15 12 15 22'%3E%3C/polyline%3E%3C/svg%3E"); }

.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(2) > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(2) > span:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.89 1.45l8 4A2 2 0 0 1 22 7.24v9.53a2 2 0 0 1-1.11 1.79l-8 4a2 2 0 0 1-1.79 0l-8-4a2 2 0 0 1-1.1-1.8V7.24a2 2 0 0 1 1.11-1.79l8-4a2 2 0 0 1 1.78 0z'%3E%3C/path%3E%3Cpolyline points='2.32 6.16 12 11 21.68 6.16'%3E%3C/polyline%3E%3Cline x1='12' y1='22.76' x2='12' y2='11'%3E%3C/line%3E%3C/svg%3E"); }

.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(3) > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(3) > span:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'%3E%3C/circle%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z'%3E%3C/path%3E%3C/svg%3E"); }

.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(4) > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(4) > span:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'%3E%3C/path%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'%3E%3C/line%3E%3C/svg%3E"); }

.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(5) > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(5) > span:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'%3E%3C/path%3E%3Cpolyline points='22 4 12 14.01 9 11.01'%3E%3C/polyline%3E%3C/svg%3E"); }

.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(6) > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(6) > span:before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18v-6a9 9 0 0 1 18 0v6'%3E%3C/path%3E%3Cpath d='M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z'%3E%3C/path%3E%3C/svg%3E"); }

/* Ẩn icon thứ 7 trên mobile */
.mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(7) > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type .mm-listview > li:nth-child(7) > span:before { display: none !important; }
/* ========================================================= */
/* STYLE CHO THANH ĐIỀU HƯỚNG KHI ĐƯA XUỐNG DƯỚI BANNER      */
/* ========================================================= */

.child-page-content .m-breadcrumb {
    text-align: left; /* Căn trái cho ngay ngắn với tiêu đề */
    margin-bottom: 25px; /* Cách tiêu đề chính một khoảng */
    padding-bottom: 12px;
    border-bottom: 1px solid #e6eaf2; /* Đường kẻ mờ phân cách cho tinh tế */
}

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

.child-page-content .m-breadcrumb li {
    display: inline-block;
    list-style-type: none;
    font-size: 15px;
    color: #666666; /* Màu xám đen cho chữ hiện tại */
}

.child-page-content .m-breadcrumb li a {
    color: #005da4 !important; /* Xanh VNPT cho link Trang chủ */
    font-weight: 500;
    transition: 0.3s;
}

.child-page-content .m-breadcrumb li a:hover {
    color: #ffcc00 !important; /* Đổi màu vàng khi rê chuột */
    text-decoration: underline;
}

.child-page-content .m-breadcrumb .breadcrumb-icon {
    margin: 0 12px;
    color: #999999; /* Màu icon mũi tên */
    font-size: 14px;
}
/* =================================================================
   TỐI ƯU NÚT CUỘN LÊN ĐẦU TRANG (BACK TO TOP) - BẢN GOM GỌN 
==================================================================== */

/* 1. Trạng thái mặc định (Gom từ dòng 17, 1206 và 1268) */
.scroll-top-btn {
    position: fixed;
    bottom: 20px; 
    right: 20px;
    z-index: 100;
    width: 50px;
    height: 50px;
    background-color: #434345;
    color: #fff !important;
    border-radius: 50%; /* Dùng 50% chuẩn hơn 100% để tạo hình tròn */
    text-decoration: none !important;
    box-shadow: 0 0 10px 0 rgba(0,0,0,.22);
    /* Căn giữa icon bằng Flexbox thay vì line-height */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ẩn mặc định, chỉ hiện khi cuộn (hiệu ứng mượt) */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 2. Trạng thái khi hiển thị (JS thêm class .visible vào) */
.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
}

/* 3. Hiệu ứng khi rê chuột / Focus (Gom từ dòng 1262) */
.scroll-top-btn:hover,
.scroll-top-btn:focus {
    background-color: #006BE6; /* Đổi sang màu xanh VNPT cho đồng bộ nhận diện thương hiệu, thay vì màu #008f8c cũ */
    color: #fff;
    outline: none;
}

/* 4. Tối ưu cho Mobile (Xóa padding rác ở dòng 1937, 2453 và đẩy nút lên cao) */
@media screen and (max-width: 768px) {
    .scroll-top-btn {
        bottom: 90px !important; /* Bắt buộc: Nâng cao lên tránh đè thanh liên hệ Zalo/Gọi điện */
        z-index: 199999 !important;
        padding: 0 !important; /* Xóa bỏ padding: 14px rác gây lệch icon */
        width: 45px; /* Thu nhỏ một chút trên mobile nhìn cho tinh tế */
        height: 45px;
    }
}