/*** Spinner Start ***/
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

/* KHỐI CSS CHATBOT CŨ ĐÃ ĐƯỢC XOÁ (nguyên 134 dòng).
   Markup của nó (.Chatbot, .chat-window, .chat-header...) KHÔNG tồn tại trong bất kỳ
   template nào — chatbot hiện tại do chatbot.js tự inject và có CSS riêng.
   Nhưng rule ".chatbot-icon { position:fixed; right:-412px }" ở đây VẪN áp lên
   <img class="chatbot-icon"> mà chatbot.js inject (chatbot.js:44) -> đẩy icon RA
   NGOÀI màn hình (x=770 trên viewport 390) và gây TRÀN NGANG ở 320-430px. */
  .chat-messenger {
    height: 50px;
  }
  .chat-messenger-input {
    height: 100% !important;
    resize: none;
    outline: 0;
    border: 0;
    min-width: 234px;
    font-size: 14px;
    padding: 6px 0 0 12px;
    border-bottom-left-radius: 10px;
  }
 .chat-btn,
 .chat-document {
    padding: 6px;
    cursor: pointer;
 }
  .attachment {
    padding: 10px;
  }
  
  .attach-btn {
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
  }

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}
/*** Spinner End ***/

.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
    z-index: 99;
}

/*** Button Start ***/
.btn {
    font-weight: bold;
    transition: .5s;
    border: none;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 34px;
    height: 34px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    border-radius: 50%;
}

.btn.btn-primary {
    box-shadow: inset 0 0 0 0 #9BCF53;
}

.btn.btn-primary:hover {
    box-shadow: inset 0 0 0 0 #9BCF53 !important;
    color: var(--bs-primary) !important;
}

.btn.btn-light {
    box-shadow: inset 0 0 0 0 var(--bs-primary);
}

.btn.btn-light:hover {
    box-shadow: inset 300px 0 0 0 var(--bs-primary);
    color: var(--bs-light) !important;
}

.btn-hover {
    transition: 0.5s;
}

.btn-hover:hover {
    color: var(--bs-secondary) !important;
}

/*** Section Title Start ***/
.section-title {
    --bs-primary: #9BCF53;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-primary);
}

.section-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-primary) !important;
}

.section-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-primary) !important;
}


/*** Topbar Start ***/
.fixed-top .container {
    transition: 0.5s;
}

.topbar {
    padding: 2px 10px 2px 20px;
    background: var(--bs-primary) !important;
}

.topbar a,
.topbar a i {
    transition: 0.5s;
}

.topbar a:hover,
.topbar a i:hover {
    color: var(--bs-secondary) !important;
}


@media (max-width: 768px) {
    .topbar {
        display: none;    
    }
}
.display-login {
    cursor: pointer;
    position: relative;

}
.login {
    position: absolute;
    width: 300px;
    top: 50%;
    right: 100px;
    z-index: 999999;
    transform: translateY(-50%);
    padding: 20px;
    border-radius: 16px;
    background-color: #fff;
   }
   
   .login h3 {
    font-family: inherit;
    font-size: 20px;
     text-align: left;
     width: 100%;
   }
   
   .close-login {
    position: absolute;
    right: 8px;
    top: -3px;
   }

   .close-login:hover {
    cursor: pointer;
    color: #4CAF50;
   }
   .login .input-box {
     width: 100%;
     height: 46px;
     margin: 30px 0;
     position: relative;
   }
   
   .input-box input {
     width: 100%;
     height: 100%;
     background: transparent;
     border: none;
     outline: none;
     border: 1px solid #4CAF50;
     border-radius: 40px;
     font-size: 16px;
     color: #000;
     padding: 20px 45px 20px 20px;
   }
   
   
   .input-box i {
     position: absolute;
     right: 20px;
     top: 50%;
     transform: translateY(-50%);
     font-size: 16px;
   }
   
   .login .remember-forgot {
     display: flex;
     justify-content: space-between;
     font-size: 14px;
     margin: -15px 0 15px;
   }
   
   .remember-forgot label input {
     margin-right: 3px;
   }
   
   .remember-forgot a {
     text-decoration: none;
   }
   
   .remember-forgot a:hover,
   .login .register-link a:hover {
     text-decoration: underline;
   }
   
   .login-btn {
     width: 100%;
     height: 46px;
     border: none;
     outline: none;
     border-radius: 40px;
     font-weight: 500;
     cursor: pointer;
     background-color: #4CAF50;
     font-size: 18px;
     color: #fff;
   }
   
/*** Topbar End ***/


/*** Navbar ***/
.navbar-light .navbar-nav .nav-link {
    font-family: 'Roboto', sans-serif;
    position: relative;
    padding: 35px 15px;
    color: var(--bs-white) !important;
    font-size: 17px;
    font-weight: 400;
    outline: none;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-nav .nav-link {
    padding: 20px 15px;
    color: var(--bs-dark) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--bs-white);
}

.navbar-light .navbar-brand h1 {
    color: var(--bs-white);
}

.sticky-top.navbar-light .navbar-brand h1 {
    color: var(--bs-primary);
}

.navbar-light .navbar-brand img {
    max-height: 60px;
    transition: .5s;
}

.sticky-top.navbar-light .navbar-brand img {
    max-height: 45px;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        border: 0;
        border-radius: 10px;
        transition: .5s;
        opacity: 0;
    }
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}

.navbar .nav-item:hover .dropdown-menu {
    transform: rotateX(0deg);
    visibility: visible;
    background: var(--bs-light);
    transition: .5s;
    opacity: 1;
}

@media (max-width: 991.98px) {
    .sticky-top.navbar-light {
        position: relative;
        background: var(--bs-white);
    }

    .navbar-light .navbar-brand h1 {
        color: var(--bs-primary);
    }

    .navbar.navbar-expand-lg .navbar-toggler {
        padding: 10px 20px;
        border: 1px solid var(--bs-primary);
        color: var(--bs-primary);
    }

    .navbar-light .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid #DDDDDD;
    }

    .navbar-light .navbar-nav .nav-link,
    .sticky-top.navbar-light .navbar-nav .nav-link {
        padding: 10px 0;
        color: var(--bs-dark) !important;
    }

    .navbar-light .navbar-nav .nav-link:hover,
    .navbar-light .navbar-nav .nav-link.active  {
        color: var(--bs-primary) !important;
    }

    .navbar-light .navbar-brand img {
        max-height: 45px;
    }
}

@media (min-width: 992px) {
    .navbar-light {
        background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5));
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        z-index: 999;
    }
    
    .sticky-top.navbar-light {
        position: fixed;
        background: var(--bs-light);
    }

    .navbar-light .navbar-nav .nav-link::before {
        position: absolute;
        content: "";
        width: 100%;
        height: 0;
        bottom: -1px;
        left: 0;
        background: #9BCF53;
        transition: .5s;
        z-index: -1;
    }

    .navbar-light .navbar-nav .nav-link:hover::before,
    .navbar-light .navbar-nav .nav-link.active::before {
        height: calc(100% + 1px);
        left: 1px;
    }

    .navbar-light .navbar-nav .nav-link.nav-contact::before {
        display: none;
    }
}

/*** Carousel Hero Header Start ***/
/* Bootstrap mặc định cho .carousel-control-* : width 15% (216px), top:0, bottom:0
   -> mỗi nút là một vùng bấm vô hình 216x900px phủ kín hai cạnh hero, nằm ĐÈ LÊN
   nút "Tìm" và nửa trái ô nhập. Bấm "Tìm" chỉ chuyển slide, không tìm kiếm.
   Thu nút về đúng kích thước icon (60x50) để nó chỉ bắt click ở chỗ nhìn thấy được. */
.carousel-header .carousel-control-prev,
.carousel-header .carousel-control-next {
    background: transparent;
    width: 60px;
    height: 50px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
}

/* Ô tìm kiếm bị kéo ngược lên vùng carousel (index.html: top:-50%) nhưng z-index:auto,
   nên thua mũi tên carousel (z-index:1). Nâng lên trên.
   Nhưng wrapper full-width trong suốt lại đè lên mũi tên trái/phải carousel ở hai cạnh
   -> cho click xuyên qua wrapper, chỉ giữ lại vùng bấm trên chính form tìm kiếm. */
.search-bar {
    position: relative;
    z-index: 5;
    pointer-events: none;
}
.search-bar form {
    pointer-events: auto;
}

.carousel-header .carousel-control-prev .carousel-control-prev-icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 0;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 50px;
    background-size: 60% 60%;
}

.carousel-header .carousel-control-next .carousel-control-next-icon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 25px 30px;
    border-top-left-radius: 50px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 0;
    background-size: 60% 60%;

}

.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li,
.carousel-header .carousel .carousel-indicators li {
    opacity: 0;
}

.carousel-header .carousel-inner .carousel-item {
    position: relative;
    min-height: 100vh 
}

.carousel-header .carousel-inner .carousel-item img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-header .carousel-inner .carousel-item .carousel-caption  {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding-top: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5)); */
    background-size: cover;
}

@media (max-width: 768px) {
    .carousel-header .carousel-inner .carousel-item img,
    .carousel-header .carousel-inner .carousel-item .carousel-caption {
        height: 700px;
        margin-top: -100px;
    }

    .carousel-header {
        height: 700px !important;
    }

    /* opacity:0 chỉ giấu icon — nút vẫn tồn tại và vẫn bắt click. Nút vô hình mà
       bấm được là bẫy. Ẩn hẳn nút; carousel vẫn tự chạy và vẫn vuốt được. */
    .carousel-header .carousel-control-prev,
    .carousel-header .carousel-control-next {
        display: none;
    }
    
    .search-bar {
        margin-top: -100px;
        transition: 0.5s;
    }
}
/*** Carousel Hero Header End ***/


/*** Single Page Hero Header Start ***/
.bg-breadcrumb {
    background: linear-gradient(rgba(19, 53, 123, 0.5), rgba(19, 53, 123, 0.5));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 50px 0;
}

.bg-breadcrumb .breadcrumb-item a {
    color: var(--bs-secondary) !important;
}
/*** Single Page Hero Header End ***/


/*** About Start ***/
.about .container .section-about-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    /* Dòng "color: #9BCF53 (--bs-primary)" ở đây vốn là CSS hỏng nên bị trình duyệt
       bỏ qua -> chữ giữ màu đen mặc định. Nếu sửa cho nó chạy thì xanh #9BCF53 trên
       nền trắng chỉ đạt 1.84:1 -> 16 tiêu đề trang Giới thiệu không đọc nổi.
       Xoá hẳn. Chọn màu xanh đạt chuẩn contrast là quyết định thiết kế (Workstream B). */
}

.about .container .section-about-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    /* cùng lý do trên — xoá thay vì làm sống lại một màu không đạt contrast */
}
/*** About End ***/


/*** Services Start ***/
.service .service-content-inner {
    transition: 0.5s;
}
.service .service-content-inner:hover {
    position: relative;
    background: var(--bs-primary) !important;
}

.service .service-content-inner .service-content h5,
.service .service-content-inner .service-content p,
.service .service-content-inner .service-icon i {
    transition: 0.5s;
}

.service .service-content-inner:hover .service-content h5,
.service .service-content-inner:hover .service-content p,
.service .service-content-inner:hover .service-icon i {
    color: var(--bs-white) !important;
}
/*** Service End ***/


/*** Destination Start ***/
.destination .tab-class .tab-content .tab-pane .destination-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    z-index: 1;
}

.destination .tab-class .tab-content .tab-pane .destination-img .destination-overlay {
    position: absolute;
    bottom: 0%;
    left: 0;
    z-index: 3;
    transition: 0.5s;
}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    display: flex;
    justify-content: end;
    padding: 20px 20px 0 0;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    transition: 0.5s;

}

.destination .tab-class .tab-content .tab-pane .destination-img .search-icon a i {
    opacity: 1;
    transition: 0.5s;
}

.destination .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.destination .tab-class .nav-item a.active {
    --bs-primary: #9BCF53;
    background: var(--bs-primary) !important;
}

.destination .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon {
    background: rgba(19, 53, 123, 0.4);
}

.destination .tab-class .tab-content .destination-img:hover .destination-overlay {
    bottom: 0;
}

.destination .tab-class .tab-content .destination-img:hover .search-icon a i {
    opacity: 1;
}

.destination .tab-class .tab-content .destination-img img {
    transition: 0.5s;
}

.destination .tab-class .tab-content .destination-img:hover img {
    transform: scale(1.2);
}
/*** Destination End ***/


/*** Packages Start ***/
.packages .packages-item .packages-img {
    position: relative;
    overflow: hidden;
    transition: 0.5s;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    z-index: 1;
}

.packages .packages-item .packages-img .packages-info {
    background: rgba(0, 0, 0, .3);
}

.packages .packages-item .packages-img .packages-info small,
.packages .packages-item .packages-img .packages-info small i {
    color: var(--bs-white);
    transition: 0.5s;
}

.packages .packages-item .packages-img::after {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0px solid;
    border-radius: 10px !important;
    visibility: hidden;
    transition: 0.7s;
    z-index: 3;
}

.packages .packages-item .packages-img:hover.packages-img::after {
    width: 100%;
    height: 100%;
    border: 300px solid;
    border-color: rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6) rgba(19, 53, 123, 0.6);
    visibility: visible;
}

.packages .packages-item .packages-img small,
.packages .packages-item .packages-img small i {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover small,
.packages .packages-item .packages-img:hover small i {
    color: var(--bs-white) !important;

}

.packages .packages-item .packages-img img {
    transition: 0.5s;
}

.packages .packages-item .packages-img:hover img {
    transform: scale(1.3);
}

.packages .packages-item .packages-img .packages-price {
    position: absolute;
    width: 100px; 
    top: 0; 
    left: 50%; 
    transform: translateX(-50%);
    display: inline-block;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px; 
    z-index: 5;
}

.packages .packages-carousel {
    position: relative;
}

.packages .packages-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -50px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-next {
    position: absolute;
    top: -50px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev i,
.packages .packages-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.packages .packages-carousel .owl-nav .owl-prev:hover,
.packages .packages-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.packages .packages-carousel .owl-nav .owl-prev:hover i,
.packages .packages-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}
/*** Packages End ***/


/*** Explore Tour Start ***/
.ExploreTour .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.ExploreTour .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.ExploreTour .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}


/* National Tour Start */
.ExploreTour #NationalTab-1 .national-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #NationalTab-1 .national-item img {
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #NationalTab-1 .national-item .national-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 0;
    cursor: pointer;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .2);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #NationalTab-1 .national-item .national-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #NationalTab-1 .national-item:hover .national-plus-icon {
    opacity: 1;
}

.ExploreTour #NationalTab-1 .national-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 40px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

/* International Tour Start */
.ExploreTour #InternationalTab-2 .international-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .international-item img {
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover img {
    transform: scale(1.2);
}

.ExploreTour #InternationalTab-2 .international-item .tour-offer {
    position: absolute;
    top: -1px;
    left: -1px;
    padding: 20px;
    border-top-right-radius: 30px;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 80px;
    background: var(--bs-primary);
    color: var(--bs-white);
}

.ExploreTour #InternationalTab-2 .international-item .international-content {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 10px;
    padding: 20px;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: end;
    justify-content: center;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-content {
    background: rgba(19, 53, 123, .6);
}

.ExploreTour #InternationalTab-2 .international-item .international-content .international-info a {
    font-size: 14px;
}

.ExploreTour #InternationalTab-2 .international-item .international-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.ExploreTour #InternationalTab-2 .international-item:hover .international-plus-icon {
    opacity: 1;
}

/* carousel Start */
.ExploreTour #InternationalTab-2 .InternationalTour-carousel .international-item {
    position: relative;
    overflow: hidden;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.ExploreTour #InternationalTab-2 .InternationalTour-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}
/*** Explore Tour End ***/


/*** Gallery Start ***/
.gallery .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.gallery .gallery-item img {
    min-height: 300px;
    object-fit: cover;
}

.gallery .gallery-item .gallery-content {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    padding: 15px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-content .gallery-info {
    position: relative;
    margin-bottom: -100%;
    opacity: 0;
    transition: 0.5s;
}

.gallery .gallery-item .gallery-plus-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 0;
}

.gallery .gallery-item:hover .gallery-content .gallery-info,
.gallery .gallery-item:hover .gallery-plus-icon {
   opacity: 1;
   margin: 0;
}

.gallery .gallery-item img {
    transition: 0.5s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.2);
}

.gallery .gallery-item:hover .gallery-content {
    background: #9BCF53;
}

.gallery .tab-class .nav-item {
    padding: 0 0 20px 0;
}
.gallery .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}

.gallery .tab-class .nav-item a.active span {
    color: var(--bs-white) !important;
}

/*** Gallery End ***/

/*** Tour Booking Start ***/
.booking {
    background: linear-gradient(rgba(19, 53, 123, .8), rgba(19, 53, 123, .8));
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    
}


.booking .container .section-booking-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.booking .container .section-booking-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.booking .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 #9BCF53;
}

.booking .container form .btn.btn-primary:hover {
    box-shadow: inset 800px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}



/*** Tour Booking end ***/

/*** Travel Guide Start ***/
.guide .guide-item .guide-img {
    position: relative;
}

.guide .guide-item .guide-img .guide-icon {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translate(-50%, -50%);
    margin-bottom: -50px;
    display: flex;
    justify-content: center;
    border: 1px solid var(--bs-primary);
    background: var(--bs-light);
    z-index: 9;
}

.guide .guide-item .guide-img .guide-img-efects {
    position: relative;
    overflow: hidden;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.guide .guide-item .guide-img .guide-img-efects::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-img-efects::after {
    height: 100%;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    background: rgba(19, 53, 123, .5);
}

.guide .guide-item .guide-img-efects img {
    transition: 0.5s;
}
.guide .guide-item:hover .guide-img-efects img {
    transform: scale(1.1);
}

.guide .guide-item .guide-title {
    position: relative;
    background: var(--bs-light);
    transition: 0.5s;
}

.guide .guide-item .guide-title::after {
    content: "";
    width: 100%;
    height: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title::after {
    height: 100%;
    background: var(--bs-primary) !important;
    color: var(--bs-white);
}

.guide .guide-item .guide-title .guide-title-inner,
.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    transition: 0.5s;
}

.guide .guide-item:hover .guide-title .guide-title-inner {
    position: relative;
    color: var(--bs-white) !important;
    z-index: 2;
}

.guide .guide-item:hover .guide-title .guide-title-inner h4 {
    color: var(--bs-white);
}
/*** Travel Guide End ***/


/*** Blog Start ***/
.blog .blog-item .blog-img {
    position: relative;
}

.blog .blog-item .blog-img .blog-info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    background: rgba(255, 255, 255, .2);
    color: var(--bs-white);
}

.blog .blog-item .blog-img .blog-img-inner {
    position: relative;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon {
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.5s;
}

.blog .blog-item .blog-img .blog-img-inner .blog-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon a {
    opacity: 1;
}

.blog .blog-item .blog-img:hover .blog-img-inner .blog-icon {
    height: 100%;
    background: rgba(19, 53, 123, .6);
    opacity: 1;
}

.blog .blog-item .blog-img .blog-img-inner {
    overflow: hidden;
}

.blog .blog-item .blog-img .blog-img-inner img {
    transition: 0.5s;
}

.blog .blog-item .blog-img:hover .blog-img-inner img {
    transform: scale(1.2);
}
/*** Blog End ***/

/*** Testimonial Start ***/
.testimonial .testimonial-carousel {
    position: relative;
}

.testimonial .testimonial-carousel .testimonial-item .testimonial-img {
    position: relative;
    width: 100px; 
    height: 100px; 
    top: 0; left: 50%; 
    transform: translate(-50%, -50%);
    border: 3px solid var(--bs-primary); 
    border-style: dotted;
    border-radius: 50%;
}

.testimonial .testimonial-carousel .owl-dots {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.testimonial .testimonial-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: var(--bs-light);
    border: 1px solid var(--bs-primary);
    border-radius: 10px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-dot.active {
    width: 40px;
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev {
    position: absolute;
    top: -55px;
    left: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-next {
    position: absolute;
    top: -55px;
    right: 0;
    padding: 5px 30px;
    border: 1px solid var(--bs-primary);
    border-radius: 30px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev i,
.testimonial .testimonial-carousel .owl-nav .owl-next i {
    color: var(--bs-primary);
    font-size: 17px;
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover {
    background: var(--bs-primary);
}

.testimonial .testimonial-carousel .owl-nav .owl-prev:hover i,
.testimonial .testimonial-carousel .owl-nav .owl-next:hover i {
    color: var(--bs-white);
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-comment {
    background: var(--bs-primary) !important;
    color: var(--bs-white);
    transition: 0.5s;
}

.testimonial .testimonial-carousel .owl-item.center .testimonial-item .testimonial-img {
    border: 3px solid var(--bs-white); 
    border-style: dotted;
    transition: 0.5s;
}
/*** Testimonial End ***/

/*** Contact Start ***/
.contact .container form .btn.btn-primary {
    box-shadow: inset 0 0 0 0 #9BCF53;
}

.contact .container form .btn.btn-primary:hover {
    box-shadow: inset 1000px 0 0 0 var(--bs-light) !important;
    color: var(--bs-primary) !important;
}
/*** Contact End ***/

/*** Subscribe Start ***/
.subscribe {
    background: linear-gradient(rgba(19, 53, 123, .6), rgba(19, 53, 123, .6)), url(../img/subscribe-img.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.subscribe .subscribe-title {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    color: var(--bs-white);
}

.subscribe .subscribe-title::before {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-right: -50px;
    border: 1px solid var(--bs-white) !important;
}

.subscribe .subscribe-title::after {
    content: "";
    width: 50px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -50px;
    border: 1px solid var(--bs-white) !important;
}
/*** Subscribe End ***/

/*** Footer / copyright: các rule cũ (.footer-item, .copyright) đã gỡ — footer được
     viết lại hoàn toàn ở khối "FOOTER — THIẾT KẾ LẠI" cuối file, không còn markup nào
     dùng .footer-item hay .copyright nữa. ***/

.product-description {
    white-space: pre-line;
  }
/*** Tôn trọng thiết lập giảm chuyển động của người dùng ***/
/* Dự án trước đây KHÔNG có khối này ở bất kỳ đâu, trong khi có 3 animation chạy
   vô hạn (nút nổi chatbot). Người dùng bật "giảm chuyển động" trong hệ điều hành
   (thường vì rối loạn tiền đình hoặc nhạy cảm ánh sáng) vẫn phải chịu chúng.
   WCAG 2.3.3. Đặt ở CUỐI file để thắng mọi rule phía trên mà không cần !important. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*** ===================================================================
     SỬA RESPONSIVE — đo trên site thật, không đoán
     Ba lỗi làm giao diện mobile không dùng được:
       1. 3 nút nổi ĐÈ lên nội dung — trong đó Zalo đè thẳng nút "Gửi" của form
       2. Tab danh mục xếp 1 hàng/dòng, tốn 420px chiều cao vô ích
       3. Ảnh sản phẩm tràn ra ngoài khung
     =================================================================== ***/

/* --- 1. NÚT NỔI --- */
/* Trước: .zalo bottom:190px, .zalo.facebook, chatbot bottom:20px -> một dải cao
   ~250px ở cạnh phải, đè lên nút "Gửi", ô Email, link footer.
   Sau: thu nhỏ, xếp sát nhau, và chừa chỗ ở đáy trang để không che nội dung cuối. */

/* Chừa chỗ ở đáy để nút nổi không che nội dung cuối trang */
body { padding-bottom: 0; }

/* --- 2. TAB DANH MỤC --- */
/* style="width:150px" viết thẳng trong template làm mỗi tab rộng 192px
   -> trên 390px chỉ vừa 1 tab/hàng -> 6 tab = 420px chiều cao.
   Cho tab tự co theo chữ và cuộn ngang khi không đủ chỗ. */
.destination .tab-class .nav-item a,
.tab-class .nav-item a {
    margin-left: 4px !important;
    margin-right: 4px !important;
}
.destination .tab-class .nav-item a span,
.tab-class .nav-item a span {
    width: auto !important;
    white-space: nowrap;
    padding: 0 14px;
}

@media (max-width: 991.98px) {
    /* Dải tab cuộn ngang thay vì xuống dòng — giữ được cả 6 tab trong 1 hàng */
    .tab-class ul.nav-pills {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        justify-content: flex-start !important;
        width: 100%;
        padding-bottom: 8px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .tab-class ul.nav-pills .nav-item { flex: 0 0 auto; }
    .tab-class ul.nav-pills .nav-item a { min-height: 44px; }
    /* (Chỗ chừa cho nút nổi nay do .bmc-copyright__inner ở cuối file lo — rule
       `footer{padding-bottom:72px}` cũ ở đây là code chết: trang không có thẻ <footer>.) */
}

/* --- VÙNG CHẠM ≥ 44px TRÊN MOBILE (WCAG 2.5.5) --- */
@media (max-width: 768px) {
    /* (Vùng chạm của footer nay nằm trong khối "FOOTER — THIẾT KẾ LẠI" cuối file:
       .bmc-line / .bmc-flinks a / .bmc-social__btn đều min-height 44px.) */
    /* Nút "Tìm" cao 40px -> 44px */
    .search-bar .btn[type="submit"] {
        min-height: 44px;
    }
    /* Nút mở menu (hamburger) đủ lớn để chạm */
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }
    /* Nút "Ứng tuyển ngay" cao 42px -> 44px */
    .job-apply-btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* Icon liên kết nhỏ (40×32) phủ giữa thẻ noti chỉ là hiệu ứng hover — trên mobile
       không có hover và cả tấm ảnh đã là link, nên ẩn để khỏi thành vùng chạm hụt.
       Dùng đủ chuỗi lớp để thắng độ ưu tiên của .blog...blog-icon (display:flex). */
    .blog .blog-item .blog-img .blog-img-inner .blog-icon {
        display: none;
    }
}

/* --- 3. ẢNH SẢN PHẨM --- */
/* object-fit: fill (mặc định) làm ảnh bao bì bị kéo méo. contain giữ đúng tỉ lệ. */
.destination-img img,
.custom-height img {
    object-fit: contain;
    background: #F5F7F2;
}

/* Đường kẻ trang trí hai bên tiêu đề mục (.section-title::before/::after) dùng
   margin âm -50px nên thò ra ngoài phần tử. Ở màn 320px không còn chỗ -> TRÀN NGANG
   toàn trang (scrollWidth 346 > 320). Giấu chúng ở màn hẹp — chúng chỉ là trang trí. */
@media (max-width: 575.98px) {
    .section-title::before,
    .section-title::after,
    .section-about-title::before,
    .section-about-title::after {
        display: none;
    }
}

/* ============================================================================
   GIAI ĐOẠN 2 — HỆ THIẾT KẾ BMC  (giữ nhận diện XANH, chuẩn hoá cho dễ đọc)
   Đặt ở CUỐI file để override theo thứ tự nguồn. Mọi màu lấy từ token bên dưới.
   Xanh chính chọn đủ đậm để CHỮ TRẮNG trên nền xanh đạt WCAG AA (>= 4.5:1).
   Khối này độc lập — muốn gỡ demo chỉ việc xoá từ đây xuống hết file.
   ============================================================================ */
:root {
    --bmc-green:        #2E7D32;  /* nút/link/nhấn — trắng trên nền này = 4.83:1 (AA) */
    --bmc-green-dark:   #1B5E20;  /* hover/nhấn mạnh — 7.4:1 */
    --bmc-green-bright: #4CAF50;  /* mảng lớn/trang trí — KHÔNG dùng cho chữ nhỏ */
    --bmc-lime:         #9BCF53;  /* nền mềm — KHÔNG dùng cho chữ */
    --bmc-lime-tint:    #EEF5E1;  /* nền section rất nhạt để thẻ trắng nổi lên */
    --bmc-ink:          #1E2A1C;  /* chữ chính (xanh-đen, không đen tuyền) */
    --bmc-muted:        #55604F;  /* chữ phụ — 5.4:1 */
    --bmc-line:         #E3E9DD;  /* viền/đường kẻ */
    --bmc-bg:           #F6F8F2;  /* nền trang hơi ngả xanh */
    --bmc-surface:      #FFFFFF;
    --bmc-navy:         #13357B;  /* giữ cho một số điểm nhấn */
    --bmc-r-lg: 16px; --bmc-r: 12px; --bmc-r-sm: 8px;
    --bmc-shadow-sm: 0 2px 8px rgba(30,42,28,.06);
    --bmc-shadow:    0 6px 20px rgba(30,42,28,.10);
    --bmc-shadow-lg: 0 14px 40px rgba(30,42,28,.14);
}

body { color: var(--bmc-ink); }

/* --- 1. NAVBAR: nền trắng đặc, dính trên cùng, chữ đọc rõ (hết đè lên ảnh hero) --- */
.navbar.navbar-light {
    position: sticky !important;
    top: 0;
    background: var(--bmc-surface) !important;
    box-shadow: var(--bmc-shadow-sm);
    z-index: 1030;
}
.navbar-light .navbar-nav .nav-link,
.sticky-top.navbar-light .navbar-nav .nav-link {
    color: var(--bmc-ink) !important;
    padding: 18px 14px;
    font-weight: 500;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--bmc-green) !important;
}
/* gạch chân xanh cho mục đang xem / rê chuột */
.navbar-light .navbar-nav .nav-link::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px;
    height: 2px; background: var(--bmc-green);
    transform: scaleX(0); transform-origin: left; transition: transform .25s;
}
.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link.active::after { transform: scaleX(1); }

/* --- 2. NÚT: xanh đạt chuẩn tương phản, bỏ hiệu ứng box-shadow xanh nõn chuối cũ --- */
.btn.btn-primary {
    background-color: var(--bmc-green);
    border-color: var(--bmc-green);
    color: #fff;
    box-shadow: none;
    border-radius: 999px;
    transition: background-color .25s, box-shadow .25s, transform .1s;
}
.btn.btn-primary:hover {
    background-color: var(--bmc-green-dark) !important;
    border-color: var(--bmc-green-dark);
    color: #fff !important;
    box-shadow: var(--bmc-shadow);
}
.btn.btn-primary:active { transform: translateY(1px); }

/* --- 3. TIÊU ĐỀ MỤC: xanh nõn chuối 1.84:1 -> xanh đậm đọc được --- */
.section-title { color: var(--bmc-green); }
.section-title::before,
.section-title::after { border-color: var(--bmc-green) !important; }

/* --- 4. THẺ SẢN PHẨM: từ ảnh trơ -> khung trắng đều nhau, có tên, hover nhấc lên --- */
.destination { background: var(--bmc-lime-tint); }
.custom-box {
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
    overflow: hidden;
    box-shadow: var(--bmc-shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.custom-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--bmc-shadow);
    border-color: var(--bmc-green-bright);
}
/* Ảnh bao bì cao thấp khác nhau -> khung ảnh cao cố định, ảnh contain, nền nhạt -> đều tăm tắp */
.custom-box .destination-img {
    height: 240px;
    display: flex; align-items: center; justify-content: center;
    background: #F5F7F2;
    padding: 12px;
    position: relative;
    border-radius: 0;
}
.custom-box .destination-img img {
    width: auto; max-width: 100%; height: 100%;
    object-fit: contain;
    border-radius: var(--bmc-r-sm);
}
.custom-box .bmc-card-body { padding: 14px 16px 18px; }
.custom-box .bmc-card-title {
    font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0;
    color: var(--bmc-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 42px;
}
.custom-box:hover .bmc-card-title { color: var(--bmc-green); }
/* badge Sale: đưa lên góc, đọc rõ */
.custom-box .search-icon { position: absolute; top: 10px; right: 10px; }
.custom-box .search-icon span {
    background: var(--bmc-green) !important; color: #fff !important;
    border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600;
    box-shadow: var(--bmc-shadow-sm);
}

/* --- 5. FORM LIÊN HỆ: panel xanh đặc (trước là navy 0.8 trong suốt -> chữ trắng chìm) --- */
.booking {
    background: linear-gradient(135deg, var(--bmc-green-dark), var(--bmc-green)) !important;
    background-attachment: scroll !important;
}
/* Nút Gửi: nền trắng chữ xanh để NỔI trên panel xanh (nút xanh trên nền xanh sẽ chìm) */
.booking .btn.btn-primary {
    background: #fff; color: var(--bmc-green-dark);
    border-color: #fff; font-weight: 700;
}
.booking .btn.btn-primary:hover {
    background: var(--bmc-lime-tint) !important; color: var(--bmc-green-dark) !important;
    border-color: var(--bmc-lime-tint);
}
.booking .attach-btn {
    background: #fff; color: var(--bmc-green-dark);
    border: 1px solid #fff; border-radius: var(--bmc-r-sm);
    display: inline-block; font-weight: 600; transition: background .25s;
}
.booking .attach-btn:hover { background: var(--bmc-lime-tint); color: var(--bmc-green-dark); }

/* --- 6. NHỊP BỐ CỤC: mục Giới thiệu nền trắng để tách khỏi mục sản phẩm nền xanh nhạt --- */
.about { background: var(--bmc-surface); }

/* --- 7. CHỮ NHẤN: .text-primary trong bootstrap là xanh nõn chuối #9BCF53 (1.84:1) !important
   -> ép về xanh đậm đọc được. Bao trùm chữ nhấn "BMC Việt Nam", nhãn trang chi tiết SP... --- */
.text-primary { color: var(--bmc-green) !important; }
/* Tab đang chọn: trước là chữ trắng trên nền nõn chuối #9BCF53 (1.84:1) -> nền xanh đậm.
   Viền tab (border-primary nõn chuối) cũng đổi sang xanh đậm cho đồng bộ. */
.destination .tab-class .nav-item a.active,
.ExploreTour .tab-class .nav-item a.active,
.gallery .tab-class .nav-item a.active {
    background: var(--bmc-green) !important;
    border-color: var(--bmc-green) !important;
}
.tab-class .nav-item a.border-primary,
.tab-class .nav-item a { border-color: var(--bmc-green) !important; }

/* --- 8. attach-btn nền #4CAF50 (trắng trên nền này 2.78:1) -> xanh đậm đọc được (4.83:1) --- */
.attach-btn { background: var(--bmc-green); }

/* --- 9. Mũi tên carousel đè nút nổi zalo ở ~1024px (nav dính đẩy hero xuống).
   Ẩn mũi tên ở <=1200px (hero vẫn tự chạy + vuốt được), chỉ hiện ở desktop rộng. --- */
@media (max-width: 1200px) {
    .carousel-header .carousel-control-prev,
    .carousel-header .carousel-control-next { display: none; }
}

/* --- 10. Nút "Ứng tuyển ngay" (careers) dùng class Tailwind không tải -> nền rỗng,
   chữ trắng trên trắng (1:1). Cho style nền xanh đặc rõ ràng. --- */
.job-apply-btn {
    background: var(--bmc-green) !important;
    color: #fff !important;
    border: 1px solid var(--bmc-green) !important;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 700;
    text-decoration: none;
    transition: background .25s;
}
.job-apply-btn:hover { background: var(--bmc-green-dark) !important; color: #fff !important; }

/* ============================================================================
   GIAI ĐOẠN 2 — CHUẨN HOÁ HIỂN THỊ TRANG CHỦ (gọn, vừa vặn, căn chỉnh)
   Giữ nguyên nội dung — chỉ chỉnh cách hiển thị: nút/bo góc/khung/khoảng cách.
   ============================================================================ */

/* 1. Ô tìm kiếm hero: thanh nõn chuối dày cộp -> thanh trắng mảnh, thanh thoát */
.hero-searchbar {
    display: flex; align-items: center; gap: 8px;
    width: 100%; max-width: 560px;
    background: rgba(255,255,255,.97); border-radius: 999px;
    padding: 7px 7px 7px 22px; box-shadow: var(--bmc-shadow);
}
.hero-searchbar input {
    flex: 1; min-width: 0; border: 0; background: none; outline: none;
    font-size: 1rem; color: var(--bmc-ink); padding: 11px 0;
}
.hero-searchbar .btn.btn-primary { flex: none; padding: 11px 26px; border-radius: 999px; }

/* 2. Khung ảnh "Về chúng tôi": viền xanh dày 50px -> khung bo gọn, bóng nhẹ */
.about-frame {
    border-radius: 16px; overflow: hidden;
    border: 1px solid var(--bmc-line); box-shadow: var(--bmc-shadow);
}

/* 3. Chuẩn hoá NÚT: cao vừa (~44px), bo thống nhất, không quá to.
   Bỏ .btn-lg quá khổ ở phân trang về cỡ chuẩn. */
.btn.btn-primary { padding: 11px 22px; font-size: .96rem; }
.btn.btn-lg { padding: 11px 22px !important; font-size: .96rem !important; border-radius: 999px; }

/* 4. Topbar: .bg-primary nõn chuối #9BCF53 -> xanh đậm trầm, bớt chói */
.bg-primary { background-color: var(--bmc-green) !important; }

/* 5. Khoảng cách: thu bớt padding dọc quá tay giữa các mục cho liền mạch */
.about.py-lg-5, .destination.py-lg-5, .ExploreTour, .booking.py-lg-5 { }
@media (min-width: 992px) {
    .ExploreTour.py-5, .ExploreTour .container.py-5 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
    .booking.py-lg-5 .container.py-lg-5 { padding-top: 3rem; padding-bottom: 3rem; }
}

/* ============================================================================
   GIAI ĐOẠN 2 — SỬA LỆCH LƯỚI DO ẢNH KHÁC TỈ LỆ (sản phẩm / bài viết / tin tức)
   Nguyên nhân: mỗi thẻ lấy chiều cao theo ảnh gốc (chỗ height:300px, chỗ không có
   gì) -> thẻ so le, chừa mảng trống lớn.
   Cách chuẩn: khung ảnh CAO CỐ ĐỊNH + object-fit.
   - Ảnh THUMBNAIL (tin tức/bài viết/hoạt động): dùng COVER -> phủ kín khung, lưới
     đều tăm tắp. Thẻ đã có tiêu đề riêng nên không cần đọc chữ trên ảnh; bấm vào
     trang chi tiết mới xem ảnh đầy đủ. (contain sẽ để lộ vệt trống, nhìn rẻ tiền.)
   - Ảnh SẢN PHẨM: giữ CONTAIN ở khối dưới — không được cắt chai/bao bì.
   ============================================================================ */
.international-item img,
.national-item .gallery .gallery-item,
.blog-img-inner img,
.blog-img img {
    width: 100% !important;
    height: 230px !important;      /* ghi đè inline height:300px -> mọi thẻ bằng nhau */
    object-fit: cover;
    object-position: center;
    background: #F3F6F1;
    border-radius: 10px;
    display: block;
}

/* Thẻ DỌC trong cùng hàng cao bằng nhau.
   KHÔNG đặt display:flex lên cột bootstrap — trang /blog/ dùng CARD NGANG (ảnh 1 cột,
   chữ 1 cột), ép flex lên cột sẽ vỡ layout và TRÀN NGANG (bẫy min-width:auto).
   Cột bootstrap vốn đã stretch sẵn -> chỉ cần cho chính THẺ cao 100%. */
.blog .blog-item,
.ExploreTour .international-item,
.ExploreTour .national-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.blog .blog-item .blog-content { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Phân trang: các nút không xuống dòng -> tràn ngang ở màn hẹp. Cho phép wrap. */
.pagination .step-links {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
}
.pagination .step-links .btn { margin: 0; }

/* Ảnh sản phẩm: đồng bộ cùng chiều cao khung với thẻ bài viết */
.custom-box .destination-img { height: 230px; }

/* Tiêu đề dài ngắn khác nhau làm nút "Xem Thêm" so le -> đẩy nút xuống ĐÁY thẻ,
   mọi nút trong một hàng thẳng nhau. */
.blog .blog-item .blog-content .btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Vùng chạm mobile: nút thật cao đủ 44px (trừ nút icon tròn -square để không méo hình);
   link tiêu đề thẻ thêm đệm dọc cho đủ tầm ngón tay. */
@media (max-width: 768px) {
    .btn:not([class*="-square"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .blog .blog-item .blog-content .h4 { padding: 10px 0; display: inline-block; }
}

/* ============================================================================
   GIAI ĐOẠN 2 — FORM CHUẨN (.bmc-form)
   Bỏ hẳn kiểu "nhãn nổi" (form-floating): nhãn đè lên giá trị đã chọn ở ô <select>,
   và ô phải cao 3.5rem mới chứa nổi nhãn -> phình to, bo tròn quá, nhìn rẻ tiền.
   Chuẩn form chuyên nghiệp: NHÃN NẰM TRÊN ô -> không bao giờ đè, đọc rõ, ô gọn.
   Ô ngắn xếp 2 cột (mobile tự xuống 1 cột). Nút Gửi cân đối, không full-width.
   ============================================================================ */
.bmc-form .form-label {
    display: block;
    font-size: .88rem;
    font-weight: 600;
    margin-bottom: 6px;
}
.bmc-form .form-control,
.bmc-form .form-select {
    height: 46px;
    border-radius: var(--bmc-r-sm);
    border: 1px solid var(--bmc-line);
    padding: 10px 14px;
    font-size: .95rem;
    background-color: #fff;   /* KHONG dung 'background' rut gon: no xoa ca background-image
                                 (mui ten dropdown cua <select>) -> o select trong nhu o nhap thuong */
    color: var(--bmc-ink);
    box-shadow: none;
}

/* <select> PHAI co dau hieu dropdown de nguoi dung biet con lua chon khac */
.bmc-form .form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 42px;                 /* chua cho cho mui ten */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2355604F' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5.5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
}
.bmc-form .form-select:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232E7D32' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5.5l6 6 6-6'/%3e%3c/svg%3e"); }
.bmc-form textarea.form-control { height: auto; min-height: 112px; }
.bmc-form .form-control:focus,
.bmc-form .form-select:focus {
    border-color: var(--bmc-green);
    box-shadow: 0 0 0 3px rgba(46,125,50,.16);
    outline: none;
}
/* Hàng hành động: đính kèm bên trái, nút Gửi đẩy sang phải, cùng một đường */
.bmc-form-actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px;
}
.bmc-form-actions .btn { margin-left: auto; }
.bmc-form .attach-name { font-size: .85rem; }
.bmc-form .attach-btn { padding: 10px 18px; font-weight: 600; }

/* Trên panel xanh (trang chủ): nhãn trắng */
.booking .bmc-form .form-label { color: #fff; }
.booking .bmc-form .attach-name { color: rgba(255,255,255,.88); }

/* Trang Liên hệ: form gom vào thẻ trắng cho gọn, khỏi trôi nổi trên nền xám */
.bmc-form-card {
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
    box-shadow: var(--bmc-shadow-sm);
    padding: 26px;
}
.bmc-form-card .form-label { color: var(--bmc-ink); }
.bmc-form-card .attach-name { color: var(--bmc-muted); }
@media (max-width: 576px) { .bmc-form-card { padding: 18px; } }

/* .attachment (JS dùng closest('.attachment') để hiện tên tệp) có padding 10px mặc định
   -> huỷ trên hàng hành động cho thẳng lề với các ô nhập. */
.bmc-form-actions.attachment { padding: 0; }
/* Thẻ form trang Liên hệ chạm vào bản đồ phía dưới -> chừa khoảng cách */
.bmc-form-card { margin-bottom: 28px; }

/* Nút chính KHÔNG được nằm ở góc dưới-phải: nút nổi Zalo/Messenger (position:fixed)
   luôn ngự ở đó và sẽ đè lên -> không bấm được. Đưa "Gửi" xuống hàng riêng, canh trái. */
.bmc-form-actions .btn { margin-left: 0; }
.bmc-form-submit { margin-top: 16px; }
.bmc-form-submit .btn { padding: 11px 38px; }

/* ============================================================================
   GIAI ĐOẠN 2 — CỤM NÚT NỔI: MỘT CỘT THẲNG, CÙNG CỠ
   Trước: 4 nút 4 cỡ (70x54 méo / 48x48 / 60x60 / 44x44), Messenger+Zalo KHÔNG bo
   góc (nên Zalo lòi nền trắng vuông), lệch lề (12px vs 20px), hở dọc 4-6px dính
   nhau, và nút "lên đầu trang" văng sang góc TRÁI.
   Sau: cùng hình tròn, cùng cỡ, cùng lề phải, cách đều — xếp một cột dưới-phải.
   Thứ tự từ dưới lên: Chatbot -> Zalo -> Messenger -> Lên đầu trang.
   ============================================================================ */
:root {
    --fab-size: 52px;      /* cỡ nút nổi (desktop) */
    --fab-gap: 12px;       /* khoảng cách đều giữa các nút */
    --fab-right: 20px;     /* lề phải chung cho CẢ cụm */
    --fab-bottom: 20px;    /* nút dưới cùng cách đáy */
}

/* Kiểu chung cho nút nổi (nay chỉ còn "lên đầu trang" + nút gom liên hệ) */
.back-to-top {
    position: fixed;
    right: var(--fab-right) !important;
    width: var(--fab-size) !important;
    height: var(--fab-size) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease;
    z-index: 9999;
}
.back-to-top:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.24); }

/* Cột nút nổi, tính từ đáy: "lên đầu trang" DƯỚI CÙNG, nút gom liên hệ ở TRÊN nó
   (menu chat xổ lên phía trên nút gom, nên nút gom phải là cái ở giữa cột). */
.back-to-top { bottom: var(--fab-bottom) !important; }

@media (max-width: 768px) {
    :root { --fab-size: 48px; --fab-gap: 10px; --fab-right: 16px; --fab-bottom: 16px; }
}

/* Nút "lên đầu trang": ẩn khi ở đầu trang, hiện khi cuộn quá ngưỡng (main.js = 300px).
   Ẩn bằng opacity/visibility, KHÔNG bằng display: cụm nút nổi đặt display:flex
   !important để căn giữa icon, mà jQuery fadeOut() ẩn bằng display:none nội tuyến —
   inline style thua !important nên nút sẽ không bao giờ ẩn được. */
.back-to-top {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}
.back-to-top.hien {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}
.back-to-top.hien:hover { transform: translateY(-2px); }

/* ============================================================================
   FOOTER — THIẾT KẾ LẠI (2026-07-14)
   Vì sao viết grid riêng thay vì dùng .row/.col của Bootstrap: bootstrap.min.css
   trong dự án đã bị sửa `.row>*{width:50%}` (bản gốc là 100%) -> dưới 768px footer
   KHÔNG stack 1 cột mà chẻ đôi, bản đồ chỉ còn 147px ngang. Grid riêng ở đây
   không phụ thuộc rule hỏng đó và không đụng tới phần còn lại của site.
   Kèm theo: chừa chỗ ở đáy cho cụm nút nổi (rule cũ `footer{padding-bottom:72px}`
   là code chết vì trang trước đây không hề có thẻ <footer>).
   ============================================================================ */

.bmc-footer {
    position: relative;
    background:
        radial-gradient(1200px 400px at 12% -10%, rgba(76, 175, 80, .16), transparent 60%),
        linear-gradient(180deg, #16211B 0%, #0F1712 100%);
    color: #D7E0D6;
    border-top: none;
}
/* Dải xanh mảnh chạy ngang mép trên — điểm nhấn nhận diện */
.bmc-footer::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--bmc-green) 0%, var(--bmc-green-bright) 45%, var(--bmc-lime) 100%);
}
.bmc-footer__inner { padding: 44px 12px 32px; }

.bmc-footer__grid {
    display: grid;
    gap: 32px 48px;
    grid-template-columns: minmax(0, 1fr);   /* mobile: 1 cột thật sự */
}
.bmc-fcol { min-width: 0; }                  /* chặn min-width:auto làm tràn */

/* --- Tiêu đề cột --- */
.bmc-fcol__title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #FFFFFF;
    margin: 0 0 20px;
    padding-bottom: 12px;
    position: relative;
}
.bmc-fcol__title::after {
    content: "";
    position: absolute; left: 0; bottom: 0;
    width: 44px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--bmc-green-bright), var(--bmc-lime));
}

/* --- Cột thương hiệu --- */
.bmc-footer__logo { display: inline-block; margin-bottom: 18px; }
.bmc-footer__logo img { height: 52px; width: auto; max-width: 100%; }
.bmc-footer__tagline {
    margin: 0 0 24px;
    font-size: .95rem;
    line-height: 1.75;
    color: #AFBCAD;
    max-width: 34ch;
}
.bmc-social { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bmc-social__label {
    font-size: .8rem; text-transform: uppercase; letter-spacing: .08em;
    color: #8C9A8B; margin-right: 4px;
}
.bmc-social__btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #FFFFFF !important;
    text-decoration: none;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.bmc-social__btn:hover,
.bmc-social__btn:focus-visible {
    background: var(--bmc-green);
    border-color: var(--bmc-green-bright);
    transform: translateY(-3px);
}
.bmc-social__zalo { font-size: .72rem; font-weight: 700; letter-spacing: .02em; }

/* --- Khối trụ sở --- */
.bmc-office + .bmc-office { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.bmc-office__name {
    font-size: .95rem; font-weight: 700; color: #FFFFFF; margin: 0 0 6px;
}
/* (Nhãn "Trụ sở chính" / "Chi nhánh" đã bỏ theo yêu cầu -> .bmc-office__tag không còn dùng.) */

/* --- Cụm liên hệ theo phòng ban: nhãn phòng ban rồi tới SĐT + email của phòng đó.
       Nhãn thụt vào 30px để chữ thẳng cột với nội dung dòng liên hệ (icon 20px + gap 10px).
       Màu nõn chuối chỉ dùng cho NHÃN nhỏ trên nền footer tối (giống .bmc-addr__tag--new),
       không phải chữ nội dung trên nền sáng. --- */
.bmc-dept + .bmc-dept { margin-top: 2px; }
.bmc-dept__name {
    display: block;
    margin: 6px 0 1px;
    padding-left: 30px;
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--bmc-lime);
}
/* Dòng SĐT/email trong cụm phòng ban: bỏ sàn 44px, chỉ padding nhỏ -> footer gọn. */
.bmc-dept .bmc-line { min-height: 0; padding-top: 2px; padding-bottom: 2px; }

/* --- Dòng liên hệ: icon cố định + chữ xuống dòng thụt lề đúng (hanging indent) --- */
.bmc-line {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);   /* icon | chữ — hết cảnh chữ chui xuống dưới icon */
    align-items: start;
    align-content: center;
    gap: 10px;
    padding: 6px 0;
    min-height: 34px;                              /* thu gọn footer; vẫn đủ vùng chạm */
    color: #C7D2C6 !important;
    text-decoration: none;
    font-size: .92rem;
    line-height: 1.5;
    transition: color .2s ease, transform .2s ease;
    overflow-wrap: anywhere;                       /* email dài không đẩy tràn cột */
}
.bmc-line i { margin-top: 4px; color: var(--bmc-green-bright); font-size: .95rem; text-align: center; }
.bmc-line em { font-style: normal; color: #8C9A8B; }
.bmc-line:hover,
.bmc-line:focus-visible { color: #FFFFFF !important; transform: translateX(3px); }
.bmc-line:hover i { color: var(--bmc-lime); }

/* --- Trụ sở chính có HAI địa chỉ (cùng một nhà máy, đổi tên đơn vị hành chính):
       xếp chồng trong CÙNG một dòng liên hệ, mỗi địa chỉ có nhãn riêng nên người
       đọc không tưởng là hai cơ sở khác nhau. Địa chỉ mới sáng hơn để nổi lên. --- */
.bmc-addr { display: grid; gap: 6px; }
.bmc-addr__row { display: block; }
.bmc-addr__row--new { color: #FFFFFF; font-weight: 500; }
.bmc-addr__tag {
    display: block;
    margin-bottom: 2px;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8C9A8B !important;   /* ghi đè .bmc-line em */
}
.bmc-addr__tag--new { color: var(--bmc-lime) !important; }

/* --- Liên kết nhanh --- */
.bmc-flinks { list-style: none; margin: 0; padding: 0; }
.bmc-flinks a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    min-height: 44px;                              /* vùng chạm WCAG 2.5.5 */
    color: #C7D2C6 !important;
    text-decoration: none;
    font-size: .95rem;
    transition: color .2s ease, padding-left .2s ease;
}
.bmc-flinks a i { color: var(--bmc-green-bright); transition: transform .2s ease; }
.bmc-flinks a:hover,
.bmc-flinks a:focus-visible { color: #FFFFFF !important; padding-left: 6px; }
.bmc-flinks a:hover i { transform: translateX(2px); color: var(--bmc-lime); }

/* --- Bản đồ --- */
.bmc-map {
    border-radius: var(--bmc-r);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    line-height: 0;
}
.bmc-map iframe {
    display: block;
    width: 100%;
    height: 260px;
    border: 0;
    filter: grayscale(.25) contrast(1.05);
    transition: filter .3s ease;
}
.bmc-map:hover iframe { filter: none; }
.bmc-map__cta {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px; min-height: 44px; padding: 10px 18px;
    border-radius: 999px;
    background: var(--bmc-green);
    color: #FFFFFF !important;
    font-size: .9rem; font-weight: 600; text-decoration: none;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.bmc-map__cta:hover,
.bmc-map__cta:focus-visible {
    background: var(--bmc-green-bright);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(76, 175, 80, .32);
}

/* --- Thanh bản quyền: MỘT hàng, canh giữa thật (cột rỗng cũ làm chữ lệch trái 195px) --- */
.bmc-copyright {
    border-top: 1px solid rgba(255, 255, 255, .09);
    background: rgba(0, 0, 0, .25);
}
.bmc-copyright__inner {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 22px 12px;
    text-align: center;
}
.bmc-copyright__text { margin: 0; font-size: .9rem; color: #AFBCAD; }
.bmc-copyright__text i { color: var(--bmc-green-bright); margin-right: 6px; }
.bmc-copyright__text a { color: #FFFFFF !important; font-weight: 600; text-decoration: none; }
.bmc-copyright__text a:hover { color: var(--bmc-lime) !important; }

/* --- Điểm gãy ---
   Bản đồ KHÔNG chiếm hàng riêng ở tablet: làm vậy đẩy footer lên ~1570px.
   Cho nó nằm cạnh cột liên kết -> 2x2 gọn gàng. */
/* Tablet 768–991: KHÔNG dùng grid 2 cột — cột "Liên hệ" cao gấp đôi các cột khác nên
   hàng grid bị kéo cao theo nó, chừa ~350px trống dưới logo. Dòng cột kiểu báo (columns)
   cho các khối tự chảy, lấp kín chiều dọc. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .bmc-footer__grid {
        display: block;
        columns: 2;
        column-gap: 40px;
    }
    .bmc-fcol { break-inside: avoid; margin-bottom: 36px; }
    .bmc-map iframe { height: 240px; }
}
@media (min-width: 992px) {
    /* 4 cột thật sớm: laptop 1024 không còn cảnh bản đồ nằm trơ một hàng, chừa nửa màn trống */
    .bmc-footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, .75fr) minmax(0, 1.3fr);
        gap: 36px;
    }
    .bmc-map iframe { height: 240px; }
}
@media (min-width: 1200px) {
    .bmc-footer__grid { gap: 40px 48px; }
    /* Cột "Liên hệ" cao ~560px; bản đồ thấp làm 4 cột lệch hẳn -> kéo bản đồ cao lên cho cân */
    .bmc-map iframe { height: 380px; }
    .bmc-footer__inner { padding: 80px 12px 56px; }
}

/* --- Mobile: nén chiều cao, footer 1 cột dài 1.8 màn hình là quá mệt để cuộn --- */
@media (max-width: 767.98px) {
    .bmc-footer__inner { padding: 36px 12px 28px; }
    .bmc-footer__grid { gap: 28px; }
    .bmc-footer__logo img { height: 44px; }
    .bmc-footer__tagline { margin-bottom: 18px; font-size: .9rem; line-height: 1.65; }
    .bmc-fcol__title { margin-bottom: 16px; font-size: 1.05rem; }
    /* 6 liên kết xếp 2 cột: tiết kiệm ~130px chiều cao mà vẫn giữ vùng chạm 44px */
    .bmc-flinks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
    .bmc-map iframe { height: 200px; }
}

/* --- Thu gọn footer chỉ áp cho DESKTOP có chuột (≥992px), nơi cột "Liên hệ" cao vượt
       gây lệch bố cục. Trên MÁY CẢM ỨNG (điện thoại + máy tính bảng ≤991px) khôi phục
       vùng chạm ≥44px cho ngón tay; ở đây footer 1 cột / báo 2 cột nên cao thêm không lệch. --- */
@media (max-width: 991.98px) {
    .bmc-line { min-height: 44px; padding: 9px 0; }
    .bmc-dept .bmc-line { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
    .bmc-dept__name { margin-top: 12px; }
}

/* --- Chừa chỗ cho cụm nút nổi (4 nút xếp dọc, cao ~248px, sát mép phải) ---
   Nút nổi là position:fixed nên KHÔNG đẩy nội dung; phải tự chừa chỗ, cả dọc lẫn ngang.
   Đừng đặt padding ngang lên .bmc-copyright__inner: nó cũng mang lớp .container, mà
   styles.css nạp SAU style.css và định nghĩa lại padding của .container -> thua.
   Vì vậy giới hạn bề rộng ngay trên hai dòng chữ (chúng vẫn tự canh giữa). */
@media (max-width: 991.98px) {
    .bmc-copyright__inner { padding-bottom: 88px; }
    .bmc-copyright__text { max-width: calc(100% - 150px); }
}

/* ============================================================================
   GIAI ĐOẠN 3 — HEADER (topbar + navbar): CĂN ĐỀU, KHÔNG VỠ DÒNG
   Bệnh cũ (đo bằng Playwright ở 1920/1440/1200/992):
   - Topbar: cột trái cao 45px, cột phải cao 35px -> icon Facebook và nút ngôn ngữ
     lệch trục 5px.
   - Navbar: .nav-link không có white-space:nowrap, lại nằm trong flex (min-width
     mặc định auto) nên khi hẹp chỗ mọi mục VỠ ĐÔI DÒNG ("TRANG / CHỦ") và navbar
     phình từ 74px lên 139px. Tên công ty cỡ 25px cứng ăn hết chỗ của menu.
   Cách chữa: topbar là MỘT hàng flex căn giữa; tên công ty đi cùng logo thành
   cụm thương hiệu (cỡ chữ co giãn theo màn hình); menu nowrap + giãn cách đều.
   ============================================================================ */

/* --- Topbar: một hàng, hai đầu, cùng trục giữa --- */
.bmc-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 45px;
}

/* --- Nút chuyển ngôn ngữ: 2 lựa chọn VI | EN, luôn đủ cờ + chữ --- */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
}
.lang-switch__sep {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .45);
}
.lang-switch__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Rộng cố định: chữ đậm lên khi active cũng KHÔNG làm nút nhảy chỗ */
    min-width: 62px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    color: rgba(255, 255, 255, .88);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.lang-switch__opt:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.lang-switch__opt.is-active {
    color: var(--bmc-green-dark);
    background: #fff;
    font-weight: 600;
    cursor: default;
}
.lang-switch__opt img {
    width: 18px;
    height: 18px;
    flex: none;
    object-fit: contain;
    border-radius: 2px;
}

/* --- Cụm thương hiệu: logo + tên công ty, cùng trục giữa, không vỡ dòng --- */
.bmc-brand {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
.navbar-light .bmc-brand .navbar-brand { margin: 0; }
.navbar-light .bmc-brand .navbar-brand img {
    display: block;
    height: 52px;
    max-height: 52px;
    width: auto;
}
.bmc-brand__name {
    white-space: nowrap;
    /* Co giãn theo bề ngang màn hình thay vì 25px cứng -> hết tràn/vỡ dòng */
    font-size: clamp(15px, 1.15vw, 22px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: .01em;
    color: var(--bmc-green);
    text-decoration: none;
}
.bmc-brand__name:hover { color: var(--bmc-green-dark); }

/* --- Menu chính: mỗi mục một dòng, giãn cách đều nhau --- */
.navbar-light .bmc-nav .nav-link {
    white-space: nowrap;
    padding: 18px 12px;
    font-size: clamp(13px, .95vw, 17px);
}
.navbar-light .bmc-nav .nav-link::after { left: 12px; right: 12px; }

/* Từ 1200px trở lên menu nằm ngang: canh phải, cách đều, không cho co bóp chữ */
@media (min-width: 1200px) {
    .bmc-brand { flex: none; }
    .bmc-nav { flex-wrap: nowrap; }
    .bmc-nav .nav-item, .bmc-nav .nav-link { flex: none; }
}

/* Dưới 1200px dùng menu thu gọn (hamburger): xếp dọc, canh trái đều nhau.
   Trước đây navbar-expand-lg mở ngang ngay từ 992px -> 7 mục + tên công ty
   chen nhau, chữ vỡ 3 dòng. */
@media (max-width: 1199.98px) {
    /* Đường kẻ ngăn menu bung ra với cụm logo (style.css cũ chỉ làm tới 991px,
       nên dải 992-1199 bị dính sát nhau). */
    .navbar-light .navbar-collapse {
        margin-top: 12px;
        border-top: 1px solid var(--bmc-line);
    }
    .navbar-light .bmc-nav { margin-top: 4px; }
    .navbar-light .bmc-nav .nav-link {
        padding: 12px 0;
        font-size: 16px;
        text-align: left;
    }
    .navbar-light .bmc-nav .nav-link::after { left: 0; right: 0; bottom: 6px; }
    .navbar-light .bmc-brand .navbar-brand img { height: 45px; max-height: 45px; }
    .bmc-brand__name { font-size: 15px; }
    .navbar.navbar-expand-xl .navbar-toggler {
        padding: 10px 14px;
        border: 1px solid var(--bmc-green);
        color: var(--bmc-green);
    }
}

/* Màn rất hẹp: chỉ còn logo + nút menu, tên công ty dài sẽ đẩy nút menu ra khỏi
   hàng nếu cố giữ. */
@media (max-width: 575.98px) {
    .bmc-brand__name { display: none; }
}

/* ============================================================================
   GIAI ĐOẠN 3b — HOVER TRÊN HEADER
   Bệnh: rê chuột vào một mục menu thì rule cũ (::before, mục "Navbar" đầu file)
   dâng một khối ĐẶC màu nõn chuối #9BCF53 phủ kín ô, trong khi chữ lúc đó đã là
   xanh đậm #2E7D32 -> xanh-trên-xanh, tương phản 2.63:1 (QUY-UOC-GIAO-DIEN.md:
   nõn chuối KHÔNG BAO GIỜ làm nền cho chữ). Lại còn vuông góc, cao hết navbar,
   và chồng thêm gạch chân ::after -> hai hiệu ứng đánh nhau.
   Chữa: bỏ khối đặc đó; hover = nền xanh RẤT NHẠT bo góc + chữ xanh đậm + gạch
   chân trượt từ trái. Một hiệu ứng, đọc rõ (6.4:1), nhanh gọn.
   ============================================================================ */

/* 1. Gỡ khối nõn chuối đặc của template gốc */
.navbar-light .navbar-nav .nav-link::before,
.navbar-light .navbar-nav .nav-link:hover::before,
.navbar-light .navbar-nav .nav-link.active::before {
    content: none;
    display: none;
}

/* 2. Nền mềm bo góc + đổi màu chữ. Transition .18s: .5s cũ khiến menu "lờ đờ",
      rê nhanh qua 7 mục là thấy màu đuổi theo không kịp. */
.navbar-light .bmc-nav .nav-link {
    border-radius: var(--bmc-r-sm);
    transition: color .18s ease, background-color .18s ease;
}
.navbar-light .bmc-nav .nav-link:hover,
.navbar-light .bmc-nav .nav-link:focus-visible,
.navbar-light .bmc-nav .nav-link.active {
    color: var(--bmc-green-dark) !important;
    background-color: var(--bmc-lime-tint);
}

/* 3. Gạch chân: đậm hơn (2px -> 3px), bo tròn, nằm sát đáy chữ thay vì lửng lơ
      giữa vùng đệm. Mục ĐANG XEM đứng yên, chỉ mục rê chuột mới trượt. */
.navbar-light .bmc-nav .nav-link::after {
    height: 3px;
    bottom: 8px;
    border-radius: 999px;
    background: var(--bmc-green-dark);
    transition: transform .22s ease;
}

/* Bàn phím: viền rõ ràng cho người dùng Tab (trước đây outline:none, gần như
   không thấy mình đang ở mục nào). */
.navbar-light .bmc-nav .nav-link:focus-visible {
    outline: 2px solid var(--bmc-green);
    outline-offset: 2px;
}

/* 4. Tên công ty cũng là một liên kết (-> trang Liên hệ) nhưng trước chỉ đổi màu
      rất khẽ, không ai biết bấm được. Thêm gạch chân trượt cho khớp menu. */
.bmc-brand__name {
    position: relative;
    transition: color .18s ease;
}
.bmc-brand__name::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 2px;
    border-radius: 999px;
    background: var(--bmc-green-dark);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
.bmc-brand__name:hover::after,
.bmc-brand__name:focus-visible::after { transform: scaleX(1); }

/* Logo: nhấn nhẹ khi rê chuột để thấy nó bấm được (về trang chủ) */
.navbar-light .bmc-brand .navbar-brand img { transition: opacity .18s ease; }
.navbar-light .bmc-brand .navbar-brand:hover img { opacity: .8; }

/* 5. Menu thu gọn (<1200px): mỗi mục là một dải ngang chiếm trọn bề ngang, nên
      gạch chân sẽ dài hết dòng và đọc thành "đường kẻ chia mục" chứ không phải
      dấu nhấn. Ở dạng dọc chỉ giữ nền mềm — đã đủ rõ. */
@media (max-width: 1199.98px) {
    .navbar-light .bmc-nav .nav-link {
        padding: 12px 10px;
        border-radius: var(--bmc-r-sm);
    }
    .navbar-light .bmc-nav .nav-link::after { display: none; }
}

/* Người dùng tắt hiệu ứng chuyển động thì bỏ hết transition. */
@media (prefers-reduced-motion: reduce) {
    .navbar-light .bmc-nav .nav-link,
    .navbar-light .bmc-nav .nav-link::after,
    .bmc-brand__name,
    .bmc-brand__name::after,
    .navbar-light .bmc-brand .navbar-brand img { transition: none; }
}

/* ============================================================================
   GIAI ĐOẠN 3c — HAI NÚT CUỐI FORM: CĂN GIỮA, ĐỒNG BỘ MOBILE & DESKTOP
   Dùng chung cho MỌI form có cặp "Tệp đính kèm" + "Gửi" (trang Liên hệ dùng thẻ
   trắng .bmc-form-card, trang chủ dùng panel xanh .booking) — sửa một chỗ, cả
   hai cùng theo.
   ============================================================================ */

/* Hàng "Tệp đính kèm": xếp DỌC (nút trên, tên tệp dưới) ở mọi cỡ màn hình.
   Nếu để nút và tên tệp đứng cùng dòng rồi căn giữa cả cụm thì thứ nằm giữa là
   CỤM, không phải cái nút: nút bị đẩy lệch trái 51px, và chọn tệp tên dài thì
   lệch tới 221px -> hai nút không bao giờ thẳng trục nhau.
   (Rule cũ để cụm này canh trái vì nút Gửi từng bị đẩy sang phải.) */
.bmc-form-actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
}
.bmc-form .attach-name {
    /* tên tệp dài (CV hay đặt tên rất dài) xuống dòng chứ không đẩy/tràn */
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Nút "Gửi" ở hàng riêng bên dưới, cũng canh giữa và thẳng trục với nút trên. */
.bmc-form-submit {
    display: flex;
    justify-content: center;
}

/* Hai nút cùng bề ngang tối thiểu -> trông như một cột cân đối chứ không phải
   một nút to một nút bé lệch nhau.
   .attach-btn là <label> (inline) nên min-width/căn giữa bị bỏ qua -> ép inline-flex. */
.bmc-form .attach-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bmc-form .attach-btn,
.bmc-form-submit .btn {
    min-width: 190px;
    text-align: center;
}

/* Desktop: nút 190px trông cụt lủn bên dưới những ô nhập dài gấp mấy lần.
   Cho hai nút rộng đúng bằng MỘT CỘT của lưới form (bằng ô "Họ và tên"/"Email"
   phía trên, trừ đi máng g-3 = 1rem) -> mép nút thẳng mép ô, bố cục đều nhau. */
@media (min-width: 576px) {
    .bmc-form .attach-btn,
    .bmc-form-submit .btn {
        width: 100%;
        max-width: calc(50% - 0.5rem);
        /* min-height thay vì padding: hai nút vốn lệch nhau 3px (label vs button
           tính padding + border khác nhau) -> ép về cùng một chiều cao. */
        min-height: 50px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* Mobile: nút rộng ra cho dễ bấm bằng ngón tay, vẫn giữ trục giữa.
   Trần 240px KHÔNG phải con số tuỳ tiện: cụm nút nổi (Zalo/Messenger/lên-đầu-trang)
   là position:fixed ở góc phải-dưới, bắt đầu từ khoảng x=326 trên màn 390px. Nút
   rộng hơn thế thì mép phải chui xuống dưới chúng — đo thực tế: chạm vào mép phải
   nút "Gửi" lại trúng nút "lên đầu trang". 240px giữ nút nằm trọn bên trái vùng đó. */
@media (max-width: 575.98px) {
    .bmc-form .attach-btn,
    .bmc-form-submit .btn {
        width: 100%;
        max-width: 240px;
    }
}

/* Hình dạng: hai nút vốn bo KHÁC nhau — "Tệp đính kèm" bo 8px, "Gửi" bo pill 999px
   (nút chung của hệ thiết kế) -> đứng chồng nhau trông lệch tông.
   Thống nhất về bo nhẹ --bmc-r-sm (8px) — cùng bán kính với các ô nhập ngay phía
   trên, nên cả form là một khối hình học nhất quán. */
.bmc-form .attach-btn,
.booking .attach-btn,
.bmc-form-submit .btn,
.bmc-form-submit .btn.btn-primary {
    border-radius: var(--bmc-r-sm);
}

/* ============================================================================
   GIAI ĐOẠN 4 — BỐ CỤC CÁC TRANG
   (Kiến thức / Thông báo / Việc làm / Liên hệ / Sản phẩm / dải tiêu đề chung)
   Nguyên tắc: thẻ cùng một hàng phải CAO BẰNG NHAU, đáy thẻ thẳng, ảnh cùng
   khung, chữ cắt đều — không để nội dung dài ngắn tự do kéo méo lưới.
   ============================================================================ */

/* --- Dải tiêu đề đầu trang. Cũ: nền navy #13357B (lạc khỏi hệ xanh lá) và
       padding 150px trên / 50px dưới nên chữ bị dồn lệch xuống. --- */
.bg-breadcrumb {
    background: linear-gradient(135deg, var(--bmc-green-dark), var(--bmc-green)) !important;
    background-attachment: scroll !important;
    padding: 56px 0 !important;
    text-align: center;
}
.bg-breadcrumb h1 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.4vw, 46px);
    line-height: 1.2;
}

/* --- Phân trang: nhãn "Trang 1 trong 13 trang" đang mang hình dạng NÚT xanh
       đậm y hệt nút bấm được -> gây hiểu nhầm. Nó chỉ là nhãn trạng thái. --- */
.pagination .step-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pagination .step-links .current {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--bmc-lime-tint);
    border: 1px solid var(--bmc-line);
    color: var(--bmc-muted);
    font-size: .95rem;
    font-weight: 500;
}
.pagination .step-links .btn {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* --- KIẾN THỨC: lưới thẻ bài viết đều nhau --- */
.bmc-post {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
    overflow: hidden;
    box-shadow: var(--bmc-shadow-sm);
    transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bmc-post:hover {
    transform: translateY(-4px);
    box-shadow: var(--bmc-shadow);
    border-color: var(--bmc-green-bright);
}
/* Ảnh minh hoạ mỗi bài một tỉ lệ -> khung cao cố định + cover cho lưới đều */
.bmc-post__thumb {
    display: block;
    height: 190px;
    overflow: hidden;
    background: var(--bmc-lime-tint);
}
.bmc-post__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.bmc-post:hover .bmc-post__thumb img { transform: scale(1.06); }
.bmc-post__body {
    display: flex;
    flex-direction: column;
    flex: 1;                 /* đẩy nút xuống đáy -> đáy các thẻ thẳng hàng */
    padding: 16px 18px 20px;
}
.bmc-post__date { font-size: 13px; color: var(--bmc-muted); }
.bmc-post__title {
    margin: 6px 0 8px;
    font-size: 1.05rem;
    line-height: 1.4;
    /* cắt đúng 2 dòng: tiêu đề dài ngắn khác nhau vẫn cho thẻ cùng chiều cao */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.bmc-post__title a { color: var(--bmc-ink); text-decoration: none; }
.bmc-post:hover .bmc-post__title a { color: var(--bmc-green); }
.bmc-post__excerpt {
    margin: 0 0 16px;
    font-size: .94rem;
    line-height: 1.6;
    color: var(--bmc-muted);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.8em;
}
.bmc-post__more {
    align-self: flex-start;
    margin-top: auto;        /* luôn sát đáy thẻ */
    padding: 9px 22px;
}

/* --- Cột phụ (tìm kiếm + thể loại): dính theo khi cuộn thay vì bỏ trống --- */
.bmc-side { position: sticky; top: 96px; display: grid; gap: 20px; }
.bmc-side__box {
    padding: 20px;
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
    box-shadow: var(--bmc-shadow-sm);
}
.bmc-side__title {
    display: block;
    margin: 0 0 14px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bmc-ink);
}
.bmc-side__search { display: flex; gap: 8px; }
.bmc-side__search .form-control { min-width: 0; border-radius: var(--bmc-r-sm); }
.bmc-side__search .btn { flex: none; padding: 10px 20px; }
.bmc-side__tags { display: flex; flex-wrap: wrap; gap: 8px; }
/* Cũ: mỗi thể loại một màu (đỏ/đen/xám/xanh) do bộ lọc cycle -> rối mắt.
   Nay cùng một kiểu chip theo màu thương hiệu. */
.bmc-tag {
    display: inline-flex;
    align-items: center;
    min-height: 44px;      /* vùng chạm tối thiểu trên điện thoại */
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--bmc-line);
    background: var(--bmc-lime-tint);
    color: var(--bmc-green-dark);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .2s, color .2s, border-color .2s;
}
.bmc-tag:hover {
    background: var(--bmc-green);
    border-color: var(--bmc-green);
    color: #fff;
}

/* --- THÔNG BÁO: đáy thẻ thẳng hàng (nút "Xem Thêm" trước đây nhấp nhô theo độ
       dài tiêu đề) --- */
.blog .blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bmc-surface);
    border-radius: var(--bmc-r);
    overflow: hidden;
    box-shadow: var(--bmc-shadow-sm);
    transition: transform .25s, box-shadow .25s;
}
.blog .blog-item:hover { transform: translateY(-4px); box-shadow: var(--bmc-shadow); }
.blog .blog-item .blog-img-inner img {
    width: 100%;
    height: 220px;           /* cũ: inline height 300px, ảnh khác tỉ lệ -> méo/so le */
    object-fit: cover;
}
.blog .blog-item .blog-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 12px;
    align-items: flex-start;
}
.blog .blog-item .blog-content .h4 {
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--bmc-ink);
    text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
}
.blog .blog-item:hover .blog-content .h4 { color: var(--bmc-green); }
.blog .blog-item .blog-content .btn { margin-top: auto; }

/* --- CƠ HỘI VIỆC LÀM: thẻ cao 150px mà chỉ chứa một dòng chữ -> gọn lại, mức
       lương tách thành chip riêng, nút cùng trục giữa với tiêu đề --- */
.bmc-jobs { display: grid; gap: 16px; }
.bmc-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 24px;
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
    box-shadow: var(--bmc-shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bmc-job:hover {
    transform: translateY(-2px);
    box-shadow: var(--bmc-shadow);
    border-color: var(--bmc-green-bright);
}
.bmc-job__main { min-width: 0; }
.bmc-job__title { margin: 0 0 10px; font-size: 1.1rem; line-height: 1.4; }
.bmc-job__title a { color: var(--bmc-ink); text-decoration: none; }
.bmc-job:hover .bmc-job__title a { color: var(--bmc-green); }
.bmc-job__meta { display: flex; flex-wrap: wrap; gap: 8px; }
.bmc-job__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--bmc-lime-tint);
    color: var(--bmc-green-dark);
    font-size: .88rem;
    font-weight: 600;
}
.bmc-job__chip i { font-size: .85em; }
.bmc-job__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 24px;
    font-size: .92rem;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .bmc-job { flex-direction: column; align-items: stretch; }
    .bmc-job__btn { width: 100%; justify-content: center; }
}

/* --- LIÊN HỆ: cột thông tin + bản đồ đứng cạnh form (trước đây form đứng một
       mình giữa trang, phần dưới bỏ trống) --- */
.bmc-contact-info {
    --bmc-ci-pad: 24px;

    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--bmc-ci-pad);
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
    box-shadow: var(--bmc-shadow-sm);
    overflow: hidden;   /* để bản đồ trải hết bề ngang mà không phá góc bo của thẻ */
    text-align: left;   /* thông tin liên hệ luôn canh trái — dễ dò mắt theo cột */
}

/* Mỗi mục là một hàng có đường kẻ ngăn, không dính thành một mảng chữ */
.bmc-contact-info__item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid var(--bmc-line);
}
.bmc-contact-info__item:first-child { padding-top: 0; }

.bmc-contact-info__icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bmc-lime-tint);
    color: var(--bmc-green-dark);
}
.bmc-contact-info__label {
    margin: 0 0 4px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 42px;     /* bằng đúng chiều cao vòng tròn -> nhãn thẳng trục với icon */
    color: var(--bmc-green-dark);
}
.bmc-contact-info p { margin-bottom: 4px; font-size: .95rem; line-height: 1.6; color: var(--bmc-ink); }
.bmc-contact-info p:last-child { margin-bottom: 0; }
.bmc-contact-info a { color: var(--bmc-ink); text-decoration: none; }
.bmc-contact-info a:hover { color: var(--bmc-green); }

/* Bản đồ: cũ nó nằm thụt trong padding nên mép trái KHÔNG thẳng với mép chữ (chữ
   còn bị icon đẩy vào 56px nữa) -> nhìn xộc xệch. Nay kéo ra sát hai mép thẻ,
   thành một khối riêng ở đáy, ngăn bằng đường kẻ. */
.bmc-contact-map {
    margin: auto calc(var(--bmc-ci-pad) * -1) calc(var(--bmc-ci-pad) * -1);
    border: 0;
    border-radius: 0;
    overflow: hidden;
}
/* Bản đồ đứng ngay sau mục cuối: mục đó đã có kẻ dưới rồi, thêm kẻ trên cho bản
   đồ nữa thành hai vạch song song. (Không dùng :last-of-type để bỏ kẻ của mục
   cuối — bản đồ cũng là <div> nên nó mới là "div cuối", selector đó không khớp.) */
.bmc-contact-info__item + .bmc-contact-map { border-top: 0; }
.bmc-contact-map iframe { display: block; width: 100%; height: 280px; border: 0; }

@media (max-width: 575.98px) {
    .bmc-contact-info { --bmc-ci-pad: 18px; }
    .bmc-contact-map iframe { height: 240px; }
}

/* --- SẢN PHẨM trên điện thoại: 2 thẻ mỗi hàng thay vì 1 (trước cuộn rất dài) --- */
@media (max-width: 575.98px) {
    .destination .custom-box .destination-img { height: 170px; }
    .destination .custom-box .bmc-card-title { font-size: 14px; }
}

/* --- TRANG CHỦ, hero trên điện thoại ---
   Đo được ở 390px: khung hero cao 700px (chiếm 83% màn hình 844px), trong khi ảnh
   bị margin-top:-100px kéo LÊN nên mép trên chui xuống dưới navbar 39px và đáy
   ảnh dừng ở 661px — hở một dải trống 100px cuối khung. Item lại còn
   min-height:100vh (844px) nên cao hơn cả khung chứa nó.
   Chữa: khung và ảnh cùng một chiều cao, ảnh phủ kín, ô tìm kiếm nằm giữa. */
@media (max-width: 768px) {
    .carousel-header,
    .carousel-header .carousel-inner .carousel-item {
        height: 460px !important;
        min-height: 460px !important;
    }
    .carousel-header .carousel-inner .carousel-item img {
        height: 100% !important;
        margin-top: 0 !important;
        object-fit: cover;
    }
    .carousel-header .carousel-inner .carousel-item .carousel-caption {
        height: 100% !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: flex;
        align-items: center;
    }
    .search-bar { margin-top: 0 !important; }
}

/* --- GIỚI THIỆU ---
   Khung ảnh cũ: viền 50px màu nõn chuối viết thẳng trong HTML (border-color
   transparent #9BCF53) -> hai vệt xanh dày hai bên, ảnh co theo tỉ lệ gốc nên
   cột ảnh và cột chữ so le nhau. Nay dùng .about-frame (đã có sẵn từ giai đoạn 2)
   với ảnh cover -> hai cột cao bằng nhau. */
/* Ba khối Giới thiệu đặt trong `.row align-items-center` -> cột KHÔNG kéo cao bằng
   nhau, nên `height:100%` ở đây chẳng bám vào đâu: mỗi ảnh rơi về một chiều cao
   khác nhau tuỳ tỉ lệ ảnh gốc, khối thì ảnh dẹt, khối thì ảnh cao — nhìn là thấy
   ba khối không cùng một hệ.
   Cách chắc chắn: KHOÁ TỈ LỆ khung ảnh (4:3) cho cả ba, ảnh cover vào khung. Bao
   nhiêu chữ bên cạnh cũng không làm ảnh méo đi nữa. */
.about-frame { height: auto; }
.about-frame__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
/* Trình duyệt chưa hỗ trợ aspect-ratio (Safari < 15) vẫn có khung cao ổn định */
@supports not (aspect-ratio: 4 / 3) {
    .about-frame__img { height: 340px; }
}

/* Mỗi mục Giới thiệu vốn chồng HAI lớp đệm dọc (section `py-lg-5` + container
   `py-lg-5`) -> giữa hai mục hở ra một mảng trắng ~12rem, đọc như trang bị lỗi.
   Bỏ lớp đệm của container (đã gỡ py-* trong about.html), giữ lại của section. */
.bmc-about + .bmc-about { padding-top: 0 !important; }

/* .section-about-title là inline-block -> hai tiêu đề liên tiếp DÍNH CÙNG MỘT DÒNG
   ("HỆ GIÁ TRỊ BMC VIỆT NAM   GIÁ TRỊ KHÁCH HÀNG"). Trước đây chúng chỉ được tách
   nhau bằng một thẻ `</br>` sai cú pháp. Cho mỗi tiêu đề chiếm riêng một dòng
   (width: fit-content để vạch trang trí ::before/::after vẫn bám đúng mép chữ). */
/* Phải đủ "nặng" để thắng rule `.about .container .section-about-title{display:inline-block}`
   ở đầu file — nhẹ hơn thì hai tiêu đề vẫn dính nhau. */
.bmc-about .container .section-about-title {
    display: block;
    width: fit-content;
    max-width: 100%;
}
.bmc-about .container h5.section-about-title { margin-bottom: 18px; }
.bmc-about .container h6.section-about-title { margin-top: 22px; margin-bottom: 8px; }

/* Ảnh trên dòng thời gian: rounded-circle + height:auto khiến ảnh khác tỉ lệ ra
   hình bầu dục, to nhỏ không đều. Ép về cùng một vòng tròn. */
.timeline > li .timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Đoạn dẫn dưới tiêu đề mục: GIỮ căn giữa (nằm dưới tiêu đề căn giữa, là chủ ý),
   nhưng bó bề ngang lại. Dòng chữ căn giữa mà dài hết 900px thì mắt phải dò lại
   điểm bắt đầu ở mỗi dòng — đây là lý do chữ căn giữa chỉ hợp với đoạn NGẮN. */
.bmc-lead {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
    color: var(--bmc-muted);
}

/* Chữ trên dòng thời gian: các mốc nằm bên TRÁI trục đang bị căn phải
   (text-align:right của template gốc) -> mép trái lởm chởm, mắt phải dò lại điểm
   bắt đầu ở mỗi dòng. Căn trái cả hai bên: cùng một kiểu, đều nhau, dễ đọc.

   LƯU Ý ĐỘ ĐẶC HIỆU: rule gốc nằm ở styles.css, mà styles.css được nạp SAU
   style.css này. Selector ngang cơ sẽ THUA vì đứng trước -> phải nhỉnh hơn một
   bậc (ul.bmc-timeline...), thay vì đập !important vào. */
ul.bmc-timeline > li > .timeline-panel,
ul.bmc-timeline > li.timeline-inverted > .timeline-panel {
    text-align: left;
}

/* ============================================================================
   DÒNG THỜI GIAN: TỪNG MỐC HIỆN DẦN KHI CUỘN TỚI
   Trạng thái ẩn ban đầu CHỈ áp dụng khi JS đã bật và đã gắn class .js-reveal
   (main.js). Nếu JS lỗi hoặc bị chặn, không rule nào bên dưới khớp -> mọi mốc
   hiện bình thường. Không bao giờ được để nội dung biến mất vì một hiệu ứng.
   ============================================================================ */

/* Đường kẻ dọc gốc lùi về làm nền mờ; một vạch xanh chạy dần đè lên nó. */
.js-reveal .bmc-timeline__progress {
    position: absolute;
    top: 0;
    left: 40px;                    /* trùng vị trí .timeline:before ở mobile */
    width: 2px;
    height: 100%;
    margin-left: -1.5px;
    background: var(--bmc-green);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .15s linear;
    z-index: 1;
}
@media (min-width: 768px) {
    .js-reveal .bmc-timeline__progress { left: 50%; }
}

.js-reveal .bmc-tl-item .timeline-image,
.js-reveal .bmc-tl-item .timeline-panel {
    opacity: 0;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
/* Ảnh tròn: nhô ra từ nhỏ */
.js-reveal .bmc-tl-item .timeline-image { transform: scale(.75); }
/* Phần chữ: trượt vào từ đúng phía nó đứng (trái/phải xen kẽ) */
.js-reveal .bmc-tl-item .timeline-panel { transform: translateX(-28px); }
.js-reveal .bmc-tl-item.timeline-inverted .timeline-panel { transform: translateX(28px); }

/* Khi mốc lọt vào khung nhìn */
.js-reveal .bmc-tl-item.is-visible .timeline-image,
.js-reveal .bmc-tl-item.is-visible .timeline-panel {
    opacity: 1;
    transform: none;
}
/* Chữ chạy sau ảnh một nhịp -> mắt đi theo: chấm tròn trước, nội dung sau */
.js-reveal .bmc-tl-item.is-visible .timeline-panel { transition-delay: .12s; }

/* Máy/người dùng đã tắt hiệu ứng chuyển động: hiện thẳng, không animate. */
@media (prefers-reduced-motion: reduce) {
    .js-reveal .bmc-tl-item .timeline-image,
    .js-reveal .bmc-tl-item .timeline-panel {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .js-reveal .bmc-timeline__progress { transform: scaleY(1); transition: none; }
}

/* ============================================================================
   GIAI ĐOẠN 4b — LIST/SEARCH/PAGINATION RESPONSIVE
   Áp dụng đúng pattern bmc-* cho các trang list/search còn lộn xộn trên mobile.
   ============================================================================ */

.bmc-search-summary {
    max-width: 760px;
    margin: 0 auto 28px;
    text-align: center;
}
.bmc-search-summary .section-title {
    display: inline-block;
    margin-bottom: 10px;
}
.bmc-search-summary p {
    margin: 0;
    color: var(--bmc-muted);
    font-size: 1rem;
    line-height: 1.7;
}
.bmc-search-summary strong { color: var(--bmc-green-dark); }

.bmc-empty {
    padding: 32px 24px;
    text-align: center;
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
    box-shadow: var(--bmc-shadow-sm);
}
.bmc-empty h2 {
    margin: 0 0 8px;
    color: var(--bmc-green-dark);
    font-size: 1.25rem;
}
.bmc-empty p {
    margin: 0;
    color: var(--bmc-muted);
}

/* Pagination là điều người dùng chạm nhiều trên mobile: giữ pill nhưng giảm độ
   phình, tách rõ nhãn trạng thái với nút bấm, và chống tràn hàng ngang. */
.pagination {
    margin: 0;
}
.pagination .step-links {
    width: 100%;
    max-width: 760px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.pagination .step-links .btn,
.pagination .step-links .current {
    min-height: 42px !important;
    border-radius: 999px !important;
    font-size: .94rem !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}
.pagination .step-links .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px !important;
    font-weight: 700;
}
.pagination .step-links .current,
.pagination .step-links .current.btn,
.pagination .step-links .current.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px !important;
    background: var(--bmc-lime-tint) !important;
    border: 1px solid var(--bmc-line) !important;
    color: var(--bmc-muted) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

@media (max-width: 575.98px) {
    .bmc-search-summary {
        margin-bottom: 22px;
        padding: 0 4px;
    }
    .bmc-search-summary p {
        font-size: .94rem;
    }
    .bmc-side {
        position: static;
    }
    .bmc-side__box {
        padding: 16px;
    }
    .bmc-side__search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .bmc-side__search .btn {
        padding-left: 16px;
        padding-right: 16px;
    }
    .pagination {
        padding-top: 28px !important;
        padding-bottom: 34px !important;
    }
    .pagination .step-links {
        max-width: 360px;
        gap: 10px 8px;
    }
    .pagination .step-links .btn,
    .pagination .step-links .current {
        min-height: 40px !important;
        padding: 9px 16px !important;
        font-size: .9rem !important;
    }
    .pagination .step-links .current {
        order: 3;
        flex-basis: 100%;
        max-width: 240px;
    }
}

.bmc-pagination {
    width: 100%;
    margin: 42px auto 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bmc-pagination::-webkit-scrollbar {
    display: none;
}

.bmc-page-link,
.bmc-page-ellipsis {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: var(--bmc-r-sm);
    font-size: .98rem;
    line-height: 1;
}

.bmc-page-link {
    border: 1px solid var(--bmc-line);
    background: var(--bmc-surface);
    color: var(--bmc-ink);
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--bmc-shadow-sm);
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.bmc-page-link:hover,
.bmc-page-link:focus {
    border-color: var(--bmc-green);
    background: var(--bmc-lime-tint);
    color: var(--bmc-green-dark);
    text-decoration: none;
    transform: translateY(-1px);
}

.bmc-page-link--current,
.bmc-page-link--current:hover,
.bmc-page-link--current:focus {
    border-color: var(--bmc-green);
    background: var(--bmc-green);
    color: #fff;
    box-shadow: 0 10px 24px rgba(40, 130, 54, .2);
    transform: none;
}

.bmc-page-link--arrow {
    font-size: 1.5rem;
    font-weight: 600;
}

.bmc-page-link--disabled {
    opacity: .45;
    background: #f7f8f4;
    color: var(--bmc-muted);
    box-shadow: none;
    pointer-events: none;
}

.bmc-page-ellipsis {
    width: auto;
    min-width: 24px;
    color: var(--bmc-muted);
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .bmc-pagination {
        max-width: 100%;
        margin-top: 30px;
        padding: 0 6px 4px;
        gap: 6px;
        justify-content: flex-start;
    }

    .bmc-page-link,
    .bmc-page-ellipsis {
        width: 34px;
        height: 34px;
        font-size: .88rem;
        border-radius: 8px;
    }

    .bmc-page-ellipsis {
        width: 18px;
        min-width: 18px;
    }

    .bmc-page-link--arrow {
        font-size: 1.2rem;
    }
}

/* ============================================================================
   GIAI ĐOẠN 2 — PATTERN TRANG CHI TIẾT: .bmc-detail + .bmc-prose
   Gốc rễ của "hiển thị thô": nội dung soạn thảo (CKEditor) bị đổ HTML trần ra
   màn hình, KHÔNG có một dòng typography nào -> chữ bé, dòng sát nhau, không có
   nhịp tiêu đề, ảnh trong bài không bo/không canh, bề rộng đọc không giới hạn.
   .bmc-prose lo toàn bộ phần đó, dùng chung cho bài viết/thông báo/tin/việc làm.
   ============================================================================ */

/* Đường dẫn (breadcrumb) trong dải tiêu đề xanh */
.bmc-crumb {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 8px; margin-bottom: 14px;
    font-size: .86rem; color: rgba(255,255,255,.85);
}
.bmc-crumb a { color: rgba(255,255,255,.9); text-decoration: none; }
.bmc-crumb a:hover { color: #fff; text-decoration: underline; }
.bmc-crumb span { opacity: .6; }

/* Khung trang chi tiết — GIỚI HẠN BỀ RỘNG ĐỌC (dòng quá dài thì mỏi mắt) */
.bmc-detail {
    max-width: 820px;
    padding: 36px 20px 64px;
}
.bmc-detail__meta {
    display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
    color: var(--bmc-muted); font-size: .9rem;
    padding-bottom: 16px; margin-bottom: 24px;
    border-bottom: 1px solid var(--bmc-line);
}
.bmc-detail__meta i { margin-right: 6px; color: var(--bmc-green); }
.bmc-detail__banner { margin: 0 0 28px; }
.bmc-detail__banner img {
    width: 100%; height: auto; display: block;
    border-radius: var(--bmc-r); box-shadow: var(--bmc-shadow-sm);
}
.bmc-detail__back {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 36px; padding: 11px 22px;
    border: 1px solid var(--bmc-line); border-radius: 999px;
    color: var(--bmc-green); font-weight: 600; text-decoration: none;
    transition: background .2s, border-color .2s;
}
.bmc-detail__back:hover { background: var(--bmc-lime-tint); border-color: var(--bmc-green); color: var(--bmc-green-dark); }

/* --- .bmc-prose: typography cho MỌI nội dung soạn thảo --- */
.bmc-prose {
    font-size: 17px;
    line-height: 1.75;
    color: var(--bmc-ink);
    overflow-wrap: break-word;
}
.bmc-prose p { margin: 0 0 1.15em; }
.bmc-prose h1, .bmc-prose h2, .bmc-prose h3, .bmc-prose h4 {
    color: var(--bmc-ink); font-weight: 700; line-height: 1.3;
    margin: 1.9em 0 .6em;
}
.bmc-prose h1, .bmc-prose h2 { font-size: 1.5rem; }
.bmc-prose h3 { font-size: 1.24rem; }
.bmc-prose h4 { font-size: 1.08rem; }
.bmc-prose ul, .bmc-prose ol { margin: 0 0 1.15em; padding-left: 1.5em; }
.bmc-prose li { margin-bottom: .45em; }
.bmc-prose li::marker { color: var(--bmc-green); }
.bmc-prose a { color: var(--bmc-green); text-decoration: underline; text-underline-offset: 2px; }
.bmc-prose a:hover { color: var(--bmc-green-dark); }
.bmc-prose strong, .bmc-prose b { font-weight: 700; color: var(--bmc-ink); }
/* Ảnh trong bài: bo góc, canh giữa, có khoảng thở — trước đây trần trụi đủ mọi cỡ */
.bmc-prose img {
    max-width: 100%; height: auto; display: block;
    margin: 1.8em auto; border-radius: var(--bmc-r-sm);
}
.bmc-prose figure { margin: 1.8em 0; }
.bmc-prose figcaption { text-align: center; font-size: .88rem; color: var(--bmc-muted); margin-top: .6em; }
.bmc-prose blockquote {
    margin: 1.6em 0; padding: 4px 0 4px 18px;
    border-left: 4px solid var(--bmc-green);
    color: var(--bmc-muted); font-style: italic;
}
/* Bảng trong bài: cuộn ngang thay vì làm vỡ trang */
.bmc-prose table {
    display: block; width: 100%; overflow-x: auto;
    border-collapse: collapse; margin: 1.6em 0; font-size: .95rem;
}
.bmc-prose th, .bmc-prose td { border: 1px solid var(--bmc-line); padding: 10px 12px; text-align: left; }
.bmc-prose th { background: var(--bmc-lime-tint); font-weight: 700; }
.bmc-prose iframe, .bmc-prose video { max-width: 100%; border-radius: var(--bmc-r-sm); }
.bmc-prose > :first-child { margin-top: 0; }
.bmc-prose > :last-child { margin-bottom: 0; }

@media (max-width: 576px) {
    .bmc-detail { padding: 24px 16px 48px; }
    .bmc-prose { font-size: 16px; }
}
/* Hàng CTA cuối trang chi tiết (việc làm): nút chính + quay lại, cùng một trục */
.bmc-detail__cta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--bmc-line);
}
.bmc-detail__cta .bmc-detail__back { margin-top: 0; }

/* .product-description đặt white-space: pre-line — áp lên nội dung HTML sẽ đẻ ra
   hàng loạt dòng trống thừa (xuống dòng trong source bị hiện thành khoảng trắng).
   Nội dung soạn thảo nay dùng .bmc-prose, không cần rule này nữa. */
.bmc-prose { white-space: normal; }

/* --- Trang chi tiết nằm TRONG cột (bài viết có sidebar): bỏ giới hạn 820px vì
       cột đã hẹp sẵn, chỉ giữ padding --- */
.bmc-detail--incol { max-width: none; padding: 0 0 8px; }

/* --- Bình luận: thay hộp #D5F0C0 / #e3fcfc lạc hệ bằng thẻ trắng đúng hệ màu --- */
.bmc-comments { margin-top: 44px; }
.bmc-comments__title {
    font-size: 1.28rem; font-weight: 700; color: var(--bmc-ink);
    margin: 0 0 18px; padding-bottom: 12px;
    border-bottom: 2px solid var(--bmc-green);
    display: inline-block;
}
.bmc-comments__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bmc-comment {
    background: var(--bmc-surface);
    border: 1px solid var(--bmc-line);
    border-left: 4px solid var(--bmc-green);
    border-radius: var(--bmc-r-sm);
    padding: 16px 18px;
}
.bmc-comment__head {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 6px;
}
.bmc-comment__author { font-weight: 700; color: var(--bmc-ink); }
.bmc-comment__date { font-size: .82rem; color: var(--bmc-muted); }
.bmc-comment__subject { margin: 0 0 4px; font-style: italic; color: var(--bmc-muted); }
.bmc-comment__body { margin: 0; color: var(--bmc-ink); line-height: 1.65; }

/* --- Cột phụ: danh sách "Bài viết cùng chủ đề" gọn (ảnh nhỏ + tên), thay vì
       nhồi nguyên thẻ .blog-item to đùng vào cột hẹp --- */
.bmc-side__posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.bmc-side__post {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--bmc-ink);
    padding: 6px; border-radius: var(--bmc-r-sm);
    transition: background .2s;
}
.bmc-side__post:hover { background: var(--bmc-lime-tint); color: var(--bmc-green-dark); }
.bmc-side__post img {
    width: 72px; height: 56px; flex: none;
    object-fit: cover; border-radius: 6px; background: #F3F6F1;
}
.bmc-side__post span {
    font-size: .92rem; font-weight: 600; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Django render sẵn widget form bình luận -> ép về đúng kiểu .bmc-form */
.bmc-form textarea { min-height: 130px; }

/* --- ĐỒNG NHẤT PHÔNG CHỮ TRONG NỘI DUNG SOẠN THẢO ---
   CKEditor gán style NỘI TUYẾN vào từng đoạn: font-family:"Times New Roman",serif,
   font-size:18px... (đo được 8 chỗ chỉ trong MỘT thông báo). Style nội tuyến thắng
   mọi rule CSS -> mỗi bài hiện một phông một cỡ khác nhau, lạc khỏi hệ thiết kế.
   Đó chính là gốc của "hiển thị thô, không đồng nhất".
   Ép về thang chữ chung. (Giữ nguyên MÀU và in đậm/nghiêng — đó là nhấn mạnh có ý đồ.) */
.bmc-prose [style*="font-family"],
.bmc-prose font {
    font-family: inherit !important;
}
.bmc-prose [style*="font-size"] {
    font-size: inherit !important;
    line-height: inherit !important;
}
/* Thẻ <font> và cỡ chữ cũ kiểu HTML4 cũng vô hiệu */
.bmc-prose font[size] { font-size: inherit !important; }
/* Người soạn nội dung có gõ emoji (vd 🗓 U+1F5D3). Roboto không chứa emoji -> thêm
   phông emoji dự phòng để mọi máy đều hiện được, không ra ô vuông ▯. */
.bmc-prose,
.bmc-prose [style*="font-family"],
.bmc-prose font {
    font-family: 'Roboto', sans-serif, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji' !important;
}

/* ============================================================================
   GIAI ĐOẠN 5 — GOM NÚT LIÊN HỆ NỔI VÀO MỘT NÚT XỔ LÊN
   Trước: Messenger + Zalo + Trợ lý ảo LUÔN hiện, xếp thành cột dài ~190px chạy
   dọc mép phải, che nội dung (và cướp cú chạm của nút "Gửi" ở form trên mobile).
   Sau: mặc định chỉ MỘT nút tròn. Bấm -> 3 nút xổ lên kèm nhãn; bấm lại / bấm ra
   ngoài / bấm Esc -> gom lại.
   ============================================================================ */
.bmc-fab {
    position: fixed;
    right: var(--fab-right);
    /* Nằm TRÊN nút "lên đầu trang" (nút đó ở dưới cùng, bottom = --fab-bottom).
       Nút "lên đầu trang" chỉ hiện khi cuộn quá 300px, nhưng nó position:fixed nên
       không chiếm chỗ -> nút gom đứng yên một chỗ, không nhảy vị trí khi cuộn. */
    bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap));
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--fab-gap);
    /* Khung chứa vẫn cao ~244px kể cả khi menu đã gom (menu ẩn bằng visibility nên
       vẫn chiếm chỗ). Không có dòng này thì cái khung VÔ HÌNH đó nuốt cú bấm:
       đo thực tế trên mobile, chạm mép phải nút "Gửi" của form lại trúng .bmc-fab.
       -> khung trong suốt với chuột, chỉ các nút thật mới nhận. */
    pointer-events: none;
}
.bmc-fab__toggle,
.bmc-fab.is-open .bmc-fab__menu { pointer-events: auto; }

/* --- Nút chính --- */
.bmc-fab__toggle {
    width: var(--fab-size);
    height: var(--fab-size);
    border: 0;
    border-radius: 50%;
    background: var(--bmc-green);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.bmc-fab__toggle:hover {
    background: var(--bmc-green-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}
.bmc-fab__toggle:focus-visible {
    outline: 3px solid var(--bmc-green-dark);
    outline-offset: 3px;
}

/* Hai icon chồng lên nhau, đổi mặt khi mở/đóng (không nhảy layout) */
.bmc-fab__ico-mo,
.bmc-fab__ico-dong {
    position: absolute;
    transition: opacity .2s ease, transform .25s ease;
}
.bmc-fab__ico-dong { opacity: 0; transform: rotate(-90deg); }
.bmc-fab.is-open .bmc-fab__ico-mo { opacity: 0; transform: rotate(90deg); }
.bmc-fab.is-open .bmc-fab__ico-dong { opacity: 1; transform: none; }

/* --- Menu 3 nút con --- */
.bmc-fab__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--fab-gap);
    /* Đóng: thu về, KHÔNG chiếm chỗ và không ăn cú bấm.
       Dùng visibility+pointer-events chứ không display:none để còn chạy animation. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(.9);
    transform-origin: bottom right;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.bmc-fab.is-open .bmc-fab__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

.bmc-fab__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    cursor: pointer;
    /* xổ lần lượt từ dưới lên cho mượt */
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}
.bmc-fab.is-open .bmc-fab__item { opacity: 1; transform: none; }
/* Nút gần nút chính nhất hiện trước */
.bmc-fab.is-open .bmc-fab__item:nth-child(3) { transition-delay: .02s; }
.bmc-fab.is-open .bmc-fab__item:nth-child(2) { transition-delay: .07s; }
.bmc-fab.is-open .bmc-fab__item:nth-child(1) { transition-delay: .12s; }

/* Nhãn nằm BÊN TRÁI nút (cụm ở mép phải màn hình nên không có chỗ bên phải) */
.bmc-fab__label {
    background: #fff;
    color: var(--bmc-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .16);
}

.bmc-fab__icon {
    width: var(--fab-size);
    height: var(--fab-size);
    border-radius: 50%;
    overflow: hidden;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: transform .2s ease;
}
.bmc-fab__item:hover .bmc-fab__icon { transform: translateY(-2px) scale(1.05); }
.bmc-fab__item:focus-visible .bmc-fab__icon {
    outline: 3px solid var(--bmc-green-dark);
    outline-offset: 3px;
}
.bmc-fab__icon img { width: 100%; height: 100%; display: block; }

/* Messenger: icon vốn đã tròn -> phủ kín. Zalo: bong bóng trên nền trắng -> nền
   trắng + contain có đệm. Trợ lý ảo: icon trắng trên nền xanh thương hiệu. */
.bmc-fab__icon--messenger img { object-fit: cover; }
.bmc-fab__icon--zalo { background: #fff; }
.bmc-fab__icon--zalo img { object-fit: contain; padding: 9px; }
.bmc-fab__icon--bot { background: var(--bmc-green); }
.bmc-fab__icon--bot img {
    object-fit: contain;
    padding: 11px;
    filter: brightness(0) invert(1);
}

/* Nút toggle gốc của chatbot.js bị ẩn: nay mở chatbot bằng nút "Trợ lý ảo" trong
   menu này. #chatbot-widget vẫn phải TỒN TẠI vì cửa sổ chat neo vào nó
   (.chatbot-window là absolute bên trong widget). */
.chatbot-toggle { display: none !important; }
#chatbot-widget {
    right: var(--fab-right) !important;
    bottom: calc(var(--fab-bottom) + var(--fab-size) + var(--fab-gap)) !important;
}

/* ---------------------------------------------------------------------------
   NÚT GOM "NHẢY" ĐỂ HÚT MẮT KHI ĐANG ĐÓNG
   Hai lớp: nút nảy lên xuống + một vòng sóng lan toả ra từ nút.
   Chỉ chạy khi menu ĐANG GOM — mở ra rồi thì thôi, khỏi rung trong lúc người ta
   đang định bấm vào Zalo/Messenger.
   --------------------------------------------------------------------------- */
@keyframes bmc-fab-nhay {
    /* Nảy dồn 2 nhịp rồi nghỉ: dễ lọt vào mắt hơn là nhún đều đều liên tục */
     0%, 60%, 100% { transform: translateY(0)     scale(1); }
    68%            { transform: translateY(-9px)  scale(1.06); }
    76%            { transform: translateY(0)     scale(.96); }
    84%            { transform: translateY(-5px)  scale(1.03); }
    92%            { transform: translateY(0)     scale(1); }
}
@keyframes bmc-fab-song {
    0%   { transform: scale(1);   opacity: .55; }
    70%  { transform: scale(1.9); opacity: 0; }
    100% { transform: scale(1.9); opacity: 0; }
}

.bmc-fab:not(.is-open) .bmc-fab__toggle {
    animation: bmc-fab-nhay 2.6s ease-in-out infinite;
}
/* Rê chuột vào thì thôi nhảy — người ta đã chú ý rồi, nhảy nữa chỉ khó bấm.
   Dùng `animation: none` chứ KHÔNG phải `animation-play-state: paused`: paused sẽ
   đóng băng nút ngay giữa cú nảy (lệch tới -9px) và chặn luôn hiệu ứng hover. */
.bmc-fab:not(.is-open) .bmc-fab__toggle:hover,
.bmc-fab:not(.is-open) .bmc-fab__toggle:focus-visible { animation: none; }
.bmc-fab:not(.is-open) .bmc-fab__toggle:hover::before,
.bmc-fab:not(.is-open) .bmc-fab__toggle:focus-visible::before { animation: none; opacity: 0; }

/* Vòng sóng: vẽ bằng ::before của chính nút, nằm dưới icon */
.bmc-fab__toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--bmc-green);
    z-index: -1;
}
.bmc-fab:not(.is-open) .bmc-fab__toggle::before {
    animation: bmc-fab-song 2.6s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .bmc-fab__menu,
    .bmc-fab__item,
    .bmc-fab__icon,
    .bmc-fab__toggle,
    .bmc-fab__ico-mo,
    .bmc-fab__ico-dong { transition: none; }
    /* Người dùng đã bảo "đừng chuyển động" -> không nhảy, không sóng. */
    .bmc-fab:not(.is-open) .bmc-fab__toggle,
    .bmc-fab:not(.is-open) .bmc-fab__toggle::before { animation: none; }
}

/* ============================================================================
   DẢI TAB NGÀNH HÀNG (Tất Cả / Thuốc Sâu Rầy / ... / Bình Bơm)
   Bệnh: CẢ SÁU chip đều mang viền xanh đậm giống hệt nhau (.border-primary, lại
   bị ép về --bmc-green ở mục 7), nền xám .bg-light, chữ .text-dark #212529 (ám
   xanh dương, lạc khỏi bảng màu BMC) -> mắt thấy sáu khung viền đậm chen nhau,
   không nhận ra cái nào đang chọn; bo pill kịch trần nên ra dãy "viên thuốc".
   Chữa (nguyên tắc chung của hệ thiết kế: chỉ MỘT thứ được nổi):
   - chip nghỉ  : nền trắng, viền nhạt --bmc-line, chữ --bmc-ink
   - chip rê chuột: viền + chữ xanh, nền lime-tint
   - chip đang chọn: nền xanh đặc, chữ trắng, bóng nhẹ -> nổi hẳn lên
   Đặt ở CUỐI file để thắng các rule cũ rải rác (mục 653/807/1038/1433/1659).
   ============================================================================ */
.tab-class ul.nav-pills {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 10px;
}
.tab-class ul.nav-pills .nav-item { padding: 0 !important; }

.destination .tab-class .nav-item a,
.ExploreTour .tab-class .nav-item a,
.gallery .tab-class .nav-item a,
.tab-class .nav-item a {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;          /* thắng .mx-3 của Bootstrap và margin 4px cũ */
    padding: 0 !important;         /* thắng .py-2 — chiều cao do min-height lo */
    min-height: 44px;              /* vùng chạm WCAG 2.5.5 */
    background: #FFFFFF !important;
    border: 1px solid var(--bmc-line) !important;
    border-radius: 999px;
    box-shadow: none;
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.destination .tab-class .nav-item a span,
.ExploreTour .tab-class .nav-item a span,
.gallery .tab-class .nav-item a span,
.tab-class .nav-item a span {
    width: auto !important;        /* HTML còn style="width:150px" nội tuyến */
    padding: 0 20px;
    white-space: nowrap;
    color: var(--bmc-ink) !important;
    font-size: .95rem;
    font-weight: 500;
    line-height: 1.2;
    transition: color .18s ease;
}

.destination .tab-class .nav-item a:hover,
.ExploreTour .tab-class .nav-item a:hover,
.gallery .tab-class .nav-item a:hover,
.tab-class .nav-item a:hover {
    background: var(--bmc-lime-tint) !important;
    border-color: var(--bmc-green) !important;
}
.tab-class .nav-item a:hover span { color: var(--bmc-green-dark) !important; }

.destination .tab-class .nav-item a.active,
.ExploreTour .tab-class .nav-item a.active,
.gallery .tab-class .nav-item a.active,
.tab-class .nav-item a.active {
    background: var(--bmc-green) !important;
    border-color: var(--bmc-green) !important;
    box-shadow: 0 2px 10px rgba(46, 125, 50, .28);
}
.destination .tab-class .nav-item a.active span,
.ExploreTour .tab-class .nav-item a.active span,
.gallery .tab-class .nav-item a.active span,
.tab-class .nav-item a.active span {
    color: #FFFFFF !important;
    font-weight: 600;
}

.tab-class .nav-item a:focus-visible {
    outline: 2px solid var(--bmc-green);
    outline-offset: 2px;
}

/* Hẹp chỗ: dải tab cuộn ngang (rule cũ ở mục 1445) — bù lại lề hai bên để chip
   đầu/cuối không dính mép, và bỏ canh giữa vì lúc này nó xếp từ trái. */
@media (max-width: 991.98px) {
    .tab-class ul.nav-pills {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 2px 4px 10px;
    }
    .tab-class .nav-item a span { padding: 0 16px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
    .tab-class .nav-item a,
    .tab-class .nav-item a span { transition: none; }
}

/* ============================================================================
   GIAI ĐOẠN 6 — KHỐI MỜI TƯ VẤN Ở TRANG CHI TIẾT SẢN PHẨM (.bmc-cta)
   Bệnh cũ: ô nhập mang class `bg-white border-0` -> TRẮNG TRÊN NỀN TRẮNG, không
   viền, không bóng: người dùng không nhìn ra chỗ nào gõ được. Thứ duy nhất nổi
   bật là cái nút chạy hết bề ngang, và nó lại mang câu hướng dẫn ("NHẬP SỐ ĐIỆN
   THOẠI NHẬN TƯ VẤN NGAY") chứ không phải tên một hành động -> bấm vào thì form
   rỗng vẫn gửi đi, không báo gì.
   Chữa: đóng thành một thẻ mời rõ ràng — nói TRƯỚC vì sao cần số, ô nhập có
   viền + icon, nút ngắn gọn nằm cạnh ô (xuống dòng ở mobile), có báo lỗi.
   ============================================================================ */
.bmc-cta {
    margin: 36px 0 8px;
    padding: 24px;
    background: var(--bmc-lime-tint);
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r);
}
.bmc-cta__title {
    margin: 0 0 6px;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    font-weight: 700;
    color: var(--bmc-green-dark);
}
.bmc-cta__desc {
    margin: 0 0 16px;
    color: var(--bmc-muted);
    font-size: .98rem;
    line-height: 1.6;
}

/* Ô nhập và nút đứng cùng một hàng trên desktop, xuống dòng ở mobile */
.bmc-cta__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.bmc-cta__field {
    flex: 1 1 260px;
    /* flex item mặc định min-width:auto -> ô nhập không co được, tràn ra ngoài thẻ */
    min-width: 0;
}
.bmc-cta__label {
    display: block;
    margin-bottom: 6px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--bmc-ink);
}

/* Khung ô nhập: viền rõ + icon điện thoại nằm trong, để nhìn phát biết là gõ vào đây */
.bmc-cta__input {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--bmc-line);
    border-radius: var(--bmc-r-sm);
    transition: border-color .18s ease, box-shadow .18s ease;
}
.bmc-cta__input:focus-within {
    border-color: var(--bmc-green);
    box-shadow: 0 0 0 3px rgba(46, 125, 50, .16);
}
.bmc-cta__input i {
    color: var(--bmc-green);
    flex: none;
}
.bmc-cta__input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: none;
    font-size: 1rem;
    color: var(--bmc-ink);
}
.bmc-cta__input input::placeholder { color: #9AA394; }

/* Trạng thái lỗi (class do JS gắn thẳng vào khung — không dùng :has() để trình
   duyệt cũ vẫn thấy viền đỏ) */
.bmc-cta__input.co-loi { border-color: #C62828; }
.bmc-cta__input.co-loi i { color: #C62828; }
.bmc-cta__err {
    margin: 6px 0 0;
    font-size: .86rem;
    font-weight: 600;
    color: #C62828;
}

.bmc-cta__btn {
    flex: none;
    /* thẳng hàng với ô nhập (ô có nhãn cao 6px + 20px phía trên) */
    margin-top: 26px;
    min-width: 170px;
    height: 50px;
    padding: 0 26px;
}

.bmc-cta__note {
    margin: 14px 0 0;
    font-size: .88rem;
    color: var(--bmc-muted);
}
.bmc-cta__note a {
    color: var(--bmc-green-dark);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.bmc-cta__note a:hover { text-decoration: underline; }

@media (max-width: 575.98px) {
    .bmc-cta { padding: 18px; }
    .bmc-cta__btn {
        /* xuống dòng riêng, rộng hết hàng cho dễ bấm bằng ngón tay */
        margin-top: 0;
        width: 100%;
    }
}

/* ============================================================================
   TRANG LIÊN HỆ — TRÊN MOBILE: FORM LÊN TRƯỚC, THÔNG TIN + BẢN ĐỒ XUỐNG SAU
   Desktop hai cột nên thứ tự trái/phải là đủ. Nhưng dưới 992px hai cột xếp
   chồng theo đúng thứ tự trong HTML -> người dùng điện thoại phải cuộn qua cả
   khối địa chỉ + bản đồ mới thấy form. Họ vào đây để GỬI liên hệ, nên đảo lại.
   Dùng `order` chứ không đổi HTML: desktop giữ nguyên bố cục trái/phải như cũ.
   ============================================================================ */
@media (max-width: 991.98px) {
    .contact .row {
        /* .row vốn đã là flex-wrap của Bootstrap; nói rõ để `order` chắc chắn ăn */
        flex-direction: row;
        flex-wrap: wrap;
    }
    .bmc-contact__col-form { order: 1; }
    .bmc-contact__col-info { order: 2; }
    /* bootstrap.min.css của dự án đã bị sửa `.row>*{width:50%}` -> ở màn hẹp hai
       cột có thể chẻ đôi thay vì chồng lên nhau. Ép về đủ hàng cho chắc. */
    .contact .row > .bmc-contact__col-form,
    .contact .row > .bmc-contact__col-info { width: 100%; }
}

/* ============================================================================
   THÔNG BÁO LỖI FORM (server-side): hiện khi việc kiểm tra phía server chặn dữ
   liệu sai. Đây là lối phản hồi cho người dùng KHÔNG bật JavaScript — người bật
   JS đã thấy lỗi ngay tại ô nhập trước khi form kịp gửi đi.
   ============================================================================ */
.bmc-form-messages { margin-bottom: 16px; }
.bmc-form-msg {
    padding: 12px 16px;
    border-radius: var(--bmc-r-sm);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
}
.bmc-form-msg + .bmc-form-msg { margin-top: 8px; }
.bmc-form-msg--error {
    color: #C62828;
    background: #FDECEA;
    border: 1px solid #F5C6CB;
}
.bmc-form-msg--success {
    color: var(--bmc-green-dark);
    background: var(--bmc-lime-tint);
    border: 1px solid var(--bmc-line);
}

/* ============================================================================
   [ĐÃ DUYỆT] Menu mobile gọn & chuyên nghiệp hơn.
   Hiện tại: mỗi mục 48px, chữ 16px in hoa, đệm 12px -> cụm cao 341px, chiếm ~45%
   màn hình. Đề xuất: hàng gọn 44px (vẫn đủ chuẩn chạm), có đường kẻ mảnh ngăn cách
   như một danh sách gọn, chữ 14.5px letter-spacing nhẹ cho thanh thoát, mục đang
   xem tô nền xanh nhạt. Nếu không duyệt, xoá nguyên khối này.
   ============================================================================ */
@media (max-width: 1199.98px) {
    .navbar-light .bmc-nav { margin-top: 6px; }
    .navbar-light .bmc-nav .nav-link {
        padding: 0 12px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 14.5px !important;
        letter-spacing: .3px;
        border-bottom: 1px solid var(--bmc-line);
        border-radius: 8px 8px 0 0;
    }
    .navbar-light .bmc-nav .nav-item:last-child .nav-link { border-bottom: 0; }
    .navbar-light .bmc-nav .nav-link.active {
        background: var(--bmc-lime-tint);
        color: var(--bmc-green-dark) !important;
        border-radius: 8px;
    }
    /* gạch chân trang trí không cần trong menu dọc */
    .navbar-light .bmc-nav .nav-link::after { display: none !important; }
}

/* ============================================================================
   [ĐÃ DUYỆT] Dòng thời gian: khoảng cách các mốc ĐỀU NHAU trên mobile.
   Đo được desktop đã đều (mọi mốc 170px); mobile lệch (154 vs 82px) vì mỗi mốc cao
   theo độ dài chữ. Cho mỗi mốc CHIỀU CAO CỐ ĐỊNH + căn giữa dọc -> mốc tròn cách
   đều nhau bất kể chữ dài ngắn. Chỉ đụng mobile, desktop giữ nguyên.
   ============================================================================ */
/* Selector đủ cụ thể (ul.bmc-timeline > li.bmc-tl-item) để THẮNG rule .timeline > li
   trong styles.css — file đó nạp SAU style.css nên rule thường bị nó đè. */
@media (max-width: 767.98px) {
    ul.bmc-timeline > li.bmc-tl-item {
        min-height: 160px;      /* >= mốc chữ dài nhất (154px) -> mọi mốc bằng nhau */
        margin-bottom: 0;       /* khoảng cách nằm trong min-height, không cộng dồn margin */
        display: flex;
        align-items: center;    /* chữ căn giữa theo chiều dọc của mốc */
    }
    ul.bmc-timeline > li.bmc-tl-item:last-child { min-height: auto; }
    ul.bmc-timeline > li.bmc-tl-item .timeline-image {
        top: 50%;
        margin-top: 0;
        transform: translateY(-50%);   /* mốc tròn căn giữa, thẳng hàng cách đều */
    }
    ul.bmc-timeline > li.bmc-tl-item .timeline-panel { float: none; width: 100%; }
}