/* =================================================================
   CẤU HÌNH HEADER
   ================================================================== */
header,
footer,
.footer,
.container-header,
#sp-footer {
    width: 100%;
    max-width: 100%;
    background-color: #ffffff !important; /* Ép nền trắng 100% */
}

/* Ép toàn bộ các dải bao bọc footer mặc định của Joomla về nền trắng */
#sp-footer, 
#sp-bottom, 
.sp-footer-wrapper, 
footer, 
.footer {
    background-color: #ffffff !important; /* Đổi dải nền xanh thành trắng */
    background-image: none !important;    /* Xóa bỏ màu gradient xanh nếu có */

}


/* =================================================================
   3. CẤU HÌNH HEADER (THANH MENU
   Tìm và ép nền lên tất cả các thẻ bọc vùng menu chứa class của bạn
   ================================================================== */
:has(> .custom-menu-bg), 
.custom-menu-bg,
.container-header {
    background-image: url('../images/banners/bg-bar-menu.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

/* Đảm bảo menu bên trong suốt để lộ ảnh nền */
.custom-menu-bg ul, 
.custom-menu-bg nav, 
.menu-horizontal {
    background: transparent !important;
}

.container-header .mod-menu a {
    padding: 2px 2px;
    margin: 5px;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
}

.container-header .mod-menu a:hover {
    color: #ff6d01;
    border-bottom: 2px solid #ff6d01;
}



.metismenu.mod-menu .nav-link:hover {
    color: #ff9900; /* Màu cam */
}

/* Đổi màu của menu con khi thả xuống */
.metismenu.mod-menu .dropdown-menu {
    background-color: #ffffff; /* Nền trắng */
    border: 1px solid #cccccc;
}

/* =========================
   MENU NAVIGATION
========================= */

.container-nav {
    background: none;
    background-image: none;
    padding: 0;
}

/* căn giữa menu */
.container-nav .mod-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin: 0;
    padding: 0;
}

/* chữ menu */
.container-nav .mod-menu > li > a {
    color: #000;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 0;
}

/* hover */
.container-nav .mod-menu > li > a:hover {
    opacity: 0.80;
}

/* menu đang active */
.container-nav .mod-menu .active > a {
    border-bottom: 2px solid #fff;
}

/* =========================
   LINK PRODUCT
========================= */

/* Bỏ gạch dưới tất cả link */
a,
a:hover,
a:focus {
    text-decoration: none;
}

/* Riêng danh sách sản phẩm */
.category-list a {
    text-decoration: none;
}

/* riêng bảng Product list */
.category-list a {
    text-decoration: none;
}
/* Ẩn hoàn toàn mũi tên xổ xuống trên toàn bộ thanh menu chính */
.dropdown-toggle::after, 
.nav-link::after, 
.sp-megamenu-parent .sp-has-child > a::after,
.nav-item.dropdown > a::after,
.navbar-nav .dropdown-toggle::after {
    display: none;
    content: none;
    background: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}
/* Định dạng Table và Cell */

.sub-title {
    color: #e67e23;
    font-weight: bold;
    font-size: 18px;
    padding-left: 10px;
    margin-bottom: 5px; /* Khoảng cách nhỏ với hàng dưới */
}
.sub-content {
    text-align: justify;
    font-style: italic;
    font-size: 18px; 
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 20px; /* Khoảng cách giữa các đoạn với nhau */
}

.link-product {
  text-decoration: none;
}
.link-product:hover,
.link-product:focus {
   text-decoration: none;
   font-weight: bold;
   color: #e67e23;
}
.table-style {
  border-collapse: collapse;
  background-color: #fcf2d7;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #e67e23;
}
.table-style td {
  padding: 10px;
}

/* Tạo link đề mục */
html {
    scroll-behavior: smooth;
}
.anchor-menu {
    text-align: center;
    margin: 20px 0 30px;
}

.anchor-menu a {
    display: inline-block;
    padding: 8px 16px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
}

.anchor-menu a:hover {
    background: #f5f5f5;
}
html {
    scroll-behavior: smooth;
}
.container-flex {
  display: flex; /* Kích hoạt chế độ Flexbox để các con nằm cùng dòng */
  align-items: center; /* canh giữa theo chiều dọc */
  gap: 10px;      /* Tạo khoảng cách giữa 2 khối (tùy chỉnh) */
}

.container-header {
  padding-top: 0px;
  padding-bottom: 0px;
  }
.container-header .navbar {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}
.container-header .mod-menu .nav-link {
  padding-top: 4px;
  padding-bottom: 4px;
}
/* =======================================================
   ÉP CO SÁT KHOẢNG CÁCH TRÊN DƯỚI CHO VỊ TRÍ NAVIGATION [NAV]
   ======================================================= */

.container-nav {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.container-nav .mod-menu > li > a {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.container-nav .navbar {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    min-height: auto !important;
}
/* =======================================================
   For table & cell formatting
   ======================================================= */
.cell-title {
   background-color: #FFA500;
   padding-left: 10px;
   font-size: 16px;
   font-weight: bold;
   border: 2px solid #fff;
}

.cell-style1 {
   background-color: #f2f2f2;
   padding-left: 10px;
   border: 2px solid #fff;
   font-size: 14px;
}
.cell-style2 {
   background-color: #ddd;
   padding-left: 10px;
   border: 2px solid #fff;
   font-size: 14px;
}

.com-content-category__children h3 a, 
.categories-list h3 a {
    font-size: 18px !important;
}
/* ==========================================================================
   KHUNG TỰA ĐỀ
   ========================================================================== */
.frame-title {
  width: 100%;
  margin: 30px auto;
  background-color: #ffebbe;
  border-radius: 20px;
  padding: 15px;
}



/* ==========================================================================
   KHUNG CHIA BỐ CỤC
   ========================================================================== */
.cell-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.cell-custom {
  flex: 0 0 var(--w-pc, 50%);
  box-sizing: border-box;
  align-self: flex-start;
}

.cell-custom img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px auto;
}


/* ==========================================================================
   2. KHUNG BẢNG THÔNG SỐ
   ========================================================================== */
.t-wrap {
  width: 60%;
  margin: 0 auto 10px;
  overflow-x: auto;
}

.t-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.t-wrap td {
  width: var(--col-w, auto);
}

.t-wrap tr {
  height: var(--row-h, auto);
}

/* ==========================================================================
   4. ĐIỆN THOẠI
   ========================================================================== */
@media (max-width: 768px) {

  .cell-custom {
    flex: 0 0 var(--w-mb, 100%);
    margin-bottom: 15px;
  }

  .t-wrap {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .t-wrap table {
    min-width: 450px;
  }

  .t-wrap td {
    width: auto;
  }

  .video-responsive {
    width: 100%;
  }

}
/* ==========================================================================
   FLOATING-TOP
   ========================================================================== */
#floating-top{
    position:fixed;
    right:30px;
    bottom:30px;
    width:50px;
    height:50px;
    background:#ffa500;
    color:#fff;
    border-radius:50%;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    font-weight:bold;
    box-shadow:0 3px 10px rgba(0,0,0,.3);

    opacity:0.4;
    visibility:visible;
    transition:all .3s ease;
    z-index:99999;
}
#floating-top:hover{
    opacity:1;
    transform:translateY(-2px);
}