:root {
    /* --body-bg: #f2f4f8; */
    --body-bg: #ededed;
    --light-rgb: 255,255,255;
}
.g-5, .gy-5 {
    --gutter-y: 5rem;
}
.bg-light-2 {
    background-color: var(--white);
}
.bg-light-3 {
    background-color: #f9fafb;
}
b, strong {
    font-weight: bold;
}
div.mod-languages ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  div.mod-languages li {
    margin: 0;
  }
  
  div.mod-languages ul.lang-inline li {
    display: inline-block;
  }
  
  div.mod-languages ul.lang-block li {
    display: block;
    padding: .5rem 0;
    text-align: start;
  }
  
  div.mod-languages ul li.lang-active {
    background-color: #f0f0f0;
  }
  
  div.mod-languages img {
    display: inline-block;
    border: none;
  }
  
  div.mod-languages a {
    padding: .5rem;
    text-decoration: none;
  }
  /* FORM */
  .formError {
    inset: auto !important;
  }

  /*  */

.xirocontent .h1,.xirocontent h1{font-size:calc(1.475rem + 2.7vw)}@media (min-width:1200px){.xirocontent .h1,.xirocontent h1{font-size:3.5rem}}.xirocontent .h2,.xirocontent h2{font-size:calc(1.425rem + 2.1vw)}@media (min-width:1200px){.xirocontent .h2,.xirocontent h2{font-size:3rem}}.xirocontent .h3,.xirocontent h3{font-size:calc(1.31rem + .72vw)}@media (min-width:1200px){.xirocontent .h3,.xirocontent h3{font-size:1.85rem}}.xirocontent .h4,.xirocontent h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){.xirocontent .h4,.xirocontent h4{font-size:1.5rem}}.xirocontent a{font-weight:500;text-decoration:underline}

.com-content-article h1 {
    font-size: calc(2.575rem + 2vw);
    font-weight: 700;
}

.com-content-article h2 {
    font-size: calc(1.7rem + 2vw);
}
.com-content-article h3 {
    font-size: calc(1.3rem + 1.2vw);
}
.luuyblock {
    border-radius: 12px;
    padding: 10px;
    border-left: 8px solid #f0ad4e;
    margin: 10px 0;
    background: #fff2cb;
}
lite-youtube {
    border: 8px solid #FF0000;
    border-radius: 18px;
    box-shadow: 0 10px 20px #00000030,0 6px 6px #0000003b;
}

.footer-bar {
    border-top: 1px solid #ffffff5e ;
    margin-top: 1rem;
}

.footer {
    padding: 5rem 0 1rem;
}

.box-info-content .h3 {
    border-top: 2px solid #d3deff;
    padding-top: .5rem;
    color: #3d6cf8;
    font-size: 1.5rem;
}


ul.checkbox-box {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.checkbox-box  li {
    box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
    background: #f7f7f7;
    border-radius: 8px;
    padding: 5px 5px 5px 35px;
    margin-bottom: 10px;
    margin-right: 9px;
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
    color: #000000;
    position: relative;
}

ul.checkbox-box li:before {
    content: '';
    position: absolute;
    left: 7px;
    top: 5px;
    width: 1.5em;
    height: 1.5em;
    border: 2px solid #ccc;
    background: #fff;
    border-radius: 50%;
}

ul.checkbox-box li:after {
    content: '✔';
    position: absolute;
    top: 5px;
    left: 7px;
    font-size: 1.5em;
    line-height: 0.8;
    color: #fff;
    transition: all .2s;
    background-color: #4285f4;
    border: 3px solid #4285f4;
    font-family: Helvetica, Arial, sans-serif;
    border-radius: 50%;
}

/* Product Swiper Styles */
.product-swiper,
.product-swiper-secondary {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.product-swiper .swiper-slide,
.product-swiper-secondary .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
}

.product-swiper .swiper-slide img,
.product-swiper-secondary .swiper-slide img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.product-thumbs,
.product-thumbs-secondary {
    height: 100px;
    box-sizing: border-box;
    padding: 0;
}

.product-thumbs .swiper-slide,
.product-thumbs-secondary .swiper-slide {
    width: 25%;
    height: 100%;
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.product-thumbs .swiper-slide-thumb-active,
.product-thumbs-secondary .swiper-slide-thumb-active {
    opacity: 1;
    border: 2px solid var(--bs-primary);
}

.product-thumbs .swiper-slide img,
.product-thumbs-secondary .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
}

/* Swiper Navigation Buttons */
.swiper-button-next,
.swiper-button-prev {
    color: var(--bs-primary);
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: var(--bs-primary);
    color: white;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1rem;
    font-weight: bold;
}

/* Swiper Pagination */
.swiper-pagination-bullet {
    background-color: var(--bs-primary);
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background-color: var(--bs-primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .product-thumbs,
    .product-thumbs-secondary {
        height: 80px;
    }
    
    .product-thumbs .swiper-slide,
    .product-thumbs-secondary .swiper-slide {
        width: 20%;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px;
        height: 35px;
        margin-top: -17.5px;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 0.875rem;
    }
    
    .product-swiper,
    .product-swiper-secondary {
        margin-bottom: 1rem;
    }
}

/* Ensure proper loading states */
.swiper-slide {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.swiper-slide-active {
    opacity: 1;
}

/* Fix for Bootstrap 5 compatibility */
.swiper-container {
    width: 100%;
    height: 100%;
}

/* Ensure images don't overflow */
.product-swiper .swiper-slide img,
.product-swiper-secondary .swiper-slide img {
    max-height: 400px;
    width: auto;
    max-width: 100%;
}

@media (max-width: 576px) {
    .product-swiper .swiper-slide img,
    .product-swiper-secondary .swiper-slide img {
        max-height: 300px;
    }
}

/* Product Detail Tabs Styles */
.nav-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 0;
}

.nav-tabs .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s ease;
}

.nav-tabs .nav-link:hover {
    border-color: transparent;
    color: var(--bs-primary);
    background-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    background-color: transparent;
    border-color: transparent;
    border-bottom-color: var(--bs-primary);
}

.tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    background-color: #fff;
}

.tab-pane {
    padding: 1.5rem;
}

.box-product-info {
    margin-bottom: 0;
}

.contact-info-content {
    min-height: 200px;
}

.rfq-info-content {
    min-height: 900px;
    position: relative;
}

.rfq-info-content iframe {
    width: 100%;
    height: 900px;
    border: none;
    border-radius: 0.375rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.tabsanpham {
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
}

/* Responsive adjustments for tabs */
@media (max-width: 768px) {
    .nav-tabs .nav-link {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    .tab-pane {
        padding: 1rem;
    }
}

/* Event */
.event-card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  border: 1px solid rgba(0,0,0,.125);
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.event-image {
  height: 200px;
  object-fit: cover;
  width: 100%;
}

.event-date-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
}

.event-location-icon {
  color: #6c757d;
}

.event-options-badge {
  font-size: 0.75rem;
}

.event-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.event-intro {
  color: #6c757d;
  font-size: 0.9rem;
  line-height: 1.5;
}

.none-style {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0;
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-color: transparent;
    box-shadow: none !important;
    display: inline-block !important;
}

.border-bottom-dashed {
    border-bottom: 1px dashed #b7b7b7;
}
.list-admin-contact {
    border-top: 1px solid #e7eaec;
    background: #FFF;
    padding: 10px;
    font-size: 90%;
}

/* CSS Table Container */
.css-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background-color: #fff;
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* CSS Table Row */
.css-table-row {
    display: table-row;
    transition: background-color 0.15s ease-in-out;
}

.css-table-row:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.css-table-row:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

.css-table-row:nth-child(even):hover {
    background-color: rgba(0, 0, 0, 0.075);
}

/* CSS Table Header Row */
.css-table-header {
    display: table-row;
    background-color: var(--bs-primary);
    color: white;
    font-weight: 600;
}

.css-table-header .css-table-cell {
    border-bottom: 2px solid var(--bs-primary);
}

/* CSS Table Cell */
.css-table-cell {
    display: table-cell;
    padding: 0.75rem;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    text-align: left;
}

.css-table-cell:first-child {
    border-left: none;
}
.cell-label {
    background-color: #f0f0f0;
    width: 180px;
}

.css-table-cell:last-child {
    border-right: none;
}

/* CSS Table Header Cell */
.css-table-header .css-table-cell {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}

/* CSS Table Body */
.css-table-body {
    display: table-row-group;
}

/* CSS Table Footer */
.css-table-footer {
    display: table-footer-group;
    background-color: #f8f9fa;
    font-weight: 600;
}

.css-table-footer .css-table-cell {
    border-top: 2px solid #dee2e6;
    border-bottom: none;
}

/* Responsive CSS Table */
@media (max-width: 768px) {
    .css-table {
        display: block;
        border: none;
        box-shadow: none;
    }
    
    .css-table-header {
        display: none;
    }
    
    .css-table-row {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        background-color: #fff;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    }
    
    .css-table-cell {
        display: block;
        text-align: left;
        border: none;
        border-bottom: 1px solid #dee2e6;
        padding: 0.5rem 0.75rem;
        position: relative;
    }
    
    .css-table-cell:last-child {
        border-bottom: none;
    }
    
    .css-table-cell:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--bs-primary);
        display: inline-block;
        width: 40%;
        margin-right: 0.5rem;
    }
    
    .css-table-footer {
        display: block;
        margin-top: 1rem;
        padding: 0.75rem;
        background-color: #f8f9fa;
        border-radius: 0.375rem;
        text-align: center;
        font-weight: 600;
    }
}

/* CSS Table Variants */
.css-table-striped .css-table-row:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

.css-table-bordered .css-table-cell {
    border: 1px solid #dee2e6;
}

.css-table-hover .css-table-row:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.css-table-sm .css-table-cell {
    padding: 0.5rem;
}

.css-table-lg .css-table-cell {
    padding: 1rem;
}

/* CSS Table with fixed header */
.css-table-fixed-header {
    max-height: 400px;
    overflow-y: auto;
}

.css-table-fixed-header .css-table-header {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* CSS Table with text alignment utilities */
.css-table-cell.text-center {
    text-align: center;
}

.css-table-cell.text-end {
    text-align: right;
}

.css-table-cell.text-start {
    text-align: left;
}

/* CSS Table with vertical alignment utilities */
.css-table-cell.align-top {
    vertical-align: top;
}

.css-table-cell.align-middle {
    vertical-align: middle;
}

.css-table-cell.align-bottom {
    vertical-align: bottom;
}

/* CSS Table with background colors */
.css-table-cell.bg-primary {
    background-color: var(--bs-primary);
    color: white;
}

.css-table-cell.bg-success {
    background-color: var(--bs-success);
    color: white;
}

.css-table-cell.bg-warning {
    background-color: var(--bs-warning);
    color: #000;
}

.css-table-cell.bg-danger {
    background-color: var(--bs-danger);
    color: white;
}

.css-table-cell.bg-info {
    background-color: var(--bs-info);
    color: #000;
}

/* CSS Table with status indicators */
.css-table-cell.status-active {
    color: var(--bs-success);
    font-weight: 600;
}

.css-table-cell.status-inactive {
    color: var(--bs-secondary);
    font-weight: 600;
}

.css-table-cell.status-pending {
    color: var(--bs-warning);
    font-weight: 600;
}

.css-table-cell.status-error {
    color: var(--bs-danger);
    font-weight: 600;
}