:root{
    --brown-900:#2A1B12;
    --brown-800:#003b2e;    /* logo background */
    --brown-700:#533729;
    --brown-600:#6B4A37;
    --brown-300:#B38D74;
    --brown-100:#F4ECE6;
    --gold-700:#B98E22;
    --gold-600:#C5A033;
    --gold-500:#D4AF37;     /* accent */
    --gold-300:#edbf89;
    --charcoal:#222222;
    --concrete-gray:#6E6E73;
    --white:#FFFFFF;
    --light-gray-bg:#F5F5F3;
    /* ===== Brand Roles ===== */
    --brand-primary:var(--brown-800);
    --brand-accent:var(--gold-500);
    /* Back-compat aliases */
    --earth-brown:var(--brand-primary);
    --gold:var(--brand-accent);
    --gold-hover:var(--gold-600);
    /* ===== Type & Layout ===== */
    --font-heading:"Manrope", sans-serif;
    --font-body:"Manrope", system-ui, sans-serif;
    --fs-h1:clamp(40px,6vw,64px);
    --fs-h2:40px; --fs-h3:28px; --fs-body:16px;
    --lh-tight:1.1; --lh-heading:1.2; --lh-body:1.6;
    --section-y:3rem; --section-y-mobile:3.5rem;
    /* ===== Elevation ===== */
    --shadow-1:0 6px 16px rgba(0,0,0,.08);
    --shadow-2:0 12px 24px rgba(0,0,0,.12);
    --shadow-gold:0 8px 25px rgba(212,175,55,.2);
    /* ===== Decorations ===== */
    --gold-gradient:linear-gradient(135deg,#F5E6A6 0%,#D4AF37 40%,#C0952B 70%,#F8E17A 100%);
    --bg-hero-overlay:linear-gradient(135deg, rgba(59,40,27,.78) 0%, rgba(34,34,34,.78) 100%);
  }
  /* ===== Base ===== */
  body{
      font-family: "Montserrat", sans-serif;
      color:#282728;
      line-height:1.6;
  }
 .SwiperThumbs-mainslide
 {
    width: 700px; 
    right:50px;
 }
 .SwiperThumbs-cat
 {
    width: 700px; 
    right:50px;
 }
  .site-header{
    background: #003b2e;
    color: #FFF6DF;
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
  }
  .site-header::before
  {
    content:""; 
    position:absolute; 
    top:100%; 
    left:0; 
    width:100%; 
    height:120px;
    z-index:10;
    background: linear-gradient(to bottom,  rgba(0,59,46,1) 0%,rgba(0,59,46,0.75) 18%,rgba(0,59,46,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  }
  .site-header::after
  {
     content: '';
     width: 742px;
     height: 576px;
     background-image: url('/public/assets/images/hoavan_header.png');
     position: absolute;
     right: 0;
     top: 0;
     z-index: 11;
  }
  .site-header .nav a{
    color: rgba(255,246,223,.92);
    font-weight:600;
  }
  .site-header .nav a:hover,
  .site-header .nav a[aria-current="page"]{ color:#fff; }
  .site-header .btn-primary{
    background: var(--brand-accent); border-color: var(--brand-accent);
    color: var(--brown-900);
  }
  .site-header .btn-primary:hover{
    background: var(--gold-hover); border-color: var(--gold-hover);
  }
  /* ===== Fix spacing when scrolling ===== */
  main{ padding-top:0 !important; display:flow-root; }
  main > *:first-child{ margin-top:0 !important; }
  [id]{ scroll-margin-top: calc(var(--header-h) + 12px); }
  /* ===== Buttons ===== */
  .btn-primary{
    background:var(--gold); color:var(--earth-brown);
    border:2px solid var(--gold); border-radius:16px;
    min-height:48px; padding:12px 24px; font-weight:600;
    transition:.25s;
  }
  .btn-primary:hover{background:var(--gold-hover);border-color:var(--gold-hover);transform:translateY(-2px);box-shadow:var(--shadow-gold);}
  .btn-secondary{
    background:transparent; color:var(--gold);
    border:2px solid var(--gold); border-radius:16px;
    min-height:48px; padding:12px 24px; font-weight:600;
    transition:.25s;
  }
  .btn-secondary:hover{background:var(--gold);color:var(--earth-brown);transform:translateY(-2px);box-shadow:var(--shadow-gold);}
  /* ===== Chips / tags ===== */
  .chip{border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:.25rem .75rem;font-weight:600;font-size:.85rem;background:transparent;}
  /* ===== Card ===== */
  .card{border-radius:20px;background:#fff;box-shadow:var(--shadow-1);transition:.25s ease;overflow:hidden;}
  .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);}
  .text-shadow{ text-shadow:0 2px 5px rgba(0,0,0,.4); }
  /* ===== Fade-in on scroll ===== */
  .fade-in{opacity:0;transform:translateY(24px);}
  .fade-in.appear{opacity:1;transform:none;transition:.8s ease;}
/* Text cạnh logo (hiển thị từ ≥640px) */
.default-title
{
    color: var(--gold-300);
    font-size: 40px;
    font-weight: 700;
}
.default-meta
{
    color: var(--gold-500);
}
.btn-main
{
    font-size: 20px;
    font-weight: 700;
    color: #004a39;
    border-radius: 5px;
    padding: 14px 20px;
    display: inline-block;
    border: none;
    background: linear-gradient(to bottom,  rgba(248,231,212,1) 0%,rgba(243,213,178,1) 50%,rgba(237,192,140,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.img-hover
{
    overflow: hidden;
    position: relative;
    display: block;
}
.item-hover:hover img
{
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}
.img-hover img:hover
{
    transform: scale(1.1);
    transition: all 0.3s ease-in-out;
}
.img-hover img
{
    width: 100%;
    display: block;
}
.position-relative
{
     position: relative !important;
}
.page-wrapper
{
    padding: 50px 0;
    background-color: #006e55;
    background-image: url("/public/assets/images/bg_page_wrapper.jpg");
    background-position: left center;
    background-repeat: no-repeat;
}
.page-name
{
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 35px;
    position: relative;
    line-height: 36px;
    color: #fff;
}
.page-name::before
{
     background-color: #edbf89;
     height: 3px;
     width: 60px;
     content: "";
     left: 50%;
     margin-left: -30px;
     top: 0;
     position: absolute;
     display: none;
}
.page-name-product
{
    font-size: 36px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    position: relative;
    padding-top: 10px;
}
.category-description-page
{
    margin-bottom: 20px;
}
.tocscroll {
    position: relative;
    background: #f8f9fa;
    border: 1px solid #eaecef;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    margin-top: 15px;
}
.hd-tabl-of-content {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 20px;
    cursor: pointer;
    color: #333;
    background-color: #d7d7d7;
    padding: 10px 15px;
    -webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.hd-tabl-of-content span{
    display: inline-block;
    padding-left: 5px;
}
.hd-tabl-of-content i {
    margin-right: 8px;
}
.content-toc {
    display: block;
    max-height: 300px;
    overflow-y: auto;
    padding: 10px 15px;
}
#tocList {
    margin: 0;
    padding: 0 0 0 0px;
    font-size: 14px;
    list-style-type: none;
}
#tocList li {
    margin: 5px 0;
    line-height: 1.4;
}
#tocList li a {
    color: #222;
    text-decoration: none;
    display: block;
    padding: 3px 0;
    transition: color 0.2s;
}
#tocList li a:hover {
    color: #0056b3;
    text-decoration: underline;
}
.toc-level-2 { margin-left: 0;  font-weight: 700;}
.toc-level-3 { margin-left: 10px !important; font-style: italic; }
.toc-level-3 a{
    color: #666 !important;
}
.toc-level-4 { margin-left: 30px !important; }
.toc-level-5 { margin-left: 45px !important; }
.toc-level-6 { margin-left: 60px !important; }
.btn-play
{
    position: absolute;
    width: 40px;
    height: 40px;
    margin-left: -20px;
    margin-top: -20px;
    left: 50%;
    top: 50%;
    z-index: 999;
    background-image: url(/public/assets/images/btn-play.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: block;
}
.text-center
{
    text-align: center !important;
}
/* Responsive variants */
@media (min-width: 576px) {
    .col-sm-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
}
@media (min-width: 768px) {
    .col-md-5 > * {
        flex: 0 0 auto;
        width: 20%;
    }
}
@media (min-width: 992px) {
    .width-50
    {
        width: 100%;
    }
}
@media (min-width: 1200px) {
}
.pos-relative
{
    position: relative !important;
}
a{
    text-decoration:none;	
    transition: all 0.15s ease-in-out;
    -webkit-perspective: 1000;
}
a:hover
{
    color:#d94070;
    text-decoration:none;
}
.top-header
{
    background-color: #343a40;
    color: white;
    padding: 12px 0;
}
.header
{
    background-color: #f8f9fa;
}
.logo
{
    padding: 10px 0;
}
.logo p
{
     margin: 0;
}
.logo img
{
    display: block;
    transition: transform 0.3s ease;
}
.btn-header
{
    background-color: #edbf89;
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 100px;
    text-decoration: none;
    font-size: 14px;
    margin-top: 10px;
    float: right;
    margin-left: 20px;
    margin-top: 24px;
}
.btn-header:hover
{
    background-color: #333;
    color: #fff;
    text-decoration: none;
}
.menu-top
{
    background-color: #343a40;
    color: white;
    padding: 0px 0;
    margin: 0;
    text-align: right;
}
.menu-top li
{
    display: inline-block;
    margin: 0 15px;
}
.menu-top li a
{
    color: #fff;
}
.menu-top li a:hover
{
    color: #edbf89;
}
.main-nav
{
    float: right;
    width:auto;
    position: relative;
    z-index: 999;
}
.main-nav .main-menu
{
    display:block;
    padding: 0;
    margin: 0;
}
.main-nav .main-menu li
{
    display: inline-block;
    margin: 0 10px;
}
.main-nav .main-menu li a
{
    text-decoration: none;
    color: var(--gold-300);
    font-size: 16px;
    line-height: 120px;
    font-weight: 400;
    display: block;
}
.main-nav .main-menu li a:hover
{
    color: #fff;
}
.main-nav .main-menu li ul{
    display: none;
    position: absolute;
    background: linear-gradient(135deg,  #edbf89 0%,#e4ccaf 36%,#e4c199 72%,#edbf89 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    border-radius: 0 0 6px 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 300px;
    padding:0
}
.main-nav .main-menu li ul li
{
    display: block;
    margin: 0;
    position: relative;
}
.main-nav .main-menu li ul li a
{
    color:#003b2e;
    font-size: 18px;
    line-height: 1.5;
    padding: 12px;
    display: block;
    border-bottom: 1px solid #e6d2bb;
}
.main-nav .main-menu li ul li a:hover
{
    color: #095443;
}
.main-nav .main-menu li ul li:last-child a
{
    border-bottom: none;
}
.main-nav .main-menu li ul li ul
{
    left: 100%;
    top:0
}
.main-nav .main-menu li ul li a.sf-with-ul
{
    position: relative;
}
.main-nav .main-menu li ul li a.sf-with-ul::before
{
    content: " ";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #e6d2bb;
    transform: translateY(-50%);
}
.chip-slide
{
    display: inline-block;
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
}
/** header style2 **/
.frm-search-heder
{
    position: relative;
    border:0;
    background-color: transparent;
    width: 100%;
}
.frm-search-heder input {
    width: 100%;
    padding:10px 10px;
    background-color: #fff;
    border:0;
    border:solid 1px #f1f2f2;
    background-color: #f1f2f2;
    -webkit-border-radius:100px;
    border-radius:100px;
  }
  .frm-search-heder .btn-submit-search {
    display: block;
    width: 40px;
    height: 46px;
    background-color: transparent;
    text-align: center;
    line-height: 44px;
    font-size: 16px;
    color: #5b5b5b;
    position: absolute;
    top: -1px;
    background-color: #f1f2f2;
    right: 0;
    -webkit-border-radius:0 100px 100px 0;
    border-radius:0 100px 100px 0;
  }
  .autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 1000;
    border-radius: 0 0 4px 4px;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}
.autocomplete-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.autocomplete-results li {
    border-bottom: 1px solid #eee;
}
.autocomplete-results li:last-child {
    border-bottom: none;
}
.autocomplete-results a {
    display: flex;
    align-items: center;
    padding: 10px;
    text-decoration: none;
    color: #333;
}
.autocomplete-results a:hover {
    background-color: #f5f5f5;
}
.autocomplete-results img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    object-fit: cover;
}
.autocomplete-results span {
    flex-grow: 1;
}
.top-header-style2
{
    background-color: #fff;
    border-bottom: solid 1px #eee;
    line-height: 40px;
}
.top-header-style2 .slogan
{
    padding: 0;
    border-left: none;
    color: #333;
}
.top-header-style2 .menu-top
{
    background-color: #fff;
}
.top-header-style2 .menu-top li a
{
    color: #333;
}
.top-header-style2 .menu-top li a:hover
{
    color: #edbf89;
}
.link-top-header-style2
{
    float: right;
    overflow: hidden;
    margin-left: 15px;
}
.icon-link-top-header-style2
{
    width: 44px;
    height: 44px;
    display: block;
    float: left;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    background-color: #edbf89;
    color: #fff;
    text-align: center;
    margin-right: 10px;
    font-size: 20px;
    line-height: 44px;
    text-align: center;
}
.link-top-header-style2 .link-top-header-style2-content
{
    float: left;
    padding-top: 5px;
}
.link-top-header-style2 span{
    display: block; 
    color: #999;
    font-style: italic;
    font-size: 12px;
    line-height: 14px;
}
.link-top-header-style2 a
{
    font-size: 16px;
    font-weight: 700;
    color: #edbf89;
}
.header-style2
{
}
.main-nav-style2
{
    float: none;
    background-color: #333;
}
.main-nav-style2 .main-menu
{
    display:block;
    padding: 0;
    margin: 0;
    width: auto;
    float: left;
}
.main-nav-style2 .cart-top
{
    margin-top: 16px !important;
    background-image: url(/public/assets/images/bg_cart_w.png);
}
.main-nav-style2 .main-menu li
{
    display: inline-block;
    margin: 0 15px;
}
.main-nav-style2 .main-menu li a
{
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    line-height:56px;
    text-transform: uppercase;
    font-weight: 700;
}
.main-nav-style2 .main-menu li a:hover
{
    color: #edbf89;
}
.main-nav-style2 .main-menu li ul{
    display: none;
    position: absolute;
    background-color: #fff;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 280px;
    padding:0
}
.main-nav-style2 .main-menu li ul li
{
    display: block;
    margin: 0;
    position: relative;
}
.main-nav-style2 .main-menu li ul li a
{
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 10px;
    display: block;
    font-family: 'Gilroy-Regular', sans-serif;
    text-transform: none;
    border-bottom: 1px solid #f1f1f1;
}
.main-nav-style2 .main-menu li ul li ul
{
    left: 100%;
    top:0
}
.main-nav-style2 .main-menu li ul li a.sf-with-ul
{
    position: relative;
}
.main-nav-style2 .main-menu li ul li a.sf-with-ul::before
{
    content: " ";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #333;
    transform: translateY(-50%);
}
.header-style3
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgb(0, 0, 0, 0.5);
    z-index: 999;
}
.formsearch-header3
{
}
.btn-header3
{
    float: right;
    color: #fff;
    margin-top: 32px;
    font-size: 20px;
    font-family: 'Gilroy-Regular', sans-serif;
    margin-left: 15px;
}
.btn-header3:hover
{
    color: #edbf89;
    text-decoration: none;
} 
.main-nav-style3
{
    float: none;
    background-color: #333;
}
.main-nav-style3 .main-menu
{
    display:block;
    padding: 0;
    margin: 0;
    width: auto;
    float: right;
}
.main-nav-style3 .cart-top
{
    margin-top: 16px !important;
    background-image: url(/public/assets/images/bg_cart_w.png);
}
.main-nav-style3 .main-menu li
{
    display: inline-block;
    margin: 0 15px;
}
.main-nav-style3 .main-menu li a
{
    text-decoration: none;
    color: #fff;
    font-size: 16px;
    line-height: 88px;
    text-transform: uppercase;
    font-family: 'Gilroy-Regular', sans-serif;
}
.main-nav-style3 .main-menu li a:hover
{
    color: #edbf89;
}
.main-nav-style3 .main-menu li ul{
    display: none;
    position: absolute;
    background-color: #fff;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    width: 280px;
    padding:0
}
.main-nav-style3 .main-menu li ul li
{
    display: block;
    margin: 0;
    position: relative;
}
.main-nav-style3 .main-menu li ul li a
{
    color: #333;
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 10px;
    display: block;
    font-family: 'Gilroy-Regular', sans-serif;
    text-transform: none;
    border-bottom: 1px solid #f1f1f1;
}
.main-nav-style3 .main-menu li ul li ul
{
    left: 100%;
    top:0
}
.main-nav-style3 .main-menu li ul li a.sf-with-ul
{
    position: relative;
}
.main-nav-style3 .main-menu li ul li a.sf-with-ul::before
{
    content: " ";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid #333;
    transform: translateY(-50%);
}
.cart-top {
    background-image: url(/public/assets/images/bg_cart.png);
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    float: right;
    position: relative;
    width: 30px;
    height: 28px;
    z-index: 99;
    margin-top: 8px;
    margin-left:10px;
    margin-top:33px;
 }
  .count-cart {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    width: 22px;
    height: 22px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    position: absolute;
    top: -10px;
    right: -10px;
    text-align: center;
    line-height: 22px;
    background-color: #edbf89;
  }
  .link-top-header
  {
  }
  .link-top-header a
  {
    color: #fff;
    font-size: 14px;
    padding: 0 10px;
    display: inline-block;
    line-height: 28px;
  }
  .link-top-header a:hover
  {
    color: #edbf89;
  }
  .link-top-header i
  {
    color: #edbf89;
    font-size: 16px;
    padding: 0 5px;
  }
  .slogan
  {
    font-size: 14px;
    color: #fff;
    padding: 0 10px;
    display: inline-block;
    line-height: 28px;
    font-style: italic;
    padding: left 20px;
    border-left: 1px solid #666;
  }
.title-home
{
    
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}
.title-home a{
    color: #fff;
}
.title-home a:hover{
    color: #edbf89;
    text-decoration: none;
}
.intro-home
{
    margin-bottom: 20px;
}
  /****gid cat image*****/
    .category-grid-img-container {
        padding: 60px 0;
    }
  .category-image-item
  {
    width: 100%;
    background-color: #f5f5f5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .category-image-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.category-grid-img-container .category-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.category-grid-img-container .category-content {
    padding: 15px;
}
.category-grid-img-container .category-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #333
}
.category-grid-img-container .category-title a{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.category-grid-img-container .category-title a:hover{
    color: #edbf89;
    text-decoration: none;
}
.category-grid-img-container .category-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}
 /****gid cat icon*****/
 .category-grid-icon-container
 {
    padding: 60px 0;
    background-color: #f5f5f5;
 }
.category-icon-item{
    text-align: center;
    border: solid 1px #eee;
    border-radius: 5px;
    padding: 15px 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.category-icon-item .category-icon
{
    width: 40%;
    margin: 0 auto;
    display: block;
}
.category-icon-item .category-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-icon-item .category-icon img
{
    width: 100%;
    height: auto;
    display: block;
}
.category-icon-item .category-title
{
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0;
    margin-top: 15px;
}
.category-icon-item .category-content{
    padding-bottom: 0;
}
.category-icon-item .category-title a{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.category-icon-item .category-title a:hover{
    color: #edbf89;
    text-decoration: none;
}
 /****Slide cat img*****/
.category-slider-container
{
    padding: 60px 0;
    background-color: #fff;
}
.category-swiper
{
    padding: 5px 5px !important;
}
.category-image-slide-item 
  {
    width: 100%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
    background-color: #fff;
  }
 .category-image-slide-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.category-image-slide-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.category-image-slide-item .category-content {
    padding: 15px;
}
.category-image-slide-item .category-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #333
}
.category-image-slide-item .category-title a{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.category-image-slide-item .category-title a:hover{
    color: #edbf89;
    text-decoration: none;
}
.category-image-slide-item .category-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}
.category-image-slide-item .category-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
  }
.swiper-pagination-cathome
{
    bottom: -10px !important;
}
.swiper-pagination-cathome .swiper-pagination-bullet
{
    background: #edbf89 !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 5px !important;  
}
.swiper-button-prev, .swiper-button-next
{
    color: var(--swiper-navigation-color, #313a36) !important;
}
.swiper-button-next-cathome
{
    right: -40px !important;
}
.swiper-button-prev-cathome
{
    left: -40px !important;
}
/***** Group cat ******/
.group-category-grid-container
{
    padding: 60px 0;
    background-color: #f5f5f5;
}
.group-category-grid-container .category-image-item
{
    width: 100%;
    background-color: #f5f5f5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.group-category-grid-container .category-image-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.group-category-grid-container .category-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.group-category-grid-container .category-content {
padding: 15px;
}
.group-category-grid-container .category-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #333
}
.group-category-grid-container .category-title a{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.group-category-grid-container .category-title a:hover{
    color: #edbf89;
    text-decoration: none;
}
.group-category-grid-container .category-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}
/***** Group cat slider ******/
.group-category-slider-container
{
    padding: 60px 0;
    background-color: #f5f5f5;
}
.group-category-slider-container .category-image-item
{
    width: 100%;
    background-color: #f5f5f5;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    transition: all 0.3s ease;
}
.group-category-slider-container .category-image-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.group-category-slider-container .category-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.group-category-slider-container .category-content {
   padding: 15px;
}
.group-category-slider-container .category-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #333
}
.group-category-slider-container .category-title a{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.group-category-slider-container .category-title a:hover{
    color: #edbf89;
    text-decoration: none;
}
.group-category-slider-container .category-intro {
    color: #666;
    font-size: 14px;
    margin-bottom: 10px;
}
.line-home
{
    padding: 60px 0;
}
/****info home*****/
.info-home
{
    position: relative;
}
.info-home img.bg-info-home{
    display: block;
    width: 100%;
    height: auto;
}
.title-info-home
{
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}
.title-info-home a{
    color: #fff;
}
.title-info-home a:hover{
    color: #edbf89;
    text-decoration: none;
}
.img-info-home
{
}
.img-info-home img
{
    display: block;
    width: 100%;
}
.info-home-content
{
     position: absolute;
     width: 100%;
     left: 0;
     top: 20%;
     z-index: 9;
}
.sub-cat-info
{
    background-color: rgba(0, 0, 0, 0.6);
    padding: 40px 0;
    width: 100%;
    left: 0;
    bottom: 0;
    z-index: 10;
    position: absolute;
}
.sub-cat-info .sub-cat-item
{
    color: #fff;
}
.sub-cat-info .sub-cat-item h3
{
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 4px;
}
.sub-cat-info .sub-cat-item  img
{
    display: block;
    width: 100%;
}
.img-info-home .btn-play-home
{
    background-image: url(/public/assets/images/icon-play.png);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -52px;
    margin-left: -52px;
    width: 105px;
    height: 105px;
    background-repeat: no-repeat;
    background-position: center;
}
.link-play-home
{
    background-image: url(/public/assets/images/bg_play.png);
    display: inline-block;
    text-transform: uppercase;
    color: #fff;
    font-size: 16px;
    background-repeat: no-repeat;
    background-position: center left;
    padding-left: 65px;
    line-height: 55px;
}
.info-home-content .title-home a
{
    color: #fff;
}
.read-more
{
    display: inline-block;
    padding: 10px 20px;
    background-color: #edbf89;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}
.title-home-with-subcategories
{
    border-bottom: solid 2px #eee;
    margin-bottom: 20px;
}
.title-home-with-subcategories h2
{
    font-size: 26px;
    font-weight: 700;
    margin-bottom:-2px;
    float: left;
    border-bottom: solid 2px #edbf89;
    padding-bottom: 10px;
}
.title-home-with-subcategories h2 a{
    color: #333;
}
.title-home-with-subcategories h2 a:hover{
    color: #edbf89;
    text-decoration: none;
}
.read-more:hover
{
    background-color: #333;
    color: #fff;
    text-decoration: none;
}
.subcategories-home
{
    float: right;
    padding: 0;
    margin: 0;
    padding-top: 8px;
}
.subcategories-home li
{
    display: inline-block;
    margin: 0 10px;
}
.subcategories-home li a
{
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
.subcategories-home li a:hover
{
    color: #edbf89;
    text-decoration: none;
}
.product-item
{
    transition: all 0.15s ease-in-out;
}
.product-item .product-name-item
{
     font-weight: 15px;
     font-weight: 600;
     color: #333;
     margin: 0;
     padding: 0;
}
.product-item .card-body
{
    padding-bottom: 0;
}
.product-rating {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
    color: #edbf89;
    font-size: 13px;
    font-weight: 400;
}
.rating-stars {
    color: #FFD700;
    display: flex;
    align-items: center;
}
.rating-stars i {
    margin-right: 2px;
}
.rating-count {
    color: #666;
    font-size: 0.85em;
    margin-left: 5px;
}
.text-muted i {
    color: #ccc;
}
.product-price
{
    color: #edbf89;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    margin-top: 5px;
}
.product-price .price-original
{
    font-size: 14px;
    color: #999 !important;
    text-decoration: line-through;
    margin-left: 10px;
    font-weight: 400;
}
.product-item .product-name-item
{
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
}
.product-item .product-name-item a
{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.product-item .product-name-item a:hover
{
    color: #edbf89;
    text-decoration: none;
}
.product-category-item
{
    font-size: 13px;
    margin-bottom: 5px;
}
.product-category-item a{
    color: #666;
    text-decoration: underline;
}
.product-category-item a:hover{
    color: #edbf89;
    text-decoration: none;
}
.img-product-item
{
    display: block;
    width: 100%;
    overflow: hidden;
}
.img-product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.img-product-item:hover img {
    transform: scale(1.05);
}
.product-item .product-code
{
    font-size: 13px;
    color: #666;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: 400;
}
/**** product grid border *****/
.product-grid-border
{
}
.product-grid-border .product-item
{
    background-color: #fff;
    overflow: hidden;
    border: solid 1px #eee;
}
.product-grid-border .product-item:hover
{
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border: solid 1px #edbf89;
}
.product-grid-border .product-item .card-body
{
    padding: 10px 10px;
}
.product-grid-border .product-item .btn
{
    display: block;
    width: 100%;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    border: 0;
    border-radius: 0;
}
.product-grid-border .product-item .btn-detail-item
{
    background-color: #edbf89;
}
.product-grid-border .product-item .btn-add-to-cart-item
{
    background-color:#333;
}
/**** product grid border none *****/
.product-grid-border-none
{
}
.product-grid-border-none .product-item
{
    background-color: #fff;
    overflow: hidden;
    border: none;
}
.product-grid-border-none .product-item .card-body
{
    padding: 10px 0px;
}
.product-grid-border-none .product-item .btn
{
    display: block;
    width: 100%;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    border: 0;
    border-radius: 0;
}
.product-grid-border-none .product-item .btn-detail-item
{
    background-color: #edbf89;
}
.product-grid-border-none .product-item .btn-add-to-cart-item
{
    background-color:#333;
}
/**** product grid border g-0*****/
.product-grid-border-g0
{
    border-top: solid 1px #eee;
    border-left: solid 1px #eee;
}
.product-grid-border-g0 .product-item
{
    background-color: #fff;
    overflow: hidden;
    margin-bottom: 0px;
    border-radius: 0 !important;
    border: none;
    border-bottom: solid 1px #eee;
    border-right: solid 1px #eee;
    position: relative;
}
.product-grid-border-g0 .card-img, .card-img-top
{
    border-radius: 0 !important;
}
.product-grid-border-g0 .btns-product-item
{
    visibility: hidden;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(50px);
    -moz-transform:translateY(50px);
    -ms-transform: translateY(50px);
    -o-transform: translateY(50px);
    -webkit-transition:all .5s ease 0s;
    transition:all .5s ease 0s;
}
.product-grid-border-g0 .product-item:hover .btns-product-item
{
    visibility: visible;
    -webkit-transform: translateY(0px);
    -moz-transform:translateY(00px);
    -ms-transform: translateY(00px);
    -o-transform: translateY(0px);
}
.product-grid-border-g0 .product-item .btn
{
    display: block;
    width: 100%;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    border: 0;
    border-radius: 0;
}
.product-grid-border-g0 .product-item .btn-detail-item
{
    background-color: #edbf89;
}
.product-grid-border-g0 .product-item .btn-add-to-cart-item
{
    background-color:#333;
}
.product-grid-border-g0 .product-item .product-code
{
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    margin-top: 8px;
    font-weight: 400;
}
/**** product grid border g-0*****/
.product-grid-border-g0 .poster-categoy-product {
    height: 100%;
    width: 100%;
}
.product-grid-border-g0 .poster-categoy-product-item {
    display: block;
    height: 100%;
    width: 100%;
}
.product-grid-border-g0 .poster-categoy-product-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-grid-border-g0-poster-style1
{
    border-left: none;
}
.product-slider-border-container
{
}
/* Swiper-specific styles */
.product-slider-border-container {
    position: relative;
    width: 100%;
    padding: 20px 0;
}
.product-swiper {
    width: 100%;
}
.swiper-slide {
    height: auto;
}
.btn-slide
{
    width: 64px;
    height: 64px;
    border: solid 3px #fff;
    border-radius: 50%;
    color: #fff !important;
    z-index: 999;
    text-align: center;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.3s ease;
}
.btn-slide:hover
{
    background-color: #edbf89;
    border: solid 3px #edbf89;
    color: #fff !important;
    text-decoration: none;
}
.btn-slide::before
{
    display: none;
}
.btn-slide::after
{
    display: none;
}
.btn-slide.swiper-button-next
{
    background-image: url(/public/assets/images/arrow_right.png);
    position: relative;
}
.w-140
{
    width: 160px;
}
.btn-slide.swiper-button-prev
{
   background-image: url(/public/assets/images/arrow_left.png);
   position: relative;
}
.swiper-button-next, .swiper-button-prev {
     color: #333;
}
.swiper-pagination-bullet-active {
    background: #333;
}
.product-slider-border-container .product-item .btn
{
    display: block;
    width: 100%;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    border: 0;
    border-radius: 0;
}
.product-slider-border-container .product-item .btn-detail-item
{
    background-color: #edbf89;
}
.product-slider-border-container .product-item .btn-add-to-cart-item
{
    background-color:#333;
}
.product-slider-border-none-container 
{
    position: relative;
}
.product-slider-border-none-container .product-item
{
    border: none;
}
.product-slider-border-none-container .product-item .card-body
{
    padding: 10px 0px;
}
.product-slider-border-none-container .product-item .btn
{
    display: block;
    width: 100%;
    color: #fff;
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    border: 0;
    border-radius: 0;
}
.product-slider-border-none-container .product-item .btn-detail-item
{
    background-color: #edbf89;
}
.product-slider-border-none-container .product-item .btn-add-to-cart-item
{
    background-color:#333;
}
.product-slider-border-none-container .img-product-item,.product-grid-border-none .img-product-item
{
    border: solid 1px #eee;
}
/****Tin tức****/
.news-home-grid .news-item .card-body .news-title-item
{
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
.news-home-grid-border-none .news-item .card-body .news-title-item a
{
    color: #222;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 700;
}
.news-home-grid .news-item .card-body .news-title-item a:hover
{
    color: #edbf89;
    text-decoration: none;
}
.news-home-grid .news-item .card-body .news-intro
{
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.news-home-grid .news-item .card-body .news-intro a
{
    color: #666;
    text-decoration: underline;
}
.news-category-item {
    font-size: 13px;
    margin-bottom: 5px;
  }
  .news-category-item a {
    color: #666;
    text-decoration:underline;
  }
  .news-category-item a:hover {
    color: #edbf89;
    text-decoration: none;
  }
  .line-home-news
  {
    background-color: #fff;
  }
  .title-with-subcategories
  {
    margin-bottom: 20px;
  }
  .title-with-subcategories .title-home
  {
    float: left;
    width: auto;
    margin: 0;
  }
  .news-home-slider
  {
    position: relative;
  }
  .news-item
  {
    border-radius: 0;
    border: none;
  }
  .news-item .news-title-item
  {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
  }
   .news-item .news-title-item a
    {
        color: #333;
        text-decoration: none;
        transition: all 0.3s ease;
        font-weight: 700;
    }
    .news-item .news-title-item a:hover
    {
        color: #edbf89;
        text-decoration: none;
    }
    .news-item .item-short-desc
    {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
    }
    /**slide-news-border-none***/
    .slide-news-border-none .news-item
    {
        border: none;
        background-color: transparent;
    }
    .slide-news-border-none .news-item .card-body
    {
        padding: 15px 0px;
    }
/**  news-home-grid-border **/
.news-home-grid-border
{
}
 /**  news-home-grid-border-none **/
.news-home-grid-border-none
{
}
.news-home-grid-border-none .news-item
{
    border: none;
    background-color: transparent;
}
.news-home-grid-border-none .news-item .card-body
{
    padding: 10px 0px;
}
/*  news style1 */
.news-home-style1 .featured-news-item
{
    background-color: transparent;
    border: none;
}
.news-home-style1 .featured-news-item .card-body
{
    padding: 10px 0px;
}
.news-home-style1 .news-title-item
{
    font-size: 24px;
    font-weight: 600;
    color: var(--gold-300);
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
.news-home-style1 .news-title-item a
{
    color: var(--gold-300);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.news-home-style1 .news-title-item a:hover
{
    color: #fff !important;
    text-decoration: none;
}
.news-home-style1 .news-list-item-title
{   
    color: var(--gold-300);
}
.news-home-style1 .news-list-item-title a
{
    color: var(--gold-300);
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.news-home-style1 .news-list-item-title a:hover
{
    color: #fff !important;
    text-decoration: none;
}
.news-home-style2 .featured-news-item
{
    background-color: transparent;
    border: none;
}
.news-home-style2 .featured-news-item .card-body
{
    padding: 10px 0px;
}
.news-home-style2 .featured-news-item .card-body .news-title-item
{
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
.news-home-style2 .featured-news-item .card-body .news-title-item a
{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.news-home-style2 .featured-news-item .card-body .news-title-item a:hover
{
    color: #edbf89;
    text-decoration: none;
}
.news-home-style2 .news-list-item-title
{
    margin-top: 15px;
}
.news-home-style3 .card-body
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 15px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}
.news-home-style3 .card-body .news-title-item
{
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    padding: 0;
    margin-bottom: 8px;
    margin-top: 5px;
}
.news-home-style3 .card-body .news-title-item a
{
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.news-home-style3 .card-body .news-title-item a:hover
{
    color: #edbf89;
    text-decoration: none;
}
.news-home-style3 .card-body .news-category-item
{
    background-color: #edbf89;
    text-decoration: none;
    padding: 2px 6px;
    line-height: 18px;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    text-decoration: none;
}
.news-home-style3 .card-body .news-category-item a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;  
}
.news-home-style3 .item-short-desc
{
    margin-top: 15px;
}
.news-home-style3 .news-list-content
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px 10px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}
.news-home-style3 .news-list-content .news-list-item-title
{
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    padding: 0;
    margin-top:2px;
}
.news-home-style3 .news-list-content .news-list-item-title a
{
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.news-home-style3 .news-list-content .news-list-item-title a:hover
{
    color: #edbf89;
    text-decoration: none;
}
.news-home-style3 .news-category-item
{
    background-color: #edbf89;
    text-decoration: none;
    padding: 2px 6px;
    line-height: 18px;
    color: #fff;
    display: inline-block;
    border-radius: 4px;
    text-decoration: none;
    text-decoration: none;
}
.news-home-style3 .news-category-item a{
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 300;  
}
.news-home-style3 .news-category-item a:hover{
    color: #edbf89;
    text-decoration: none;
}
/****review home*****/
.review-item
{
    background-color: #fff;
    border: solid 1px #eee;
    padding: 0px;
    margin-bottom: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.review-service-item
{
    color: #999;
    font-size: 13px;
}
.review-item .review-title-item
{
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
    margin-bottom: 10px;
}
.review-item .review-title-item a
{
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-weight: 500;
}
.review-item .review-title-item a:hover
{
    color: #edbf89;
    text-decoration: none;
}
.review-item .content-review-item
{
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.review-item-footer
{
    color: #edbf89;
}
/*review style 3*/
.review-home-slider-stytle3 .review-item
{
    background-color: #fff;
    border: solid 1px #eee;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.review-home-slider-stytle3 .review-item .img-review-item
{
    margin-right: 10px;
}
.review-home-slider-stytle3 .review-item .img-review-item img
{
    width: 100%;
    height: auto;
    border-radius: 50%;
    display: block;
}
.review-home-slider-stytle3 .review-item-rating
{
    margin-top: 10px;
    color: #edbf89;
}
.review-home-slider-stytle3 .card-body
{
    padding: 15px 0;
}
.review-home-slider-stytle3 .img-review-item .btn-play {
    transform: scale(0);
    transition: all 0.3s ease;
    opacity: 0;
}
.review-home-slider-stytle3 .img-review-item:hover .btn-play {
    transform: scale(1); /* Scale up to 100% on hover */
    opacity: 1;
}
/* style 4  */
.review-home-slider-stytle4 .review-item
{
    background-color: transparent;
    border: none;
    padding: 0px;
    margin-bottom: 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.0);
}
.review-home-slider-stytle4 .review-item .img-review-item
{
    margin-right: 10px;
}
.review-home-slider-stytle4 .review-item .card-body
{
    padding: 20px 15px;
    background-color: #fff;
    margin-bottom: 30px;
    position: relative;
    -webkit-border-radius: 6px;
border-radius: 6px;
}
.review-home-slider-stytle4 .review-item .card-body .arrow-review-item
{
    display: block !important;
    position: absolute !important;
    top: calc(100% + 1px) !important;
    right: 0px !important;
    bottom: 0px !important;
    width: 22px !important;
    height: 13px !important;
}
.review-home-slider-stytle4 .review-item .card-body .arrow-review-item path {
    fill: rgba(17, 17, 17, 0.05) !important;
}
.review-home-slider-stytle4 .img-review-item .btn-play {
    transform: scale(0);
    transition: all 0.3s ease;
    opacity: 0;
}
.review-home-slider-stytle4 .img-review-item:hover .btn-play {
    transform: scale(1); /* Scale up to 100% on hover */
    opacity: 1;
}
.review-home-slider-stytle4 .review-item-rating
{
    margin-top: 10px;
    color: #edbf89;
}
/*  review review-home-slider-stytle2 */
.review-home-slider-stytle2
{
    padding: 60px 0;
    background-color: #f5f5f5;
}
.review-home-slider-stytle2-page
{
    background-color:transparent;
}
.review-home-slider-stytle2-page .review-item .card-body
{
    background-color: #f5f5f5 !important;
}
.review-home-slider-stytle2 .review-item
{
    background-color: transparent;
    border: none;
    padding: 0px;
    margin-bottom: 0px;
    box-shadow:none;
    text-align: center;
    position: relative;
    padding-top: 0;
}
.review-home-slider-stytle2 .review-item .img-review-item
{
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.review-home-slider-stytle2 .review-item .card-body
{
    padding: 20px 15px;
    background-color: #fff;
    margin-bottom: 30px;
    position: relative;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    padding-top: 95px; /* Add padding to accommodate the overlapping image */
    background: #fff;
    border-radius: 8px;
    z-index: 1;
}
.review-home-slider-stytle2 .img-review-item {
    width: 160px;
    height: 160px;
    position: relative;
    margin: 0 auto;
    top: 0;
    z-index: 2;
    margin-bottom: -80px; /* Negative margin to pull up the card body */
}
/*  review review-home-slider-stytle5 */
.review-home-slider-stytle5 .review-item
{
    background-color: transparent;
    border: none;
    padding: 0px;
    margin-bottom: 0px;
    box-shadow:none;
    text-align: center;
    position: relative;
    padding-top: 0;
}
.review-home-slider-stytle5 .review-item .card-body
{
    background-color: #fff;
    margin-bottom: 30px;
    position: relative;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.review-home-slider-stytle5 .review-item .card-body:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #ffff;
	border-width: 20px;
	margin-left: -20px;
}
.review-home-slider-stytle5 .review-item .img-review-item
{
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 50%;
    margin: 0 auto;
    margin-top: 10px;
    border: dashed 3px #edbf89;
}
.review-home-slider-stytle5 .review-item-rating
{
    margin-bottom:5px;
    color: #edbf89;
}
/*  review review-home-slider-stytle6 */
.review-home-slider-stytle6
{
}
.review-home-slider-stytle6 .review-item
{
    background-color: transparent;
    border: none;
    padding: 0px;
    margin-bottom: 0px;
    box-shadow:none;
    position: relative;
    padding-top: 0;
}
.review-home-slider-stytle6 .review-item .card-body
{
    padding: 20px 15px;
    background-color: #fff;
    margin-bottom: 30px;
    position: relative;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    position: relative;
    padding-top: 20px;
    padding-top: 15px;
    background: #fff;
    border-radius: 8px;
    z-index: 1;
}
.review-home-slider-stytle6 .img-review-item {
    width: 120px;
    height: 120px;
    position: relative;
    margin:0;
    margin-left: 30px;
    top: 0;
    z-index: 2;
    margin-bottom: -80px; /* Negative margin to pull up the card body */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.review-home-slider-stytle6 .review-item-header
{
    padding-left: 150px;
    min-height: 80px;
}
.review-home-slider-stytle6 .review-item .review-title-item
{
    margin-bottom: 0px;
}
/*partner-home-slider*/
.partner-item
{
    padding: 0px;
    border-radius: 0px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 5px;
}
.partner-home-slider .partner-item img{
    display: block;
    width: 100%;
}
.partner-home-slider .swiper
{
    padding-bottom: 10px;
}
.media-item
{
    border: none;
    background-color: transparent;
}
.media-item .card-body
{
    padding: 0px;
}
.media-item .media-title-item
{
    font-size: 16px;
    font-weight: 700;
    padding: 0;
    margin: 0;
    padding-top: 10px;
    margin-bottom: 10px;
}
.media-item .media-title-item a{
    color:#333
}
.media-item .media-title-item a:hover{
    color: #edbf89;
}
.img-media-item
{
    position: relative;
}
.img-media-item .overlay-link
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}
.overlay-link svg {
    width: 100%;
    height: 100%;
    fill: #fff;
    transition: transform 0.3s;
}
.overlay-link:hover {
    background: #ff1744;
    transform: translate(-50%, -50%) scale(1.15) rotate(-8deg);
    box-shadow: 0 8px 32px rgba(255,23,68,0.2);
}
.overlay-link:hover svg {
    transform: scale(1.2) rotate(8deg);
    fill: #fff700;
}
.img-media-item {
    position: relative;
}
.img-media-item img
{
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    background: #000;
}
.img-media-item .overlay-link svg
{
    width: 100%;
    height: 100%;
    fill: #fff;
}
.media-home-slider2 .media-item .media-title-item
{
    padding: 10px;
}
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 8px;
    background: #000;
}
.breadcrumb-container
{
    padding: 12px 0;
    background-color: #21846d;
    border-bottom: solid 1px #21846d;
}
.breadcrumb-container-bg-white
{
    background-color: #fff;
}
.breadcrumb-container
{
    margin:0;
    color: #fff;
}
.breadcrumb-container a{
    color: #fff;
    text-decoration: none;
}
.breadcrumb-container a:hover{
    color: #edbf89;
    text-decoration: none;
}
#load-more-btn
{
    padding: 12px 20px;
    text-align: center;
    background-color: #edbf89;
    color: #fff;
    border: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
}
    .menu-tab
    {
        margin-bottom: 20px;
        padding: 0;
        margin-top: 10px;
        text-align: center;
    }
    .menu-tab > li{
        display: inline-block;
        position: relative;
    }
    .menu-tab > li > a{
        display: block;
        padding: 8px 20px;
        border: solid 1px #d7d7d7;
        margin-right: 5px;
        color: #333;
        font-weight: 600;
    }
    .menu-tab > li > a:hover{
        background-color: #edbf89;
        color: #fff;
        text-decoration: none;
        border: solid 1px #edbf89;
    }
    .menu-tab > li:hover > a{
        background-color: #edbf89;
        color: #fff;
        text-decoration: none;
        border: solid 1px #edbf89;
    }
    .menu-tab > li > a.active
    {
        background-color: #edbf89;
        color: #fff;
        text-decoration: none;
        border: solid 1px #edbf89;
    }
    .menu-tab > li > ul{
        padding: 0;
        margin: 0;
        transform: translate(0,20px);
        transition:all .2s ease-out;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        width: 220px;
    }
    .menu-tab > li > ul > li{
        display: block;
        padding: 8px 10px;
        padding-left: 20px;
        color: #333;
        font-weight: 500;
        border-bottom: solid 1px #f5f5f5;
        position: relative;
    }
    .menu-tab > li > ul > li::before
    {
        content: '';
        position: absolute;
        left: 10px;
        top: 50%;
        width: 5px;
        height: 5px;
        background-color: #edbf89;
        border-radius: 50%;
        transform: translateY(-50%);
    }
    .menu-tab > li > ul > li a{
        color: #333;
        text-decoration: none;
        display: block;
    }
    .menu-tab > li > ul > li a:hover{
        color: #edbf89;
        text-decoration: none;
    }
    .menu-tab > li:hover > ul{
        opacity: 1;
        visibility: visible;
        transform: translate(0,0px);
    }
    .menu-tab > li > ul > li:last-child{
        border-bottom: none;
    }
    .menu-tab > li > ul > li > ul{
        transform: translate(20px,0);
        transition:all .2s ease-out;
        opacity: 0;
        visibility: hidden;
        position: absolute;
        left: 100%;
        top: 0;
        padding: 0;
    }
    .menu-tab > li > ul > li:hover ul{
        opacity: 1;
        visibility: visible;
        transform: translate(0,0px);
        background-color: #fff;
        border-radius: 0px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        z-index: 9999;
        width: 220px;
    }
    .menu-tab > li > ul > li:hover ul li{
        display: block;
        padding: 8px 10px;
        color: #333;
        border-bottom: solid 1px #f5f5f5;
    }
    .menu-tab > li > ul > li:hover ul li a{
        color: #333;
        text-decoration: none;
    }
    .menu-tab > li > ul > li:hover ul li a:hover{
        color: #edbf89;
        text-decoration: none;
    }
    .box-filter {
        margin-bottom: 20px;
        margin-top: 15px;
    }
    .hd-box-filter {
        position: relative;
        background-color: #333;
        color: #fff;
        float: left;
        font-size: 16px;
        font-weight: 700;
        padding: 8px 20px;
        padding-right: 20px;
        text-transform: uppercase;
        margin-right: 10px;
        padding-right: 10px;
      }
      .group-filter {
        padding-left: 0;
        padding-right: 0;
        float: left;
        margin-right: 5px;
        position: relative;
        z-index: 999;
      }
      .title-group-filter {
        padding: 8px 10px;
          padding-bottom: 8px;
        padding-bottom: 7px;
        font-size: 16px;
        text-transform: none;
        border: solid 1px #f5f5f5;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        position: relative;
        z-index: 9;
        display: block;
      }
      .title-group-filter > a {
        display: inline-block;
        font-weight: 700;
        font-size: 15px;
        color: #050505;
        background-image: url(/public/assets/images/col1.png);
        background-repeat: no-repeat;
        background-position: right center;
        padding-right: 20px;
      }
      .title-group-filter ul {
        position: absolute;
        top: 125%;
        width: 400px;
        left: 0;
        margin: 0;
        padding: 15px;
        background-color: #f5f5f5;
        -webkit-border-radius: 0 0 4px 4px;
        border-radius: 0 0 4px 4px;
        z-index: 999;
        display: none;
        border-top: solid 3px #00b9f2;
      }
      .title-group-filter ul li {
        display: inline-block;
        margin-right: 10px;
      }
      .list-view-filter li.list-filter-actived {
        overflow: hidden;
        width: 100%;
        display: none;
        margin-right: 0;
      }
      .list-view-filter .item-filter a {
        display: block;
        background-image: url(/public/assets/images/un_check.png);
        background-repeat: no-repeat;
        background-position: left center;
        padding-left: 25px;
        color: #050505;
        font-size: 14px;
        padding-top: 5px;
        padding-bottom: 5px;
      }
      .list-view-filter .item-filter a.filter-act {
        background-image: url(/public/assets/images/checked.png);
        font-weight: 700;
      }
      .list-view-filter .item-filter a {
        color: #050505;
        font-size: 14px;
      }
      .title-group-filter ul li a {
        text-transform: none;
      }
      .title-group-filter .count-sub-active {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: rgba(176,0,32,.87);
        color: #fff;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        text-align: center;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        position: absolute;
        right: 25px;
        top: 10px;
        line-height: 20px;
      }
      .count-pro:hover {
        color: #00b9f2;
      }
      .count-pro {
        font-family: 'Gilroy-Regular', sans-serif;
        font-size: 13px;
        display: inline-block;
        font-weight: 700;
        text-transform: none;
        color: #fff;
        background-color: #fff;
        color: #222;
        width: 24px;
        height: 24px;
        line-height: 23px;
        text-align: center;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        margin-left: 5px;
        top: 0px;
        position: relative;
      }
      .title-group-filter.active {
        background-color: #f5f5f5;
        --webkit-border-radius: 4px 4px 0 0;
        border-radius: 4px 4px 0 0;
      }
      .title-group-filter.hassub-active > a {
        padding-right: 40px;
      }
      .title-group-filter.active > a {
        background-image: url(/public/assets/images/col2.png);
      }
      .list-filter-actived span {
        display: inline-block;
        padding: 6px 10px;
        background-color: #fff;
        margin-right: 5px;
        margin-bottom: 5px;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        font-size: 14px;
      }
      .list-filter-actived a {
        padding: 0;
      }
      .title-group-filter ul::after {
        bottom: 100%;
        left: 8%;
        border: solid transparent;
          border-top-width: medium;
          border-top-color: transparent;
          border-right-width: medium;
          border-right-color: transparent;
          border-bottom-width: medium;
          border-bottom-color: transparent;
          border-left-width: medium;
          border-left-color: transparent;
        content: "";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0,185,242,0);
          border-bottom-color: rgba(0, 185, 242, 0);
        border-bottom-color: #00b9f2;
        border-width: 10px;
        margin-left: -10px;
      }
      .column-section
      {
        margin-bottom: 20px;
      }
      .hd-column-section
      {
        font-size: 20px;
        text-transform: uppercase;
        font-weight: 700;
        padding-bottom: 10px;
        margin-bottom: 15px;
        border-bottom: solid 1px #f5f5f5;
      }
      .hd-column-section a{
        color: #333;
      }
      .hd-column-section a:hover
      {
        color: #edbf89;
      }
      .item-news-column
      {
        margin-bottom: 15px;
      }
      .item-news-column .img-news-column
      {
        margin-right: 10px;
      }
      .item-news-column .img-news-column img
      {
        display: block;
        width: 100%;
      }
      .title-news-column
      {
         font-weight: 700;
         line-height: 18px;
         margin-bottom: 5px;
         font-size: 16px;
      }
      .title-news-column a{
        color: #333;
      }
      .title-news-column a:hover
      {
        color: #edbf89;
      }
      .news-title
      {
        font-size: 36px;
        font-weight: 700;
        color: #333;
      }
      .category-description-page
      {
        margin-top: 15px;
        margin-bottom: 30px;
      }
      .news-meta span
      {
        display: inline-block;
        margin-right: 10px;
      }
      .news-meta span i{
        margin-right: 5px;
      }
.play-video-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background-color: rgba(0,0,0,0.6);
    border-radius: 50%;
    padding: 10px 12px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}
.play-video-button:hover {
    background-color: rgba(0,0,0,0.8);
}
.play-video-button i {
    font-size: 2.5em; /* Adjust icon size */
    display: block;
}
.sub-title
{
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.hd-form-comment
{
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #fff;
    background-color: #333;
    padding: 12px 15px;
    margin: 0;
}
.form-comment-container
{
    border: solid 1px #f5f5f5;
    padding: 15px;
    border-top: none;
}
.form-comment-container label
{
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}
.form-floating label
{
    font-family: 'Gilroy-Regular', sans-serif;
}
.form-comment-container .form-control
{
    padding: 10px;
    border-radius: 0;
}
.btn-comment
{
    background-color: #edbf89;
    color: #fff;
    border: none;
    font-size: 16px;
    padding: 10px 25px;
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
}
.title-box-srart-rate
{
	color:#3f3f3f;
	font-size:18px;
	margin-bottom:15px;
	text-align:right;
}
.line-box-start:before
{
	background-color:#F6A9A9;
	position:absolute;
	top:50%;
	margin-top:-1px;
	left:0;
	width:100%;
}
.box-start-line .start-line
{
	background-image:url(/images/icon/star.png);
	background-position:0 0;
	background-size:100%;
	position:relative;
	height:20px;
	background-color:#fff;
	float:left;
}
.box-start-line .start-line-5
{
	width:100px;
}
.box-start-line .start-line-4
{
	width:80px;
	background-size:125%;
}
.box-start-line .start-line-3
{
	width:60px;
	background-size:165%;
}
.box-start-line .start-line-2
{
	width:40px;
	background-size:248%;
}
.box-start-line .start-line-1
{
	width:20px;
	background-size:490%;
}
.count-rate
{
	font-size: 40px;
    color:#fd9727;
    line-height: 40px;
	text-align:center;
}
.iconcom-star {
	vertical-align: initial;
	display:inline-block;
    width: 32px;
    height: 32px;
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAABulJREFUeAHtW22IVFUYPu+ZYXe1rdytzE2x2IL9Si3sw7R00TJRwYKUjKC29rMgSuxfSFBBf8o+iN1hzUAIarEfoSUKqX2R/RA03Z3RIiIyU3R2CT92Z3fO23OuzjLNzp2558zcOys1IPfe975fz3Pe895zz15JlOiX7K5/g4jbdXgmGQl1RF8pRSpUiqDc3fCSEurt9NhSyA3UFd2cLgviPHACuK+pks8mT7LgynSAJOgcXReqoXX959Llfp9LvwNM8H82uT4TvNZxZIPJJybo+ywInAAAbXPDxCxc77nZFCoPlADuaZrHQtztljQz36V13O77IQ+UACWSeUfYi04xiQisCXLffVM4Hv8TZT4tFwAiMUTV1TfRuh8u5tIr1r3gKiA+tDYfeA3K0YFusQDm8xMYASxU3vJPJWuim7KxPQYyBTgyp16pRNQkSSnLGqjjSMzExkY3kApQPOp59FMgbGxStiZH3ysAK78yjo+dwNy+3igxEmeoOjwTK8OEiZ2prv8VcJYfMQWvQTg2cfWoKSBTfd8JKKShFWLrlQhfpwBvnVPLicQvGE2rOFgTMJWV3UbPHPnVKyBTPV8rQI2MPmsLXgPRtiox2moKykTfNwJ4X3MYI9hikkw2XZTO09pXtnvFkPlGgDh2ehVebmoKTdLxcfzU6kL9uNn7RkAxGxiz91WkG1A3uefmxB/WXS1YVgslq9DSqgUnq0QSR0FVipRzhDMcuQqtSx/1q29RCIZfJYgOwecggMSZKI4dlDicxxF/UJ+LEDsyocrjQoYHqePgBTfQ6XKHAO6uv0VIXosos+GsipgdQJeAAhBAYiPDt3mYnlCxzgFsBKSBIJDDIIdAnCYL11Lw74IrtlPX4RPEvY0P8FhyN0ZrSrGCXwl+nD1IEsslwL/1XwOvB0jvQQL3Zj1Hb78SRsyXHJnnSswTo9dUXxIpmVOKSZJig9MwSpZEaQITUYLCoY2S2mNfkwgvw6rtTGlSCT4qwMeJxcPU1r/XeQzqFJwXl5HETjSGhuBTCi4iwP+Mql+NgT+uo44vVPQbF1VMWYhK+Cq4dIKNBPDfoOwXpMD/iwB9QS2HhqiuZgUaY2+wqQUQjWgbVYceotZ+vTga/41PgXHJ5ROO1L3MSryJKTFeJZk6V8I1KpoBchN1Hns9W76uBGhljjRgO4s/xr+p2Ywnuwzgh4lDT1HXQJ9brjkJ0EbcWz+fk2JHMV5t3ZLwQw5gpyks11Bb9EAu/3nLm9piBylUdg/YPJzL0WS6h2bXj7X+vfnA65zzEqCVqO2nP7BFfT+c7tTXk/kH8Huo8tqF1BX7zUuengjQjvSXG9T5+BpB8l0vjkuiQ7KH6masoid//Ntr/Lw9IJsj7ml4Djs+72HTMpTtftAygFAk5Eabb4ysCNAA8SHDCuaxT/GYvCZowOnxUPLnAWI9dcZ2pMu9nlsToANwpH65UrzbazA/9GQotJLaB3bZ+vbcA7IGIJ6VVR6kUCVnFBKuIAKUoiWFBC+GLfYxmwvxUxABeKUsOQGF5mBNgN5Jxr7azYWwXwxbnQNHmmbb+rImAEuoko/+OGhWzePnhifWBKhJUP4prIXkYk0A/ngyaSqASFnnYkUA986dxULUpkag1EesSG/l7nkzbfKwIkCMjVgzbpOkJxtpl5MVAYpK//zPJMW2D1gRgPXzpKsA2/WA8bsAf9Q0Qw2PncwcAZtrvMjsgx36KTfb2GfayIpwDbX0/5Upz3VtXgEj9h03lQh2l4aklG2yM7aUOqJL9bmWpe5bH4d5samtMQGKCyMAo76dysP4DDa6RSeLa9bnjkzQZ6YA0vUVJY2npvFHD0h4CUo2Pa6nc4zwCRKh56lz4PNsBpdL9zHuaVzDIvkBQhg/1rBlZ0yAUQXw1jtvAPjGbADcZACODzOwVVU5rdENfLqt1tG6jo22NfpxI0fmG32Sa0SAGLtoNMcAPkYUXhzqjHYZ7dNhT8+xga324ZUDVA0oO2+UoxEBSnl7/GGajCLp12h27R3U0f+dVwCZetpW+3B8XfKZqTLhWgnRPEGYQ2DUA/DMXJSvJjEPD5CUrbJ9oF+IYzlCe7tFK3eNQHMTb2noE6OiF6+/C3JZ6hxz3c+8Z1QBMMbXY9l/AH5OEr2ArfNF2KMD+OL+qDV6VPt2YiBWDu/+9QCM/v5sgVHyX+AxhiYXe5/oVVShPz/t24khQ03oDV9mi4Icv88md5MZrQR529zpfGFkD5qN83/7APwUSXqR2qOfuAXwU8499evxVHoHoKfrOE7T5YoH9fd/XuMaEaCdct/akIgf1fOsXJTf+C217B/2GswPPTz2pqLzL8MOVULwVXvxhahuwP//vDLwD24ZMzJkloX5AAAAAElFTkSuQmCC');
        background-size: auto;
    background-size: 32px 32px;
}
.info-rate
{
	padding-left:20px;
}
.info-comment
{
	font-size:16px;
	text-align:center;
	margin-top:5px;
}
.box-info-commnent
{
    padding: 20px;
    border: solid 1px #f5f5f5;
    background-color: #f5f5f5;
}
.avatar-comment
{
    float: left;
    margin-right: 10px;
}
.avatar-comment img{
    width:50px;
    height:50px;
    object-fit:cover;
}
#comment-list
{
    border-radius: 0;
    border-top: none !important;
}
#comment-list .comment-name
{
    font-size: 16px;
    font-weight: 700;
}
#comment-list .comment-date
{
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}   
#comment-list .comment-content
{
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}
#comment-list .list-group-item{
    padding: 10px 15px;
}
.reply-link
{
    font-size: 12px;
    color: #fff;
    background-color: #edbf89;
    display: inline-block;
    padding: 3px 15px;
    border-radius: 100px;
    text-decoration: none;
}
.comment-images img
{
    width:50px;height:50px;object-fit:cover;border-radius:4px;border:1px solid #ddd;
}
#comment-list .comment-header
{
    padding: 0px 0px;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}
.list-group-replies
{
    position: relative;
    margin-top: 10px !important;
}
.list-group-replies:after {
	bottom: 100%;
	left: 5%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(228, 231, 234, 0);
	border-bottom-color: #e4e7ea;
	border-width: 10px;
	margin-left: -10px;
}
.list-group-replies .list-group-item
{
    padding: 10px 15px;
    background-color: #f5f5f5;
    border-radius: 0px;
    position: relative;
}
#load-more-comments
{
    margin-top: 10px !important;
    background-color: #edbf89;
    color: #fff;
    border: none;
    font-size: 16px;
    padding: 10px 25px;
    border-radius: 0;
    margin: auto;
    font-weight: 700;
}
.line-box-start {
    background: #f2f2f2;
    border-radius: 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    height: 22px;
    position: relative;
    margin-bottom:10px;
    margin-right: 80px;
    background-color: #f2f2f2;
}
.start-line {
    background: #000;
    height: 100%;
    border-radius: 4px 0 0 4px;
    transition: width 0.4s;
}
.lbl-start-line {
    min-width: 48px;
    text-align: right;
    font-size: 12px;
    margin-left: 8px;
    color: #fff;
    position: absolute;
    right: -80px;
    width: 80px;
    text-align: center;
    background-color: #edbf89;
}
.lbl-start-line:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #edbf89;
	border-width: 5px;
	margin-top: -5px;
}
.rating-filter-line.active {
    border: 0px solid #edbf89;
    box-shadow: 0 0px 4px #edbf89;
}
.rating-filter-line .filter-x {
    color: #edbf89;
    font-size: 18px;
    vertical-align: middle;
}
.rating-filter-line.active .lbl-start-line
{
    background-color: #333;
}
.rating-filter-line.active .lbl-start-line:after {
    border-right-color: #333;
}
.rating-filter-line.active .lbl-start-line .filter-x{
    position: absolute;
    width: 16px;
    height: 16px;
    top: -8px;
    right: -8px;
    color: #fff;
    line-height: 15px;
    text-align: center;
    border-radius: 50%;
    background-color: #edbf89;
}
.mes-warning i
{
    color: #edbf89;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    margin-bottom: 10px;
}
.page-wrapper-feedback
{
  background-size: cover;
  background-position: center;
}
.frm-feedback
{
    border-radius: 15px;
    padding: 30px;
    background-color: #fff;
}
.btn-feedback
{
    background-color: #edbf89;
    color: #fff;
    border: none;
    font-size: 16px;
    padding: 12px 20px;
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
}
.icon-feedback
{
    background-color: rgba(255, 255, 255, 0.5);
    padding: 10px;
    border-radius: 10px;
    color: #fff;
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 15px;
    font-size: 26px;
    text-align: center;
    line-height: 30px;
}
.info-feedback-item
{
    overflow: hidden;
}
.info-feedback-item .lbl-info-feedback
{
    color: #616161;
    text-transform: uppercase;
    font-size: 14px;
}
.info-register-item .icon-feedback
{
    background-color: #006e55;
    color: #fff;
}
.lbl-info-feedback
{
    font-weight: 600;
    color: #d7d7d7;
    margin-bottom: 0px;
}
.content-info-feedback
{
    font-weight: 400;
    color: #fff;
    font-size: 18px;
}
.content-feedback
{
    font-size: 16px;
    color: #fff;
    margin-bottom: 20px;
    border-bottom: solid 1px #f5f5f5;
    margin-bottom: 20px;
    padding-bottom: 20px;
}
.title-box-menu-left
{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 15px;
    background-color: var(--brand-primary);
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    position: relative;
}
.title-box-menu-left a{
    color: #fff;    
    text-decoration: none;
}
.menu-left
{
    background-color: #fff;
    border-radius: 0 0 6px 6px;
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 0;
    margin-bottom: 20px;
}
.menu-left > li
{
    list-style: none;
    margin: 0;
}
.menu-left > li > a
{
    color: #333;
    text-decoration: none;
    font-size: 16px;
    display: block;
    padding: 10px 15px;
    border-bottom: solid 1px #f2f2f2;
}
.menu-left > li > a:hover
{
    color: #edbf89;
    background-color: #fcfdfc;
}
.menu-left > li.active > a{
    color: #edbf89;
    background-color: #fcfdfc;
    font-weight: 700;
    border-left: solid 3px #edbf89;
}
.menu-left > li ul{
    display: none;
    border-left: solid 3px #333;
}
.menu-left > li > ul{
    padding: 0;
    margin: 0;
}
.menu-left > li > ul li
{
     display: block;
     position: relative;
}.menu-left > li > ul li a{
    display: block;
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    border-bottom: solid 1px #fff;
}
.menu-left > li.active > ul{
    display: block;
}
.menu-left > li.active > ul > li
{
    position: relative;
}
.social-media-vertical
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: fixed;
    bottom: 145px;
    right: 15px;
    z-index: 100;
    transition: 0.4s;
}
.social-media-vertical .social-list
{
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: linear 0.2s;
    opacity: 1;
    margin: 0;
    padding: 0;
}
.social-media-vertical .social-item
{
    width: 45px;
    height: 45px;
    border-radius: 100rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-shadow: 0px 10px 13px 0px #00000040;
    background-color: #ffff;
    -webkit-animation: hithere 1.25s infinite alternate;
    animation: hithere 1.25s infinite alternate;
}
.social-media-vertical .social-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  height: 100%;
  width: 0;
  background-color: #fff;
  opacity: 0.1;
  z-index: -1;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.social-media-vertical .social-item svg {
  height: 26px;
  color: #E82F39;
}
.social-media-vertical .social-list.hidden
{
    opacity: 0;
    display: none;
}
.social-media-vertical .social-item.close {
  -webkit-animation: none;
  animation: none;
  background-color: #E82F39;
  transition: all linear 0.3s;
}
.social-media-vertical .btn-item.btnScrollTop {
  -webkit-animation: none;
          animation: none;
}
.social-media-vertical .btn-item.close {
  -webkit-animation: none;
          animation: none;
  background-color: #E82F39;
  transition: all linear 0.3s;
}
.social-media-vertical .btn-item.close.hidden {
  transform: rotate(45deg);
}
.social-media-vertical .btn-item.close svg {
  color: #ffff;
}
.social-media-vertical .btn-item svg {
  height: 26px;
  color: #E82F39;
}
.social-media-vertical .btn-item:hover::before {
  left: auto;
  right: 0;
  width: 100%;
}
.social-media-vertical .btn-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  height: 100%;
  width: 0;
  background-color: #fff;
  opacity: 0.1;
  z-index: -1;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media only screen and (max-width: 576px) {
  .social-media-vertical .btn-item {
    width: 40px;
    height: 40px;
  }
  .social-media-vertical .btn-item svg {
    height: 15px;
  }
}
@media screen and (max-width: 991px) and (max-height: 575px) {
  .social-media-vertical .btn-item {
    width: 25px;
    height: 25px;
  }
  .social-media-vertical .btn-item svg {
    height: 14px;
  }
}
.social-media-vertical .connect-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: linear 0.2s;
  opacity: 1;
}
.social-media-vertical .connect-list.hidden {
  opacity: 0;
  display: none;
}
@media screen and (max-width: 991px) and (max-height: 575px) {
  .social-media-vertical .connect-list {
    gap: 2px;
  }
}
.social-media-vertical .btnScrollTop {
}
.social-media-vertical .btnScrollTop.block {
  display: flex;
}
.social-media-vertical .btnScrollTop,
.social-media-vertical .btn-show-connect {
  background-color: #E82F39;
  transition: linear 0.2s;
}
.social-media-vertical .btnScrollTop.active,
.social-media-vertical .btn-show-connect.active {
  transform: rotate(-45deg);
}
.social-media-vertical .btn-item.btnScrollTop.hidden {
    opacity: 0;
    display: none;
}
@-webkit-keyframes beat {
  to {
    transform: scale(1.1);
  }
}
@keyframes beat {
  to {
    transform: scale(1.1);
  }
}
@-webkit-keyframes hithere {
  30% {
    transform: scale(1.2);
  }
  40%, 60% {
    transform: rotate(-20deg) scale(1.2);
  }
  50% {
    transform: rotate(20deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes hithere {
  30% {
    transform: scale(1.2);
  }
  40%, 60% {
    transform: rotate(-20deg) scale(1.2);
  }
  50% {
    transform: rotate(20deg) scale(1.2);
  }
  70% {
    transform: rotate(0deg) scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.footer-container
{
    background-color: #333;
    padding-top: 60px;
    padding-bottom: 60px;
}
.info-footer
{
    margin-bottom: 20px;
}
.info-footer .title-statict-content
{
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #fff;
}
.info-footer .content-statict
{
    color: #fff;
}
.title-footer
{
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    margin-bottom: 15px;
    color: #fff;
}
.copyright
{
    background-color: #282728;
    color: #fff;
    padding: 15px 0;
    font-weight: 700;
    border-top: solid 1px #414141;
}
.menu-boxfooter
{
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0
}
.menu-boxfooter > li
{
    display: flex;
    flex-direction: column;
}
.menu-boxfooter > li > a
{
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    display: block;
    margin-bottom: 15px;
}
.menu-boxfooter > li > a i.fa
{
    display: none;
}
.menu-boxfooter > li > ul
{
    margin: 0;
    padding: 0;
}
.menu-boxfooter > li > ul > li
{
    display: block;
    position: relative;
    padding-left: 10px;
}
.menu-boxfooter > li > ul > li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    background-color: #fff;
    border-radius: 50%;
}
.menu-boxfooter > li > ul > li a{
    color: #d7d7d7;
    text-decoration: none;
    display: block;
    font-size: 14px;
    padding-bottom: 8px;
}
.menu-boxfooter > li > ul > li a:hover
{
    color: #fff;
}
.menu-boxfooter > li > ul > li ul
{
     display: none;
}
.title-more
{
    font-size: 26px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    padding-bottom: 0;
    margin-bottom: 15px;
    color: #fff;
    border-bottom: solid 1px #edbf89;
}
.title-more span
{
    background-color: #006e55;
    padding-bottom: 0px;
    padding-left: 30px;
    padding-right: 30px;
    bottom: -8px;
    left: 40px;
    display: inline-block;
    position: relative;

}
.orther-items
{
    padding-top: 40px;
    padding-bottom: 20px;
}
.box-info-contact
{
    padding: 20px;
    border: dashed 1px #d7d7d7;
    background-color: #fff;
    margin-bottom: 20px;
    margin-top: 20px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.related-products
{
     background-color: #f5f5f5;
     padding-top: 40px;
     padding-bottom: 40px;
}
.recently-viewed-products
{
    padding-top: 40px;
     padding-bottom: 40px;
}
.sub-title-line {
  font-size: 1.2rem;
  margin-bottom: 10px;
  opacity: 0.9;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
  color: #edbf89;
  padding-left: 50px;
  font-size: 18px;
  position: relative;
}
.sub-title-line::before {
  position: absolute;
  width: 45px;
  height: 2px;
  content: '';
  left: 0;
  bottom: 5px;
  background: #f3be43;
}
.btn-view-all
{
    background-image: url('/public/assets/images/bg_view_all.png');
    color: #000000;
    border: none;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: left center;
    padding-left:50px;
    line-height: 40px;
    text-transform: uppercase;
}
.col-bg-project-home
{
    background-color: #005380;
}
.project-home
{
    padding-top: 0;
    background-color: #005380;
    background-position: right center;
    background-size: auto;
    background-repeat: no-repeat;
    padding-bottom: 0;
}
.p-40
{
    padding: 40px;
    padding-right: 0;
}
.category-info-project
{
    padding:120px 40px ;
    padding-left: 0;
    padding-bottom: 0;
    color: #fff;
}
.category-info-project .title-home a{
    color: #fff;
}
.category-info-project .title-home a:hover
{
    color: #f3be43;
}
.category-info-project .btn-view-all
{
    color: #fff;
}
.category-info-project .btn-view-all:hover
{
    color: #f3be43;
}
.project-home-title-item
{
    background-color: #fff;
    padding: 10px 15px;
    padding-bottom: 13px;
}
.project-home-title-item:hover{
    color: #005380;
}
.project-home-title-item a{
    font-weight: 700;
    font-size: 16px;
    color: #005380;
    text-decoration: none;
}
.slide-project-border-none .project-item.card
{
    border: none;
    border-radius: 0;
    box-shadow: none;
    background-color: transparent;
}
.slide-project-border-none .project-item .card-body
{
    padding: 0;
}
.slide-project-border-none .project-item .card-body .card-img-top
{
    border-radius: 0;
}
.slide-project-border-none .project-item .project-home-title-item
{
    text-transform: uppercase;
    color: #262526;
    font-weight: 700;
}
.slide-project-border-none .project-item .project-home-title-item a{
    color: #262526;
}
.slide-project-border-none .project-item .project-home-title-item a:hover{
    color: #f3be43;
}
.project-home-slider
{
    padding-left: 40px;
    padding-top: 120px;
    padding-bottom: 120px;
}
/* Thêm vào file CSS của bạn */
.lazyload {
    background-image: none !important;
    background-color: #f8f8f8; /* màu placeholder */
}
.lazyloaded {
    background-image: var(--bg-image);
    transition: opacity 0.5s;
}
.content-footer-style2
{
    color: #fff;
}
.title-info-footer-style2
{
    color: #fff;
    position: relative;
}
.title-info-footer-style2::before
{
    position: absolute;
    display: none;
    content: "";
    width: 200px;
    background: linear-gradient(to right,  #ffd300 0%,#ffd300 20%,#ff007e 20%,#ff007e 40%,#a5e548 40%,#a5e548 60%,#a5e548 60%,#00c0ff 60%,#00c0ff 60%,#00c0ff 80%,#bf2c33 80%,#bf2c33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    height: 4px;
    bottom: -15px;
    left: 0;
}
.title-info-footer-style2 strong
{
    font-weight: 700;
    display: block;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.title-info-footer-style2 span
{
    font-weight: 700;
    display: block;
    font-size: 18px;
}
.fix-slider
{
    min-height: 96px;
}
.content-detail
{
}
.content-detail figure
{
    margin: 0;
    padding: 0;
    width: 100% !important;
}
.content-detail img
{
    width: 100%;
    height: auto !important;
    display: block;
}
.content-detail h2
{
    font-size: 26px;
    font-weight: 700;
    color: #005380;
}
.content-detail ul{
    margin-top: 20px;

}

 .content-detail ul li {
  list-style: none;
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
}
.content-detail ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  color: #fff;
  background-image: url('/public/assets/images/leaf-cursor.png');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}
.content-detail h3{
    font-size: 22px;
    font-weight: 700;
    color: #005380;
}
.content-detail h4{
    font-size: 18px;
    font-weight: 700;
    color: #222;
}
.subcategory-title
{
    font-size: 30px;
    font-weight: 700;
    color: #282728;
    text-transform: uppercase;
}
.subcategory-title a{
    color: #282728;
    text-decoration: none;
}
.subcategory-title a:hover{
    color: #f3be43;
}
.subcategory-label
{
     text-transform: uppercase;
     font-size: 20px;
     color: #666;
}
.subcategory-image img {
    width: 100%;
    object-fit: cover;
}
.sub-page-name
{
    color: #f3be43;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
}
.sub-page-name::before
{
    content: "";
    position: absolute;
    width: 40px;
    left: 50%;
    margin-left: -20px;
    height: 3px;
    background:#f3be43;
    top: -10px;
}

.what-we-do
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
.title-what-we-do
{
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    position: relative;
    text-align: center;
}
.title-what-we-do::before
{
    position: absolute;
    content: "";
    width: 60px;
    left: 50%;
    margin-left: -30px;
    top: -10px;
    background-color: #f3be43;
    height: 3px;
}
.intro-text-what-we-do
{
    font-size: 18px;
    color: #fff;
    margin-bottom: 30px;
}
.intro-text-what-we-do p{
    margin-bottom: 4px;
}
.what-we-do .news-title-item
{
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 700;
}
.product-intro-detail
{
}
.product-intro-detail ul
{
    margin: 0;
    padding: 0;
} 
.product-intro-detail ul li{
    display: block;
    position: relative;
    padding-left: 15px;
}
.product-intro-detail ul li::before
{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #edbf89;
    border-radius: 50%;
}
.banner-text-top
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
    width: 100%;
    color: #fff;
    font-size: 16px;
    padding: 10px 15px;
    border-radius: 4px;
}
.category-description-page
{
    f
}
.img-info-detail
{
}
.img-info-detail img{
    width: 100%;
    height: auto;
    display: block;
}
.numsber-info
{
    padding: 40px 0;
    padding-bottom: 0;
}
.numsber-info .number-item
{
    text-align:left;
    background-color: #005380;
        color: #fff;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
}
.numsber-info .number-item:last-child
{
}
.numsber-info .number-item .number
{
    font-size: 35px;
    font-weight: 700;
    color: #f3be43;
    margin-bottom: 15px;
}
.numsber-info .number-item .intro-num
{
    font-weight: 700;
    font-size: 18px;
}
.numsber-info .number-item .intro-num p
{
    margin: 0;
}
.page-top-ladi-info
{
    padding-top: 50px;
    padding-bottom: 50px;
}
.mission
{
    position: relative;
}
.item-mission {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.icon-mission {
    position: relative;
}
.content-item-item-mission {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.85);
    padding: 20px 30px;
    transform: translateY(70%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.name-mission {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    z-index: 2;
    /* XÓA dòng transition: opacity 0.3s; */
    opacity: 1; /* LUÔN HIỂN THỊ */
}
.intro-mission {
    opacity: 0;
    max-height: 0;
    transition: opacity 0.3s, max-height 0.3s;
    overflow: hidden;
}
.name-mission-static {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    padding: 20px 30px;
    background: rgba(0,0,0,0.5);
    z-index: 2;
    transition: opacity 0.3s;
    opacity: 1;
    pointer-events: none;
}
.item-mission:hover .name-mission-static,
.item-mission:focus .name-mission-static {
    opacity: 0;
}
.content-item-item-mission {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.85);
    padding: 20px 30px;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.item-mission:hover .content-item-item-mission,
.item-mission:focus .content-item-item-mission {
    transform: translateY(0);
    opacity: 1;
}
.name-mission {
    font-size: 36px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    z-index: 2;
}
.intro-mission {
    opacity: 1;
    max-height: 500px;
    transition: opacity 0.3s, max-height 0.3s;
    overflow: hidden;
}
.icon-mission img
{
    display: block;
    width: 100%;
}
.history
{
    padding-top: 50px;
    padding-bottom: 60px;
    background-color: #f1f2f2;
}
/* Đảm bảo swiper tràn 2 bên và căn giữa */
.history-swiper {
    width: 100%;
    padding: 40px 0;
}
.history-swiper .swiper-slide {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    transition: transform 0.3s;
}
.item-history {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 16px 16px;
    width: 100%;
    margin: 0 auto;
    transition: box-shadow 0.3s;
    position: relative;
}
.item-history img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}
.intro-history {
    display: none;
    margin-top: 12px;
}
.swiper-slide-active .intro-history {
    display: block;
}
.swiper-slide-active .item-history {
    box-shadow: 0 4px 32px rgba(0,0,0,0.18);
    background: #f8f9fa;
}
.name-history
{
    font-size: 30px;
    font-weight: 700;
    margin-top: 20px;
}
.how-we-are
{
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding-top: 120px;
    padding-bottom: 120px;
}
.category-description-page-how-we-are
{
    width: 100%;
    color: #fff;
}
.item-how-we
{
    border-bottom: solid 1px #ddd;
    border-right: solid 1px #ddd;
}
.icon-how-we img
{
    display: block;
    width: 100%;
}
.how-we-are-list
{
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
}
.WHERE-WE-ARE
{
    min-height: 600px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
    padding-top: 100px;
}
.how-we-are-swiper
{
    padding-bottom: 20px;
}
.item-how-we-are
{
    padding: 40px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
    transition: transform 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.item-how-we-are:hover
{
    background-color: #f3be43;
    color: #282728;
}
.name-how-we-are
{
     font-size: 24px;
     font-weight: 700;
     color: #005380;
     margin-bottom: 10px;
}
.OUR-CUSTOMERS
{
    padding-top: 140px;
    padding-bottom: 40px;
}
.icon-customer img
{
    width: 100%;
    height: auto;
    display: block;
    filter: grayscale(100%);
    transition: filter 0.3s;
}
.icon-customer:hover img
{
    filter: grayscale(0%);
}
.container-small
{
    width: 70%;
    margin: auto;
}
.page-name1::before
{
    display: none;
}
.sub-page-name1::before
{
   display: none;
}


.item-facilities
{
    text-align: center;
    width: 80%;
    margin: auto;
}
.item-facilities img{
    display: block;
    margin: auto;
    margin-bottom: 15px;
}

/* ==========================================================================
   RESPONSIVE DESIGN (Desktop First)
   ========================================================================== */


@media (max-width: 1599px) {
    .site-header::after
    {
        height:400px;
        width: 400px;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .content-slide-home .text-6xl
    {
        font-size: 40px;
    }
    .content-slide-home .sub-slide-title
    {
        font-size: 24px;
    }

    
    .logo img
    {
        height:70px;
        width: auto;
    }
    .main-nav .main-menu li a
    {
         line-height: 80px;
    }
    .item-facilities
    {
        text-align:left;
        width: 100%;
        overflow: hidden;
        font-size: 14px;
    }
    .item-facilities img{
        display: block;
        width: 35%;
        float: left;
        margin-right: 15px;
        margin-bottom: 15px;
    }
    .item-facilities .text-xl{
        font-size: 16px;
        line-height: 22px;
    }
    

}

/* Large Desktop (1200px - 1399px) */
@media (max-width: 1399px) {
    .main-nav-style3 .main-menu li
    {
        margin: 0 14px;
    }
    .info-home-content
    {
        top: 10%;
    }
    .sub-cat-info
    {
        padding: 20px 0;
    }
    .numsber-info .number-item .number
    {
         font-size: 50px;
    }
    .category-description-page
    {
        width: 100%;
    }
    .page-wrapper-product
    {
        padding-top: 70px;
    }

}

/* Medium Desktop / Laptops (max-width: 1199px) */
@media (max-width: 1199px) {
    .page-wrapper
    {
        padding: 30px 0;
    }
    .item-facilities img
    {
        width: 60%;
        float: none;
        margin: auto;
    }
    .frm-register
    {
        width: 100%;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }
    .title-home
    {
        font-size: 26px !important;
    }
}


/* Mobile devices and below (max-width: 575px) */
@media (max-width: 575px) {
    .info-home-content
    {
        top: 10%;
    }
    .sub-cat-info .sub-cat-item h3
    {
        margin-top: 10px;
        font-size: 16px;
    }
    .into-sub-cat-info
    {
        font-size: 13px;
        line-height: 18px;
    }
    .numsber-info .number-item
    {
        margin-bottom: 20px;
    }
    .numsber-info
    {
        padding-bottom: 0;
    }
    .numsber-info .number-item .number
    {
        font-size: 40px;
        margin-bottom: 15px;
    }
    .name-mission
    {
        font-size: 26px;
    }
    .name-mission-static
    {
        font-size: 26px;
        padding: 15px 15px;
    }
    .what-we-do
    {
        position: relative;
        padding-top: 40px;
    }
    .intro-text-what-we-do
    {
        color: #282728;
    }
    .title-what-we-do
    {
        font-size: 30px;
        color: #282728;
    }
    .menu-tab > li > a
    {
        margin-bottom: 5px;
    }
    .fix-slider .slick-list 
    {
        height: auto !important;
    }
    .fix-slider .slick-initialized .slick-slide
    {
        aspect-ratio:unset !important
    }    
    .container {
        width: 100%;
        padding: 0 15px;
    }
    .section-padding { padding: 20px 0; }
    .container { padding: 0 10px; }
    .mb-mobile-lg { margin-bottom: 15px; }
}

/* Small mobile devices (max-width: 479px) */
@media (max-width: 479px) {
    /* You can add specific styles for very small screens here if needed */
    /* The styles from max-width: 575px will also apply */
    .info-home-content
    {
        top: 10%;
    }
    .sub-cat-info .sub-cat-item h3
    {
        margin-top: 10px;
        font-size: 16px;
    }
    .into-sub-cat-info
    {
        font-size: 13px;
        line-height: 18px;
    }
    .numsber-info .number-item
    {
        margin-bottom: 20px;
    }
    .numsber-info
    {
        padding-bottom: 0;
    }
    .numsber-info .number-item .number
    {
        font-size: 40px;
        margin-bottom: 15px;
    }
    .name-mission
    {
        font-size: 26px;
    }
    .name-mission-static
    {
        font-size: 26px;
        padding: 15px 15px;
    }
    .what-we-do
    {
        position: relative;
        padding-top: 40px;
    }
    .intro-text-what-we-do
    {
        color: #282728;
    }
    .title-what-we-do
    {
        font-size: 30px;
        color: #282728;
    }
    .menu-tab > li > a
    {
        margin-bottom: 5px;
    }
    .fix-slider .slick-list 
    {
        height: auto !important;
    }
    .fix-slider .slick-initialized .slick-slide
    {
        aspect-ratio:unset !important
    }    
}

@media (min-width: 769px) {
    .desktop-only { display: block !important; }
    .mobile-only { display: none !important; }
}
:root{
      --bg: #0b1020;
      --bg-soft: #0f1530;
      --card: #111836;
      --txt: #e6ecff;
      --muted: #9fb0ff;
      --brand: #6ea8ff;
      --brand-2: #6ff3ff;
      --line: rgba(255,255,255,.08);
      --radius: 16px;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --max: 1200px;
    }
.content-footer a
{
    color:#edc22e ;
}
.content-footer a:hover{
    text-decoration: underline;
}
.products-about
{
    background-color: #005380;
    padding-top: 40px;
    padding-bottom: 40px;
}
.product-item-about
{
    background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
}
.product-item-about:hover{border-color:rgba(255,255,255,.14)}
.product-item-about .card-body
{
    padding: 15px 0;
}
.product-item-about img
{
    display: block;
    width: 100%;
}
.product-item-about .product-name-item
{
    font-size: 18px;
    font-weight: bold;
    font-weight: 700;
    color: #fff;
}
.product-item-about .product-name-item a{
    color: #fff;
    text-decoration: none;
}
.product-item-about .product-name-item a:hover{
    color: #f3be43;
}
.ul-list
{
    margin-top: 20px;
}
.ul-list li {
  list-style: none;
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
}
.ul-list ul {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
}
.ul-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  color: #fff;
  background-image: url('/public/assets/images/leaf-cursor.png');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}


.ul-list-3
{
    margin-top: 20px;
}
.ul-list-3 li {
  list-style: none;
  padding-left: 28px;
  position: relative;
  margin-bottom: 10px;
}
.ul-list-3 ul {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
}
.ul-list-3 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  color: #fff;
  background-image: url('/public/assets/images/leaf-cursor1.png');
  background-repeat: no-repeat;
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
}

.sub-info-product-about
{
    background: linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    box-shadow: 0 1px 0 rgba(255,255,255,.03) inset;
    color: #fff;
}
/* ===== NEW PRODUCT CARD DESIGN ===== */
.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid #f0f0f0;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: var(--brand-accent);
}
.product-card .product-img {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}
.product-card .product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.product-card:hover .product-img img {
    transform: scale(1.05);
}
.product-card .std-badge,
.product-card .new-badge {
    position: absolute;
    top: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.product-card .std-badge {
    right: 12px;
    background: var(--brand-accent);
    color: white;
}
.product-card .new-badge {
    left: 12px;
    background: #22c55e;
    color: white;
}
.product-card .p-4 {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.product-card .product-category-item a {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
}
.product-card .product-name {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0px;
    color: var(--charcoal);
}
.product-card .product-name a {
    color: inherit;
    text-decoration: none;
}
.product-card .specs {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
    flex: 1;
}
.product-card .spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 13px;
}
.product-card .spec:last-child {
    border-bottom: none;
}
.product-card .spec .label {
    font-weight: 600;
    color: #6c757d;
    flex-shrink: 0;
    margin-right: 12px;
}
.product-card .spec span:last-child {
    font-weight: 500;
    color: var(--charcoal);
    text-align: right;
}
.product-card .btn-secondary {
    background: var(--brand-primary);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: auto;
}
.product-card .btn-secondary:hover {
    background: var(--brand-accent);
    transform: translateY(-1px);
}
.product-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}
/* Fade-in animation */
.product-card.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}
.product-card.appear {
    opacity: 1;
    transform: translateY(0);
}
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .product-card .product-name {
        font-size: 16px;
    }
    .product-card .spec {
        font-size: 12px;
    }
    .product-card .btn-secondary {
        padding: 10px 20px;
        font-size: 13px;
    }
}
.form-input
{
    border-radius: 6px;
    border: solid 1px #ddd;
    padding: 10px 15px;
}
.border-bottom-edbf89
{
    border-bottom: solid 1px #edbf89;
}
.caption-wrapper::before
{
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,83,64,0.92) 56%,rgba(0,83,64,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.bg-gradient-facilities
{
    background: linear-gradient(to bottom,  rgba(0,112,91,1) 0%,rgba(0,112,92,1) 50%,rgba(0,108,87,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-gradient
{
    background: linear-gradient(to bottom,  rgba(0,112,91,1) 0%,rgba(0,112,92,1) 50%,rgba(0,108,87,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-facilities
{
    background-image: url('/public/assets/images/bg_facilities.png');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% auto;
}
.title-home-register
{
    color: #006e55 !important;
}
.bg-register
{
    background: linear-gradient(to bottom,  rgba(249,233,214,1) 0%,rgba(245,218,187,1) 45%,rgba(238,193,142,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.frm-register
{
    width: 100%;
    margin: auto;
    padding-top: 40px;
    padding-bottom: 40px;
    
}
.frm-register .input
{
    border-radius: 0;
    height: 3.6rem;
    border: none;
    background-color: #fff !important;
}
.frm-register .textarea
{
    border-radius: 0;
    border: none;
}
.btn-submit
{
    border-radius: 0;
    background-color: #006e55;
    padding: 22px 0;
    border: none;
    height: auto;
    font-size: 20px;
}
.btn-submit:hover
{
    background-color: #edbf89;
}
.info-register-item .content-info-feedback
{
    color: #303030;
    font-size: 18px;
    font-weight: 700;
}
.bg-img-register
{
    background-position: left bottom;
}
.footer-style3
{
    background-color: #003b2e;
    background-repeat: no-repeat;
    background-position: right center;
}

.slogan-footer
  {
    font-size: 22px;
    font-weight: 400;
    color: #edbf89;
    position: relative;
  }
  .slogan-footer::before
  {
    content: "";
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: #edbf89;
    bottom: -20px;
    left: 50%;
    margin-left: -30px;
  }
  .menu-footer
  {
    text-align: center;
  }
  .menu-footer li{
    display: inline-block;
    margin: 0 15px;
  }
  .menu-footer li a{
    color: #edbf89;
    font-size: 18px;
    text-decoration: none;
    font-weight: 500;
  }
  .menu-footer li a:hover{
    color: #fff;
    text-decoration: underline;
  }
  .menu-footer li ul{
    display: none;
  }

/* ===== FullPage Navigation Styles ===== */

/* Keyframes for ripple effect */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Navigation dots - Target the second span (empty span for dot) */
#fp-nav ul li a span:last-child, 
.fp-slidesNav ul li a span:last-child {
  width: 20px !important;
  height: 20px !important;
  background-color: #003b2e !important;
  border-radius: 50% !important;
  margin: -10px 0 0 -10px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: block !important;
}

/* Hide the first span (text span) */
#fp-nav ul li a span.fp-sr-only,
.fp-slidesNav ul li a span.fp-sr-only {
  display: none !important;
}

/* Navigation dots - Active/Hover state */
#fp-nav ul li:hover a.active span:last-child, 
.fp-slidesNav ul li a.active span:last-child,
#fp-nav ul li a.active span:last-child {
  background-color: #edbf89 !important;
  width: 24px !important;
  height: 24px !important;
  
  border: none !important;
  box-shadow: 0 0 20px rgba(237, 191, 137, 0.6) !important;
  position: relative !important;
  overflow: visible !important;
}

/* Multiple ripple effects for active dots */
#fp-nav ul li a.active span:last-child::before,
.fp-slidesNav ul li a.active span:last-child::before {
  content: '';
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 40px !important;
  height: 40px !important;
  border: 2px solid #edbf89 !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  animation: ripple1 2s infinite !important;
  pointer-events: none !important;
}

#fp-nav ul li a.active span:last-child::after,
.fp-slidesNav ul li a.active span:last-child::after {
  content: '';
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 60px !important;
  height: 60px !important;
  border: 1px solid rgba(237, 191, 137, 0.6) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) scale(0) !important;
  animation: ripple2 2s infinite 0.5s !important;
  pointer-events: none !important;
}

/* Keyframes for enhanced ripple effects */
@keyframes ripple1 {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}

@keyframes ripple2 {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.8;
  }
  70% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}

/* Continuous ripple effect specifically for slides navigation active dots */
.fp-slidesNav ul li a.active span:last-child {
  position: relative !important;
  animation: ripple 2s linear infinite !important;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgba(237, 191, 137, 0.7);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(237, 191, 137, 0.3);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(237, 191, 137, 0);
  }
}

/* Hover effect for all dots */
#fp-nav ul li:hover a span:last-child, 
.fp-slidesNav ul li:hover a span:last-child {
  background-color: rgba(237, 191, 137, 0.8) !important;
  border-color: #003b2e !important;
  transform: scale(1.1) !important;
}

/* Tooltip styles */
#fp-nav ul li .fp-tooltip,
.fp-slidesNav ul li .fp-tooltip {
  position: absolute !important;
  background-color: #edbf89 !important;
  transform: translateY(-22%) !important;
  color: #003b2e !important;
   top: 50% !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  display: block !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Right side navigation tooltip */
#fp-nav ul li .fp-tooltip {
  right: 35px !important;
  top: 0% !important;
  transform: translateY(-22%) !important;
}

/* Left side navigation tooltip */
.fp-slidesNav ul li .fp-tooltip {
  left: 35px !important;
  top: 0% !important;
  transform: translateY(-50%) !important;
}

/* Tooltip arrow for right side */
#fp-nav ul li .fp-tooltip::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  right: -8px !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 8px solid #edbf89 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
}

/* Tooltip arrow for left side */
.fp-slidesNav ul li .fp-tooltip::before {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: -8px !important;
  transform: translateY(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-right: 8px solid #edbf89 !important;
  border-top: 8px solid transparent !important;
  border-bottom: 8px solid transparent !important;
}

/* Show tooltip on hover - chỉ khi hover vào li (vùng 24x24px quanh dấu chấm) */
#fp-nav ul li:hover .fp-tooltip,
.fp-slidesNav ul li:hover .fp-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force hide tooltip khi không hover */
#fp-nav ul li:not(:hover) .fp-tooltip,
.fp-slidesNav ul li:not(:hover) .fp-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
  display: block !important;
}

/* Hide text spans and clean up navigation links */
#fp-nav ul li a span.fp-sr-only,
.fp-slidesNav ul li a span.fp-sr-only {
  display: none !important;
}

/* Clean navigation link appearance */
#fp-nav ul li a,
.fp-slidesNav ul li a {
  font-size: 0 !important;
  line-height: 0 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* Navigation container positioning */
#fp-nav {
  position: fixed !important;
  z-index: 100 !important;
  top: 50% !important;
  opacity: 1 !important;
  transform: translateY(-50%) !important;
}

/* Navigation list */
#fp-nav ul,
.fp-slidesNav ul {
  margin: 0 !important;
  padding: 0 !important;
}

/* Navigation items - giảm kích thước để vùng hover chỉ quanh dấu chấm */
#fp-nav ul li,
.fp-slidesNav ul li {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 10px !important;
  position: relative !important;
  border-radius: 0 !important;
}

/* ===== End FullPage Navigation Styles ===== */

.news-article-single
{
    background-color: #f4e9db;
    padding: 30px 40px;
    border-radius: 20px;
    width: 66%;
    margin: auto;
    box-shadow: 0 4px 32px rgba(0,0,0,0.18);
    margin-top: 0px;
    position: relative;
    z-index: 2;
}
.bg-f4e9db
{
    background-color: #f4e9db;
}

/* Language Dropdown Styles */
.language-dropdown {
  position: relative;
  z-index: 999;
}

.language-toggle {
  border-radius: 6px;
  background: white;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(to bottom, rgba(0,112,91,1) 0%,rgba(0,112,92,1) 50%,rgba(0,108,87,1) 100%);
}

.language-toggle:hover {
  border-color: #edbf89;
}

.language-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.language-dropdown.open .language-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.language-menu {
  min-width: 160px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.language-option {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.language-option:hover {
  background-color: #f9fafb;
}

.language-option.active {
  
  color: white;
}

.language-option.active:hover {
  
}

.flag-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
  .language-menu {
    right: -20px;
    width: 180px;
  }
  .bg-gradient-maphome
    {
     
    }
}
#menu-toggle
{
}
#menu-toggle span
{
    background-color: #fff;
    width: 30px;
    height: 2px;
    display: block;
    position: relative;
    top: -4px;
}
#menu-toggle span::before,
#menu-toggle span::after
{
    content: "";
    background-color: #fff;
    width: 30px;
    height: 2px;
    display: block;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}
#menu-toggle span::before
{
    top: -8px;
}
#menu-toggle span::after
{
    bottom: -8px;
}

.bg-maphome
{
    background-color: #f4e9db;
}
.bg-gradient-maphome
{
    
}
.site-header::before {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.site-header.header-scroll::before
{
    opacity: 0;
    visibility: hidden;
}
.site-header.header-scroll::after 
{
    height: 96px;
}
.logo img {
    transition: transform 0.3s ease;
}
.header-scroll .logo img {
    transform: scale(0.6);
}
.header-scroll .main-nav .main-menu > li > a {
    transition: color 0.3s ease;
    line-height: 96px;
}
.site-header.header-scroll
{
    
}
.site-header.header-scroll .logo {
    transform: scale(1);
    padding: 0 !important;
}
.map-img
{
    border: 5px solid #003b2e;
}
.scrollbar
{
    background-color: #003b2e;
    color: var(--gold-300);
    max-height: 714px;
    overflow-y: auto;
    padding-top: 10px;
}
.floorplan-type-selector,.floorplan-floor-selector
{
    background-color: #f9f2e9 !important;
    color: var(--gold-300);
    padding: 10px 15px;
    height: auto !important;
    font-size: 18px;
    font-weight: 600;

}
.bg-tienich
{
    padding-top: 120px !important;
    
}
.section-tienich
{
    background-color: #003b2e;
}
.intro-item-list-vertical-style1 .ul-list
{
    margin-top: 0 !important;
}
.list-vertical-style2
{
    overflow-y: auto;
}

.color-green
{
    color: #edbf89 !important;

}
.info-form
{
  background-color: rgb(20 83 45 / 0.8);
}
.logo-form
{
   padding-bottom: 20px;
   margin-bottom: 20px;
}
.info-register-item .content-info-feedback
{
  color: #edbf89 !important;
  font-weight:600 !important;
}

@media (max-width: 992px) {
  .bg-gradient-maphome
    {
        padding-left:0;
    }
    .scrollbar
    {
        max-height:260px
    }
    .news-article-single
    {
        width: 100%;
        padding: 20px;
        margin-top: 0px;
    }
    .news-title
    {
        font-size: 26px;

    }
    .fix-slider
    {
        min-height: 73px;
    }
    
}
.social-media-horizontal3 .linkItem
{
    display: inline-block;
    color: #fff;
    height: 24px;
    margin-top: 4px;
}
.social-media-horizontal3 .linkItem svg
{
    height: 24px;
    display: block;
    filter: invert(100%);
    transition: filter 0.3s;
}

@media (max-width: 1535px) {
    .scrollbar
    {
        max-height: 593px;
    }
    .main-nav .main-menu li a
    {
        font-size: 14px;
    }
}
@media (max-width: 768px) {
  .language-menu {
    right: -20px;
    width: 180px;
  }
  .scrollbar
    {
        max-height:240px
    }
    .news-home-style1 .news-title-item
    {
        font-size: 18px;
    }
    .news-list-item-title
    {
         border-left: solid 4px #edbf89;
         padding-left: 10px;
    }
    .news-home-style1 .news-list-item-title a
    {
        color: #fff;
    };
    .btn-main
    {
        font-size: 16px;
        padding: 10px 20px;
    }
    .peer:placeholder-shown ~ .peer-placeholder-shown\:top-4
    {
    font-size: 0.9rem !important;
    }
    .partner-home-slider .swiper
    {
        padding-top: 10px;
    }
    .title-more
    {
        font-size: 20px;
        padding-bottom: 10px;

    }
    .title-more span
    {
        padding-left: 0;
        left: 0;
        background-color: transparent;
    }
    .default-title
    {
        font-size:24px;
    }


  
}

/* Đảm bảo vùng click của dấu chấm nav đủ lớn */
#fp-nav ul li a {
  width: 24px !important;
  height: 24px !important;
  position: relative !important;
  z-index: 999 !important;
}

#fp-nav ul li a span {
  width: 12px !important;
  height: 12px !important;
  display: block !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: background 0.2s;
  position: relative;
  z-index: 3;
}

#fp-nav ul li a.active span,
#fp-nav ul li a:hover span {
  background: #edbf89 !important;
}

/* Tooltip không che nút nav */
#fp-nav .fp-tooltip {
  pointer-events: none !important;
  z-index: 1 !important;
  position: absolute !important;
}

.ul-list-2
{

}
.ul-list-2 li
{
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;
}
.ul-list-2 li::before
{
    content: "✦";
    position: absolute;
    left: 0;
    top: 0rem;
    color: #fff;
    width: 16px;
    height: 16px;
}
.normad-heart
{
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    display: inline-block;
}

.normad-heart.fade-out {
    opacity: 0;
    transform: translateY(-10px);
}

.normad-heart.fade-in {
    opacity: 1;
    transform: translateY(0);
}


/* Video Play Button Styles */
.play-button-thumb {
  position: relative;
  width: 32px;
  height: 32px;
  background: rgba(237, 191, 137, 0.95) !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 50 !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.play-button-thumb:hover {
  transform: scale(1.15);
  background: rgba(237, 191, 137, 1) !important;
  border-color: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.play-button-thumb .play-icon {
  margin-left: 2px;
  z-index: 51;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Ripple Animation */
.play-button-thumb .ripple {
  position: absolute;
  border: 2px solid #edbf89;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: ripple 2s linear infinite;
  z-index: 1;
}

.play-button-thumb .ripple.delay-1 {
  animation-delay: 0.5s;
}

.play-button-thumb .ripple.delay-2 {
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* Grid Play Button Styles */
.play-button-grid {
  position: relative;
  width: 48px;
  height: 48px;
  background: rgba(237, 191, 137, 0.9);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 2;
}

.play-button-grid:hover {
  transform: scale(1.1);
  background: rgba(237, 191, 137, 1);
}

.play-button-grid .play-icon {
  margin-left: 2px;
  z-index: 3;
}

.play-button-grid .ripple {
  position: absolute;
  border: 2px solid #edbf89;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: ripple 2s linear infinite;
  z-index: 1;
}

.play-button-grid .ripple.delay-1 {
  animation-delay: 0.5s;
}

.play-button-grid .ripple.delay-2 {
  animation-delay: 1s;
}