:root{
  --star-gold: rgba(240, 205, 100, 0.75); 
  --base-color: #C98623;
}
@font-face{
  font-family: 'NewEddy';
  src: url('../fonts/DFVN-NewEddy.ttf');
}
@font-face {
  font-family: 'FZM';
  src: url('../fonts/FzManstein.ttf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: "SVN-Poppins-Bold";
    src: url("../fonts/SVN-Poppins-Bold.ttf");
}
@font-face {
    font-family: "SVN-Poppins-Regular";
    src: url("../fonts/SVN-Poppins-Regular.ttf");
}
@font-face {
    font-family: "SVN-Poppins-Medium";
    src: url("../fonts/SVN-Poppins-Medium.ttf");
}
body{
  margin: 0;
  padding: 0;
  font-family: 'SVN-Poppins-Regular';
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
p,
a,
span,
li,
label,
div {
    font-size: 16px;
    line-height: 1.6;
}

main{
  overflow: hidden;
}
.font-fzm{
    font-family: 'FZM' !important;
}
.font-NewEddy{
    font-family: 'NewEddy' !important;
}
.text-base{
    color: #C98623 !important;
}
.bg-flex-moon{
  background: #ffffff;
}
@media(max-width: 767px){
  .bg-flex-moon{
    background: #C98623;
  }
}
/* ============ TITLE AND NAME ============ */
.section-title{
  font-family:'FZM';
  font-size:30px;
  text-transform: capitalize;
  color:#6b3b0a;
  text-align:center;
}
.section-name{
  font-family:'Uvn', serif;
  text-transform:uppercase;
  position:relative;
  font-size:80px;
  background:linear-gradient(90deg,#d39727 0%,#e4b241 25%,#e3ae3c 50%,#d08d25 75%,#b57627 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shine 8s linear infinite;
    display: block;
  margin: 0 auto; /* căn giữa block */
  text-align: center;
}
.section-name-gradient {
  font-family: 'NewEddy', serif;
  font-size: 45px;
  position: relative;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 4px;
  background: linear-gradient(90deg, rgba(211, 151, 39, 1) 0%, rgba(228, 178, 65, 1) 25%, rgba(227, 174, 60, 1) 50%, rgba(208, 141, 37, 1) 75%, rgba(181, 118, 39, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-name-color {
  font-family: 'NewEddy', serif;
  font-size: 45px;
  position: relative;
  text-transform: capitalize;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 4px;
}
@media (max-width: 767px) {
  .section-name-color{
    font-size: 32px;
  }
}
/* ============ Back to top ============ */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: #C98623; /* Vàng đồng chủ đạo Moon’s Spa */
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(201, 134, 35, 0.4);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
}

/* Hover */
.back-to-top:hover {
  background-color: #E9B654; 
  color: #000;
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(233, 182, 84, 0.7);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  animation: pulse 2.4s infinite, float 3s ease-in-out infinite;
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(233, 182, 84, 0.5);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(233, 182, 84, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(233, 182, 84, 0);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.back-to-top i {
  vertical-align: middle;
}
@media (max-width: 767px) {
  .back-to-top {
    display: none !important;
  }
}
/* ============ Custom menu ============ */
.menu-main {
    position: relative;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: clamp(1.2rem, 5vw, 2.5rem);
    color: white;
    cursor: pointer;
    margin: 0;
}

.menu-main::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    bottom: -6%;
    left: 0;
    background: #C98623;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease-out;
}

.menu-main:hover::after {
    transform: scaleX(1);
}

/* ============ Marquee ============ */
.topbar-marquee {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.topbar-marquee .scroll-content {
  display: inline-block;
  padding-left: 100%;
  animation: scrollText 30s linear infinite;
}
.scroll-content a{
    color: #ffffff;
}
@keyframes scrollText {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.topbar-marquee:hover .scroll-content {
  animation-play-state: paused;
}

@keyframes scrollText {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
/* ============ Spinner ============ */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 99999;
 }

 #spinner.show {
     transition: opacity .8s 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: 600;
    transition: .5s;
}

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

.btn-primary-outline-0 {
    border: 0;
    color: var(--bs-white) !important;
}

.btn-light-outline-0 {
    border: 0;
    color: var(--bs-primary) !important;
}

.btn-primary-outline-0:hover {
    background: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}

.btn-light-outline-0:hover {
    background: var(--bs-secondary) !important;
    color: var(--bs-white) !important;
}

/*** Topbar Start ***/
.sticky-top {
    transition: 0.5s;
    background: var(--bs-white);
}

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

/*** Topbar End ***/

/* ============ Navbar ============ */
.navbar .navbar-nav .nav-link {
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 700;
    transition: .5s;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active,
.sticky-top.bg-white .navbar .navbar-nav .nav-link:hover,
.sticky-top.bg-white .navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary);
}

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


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

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

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

@media (min-width: 1200px) {
    .navbar .navbar-collapse .border-top {
        border-top: none !important;
    }
}

#searchModal .modal-content {
    background: rgba(250, 250, 250, .6);
}
/*** Navbar End ***/

.bg-breadcrumb {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(../img/appointment-background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ============ Service ============ */


/* ============ Appointment ============ */
.appointment {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../img/appointment-background.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.appointment .appointment-form {
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, .4));
    object-fit: cover;
    border-radius: 10px;
}

.appointment .appointment-time {
    background: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, .2));
    object-fit: cover;
    border-radius: 10px;
}
/*** Appointment End ***/



/* ============ Counter ============ */
.counter-section .counter-item .counter-content {
    position: relative;
    margin-bottom: 60px;
    background-image: linear-gradient(rgba(252, 152, 195, 0.3), rgba(255, 255, 255, 0.3), rgba(136, 76, 210, 0.3));
    border-radius: 10px;
    z-index: 9;
}

.counter-section .counter-item {
    text-align: center;
    background: rgba(255, 255, 255, .5) !important;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
    object-fit: cover;
    border-radius: 0 25% 0 25%;
}

.counter-section .counter-item .counter-content .svg-img {
    position: absolute;
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    margin-bottom: -50px; 
    margin-left: -45px; 
    transform: rotate(180deg);
}

.counter-section .counter-item .counter-quantity {
    width: 110px;
    height: 110px;
    border-radius: 55px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
}
/*** Counter End ***/
/* ============ Team ============ */
.team .team-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.team .team-item .team-text {
    background: var(--bs-primary);
}

.team .team-item .team-social {
    position: absolute;
    top: -180px; 
    left: 20px; 
    opacity: 0;
    transition: 0.5s;
}

.team .team-item:hover .team-social {
    top: 20px; 
    left: 20px;
    opacity: 1;
}

.team .team-item .team-img {
    position: relative;
    width: 100%;
}

.team .team-item .team-img::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.3);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
}

.team .team-item:hover .team-img::after {
    bottom: 0;
    height: 100%;
}

.team .team-item .team-text {
    transition: 0.5s;
}

.team .team-item:hover .team-text {
    background: var(--bs-secondary);
}
/*** Team End ***/


/* ============ Testimonial ============ */
.testimonial {
  background:
    linear-gradient(rgba(10, 10, 10, 0.65), rgba(10, 10, 10, 0.65)),
    url(../img/testimonial-bg.jpg) center center / cover no-repeat;
  background-attachment: fixed !important;
  position: relative;
  color: #fff;
  padding: 80px 0;
}

/* Mỗi feedback item */
.testimonial .testimonial-item {
  background: rgba(255, 249, 235, 0.08); /* vàng kem mờ */
  border-radius: 12px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  border: 1px solid rgba(233,182,84,0.3);
  transition: all 0.3s ease;
}
.testimonial .testimonial-item:hover {
  background: rgba(255, 249, 235, 0.15);
  box-shadow: 0 0 18px rgba(233,182,84,0.25);
  border-color: rgba(233,182,84,0.6);
}

/* Cột hình ảnh (trái) */
.testimonial .testimonial-item .col-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Avatar khách hàng */
.testimonial .testimonial-item img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 2px dashed var(--hotline-gold-1, #C98623);
  border-radius: 50%;
  margin: 0 auto 10px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.testimonial .testimonial-item:hover img {
  transform: scale(1.05);
  border-color: #E9B654;
}

/* Nội dung feedback */
.testimonial .testimonial-content {
  min-height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Ngôi sao */
.testimonial .testimonial-content i {
  color: #E9B654 !important; /* vàng sáng */
  font-size: 1rem;
}

/* Tên khách hàng */
.testimonial .testimonial-item h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
}

/* Vai trò */
.testimonial .testimonial-item p.m-0.text-white {
  color: #FFF9EB !important;
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Nội dung đánh giá */
.testimonial .testimonial-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #FFF9EB;
}

/* Biểu tượng ngoặc kép */
.testimonial .fa-quote-right {
  color: #E9B654 !important;
  opacity: 0.8;
}

/* Navigation carousel */
.testimonial .owl-carousel.testimonial-carousel {
  position: relative;
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav {
  position: absolute;
  top: -60px;
  right: 0;
  display: flex;
  font-size: 38px;
  color: #FFF9EB;
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev {
  margin-right: 35px;
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev,
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-next {
  transition: 0.4s;
}

.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-next:hover {
  color: #E9B654;
  transform: scale(1.1);
}

/* Responsive */
/* ===== TESTIMONIAL ≤ 767px ===== */
@media (max-width: 767.98px){

  /* Nền: tắt parallax fixed để tránh giật/lệch trên mobile */
  .testimonial{
    background-attachment: scroll !important;
    padding: 48px 0; /* 80 -> 48 */
  }

  /* Mỗi item xếp dọc, canh giữa */
  .testimonial .testimonial-item{
    min-height: unset;
    padding: 18px;              /* 30 -> 18 */
    text-align: center;
  }

  /* Grid bên trong item: ép full-width theo hàng dọc */
  .testimonial .testimonial-item .row{
    --bs-gutter-x: 0;
  }
  .testimonial .testimonial-item .col-4,
  .testimonial .testimonial-item .col-8{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
  }

  /* Cột ảnh */
  .testimonial .testimonial-item .col-4{
    margin-bottom: 14px;
  }

  /* Avatar: nhỏ gọn, không méo */
  .testimonial .testimonial-item img{
    width: 92px;                 /* 120 -> 92 */
    height: 92px;
    object-fit: cover;
    margin: 0 auto 8px;
    border-width: 1.5px;
    transform: none;             /* tắt phóng khi hover trên mobile */
  }
  .testimonial .testimonial-item:hover img{
    transform: none;
  }

  /* Tên + vai trò */
  .testimonial .testimonial-item h4{
    font-size: 1.05rem;          /* 1.2 -> 1.05 */
    margin-bottom: 4px;
  }
  .testimonial .testimonial-item p.m-0.text-white{
    font-size: 0.85rem;          /* 0.9 -> 0.85 */
    opacity: 0.9;
  }

  /* Nội dung đánh giá */
  .testimonial .testimonial-content{
    min-height: unset;
  }
  .testimonial .testimonial-content p{
    font-size: 0.98rem;          /* 1.05 -> 0.98 */
    line-height: 1.55;
    margin-bottom: 0;
  }

  /* Icon ngoặc kép: thu nhỏ & đặt dưới nav */
  .testimonial .fa-quote-right{
    opacity: .7;
    font-size: 1.1rem;           /* fa-2x -> ~1.1rem */
  }
  .testimonial .position-absolute[style*="right: 25px"]{
    right: 12px !important;
    top: 12px !important;
  }

  /* Owl nav: đưa xuống, thu nhỏ khoảng cách */
  .testimonial .owl-carousel.testimonial-carousel .owl-nav{
    position: static;
    margin-top: 10px;
    justify-content: center;
    gap: 18px;
    font-size: 28px;             /* 38 -> 28 */
  }
  .testimonial .owl-carousel.testimonial-carousel .owl-nav .owl-prev{
    margin-right: 0;
  }

  /* Dots nếu dùng: to hơn tí cho dễ bấm */
  .testimonial .owl-dots .owl-dot span{
    width: 10px; height: 10px;
  }

  /* Khoảng cách section title cho gọn */
  .testimonial .text-center.mx-auto.mb-5{
    margin-bottom: 1.25rem !important;
  }
}

/* Rất nhỏ: ≤ 360px */
@media (max-width: 360px){
  .testimonial{ padding: 40px 0; }
  .testimonial .testimonial-item{ padding: 14px; }
  .testimonial .testimonial-item img{ width: 84px; height: 84px; }
  .testimonial .testimonial-content p{ font-size: 0.95rem; }
}


/*** footer start ***/
.footer {
    background: var(--bs-dark);
}

.footer .footer-item a,
.footer .footer-item p {
    color: var(--bs-white);
    line-height: 40px;
    font-size: 17px;
    transition: 0.5s;
}

.footer .footer-item a:hover {
    letter-spacing: 2px;
    color: var(--bs-primary) !important;
}

/*** Footer End ***/

/*** copyright Start ***/
.copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bs-dark) !important;
}
/*** copyright end ***/

.gtranslate_wrapper{
    display: flex;
    gap: 12px;
}
.logo {
    width: 100%;
    max-width: 100px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94) 0s;
}

.logo-head {
    position: relative;
    margin: 0% 0;
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.25,0.46,0.45,0.94) 0s;
}

.bgstart-animate {
    position: relative;
    width: fit-content;
    margin: auto;
}

/* Hiệu ứng loé sáng chậm, nhẹ nhàng */
@keyframes starFlash {
    0%   { transform: scale(0.4); opacity: 0; filter: drop-shadow(0 0 0px var(--star-gold)); }
    30%  { transform: scale(1.6); opacity: 0.9; filter: drop-shadow(0 0 6px var(--star-gold)); }
    50%  { transform: scale(1.3); opacity: 1; filter: drop-shadow(0 0 12px rgba(240,205,100,0.6)); }
    80%  { transform: scale(0.9); opacity: 0.5; filter: drop-shadow(0 0 4px rgba(240,205,100,0.4)); }
    100% { transform: scale(0.5); opacity: 0; filter: drop-shadow(0 0 0px rgba(240,205,100,0)); }
}

/* 3 sao, tốc độ chậm hơn */
.start-animate,
.start-animate1,
.start-animate2 {
    z-index: 99999 !important;
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity, filter;
    animation-timing-function: ease-in-out;
    filter: drop-shadow(0 0 4px rgba(240,205,100,0.5));
}

.start-animate  { animation: starFlash 2.5s infinite; top: 0%; left: 15px; width: 50px; }
.start-animate1 { animation: starFlash 2.8s infinite .4s; bottom: 50%; width: 30px; }
.start-animate2 { animation: starFlash 3s   infinite .8s; bottom: 0%; left: 0; width: 40px; }


/* ============ Sliders ============ */
.hero-slide { position: relative; }
.hero-img {
  width: 540px; height: 100vh; object-fit: cover; display: block;
}
@media (max-width: 768px){
   .hero-img{
      height: 180px;
   }
}
@media (max-width: 420px){
   .hero-img{
      height: 180px;
   }
}
#heroOwl .owl-dots { position: absolute; width: 100%; bottom: 28px; display: flex; justify-content: center; gap: 10px; }
#heroOwl .owl-dot span {
  width: 12px; height: 12px; display: block; border-radius: 10px;
  background: var(--bs-white); border: 2px solid var(--bs-white); transition: .3s;
}
#heroOwl .owl-dot.active span {
  background: var(--bs-primary); border-color: var(--bs-primary);
  width: 28px; 
}

#heroOwl .owl-nav { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); pointer-events: none; }
#heroOwl .owl-nav button {
  pointer-events: all; position: absolute; background: rgba(255,255,255,.7) !important;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 0; transition: .3s; backdrop-filter: blur(3px);
}
#heroOwl .owl-nav button.owl-prev { left: 18px; }
#heroOwl .owl-nav button.owl-next { right: 18px; }
#heroOwl .owl-nav button:hover { background: var(--bs-primary) !important; color: var(--bs-white) !important; }

.owl-item .hero-caption, .owl-item .hero-img { transition: transform .8s ease, opacity .8s ease; }
#heroOwl .owl-item.active .hero-img { opacity: 1; transform: scale(1.0); }

@media (max-width: 767px) {
  #heroOwl .owl-dots {
    bottom: 9px;
  }  
  #heroOwl .owl-dots{
    gap: 4px;
  }
  #heroOwl .owl-dot span{
    height: 9px;
  }
  #heroOwl .owl-dot.active span{
    width: 21px;
  }
}


/* ============ About ============ */
.about-title, .section-title{
  font-family:'FZM';
  font-size:30px;
  text-transform: capitalize;
  color:#6b3b0a;
  text-align:center;
}
.about-name, .section-name{
  font-family:'Uvn', serif;
  text-transform:uppercase;
  position:relative;
  font-size:80px;
  background:linear-gradient(
    90deg,
    #b8791d 0%,   /* đậm hơn */
    #c89228 25%,  /* vàng đậm */
    #c08a24 50%,  /* giảm sáng */
    #a96e18 75%,  /* vàng nâu */
    #8b5716 100%  /* đậm nhất */
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:shine 8s linear infinite;
  display: block;
  margin: 0 auto;
  text-align: center;
}

@keyframes shine{
  0%{background-position:200% center;}
  100%{background-position:-200% center;}
}

/* ===== Nền About fill ===== */
.bg-fill{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.container-fluid.about > .container{ position:relative; z-index:1; }
.bg-fill > img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:.9;
  transform:translateY(var(--parallax,0px));
  will-change:transform;
  filter:saturate(1.02) contrast(1.02);
}
.bg-fill::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 0% 0%,rgba(79,209,179,.12),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 35%,rgba(255,255,255,0) 60%),
    linear-gradient(0deg,rgba(255,255,255,.25),rgba(255,255,255,.25));
  mix-blend-mode:normal;
  z-index:1;
}
.bg-fill::after{
  content:""; position:absolute; inset:-10% -10% -10% -10%;
  background-image:
    radial-gradient(rgba(255,255,255,.08) 1px,transparent 1.5px),
    radial-gradient(rgba(79,209,179,.05) 1px,transparent 1.5px);
  background-size:36px 36px,64px 64px;
  background-position:0 0,12px 18px;
  mix-blend-mode:screen;
  opacity:.4; z-index:1;
}

/* Nút play */
.btn.btn-play{
  position:absolute; inset:0; margin:auto;
  width:74px; height:74px;
  border-radius:50%; background:#fff;
  display:grid; place-items:center;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
  border:0; transition:transform .25s;
}
.btn.btn-play:hover{ transform:scale(1.05); }
.btn.btn-play span{
  position:relative; width:18px; height:18px; display:block;
}
.btn.btn-play span::before{
  content:""; position:absolute; left:0; top:0;
  border-left:18px solid var(--base-color,#4FD1B3);
  border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.btn.btn-play::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(79,209,179,.25);
  animation:ripple 1.8s infinite ease-out;
}
@keyframes ripple{
  0%{transform:scale(1); opacity:.9;}
  100%{transform:scale(1.4); opacity:0;}
}
.about-gallery img {
  height: 295px;
  object-fit: cover;
  overflow: hidden;
}
/* Responsive */
@media (max-width:991.98px){
  .about-name{font-size:58px;}
  .about-title{font-size:36px;}
}
/* Phần tử gốc để gắn after */
.after-about{ position: relative; isolation: isolate; z-index: 2; }
.after-about::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('../img/about/after-about.png');
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:contain;
  pointer-events:none;
  width: 800px; 
  height:100%;
  z-index:1;
  left: -100px;
}
.after-about .about-media, .about-content{
  position: relative;
  z-index: 2;          
}

.after-about .about-media .main-img{
  position: relative;     
  z-index: 3;             
}
/* ============== ABOUT ≤ 767px ============== */
@media (max-width: 767.98px){
  .about{
    padding-bottom: 0px !important;
  }
  .container-fluid.about { padding-top: 48px; padding-bottom: 48px; }
  .about .container { padding-left: 16px; padding-right: 16px; }
  .about .row { row-gap: 28px; }

  .about-title, .section-title{
    font-size: 22px;    
    text-align: center;
    margin-bottom: 6px;
  }
  .about-name, .section-name{
    font-size: 38px;         
    margin: 0 auto 10px auto;
    display: block;
    text-align: center;
    animation-duration: 10s;     
  }
  .about-content p { 
    font-size: 15px; 
    line-height: 1.7; 
    margin-bottom: 14px; 
    text-align: center;
  }
  .about-content .btn {
    padding: 10px 18px;
    font-size: 14px;
  }
  .after-about{
    margin: 0px;
  }
  .after-about .about-media { left: 0 !important; }
  .after-about .about-media .main-img{
    width: min(92%, 420px);
    max-height: 320px;
    object-fit: contain;
    margin-inline: auto;
  }

  .after-about::after{
    left: -24px;     
    width: 110vw;
    height: 100%;
    background-position: left bottom;
    opacity: .7;              
    z-index: 1;
  }
  .bg-fill > img{
    opacity: .85;
    transform: none;      
  }
  .bg-fill::after{ opacity: .25; }
  .about-content .fa-heart{ font-size: 22px; margin-right: 10px !important; }
  .about-content .d-flex.align-items-center span{ font-size: 14px; line-height: 1.6; }
  .about-gallery .item img{
    max-height: 220px;    
    object-fit: cover;
    width: 100%;
  }
  .about-content .mb-4{ margin-bottom: 14px !important; }
}

/* ============== OWL (nếu dùng) ============== */
/* @media (max-width: 767.98px){
  .about-gallery .owl-item { padding: 0 6px; }
} */

/* ============ Appointment ============ */
.counter-box{
background:#fff;
text-align:center;
padding:60px 25px 40px;
border-radius:20px;
position:relative;
transition:.3s;
box-shadow:0 8px 25px rgba(0,0,0,.05);
}
.counter-box:hover{transform:translateY(-5px);}
.counter-circle{
width:80px;height:80px;border-radius:50%;
background:linear-gradient(135deg,#e3c485,#d9a55e);
display:flex;align-items:center;justify-content:center;
position:absolute;top:-40px;left:50%;transform:translateX(-50%);
box-shadow:0 6px 15px rgba(217,165,94,.4);
}
.counter-circle i{color:#fff;font-size:32px;}
.counter-box h2{
font-size:42px;
font-weight:800;
color:#b67d33;
}
.counter-box p{font-weight:600;color:#6a4a1e;}


/* ============ News Section (Enhanced) ============ */
:root{
  --base-color: #b67d33;
  --card-radius: 12px;
  --shadow-sm: 0 6px 18px rgba(0,0,0,.06);
  --shadow-md: 0 12px 28px rgba(0,0,0,.08);
}

/* Nền sáng dịu + spacing thoáng */
.news { background: radial-gradient(1200px 600px at 0% 0%, #f7fbff 0%, #fafafa 60%); }
.news .section-title h6 {
  color: var(--base-color);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.news .section-title h2 { font-weight: 700; color: #222; margin-bottom: 20px; }
.news .btn-custom{
  background: var(--base-color); color:#fff; padding:10px 24px; border-radius: 30px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow: var(--shadow-sm);
}
.news .btn-custom:hover{
  background: color-mix(in oklab, var(--base-color) 88%, #000 12%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.new-wrapper{
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
  height: 100%;
}
.news-item{
  background:#fff; border-radius: var(--card-radius); overflow:hidden;
  box-shadow: var(--shadow-sm); height: 100%; display:flex; flex-direction:column;
  border:1px solid #f0f2f5;
}
.new-wrapper:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.news-box-image { position: relative; border-radius: var(--card-radius) var(--card-radius) 0 0; overflow: hidden; }
.news-box-image .img { aspect-ratio: 16/10; overflow:hidden; }
.news-box-image img{
  width:100%; height:100%; object-fit:cover; transition: transform .5s ease;
  display:block;
}
.news-item:hover .news-box-image img{ transform: scale(1.06); }

.new-wrapper:hover .news-item{
  border-color: color-mix(in oklab, var(--base-color) 14%, #fff 86%);
}
.news-content{
  background:#fff; padding: 18px 18px 20px 18px;
  display:flex; flex-direction:column; gap:10px; flex:1 1 auto;
}
.news-meta{
  font-size: .9rem; color:#777; display:flex; justify-content:space-between; align-items:center;
  margin-bottom: 2px;
}
.news-content h6{
  font-weight: 700; color:#222; font-size: 1.06rem; line-height:1.45; margin:0;
  transition: color .25s ease;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-item:hover .news-content h6{ color: var(--base-color); }
.news-content p{
  font-size: .95rem; color:#555; line-height: 1.7; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
  max-height: calc(1.7em * 2);
}
.news-item > a{
  display:block; color:inherit; text-decoration:none; height:100%;
}
.news-item > a:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--base-color) 45%, #fff 55%);
  outline-offset: 2px;
  border-radius: var(--card-radius);
}
@media (prefers-reduced-motion: reduce){
  .new-wrapper, .news-box-image img, .news .btn-custom{ transition: none !important; }
}


/* Social  */
.item-share>a,.share-box>a {
    display: inline-block;
    padding: 0 10px;
    border: 1px solid #ccc;
    margin-right: 5px;
    border-radius: 3px;
    line-height: 30px;
    font-size: 14px;
    color: #000
}

.share-box .share-box-social {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 50%;
    bottom: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #000;
    padding: 3px;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    border-radius: 3px;
    -webkit-transform: translate(-50%,0);
    transform: translate(-50%,0)
}

.quick-alo-phone,.quick-alo-phone.quick-alo-show {
    visibility: visible
}

.share-box .share-box-social li {
    background: #ea6e26;
    margin: 0 1px
}

.share-box .share-box-social li a {
    padding: 10px;
    color: #fff;
    font-size: 13px;
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1px
}

.share-box .share-box-social li a:hover {
    color: #001935
}

.share-box .share-box-social:before {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #0c4556 transparent transparent;
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    z-index: 99;
    margin-left: -3px
}

.share-box:hover .share-box-social {
    opacity: 1;
    visibility: visible;
    margin-bottom: 6px
}

.copy-phone,.show-phone {
    cursor: pointer;
    color: var(--primary)
}

.quick-alo-phone {
    position: fixed;
    background-color: transparent;
    width: 82px;
    height: 64px;
    cursor: pointer;
    z-index: 999!important;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    -webkit-transition: visibility .5s;
    -moz-transition: visibility .5s;
    -ms-transition: visibility .5s;
    -o-transition: visibility .5s;
    transition: visibility .5s;
    right: 150px
}

.quick-alo-phone.quick-alo-green .quick-alo-ph-circle {
    border-color: #2aa3d4;
    opacity: .5
}

.quick-alo-phone.quick-alo-viber .quick-alo-ph-circle {
    border-color: #7f4da0;
    opacity: .5
}

.quick-alo-ph-circle {
    width: 90px;
    height: 90px;
    top: 40px;
    left: 40px;
    position: absolute;
    background-color: transparent;
    border: 2px solid #1c8adb;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-animation: 1.2s ease-in-out infinite quick-alo-circle-anim;
    -moz-animation: 1.2s ease-in-out infinite quick-alo-circle-anim;
    -o-animation: 1.2s ease-in-out infinite quick-alo-circle-anim;
    animation: 1.2s ease-in-out infinite quick-alo-circle-anim;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    transform-origin: 50% 50%
}

.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {
    background-color: rgba(0,175,242,.5);
    background-color: #a6e3fa 9;
    opacity: 1!important
}

.quick-alo-phone.quick-alo-viber .quick-alo-ph-circle-fill {
    background-color: #7f4da070;
    opacity: 1!important
}

.quick-alo-ph-circle-fill {
    width: 60px;
    height: 60px;
    top: 55px;
    left: 55px;
    position: absolute;
    background-color: #1c8adb;
    border: 2px solid transparent;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-animation: 2.3s ease-in-out infinite quick-alo-circle-fill-anim;
    -moz-animation: 2.3s ease-in-out infinite quick-alo-circle-fill-anim;
    -o-animation: 2.3s ease-in-out infinite quick-alo-circle-fill-anim;
    animation: 2.3s ease-in-out infinite quick-alo-circle-fill-anim;
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    transform-origin: 50% 50%
}

.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-viber .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-viber.quick-alo-hover .quick-alo-ph-img-circle,.quick-alo-phone.quick-alo-viber:hover .quick-alo-ph-img-circle {
    background-color: #fff
}

.quick-alo-ph-img-circle {
    width: 40px;
    height: 40px;
    top: 65px;
    left: 65px;
    position: absolute;
    background: url("../images/message503.svg") center center no-repeat rgba(30,30,30,.1);
    border: 2px solid transparent;
    opacity: 1;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    -webkit-animation: 1s ease-in-out infinite quick-alo-circle-img-anim;
    -moz-animation: 1s ease-in-out infinite quick-alo-circle-img-anim;
    -o-animation: 1s ease-in-out infinite quick-alo-circle-img-anim;
    animation: 1s ease-in-out infinite quick-alo-circle-img-anim;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    background-size: 50%
}

.quick-alo-ph-img-circle.quick-alo-ph-img-circle-zalo {
    background-image: url('../img/icon/zalo.png');
    background-size: 100% 100%;
}

.quick-alo-ph-img-circle.quick-alo-ph-img-circle-phone {
    background-image: url('../img/icon/phone.webp');
    background-size: 100% 100%;
}

.quick-alo-ph-img-circle.quick-alo-ph-img-circle-email {
    background-image: url('../img/icon/mail.png');
    background-size: 100% 100%;
}

/* --- Bổ sung các icon mới --- */

.quick-alo-ph-img-circle.quick-alo-ph-img-circle-facebook {
    background-image: url('../img/icon/facebook.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.quick-alo-ph-img-circle.quick-alo-ph-img-circle-tiktok {
    background-image: url('../img/icon/tiktok.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.quick-alo-ph-img-circle.quick-alo-ph-img-circle-map {
    background-image: url('../img/icon/map.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


@keyframes quick-alo-circle-anim {
    0% {
        -webkit-transform: rotate(0) scale(.5) skew(1deg);
        -moz-transform: rotate(0) scale(.5) skew(1deg);
        -ms-transform: rotate(0) scale(.5) skew(1deg);
        -o-transform: rotate(0) scale(.5) skew(1deg);
        transform: rotate(0) scale(.5) skew(1deg);
        opacity: .1
    }

    30% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        -moz-transform: rotate(0) scale(.7) skew(1deg);
        -ms-transform: rotate(0) scale(.7) skew(1deg);
        -o-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .5
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -moz-transform: rotate(0) scale(1) skew(1deg);
        -ms-transform: rotate(0) scale(1) skew(1deg);
        -o-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .1
    }
}

@keyframes quick-alo-circle-fill-anim {
    0%,100% {
        -webkit-transform: rotate(0) scale(.7) skew(1deg);
        -moz-transform: rotate(0) scale(.7) skew(1deg);
        -ms-transform: rotate(0) scale(.7) skew(1deg);
        -o-transform: rotate(0) scale(.7) skew(1deg);
        transform: rotate(0) scale(.7) skew(1deg);
        opacity: .2
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -moz-transform: rotate(0) scale(1) skew(1deg);
        -ms-transform: rotate(0) scale(1) skew(1deg);
        -o-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg);
        opacity: .2
    }
}

@keyframes quick-alo-circle-img-anim {
    0%,100%,50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
        -moz-transform: rotate(0) scale(1) skew(1deg);
        -ms-transform: rotate(0) scale(1) skew(1deg);
        -o-transform: rotate(0) scale(1) skew(1deg);
        transform: rotate(0) scale(1) skew(1deg)
    }

    10%,30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
        -moz-transform: rotate(-25deg) scale(1) skew(1deg);
        -ms-transform: rotate(-25deg) scale(1) skew(1deg);
        -o-transform: rotate(-25deg) scale(1) skew(1deg);
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20%,40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
        -moz-transform: rotate(25deg) scale(1) skew(1deg);
        -ms-transform: rotate(25deg) scale(1) skew(1deg);
        -o-transform: rotate(25deg) scale(1) skew(1deg);
        transform: rotate(25deg) scale(1) skew(1deg)
    }
}
@media (max-width: 576px) {
    .quick-alo-phone,
    .share-box,
    .item-share {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}

/* PHONE  */
:root{
  --hotline-left: 20px;
  --hotline-right: auto;
  --hotline-bottom: 30px;
  --hotline-bg: #C98623;           
  --hotline-chip-bg: #FFC739;        
  --hotline-chip-color: #ffffff;    
}
#hotline{
  position: fixed;
  left: var(--hotline-left, 20px);
  right: var(--hotline-right, auto);
  bottom: var(--hotline-bottom, 30px);
  z-index: 999999;
}
.contact-group .icon{
  width: 48px; height: 48px;
  background: var(--hotline-bg);
  border-radius: 50%;
  position: relative; cursor: pointer;
}
.contact-group .icon span{
  width: 24px; height: 1px; background: #fff;
  position: absolute; left: 50%; transform: translateX(-50%);
  transition: all 240ms linear;
}
.contact-group .icon span:first-child{ top: 17px; }
.contact-group .icon span:nth-of-type(2){ top: 24px; }
.contact-group .icon span:nth-of-type(3){ top: 31px; }
.contact-group .icon.active span:first-child{ transform: rotate(45deg); top: 22px; left: 11px; }
.contact-group .icon.active span:nth-of-type(2){ transform: scale(0); }
.contact-group .icon.active span:nth-of-type(3){ transform: rotate(-45deg); top: 22px; left: 11px; }
.contact-group .icon:after{
  content:''; position:absolute; inset:0;
  background-color: inherit; border-radius: inherit;
  animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
  z-index: -1;
}
.contact-group .icon:before{
  content:''; position:absolute; width:60px; height:60px; top:-7px; left:-7px;
  border:1px solid rgba(243,113,33,.2);
  border-radius: inherit; background: transparent;
  animation: pulse-animation 1.2s cubic-bezier(0.24, 0, 0.38, 1) infinite .3s;
  z-index:-1;
}
.contact-group .button-action-group{
  position: absolute; right: -160px; bottom: 55px; min-width: 210px;
}
.contact-group .button-action-group:not(.active) a{ display: none; }
.contact-group .button-action-group a{
  display:block; opacity:0; padding:5px 10px;
  background: var(--hotline-chip-bg);
  margin-bottom: 15px; color: var(--hotline-chip-color);
  font-size: 18px; font-weight: 700; border-radius: 30px; letter-spacing: .3px;
  animation: fadeup 280ms ease forwards;
}
.contact-group .button-action-group a + a{ animation-delay: .08s; }
.contact-group .button-action-group a i{
  width: 48px; height: 48px; line-height: 48px; text-align:center;
  background: var(--hotline-bg); color:#fff;
  border-radius: 50%;
  margin: -10px 10px -10px -10px;
  box-shadow: 2px 0 7px -2px #00000078; position: relative;
}
.contact-group .button-action-group a i:after{
  content:''; position:absolute; width:40px; height:40px; left:3px; top:3px;
  border-radius: 50%;
  border-width:1px; border-style:solid;
  border-left-color:#f1f1f1; border-right-color:#f1f1f1;
  border-top-color:transparent; border-bottom-color:transparent;
  animation: rotate 1s linear infinite;
}
@keyframes pulse-animation{
  0%   { box-shadow: 0 0 0 0 rgba(233,182,84,.45); }
  70%  { box-shadow: 0 0 0 18px rgba(233,182,84,0); }
  100% { box-shadow: 0 0 0 0 rgba(233,182,84,0); }
}
@keyframes fadeup{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}
@keyframes rotate{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

@media (max-width: 767px) {
  #hotline{
    display: none !important;
  }
}
/* ============ Contact Pop-up ============ */
:root {
  --moon-gold: #C98623;
  --moon-gold-light: #E9B654;
  --moon-text: #2c2c2c;
}
#contactModal .modal-content {
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border: 2px solid var(--moon-gold-light);
}
.modal.fade .modal-dialog {
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: all .25s ease;
}
.modal.show .modal-dialog {
  transform: none;
  opacity: 1;
}
.popup-title {
  color: var(--moon-gold);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: .25rem;
}
.popup-subtitle {
  color: #666;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.popup-offer-box {
  border: 1.5px solid var(--moon-gold-light);
  background: rgba(255,255,255,0.9);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 1rem;
}
.popup-offer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.popup-badge {
  background: var(--moon-gold);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: .85rem;
}
.popup-countdown {
  font-weight: 600;
  color: var(--moon-gold);
}
.popup-offer-list {
  margin: 0;
  padding-left: 18px;
  color: #555;
  font-size: 0.9rem;
}
.btn-popup-submit {
  background: var(--moon-gold);
  border: none;
  color: #fff;
  transition: all .25s ease;
}
.btn-popup-submit:hover {
  background: var(--moon-gold-light);
  color: #000;
}
.popup-cover {
  position: relative;
  background: #000;
}
.popup-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease, filter .3s ease;
}
.popup-cover:hover .popup-cover-img {
  transform: scale(1.04);
  filter: brightness(1.05);
}
@media (max-width: 767.98px) {
  .popup-cover { min-height: 240px; }
}
.btn-close-custom {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--moon-gold);
  color: #fff;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  cursor: pointer;
  transition: all .25s ease;
}
.btn-close-custom:hover {
  background: var(--moon-gold-light);
  color: #000;
  transform: rotate(90deg);
}

/* ========== Services ========== */
:root {
  --moon-gold: #E9B654; 
  --moon-gold-dark: #C98623; 
  --moon-brown: #3B2F1E; 
}
.service-title {
  font-family: 'NewEddy', serif;
  font-size: 45px;
  position: relative;
  text-transform: capitalize;
  font-weight: 600;
  line-height: 1.7;
  letter-spacing: 4px;
  /* Thay đổi màu sắc gradient: Chọn các tông màu đậm, giàu sắc độ hơn */
  background: linear-gradient(
    90deg,
    #9A6413 0%,   /* Tối hơn, sâu hơn */
    #B37D1E 25%,  /* Tối hơn, sâu hơn */
    #A8721A 50%,  /* Tối hơn, sâu hơn */
    #915D15 75%,  /* Tối hơn, sâu hơn */
    #714412 100%  /* Tối hơn, sâu hơn */
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

@supports not (-webkit-background-clip: text){
  .service-title{
    color:#9A6413;
    background:none;
  }
}



.sv-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.sv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
}
.sv-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 16px;
  background: #C98623; 
  color: #ffffff;
  font-weight: 600;
  text-transform: capitalize;
  letter-spacing: 0.3px;
  font-size: 0.95rem;
  transition: all 0.4s ease;
}
.sv-item:hover .sv-thumb {
  transform: translateY(-5px);
  box-shadow:none;
}
.sv-item:hover img {
  transform: scale(1.08);
  filter: brightness(1.1);
}
.sv-item:hover .sv-caption {
  background: linear-gradient(
    90deg,
    #b8791d 0%,
    #c89228 30%,
    #e1b55d 70%,
    #a96e18 100%
  );
  color: #fff;
  filter: brightness(1.08);
}
/* ========== Hover Shine Effect ========== */
.hover-shine {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.hover-shine::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 100%
  );
  transform: skewX(-25deg);
  transition: all 1s ease;
  z-index: 2;
  pointer-events: none;
}
.hover-shine:hover::before {
  left: 125%;
}
.hover-shine img {
  transition: transform 0.8s ease;
  will-change: transform;
}
.hover-shine:hover img {
  transform: scale(1.1);
}
@media (max-width: 767px){
  .sv-caption {
    padding: 9px !important;
    font-size: 12px;
  }
}

/* ============ Contact ============ */
.et-contact-form{
  background: url('../img/background/bg-contact.png') no-repeat center;
  position: relative;
  padding: 0;
  background-attachment: fixed !important;
  background-size: cover !important;
  padding-top: 50px;
  padding-bottom: 50px;
}
.et-contact-form form {
  max-width: 900px;
  margin: 0 auto;
}
.et-contact-form .text-gold {
  color: var(--hotline-gold-1, #C98623);
}

/* Ô input / select / textarea */
.et-contact-form .form-floating-cus > .form-control,
.et-contact-form .form-floating-cus > .form-select,
.et-contact-form .form-floating-cus > textarea.form-control {
  background: #FFF9EB;              /* nền vàng kem */
  border: 1px solid #CA8724;        /* viền vàng đồng */
  border-radius: 5px;
  color: #000;
  font-size: 14px;
  height: 60px;
  box-shadow: none;
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}

/* Padding trong ô */
.et-contact-form .form-floating-cus > .form-control,
.et-contact-form .form-floating-cus > textarea.form-control {
  padding: 0.9rem 1rem;
}

/* Textarea */
.et-contact-form .form-floating-cus > textarea.form-control {
  height: 120px !important;
  min-height: 120px;
  resize: vertical;
  padding-top: 1.2rem;
}

/* Select */
.et-contact-form .form-floating-cus > .form-select {
  padding-top: 1.1rem;
  padding-bottom: .9rem;
}

/* Focus */
.et-contact-form .form-floating-cus > .form-control:focus,
.et-contact-form .form-floating-cus > .form-select:focus,
.et-contact-form .form-floating-cus > textarea.form-control:focus {
  border-color: var(--hotline-gold-1, #C98623);
  box-shadow: 0 0 0 .2rem rgba(201,134,35,.15);
  background: #FFF9EB;
}

/* Label */
.et-contact-form .form-floating-cus > label {
  color: #8a6a2a;
  padding: .9rem 1rem;
  pointer-events: none;
  transition: all .25s ease;
}

/* Ẩn placeholder */
.et-contact-form .form-floating-cus > .form-control::placeholder,
.et-contact-form .form-floating-cus > textarea.form-control::placeholder {
  color: transparent;
}

/* Nút vàng đồng */
.et-contact-form .btn-gold {
  background: linear-gradient(90deg, #C98623, #E9B654);
  color: #fff;
  border: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.et-contact-form .btn-gold:hover {
  background: linear-gradient(90deg, #E9B654, #C98623);
  box-shadow: 0 0 12px rgba(233,182,84,.45);
  transform: translateY(-1px);
}

@media (max-width: 767.98px) {
  .et-contact-form {
    padding: 0px;
  }
}
/* Mobile */
@media (max-width: 576px) {
  .et-contact-form .form-floating-cus > .form-control,
  .et-contact-form .form-floating-cus > .form-select {
    height: 52px;
    border-radius: 8px;
  }
}

/* ============ Achivements ============ */
.et-achievement {
  padding-top: 50px;
  background: url('../img/background/bg-access.webp') no-repeat center;
  background-size: cover;
  position: relative;
}

.et-achievement .text-gold {
  color: var(--hotline-gold-1, #C98623);
}

.et-achievement h2 {
  color: #222;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.achievement-item {
  cursor: pointer;
  transition: all 0.35s ease;
}

.achievement-item:hover {
  transform: translateY(-6px);
}
.achivement-content {
  border-radius: 14px;
  overflow: hidden;
}

/* Ảnh */
.achievement-img {
  width: 100%;
  height: 400px;
  overflow: hidden;
  border: 2px solid rgba(201,134,35,0.8);
  border-bottom: none; /* tinh tế: không viền dưới */
  border-radius: 14px 14px 0 0;
  background: #fffaf2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .4s ease;
}

.achievement-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
  border-radius: 12px 12px 0 0;
}

.achievement-item:hover .achievement-img img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

.achievement-item h5 {
  font-size: 18px;
  font-weight: 700; 
  color: #C98623; 
  background: #ffffff;
  padding: 14px 12px;
  margin: 0;
  border: 1px solid rgba(201,134,35,0.55); 
  border-top: none;
  border-radius: 0 0 14px 14px;
  transition: all 0.3s ease;
  line-height: 1.5;
  letter-spacing: 0.3px;
}


/* Hover: nổi sáng nhẹ, tinh tế */
.achievement-item:hover h5 {
  color: #C98623;
  background: #fff6e3;
  box-shadow: 0 4px 10px rgba(201,134,35,0.25);
  transform: translateY(-2px);
}


.achievement-marquee {
  width: 100%;
  position: relative;
  padding: 15px 0;
  overflow: hidden;
}


.achievement-marquee marquee {
  font-size: 60px; 
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px #C98623;
  text-stroke: 1px #C98623;
}
@media (max-width: 767px){
  .achievement-item{ margin-bottom: 14px; }
  .achievement-img{
    height: 220px;                      
    border-width: 1.5px;
    border-radius: 12px 12px 0 0;
    padding: 0;
  }
  .achievement-img img{
    border-radius: 10px 10px 0 0;
    transform: none;                   
    transition: transform .3s ease;
    object-position: center;
  }
  .achievement-item:hover .achievement-img img{
    transform: none;
    filter: none;
  }
  .achievement-item h5{
    font-size: 16px;                    
    line-height: 1.55;
    padding: 10px 12px;     
    border-radius: 0 0 12px 12px;
    letter-spacing: .2px;
    transform: none;
    box-shadow: none;
  }
  .achievement-item:hover h5{
    transform: none;
    box-shadow: none;
    background: #fff9eb;        
    color: #3a2b09;
  }
  .achievement-marquee{
    width: 100%;
    left: auto; right: auto;
    margin-left: 0; margin-right: 0;     
    padding: 10px 0;
    overflow: hidden;
  }
  .achievement-marquee marquee{
    font-size: 28px;                    
    -webkit-text-stroke-width: .8px;
    text-stroke-width: .8px;
    letter-spacing: 1px;               
    line-height: 1.2;
  }
}

/* Mobile */
@media (max-width: 576px) {
  .achievement-img {
    height: auto;
    max-height: 400px;
  }
  .achievement-item h5 {
    font-size: 15px;
  }
  .achievement-marquee marquee {
    font-size: 24px;
  }
}

/* =========================
   Moon's Spa - Flipster Section (with AOS)
   ========================= */
.wrap-system {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.bg-fill-system {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bg-fill-system img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) blur(6px);
  transform: scale(1.1);
}

/* Gradient phủ */
.bg-fill-system::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 235, 185, 0.95) 100%
  );
  opacity: 0.9;
}

/* Nội dung */
.wrap-content {
  position: relative;
  z-index: 2;
}

/* Tiêu đề */
.title-main .about-title {
  color: var(--hotline-gold-1, #A36F17);
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
}
.title-main .service-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #A36F17;
}

/* Flipster Box */
.box-system {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.pic-system {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.box-system img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  transition: transform .6s ease, filter .4s ease, box-shadow .6s ease;
  filter: brightness(0.75);
}
.flipster__item--current img {
  filter: brightness(1);
}
.flipster__item--current:hover .pic-system img {
  transform: scale(1.05);
  box-shadow: 0 -10px 25px -5px rgba(201,134,35,.6);
}

/* Text overlay */
.info-system {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  padding: 12px 10px;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(201, 134, 35, 0.9) 100%
  );
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: all .4s ease;
}
.flipster__item--current:hover .info-system {
  opacity: 1;
  transform: translateY(0);
}
.info-system h5 {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}

/* Reset Flipster */
#et-flipster ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#et-flipster li {
  cursor: pointer;
  transition: transform .3s ease;
}
.pic-system img {
  height: 300px;
  object-fit: cover;
}
@media(max-width: 767px) {
  .title-main .service-title{
    font-size: 22px;
  }
  .pic-system img{
    height: 175px;
  }
  .info-system h5{
    font-size: 14px;
  }
}
@media (max-width: 767px) {
  .section-title {
    margin: 0;
    padding-bottom: 10px;
    overflow: visible;
  }

  .service-title{
    font-size: 30px;
    line-height: 1.5;
    letter-spacing: 2px;
    padding-top: 0.14em;
    padding-right: 0.15em;

    overflow: visible;
    white-space: normal;
  }
}


/* ========== OUR PRODUCT ========== */
.our_product {
  background: #633A09;
  color: #fff;
  align-items: center;
}

/* Nội dung bên trái */
.our_product_content {
  padding: 40px;
  padding-left: 70px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Tiêu đề phụ (Moon's Spa) */
.our_product_content span.section-title {
  display: inline-block;
  color: #C98623;
  letter-spacing: 1px;
  margin-bottom: 10px;
}

/* Tiêu đề chính */
.our_product_content h2 {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(90deg, #FFDFA0 0%, #E9B654 50%, #FFCE72 100%);
  -webkit-background-clip: text;
  margin-bottom: 20px;
}

/* Mô tả */
.our_product_content p {
  font-size: 16px;
  line-height: 1.8;
  color: #ffffff;
  margin-bottom: 16px;
  text-align: justify
}

/* ================= Nút Xem thêm ================= */
.our_product_content a {
  position: relative;
  align-self: flex-start;
  display: inline-block;
  padding: 10px 28px;
  background-color: #C98623;
  color: #fff;
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease;
  animation: btnGlow 3.2s infinite ease-in-out; /* ✨ hiệu ứng mới mượt hơn */
}

/* Ánh sáng chạy qua */
.our_product_content a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255,255,255,0.25) 0%, transparent 80%);
  transform: skewX(-20deg);
  transition: left 0.8s ease;
}
.our_product_content a:hover::before {
  left: 130%;
}

/* Hover */
.our_product_content a:hover {
  background-color: #E9B654;
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(233,182,84,0.5);
}

/* 🌟 Animation mượt hơn — ánh sáng nhịp thở */
@keyframes btnGlow {
  0%, 100% {
    box-shadow: 0 0 0px rgba(233,182,84,0.0);
    filter: brightness(1);
  }
  50% {
    box-shadow: 0 0 22px rgba(233,182,84,0.45);
    filter: brightness(1.08);
  }
}


/* ================= Hình ảnh bên phải ================= */
.our_product_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* ========== Responsive ========== */
@media (max-width: 991.98px) {
  .our_product_content {
    padding: 40px 24px;
  }
  .our_product_content h2 {
    font-size: 36px;
  }
  .our_product_content p {
    font-size: 15px;
  }
}

@media (max-width: 767.98px) {
  .our_product {
    flex-direction: column;
  }

  .our_product_content {
    padding: 28px 18px 10px;
    align-items: stretch; /* reset flex-end cho mobile */
  }

  .our_product_content h2 {
    font-size: 26px;
    font-weight: 500;
  }

  .our_product_content p {
    font-size: 14px;
    line-height: 1.7;
  }

  .our_product_content a {
    align-self: flex-start;  /* 🔹 trên mobile nút về trái cho dễ bấm */
    font-size: 14px;
    padding: 8px 20px;
  }

  .our_product_img img {
    max-height: 320px;
  }
}
/* ============ SECTION NAME ============ */

/* ============ SECTION NAME ============ */


/* =========================================================
   NEWS MODULE – SINGLE + RELATED + SIDEBAR (Moon's Spa Theme)
========================================================= */
:where(.news, .single-post-area, .related-articles, .blog_right_sidebar){
  --news-text:#3D2F1D;          /* body text - nâu đậm */
  --news-heading:#9B6B2F;       /* tiêu đề - vàng nâu ánh kim */
  --news-accent:#E8C27E;        /* accent - vàng kem chủ đạo Moon's Spa */
  --news-surface:#FFFDF8;       /* nền thẻ - trắng ngà */
  --news-muted:#8C7A64;         /* chữ phụ - nâu nhạt */
  --news-border:1px solid rgba(155,107,47,.15);
  --news-shadow:0 8px 24px rgba(155,107,47,.15);
  --news-ring:0 0 0 3px rgba(232,194,126,.35);
  --news-soft:#FFF7E6;          /* nền hover dịu vàng nhạt */
}

/* Banner page */
.banner-page{
  position:relative; overflow:hidden; border-radius:16px; margin-bottom:18px;
  box-shadow: 0 10px 28px rgba(155,107,47,.15);
}
.banner-page .bg-cover img{ width:100%; height:360px; object-fit:cover; display:block; }
@media (max-width:768px){ .banner-page .bg-cover img{ height:240px; } }

/* Single Post Card */
.single-post-area .single-post{
  background: var(--news-surface);
  border: var(--news-border);
  border-radius:16px;
  box-shadow: var(--news-shadow);
}
.single-post-area .blog_single_details h2{
  color: var(--news-heading);
  font-weight: 800;
  line-height: 1.25;
}
.single-post-area .blog_single_details .small,
.single-post-area .blog_single_details .text-muted{ color: var(--news-muted)!important; }

.single-post-area .news-image{ background:#FFF7E6; border-radius:12px; overflow:hidden; }
.single-post-area .news-image img{ object-fit:cover; transition: transform .35s ease; }
.single-post-area .news-image:hover img{ transform: scale(1.03); }

/* Tags */
.single-post-area .badge{ 
  border:1px solid rgba(232,194,126,.55);
  background: linear-gradient(180deg, rgba(232,194,126,.18), rgba(232,194,126,.08));
  color:#7B4C16;
  font-weight:600;
  border-radius:999px;
}

/* Body content */
.single-post-area .excerpt{
  color: var(--news-text);
  font-size: 1.02rem;
  line-height: 1.75;
}
.single-post-area .excerpt img{
  max-width:100%; height:auto; border-radius:12px; margin:14px 0;
}
.single-post-area .excerpt h1,
.single-post-area .excerpt h2,
.single-post-area .excerpt h3{ color: var(--news-heading); font-weight:800; margin-top:1.25rem; }

/* Share buttons */
.single-post-area .btn.btn-outline-secondary{
  border-color: rgba(155,107,47,.25);
  color: var(--news-heading);
}
.single-post-area .btn.btn-outline-secondary:hover{
  background: var(--news-accent);
  border-color: var(--news-accent);
  color:#4A3310;
  box-shadow: var(--news-ring);
}

/* Related Articles */
.related-articles{
  margin-top: 8px;
  padding: 8px 36px;
}
.related-articles .section-title h3{ 
  color: var(--news-heading);
  font-weight: 800;
}

.related-articles__item.card{
  border: var(--news-border);
  border-radius:14px;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.related-articles__item.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--news-shadow);
  border-color: rgba(232,194,126,.55);
  background: var(--news-soft);
}
.related-articles__item .card-img-top{
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Date badge */
.related-articles__date{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:6px 10px; border-radius:999px;
  background: rgba(0,0,0,.55); color:#fff; font-size:.8rem; font-weight:600;
  backdrop-filter: blur(2px);
}

/* Title */
.related-articles__title{
  display:block;
  color: var(--news-heading);
  font-weight: 700;
  line-height: 1.35;
  text-decoration:none;
  transition: color .2s ease;
}
.related-articles__title:hover{ color: var(--news-accent); }

/* Nav buttons */
.related-articles__nav{
  top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(155,107,47,.15);
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  background:#fff;
  z-index:3;
}
.related-articles__nav i{ font-size:.9rem; }
.related-articles__nav:hover{
  background: var(--news-accent); border-color: var(--news-accent); color:#4A3310;
}
.related-articles__nav--prev{ left: 0; }
.related-articles__nav--next{ right: 0; }

/* Owl dots */
.related-articles .owl-dots .owl-dot span{
  background:#E5D7C0; width:8px; height:8px;
}
.related-articles .owl-dots .owl-dot.active span{ background: var(--news-accent); transform: scale(1.08); }

/* Sidebar */
.blog_right_sidebar .single_sidebar_widget{
  background: var(--news-surface);
  border: var(--news-border);
  border-radius:16px;
  padding:18px;
}
.blog_right_sidebar h3{
  color: var(--news-heading);
  font-weight:800;
  margin-bottom:14px;
}

.blog_right_sidebar .newslist_page{
  display:grid; grid-template-columns: 110px 1fr; gap:12px;
  padding:10px; border-radius:12px;
  transition: background .2s ease;
}
.blog_right_sidebar .newslist_page:hover{
  background: var(--news-soft);
}
.blog_right_sidebar .newslist_img .ratio{ background:#FFF9ED; }
.blog_right_sidebar .newslist_img img{ object-fit:cover; }

.blog_right_sidebar .newslist_title a{
  color: var(--news-heading);
  font-weight:700; line-height:1.35; text-decoration:none;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}
.blog_right_sidebar .newslist_title a:hover{ color: var(--news-accent); }

.blog_right_sidebar .newslist_desc{
  color: var(--news-muted); font-size:.92rem;
  display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden;
}

/* Responsive */
.single-post-area .stretched-link::after{ position:static; }
@media (max-width: 992px){
  .related-articles{ padding: 8px 28px; }
  .related-articles__nav{ width:36px; height:36px; }
  .blog_right_sidebar .newslist_page{ grid-template-columns: 100px 1fr; }
}
@media (max-width: 576px){
  .related-articles{ padding: 8px 20px; }
  .blog_right_sidebar .newslist_page{ grid-template-columns: 90px 1fr; gap:10px; }
}

/* Focus state */
:where(.news, .single-post-area, .related-articles, .blog_right_sidebar) a:focus,
:where(.news, .single-post-area, .related-articles, .blog_right_sidebar) .btn:focus{
  outline:none; box-shadow: var(--news-ring);
}


/* ============ Product Type ============ */
.product-type__item {
  padding: 0;
  position: relative;
}

/* CARD */
.product-type {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1; 
}

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

/* INFO */
.product-type__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 10px 5px;
  transition: all 0.3s ease;
}

.product-type__brand {
  display: block;
  font-size: 14px;
  opacity: 0.85;
}

.product-type__name {
  display: block;
  color: #FFDFA0;
  font-weight: 600;
  text-decoration: none;
}

.product-type:hover .product-type__info {
  background: rgba(0, 0, 0, 0.75);
}

/* ========= Responsive (Mobile) ========= */
@media (max-width: 767.98px) {

  .product-type__item {
    padding: 4px;
  }

  /* Mobile giữ vẫn hình vuông đẹp */
  .product-type {
    aspect-ratio: 1 / 1;
  }

  .product-type__info {
    padding: 6px 4px;
  }

  .product-type__brand {
    font-size: 11px;
  }

  .product-type__name {
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ===============================
    DROPDOWN MENU CUSTOM
================================*/

.navbar-nav .dropdown-menu {
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #f2f2f2;
    box-shadow: 0 8px 28px rgba(0,0,0,0.08);
}
.navbar-nav .dropdown-menu .dropdown-item {
    padding: 10px 16px;
    font-size: 15px;
    color: #374151;
    border-bottom: 1px solid #f1f1f1 !important;
    transition: all .2s ease;
}
.navbar-nav .dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
}
.navbar-nav .dropdown-menu .dropdown-item:hover {
    background: var(--base-color, #0d83fd);
    color: #fff;
}
.dropdown-icon {
    font-size: 12px;
    margin-left: 6px;
    transition: transform .25s ease, opacity .25s;
    opacity: .85;
}
.nav-item.show > a .dropdown-icon {
    transform: rotate(180deg);
    opacity: 1;
}