@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;
}
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: #ee0033; /*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: #ee0033;
    border-color: #ee0033;
    color: #fff;
    /*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;*/
    color: #fff;
    background-color: #cc002b; 
    border-color: #cc002b;
}

/* =============================
   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;
}
.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: 450px;
  overflow-y: auto;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.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);
}
/* ==========================================
   TỐI ƯU MENU CẤP 1 (Bảo toàn 100% thuộc tính hiện có)
   ========================================== */

/* 1. TRẠNG THÁI BÌNH THƯỜNG (Gom dòng 514 và 2351) */
.top-menu-content .navbar-nav > li > a,
.lz-top-menu-content .menu-lv1,
.lz-top-menu-content .search-btn {
    /* --- Các thuộc tính giữ lại từ dòng 514 --- */
    vertical-align: middle;
    text-transform: capitalize;
    text-shadow: none;
    
    /* --- Các thuộc tính từ dòng 2351 (Ghi đè dòng 514) --- */
    position: relative;
    display: block;        /* Ghi đè inline-block của dòng 517 */
    font-size: 16px;       /* Ghi đè 14px của dòng 519 */
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #ffffff;
    text-decoration: none;
    padding: 15px 20px;
    transition: all 0.3s ease; /* Gộp transition của dòng 523 (.4s) và 2361 */
}

/* 2. TRẠNG THÁI OPEN, FOCUS, ACTIVE & HOVER CƠ BẢN (nền xanh -> đỏ sậm từ dòng 1898) */
.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: #ee0033; /*188f8c*/
    color: #fff;
}

/* 3. TRẠNG THÁI HOVER ĐỔI CHỮ VÀNG (Giữ nguyên từ dòng 2364) 
   (Lưu ý: CSS này nằm dưới cùng nên sẽ ưu tiên đè màu chữ #fff ở phần 2 nếu có sự trùng lặp) */
.top-menu-content .navbar-nav > li > a:hover,
.lz-top-menu-content .menu-lv1:hover,
.lz-top-menu-content .search-btn:hover {
    color: #ffb800;
}
.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 li a:hover .caret {
    border-left-color: #fff;
}


.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;
}
.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: #333333; /*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;
}
/* ==========================================
   TỐI ƯU MENU MOBILE - GOM NHÓM CHỮ VÀ PADDING
   ========================================== */
.mobile-menu .mm-listitem a,
.mobile-menu .mm-listitem > span {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 15px;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    color: #fff !important; /* Gom từ dòng 2189 lên đây */
}
.mobile-menu .mm-listview > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* ==========================================
   TỐI ƯU MENU MOBILE - TRẠNG THÁI ĐANG CHỌN
   ========================================== */
.mobile-menu .mm-listitem_selected > a:not(.mm-btn_next),
.mobile-menu .mm-listitem_selected > span {
    background: #cc002b; /* Đã đổi từ màu cam #d58330 sang đỏ sậm để hợp giao diện mới */
}
.mobile-menu .mm-listitem.active a {
    background-color: #fff;
    color: #ee0033; /*188f8c*/
}

.mobile-menu .mm-navbar__title {
    color: #ffffff !important;
}
.mobile-menu .mm-navbar,
.mobile-menu .mm-navbars_top {
    background-color: #b30020; /* Đỏ sậm */
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.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;
    /* 1. Xóa dòng background: none !important; */
    
    /* 2. Thêm các thuộc tính này để ảnh hiển thị đẹp */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 3. Khai báo chiều cao (khoảng trống) cho giao diện máy tính */
    height: 350px; /* Bạn có thể tăng/giảm số này tùy ý cho vừa mắt */
}
.banner:after {
    display: none !important; /* NGẮT overlay - Cứ giữ dòng này nếu không muốn ảnh bị phủ mờ đen */
}
.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 .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("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,
.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: #b36b22; /* Màu đậm hơn để đạt chuẩn tương phản 
    color: #188f8c;*/
    color: #333333; /* Đổi sang màu Xám đen để dễ đọc */
    transition: .3s;
}
/* Thêm đoạn này ngay bên dưới để tạo hiệu ứng đổi màu khi rê chuột */
.blog-page .news-item .news-title a:hover {
    color: #ee0033 !important; /* Đổi sang màu đỏ Viettel */
}

.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;
}


@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;
}
.register-form input {
    height: 45px;
}

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

/* 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 15px;*/
    padding: 12px 20px 12px 40px;
    color: #333; /*188f8c*/
    font-weight: 500;
    font-size: 15px;
    /*text-transform: uppercase;*/
    white-space: normal;
    position: relative;
    display: block; /* Đảm bảo padding hoạt động đúng */
    border-bottom: 1px solid #f0f0f0; /* Thêm đường kẻ mờ phân biệt các mục */
}
/* Gom nhóm Hover Mục Menu Con */
.top-menu-content .dropdown-menu li a:hover,
.lz-top-menu .childmenu a:hover {
    background-color: #fdf2f3; /*008f8c*/
    color: #ee0033;
    background-image: none;
    padding-left: 25px !important;       /* Chữ dịch nhẹ sang phải tạo hiệu ứng tương tác */
    transition: all 0.3s ease;           /* Giúp mọi thứ chuyển động mượt mà */
}
/* 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: 50%; /*12px*/
    left: 15px; /*10*/
    transform: translateY(-50%);
    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;
}
.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: #ee0033 !important; /*188f8c*/
}
.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: 200vw;
    background-color: #ee0033; /*008f8c*/
    transition: .35s all ease;
    left: -10%;
    transform: skew(-36deg);
}



.has-childmenu:after {
    position: absolute;
    content: '';
    top: 50%;
    transform: translate(0, -50%);
    right: 5px; /*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 #000; /* Tạo cạnh phải mũi tên */
    border-bottom: 2px solid #000; /* 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: #cc0000; /* Đổi viền phải sang màu vàng khi hover */
    border-bottom-color: #cc0000; /* Đổ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) {
    .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: 5px; /*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;
}
/* 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;
}
/* 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;
}
/* --- PHẦN SỬA MỚI --- */
/*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 {
    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 {
    background-color: #ffffff;
    border: 1px solid #ddd;  /* Thêm dòng này */
    max-height: 450px;
    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: 4;
}
/* Áp dụng cho menu cấp 3 của tất cả các mục từ thứ 4 trở đi ở menu cấp 1 */
.lz-top-menu-content > li:nth-child(n+4) .childmenu .childmenu {
    right: 100% !important;  /* Bung sang trái */
    left: auto !important;   /* Hủy bỏ bung sang phải */
    top: 0;
    position: absolute;
    background-color: #fff !important;
    border: 1px solid #ddd;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important; /* Đổ bóng sang trái */
}

/* Đảm bảo menu cấp 2 không cắt cụt menu cấp 3 khi bung sang trái */
.lz-top-menu-content > li:nth-child(n+4) .childmenu {
    overflow: visible !important;
}
/*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: 15px; /*40*/
            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: #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;
}
/* 17-03-26-SVG tren mobile */
.mobile-logo svg {
    height: 55px; /* Chiều cao bằng với ảnh cũ để không làm lệch khung */
    width: auto;  /* Tự động giãn chiều ngang để logo không bị méo */
}
/* =======================================================
   HOÀN THIỆN BANNER VÀ THANH ĐIỀU HƯỚNG (BREADCRUMB)
   ======================================================= */
/* 2. Căn chỉnh lại khung chứa thanh điều hướng */
.blog-content .m-breadcrumb {
    background-color: transparent; 
    padding: 0;
    margin-bottom: 12px; /* Khoảng cách vừa phải với tiêu đề dưới */
    display: block;
    text-align: left; 
}

/* 3. Đưa danh sách nằm ngang, bỏ dấu chấm */
.blog-content .m-breadcrumb ul {
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: none;
}

.blog-content .m-breadcrumb li {
    display: inline-block;
    color: #666 !important; /* Xám thanh lịch */
    font-size: 14px; /* Nhỏ lại 1 chút cho tinh tế */
}

/* 4. Định dạng kích thước và màu sắc cho mũi tên SVG */
.blog-content .m-breadcrumb .breadcrumb-svg {
    width: 14px;
    height: 14px;
    margin: 0 8px;
    color: #aaa; /* Màu xám nhạt */
    vertical-align: middle;
    transform: translateY(-1px); /* Cân chỉnh cho thẳng hàng với chữ */
}

/* 6. Hiệu ứng rê chuột */
.post-content .m-breadcrumb li a {
    color: #666 !important; 
    transition: 0.3s;
}

.post-content .m-breadcrumb li a:hover {
    color: #ee0033 !important; /* Đỏ Viettel */
}
/*21/3/26 Chỉ cắt cúp ảnh thu nhỏ trong trang danh sách bài viết */
.blog-page .news-item .box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/*213/26 --- Giới hạn 2 dòng cho đoạn mô tả ngắn (Mô tả bài viết) --- */
/* --- Giới hạn tuyệt đối 2 dòng cho đoạn mô tả --- */
.news-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 15px;
    font-size: 15px; 
    font-weight: 300;
    color: #555; 
    line-height: 24px;
    /* --- PHẦN BỔ SUNG KHÓA CHIỀU CAO --- */
    max-height: 48px; /* Khóa chết chiều cao: 24px (line-height) x 2 dòng = 48px */
    word-break: break-word; /* Ép ngắt từ gọn gàng, không bị rớt chữ làm dãn dòng */
}

/* --- Khống chế thẻ <p> nếu trình soạn thảo tự động sinh ra --- */
.news-excerpt p {
    margin: 0; 
    display: inline;
}

/* ==========================================================================
   BỘ CSS ĐỘC QUYỀN: TRANG CHỦ VIETTEL HIỆN ĐẠI (7 HẠNG MỤC)
   Tối ưu UI/UX, Tốc độ tải và Tỷ lệ chuyển đổi (Mobile First)
   ========================================================================== */

/* --- 0. RESET & TIÊU DIỆT TÀN DƯ CŨ --- */
.section-slide::before, .section-slide::after, .skew-box::before, .home-slider .owl-item::after { display: none !important; }
.viettel-home-section { font-family: 'Roboto', sans-serif !important; background-color: #fff; overflow-x: hidden; margin: 0; padding: 80px 0; }
.viettel-bg-gray { background-color: #f4f7f6 !important; }

/* Tiêu đề mục chung */
.v-section-title { font-size: 32px; font-weight: 800; color: #222; text-align: center; margin-bottom: 15px; text-transform: uppercase; }
.v-section-subtitle { font-size: 16px; color: #555; text-align: center; max-width: 650px; margin: 0 auto 40px auto; line-height: 1.6; }

/* Nút CTA Chuẩn Viettel */
.btn-v-main, .btn-v-outline { padding: 14px 30px; border-radius: 8px; font-weight: 800; font-size: 16px; display: inline-block; transition: all 0.3s ease; text-decoration: none !important; border: none; cursor: pointer; }
.btn-v-main { background-color: #ee0033; color: #fff !important; box-shadow: 0 4px 15px rgba(238, 0, 51, 0.3); }
.btn-v-main:hover { background-color: #cc002b; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(238, 0, 51, 0.4); }
.btn-v-outline { background-color: transparent; color: #ee0033 !important; border: 2px solid #ee0033; }
.btn-v-outline:hover { background-color: #ee0033; color: #fff !important; }

/* Thẻ Card dùng chung */
.v-card { background: #fff; border-radius: 12px; padding: 30px; box-shadow: 0 8px 30px rgba(0,0,0,0.05); transition: 0.3s; border: 1px solid #f0f0f0; height: 100%; }
.v-card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.1); }


/* --- 1. MÓC CÂU: HERO SECTION (SLIDE) --- */
.modern-hero-section { position: relative; overflow: hidden; }
.hero-slide-item { position: relative; height: 600px !important; background-size: cover; background-position: center; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%); z-index: 1; }
.relative-container { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; }
.hero-text-content { max-width: 650px; padding-top: 80px; }
.hero-text-content .slide-title { font-size: 46px; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 20px; text-transform: uppercase; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.hero-text-content .slide-subtitle { font-size: 18px; color: #f0f0f0; line-height: 1.6; margin-bottom: 30px; }
.hero-btn-group { display: flex; gap: 15px; }


/* --- 2. SÀNG LỌC: QUICK FILTER BAR --- */
.quick-filter-bar { background: #fff; padding: 25px 0; border-bottom: 1px solid #f0f0f0; position: relative; z-index: 10; margin-top: -20px; border-radius: 12px 12px 0 0; box-shadow: 0 -10px 20px rgba(0,0,0,0.05); }
.filter-item { text-align: center; display: block; color: #333; text-decoration: none !important; transition: 0.3s; }
.filter-item i { font-size: 32px; color: #ee0033; margin-bottom: 12px; transition: 0.3s; }
.filter-item span { font-weight: 700; font-size: 15px; display: block; }
.filter-item:hover i { transform: translateY(-5px) scale(1.1); }
.filter-item:hover span { color: #ee0033; }


/* --- 3. TRÌNH BÀY: PRICING CARDS --- */
.pricing-tabs { display: flex; justify-content: center; gap: 15px; margin-bottom: 40px; }
.pricing-tabs .tab-btn { background: #fff; border: 2px solid #ddd; border-radius: 50px; padding: 10px 30px; font-weight: 700; font-size: 16px; color: #555; cursor: pointer; transition: 0.3s; }
.pricing-tabs .tab-btn.active, .pricing-tabs .tab-btn:hover { background-color: #ee0033; border-color: #ee0033; color: #fff; }

.pkg-header { text-align: center; padding-bottom: 20px; border-bottom: 1px dashed #ddd; margin-bottom: 20px; }
.pkg-name { font-size: 22px; font-weight: 800; color: #ee0033; display: block; margin-bottom: 10px; }
.pkg-speed { font-size: 48px; font-weight: 800; color: #222; line-height: 1; }
.pkg-speed small { font-size: 18px; font-weight: 600; color: #777; }
.pkg-price { display: inline-block; background-color: #fff0f2; color: #ee0033; padding: 8px 20px; border-radius: 50px; font-size: 18px; font-weight: 800; margin-top: 15px; }

.pkg-body ul { list-style: none; padding: 0; margin: 0 0 25px 0; }
.pkg-body li { margin-bottom: 12px; display: flex; align-items: flex-start; color: #444; font-size: 15px; line-height: 1.5; }
.pkg-body li i { color: #28a745; margin-right: 12px; margin-top: 4px; font-size: 14px; }
.pkg-featured { border: 2px solid #ee0033; transform: scale(1.03); box-shadow: 0 15px 40px rgba(238, 0, 51, 0.15); position: relative; }
.pkg-featured::before { content: "KHUYÊN DÙNG"; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: #ee0033; color: #fff; font-size: 12px; font-weight: 800; padding: 4px 15px; border-radius: 20px; }


/* --- 4. THUYẾT PHỤC: DEALS & WHY US --- */
.promo-banner-hot { background: linear-gradient(135deg, #fff0f2 0%, #ffe6e9 100%); border-radius: 12px; padding: 30px; display: flex; align-items: center; border: 1px solid #ffccd3; margin-bottom: 50px; }
.promo-banner-hot .promo-icon { font-size: 45px; color: #ee0033; margin-right: 30px; }
.promo-banner-hot h4 { font-weight: 800; color: #cc002b; font-size: 22px; margin-bottom: 5px; }
.promo-banner-hot p { color: #444; margin: 0; font-size: 16px; }

.why-item { text-align: center; padding: 20px 10px; }
.why-icon { width: 80px; height: 80px; border-radius: 50%; background-color: #fff0f2; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px auto; transition: 0.3s; }
.why-icon i { font-size: 35px; color: #ee0033; }
.why-item:hover .why-icon { background-color: #ee0033; transform: translateY(-10px); }
.why-item:hover .why-icon i { color: #fff; }
.why-title { font-weight: 800; font-size: 18px; margin-bottom: 10px; color: #222; }


/* --- 5. CHỨNG THỰC: TESTIMONIALS --- */
.testimonial-card { text-align: center; padding: 40px 30px; }
.testimonial-card .avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid #ee0033; margin: 0 auto 20px auto; }
.client-name { font-weight: 800; color: #222; margin-bottom: 2px; font-size: 18px; }
.client-job { font-size: 14px; color: #888; margin-bottom: 20px; }
.client-quote { font-style: italic; color: #555; line-height: 1.7; font-size: 16px; }


/* --- 6. CHUYỂN ĐỔI: FORM ĐĂNG KÝ (FIX FORM CŨ) --- */
.action-form-section { background: linear-gradient(135deg, #ee0033 0%, #b30020 100%); padding: 80px 0; color: #fff; }
.modern-register-card { background: #fff; max-width: 550px; margin: 0 auto; border-radius: 15px; padding: 40px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.modern-register-card .form-title { color: #ee0033; font-size: 26px; font-weight: 800; text-align: center; margin-bottom: 10px; }
.modern-register-card .form-desc { color: #555; text-align: center; margin-bottom: 30px; font-size: 15px; }

#quickForm label { font-weight: 700; color: #333; margin-bottom: 8px; display: block; font-size: 15px; }
#quickForm input { height: 50px !important; border-radius: 8px !important; border: 1px solid #ddd !important; padding: 10px 15px; font-size: 15px; width: 100%; margin-bottom: 20px; background: #f9f9f9; }
#quickForm input:focus { border-color: #ee0033 !important; background: #fff; outline: none; }
#quickForm button[type="submit"] { background-color: #ee0033 !important; color: #fff !important; border-radius: 8px !important; font-weight: 800 !important; height: 55px; font-size: 18px !important; width: 100%; border: none; cursor: pointer; transition: 0.3s; box-shadow: 0 4px 15px rgba(238,0,51,0.3); }
#quickForm button[type="submit"]:hover { background-color: #cc002b !important; transform: translateY(-2px); }


/* --- 7. HỖ TRỢ: SUPPORT --- */
.support-item { text-align: center; padding: 20px; border-right: 1px solid #eee; }
.support-item:last-child { border-right: none; }
.support-icon { font-size: 40px; color: #ee0033; margin-bottom: 20px; }
.support-item p { color: #666; margin-bottom: 25px; min-height: 48px; }


/* --- 8. MOBILE RESPONSIVE HOÀN HẢO --- */
@media (max-width: 991px) {
    .v-section-title { font-size: 26px; }
    .hero-slide-item { height: 500px !important; }
    .hero-text-content { text-align: center; margin: 0 auto; padding-top: 60px; }
    .hero-text-content .slide-title { font-size: 32px; }
    .hero-btn-group { justify-content: center; }
    .pkg-featured { transform: none; margin-top: 30px; }
    .support-item { border-right: none; border-bottom: 1px solid #eee; margin-bottom: 20px; padding-bottom: 30px; }
}

@media (max-width: 768px) {
    .viettel-home-section { padding: 50px 0; }
    .quick-filter-bar { border-radius: 0; padding: 15px 0; }
    .filter-item span { font-size: 13px; }
    .promo-banner-hot { flex-direction: column; text-align: center; padding: 20px; }
    .promo-banner-hot .promo-icon { margin-right: 0; margin-bottom: 15px; }
    .modern-register-card { padding: 30px 20px; }
}

/* ========================================================= */
/* THÊM ICON BÊN TRÁI CHO CÁC MENU CẤP 1 (GIAO DIỆN VIETTEL) */
/* ========================================================= */

/* 1. Đẩy chữ sang phải để lấy chỗ trống đặt icon (CHỈ ÁP DỤNG 6 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 (Mặc định màu Trắng trên nền Đỏ) */
.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 Viettel (#ffb800) khi rê chuột */
.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: #ffb800 !important;
}

/* 3. Gắn hình dáng Icon cho 7 mục menu theo đúng thứ tự Viettel */

/* Mục 1: Giới thiệu (Chữ i) */
.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%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

/* Mục 2: Internet Cáp Quang (Sóng Wifi) */
.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='M5 12.55a11 11 0 0 1 14.08 0'%3E%3C/path%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'%3E%3C/path%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'%3E%3C/path%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'%3E%3C/line%3E%3C/svg%3E");
}

/* Mục 3: Combo Internet & Truyền Hình (Màn hình Tivi) */
.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%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'%3E%3C/rect%3E%3Cpolyline points='17 2 12 7 7 2'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Mục 4: Khuyến Mãi (Hộp quà) */
.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%3Cpolyline points='20 12 20 22 4 22 4 12'%3E%3C/polyline%3E%3Crect x='2' y='7' width='20' height='5'%3E%3C/rect%3E%3Cline x1='12' y1='22' x2='12' y2='7'%3E%3C/line%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'%3E%3C/path%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'%3E%3C/path%3E%3C/svg%3E");
}

/* Mục 5: Doanh Nghiệp (Cặp táp công sở) */
.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%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'%3E%3C/path%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");
}

/* Mục 7: Đăng Ký Ngay (Cây bút viết ký kết) */
/*.lz-top-menu-content > li:nth-child(7) > a:before, .top-menu-content .navbar-nav > li:nth-child(7) > 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='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");*/
}
/* ========================================================= */
/* THÊM ICON MENU MOBILE (BẢN FIX CUỐI: KHÔNG DÙNG MASK)     */
/* ========================================================= */

/* 1. Tạo khoảng trống chữ trên Mobile */
.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 (Dùng Background Image trực tiếp) */
.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: transparent !important; /* Xóa nền cũ */
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transition: all 0.3s ease !important;
    display: block !important;
}

/* 3. Gắn SVG Icon Mặc định (Màu Xám Đậm #555555) */
.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 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%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 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'%3E%3C/path%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'%3E%3C/path%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'%3E%3C/path%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'%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 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'%3E%3C/rect%3E%3Cpolyline points='17 2 12 7 7 2'%3E%3C/polyline%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 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'%3E%3C/polyline%3E%3Crect x='2' y='7' width='20' height='5'%3E%3C/rect%3E%3Cline x1='12' y1='22' x2='12' y2='7'%3E%3C/line%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'%3E%3C/path%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'%3E%3C/path%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 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'%3E%3C/path%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 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' 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"); }
/*.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 { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3Cpath d='M9 14h6'%3E%3C/path%3E%3Cpath d='M9 18h6'%3E%3C/path%3E%3Cpath d='M9 10h6'%3E%3C/path%3E%3C/svg%3E"); }*/

/* 4. Gắn SVG Icon Active (Màu Đỏ Viettel #ee0033) khi người dùng chọn */
.mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(1).mm-listitem_selected > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(1).mm-listitem.active > a:not(.mm-btn_next):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee0033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E"); }
.mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(2).mm-listitem_selected > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(2).mm-listitem.active > a:not(.mm-btn_next):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee0033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.55a11 11 0 0 1 14.08 0'%3E%3C/path%3E%3Cpath d='M1.42 9a16 16 0 0 1 21.16 0'%3E%3C/path%3E%3Cpath d='M8.53 16.11a6 6 0 0 1 6.95 0'%3E%3C/path%3E%3Cline x1='12' y1='20' x2='12.01' y2='20'%3E%3C/line%3E%3C/svg%3E"); }
.mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(3).mm-listitem_selected > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(3).mm-listitem.active > a:not(.mm-btn_next):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee0033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='15' rx='2' ry='2'%3E%3C/rect%3E%3Cpolyline points='17 2 12 7 7 2'%3E%3C/polyline%3E%3C/svg%3E"); }
.mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(4).mm-listitem_selected > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(4).mm-listitem.active > a:not(.mm-btn_next):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee0033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 12 20 22 4 22 4 12'%3E%3C/polyline%3E%3Crect x='2' y='7' width='20' height='5'%3E%3C/rect%3E%3Cline x1='12' y1='22' x2='12' y2='7'%3E%3C/line%3E%3Cpath d='M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z'%3E%3C/path%3E%3Cpath d='M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z'%3E%3C/path%3E%3C/svg%3E"); }
.mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(5).mm-listitem_selected > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(5).mm-listitem.active > a:not(.mm-btn_next):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee0033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'%3E%3C/path%3E%3C/svg%3E"); }
.mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(6).mm-listitem_selected > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(6).mm-listitem.active > a:not(.mm-btn_next):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee0033' 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"); }
/*.mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(7).mm-listitem_selected > a:not(.mm-btn_next):before, .mobile-menu .mm-panels > .mm-panel:first-of-type li:nth-child(7).mm-listitem.active > a:not(.mm-btn_next):before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ee0033' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'%3E%3C/path%3E%3Crect x='8' y='2' width='8' height='4' rx='1' ry='1'%3E%3C/rect%3E%3Cpath d='M9 14h6'%3E%3C/path%3E%3Cpath d='M9 18h6'%3E%3C/path%3E%3Cpath d='M9 10h6'%3E%3C/path%3E%3C/svg%3E"); }*/

/* ========================================================= */
/* STYLE CHO THANH ĐIỀU HƯỚNG BREADCRUMB (VIETTEL)           */
/* ========================================================= */

.child-page-content .m-breadcrumb {
    text-align: left; 
    margin-bottom: 25px; 
    padding-bottom: 12px;
    border-bottom: 1px solid #e6eaf2; 
}

.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ữ trang hiện tại */
}

.child-page-content .m-breadcrumb li a {
    color: #ee0033 !important; /* ĐỎ VIETTEL cho link Trang chủ */
    font-weight: 500;
    transition: 0.3s;
}

.child-page-content .m-breadcrumb li a:hover {
    color: #b3001b !important; /* Đỏ sậm khi rê chuột */
    text-decoration: underline;
}

.child-page-content .m-breadcrumb .breadcrumb-icon {
    margin: 0 12px;
    color: #999999;
    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: #ee0033; /* Đổi sang màu Đỏ Viettel 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;
    }
}

/* =======================================================
   TỐI ƯU HIỂN THỊ TRỌN VẸN BANNER TRÊN DI ĐỘNG (KHÔNG BỊ CẮT ẢNH)
   ======================================================= */
@media (max-width: 768px) {
    .banner {
        height: auto !important; /* Ép khung chứa tự động co giãn theo chiều cao thực của ảnh */
    }
    .banner-img {
        height: auto !important; /* Gỡ bỏ các chiều cao cố định (250px/300px) gây méo/cắt ảnh */
        object-fit: contain !important; /* Lệnh quan trọng: Ép ảnh hiển thị trọn vẹn, không bị crop */
    }
}

/* =======================================================
   FIX LỖI ICON ĐÈ LÊN TEXT MENU MOBILE
   ======================================================= */
.mobile-menu .mm-listview > li > a,
.mobile-menu .mm-listview > li > span {
    padding-left: 48px !important;
}