:root {
     --red: #e60012;
     --red-dark: #c90010;
     --navy: #071b31;
     --ink: #111827;
     --muted: #6b7280;
     --line: #e5e7eb;
     --soft: #f6f7f9;
     --white: #fff;
     --shadow: 0 8px 24px rgba(15, 23, 42, .08);
     --radius: 10px;
     --container: 1320px;
     --header-h: 132px
 }

 * {
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     margin: 0;
     font-family: Inter, Arial, sans-serif;
     color: var(--ink);
     background: #fff;
     font-size: 15px;
     line-height: 1.55
 }

 img {
     max-width: 100%;
     display: block
 }

 a {
     text-decoration: none;
     color: inherit
 }

 button,
 input,
 select,
 textarea {
     font: inherit
 }

 .container {
     width: min(var(--container), calc(100% - 40px));
     margin-inline: auto
 }

 .section {
     padding: 20px 0;
 }

 .section--tight {
     padding: 24px 0
 }

 .section__head {
     display: flex;
     justify-content: space-between;
     align-items: end;
     gap: 20px;
     margin-bottom: 20px
 }

 .section__title {
     font-size: 16px;
     line-height: 1.2;
     margin: 0;
     font-weight: 800;
     text-transform: uppercase
 }

 .section__link {
     color: var(--red);
     font-weight: 700;
     font-size: 13px
 }

 .muted {
     color: var(--muted)
 }

 .topbar {
     background: var(--red);
     color: #fff;
     font-size: 12px
 }

 .topbar__inner {
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 18px
 }

 .topbar__group {
     display: flex;
     align-items: center;
     gap: 28px
 }

 .topbar i {
     margin-right: 6px
 }

 .site-header {
     position: relative;
     z-index: 20;
     background: #fff;
     box-shadow: 0 1px 0 var(--line)
 }

 .header-main {
     height: 77px;
     display: grid;
     grid-template-columns: 279px 1fr auto;
     align-items: center;
     gap: 45px;
 }

 .logo {
     display: flex;
     align-items: flex-end;
     gap: 5px;
     font-weight: 800
 }

 .logo img {
     max-height: 48px;
     width: auto;
 }

 .logo__uni {
     font-size: 34px;
     line-height: 1;
     color: var(--red);
     letter-spacing: -2px
 }

 .logo__trend {
     font-size: 24px;
     line-height: 1;
     color: #111
 }

 .logo small {
     display: block;
     font-size: 10px;
     color: #444;
     letter-spacing: 0
 }

 .search {
     display: flex;
     border: 1px solid #d9dde4;
     border-radius: 6px;
     overflow: hidden;
     height: 42px;
     background: #fff
 }

 .search input {
     border: 0;
     outline: 0;
     flex: 1;
     padding: 0 16px;
     color: #333
 }

 .search button {
     width: 52px;
     border: 0;
     background: var(--red);
     color: #fff
 }

 .header-actions {
     display: flex;
     align-items: center;
     gap: 22px
 }

 .header-action {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px
 }

 .header-action i {
     font-size: 22px
 }

 .header-action strong {
     display: block;
     font-size: 13px
 }

 .cart-badge {
     position: absolute;
     top: -6px;
     right: -8px;
     background: var(--red);
     color: #fff;
     border-radius: 999px;
     font-size: 10px;
     min-width: 17px;
     height: 17px;
     display: grid;
     place-items: center
 }

 .header-action--cart {
     position: relative
 }

 .navbar {
     padding-top: 0 !important;
     padding-bottom: 0 !important;
     background: var(--red);
 }

 .navbar__inner {
     height: 54px;
     display: flex;
     align-items: center;
     gap: 28px
 }

 .category-btn {
     background: var(--navy);
     color: #fff;
     padding: 14px 18px;
     border-radius: 4px;
     font-weight: 700;
     min-width: 210px
 }

 .nav-menu {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex: 1;
     list-style: none;
     padding: 0;
     margin: 0
 }

 .nav-menu>li {
     position: relative;
 }

 .nav-menu>li>a {
     position: relative;
     display: block;
     padding: 17px 10px;
     font-size: 15px;
     font-weight: 700;
     color: #fff;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .nav-menu>li>a::after {
     content: '';
     position: absolute;
     bottom: 5px;
     left: 8px;
     right: 8px;
     height: 2px;
     background-color: transparent;
     border-radius: 1px;
     transition: background-color 0.2s ease;
 }

 .nav-menu>li>a:hover,
 .nav-menu>li>a.active {
     color: #fff;
 }

 .nav-menu>li>a:hover::after,
 .nav-menu>li>a.active::after {
     background-color: #ffffff;
 }

 .menu-toggle {
     display: none;
     border: 0;
     background: var(--red);
     color: #fff;
     width: 42px;
     height: 42px;
     border-radius: 5px
 }

 .hero {
     position: relative;
     background: #05070b;
     color: #fff;
     overflow: hidden
 }

 .hero__media {
     height: auto;
     width: 100%;
     display: block;
 }

 .hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .55) 42%, rgba(0, 0, 0, .08) 76%)
 }

 .hero__content {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center
 }

 .hero__copy {
     width: 520px
 }

 .hero__brand {
     font-size: 54px;
     color: var(--red);
     font-weight: 800;
     line-height: 1;
     margin-bottom: 10px
 }

 .hero h1 {
     font-size: 30px;
     line-height: 1.3;
     margin: 0 0 12px
 }

 .hero p {
     color: #e5e7eb;
     margin: 0 0 22px
 }

 .btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border-radius: 5px;
     padding: 12px 18px;
     border: 1px solid transparent;
     font-weight: 700;
     font-size: 13px;
     cursor: pointer;
     transition: .2s
 }

 .btn--red {
     background: var(--red);
     color: #fff
 }

 .btn--red:hover {
     background: var(--red-dark);
     color: #fff;
 }

 .btn--outline {
     border-color: var(--red);
     color: var(--red);
     background: #fff
 }

 .btn--outline:hover {
     background: var(--red);
     color: #fff;
     border-color: var(--red);
 }

 .btn--dark {
     background: #111827;
     color: #fff
 }

 .trust-row {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 10px;
     padding: 20px 0
 }

 .trust-item {
     display: flex;
     align-items: center;
     gap: 10px;
     justify-content: center;
     font-size: 13px;
     font-weight: 600
 }

 .trust-item i {
     font-size: 24px;
     color: var(--red)
 }

 .category-grid {
     display: grid;
     grid-template-columns: repeat(8, 1fr);
     border: 1px solid var(--line);
     border-radius: 10px;
     background: #fff;
     overflow: hidden;
 }

 .category-card {
     padding: 20px 8px;
     background: #fff;
     transition: .2s;
     border-right: 1px solid var(--line);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
 }

 .category-card:last-child {
     border-right: none;
 }

 .category-card:hover {
     background: #fdf2f3;
 }

 .category-card__icon {
     height: 90px;
     display: grid;
     place-items: center;
     margin-bottom: 26px;
 }

 .category-card__icon img {
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
 }

 .category-card__name {
     font-size: 12px;
     font-weight: 700;
     padding-top: 15px;
 }

 .product-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px
 }

 .product-card {
     border: 1px solid var(--line);
     border-radius: 8px;
     background: #fff;
     padding: 14px;
     position: relative;
     min-height: 310px;
     transition: .2s
 }

 .product-card:hover {
     box-shadow: var(--shadow);
     transform: translateY(-3px)
 }

 .product-card__badge {
     position: absolute;
     left: 12px;
     top: 12px;
     border-radius: 4px;
     background: #15a34a;
     color: #fff;
     padding: 3px 7px;
     font-size: 10px;
     font-weight: 800
 }

 .badge-heart {
     position: absolute;
     right: 12px;
     top: 12px;
     color: #a0aec0;
     font-size: 18px;
     transition: all 0.2s;
     background: transparent;
     z-index: 10;
 }

 .badge-heart:hover,
 .badge-heart.active {
     color: var(--red, #e30000);
 }

 .product-card__image {
     height: 215px;
     display: grid;
     place-items: center;
     overflow: hidden;
 }

 .product-card__image img {
     width: 100%;
     height: 100%;
     object-fit: contain
 }

 .product-card h3 {
     font-size: 14px;
     font-weight: 700;
     margin: 8px 0 4px;
     line-height: 1.4;
     height: 4.2em;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
 }

 .product-card h3 a {
     color: inherit;
     text-decoration: none;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .product-card__features {
     font-size: 12px;
     color: #666;
     margin-top: 6px;
     line-height: 1.4;
     height: 2.8em;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .product-card__features *,
 .product-card__features ul,
 .product-card__features li,
 .product-card__features p,
 .product-card__features div {
     margin: 0;
     padding: 0;
     list-style: none;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .product-card__model {
     font-size: 11px;
     color: var(--muted)
 }

 .price {
     color: var(--red);
     font-weight: 800;
     margin-top: 10px;
     text-align: center;
 }

 .product-card .price {
     text-align: center;
 }

 .company-band {
     display: flex;
     align-items: stretch;
     border: 1px solid var(--line);
     border-radius: 10px;
     background: #fff;
     overflow: hidden;
     padding: 0
 }

 .company-band__image {
     width: 280px;
     height: auto;
     min-height: 100%;
     object-fit: cover;
     object-position: left
 }

 .company-band__content {
     flex: 1;
     padding: 30px 20px;
     text-align: center
 }

 .company-band__content h3 {
     font-size: 18px;
     margin: 0 0 20px;
     font-weight: 800
 }

 .company-band__cert {
     width: 400px;
     padding: 30px 20px 20px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
 }

 .company-band__cert img {
     width: 100%;
     height: auto
 }

 .feature-list {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 10px;
     margin-top: 20px
 }

 .feature-item {
     display: flex;
     flex-direction: column;
     align-items: center
 }

 .feature-item i {
     width: 50px;
     height: 50px;
     display: grid;
     place-items: center;
     border: 1.5px solid var(--red);
     border-radius: 50%;
     font-size: 22px;
     color: var(--red)
 }

 .feature-item strong {
     display: block;
     font-size: 11px;
     margin-top: 8px;
     font-weight: 600
 }

 .industry-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 12px
 }

 .industry-card {
     height: 240px;
     border-radius: 8px;
     overflow: hidden;
     position: relative;
     color: #fff;
     background: #111
 }

 .industry-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease
 }

 .industry-card:hover img {
     transform: scale(1.05)
 }

 .industry-card::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, transparent 40%, rgba(0, 0, 0, 0.95) 100%);
     pointer-events: none
 }

 .industry-card img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .industry-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(transparent, rgba(2, 6, 23, .88))
 }

 .industry-card__content {
     position: absolute;
     z-index: 1;
     left: 14px;
     right: 14px;
     bottom: 14px;
     display: flex;
     flex-direction: column;
     gap: 6px
 }

 .industry-card__title {
     display: flex;
     align-items: center;
     gap: 6px;
     flex-wrap: nowrap
 }

 .industry-card__title i {
     font-size: 18px;
     color: #fff;
     flex-shrink: 0
 }

 .industry-card__title h3 {
     margin: 0;
     font-size: 13px;
     font-weight: 700;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
 }

 .industry-card p {
     margin: 0;
     font-size: 11px;
     color: #ccc;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden
 }

 .industry-card h3 {
     font-size: 14px;
     margin: 0 0 5px
 }

 .industry-card p {
     font-size: 11px;
     margin: 0;
     color: #ddd
 }

 .split-grid {
     display: grid;
     grid-template-columns: 1.1fr .9fr;
     gap: 18px
 }

 .panel {
     border: 1px solid var(--line);
     border-radius: 10px;
     padding: 18px;
     background: #fff
 }

 .panel h3 {
     font-size: 18px;
     margin: 0 0 16px
 }

 .download-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px
 }

 .download-grid-5 {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 12px;
 }

 .download-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px;
     border: 1px solid var(--line);
     border-radius: 7px;
     background: #fff;
 }

 .download-item:hover {
     border-color: var(--red);
     box-shadow: var(--shadow);
 }

 .download-btn-sm {
     display: inline-block;
     color: var(--red);
     border: 1px solid var(--red);
     border-radius: 4px;
     padding: 2px 10px;
     font-size: 11px;
     font-weight: 700;
     margin-top: 6px;
     transition: 0.2s;
 }

 .download-btn-sm:hover {
     background: var(--red);
     color: #fff;
 }

 .download-item i {
     font-size: 24px;
     color: var(--red)
 }

 .news-list {
     display: grid;
     gap: 10px
 }

 .news-item {
     display: grid;
     grid-template-columns: 86px 1fr;
     gap: 12px;
     align-items: center
 }

 .news-item img {
     width: 86px;
     height: 58px;
     object-fit: cover;
     border-radius: 5px
 }

 .news-item h4 {
     font-size: 12px;
     margin: 0
 }

 .news-item time {
     font-size: 10px;
     color: var(--red)
 }

 .page-hero {
     position: relative;
     background: #0b0f15;
     color: #fff;
     overflow: hidden
 }

 .page-hero img {
     width: 100%;
     height: auto;
     display: block;
 }

 .page-hero::after {
     display: none;
 }

 .page-hero__content {
     position: absolute;
     z-index: 2;
     inset: 0;
     display: flex;
     align-items: center
 }

 .page-hero h1 {
     font-size: 34px;
     margin: 0 0 8px
 }

 .page-hero p {
     max-width: 540px;
     color: #e5e7eb
 }

 .breadcrumbs {
     font-size: 12px;
     color: #6b7280;
     padding: 14px 0
 }

 .breadcrumbs a {
     color: #374151
 }

 .stat-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     border: 1px solid var(--line);
     border-radius: 8px;
     overflow: hidden
 }

 .stat {
     padding: 24px 10px;
     border-right: 1px solid var(--line);
     text-align: center;
 }

 .stat:last-child {
     border-right: 0
 }

 .stat strong {
     display: block;
     color: var(--red);
     font-size: 28px;
     font-weight: 800;
     margin-bottom: 5px;
 }

 .stat span {
     font-size: 13px;
     color: #444;
 }

 .core-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     border: 1px solid var(--line);
     border-radius: 8px;
     overflow: hidden;
 }

 .core-card {
     padding: 24px 12px;
     text-align: center;
     transition: 0.2s;
     border-right: 1px solid var(--line);
 }

 .core-card:last-child {
     border-right: 0;
 }

 .core-card:hover {
     box-shadow: var(--shadow);
     transform: translateY(-3px);
 }

 .core-card i {
     color: var(--red);
     font-size: 42px;
     margin-bottom: 12px;
     display: inline-block;
     width: 100%;
     text-align: center;
 }

 .core-card h3 {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 8px;
 }

 .core-card p {
     font-size: 11.5px;
     line-height: 1.5;
     margin-bottom: 0;
     color: #666;
 }

 .timeline {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 0;
     position: relative;
     padding-right: 10px;
 }

 .timeline::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 11px;
     height: 2px;
     background: #bbb
 }

 .timeline::after {
     content: "";
     position: absolute;
     right: 0;
     top: 7px;
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 8px solid #bbb;
 }

 .timeline__item {
     position: relative;
     padding-top: 32px;
     font-size: 11px;
     text-align: center;
     padding-left: 5px;
     padding-right: 5px;
 }

 .timeline__item strong {
     display: block;
     color: var(--red);
     font-size: 14px;
     margin-bottom: 4px;
 }

 .timeline__item::before {
     content: "";
     position: absolute;
     top: 5px;
     left: 50%;
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: var(--red);
     transform: translateX(-50%)
 }

 .content-layout {
     display: grid;
     grid-template-columns: 290px 1fr;
     gap: 18px
 }

 .sidebar {
     display: grid;
     gap: 16px;
     align-self: start
 }

 .sidebar-box {
     border: 1px solid var(--line);
     border-radius: 8px;
     background: #fff;
     padding: 16px
 }

 .sidebar-box h3 {
     font-size: 15px;
     margin: 0 0 14px
 }

 .filter-list {
     display: grid;
     gap: 10px;
     font-size: 13px
 }

 .filter-list label {
     display: flex;
     align-items: center;
     gap: 8px
 }

 .toolbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 12px 14px;
     border: 1px solid var(--line);
     border-radius: 8px;
     margin-bottom: 14px
 }

 .pagination {
     display: flex;
     justify-content: center;
     gap: 8px;
     margin: 24px 0
 }

 .pagination a {
     width: 36px;
     height: 36px;
     border: 1px solid var(--line);
     display: grid;
     place-items: center;
     border-radius: 5px
 }

 .pagination a.active {
     background: var(--red);
     color: #fff;
     border-color: var(--red)
 }

 .product-detail {
     display: grid;
     grid-template-columns: 1.05fr .95fr .75fr;
     gap: 24px
 }

 .gallery {
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 16px
 }

 .gallery__main {
     height: 420px;
     display: grid;
     place-items: center
 }

 .gallery__main img {
     width: 100%;
     height: 100%;
     object-fit: contain
 }

 .gallery__thumbs {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 8px;
     margin-top: 10px
 }

 .gallery__thumb {
     height: 70px;
     border: 1px solid var(--line);
     border-radius: 6px;
     padding: 4px
 }

 .product-info h1 {
     font-size: 24px;
     line-height: 1.35;
     margin: 0 0 16px
 }

 .product-meta {
     display: grid;
     grid-template-columns: 110px 1fr;
     gap: 8px;
     font-size: 13px
 }

 .product-price {
     font-size: 24px;
     color: var(--red);
     font-weight: 800;
     margin: 22px 0
 }

 .quantity {
     display: flex;
     align-items: center;
     gap: 0;
     margin: 16px 0
 }

 .quantity button,
 .quantity input {
     width: 40px;
     height: 38px;
     border: 1px solid var(--line);
     background: #fff;
     text-align: center
 }

 .purchase-actions {
     display: grid;
     gap: 10px
 }

 .commitment {
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 16px
 }

 .commitment h3 {
     font-size: 15px
 }

 .commitment-item {
     display: flex;
     gap: 12px;
     margin: 18px 0
 }

 .commitment-item i {
     color: var(--red);
     font-size: 22px
 }

 .accordion {
     border: 1px solid var(--line);
     border-radius: 8px;
     overflow: hidden
 }

 .accordion__item+.accordion__item {
     border-top: 1px solid var(--line)
 }

 .accordion__button {
     width: 100%;
     display: flex;
     justify-content: space-between;
     padding: 16px;
     border: 0;
     background: #fff;
     font-weight: 700;
     text-align: left
 }

 .accordion__content {
     display: none;
     padding: 0 16px 18px;
     color: #4b5563
 }

 .accordion__item.open .accordion__content {
     display: block
 }

 .solution-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 12px
 }

 .solution-card {
     border: 1px solid var(--line);
     border-radius: 10px;
     overflow: hidden;
     background: #fff
 }

 .solution-card img {
     height: 170px;
     width: 100%;
     object-fit: cover
 }

 .solution-card__body {
     padding: 14px
 }

 .solution-card h3 {
     font-size: 14px;
     margin: 0 0 7px
 }

 .application-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 12px
 }

 .application-card {
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 22px 15px;
     text-align: center
 }

 .application-card i {
     font-size: 34px;
     color: var(--red)
 }

 .application-card h3 {
     font-size: 14px
 }

 .featured-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px
 }

 .featured-card {
     height: 220px;
     border-radius: 10px;
     overflow: hidden;
     position: relative;
     color: #fff
 }

 .featured-card img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .featured-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(transparent, rgba(0, 0, 0, .85))
 }

 .featured-card__body {
     position: absolute;
     z-index: 1;
     left: 18px;
     right: 18px;
     bottom: 18px
 }

 .resource-list {
     display: grid;
     gap: 15px;
 }

 .resource-row {
     display: grid;
     grid-template-columns: 350px 1fr;
     gap: 13px;
     border: 1px solid var(--line);
     border-radius: 9px;
     padding: 10px;
     align-items: stretch;
     background: #fff;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
 }

 .resource-product {
     display: flex;
     align-items: center;
     gap: 11px;
     border-right: 1px solid var(--line);
     padding-right: 20px;
 }

 .resource-product img {
     width: 130px;
     height: 160px;
     object-fit: contain;
 }

 .resource-product-info h3 {
     font-size: 15px;
     margin: 0 0 6px;
     color: #111;
     font-weight: 700;
 }

 .resource-product-info .muted {
     font-size: 14px;
     display: block;
     margin-bottom: 18px;
 }

 .view-detail-link {
     font-size: 14px;
     color: var(--red);
     font-weight: 600;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     white-space: nowrap;
 }

 .resource-files {
     display: flex;
     flex-wrap: wrap;
     align-content: flex-start;
 }

 .file-chip {
     display: flex;
     align-items: center;
     gap: 10px;
     border: none;
     padding: 0 10px 20px 0;
     text-decoration: none;
     background: transparent;
     width: 33.33%;
     box-sizing: border-box;
     transition: opacity 0.2s;
 }

 .file-chip:hover {
     opacity: 0.8;
 }

 .file-chip:nth-child(-n+3) {
     border-bottom: 1px solid var(--line);
     margin-bottom: 20px;
 }

 .file-chip i {
     font-size: 26px;
 }

 .file-chip-info {
     display: flex;
     flex-direction: column;
 }

 .file-chip-info strong {
     font-size: 12px;
     color: #111;
 }

 .file-chip-info span {
     font-size: 11px;
     color: #666;
     margin-top: 2px;
 }

 .resource-meta-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
     padding-left: 20px;
 }

 .resource-meta {
     display: flex;
     flex-direction: column;
     margin-bottom: 15px;
     width: 100%;
 }

 .meta-item {
     display: flex;
     flex-direction: column;
     font-size: 12px;
 }

 .meta-item:first-child {
     border-bottom: 1px solid var(--line);
     padding-bottom: 20px;
     margin-bottom: 20px;
 }

 .meta-item {
     display: flex;
     flex-direction: column;
     font-size: 12px;
 }

 .meta-item .muted {
     margin-bottom: 2px;
 }

 .btn--outline-red {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 6px;
     border: 1px solid var(--red);
     color: var(--red);
     background: #fff;
     padding: 6px 14px;
     border-radius: 4px;
     font-size: 12px;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.2s;
     width: 100%;
 }

 .btn--outline-red:hover {
     background: var(--red);
     color: #fff;
 }

 .video-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px
 }

 .video-card {
     border: 1px solid var(--line);
     border-radius: 8px;
     overflow: hidden;
     background: #fff
 }

 .video-thumb {
     position: relative;
     height: 170px
 }

 .video-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }

 .video-thumb__play {
     position: absolute;
     inset: 0;
     display: grid;
     place-items: center
 }

 .video-thumb__play span {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     background: #fff;
     color: var(--red);
     display: grid;
     place-items: center;
     font-size: 18px
 }

 .video-play-badge {
     width: 38px;
     height: 38px;
     background-color: #ffffff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
     transition: all 0.25s ease;
     z-index: 2;
     pointer-events: none;
 }

 .video-play-badge i {
     color: #e30000;
     font-size: 13px;
     margin-left: 2px;
     transition: color 0.25s ease;
 }

 .video-card:hover .video-play-badge,
 a:hover .video-play-badge {
     background-color: #e30000;
     transform: translate(-50%, -50%) scale(1.12);
 }

 .video-card:hover .video-play-badge i,
 a:hover .video-play-badge i {
     color: #ffffff;
 }

 .video-card__body {
     padding: 12px
 }

 .video-card h3 {
     font-size: 14px;
     margin: 0 0 8px
 }

 .article-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px
 }

 .article-card {
     border: 1px solid var(--line);
     border-radius: 8px;
     overflow: hidden;
     background: #fff
 }

 .article-card img {
     height: 200px;
     width: 100%;
     width: 100%;
     object-fit: cover
 }

 .article-card__body {
     padding: 14px
 }

 .article-card h3 {
     font-size: 16px;
     margin: 0 0 8px
 }





 .contact-grid {
     display: grid;
     grid-template-columns: .8fr 1.2fr;
     gap: 18px
 }

 .contact-card,
 .contact-form {
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 22px;
     background: #fff
 }

 .contact-info {
     display: grid;
     gap: 18px
 }

 .contact-info__row {
     display: flex;
     gap: 14px
 }

 .contact-info__row i {
     color: var(--red);
     font-size: 22px
 }

 .form-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 14px
 }

 .form-control {
     width: 100%;
     border: 1px solid var(--line);
     border-radius: 6px;
     padding: 12px 14px;
     outline: none
 }

 .form-control:focus {
     border-color: #ef6671;
     box-shadow: 0 0 0 3px rgba(230, 0, 18, .08)
 }

 textarea.form-control {
     min-height: 140px;
     height: 100%;
     resize: vertical
 }

 .form-group--full {
     grid-column: 1/-1
 }

 .cta-strip {
     background: linear-gradient(90deg, #c90b18, #ed1c24);
     color: #fff;
     padding: 22px 0
 }

 .cta-strip__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px
 }

 .site-footer {
     background: var(--navy);
     color: #d6dfeb
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1.1fr 0.85fr 0.85fr 1.3fr;
     gap: 20px;
     padding: 2px 0;
     margin: 0 auto;
 }

 .footer-logo {
     font-size: 30px;
     font-weight: 800;
     color: #fff
 }

 .footer-logo span {
     color: var(--red)
 }

 .footer-col h3 {
     font-size: 14px;
     color: #fff;
     margin: 0 0 16px
 }

 .footer-links {
     display: grid;
     gap: 8px;
     font-size: 12px
 }

 .footer-meta {
     font-size: 12px;
     color: #9fb0c2
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .1);
     padding: 14px 0;
     font-size: 11px;
     display: flex;
     justify-content: space-between
 }

 .back-to-top {
     position: fixed;
     right: 18px;
     bottom: 18px;
     width: 42px;
     height: 42px;
     border: 0;
     border-radius: 50%;
     background: var(--red);
     color: #fff;
     display: none;
     z-index: 30;
     padding: 0;
 }

 .about-intro-text p {
     margin-bottom: 8px;
 }

 .about-intro-text p:last-child {
     margin-bottom: 0;
 }

 /* About Gallery */
 .about-gallery {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 15px;
 }

 .about-gallery__item {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     box-shadow: var(--shadow);
 }

 .about-gallery__item .carousel-inner,
 .about-gallery__item .carousel-item {
     height: 100%;
 }

 .about-gallery__item img {
     width: 100%;
     height: 220px;
     object-fit: cover;
     display: block;
     transition: transform 0.5s ease;
 }

 .about-gallery__item:hover img {
     transform: scale(1.05);
 }

 .about-gallery__title {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: rgba(0, 0, 0, 0.75);
     color: #fff;
     padding: 10px;
     text-align: center;
     font-size: 14px;
     font-weight: 700;
     z-index: 10;
     transition: background 0.3s ease, color 0.3s ease;
 }

 .about-gallery__item:hover .about-gallery__title {
     background: var(--red);
 }

 /* === RESPONSIVE === */
 @media(max-width:1200px) {
     :root {
         --container: 1080px
     }

     .category-grid {
         grid-template-columns: repeat(4, 1fr)
     }

     .industry-grid,
     .solution-grid,
     .application-grid {
         grid-template-columns: repeat(3, 1fr)
     }

     .product-detail {
         grid-template-columns: 1fr 1fr
     }

     .commitment {
         grid-column: 1/-1
     }

     .footer-grid {
         grid-template-columns: repeat(2, 1fr)
     }
 }

 @media(max-width:992px) {
     .topbar__group:last-child {
         display: none
     }

     .header-main {
         grid-template-columns: 190px 1fr auto
     }

     .header-actions .header-action:first-child {
         display: none
     }

     .navbar__inner {
         justify-content: space-between
     }

     .menu-toggle {
         display: block
     }

     .category-btn {
         min-width: auto
     }

     .nav-menu {
         position: absolute;
         left: 0;
         right: 0;
         top: 160px;
         background: #fff;
         display: none;
         flex-direction: column;
         align-items: stretch;
         padding: 8px 20px;
         box-shadow: var(--shadow)
     }

     .nav-menu.open {
         display: flex
     }

     .nav-menu>li>a {
         padding: 12px
     }



     .hero__copy {
         width: 55%
     }

     .hero__brand {
         font-size: 44px
     }

     .product-grid {
         grid-template-columns: repeat(3, 1fr)
     }

     .company-band {
         display: flex;
         align-items: stretch;
         border: 1px solid var(--line);
         border-radius: 10px;
         background: #fff;
         overflow: hidden;
         padding: 0
     }

     .company-band>:last-child {
         grid-column: 1/-1
     }

     .content-layout {
         grid-template-columns: 220px 1fr
     }

     .product-detail {
         grid-template-columns: 1fr 1fr
     }

     .solution-grid,
     .application-grid {
         grid-template-columns: repeat(3, 1fr)
     }

     .resource-row {
         grid-template-columns: 130px 1fr
     }

     .resource-download {
         grid-column: 1/-1;
         text-align: left
     }

     .video-grid,
     .article-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .contact-grid {
         grid-template-columns: 1fr
     }

     .contact-hero {
         grid-template-columns: 1fr 1fr
     }
 }

 @media(max-width:768px) {
     .container {
         width: min(100% - 28px, var(--container))
     }

     .topbar__inner {
         justify-content: center
     }

     .topbar__group {
         gap: 10px
     }

     .topbar__group span:nth-child(n+2) {
         display: none
     }

     .header-main {
         height: auto;
         padding: 14px 0;
         grid-template-columns: 1fr auto
     }

     .search {
         grid-column: 1/-1;
         grid-row: 2
     }

     .header-actions {
         gap: 12px
     }

     .header-action span {
         display: none
     }

     .navbar__inner {
         height: 48px
     }

     .nav-menu {
         top: 160px
     }



     .hero__overlay {
         background: rgba(0, 0, 0, .65)
     }

     .hero__copy {
         width: 100%
     }

     .hero__brand {
         font-size: 42px
     }

     .hero h1 {
         font-size: 25px
     }

     .trust-row {
         grid-template-columns: repeat(2, 1fr)
     }

     .category-grid {
         grid-template-columns: repeat(4, 1fr)
     }

     .product-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .company-band {
         display: flex;
         align-items: stretch;
         border: 1px solid var(--line);
         border-radius: 10px;
         background: #fff;
         overflow: hidden;
         padding: 0
     }

     .feature-list {
         grid-template-columns: repeat(2, 1fr)
     }

     .industry-grid,
     .solution-grid,
     .application-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .split-grid {
         grid-template-columns: 1fr
     }

     .stat-grid,
     .core-grid {
         grid-template-columns: repeat(3, 1fr)
     }

     .timeline {
         grid-template-columns: repeat(2, 1fr);
         gap: 18px
     }

     .timeline::before {
         display: none
     }

     .content-layout {
         grid-template-columns: 1fr
     }

     .sidebar {
         grid-template-columns: repeat(2, 1fr)
     }

     .product-detail {
         grid-template-columns: 1fr
     }

     .featured-grid {
         grid-template-columns: 1fr
     }

     .resource-row {
         grid-template-columns: 1fr
     }

     .resource-files {
         grid-template-columns: repeat(2, 1fr)
     }

     .contact-hero {
         grid-template-columns: 1fr
     }

     .contact-hero img {
         height: 220px
     }

     .footer-grid {
         grid-template-columns: 1fr 1fr
     }

     .cta-strip__inner {
         flex-direction: column;
         align-items: flex-start
     }
 }

 @media(max-width:576px) {
     body {
         font-size: 14px
     }

     .logo__uni {
         font-size: 28px
     }

     .logo__trend {
         font-size: 19px
     }

     .header-action i {
         font-size: 20px
     }

     .category-btn {
         font-size: 12px;
         padding: 12px
     }

     .section {
         padding: 25px 0
     }

     .section__title {
         font-size: 21px
     }



     .hero__content {
         align-items: flex-end;
         padding-bottom: 30px
     }

     .category-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .product-grid {
         grid-template-columns: 1fr
     }

     .product-card {
         min-height: auto
     }

     .industry-grid,
     .solution-grid,
     .application-grid {
         grid-template-columns: 1fr
     }

     .stat-grid,
     .core-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .sidebar {
         grid-template-columns: 1fr
     }

     .toolbar {
         align-items: flex-start;
         gap: 10px;
         flex-direction: column
     }

     .gallery__main {
         height: 330px
     }

     .video-grid,
     .article-grid {
         grid-template-columns: 1fr
     }

     .resource-files {
         grid-template-columns: 1fr
     }

     .form-grid {
         grid-template-columns: 1fr
     }

     .footer-grid {
         grid-template-columns: 1fr
     }

     .footer-bottom {
         flex-direction: column;
         gap: 8px
     }

     .download-grid {
         grid-template-columns: 1fr
     }
 }

 @media(max-width:390px) {
     .header-main {
         grid-template-columns: 1fr auto
     }

     .header-actions {
         gap: 8px
     }

     .hero__brand {
         font-size: 38px
     }

     .hero h1 {
         font-size: 22px
     }

     .trust-row {
         grid-template-columns: 1fr
     }

     .stat-grid,
     .core-grid {
         grid-template-columns: 1fr
     }

     .gallery__main {
         height: 280px
     }
 }

 /* Brand Download Panel */
 .brand-download-panel {
     overflow: hidden;
     border: none;
     box-shadow: none;
     background: transparent;
 }

 .brand-download-panel__img-col {
     padding: 0;
     display: flex;
     align-items: center;
 }

 .brand-download-panel__img {
     width: 100%;
     height: auto;
     border-radius: var(--radius);
     box-shadow: var(--shadow);
     display: block;
 }

 .brand-download-panel__content-col {
     padding: 15px 15px 15px 30px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 15px;
 }

 .brand-download-panel__title {
     font-weight: 800;
     font-size: 18px;
     margin: 0 0 2px;
     text-transform: uppercase;
 }

 .brand-download-panel__desc {
     color: #666;
     font-size: 13px;
     margin: 0 0 10px;
 }

 .brand-download-panel__link {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     transition: opacity 0.3s;
 }

 .brand-download-panel__link:hover {
     opacity: 0.8;
 }

 .brand-download-panel__icon {
     font-size: 26px;
     color: var(--red);
     width: 30px;
 }

 .brand-download-panel__item-title {
     display: block;
     font-size: 15px;
     margin-bottom: 4px;
     color: #222;
 }

 .brand-download-panel__item-desc {
     font-size: 11.5px;
     color: #777;
     display: block;
 }

 .brand-download-panel__item-desc--nowrap {
     white-space: nowrap;
 }

 .brand-download-panel__footer {
     text-align: right;
 }

 .brand-download-panel__view-all {
     color: var(--red);
     font-size: 13px;
     font-weight: 700;
 }

 /* Swiper modifications */
 .product-swiper,
 .home-product-swiper {
     /* space for pagination */
 }

 .product-swiper .swiper-pagination,
 .home-product-swiper .swiper-pagination {
     position: relative !important;
     bottom: auto !important;
     margin-top: 15px !important;
 }

 .product-swiper .swiper-pagination-bullet,
 .home-product-swiper .swiper-pagination-bullet {
     width: 10px;
     height: 10px;
 }

 .product-swiper .swiper-pagination-bullet-active,
 .home-product-swiper .swiper-pagination-bullet-active {
     background: var(--red);
 }

 /* Video & News Section */
 .video-panel {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .video-panel__title {
     font-size: 18px;
     font-weight: 800;
     margin: 0 0 15px;
     text-transform: uppercase;
 }

 .video-panel__inner {
     display: flex;
     gap: 15px;
     align-items: stretch;
 }

 .video-main {
     min-height: 260px;
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     flex: 0 0 50%;
     display: block;
     align-self: stretch;
 }

 .video-main__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .video-main__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 60%);
     display: flex;
     flex-direction: row;
     align-items: flex-end;
     justify-content: space-between;
     padding: 15px;
     color: #fff;
     gap: 10px;
 }

 .video-main__play {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 50px;
     height: 50px;
     background: var(--red);
     color: #fff;
     border-radius: 50%;
     display: grid;
     place-items: center;
     font-size: 20px;
 }

 .video-main__title {
     font-size: 14px;
     font-weight: 700;
     margin: 0;
     line-height: 1.4;
 }

 .video-main__btn {
     border: 1px solid rgba(255, 255, 255, 0.5);
     padding: 4px 10px;
     border-radius: 4px;
     font-size: 11px;
     color: #fff;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 5px;
     flex-shrink: 0;
     transition: background 0.3s;
 }

 .video-main__btn:hover {
     background: rgba(255, 255, 255, 0.2);
 }

 .video-small {
     display: flex;
     flex-direction: row;
     align-items: center;
     gap: 12px;
     text-decoration: none !important;
     color: inherit;
     transition: transform 0.2s ease;
 }

 .video-small:hover {
     transform: translateX(4px);
 }

 .video-small__thumb {
     width: 135px;
     height: 76px;
     flex-shrink: 0;
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     background: #000;
 }

 .video-small__img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s;
 }

 .video-small:hover .video-small__img {
     transform: scale(1.06);
 }

 .video-small__duration {
     position: absolute;
     bottom: 5px;
     right: 5px;
     background: rgba(0, 0, 0, 0.85);
     color: #fff;
     font-size: 10px;
     padding: 2px 6px;
     border-radius: 4px;
     font-weight: 700;
 }

 .video-small__title {
     font-size: 13px;
     font-weight: 600;
     color: #222222;
     margin: 0;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     transition: color 0.2s ease;
 }

 .video-small:hover .video-small__title {
     color: var(--red, #e30000);
 }

 .video-small-list {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .video-small-grid {
     display: flex;
     flex-direction: column;
     gap: 12px;
     justify-content: space-between;
     height: 100%;
 }

 .video-panel__footer {
     margin-top: 15px;
     text-align: center;
 }

 .video-panel__link {
     color: var(--red);
     font-size: 12px;
     font-weight: 700;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }

 .news-panel {
     display: flex;
     flex-direction: column;
     height: 100%;
 }

 .news-panel__title {
     font-size: 18px;
     font-weight: 800;
     margin: 0 0 15px;
     text-transform: uppercase;
 }

 .news-panel__list {
     display: flex;
     flex-direction: column;

     flex: 1;
 }

 .news-card {
     padding: 10px;
     margin-bottom: 15px;
     border: 1px solid #eaedf1;
     border-radius: 8px;
     display: flex;
     gap: 15px;
     align-items: center;
     text-decoration: none;
     color: inherit;
     transition: 0.2s;
     background: #fff;
 }

 .news-card__media {
     display: flex;
     align-items: stretch;
     border-radius: 8px;
     overflow: hidden;
     height: 65px;
     flex-shrink: 0;
     box-shadow: var(--shadow);
     border: 1px solid var(--line);
 }

 .news-card:hover {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
     border-color: #d1d5db;
 }

 .news-card__date {
     background: var(--red);
     color: #fff;
     width: 65px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 5px;
 }

 .news-card__day {
     font-size: 24px;
     font-weight: 800;
     line-height: 1;
     margin-bottom: 2px;
 }

 .news-card__month {
     font-size: 10px;
     font-weight: 600;
 }

 .news-card__img {
     width: 110px;
     height: 100%;
     object-fit: cover;
 }

 .news-card__content {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     flex: 1;
 }

 .news-card__title {
     font-size: 13px;
     font-weight: 700;
     margin: 0 0 6px;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .news-card__more {
     color: var(--red);
     font-size: 12px;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .news-panel__footer {
     text-align: right;
     margin-top: 15px;
 }

 .news-panel__link {
     color: var(--red);
     font-size: 12px;
     font-weight: 700;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }

 /* CTA Strip */
 .cta-strip {
     background: linear-gradient(90deg, #b81c20 0%, #e32228 100%);
     color: #fff;
     padding: 8px 0;
     margin-top: 10px;
 }

 .cta-strip__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
 }

 .cta-strip__left {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 .cta-strip__icon-main {
     width: 65px;
     height: 65px;
     border: 1px solid rgba(255, 255, 255, 0.4);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     flex-shrink: 0;
 }

 .cta-strip__text h3 {
     font-size: 18px;
     font-weight: 800;
     margin: 0 0 5px 0;
     text-transform: uppercase;
     line-height: 1.2;
 }

 .cta-strip__text p {
     font-size: 14px;
     margin: 0;
     opacity: 0.9;
 }

 .cta-strip__features {
     display: flex;
     align-items: center;
     gap: 25px;
 }

 .cta-strip__feature {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .cta-strip__feature i {
     font-size: 24px;
     opacity: 0.9;
     width: 30px;
 }

 .cta-strip__feature span {
     font-size: 12px;
     line-height: 1.4;
     font-weight: 400;
 }

 .cta-strip__divider {
     width: 1px;
     height: 35px;
     background: rgba(255, 255, 255, 0.3);
 }

 .cta-strip__btn {
     border: 1px solid #fff;
     background: #fff;
     color: var(--red);
     padding: 10px 25px;
     border-radius: 30px;
     font-weight: 700;
     font-size: 13px;
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     transition: all 0.3s;
     white-space: nowrap;
 }

 .cta-strip__btn:hover {
     background: transparent;
     color: #fff;
 }

 @media (max-width: 1200px) {
     .cta-strip__inner {
         flex-direction: column;
         gap: 30px;
     }

     .cta-strip__left {
         flex-direction: column;
     }

     .cta-strip__features {
         flex-wrap: wrap;
         justify-content: center;
     }

     .cta-strip__divider {
         display: none;
     }
 }

 /* Footer */
 .site-footer {
     background-color: #0f1d30;
     color: #a0aab8;
     font-size: 13px;
     padding-top: 17px;
 }

 .site-footer a {
     color: #a0aab8;
     text-decoration: none;
     transition: color 0.3s;
 }

 .site-footer a:hover {
     color: #fff;
 }

 .footer-grid {
     display: grid;
     grid-template-columns: 1.4fr 0.95fr 1.05fr 1.9fr;
     gap: 0;
     padding-bottom: 40px;
 }

 .footer-col {
     padding: 0 11px;
     border-right: 1px dashed rgba(255, 255, 255, 0.1);
 }

 .footer-col:first-child {
     padding-left: 0;
 }

 .footer-col:last-child {
     padding-right: 0;
     border-right: none;
 }

 .footer-logo {
     font-size: 28px;
     font-weight: 800;
     line-height: 1;
     margin-bottom: 5px;
 }

 .footer-company {
     font-size: 11px;
     text-transform: uppercase;
     margin-bottom: 20px;
     color: #fff;
 }

 .footer-title-small {
     font-size: 12px;
     font-weight: 400;
     color: #a0aab8;
     margin-bottom: 15px;
     line-height: 1.5;
 }

 .footer-title-small p {
     margin-bottom: 5px;
 }

 .footer-contact-custom {
     color: #a0aab8;
     font-size: 13px;
     line-height: 1.6;
 }

 .footer-contact-custom p {
     margin-bottom: 8px;
 }

 .footer-contact-custom p:last-child {
     margin-bottom: 0;
 }

 .footer-checklist {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
 }

 .footer-checklist li {
     display: flex;
     gap: 8px;
     align-items: flex-start;
     margin-bottom: 8px;
     line-height: 1.4;
 }

 .footer-checklist li i {
     margin-top: 3px;
     font-size: 12px;
 }

 .btn-cert {
     display: inline-block;
     background: var(--red);
     color: #fff;
     padding: 6px 15px;
     border-radius: 4px;
     font-size: 11px;
     font-weight: 700;
     margin-bottom: 20px;
 }

 .btn-cert:hover {
     background: #d32025;
     color: #fff;
 }

 .footer-socials {
     display: flex;
     gap: 10px;
 }

 .footer-socials a {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     display: grid;
     place-items: center;
     color: #fff;
     font-size: 14px;
 }

 .social-youtube {
     background: #ff0000;
 }

 .social-facebook {
     background: #1877f2;
 }

 .social-zalo {
     background: #0068ff;
     font-weight: 800;
     font-size: 10px !important;
     text-decoration: none !important;
 }

 .social-linkedin {
     background: #0a66c2;
 }

 .footer-heading {
     font-size: 14px;
     font-weight: 700;
     color: #fff;
     margin-bottom: 20px;
     text-transform: uppercase;
 }

 .footer-list {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
 }

 .footer-list li {
     margin-bottom: 12px;
 }

 .footer-list li a {
     display: flex;
     gap: 10px;
     align-items: center;
 }

 .footer-list li a i {
     width: 20px;
     font-size: 16px;
     opacity: 0.7;
 }

 .footer-link-more {
     color: #fff !important;
     font-size: 13px;
     font-weight: 700;
     display: inline-flex;
     align-items: center;
     gap: 5px;
 }

 .footer-contact {
     list-style: none;
     padding: 0;
     margin: 0 0 20px 0;
 }

 .footer-contact li {
     display: flex;
     gap: 10px;
     align-items: flex-start;
     margin-bottom: 12px;
     line-height: 1.4;
 }

 .footer-contact li i {
     width: 20px;
     font-size: 16px;
     margin-top: 2px;
 }

 .text-red {
     color: var(--red) !important;
 }

 .text-white {
     color: #fff !important;
 }

 .footer-zalo-qr {
     display: flex;
     gap: 15px;
     align-items: center;
     margin-top: -16px;
     border-top: 1px solid rgba(255, 255, 255, 0.0);
 }

 .footer-zalo-qr p {
     margin: 0;
     font-size: 12px;
     line-height: 1.4;
 }

 .footer-zalo-qr img {
     width: 70px;
     height: 70px;
     background: #fff;
     padding: 3px;
     border-radius: 4px;
     margin-top: 18px;
 }

 .footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, 0.05);
     padding: 20px 0;
     font-size: 12px;
 }

 .footer-bottom__inner {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .footer-bottom p {
     margin: 0;
 }

 .footer-bottom__links {
     display: flex;
     gap: 10px;
 }

 /* Product Card Features List */
 .product-card__features {
     list-style: none;
     padding: 0;
     margin: 10px 0 15px 0;
     font-size: 13px;
     color: #444;
     text-align: left;
     height: 60px;
     overflow: hidden;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
 }

 .product-card__features ul {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .product-card__features li {
     margin-bottom: 5px;
     padding-left: 12px;
     position: relative;
     line-height: 1.4;
 }

 .product-card__features li::before {
     content: "\2022";
     position: absolute;
     left: 0;
     top: -1px;
     color: #555;
     font-size: 14px;
 }

 @media (max-width: 991px) {
     .footer-grid {
         grid-template-columns: 1fr 1fr;
     }

     .footer-col {
         border-right: none;
         padding: 0;
     }
 }

 @media (max-width: 767px) {
     .footer-grid {
         grid-template-columns: 1fr;
         gap: 40px;
     }

     .footer-bottom__inner {
         flex-direction: column;
         gap: 15px;
     }
 }

 /* Blocks: Video & News Panels */
 .video-panel,
 .news-panel {
     border: 1px solid #eaedf1;
     border-radius: 8px;
     padding: 16px;
     background: #fff;
     height: 100%;
     box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
 }

 .video-panel__title,
 .news-panel__title {
     margin-top: 0;
     margin-bottom: 18px;
     font-size: 17px;
     font-weight: 800;
     text-transform: uppercase;
 }

 .news-card:last-child {
     margin-bottom: 0;
 }

 .back-to-top i {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 /* Products Page Header */
 .page-header-products {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid var(--line);
     padding-bottom: 15px;
     margin-bottom: 30px;
 }

 .products-header-title {
     margin: 0;
 }

 .products-header-title h1 {
     font-size: 17px;
     font-weight: 800;
     margin: 0 0 5px 0;
     text-transform: uppercase;
 }

 .products-header-title p {
     color: var(--muted);
     margin: 0;
     font-size: 14px;
 }

 .products-benefits {
     display: flex;
     align-items: center;
     gap: 30px;
 }

 .products-benefit-item {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .products-benefit-item i {
     font-size: 26px;
     color: var(--red);
 }

 .products-benefit-item span {
     font-size: 13px;
     font-weight: 700;
     line-height: 1.3;
     color: var(--ink);
 }

 @media (max-width: 991px) {
     .page-header-products {
         flex-direction: column;
         align-items: flex-start;
         gap: 20px;
     }

     .products-benefits {
         flex-wrap: wrap;
         gap: 15px;
     }
 }

 /* Custom Toolbar */
 .custom-toolbar {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 12px 20px;
     margin-bottom: 24px;
     background: #fff;
     font-size: 14px;
 }

 .custom-toolbar>div {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .custom-toolbar .toolbar-label {
     color: var(--muted);
 }

 .view-btn {
     width: 36px;
     height: 36px;
     border: 1px solid var(--line);
     border-radius: 6px;
     background: #fff;
     color: var(--muted);
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: 0.2s;
     font-size: 16px;
 }

 .view-btn:hover,
 .view-btn.active {
     border-color: #333;
     color: #333;
 }

 .custom-toolbar .custom-select {
     width: auto;
     min-width: 160px;
     border: 1px solid var(--line);
     border-radius: 6px;
     padding: 8px 32px 8px 12px;
     font-size: 14px;
     font-weight: 600;
     color: #333;
     background-color: #fff;
     cursor: pointer;
 }

 @media (max-width: 768px) {
     .custom-toolbar {
         flex-direction: column;
         align-items: flex-start;
         gap: 15px;
     }
 }

 /* Sidebar Custom */
 .custom-sidebar-box {
     background: #fafafc;
     border-radius: 8px;
     padding: 11px;
     margin-bottom: 8px;
     border: none;
 }

 .custom-sidebar-box.support-box {
     background: #f8f9fc;
 }

 .sidebar-title {
     font-size: 15px;
     font-weight: 800;
     margin-top: 0;
     margin-bottom: 15px;
     text-transform: uppercase;
     color: #111;
 }

 /* Category List */
 .sidebar-category-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .sidebar-category-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0px 0;
     transition: 0.2s;
     text-decoration: none;
 }

 .cat-item-left {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .cat-item-left i {
     color: #888;
     font-size: 13px;
     width: 16px;
     text-align: center;
 }

 .cat-name {
     color: #444;
     font-size: 13px;
     font-weight: 500;
 }

 .cat-count {
     background: #f1f3f5;
     color: #555;
     font-size: 11px;
     font-weight: 600;
     padding: 2px 7px;
     border-radius: 12px;
 }

 .sidebar-category-item:hover .cat-name,
 .sidebar-category-item.active .cat-name {
     color: var(--red);
 }

 .sidebar-category-item:hover i,
 .sidebar-category-item.active i {
     color: var(--red);
 }

 .sidebar-category-viewall {
     display: inline-block;
     color: var(--red);
     font-size: 13px;
     font-weight: 700;
     margin-top: 15px;
     text-decoration: none;
 }

 .sidebar-category-viewall i {
     margin-left: 5px;
     font-size: 12px;
 }

 /* Radio & Checkbox Filters */
 .sidebar-filter-list {
     display: flex;
     flex-direction: column;
     gap: 14px;
 }

 .sidebar-radio-label,
 .sidebar-checkbox-label {
     display: flex;
     align-items: center;
     cursor: pointer;
     font-size: 14px;
     color: #333;
     position: relative;
     padding-left: 28px;
 }

 .sidebar-radio-label input,
 .sidebar-checkbox-label input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 .custom-radio {
     position: absolute;
     top: 2px;
     left: 0;
     height: 18px;
     width: 18px;
     background-color: #fff;
     border: 1px solid #d0d0d0;
     border-radius: 50%;
 }

 .sidebar-radio-label input:checked~.custom-radio {
     border-color: var(--red);
 }

 .custom-radio:after {
     content: "";
     position: absolute;
     display: none;
 }

 .sidebar-radio-label input:checked~.custom-radio:after {
     display: block;
 }

 .sidebar-radio-label .custom-radio:after {
     top: 3px;
     left: 3px;
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--red);
 }

 /* Checkbox */
 .custom-checkbox {
     position: absolute;
     top: 2px;
     left: 0;
     height: 18px;
     width: 18px;
     background-color: #fff;
     border: 1px solid #d0d0d0;
     border-radius: 4px;
 }

 .sidebar-checkbox-label input:checked~.custom-checkbox {
     background-color: var(--red);
     border-color: var(--red);
 }

 .custom-checkbox:after {
     content: "";
     position: absolute;
     display: none;
 }

 .sidebar-checkbox-label input:checked~.custom-checkbox:after {
     display: block;
 }

 .sidebar-checkbox-label .custom-checkbox:after {
     left: 5px;
     top: 1px;
     width: 6px;
     height: 10px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 .sidebar-checkbox-label span:not(.custom-checkbox) {
     color: #333;
     margin-left: 6px;
     font-size: 13px;
 }

 /* Price Range */
 .sidebar-price-range {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: 20px;
 }

 .price-input-group {
     display: flex;
     align-items: center;
     background: #fff;
     border: 1px solid #e0e0e0;
     border-radius: 6px;
     padding: 8px 12px;
     flex: 1;
 }

 .price-prefix,
 .price-suffix {
     font-size: 13px;
     color: #333;
 }

 .price-prefix {
     margin-right: 8px;
 }

 .price-suffix {
     margin-left: 8px;
     font-weight: 700;
 }

 .price-input {
     border: none;
     outline: none;
     width: 100%;
     font-size: 14px;
     text-align: right;
     background: transparent;
     padding: 0;
 }

 .price-separator {
     color: #888;
 }

 /* Divider & More Link */
 .sidebar-divider {
     border: 0;
     border-top: 1px solid #eee;
     margin: 20px 0;
 }

 .sidebar-more-link {
     display: inline-block;
     color: var(--red);
     font-weight: 700;
     font-size: 13px;
     margin-top: 15px;
 }

 .sidebar-more-link i {
     margin-left: 4px;
 }

 /* Support Box */
 .support-title {
     font-size: 16px;
     font-weight: 800;
     margin-bottom: 12px;
     margin-top: 0;
     color: #111;
 }

 .support-desc {
     font-size: 13px;
     color: #555;
     line-height: 1.5;
     margin-bottom: 20px;
 }

 .support-phone {
     font-size: 19px;
     font-weight: 800;
     color: var(--red);
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
 }

 .support-phone i {
     font-size: 22px;
 }

 .support-zalo-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     background: #d30000;
     color: #fff;
     font-weight: 700;
     padding: 12px;
     border-radius: 6px;
     text-decoration: none;
     font-size: 15px;
     transition: 0.2s;
 }

 .support-zalo-btn:hover {
     background: #b30000;
     color: #fff;
 }

 .zalo-icon-circle {
     background: #fff;
     color: #d30000;
     border-radius: 50%;
     width: 26px;
     height: 26px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     font-weight: 900;
     margin-right: 10px;
 }

 /* Product Benefits Banner */
 .product-benefits-banner {
     display: flex;
     justify-content: space-between;
     background: #fcfcfd;
     border: 1px solid #e0e4e8;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
     border-radius: 8px;
     padding: 27px 18px;
     margin-top: 16px;
     gap: 15px;
 }

 .product-benefits-banner .benefit-item {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .product-benefits-banner .benefit-item i {
     font-size: 28px;
     color: var(--red);
 }

 .product-benefits-banner .benefit-text {
     display: flex;
     flex-direction: column;
 }

 .product-benefits-banner .benefit-text strong {
     font-size: 13px;
     font-weight: 800;
     color: #111;
     margin-bottom: 4px;
 }

 .product-benefits-banner .benefit-text span {
     font-size: 12px;
     color: var(--muted);
 }

 @media (max-width: 1200px) {
     .product-benefits-banner {
         flex-wrap: wrap;
     }

     .product-benefits-banner .benefit-item {
         width: 30%;
     }
 }

 @media (max-width: 768px) {
     .product-benefits-banner .benefit-item {
         width: 45%;
     }
 }

 @media (max-width: 576px) {
     .product-benefits-banner .benefit-item {
         width: 100%;
     }
 }

 .products-benefit-item span {
     font-size: 13px;
     font-weight: 500;
     line-height: 1.3;
     color: var(--ink);
 }

 /* JS Grid View Toggles */
 .product-grid.grid-view-5 {
     grid-template-columns: repeat(5, 1fr) !important;
 }

 .product-grid.grid-view-3 {
     grid-template-columns: repeat(3, 1fr) !important;
 }

 .product-grid.grid-view-4 {
     grid-template-columns: repeat(4, 1fr) !important;
 }

 @media (max-width: 1200px) {
     .product-grid.grid-view-5 {
         grid-template-columns: repeat(4, 1fr) !important;
     }
 }

 @media (max-width: 992px) {

     .product-grid.grid-view-4,
     .product-grid.grid-view-5 {
         grid-template-columns: repeat(3, 1fr) !important;
     }
 }

 @media (max-width: 768px) {

     .product-grid.grid-view-3,
     .product-grid.grid-view-4,
     .product-grid.grid-view-5 {
         grid-template-columns: repeat(2, 1fr) !important;
     }
 }

 @media (max-width: 576px) {

     .product-grid.grid-view-3,
     .product-grid.grid-view-4,
     .product-grid.grid-view-5 {
         grid-template-columns: repeat(2, 1fr) !important;
     }
 }

 /* Document Tabs */
 .doc-tabs-wrapper {
     background: #fff;
     border-bottom: 1px solid #eaeaea;
     /* box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.05); */
 }

 .doc-tabs-list {
     display: flex;
     align-items: center;
     list-style: none;
     margin: 0;
     padding: 0;
     overflow-x: auto;
     scrollbar-width: none;
     gap: 66px;
 }

 .doc-tabs-list::-webkit-scrollbar {
     display: none;
 }

 .doc-tabs-list li {
     flex-shrink: 0;
 }

 .doc-tabs-list a {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 16px 0;
     font-size: 14px;
     font-weight: 700;
     color: #333;
     text-decoration: none;
     border-bottom: 2px solid transparent;
     transition: color 0.3s, border-color 0.3s;
 }

 .doc-tabs-list a:hover {
     color: var(--red);
 }

 .doc-tabs-list a.active {
     color: var(--red);
     border-bottom-color: var(--red);
 }

 .doc-tabs-list a i {
     font-size: 16px;
 }

 /* Sort Dropdown Toolbar */
 .sort-dropdown {
     display: inline-flex;
     align-items: center;
     border: 1px solid #e0e4e8;
     border-radius: 6px;
     padding: 6px 12px;
     background: #fff;
     position: relative;
     cursor: pointer;
     transition: border-color 0.2s;
 }

 .sort-dropdown:hover {
     border-color: #ccc;
 }

 .sort-dropdown .sort-label {
     color: #666;
     font-size: 13px;
     margin-right: 4px;
 }

 .sort-dropdown .sort-select {
     appearance: none;
     -webkit-appearance: none;
     border: none;
     background: transparent;
     font-size: 13px;
     font-weight: 700;
     color: #111;
     padding-right: 18px;
     cursor: pointer;
     outline: none;
 }

 .sort-dropdown i {
     position: absolute;
     right: 12px;
     font-size: 10px;
     color: #111;
     pointer-events: none;
 }

 .sort-dropdown .sort-select option {
     background: #fff;
     color: #333;
     font-size: 14px;
     padding: 10px 16px;
 }

 /* Sidebar Items Hover Effects */
 .sidebar-category-item {
     transition: color 0.3s;
 }

 .sidebar-category-item:hover,
 .sidebar-category-item:hover span {
     color: var(--red) !important;
 }

 .sidebar-category-item:hover i {
     color: var(--red) !important;
 }

 .featured-doc-item {
     transition: all 0.3s;
 }

 .featured-doc-item:hover strong {
     color: var(--red) !important;
 }

 /* ==========================================================================
   VIDEO CENTER HERO & SEARCH
   ========================================================================== */
 .video-hero {
     position: relative;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     padding: 80px 0 120px;
     color: #fff;
     min-height: 450px;
 }

 .video-hero__content {
     max-width: 650px;
     position: relative;
     z-index: 2;
 }

 .video-hero__content h1 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 15px;
     text-transform: uppercase;
 }

 .video-hero__content p {
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 40px;
     color: #e0e4e8;
 }

 .video-hero__stats {
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
 }

 .hero-stat-item {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .hero-stat-item i {
     font-size: 24px;
     color: var(--red);
 }

 .hero-stat-text {
     display: flex;
     flex-direction: column;
 }

 .hero-stat-text strong {
     font-size: 14px;
     font-weight: 700;
     line-height: 1.2;
 }

 .hero-stat-text span {
     font-size: 12px;
     color: #ccc;
     margin-top: 2px;
 }

 .video-search-section {
     position: relative;
     margin-top: -60px;
     z-index: 10;
     padding-bottom: 40px;
 }

 .video-search-panel {
     display: flex;
     align-items: center;
     background: #fff;
     border-radius: 12px;
     padding: 25px 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     gap: 30px;
 }

 .search-left {
     flex: 0 0 350px;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .search-left strong,
 .search-right strong {
     font-size: 14px;
     font-weight: 800;
     color: #111;
 }

 .search-input-wrapper {
     position: relative;
 }

 .search-input-wrapper input {
     border: 1px solid #e0e4e8;
     border-radius: 6px;
     padding: 12px 40px 12px 15px;
     width: 100%;
     font-size: 13px;
     color: #333;
     outline: none;
     transition: border-color 0.3s;
 }

 .search-input-wrapper input:focus {
     border-color: #999;
 }

 .search-input-wrapper i {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     color: #111;
     font-size: 14px;
 }

 .search-divider {
     width: 1px;
     height: 60px;
     background: #eaeaea;
 }

 .search-right {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .popular-tags {
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
 }

 .tag-pill {
     border: 1px solid #e0e4e8;
     border-radius: 6px;
     padding: 8px 16px;
     font-size: 13px;
     color: #555;
     text-decoration: none;
     transition: all 0.3s;
     background: #fff;
 }

 .tag-pill:hover {
     border-color: var(--red);
     color: var(--red);
 }

 @media (max-width: 992px) {
     .video-search-panel {
         flex-direction: column;
         align-items: stretch;
         gap: 20px;
     }

     .search-divider {
         width: 100%;
         height: 1px;
     }

     .search-left {
         flex: auto;
     }
 }

 /* ==========================================================================
   VIDEO CENTER 3-COLUMN LAYOUT & CARD ENHANCEMENTS
   ========================================================================== */
 .video-page-layout,
 .news-page-layout {
     display: grid;
     grid-template-columns: 270px 1fr;
     gap: 30px;
     align-items: start;
 }

 @media (max-width: 1200px) {

     .video-page-layout,
     .news-page-layout {
         grid-template-columns: 240px 1fr;
     }
 }

 @media (max-width: 992px) {

     .video-page-layout,
     .news-page-layout {
         grid-template-columns: 1fr;
     }
 }

 .video-thumb {
     position: relative;
     overflow: hidden;
     border-radius: 8px;
 }

 .video-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     background-color: var(--red);
     color: #fff;
     font-size: 10px;
     font-weight: 800;
     padding: 3px 8px;
     border-radius: 4px;
     text-transform: uppercase;
     z-index: 2;
 }

 .video-duration {
     position: absolute;
     bottom: 10px;
     right: 10px;
     background-color: rgba(0, 0, 0, 0.85);
     color: #fff;
     font-size: 11px;
     font-weight: 700;
     padding: 3px 6px;
     border-radius: 4px;
     z-index: 2;
     letter-spacing: 0.5px;
 }

 .video-card__body {
     padding: 15px;
 }

 .video-card__body h3 {
     font-size: 15px;
     font-weight: 700;
     line-height: 1.4;
     margin-bottom: 8px;
     color: #111;
 }

 .video-meta-row {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 12px;
     color: #777;
     margin-bottom: 12px;
 }

 .video-meta-stars {
     display: flex;
     gap: 2px;
 }

 .video-meta-stars i {
     color: #ff5722;
     font-size: 10px;
 }

 .video-meta-tags {
     font-size: 12px;
     color: #555;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 5px;
     padding-top: 12px;
     border-top: 1px dashed #eaeaea;
 }

 .video-meta-tag {
     background: #f5f5f5;
     border: 1px solid #e0e0e0;
     padding: 2px 6px;
     border-radius: 4px;
     font-size: 11px;
     font-weight: 600;
     color: #333;
 }

 .right-sidebar-box {
     background: #f9f9f9;
     border-radius: 12px;
     padding: 20px;
     margin-bottom: 30px;
 }

 .right-sidebar-box h3 {
     font-size: 15px;
     font-weight: 800;
     text-transform: uppercase;
     margin-bottom: 15px;
     color: #111;
 }

 .featured-video-large {
     margin-bottom: 15px;
 }

 .featured-video-large img {
     width: 100%;
     border-radius: 8px;
     margin-bottom: 10px;
 }

 .featured-video-large h4 {
     font-size: 14px;
     font-weight: 700;
     margin-bottom: 5px;
     line-height: 1.4;
 }

 .featured-video-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .featured-video-item {
     display: flex;
     gap: 12px;
     align-items: center;
 }

 .featured-video-item img {
     width: 80px;
     border-radius: 6px;
     object-fit: cover;
 }

 .featured-video-info h4 {
     font-size: 12px;
     font-weight: 700;
     margin: 0 0 4px;
     line-height: 1.3;
 }

 .featured-video-info span {
     font-size: 11px;
     color: #777;
 }

 .popular-video-list {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .popular-video-item {
     display: flex;
     gap: 12px;
     align-items: center;
 }

 .popular-video-rank {
     width: 24px;
     height: 24px;
     background: var(--red);
     color: #fff;
     font-size: 12px;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
     flex-shrink: 0;
 }

 .popular-video-item img {
     width: 60px;
     height: 60px;
     border-radius: 6px;
     object-fit: cover;
 }

 .playlist-section {
     margin-top: 40px;
     padding-top: 30px;
     border-top: 1px solid #eaeaea;
 }

 .playlist-section h3 {
     font-size: 18px;
     font-weight: 800;
     text-transform: uppercase;
     margin-bottom: 20px;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .playlist-section h3 a {
     font-size: 13px;
     color: var(--red);
     text-decoration: none;
     font-weight: 700;
     text-transform: none;
 }

 .playlist-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
 }

 @media (max-width: 992px) {
     .playlist-grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (max-width: 576px) {
     .playlist-grid {
         grid-template-columns: 1fr;
     }
 }

 /* Video Center Layout Fix */
 .video-main-content .video-grid {
     grid-template-columns: repeat(3, 1fr);
 }

 /* News Featured Slider */
 .featured-news-slider {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     height: 100%;
     min-height: 400px;
 }

 .featured-news-slide {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
 }

 .featured-news-bg {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .featured-news-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(11, 15, 25, 0.9) 0%, rgba(11, 15, 25, 0.4) 50%, rgba(11, 15, 25, 0) 100%);
 }

 .badge-featured {
     position: absolute;
     top: 20px;
     left: 20px;
     background: var(--red);
     color: #fff;
     padding: 6px 12px;
     font-size: 11px;
     font-weight: 700;
     border-radius: 4px;
     z-index: 2;
 }

 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.9);
     border: none;
     color: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 2;
     transition: 0.2s;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .slider-arrow:hover {
     background: #fff;
     color: var(--red);
 }

 .slider-arrow.prev {
     left: 20px;
 }

 .slider-arrow.next {
     right: 20px;
 }

 .featured-news-content {
     position: absolute;
     bottom: 20px;
     left: 40px;
     right: 40px;
     color: #fff;
     z-index: 2;
 }

 .featured-news-content h2 {
     font-size: 24px;
     font-weight: 700;
     margin: 0 0 10px;
     line-height: 1.3;
 }

 .featured-news-content p {
     font-size: 14px;
     color: #e2e8f0;
     margin: 0 0 15px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .featured-news-meta {
     display: flex;
     align-items: center;
     gap: 20px;
     font-size: 13px;
     color: #cbd5e1;
 }

 .featured-news-meta i {
     margin-right: 6px;
 }

 /* News List Cards */
 .news-list--cards {
     display: flex;
     flex-direction: column;
     gap: 15px;
     height: 100%;
 }

 .news-card {
     display: flex;
     align-items: stretch;
     border: 1px solid var(--line);
     border-radius: 10px;
     overflow: hidden;
     background: #fff;
     transition: 0.2s;
     flex: 1;
     margin-bottom: 16px;
 }

 .news-card:hover {
     box-shadow: var(--shadow);
     border-color: #d1d5db;
 }

 .news-card img {
     width: 110px;
     height: 100%;
     object-fit: cover;
     flex-shrink: 0;
 }

 .news-card-body {
     padding: 16px 20px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .news-card-body time {
     font-size: 12px;
     color: var(--muted);
     margin-bottom: 8px;
 }

 .news-card-body h4 {
     font-size: 15px;
     font-weight: 700;
     margin: 0 0 12px;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .news-card-body small {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: auto;
 }

 /* Sidebar News Custom */
 .sidebar-box--gray {
     background: #fafafc;
     border-radius: 8px;
     padding: 20px;
     margin-bottom: 20px;
     border: none;
 }

 .search-box-wrapper {
     position: relative;
 }

 .search-box-wrapper input {
     width: 100%;
     padding: 10px 35px 10px 15px;
     border: 1px solid #e5e7eb;
     border-radius: 6px;
     font-size: 13px;
     outline: none;
 }

 .search-box-wrapper .search-icon {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: #888;
     font-size: 14px;
 }

 .category-list-custom {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .category-list-custom a {
     display: flex;
     align-items: center;
     padding: 5px 0px;
     border-radius: 6px;
     color: #333;
     font-size: 13px;
     font-weight: 600;
     transition: 0.2s;
 }

 .category-list-custom a i {
     width: 20px;
     color: #666;
     font-size: 15px;
     margin-right: 10px;
 }

 .category-list-custom a span:not(.count) {
     flex: 1;
 }

 .category-list-custom a .count {
     background: #fff;
     border: 1px solid #eee;
     color: #555;
     font-size: 11px;
     padding: 2px 6px;
     border-radius: 4px;
     font-weight: 700;
 }

 .category-list-custom a:hover,
 .category-list-custom a.active {
     background: #fdf2f3;
     color: var(--red);
 }

 .category-list-custom a:hover i,
 .category-list-custom a.active i {
     color: var(--red);
 }

 .category-list-custom a:hover .count,
 .category-list-custom a.active .count {
     background: transparent;
     border-color: transparent;
     color: var(--red);
 }

 .popular-articles {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .popular-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     text-decoration: none;
 }

 .popular-item .rank {
     background: var(--red);
     color: #fff;
     font-size: 11px;
     font-weight: 800;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
     flex-shrink: 0;
     margin-top: 2px;
 }

 .popular-item img {
     width: 60px;
     height: 60px;
     border-radius: 6px;
     object-fit: cover;
     flex-shrink: 0;
 }

 .popular-content {
     flex: 1;
 }

 .popular-content h4 {
     font-size: 12px;
     line-height: 1.4;
     margin: 0 0 5px;
     font-weight: 700;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     color: #333;
     transition: color 0.2s;
 }

 .popular-item:hover .popular-content h4 {
     color: var(--red);
 }

 .popular-content small {
     display: flex;
     align-items: center;
     gap: 5px;
     color: var(--muted);
     font-size: 11px;
 }

 .btn-view-all {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border-radius: 5px;
     padding: 8px 20px;
     border: 1px solid #e5e7eb;
     color: #333;
     background: #fff;
     font-weight: 700;
     font-size: 12px;
     transition: 0.2s;
     width: 100%;
 }

 .btn-view-all:hover {
     border-color: var(--red);
     color: var(--red);
 }

 /* News Main Area Custom */
 .news-tabs-wrapper {
     border-bottom: 1px solid #e5e7eb;
     margin-bottom: 15px;
     padding-bottom: 0;
 }

 .news-tabs {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 .news-tabs li a {
     display: block;
     padding: 10px 0;
     color: #555;
     font-size: 14px;
     font-weight: 600;
     border-bottom: 2px solid transparent;
     transition: 0.2s;
 }

 .news-tabs li.active a,
 .news-tabs li a:hover {
     color: var(--red);
     border-bottom-color: var(--red);
 }

 .toolbar-sort {
     font-size: 13px;
     color: #555;
 }

 .toolbar-sort select {
     border: 1px solid #e5e7eb;
     border-radius: 4px;
     padding: 4px 10px;
     font-size: 13px;
     margin-left: 8px;
     outline: none;
 }

 .article-card__image-wrapper {
     position: relative;
 }

 .badge-new {
     position: absolute;
     top: 10px;
     left: 10px;
     background: var(--red);
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     padding: 3px 8px;
     border-radius: 4px;
     z-index: 2;
 }

 .article-card__footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: auto;
     border-top: 1px solid #f0f0f0;
     padding-top: 12px;
 }

 .article-card__footer .views {
     font-size: 12px;
     color: #888;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .article-card__footer .section__link {
     color: var(--red);
     font-size: 12px;
     font-weight: 700;
 }

 .article-card {
     display: flex;
     flex-direction: column;
 }

 .article-card__body {
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .article-card h3 {
     font-size: 14px;
     line-height: 1.5;
     margin: 8px 0;
     font-weight: 800;
     color: #111;
 }

 .article-card p {
     font-size: 13px;
     line-height: 1.5;
     color: #666;
     margin-bottom: 15px;
 }

 /* Contact Page Custom Styles */
 .section__title--underline-red {
     display: inline-block;
     position: relative;
     padding-bottom: 10px;
     margin-bottom: 15px;
 }

 .section__title--underline-red::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 60px;
     height: 3px;
     background-color: var(--red);
 }

 .feature-list-contact {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 14px;
     margin-top: 30px;
 }

 .feature-item-contact {
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     position: relative;
 }

 .feature-item-contact:not(:last-child)::after {
     content: "";
     position: absolute;
     right: -7px;
     top: 20%;
     height: 60%;
     width: 1px;
     background-color: #e5e7eb;
 }

 .feature-item-contact .icon-circle {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     border: 1px solid var(--red);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 12px;
 }

 .feature-item-contact .icon-circle i {
     color: var(--red);
     font-size: 20px;
 }

 .feature-item-contact strong {
     font-size: 13px;
     color: #111;
     margin-bottom: 5px;
 }

 .feature-item-contact span {
     font-size: 11px;
     color: #666;
     line-height: 1.4;
 }

 .contact-hero.contact-grid {
     margin-bottom: 30px;
     background: linear-gradient(90deg, #fff, #eef4f8);
     border-radius: 12px;
     overflow: hidden;
     align-items: stretch;
     grid-template-columns: 1.1fr 0.9fr;
 }

 .contact-hero__content {
     padding: 30px 22px;
 }

 .contact-hero__content>p {
     color: #333;
     font-weight: 500;
     font-size: 15px;
     margin-bottom: 30px;
 }

 .contact-hero__image-wrapper {
     height: 328px;
     display: flex;
     justify-content: flex-end;
 }

 .contact-hero__image-wrapper img {
     height: 100%;
     width: 100%;
     object-fit: cover;
     -webkit-mask-image: linear-gradient(to right, transparent, black 25%);
     mask-image: linear-gradient(to right, transparent, black 25%);
     min-height: 310px;
 }

 .custom-checkbox-wrapper {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     position: relative;
     padding-left: 25px;
 }

 .custom-checkbox-wrapper input {
     position: absolute;
     opacity: 0;
     cursor: pointer;
     height: 0;
     width: 0;
 }

 .custom-checkbox-wrapper .checkmark {
     position: absolute;
     top: 50%;
     left: 0;
     transform: translateY(-50%);
     height: 16px;
     width: 16px;
     background-color: #fff;
     border: 1px solid #ccc;
     border-radius: 3px;
 }

 .custom-checkbox-wrapper input:checked~.checkmark {
     background-color: var(--red);
     border-color: var(--red);
 }

 .custom-checkbox-wrapper .checkmark:after {
     content: "";
     position: absolute;
     display: none;
 }

 .custom-checkbox-wrapper input:checked~.checkmark:after {
     display: block;
 }

 .custom-checkbox-wrapper .checkmark:after {
     left: 5px;
     top: 2px;
     width: 4px;
     height: 8px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 /* Other channels */
 .other-channels-section {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .other-channels-header {
     flex-shrink: 0;
     width: 250px;
 }

 .other-channels-grid {
     flex: 1;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 15px;
 }

 .channel-card {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 15px;
     background: #fff;
     border: 1px solid #eee;
     border-radius: 8px;
     text-decoration: none;
     transition: 0.2s;
 }

 .channel-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     border-color: #ddd;
 }

 .channel-icon {
     font-size: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .channel-info {
     display: flex;
     flex-direction: column;
 }

 .channel-info strong {
     font-size: 13px;
     color: #111;
     margin-bottom: 2px;
 }

 .channel-info span {
     font-size: 11px;
     color: #666;
 }

 @media(max-width: 1024px) {
     .other-channels-section {
         flex-direction: column;
         align-items: flex-start;
     }

     .other-channels-grid {
         width: 100%;
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media(max-width: 576px) {
     .feature-list-contact {
         grid-template-columns: repeat(2, 1fr);
     }

     .other-channels-grid {
         grid-template-columns: 1fr;
     }

     .contact-hero__image-wrapper img {
         -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%);
         mask-image: linear-gradient(to bottom, transparent, black 15%);
     }
 }

 /* ==========================================================================
   SOLUTION DETAIL PAGE (Ði?n công nghi?p)
   ========================================================================== */

 /* Hero Section */
 .solution-detail-hero {
     background-color: #1b2027;
     color: #fff;
     position: relative;
     overflow: hidden;
 }

 .solution-detail-hero__inner {
     display: flex;
     align-items: stretch;
     min-height: 400px;
 }

 .solution-detail-hero__content {
     flex: 1.2;
     padding: 60px 40px 60px 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .solution-detail-hero__label {
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 1px;
     margin-bottom: 10px;
     display: block;
 }

 .solution-detail-hero__content h1 {
     font-size: 42px;
     font-weight: 800;
     margin-bottom: 15px;
     line-height: 1.2;
 }

 .solution-detail-hero__content p {
     font-size: 15px;
     color: #ccc;
     margin-bottom: 40px;
     line-height: 1.6;
 }

 .solution-detail-hero__features {
     display: flex;
     gap: 30px;
 }

 .solution-detail-hero__features .feature {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .solution-detail-hero__features .feature i {
     font-size: 24px;
     color: var(--red);
 }

 .solution-detail-hero__features .feature span {
     font-size: 11px;
     font-weight: 700;
     line-height: 1.3;
 }

 .solution-detail-hero__image {
     flex: 1;
     background-image: url('../images/banner01.png');
     background-size: cover;
     background-position: center;
     position: relative;
 }

 .solution-detail-hero__image::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, #1b2027 0%, transparent 100%);
 }

 /* Problem Section */
 .problem-section {
     background-color: #fff;
 }

 .problem-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 15px;
     margin-bottom: 40px;
 }

 .problem-card {
     border: 1px solid #eaeaea;
     border-radius: 8px;
     padding: 15px 10px;
     text-align: center;
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     background: #fff;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     height: 200px;
     width: 100%;
 }

 .problem-card:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
     border-color: #ccc;
 }

 .problem-card.active {
     border-color: var(--red);
     background-color: #fff;
     box-shadow: 0 4px 20px rgba(227, 30, 36, 0.15);
 }

 .problem-card__img-wrapper {
     height: 110px;
     width: 100%;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .problem-card img {
     max-height: 100%;
     max-width: 95%;
     object-fit: contain;
 }

 .problem-card h4 {
     font-size: 13px;
     font-weight: 700;
     margin: 0;
     line-height: 1.4;
     color: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     flex: 1;
 }

 .problem-card .active-icon {
     display: none;
     position: absolute;
     bottom: 15px;
     right: 15px;
     color: var(--red);
     font-size: 20px;
     background: #fff;
     border-radius: 50%;
 }

 .problem-card.active .active-icon {
     display: block;
 }

 /* Problem Detail Box */
 .problem-detail-box {
     background-color: #f8f9fa;
     border-radius: 12px;
     display: flex;
     overflow: hidden;
     margin-top: 20px;
 }

 .problem-detail__col {
     padding: 17px;
 }

 .problem-detail__info {
     flex: 1.2;
 }

 .problem-detail__header {
     display: flex;
     align-items: center;
     margin-bottom: 15px;
 }

 .problem-detail__header i {
     font-size: 28px;
     color: var(--red);
     margin-right: 15px;
 }

 .problem-detail__header h3 {
     font-size: 18px;
     font-weight: 800;
     margin: 0;
     color: #111;
 }

 .problem-detail__info>p {
     font-size: 13px;
     color: #555;
     margin-bottom: 20px;
     line-height: 1.5;
 }

 .problem-detail__info>strong {
     font-size: 13px;
     display: block;
     margin-bottom: 10px;
     color: #111;
 }

 .problem-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .problem-list li {
     font-size: 13px;
     color: #333;
     margin-bottom: 8px;
     padding-left: 15px;
     position: relative;
 }

 .problem-list li::before {
     content: '';
     position: absolute;
     left: 0;
     top: 6px;
     width: 4px;
     height: 4px;
     background-color: var(--red);
     border-radius: 50%;
 }

 .problem-detail__solution {
     flex: 1.2;
     background-color: #fff;
     margin: 20px 0;
     border-radius: 8px;
     padding: 25px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
 }

 .problem-detail__solution>strong {
     font-size: 15px;
     display: block;
     margin-bottom: 15px;
     color: #111;
 }

 .solution-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .solution-list li {
     font-size: 13px;
     color: #333;
     margin-bottom: 12px;
     display: flex;
     align-items: flex-start;
     gap: 10px;
 }

 .solution-list li i {
     color: var(--red);
     font-size: 15px;
     margin-top: 2px;
 }

 .problem-detail__image {
     flex: 1;
     padding: 0;
 }

 .problem-detail__image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     min-height: 250px;
 }

 /* Recommended Products Section */
 .recommended-section {
     background-color: #fff;
     padding-top: 20px;
     overflow: hidden;
 }

 .recommended-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 15px;
 }

 .recommended-product-card {
     border: 1px solid #eaeaea;
     border-radius: 8px;
     padding: 15px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-decoration: none;
     color: inherit;
     transition: all 0.3s ease;
     min-width: 0;
 }

 .recommended-product-card:hover {
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
     border-color: #ddd;
 }

 .recommended-img-wrapper {
     height: 100px;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 12px;
 }

 .recommended-img-wrapper img {
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
 }

 .recommended-product-card strong {
     font-size: 14px;
     font-weight: 800;
     color: #111;
     margin-bottom: 4px;
     display: block;
 }

 .recommended-product-card .product-type {
     font-size: 11px;
     color: #555;
     margin-bottom: 2px;
 }

 .recommended-product-card .product-spec {
     font-size: 11px;
     color: #777;
     margin-bottom: 15px;
 }

 .recommended-product-card .view-detail {
     font-size: 11px;
     color: var(--red);
     font-weight: 700;
     margin-top: auto;
     display: flex;
     align-items: center;
     gap: 5px;
 }

 /* Mobile Responsive */
 @media (max-width: 1200px) {
     .problem-grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .recommended-grid {
         grid-template-columns: repeat(6, 1fr);
     }
 }

 @media (max-width: 992px) {
     .solution-detail-hero__inner {
         flex-direction: column;
     }

     .solution-detail-hero__image {
         min-height: 250px;
     }

     .solution-detail-hero__image::before {
         background: linear-gradient(0deg, #1b2027 0%, transparent 100%);
     }

     .problem-detail-box {
         flex-direction: column;
     }

     .problem-detail__solution {
         margin: 0 20px 20px;
     }
 }

 @media (max-width: 576px) {

     .problem-grid,
     .recommended-grid {
         grid-template-columns: repeat(2, 1fr);
     }

     .solution-detail-hero__features {
         flex-wrap: wrap;
     }

     .solution-detail-hero__content h1 {
         font-size: 32px;
     }
 }

 .problem-swiper .swiper-pagination-bullet-active {
     background: var(--red);
 }


 .btn-view-all-recommended {
     display: inline-block;
     border: 1px solid var(--red);
     color: var(--red);
     background: #fff;
     padding: 12px 60px;
     border-radius: 6px;
     font-size: 16px;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .btn-view-all-recommended:hover {
     background: var(--red);
     color: #fff;
 }

 .problem-swiper .swiper-slide {
     height: auto;
     display: flex;
 }

 /* Mega Menu Styles */
 .navbar__inner {
     position: relative;
 }

 .category-dropdown {
     position: static;
 }

 .category-dropdown .category-btn {
     display: flex;
     align-items: center;
     justify-content: space-between;
     min-width: 260px;
     margin-right: 20px;
     font-size: 14px;
 }

 /* Mega Menu Vertical / Flyout Styles (Chuẩn Mẫu Ảnh 2) */
 .mega-menu {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
     max-width: calc(100vw - 30px);
     background: #fff;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
     border-top: 3px solid var(--red, #e30000);
     border-radius: 0 0 10px 10px;
     padding: 0;
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
     z-index: 9999;
     overflow: hidden;
 }

 .category-dropdown:hover .mega-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 .mega-menu__container {
     display: flex;
     min-height: 450px;
     max-height: 550px;
 }

 /* Cột bên trái: Danh mục cha */
 .mega-menu__sidebar {
     width: 290px;
     background: #fafafa;
     border-right: 1px solid #eaeaea;
     flex-shrink: 0;
     overflow-y: auto;
     padding: 0;
 }

 .mega-menu__parent-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .mega-menu__parent-item {
     position: relative;
     border-bottom: 1px solid #f2f2f2;
     transition: all 0.15s ease;
 }

 .mega-menu__parent-item:last-child {
     border-bottom: none;
 }

 .mega-menu__parent-link {
     display: flex;
     align-items: center;
     padding: 13px 20px;
     color: #222222;
     font-size: 13.5px;
     font-weight: 600;
     text-decoration: none !important;
     transition: all 0.15s ease;
     line-height: 1.35;
 }

 .mega-menu__parent-link .cat-icon {
     font-size: 15px;
     color: #666666;
     width: 22px;
     text-align: center;
     flex-shrink: 0;
     transition: color 0.15s ease;
 }

 .mega-menu__parent-link .cat-name {
     flex: 1;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .mega-menu__parent-link .cat-arrow {
     font-size: 11px;
     color: #b0b0b0;
     margin-left: 8px;
     transition: transform 0.15s ease, color 0.15s ease;
 }

 /* Hover & Active State cho danh mục cha (Khớp Mẫu Ảnh 2) */
 .mega-menu__parent-item:hover,
 .mega-menu__parent-item.active {
     background: #fed7d7;
 }

 .mega-menu__parent-item:hover::before,
 .mega-menu__parent-item.active::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     width: 4px;
     background-color: var(--red, #e30000);
 }

 .mega-menu__parent-item:hover .mega-menu__parent-link,
 .mega-menu__parent-item.active .mega-menu__parent-link {
     color: var(--red, #e30000);
     font-weight: 700;
 }

 .mega-menu__parent-item:hover .cat-icon,
 .mega-menu__parent-item.active .cat-icon,
 .mega-menu__parent-item:hover .cat-arrow,
 .mega-menu__parent-item.active .cat-arrow {
     color: var(--red, #e30000);
 }

 /* Cột bên phải: Content danh mục con */
 .mega-menu__content {
     flex: 1;
     background: #ffffff;
     padding: 26px 34px;
     overflow-y: auto;
     position: relative;
 }

 .mega-menu__panel {
     display: none;
 }

 .mega-menu__panel.active {
     display: block;
     animation: mmFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }

 @keyframes mmFadeIn {
     from {
         opacity: 0;
         transform: translateX(6px);
     }

     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

 .mega-menu__panel-header {
     border-bottom: 1px solid #eeeeee;
     padding-bottom: 12px;
     margin-bottom: 22px;
 }

 .mega-menu__panel-title {
     font-size: 15px;
     font-weight: 800;
     color: var(--red, #e30000);
     text-transform: uppercase;
     text-decoration: none !important;
     display: inline-flex;
     align-items: center;
     letter-spacing: 0.3px;
     transition: color 0.2s ease;
 }

 .mega-menu__panel-title:hover {
     color: #b00000;
 }

 /* Subcategories Grid */
 .mega-menu__subgrid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px 30px;
 }

 .mega-menu__subgroup {
     break-inside: avoid;
     /* border-bottom: 1px solid #f5f5f5; */
     padding-bottom: 0px;
     margin-bottom: 0px;
 }

 .mega-menu__subgroup-title {
     font-size: 13.5px;
     /* font-weight: 600; */
     color: #222222;
     text-decoration: none !important;
     display: block;
     padding: 4px 0;
     transition: color 0.15s ease, transform 0.15s ease;
 }

 .mega-menu__subgroup-title:hover {
     color: var(--red, #e30000);
     transform: translateX(2px);
 }

 .mega-menu__subgroup-list {
     list-style: none;
     padding: 0;
     margin: 6px 0 0 0;
 }

 .mega-menu__subgroup-list li {
     margin-bottom: 5px;
 }

 .mega-menu__subgroup-list a {
     font-size: 13px;
     color: #555555;
     text-decoration: none !important;
     transition: color 0.15s ease, transform 0.15s ease;
     display: inline-block;
 }

 .mega-menu__subgroup-list a:hover {
     color: var(--red, #e30000);
     transform: translateX(3px);
 }

 .mega-menu__empty {
     padding: 40px 15px;
     text-align: center;
 }

 /* Footer mega menu */
 .mega-menu__footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 14px 34px;
     background: #f8f9fa;
     border-top: 1px solid #eaeaea;
 }

 .mega-menu__footer-left {
     display: flex;
 }

 .mega-menu__footer-left a {
     color: #555;
     text-decoration: none;
     font-size: 13px;
     font-weight: 600;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: color 0.2s;
 }

 .mega-menu__footer-left a:hover {
     color: var(--red, #e30000);
 }

 .mega-menu__footer-left a:not(:last-child) {
     border-right: 1px solid #e0e0e0;
     padding-right: 18px;
     margin-right: 18px;
 }

 .mega-menu__view-all {
     color: var(--red, #e30000);
     font-weight: 700;
     text-decoration: none;
     font-size: 13px;
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .mega-menu__view-all:hover {
     text-decoration: underline;
 }

 /* ==========================================================================
   PRODUCT DETAIL PAGE REDESIGN
   ========================================================================== */

 .product-detail-top {
     display: grid;
     grid-template-columns: 460px 1fr;
     gap: 40px;
     background: #fff;
     padding: 24px;
     border-radius: 8px;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
 }

 /* Gallery */
 .product-gallery {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .product-gallery__main {
     position: relative;
     border: 1px solid var(--line);
     border-radius: 8px;
     height: 460px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     overflow: hidden;
 }

 .product-gallery__main img {
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
 }

 .product-gallery__expand {
     position: absolute;
     top: 12px;
     right: 12px;
     width: 32px;
     height: 32px;
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.9);
     border: 1px solid var(--line);
     color: #666;
     display: grid;
     place-items: center;
     cursor: pointer;
     transition: 0.2s;
 }

 .product-gallery__expand:hover {
     color: var(--red);
     border-color: var(--red);
 }

 .product-gallery__thumbs-wrap {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .product-gallery__nav {
     border: 1px solid var(--line);
     background: #fff;
     width: 28px;
     height: 70px;
     border-radius: 4px;
     display: grid;
     place-items: center;
     cursor: pointer;
     color: #555;
 }

 .product-gallery__nav:hover {
     color: var(--red);
     background: #fdf2f3;
 }

 .product-gallery__thumbs {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 8px;
     flex: 1;
 }

 .product-gallery__thumb {
     height: 70px;
     border: 1px solid var(--line);
     border-radius: 4px;
     padding: 4px;
     cursor: pointer;
     transition: 0.2s;
 }

 .product-gallery__thumb.active,
 .product-gallery__thumb:hover {
     border-color: var(--red);
 }

 /* Info Panel */
 .product-info-panel h1 {
     font-size: 22px;
     font-weight: 800;
     line-height: 1.4;
     margin: 0 0 16px;
     color: #111;
 }

 .product-info-panel__meta {
     display: grid;
     grid-template-columns: 120px 1fr;
     gap: 12px 8px;
     font-size: 13.5px;
     margin-bottom: 24px;
 }

 .product-info-panel__meta span {
     color: #555;
 }

 .product-info-panel__meta strong {
     color: #111;
     font-weight: 600;
 }

 .product-info-panel__price-box {
     margin-bottom: 24px;
 }

 .price-row {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 8px;
 }

 .price-row span {
     width: 130px;
     font-size: 13px;
     color: #555;
 }

 .price-val {
     font-size: 18px;
     color: var(--red);
     font-weight: 800;
 }

 .price-val-vat {
     font-size: 22px;
     color: var(--red);
     font-weight: 800;
 }

 .product-info-panel__quantity {
     display: flex;
     align-items: center;
     gap: 16px;
     margin-bottom: 24px;
 }

 .product-info-panel__quantity span {
     font-size: 13px;
     color: #555;
 }

 .quantity-input {
     display: flex;
     border: 1px solid var(--line);
     border-radius: 4px;
     overflow: hidden;
 }

 .quantity-input button {
     width: 36px;
     height: 36px;
     background: #f9fafb;
     border: none;
     cursor: pointer;
     font-size: 16px;
 }

 .quantity-input button:hover {
     background: #e5e7eb;
 }

 .quantity-input input {
     width: 48px;
     height: 36px;
     border: none;
     border-left: 1px solid var(--line);
     border-right: 1px solid var(--line);
     text-align: center;
     font-weight: 600;
 }

 /* Actions */
 .product-info-panel__actions {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .btn-buy-now {
     background: var(--red);
     color: #fff;
     border: none;
     border-radius: 6px;
     padding: 14px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 12px;
     cursor: pointer;
     transition: 0.2s;
     width: 100%;
 }

 .btn-buy-now:hover {
     background: var(--red-dark);
 }

 .btn-buy-now i {
     font-size: 24px;
 }

 .btn-buy-now .btn-text {
     text-align: left;
 }

 .btn-buy-now .btn-text strong {
     display: block;
     font-size: 16px;
     font-weight: 800;
 }

 .btn-buy-now .btn-text span {
     display: block;
     font-size: 11.5px;
     opacity: 0.9;
 }

 .btn-group-half {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
 }

 .btn-add-cart,
 .btn-compare {
     background: #fff;
     border: 1px solid #ffccd0;
     color: #111;
     border-radius: 6px;
     padding: 12px;
     font-weight: 700;
     font-size: 13px;
     cursor: pointer;
     transition: 0.2s;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
 }

 .btn-add-cart:hover,
 .btn-compare:hover {
     background: #fdf2f3;
     border-color: var(--red);
     color: var(--red);
 }

 .btn-compare span.muted-text {
     font-size: 11.5px;
     font-weight: 400;
     color: #666;
     margin-left: 4px;
 }

 /* Layout */
 .product-detail-layout {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 20px;
     align-items: start;
 }

 .detail-block {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 8px;
     margin-bottom: 10px;
     overflow: hidden;
 }

 .detail-block__header {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 18px;
     border-bottom: 1px solid var(--line);
     background: #fafafa;
 }

 .detail-block__header h2 {
     font-size: 14px;
     font-weight: 800;
     margin: 0;
     text-transform: uppercase;
 }

 .detail-block__header i {
     font-size: 18px;
 }

 .text-red {
     color: var(--red) !important;
 }

 .text-dark {
     color: #333 !important;
 }

 .detail-block__content {
     padding: 8px 18px 10px;
 }
 .detail-block__content .ck-content > *:first-child,
 .detail-block__content .ck-content h1:first-child,
 .detail-block__content .ck-content h2:first-child,
 .detail-block__content .ck-content h3:first-child,
 .detail-block__content .ck-content h4:first-child,
 .detail-block__content .ck-content p:first-child {
     margin-top: 0 !important;
     padding-top: 0 !important;
 }

 /* Features */
 .feature-block {
     display: grid;
     grid-template-columns: 1fr 400px;
     gap: 30px;
     align-items: center;
 }

 .feature-block__text p {
     font-size: 13.5px;
     color: #444;
     margin-bottom: 16px;
 }

 .feature-list-check {
     list-style: none;
     padding: 0;
     margin: 0;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 12px;
 }

 .feature-list-check li {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 13px;
     color: #222;
 }

 .feature-list-check li i {
     color: var(--red);
     font-size: 16px;
 }

 .feature-block__image img {
     width: 100%;
     height: auto;
     object-fit: cover;
 }

 /* Specs */
 .specs-table {
     width: 100%;
     border-collapse: collapse;
     font-size: 13px;
 }

 .specs-table td {
     padding: 12px 16px;
     border: 1px solid var(--line);
     color: #444;
 }

 .specs-table tr:nth-child(even) td {
     background: #f9fafb;
 }

 .specs-table td strong {
     color: #111;
 }

 .specs-table td:first-child {
     width: 250px;
 }

 /* Docs Grid */
 .docs-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
 }

 .doc-item {
     display: flex;
     align-items: center;
     gap: 12px;
     border: 1px solid var(--line);
     border-radius: 6px;
     padding: 12px;
     background: #fff;
     transition: 0.2s;
 }

 .doc-item:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
     border-color: #ddd;
 }

 .doc-item__icon-wrap img {
     width: 32px;
     height: 32px;
     object-fit: contain;
 }

 .doc-item__info {
     flex: 1;
 }

 .doc-item__info strong {
     display: block;
     font-size: 12.5px;
     color: #111;
     margin-bottom: 2px;
 }

 .doc-item__info span {
     display: block;
     font-size: 11px;
     color: #666;
 }

 .doc-item__download {
     color: var(--red);
     font-size: 18px;
     padding: 8px;
     transition: 0.2s;
 }

 .doc-item__download:hover {
     transform: translateY(-2px);
 }

 /* Distributor */
 .product-distributor-wrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 24px;
     padding: 20px;
 }

 .product-distributor-wrap .distributor-features {
     flex: 1 1 260px;
 }

 .product-distributor-wrap .distributor-features p {
     display: grid;
     grid-template-columns: 40px 1fr;
     align-items: start;
     margin-bottom: 20px;
     font-size: 14px;
     color: #555;
     line-height: 1.5;
 }

 .product-distributor-wrap .distributor-features p:last-child {
     margin-bottom: 0;
 }

 .product-distributor-wrap .distributor-features p i {
     grid-column: 1;
     grid-row: 1 / span 2;
     font-size: 24px;
     color: var(--red, #e60012);
     justify-self: center;
     margin-top: 2px;
 }

 .product-distributor-wrap .distributor-features p strong {
     grid-column: 2;
     grid-row: 1;
     font-size: 15px;
     font-weight: 800;
     color: #111;
     margin-bottom: 4px;
 }

 .product-distributor-wrap .distributor-features p br {
     display: none;
 }

 .product-distributor-wrap .distributor-cert {
     flex: 1 1 240px;
     max-width: 280px;
     margin: 0 auto;
 }

 .product-distributor-wrap .distributor-cert .cert-frame {
     border: 6px solid #b77b4d;
     padding: 5px;
     background: #fff;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .product-distributor-wrap .distributor-cert img {
     width: 100%;
     display: block;
     object-fit: contain;
 }

 .product-distributor-wrap .distributor-info {
     flex: 1 1 220px;
 }

 .product-distributor-wrap .distributor-info h3 {
     font-size: 17px;
     font-weight: 800;
     color: var(--red, #e60012);
     text-transform: uppercase;
     margin: 0 0 16px 0;
     line-height: 1.4;
 }

 .product-distributor-wrap .distributor-info p {
     font-size: 14px;
     color: #444;
     line-height: 1.5;
     margin: 0 0 24px 0;
 }

 .product-distributor-wrap .distributor-info .btn-cert {
     background: var(--red, #e60012);
     color: #fff;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 14px;
     padding: 12px 24px;
     border-radius: 6px;
     text-decoration: none;
     display: inline-block;
     border: none;
     transition: 0.3s;
     text-align: center;
     width: 100%;
 }

 .product-distributor-wrap .distributor-info .btn-cert:hover {
     background: #c00010;
     color: #fff;
 }

 @media(max-width: 991px) {
     .product-distributor-wrap {
         display: flex;
         align-items: center;
         justify-content: space-between;
         flex-wrap: wrap;
         gap: 24px;
         padding: 20px;
     }

     .product-distributor-wrap .distributor-features p {
         text-align: left;
     }

     .product-distributor-wrap .distributor-cert,
     .product-distributor-wrap .distributor-info {
         flex: 1 1 220px;
     }
 }

 .distributor-block {
     display: grid;
     grid-template-columns: 1fr auto auto;
     gap: 30px;
     align-items: center;
 }

 .distributor-features {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .distributor-features li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 8px;
 }

 .distributor-features p {
     margin-bottom: 4px;
     color: #555;
     font-size: 13.5px;
 }

 .distributor-features p:has(strong),
 .distributor-features strong {
     color: #111;
     font-size: 14.5px;
     margin-bottom: 2px;
 }

 .distributor-features li i,
 .distributor-features p i,
 .distributor-features i {
     font-size: 20px;
     margin-top: 2px;
     color: var(--red, #e60012);
     width: 24px;
     text-align: center;
     margin-right: 8px;
 }

 .distributor-features li strong {
     display: block;
     font-size: 13px;
     color: #111;
 }

 .distributor-features li span {
     display: block;
     font-size: 11.5px;
     color: #666;
 }

 .distributor-cert {
     max-width: 320px;
     width: 100%;
 }

 /* Sidebar Viewed */
 .viewed-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding-bottom: 16px;
     border-bottom: 1px solid var(--line);
     margin-bottom: 16px;
 }

 .viewed-item:last-child {
     border-bottom: none;
     padding-bottom: 0;
     margin-bottom: 0;
 }

 .viewed-item img {
     width: 60px;
     height: 80px;
     object-fit: contain;
     border: 1px solid var(--line);
     border-radius: 4px;
     padding: 4px;
 }

 .viewed-item__info h4 {
     font-size: 12.5px;
     font-weight: 600;
     margin: 0 0 6px;
     line-height: 1.4;
     color: #333;
 }

 .viewed-item__info .price {
     font-size: 14px;
     display: block;
     margin-bottom: 6px;
 }

 .viewed-item__info .view-detail {
     font-size: 11.5px;
     color: var(--muted);
 }

 .viewed-item__info .view-detail:hover {
     color: var(--red);
 }

 /* Responsive adjustments */
 @media (max-width: 1024px) {
     .product-detail-top {
         grid-template-columns: 1fr;
     }

     .product-detail-layout {
         grid-template-columns: 1fr;
     }

     .feature-block {
         grid-template-columns: 1fr;
     }

     .distributor-block {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .docs-grid {
         grid-template-columns: 1fr;
     }

     .btn-group-half {
         grid-template-columns: 1fr;
     }
 }

 /* ==========================================================================
   PRODUCT DETAIL LAYOUT FIX
   ========================================================================== */

 .product-page-layout {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 20px;
     align-items: start;
 }

 .product-detail-top {
     display: grid;
     grid-template-columns: 460px 1fr;
     gap: 24px;
     background: #fff;
     padding: 24px;
     border: 1px solid var(--line);
     border-radius: 8px;
     margin-bottom: 20px;
 }

 @media (max-width: 1200px) {
     .product-detail-top {
         grid-template-columns: 1fr;
     }
 }

 /* Sidebar Widgets */
 .product-page-layout__sidebar {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .sidebar-widget {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 20px;
 }

 .sidebar-widget__title {
     font-size: 14px;
     font-weight: 800;
     text-transform: uppercase;
     color: #111;
     margin: 0 0 16px;
     text-align: center;
 }

 .sidebar-commitment {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .sidebar-commitment li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
 }

 .sidebar-commitment li i {
     font-size: 20px;
     color: var(--red);
     margin-top: 2px;
 }

 .sidebar-commitment li strong {
     display: block;
     font-size: 12.5px;
     color: #111;
 }

 .sidebar-commitment li span {
     display: block;
     font-size: 11.5px;
     color: #666;
     margin-top: 2px;
 }

 /* Contact Widget */
 .sidebar-contact {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }

 .sidebar-contact__info .phone {
     font-size: 22px;
     color: var(--red);
     font-weight: 800;
     margin-bottom: 8px;
 }

 .btn-zalo {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #c2e1ff;
     background: #fff;
     color: #0068ff;
     border-radius: 4px;
     padding: 6px 12px;
     font-size: 11px;
     font-weight: 700;
     text-decoration: none;
     transition: 0.2s;
 }

 .btn-zalo:hover {
     background: #f0f8ff;
 }

 .sidebar-contact__qr {
     flex-shrink: 0;
 }

 /* Sidebar Products */
 .sidebar-product-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .sidebar-product {
     display: flex;
     align-items: center;
     gap: 12px;
     padding-bottom: 14px;
     border-bottom: 1px solid var(--line);
 }

 .sidebar-product:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .sidebar-product>a,
 .sidebar-product__img-wrap {
     width: 75px;
     height: 75px;
     min-width: 75px;
     min-height: 75px;
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color: #ffffff;
     border: 1px solid #e9ecef;
     border-radius: 8px;
     padding: 5px;
     box-sizing: border-box;
     overflow: hidden;
     transition: border-color 0.2s ease, box-shadow 0.2s ease;
 }

 .sidebar-product>a:hover,
 .sidebar-product__img-wrap:hover {
     border-color: var(--red);
     box-shadow: 0 2px 8px rgba(227, 24, 55, 0.15);
 }

 .sidebar-product img {
     width: 100%;
     height: 100%;
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     display: block;
 }

 .sidebar-product h4 {
     font-size: 12.5px;
     font-weight: 600;
     margin: 0 0 6px;
     color: #333;
     line-height: 1.4;
 }

 .sidebar-product .price {
     font-size: 14px;
     color: var(--red);
     display: block;
 }

 .view-detail {
     font-size: 11px;
     color: #666;
     text-decoration: underline;
     margin-top: 6px;
     display: inline-block;
 }

 .view-detail:hover {
     color: var(--red);
 }

 @media (max-width: 1024px) {
     .product-detail-top {
         grid-template-columns: 1fr;
     }

     .product-detail-layout {
         grid-template-columns: 1fr;
     }

     .feature-block {
         grid-template-columns: 1fr;
     }

     .distributor-block {
         grid-template-columns: 1fr;
     }
 }

 @media (max-width: 768px) {
     .docs-grid {
         grid-template-columns: 1fr;
     }

     .btn-group-half {
         grid-template-columns: 1fr;
     }
 }

 /* ==========================================================================
   PRODUCT DETAIL LAYOUT FIX
   ========================================================================== */

 .product-page-layout {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 20px;
     align-items: start;
 }

 .product-detail-top {
     display: grid;
     grid-template-columns: 360px 1fr;
     gap: 24px;
     background: #fff;
     padding: 24px;
     border: 1px solid var(--line);
     border-radius: 8px;
     margin-bottom: 20px;
 }

 @media (max-width: 1200px) {
     .product-detail-top {
         grid-template-columns: 1fr;
     }
 }

 /* Sidebar Widgets */
 .product-page-layout__sidebar {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .sidebar-widget {
     background: #fff;
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 20px;
 }

 .sidebar-widget__title {
     font-size: 14px;
     font-weight: 800;
     text-transform: uppercase;
     color: #111;
     margin: 0 0 16px;
     text-align: center;
 }

 .sidebar-commitment {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .sidebar-commitment li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
 }

 .sidebar-commitment li i {
     font-size: 20px;
     color: var(--red);
     margin-top: 2px;
 }

 .sidebar-commitment li strong {
     display: block;
     font-size: 12.5px;
     color: #111;
 }

 .sidebar-commitment li span {
     display: block;
     font-size: 11.5px;
     color: #666;
     margin-top: 2px;
 }

 /* Contact Widget */
 .sidebar-contact {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }

 .sidebar-contact__info .phone {
     font-size: 22px;
     color: var(--red);
     font-weight: 800;
     margin-bottom: 8px;
 }

 .btn-zalo {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border: 1px solid #c2e1ff;
     background: #fff;
     color: #0068ff;
     border-radius: 4px;
     padding: 6px 12px;
     font-size: 11px;
     font-weight: 700;
     text-decoration: none;
     transition: 0.2s;
 }

 .btn-zalo:hover {
     background: #f0f8ff;
 }

 .sidebar-contact__qr {
     flex-shrink: 0;
 }

 /* Sidebar Products */
 .sidebar-product-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
 }

 .sidebar-product {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding-bottom: 16px;
     border-bottom: 1px solid var(--line);
 }

 .sidebar-product:last-child {
     border-bottom: none;
     padding-bottom: 0;
 }

 .sidebar-product img {
     width: 60px;
     height: 60px;
     object-fit: contain;
 }

 .sidebar-product h4 {
     font-size: 12.5px;
     font-weight: 600;
     margin: 0 0 6px;
     color: #333;
     line-height: 1.4;
 }

 .sidebar-product .price {
     font-size: 14px;
     color: var(--red);
     display: block;
 }

 .view-detail {
     font-size: 11px;
     color: #666;
     text-decoration: underline;
     margin-top: 6px;
     display: inline-block;
 }

 .view-detail:hover {
     color: var(--red);
 }

 @media (max-width: 1024px) {
     .product-page-layout {
         grid-template-columns: 1fr;
     }
 }

 /* Thumbnail Gaps and Styles */
 .product-gallery__thumbs {
     display: flex !important;
     flex-wrap: nowrap !important;
     gap: 8px;
     justify-content: flex-start;
     flex: 1;
     overflow: hidden;
     scroll-behavior: smooth;
     padding: 2px;
 }

 .product-gallery__thumb {
     flex: 0 0 calc(25% - 6px);
     width: calc(25% - 6px);
     max-width: calc(25% - 6px);
     height: auto;
     aspect-ratio: 1;
     object-fit: contain;
     border: 1px solid #eaeaea;
     border-radius: 6px;
     padding: 6px;
     cursor: pointer;
     transition: 0.2s;
     box-sizing: border-box;
     background: #fff;
 }

 .product-gallery__thumb:hover {
     border-color: var(--red);
 }

 .product-gallery__thumb.active {
     border: 1px solid var(--red);
     box-shadow: 0 0 0 1px var(--red);
 }

 /* Nav Arrows */
 .product-gallery__thumbs-wrap {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
     margin-top: 15px;
 }

 .product-gallery__nav {
     width: 24px !important;
     height: auto !important;
     border: none !important;
     background: transparent !important;
     color: #333 !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     cursor: pointer;
     transition: 0.2s;
     font-size: 24px !important;
     flex-shrink: 0;
     padding: 0 !important;
     font-weight: 300;
 }

 .product-gallery__nav:hover {
     color: var(--red) !important;
     background: transparent !important;
 }

 /* Stacked Buttons */
 .btn-action-stack {
     display: flex;
     flex-direction: column;
     gap: 8px;
     margin-top: 0px;
     width: 100%;
 }

 .btn-buy-now {
     background: #cc0000 !important;
     color: #fff !important;
     border: none !important;
     border-radius: 4px !important;
     padding: 4px 10px 5px !important;
     display: flex !important;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     width: 100%;
     transition: 0.2s;
 }

 .btn-buy-now:hover {
     background: #b30000 !important;
 }

 .btn-buy-now .btn-buy-now__top {
     display: flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: bold;
     margin-bottom: 1px;
     text-transform: uppercase;
     line-height: 1.15;
 }

 .btn-buy-now .btn-buy-now__sub {
     font-size: 11px;
     font-weight: normal;
     opacity: 0.92;
     line-height: 1.15;
 }

 .btn-stack-item {
     width: 100% !important;
     padding: 11px 17px !important;
     border-radius: 4px !important;
     background: #fff !important;
     color: #111 !important;
     border: 1px solid #ffcccc !important;
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     gap: 0px !important;
     font-weight: bold !important;
     cursor: pointer !important;
     transition: 0.2s !important;
     font-size: 14px !important;
 }

 .btn-stack-item:hover {
     background: #fdf2f3 !important;
     border-color: #cc0000 !important;
     color: #cc0000 !important;
 }

 .btn-stack-item i {
     font-size: 18px;
     color: #333;
     transition: 0.2s;
 }

 .btn-stack-item:hover i {
     color: #cc0000;
 }

 .btn-stack-item .muted-text {
     font-weight: normal;
     color: #666;
     font-size: 12.5px;
     margin-left: 4px;
 }

 /* Override btn-group-half to 1 column */
 .btn-group-half {
     grid-template-columns: 1fr !important;
 }


 /* -- CSS Sidebar cu (tt-sidebar) cho trang chi ti?t video -- */
 .tt-sidebar-box {
     border: 1px solid #e5e5e5;
     border-radius: 8px;
     padding: 20px;
     background: #fff;
 }

 .tt-sidebar-title {
     font-size: 15px;
     font-weight: 700;
     color: var(--red);
     margin-bottom: 15px;
     text-transform: uppercase;
 }

 .tt-sidebar-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .tt-sidebar-list li {
     border-bottom: 1px solid #f0f0f0;
 }

 .tt-sidebar-list li a {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     font-size: 13px;
     color: #333;
     text-decoration: none;
 }

 .tt-sidebar-list li a:hover {
     color: var(--red);
 }

 .tt-sidebar-list li a span {
     background: #f0f0f0;
     border-radius: 12px;
     padding: 2px 10px;
     font-size: 12px;
     font-weight: 600;
     color: var(--red);
 }

 .tt-sidebar-link {
     display: block;
     text-align: right;
     font-size: 12px;
     color: var(--red);
     text-decoration: none;
     margin-top: 10px;
     font-weight: 500;
 }

 .tt-sidebar-link:hover {
     text-decoration: underline;
 }

 .tt-hot-item {
     display: flex;
     gap: 10px;
     padding: 10px 0;
     border-bottom: 1px solid #f0f0f0;
 }

 .tt-hot-item:last-of-type {
     border-bottom: none;
 }

 .tt-hot-item img {
     width: 70px;
     max-width: 70px;
     height: 50px;
     object-fit: cover;
     border-radius: 4px;
     flex-shrink: 0;
 }

 .tt-hot-title {
     font-size: 12px;
     color: #333;
     text-decoration: none;
     font-weight: 500;
     line-height: 1.4;
     display: block;
     margin-bottom: 4px;
 }

 .tt-hot-title:hover {
     color: var(--red);
 }

 .tt-hot-meta {
     font-size: 10px;
     color: #999;
 }

 .tt-sidebar-box {
     border: 1px solid #e5e5e5;
     border-radius: 8px;
     padding: 20px;
     background: #fff;
 }

 .tt-sidebar-title {
     font-size: 15px;
     font-weight: 700;
     color: var(--red);
     margin-bottom: 15px;
     text-transform: uppercase;
 }

 .tt-sidebar-list {
     list-style: none;
     padding: 0;
     margin: 0;
 }

 .tt-sidebar-list li {
     border-bottom: 1px solid #f0f0f0;
 }

 .tt-sidebar-list li a {
     display: flex;
     justify-content: space-between;
     padding: 10px 0;
     font-size: 13px;
     color: #333;
     text-decoration: none;
 }

 .tt-sidebar-list li a:hover {
     color: var(--red);
 }

 .tt-sidebar-list li a span {
     background: #f0f0f0;
     border-radius: 12px;
     padding: 2px 10px;
     font-size: 12px;
     font-weight: 600;
     color: var(--red);
 }

 .tt-sidebar-link {
     display: block;
     text-align: right;
     font-size: 12px;
     color: var(--red);
     text-decoration: none;
     margin-top: 10px;
     font-weight: 500;
 }

 .tt-sidebar-link:hover {
     text-decoration: underline;
 }

 .tt-hot-item {
     display: flex;
     gap: 10px;
     padding: 10px 0;
     border-bottom: 1px solid #f0f0f0;
 }

 .tt-hot-item:last-of-type {
     border-bottom: none;
 }

 .tt-hot-item img {
     width: 70px;
     max-width: 70px;
     height: 50px;
     object-fit: cover;
     border-radius: 4px;
     flex-shrink: 0;
 }

 .tt-hot-title {
     font-size: 12px;
     color: #333;
     text-decoration: none;
     font-weight: 500;
     line-height: 1.4;
     display: block;
     margin-bottom: 4px;
 }

 .tt-hot-title:hover {
     color: var(--red);
 }

 .tt-hot-meta {
     font-size: 10px;
     color: #999;
 }

 .tt-cta-box {
     background: linear-gradient(135deg, var(--red) 0%, var(--red) 100%);
     border-radius: 8px;
     padding: 25px;
     color: #fff;
 }

 .tt-cta-box h4 {
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 12px;
 }

 .tt-cta-box ul {
     list-style: none;
     padding-left: 0;
     text-align: left;
 }

 .tt-cta-box li {
     font-size: 13px;
     margin-bottom: 8px;
     position: relative;
     padding-left: 20px;
     text-align: left;
 }

 .tt-cta-box li::before {
     content: "\f058";
     font-family: "Font Awesome 6 Free";
     font-weight: 900;
     position: absolute;
     left: 0;
     top: 2px;
     color: #fff;
 }

 .tt-cta-box li i {
     display: none;
 }

 .tt-cta-btn {
     display: inline-block;
     padding: 10px 20px;
     background: #ffc107;
     color: var(--red);
     border-radius: 5px;
     font-size: 13px;
     font-weight: 700;
     text-decoration: none;
     margin-top: 10px;
     transition: 0.2s;
 }

 .tt-cta-btn:hover {
     background: #e0a800;
     color: var(--red);
 }

 @media (max-width: 991px) {
     .tt-card-img-wrap img {
         height: 180px;
     }

     .tt-card-small .tt-card-img-wrap img {
         height: 150px;
     }
 }

 /* ========================================================
   TRANG VIDEO (prefix: .vd-)
   ======================================================== */
 .vd-player-wrap {
     background: #fff;
 }

 .vd-player-main {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     background: #000;
 }

 .vd-player-thumb {
     width: 100%;
     height: 420px;
     object-fit: cover;
     display: block;
     opacity: 0.85;
 }

 .vd-player-overlay {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 20px;
 }

 .vd-badge-live {
     position: absolute;
     top: 15px;
     left: 15px;
     background: #e30000;
     color: #fff;
     padding: 4px 12px;
     font-size: 11px;
     font-weight: 700;
     border-radius: 4px;
 }

 .vd-play-btn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.9);
     color: var(--red);
     border: none;
     border-radius: 50%;
     font-size: 22px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: 0.2s;
 }

 .vd-play-btn:hover {
     background: #fff;
     transform: translate(-50%, -50%) scale(1.1);
 }

 .vd-progress-bar {
     height: 4px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 2px;
     margin-bottom: 8px;
 }

 .vd-progress-fill {
     height: 100%;
     background: #e30000;
     border-radius: 2px;
 }

 .vd-player-controls {
     display: flex;
     justify-content: space-between;
     color: #fff;
     font-size: 13px;
 }

 .vd-player-controls span {
     cursor: pointer;
 }

 .vd-video-title {
     font-size: 20px;
     font-weight: 700;
     color: var(--red);
     margin: 15px 0 8px;
 }

 .vd-actions {
     display: flex;
     gap: 12px;
     margin-top: 10px;
 }

 .vd-action-btn {
     padding: 6px 16px;
     border: 1px solid #e5e5e5;
     border-radius: 20px;
     font-size: 13px;
     color: #333;
     text-decoration: none;
     transition: 0.2s;
 }

 .vd-action-btn:hover {
     border-color: var(--red);
     color: var(--red);
 }

 .vd-related-card {
     margin-bottom: 0;
 }

 .vd-thumb-wrap {
     position: relative;
     border-radius: 6px;
     overflow: hidden;
     margin-bottom: 8px;
 }

 .vd-thumb-wrap img {
     width: 100%;
     height: 120px;
     object-fit: cover;
     display: block;
 }

 .vd-duration {
     position: absolute;
     bottom: 6px;
     left: 6px;
     background: rgba(0, 0, 0, 0.75);
     color: #fff;
     padding: 2px 8px;
     font-size: 11px;
     border-radius: 3px;
     font-weight: 600;
 }

 .vd-rel-name {
     font-size: 12px;
     color: #333;
     font-weight: 500;
     line-height: 1.4;
     margin-bottom: 4px;
 }

 .vd-thumb-sm {
     width: 80px;
     height: 55px;
     flex-shrink: 0;
 }

 .vd-thumb-sm img {
     width: 80px;
     height: 55px;
 }

 .vd-dur-sm {
     font-size: 9px;
     padding: 1px 5px;
 }

 .vd-pagination {
     display: flex;
     justify-content: center;
     gap: 6px;
     margin-top: 10px;
 }

 .vd-page-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 4px;
     background: #f8f9fa;
     color: #333;
     text-decoration: none;
     font-size: 14px;
     font-weight: 500;
     transition: all 0.2s ease;
     border: 1px solid #dee2e6;
 }

 .vd-page-btn:hover {
     background: #e9ecef;
     color: #111;
 }

 .vd-page-btn.active {
     background: var(--red, #e60012);
     color: #fff;
     border-color: var(--red, #e60012);
 }

 .vd-page-btn.disabled {
     opacity: 0.5;
     pointer-events: none;
 }

 /* Custom styles for Homepage Categories */
 .home-category-section .section__title {
     text-transform: uppercase;
     font-weight: 800;
     color: #000;
 }

 .home-category-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 15px;
     padding-bottom: 5px;
 }

 .home-category-grid::-webkit-scrollbar {
     height: 6px;
 }

 .home-category-grid::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius: 10px;
 }

 .home-category-card {
     flex: 0 0 auto;
     width: calc(100% / 6 - 12.5px);
     /* exactly 6 items per row with 15px gap */
     min-width: 140px;
     background: #fff;
     border: 1px solid #f0f0f0;
     border-radius: 8px;
     padding: 20px 10px;
     text-align: center;
     text-decoration: none;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: center;
     transition: all 0.3s ease;
 }

 .home-category-card:hover {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     border-color: #e0e0e0;
     transform: translateY(-2px);
 }

 .home-category-card__icon {
     margin-bottom: 12px;
     height: 125px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     flex-shrink: 0;
 }

 .home-category-card__icon img,
 .home-category-card img {
     max-height: 125px;
     height: auto;
     max-width: 100%;
     object-fit: contain;
     margin: auto;
     display: block;
 }

 .home-category-card__name {
     font-weight: 700;
     font-size: 12px;
     color: #333;
     line-height: 1.45;
     padding-top: 0;
     margin: 0;
     width: 100%;
     text-align: center;
     height: 35px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     word-break: break-word;
 }

 @media (max-width: 1200px) {
     .home-category-card {
         width: calc(100% / 5 - 12px);
     }
 }

 @media (max-width: 768px) {
     .home-category-card {
         width: calc(100% / 3 - 10px);
     }
 }

 @media (max-width: 576px) {
     .home-category-card {
         width: calc(100% / 2 - 8px);
     }
 }

 .video-card {
     border: 1px solid var(--line);
     border-radius: 8px;
     overflow: hidden;
     background: #fff;
     height: 100%;
 }

 .video-card {
     transition: all 0.3s ease;
 }

 .video-card:hover {
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
     border-color: #e0e0e0;
     transform: translateY(-2px);
 }

 .video-card i.fa-circle-play {
     transition: all 0.3s ease;
 }

 .video-card:hover i.fa-circle-play {
     color: #e60012 !important;
     transform: translate(-50%, -50%) scale(1.15) !important;
 }

 .video-card h4 {
     transition: all 0.3s ease;
 }

 .video-card:hover h4 {
     color: #e60012 !important;
 }

 .timeline__item {
     transition: all 0.3s ease;
     cursor: pointer;
 }

 .timeline__item:hover {
     transform: translateY(-3px);
 }

 .timeline__item strong {
     transition: all 0.3s ease;
 }

 .timeline__item:hover strong {
     transform: scale(1.1);
     color: #b00000;
 }

 .timeline__item::before {
     transition: all 0.3s ease;
 }

 .timeline__item:hover::before {
     transform: translateX(-50%) scale(1.4);
     box-shadow: 0 0 10px rgba(230, 0, 18, 0.5);
 }

 .stat {
     transition: all 0.3s ease;
 }

 .stat:hover {
     transform: translateY(-3px);
 }

 .stat strong {
     display: inline-block;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .stat:hover strong {
     color: #b00000;
     transform: scale(1.1);
 }


 .checkmark-list ul {
     list-style: none !important;
     padding-left: 0 !important;
 }

 .checkmark-list ul li {
     position: relative;
     padding-left: 24px;
     margin-bottom: 8px;
 }

 .checkmark-list ul li::before {
     content: '\f058';
     font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
     font-weight: 400;
     color: var(--red, #e60012);
     position: absolute;
     left: 0;
     top: 2px;
     font-size: 14px;
 }

 .cert-logo {
     height: 45px;
     max-width: 100%;
     object-fit: contain;
     mix-blend-mode: multiply;
 }

 .solution-detail-hero--banner {
     min-height: auto;
     padding: 0;
 }

 .solution-detail-hero--banner img {
     width: 100%;
     display: block;
     height: auto;
 }

 .problem-section {
     padding-top: 50px;
 }

 .problem-section__head {
     text-align: left;
     margin-bottom: 30px;
     display: block;
 }

 .problem-section__title {
     font-size: 22px;
     text-transform: uppercase;
     margin-bottom: 5px;
 }

 .problem-section__desc {
     font-size: 14px;
     margin-top: 0;
     color: #6c757d;
 }

 .compare-item .comp-close {
     font-size: 16px;
 }

 .compare-item .comp-close:hover {
     color: #d1121b;
 }

 .pagination a.disabled {
     pointer-events: none;
     opacity: 0.5;
     color: #999;
     border-color: #eee;
     background-color: transparent;
 }

 /* ========================================================
   GI? H�NG, THANH TO�N, HO�N T?T (cart, checkout, success)
   ======================================================== */
 .cart-section {
     background: linear-gradient(135deg, #f8f9fc 0%, #eef1f6 100%);
     min-height: 80vh;
 }

 .cart-card {
     background: #fff;
     border-radius: 16px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
     overflow: hidden;
 }

 .cart-table th {
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: #878a99;
     font-weight: 600;
     border: none;
     padding: 1rem 1.25rem;
 }

 .cart-table td {
     padding: 1rem 1.25rem;
     vertical-align: middle;
     border-color: #f1f3f5;
     font-size: 0.9rem;
 }

 .cart-product-img {
     width: 56px;
     height: 56px;
     object-fit: cover;
     border-radius: 10px;
     border: 1px solid #eee;
 }

 .cart-product-name {
     font-size: 12px;
     font-weight: 600;
     color: #1a202c;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .qty-control {
     display: flex;
     align-items: center;
     border: 1px solid #dee2e6;
     border-radius: 10px;
     overflow: hidden;
     width: fit-content;
 }

 .qty-control button {
     background: #f8f9fa;
     border: none;
     width: 32px;
     height: 34px;
     font-size: 1rem;
     color: #555;
     transition: background 0.2s;
 }

 .qty-control button:hover {
     background: #e9ecef;
 }

 .qty-control input {
     width: 40px;
     text-align: center;
     border: none;
     border-left: 1px solid #dee2e6;
     border-right: 1px solid #dee2e6;
     font-size: 0.85rem;
     font-weight: 600;
 }

 .qty-control input:focus {
     outline: none;
 }

 .cart-price {
     font-weight: 700;
     color: #f06548;
     font-size: 0.95rem;
 }

 .btn-remove {
     color: #adb5bd;
     transition: color 0.2s;
     background: none;
     border: none;
     padding: 4px;
 }

 .btn-remove:hover {
     color: #f06548;
 }

 .summary-card {
     background: #fff;
     border-radius: 16px;
     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
 }

 .summary-label {
     font-size: 0.85rem;
     color: #878a99;
 }

 .summary-value {
     font-size: 0.85rem;
     font-weight: 500;
 }

 .btn-proceed {
     background: var(--red);
     border: none;
     border-radius: 12px;
     font-size: 0.95rem;
     padding: 10px;
     transition: transform 0.2s, box-shadow 0.2s;
 }

 .btn-proceed:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(64, 81, 137, 0.3);
 }

 .empty-cart-icon {
     font-size: 4rem;
     color: #dee2e6;
 }

 .breadcrumb-cart a {
     color: #405189;
     text-decoration: none;
     font-size: 0.85rem;
 }

 @media (max-width: 767px) {
     .cart-section {
         min-height: auto;
     }

     .cart-section.py-4 {
         padding-top: 0.75rem !important;
         padding-bottom: 0.75rem !important;
     }

     .cart-section .container {
         padding-left: 10px;
         padding-right: 10px;
     }

     .cart-section h4 {
         font-size: 1rem;
         margin-bottom: 0.75rem !important;
     }

     .cart-section .row.g-4 {
         --bs-gutter-y: 0.75rem;
     }

     .cart-card {
         border-radius: 10px;
     }

     .cart-table th {
         padding: 0.5rem 0.5rem;
         font-size: 0.68rem;
     }

     .cart-table td {
         padding: 0.5rem 0.5rem;
         font-size: 0.78rem;
     }

     .cart-product-img {
         width: 42px;
         height: 42px;
         border-radius: 8px;
     }

     .cart-product-img.me-3 {
         margin-right: 0.5rem !important;
     }

     .cart-product-name {
         font-size: 11px;
     }

     .cart-price {
         font-size: 0.8rem;
     }

     .qty-control button {
         width: 26px;
         height: 28px;
         font-size: 0.85rem;
     }

     .qty-control input {
         width: 32px;
         font-size: 0.78rem;
     }

     .summary-card {
         border-radius: 10px;
     }

     .summary-card.p-4 {
         padding: 0.75rem !important;
     }

     .summary-card h5 {
         font-size: 0.9rem !important;
         margin-bottom: 0.5rem !important;
     }

     .summary-label,
     .summary-value {
         font-size: 0.78rem;
     }

     .summary-card .mb-4 {
         margin-bottom: 0.75rem !important;
     }

     .summary-card .mb-3 {
         margin-bottom: 0.5rem !important;
     }

     .btn-proceed {
         font-size: 0.85rem;
         padding: 8px;
         border-radius: 10px;
     }

     .sp-breadcrumb {
         margin-bottom: 0.5rem !important;
         font-size: 0.78rem;
     }

     .checkout-steps {
         margin: 0 auto 15px auto;
     }
 }

 .checkout-steps {
     display: flex;
     justify-content: space-between;
     max-width: 400px;
     margin: 0 auto 30px auto;
     position: relative;
     padding: 0 15px;
 }

 .checkout-steps::before {
     content: '';
     position: absolute;
     top: 15px;
     left: 50px;
     right: 50px;
     height: 1px;
     background: #e5e5e5;
     z-index: 1;
 }

 /* This after is dynamically overridden in views for progress, 
   but a default is needed */
 .checkout-steps::after {
     content: '';
     position: absolute;
     top: 15px;
     left: 50px;
     width: 0;
     height: 1px;
     background: var(--red);
     z-index: 1;
 }

 .checkout-step {
     display: flex;
     flex-direction: column;
     align-items: center;
     position: relative;
     z-index: 2;
     background: transparent;
 }

 .checkout-step-icon {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     border: 1px solid #ccc;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 13px;
     color: #777;
     margin-bottom: 8px;
     background: #fff;
     text-decoration: none;
 }

 .checkout-step-text {
     font-size: 13px;
     color: #777;
     font-weight: 500;
 }

 .checkout-step.completed .checkout-step-icon {
     border-color: var(--red);
     color: var(--red);
 }

 .checkout-step.active .checkout-step-icon {
     background: var(--red);
     border-color: var(--red);
     color: #fff;
 }

 .checkout-step.active .checkout-step-text {
     color: var(--red);
     font-weight: 600;
 }

 @keyframes pulse {
     0% {
         transform: scale(0.9);
         opacity: 0.3;
     }

     50% {
         transform: scale(1.4);
         opacity: 0;
     }

     100% {
         transform: scale(0.9);
         opacity: 0;
     }
 }

 .empty-cart-wrapper .btn-danger:hover {
     transform: translateY(-3px);
     box-shadow: 0 10px 25px rgba(10, 179, 156, 0.4) !important;
 }

 .custom-group .btn-brand-solid {
     background-color: var(--red) !important;
     border-color: var(--red) !important;
     color: #fff !important;
 }

 .custom-group .btn-brand-outline {
     color: var(--red) !important;
     border-color: var(--red) !important;
 }

 .custom-group .btn-brand-outline:hover {
     background-color: var(--red) !important;
     color: #fff !important;
 }

 .success-msg-content ul {
     margin-bottom: 0;
     padding-left: 1.25rem;
 }

 .success-msg-content li {
     margin-bottom: 4px;
 }

 .success-msg-content li:last-child {
     margin-bottom: 0;
 }

 /* Specific overrides for checkout */
 @media (max-width: 767px) {
     .container.mt-3.mb-3 {
         margin-top: 0.5rem !important;
         margin-bottom: 0.5rem !important;
     }

     .container.mb-5 {
         margin-bottom: 1.5rem !important;
     }

     .sp-breadcrumb {
         font-size: 0.78rem;
     }

     .checkout-steps {
         margin: 0 auto 12px auto;
     }

     .row.g-4 {
         --bs-gutter-y: 0.75rem;
     }

     .gh-form-box.p-3 {
         padding: 0.75rem !important;
     }

     .gh-form-box h5 {
         font-size: 14px !important;
     }

     .gh-form-box label {
         font-size: 12px !important;
     }

     .gh-form-box .form-control,
     .gh-form-box .form-select {
         font-size: 13px !important;
     }

     .summary-card.p-4 {
         padding: 0.75rem !important;
     }
 }

 .search-input-wrapper button {
     position: absolute;
     right: 15px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     color: var(--red, #e60012);
     cursor: pointer;
     padding: 0;
     z-index: 10;
 }

 .search-input-wrapper button i {
     position: static;
     transform: none;
     font-size: 16px;
     color: inherit;
 }

 .sp-breadcrumb {
     font-size: 13px;
     color: #666;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 8px;
 }

 .sp-breadcrumb a {
     color: #666;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .sp-breadcrumb a:hover {
     color: var(--red, #e60012);
 }

 .sp-breadcrumb i {
     font-size: 10px;
     color: #999;
 }

 .sp-breadcrumb span {
     color: #333;
     font-weight: 500;
 }

 /* News Featured Slider */
 .featured-news-slider {
     position: relative;
     border-radius: 12px;
     overflow: hidden;
     height: 100%;
     min-height: 400px;
 }

 .featured-news-slide {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
 }

 .featured-news-bg {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .featured-news-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top, rgba(11, 15, 25, 0.9) 0%, rgba(11, 15, 25, 0.4) 50%, rgba(11, 15, 25, 0) 100%);
 }

 .badge-featured {
     position: absolute;
     top: 20px;
     left: 20px;
     background: var(--red);
     color: #fff;
     padding: 6px 12px;
     font-size: 11px;
     font-weight: 700;
     border-radius: 4px;
     z-index: 2;
 }

 .slider-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.9);
     border: none;
     color: #333;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 2;
     transition: 0.2s;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .slider-arrow:hover {
     background: #fff;
     color: var(--red);
 }

 .slider-arrow.prev {
     left: 20px;
 }

 .slider-arrow.next {
     right: 20px;
 }

 .featured-news-content {
     position: absolute;
     bottom: 20px;
     left: 40px;
     right: 40px;
     color: #fff;
     z-index: 2;
 }

 .featured-news-content h2 {
     font-size: 24px;
     font-weight: 700;
     margin: 0 0 10px;
     line-height: 1.3;
 }

 .featured-news-content p {
     font-size: 14px;
     color: #e2e8f0;
     margin: 0 0 15px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .featured-news-meta {
     display: flex;
     align-items: center;
     gap: 20px;
     font-size: 13px;
     color: #cbd5e1;
 }

 .featured-news-meta i {
     margin-right: 6px;
 }

 /* News List Cards */
 .news-list--cards {
     display: flex;
     flex-direction: column;
     gap: 15px;
     height: 100%;
 }

 .page-news-card {
     display: flex;
     align-items: stretch;
     overflow: hidden;
     background: #fafafc;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     transition: 0.2s;
     flex: 1;
     margin-bottom: 16px;
 }

 .page-news-card:hover {
     box-shadow: var(--shadow);
     border-color: #d1d5db;
 }

 .page-news-card img {
     width: 130px;
     height: 100%;
     object-fit: cover;
     flex-shrink: 0;
 }

 .page-news-card-body {
     padding: 12px 15px;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }

 .page-news-card-body time {
     font-size: 11px;
     color: var(--muted);
     margin-bottom: 5px;
     flex-shrink: 0;
 }

 .page-news-card-body h4 {
     font-size: 14px;
     font-weight: 700;
     margin: 0 0 8px;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     flex-shrink: 0;
 }

 .page-news-card-body small {
     display: flex;
     align-items: center;
     gap: 6px;
     margin-top: auto;
 }

 /* Sidebar News Custom */
 .sidebar-box--gray {
     background: #fafafc;
     border-radius: 8px;
     padding: 20px;
     margin-bottom: 20px;
     border: none;
 }

 .search-box-wrapper {
     position: relative;
 }

 .search-box-wrapper input {
     width: 100%;
     padding: 10px 35px 10px 15px;
     border: 1px solid #e5e7eb;
     border-radius: 6px;
     font-size: 13px;
     outline: none;
 }

 .search-box-wrapper .search-icon {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     color: #888;
     font-size: 14px;
 }

 .category-list-custom {
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .category-list-custom a {
     display: flex;
     align-items: center;
     padding: 5px 0px;
     border-radius: 6px;
     color: #333;
     font-size: 13px;
     font-weight: 600;
     transition: 0.2s;
 }

 .category-list-custom a i {
     width: 20px;
     color: #666;
     font-size: 15px;
     margin-right: 10px;
 }

 .category-list-custom a span:not(.count) {
     flex: 1;
 }

 .category-list-custom a .count {
     background: #fff;
     border: 1px solid #eee;
     color: #555;
     font-size: 11px;
     padding: 2px 6px;
     border-radius: 4px;
     font-weight: 700;
 }

 .category-list-custom a:hover,
 .category-list-custom a.active {
     background: #fdf2f3;
     color: var(--red);
 }

 .category-list-custom a:hover i,
 .category-list-custom a.active i {
     color: var(--red);
 }

 .category-list-custom a:hover .count,
 .category-list-custom a.active .count {
     background: transparent;
     border-color: transparent;
     color: var(--red);
 }

 .popular-articles {
     display: flex;
     flex-direction: column;
     gap: 15px;
 }

 .popular-item {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     text-decoration: none;
 }

 .popular-item .rank {
     background: var(--red);
     color: #fff;
     font-size: 11px;
     font-weight: 800;
     width: 20px;
     height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 4px;
     flex-shrink: 0;
     margin-top: 2px;
 }

 .popular-item img {
     width: 60px;
     height: 60px;
     border-radius: 6px;
     object-fit: cover;
     flex-shrink: 0;
 }

 .popular-content {
     flex: 1;
 }

 .popular-content h4 {
     font-size: 12px;
     line-height: 1.4;
     margin: 0 0 5px;
     font-weight: 700;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     color: #333;
     transition: color 0.2s;
 }

 .popular-item:hover .popular-content h4 {
     color: var(--red);
 }

 .popular-content small {
     display: flex;
     align-items: center;
     gap: 5px;
     color: var(--muted);
     font-size: 11px;
 }

 .btn-view-all {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     border-radius: 5px;
     padding: 8px 20px;
     border: 1px solid #e5e7eb;
     color: #333;
     background: #fff;
     font-weight: 700;
     font-size: 12px;
     transition: 0.2s;
     width: 100%;
 }

 .btn-view-all:hover {
     border-color: var(--red);
     color: var(--red);
 }

 /* News Main Area Custom */
 .news-tabs-wrapper {
     border-bottom: 1px solid #e5e7eb;
     margin-bottom: 15px;
     padding-bottom: 0;
 }

 .news-tabs {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
 }

 .news-tabs li a {
     display: block;
     padding: 10px 0;
     color: #555;
     font-size: 14px;
     font-weight: 600;
     border-bottom: 2px solid transparent;
     transition: 0.2s;
 }

 .news-tabs li.active a,
 .news-tabs li a:hover {
     color: var(--red);
     border-bottom-color: var(--red);
 }

 .toolbar-sort {
     font-size: 13px;
     color: #555;
 }

 .toolbar-sort select {
     border: 1px solid #e5e7eb;
     border-radius: 4px;
     padding: 4px 10px;
     font-size: 13px;
     margin-left: 8px;
     outline: none;
 }

 .article-card__image-wrapper {
     position: relative;
 }

 .badge-new {
     position: absolute;
     top: 10px;
     left: 10px;
     background: var(--red);
     color: #fff;
     font-size: 10px;
     font-weight: 700;
     padding: 3px 8px;
     border-radius: 4px;
     z-index: 2;
 }

 .article-card__footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: auto;
     border-top: 1px solid #f0f0f0;
     padding-top: 12px;
 }

 .article-card__footer .views {
     font-size: 12px;
     color: #888;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .article-card__footer .section__link {
     color: var(--red);
     font-size: 12px;
     font-weight: 700;
 }

 .article-card {
     display: flex;
     flex-direction: column;
 }

 .article-card__body {
     flex: 1;
     display: flex;
     flex-direction: column;
 }

 .article-card h3 {
     font-size: 14px;
     line-height: 1.5;
     margin: 8px 0;
     font-weight: 800;
     color: #111;
 }

 .article-card p {
     font-size: 13px;
     line-height: 1.5;
     color: #666;
     margin-bottom: 15px;
 }

 /* Compare Tray Styles */
 .compare-tray {
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     background: #fff;
     box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
     z-index: 9999;
     transition: transform 0.3s ease;
     border-top: 1px solid #ddd;
 }

 .compare-tray.collapsed {
     transform: translateY(100%);
 }

 .compare-tray__toggle {
     position: absolute;
     top: -31px;
     right: 20px;
     background: #fff;
     padding: 5px 15px;
     border: 1px solid #ddd;
     border-bottom: none;
     border-radius: 5px 5px 0 0;
     cursor: pointer;
     box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.05);
     font-size: 13px;
     color: #555;
     transition: all 0.3s ease;
 }

 .compare-tray.collapsed .compare-tray__toggle {
     top: -75px;
     left: 20px;
     right: auto;
     border: 1px solid #ddd;
     border-radius: 20px;
     padding: 8px 18px;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
     color: #2874f0;
     font-weight: 500;
     font-size: 14px;
 }

 .compare-tray__content {
     padding: 15px 0;
 }

 .compare-slot {
     flex: 1;
     border-right: 1px solid #eee;
     border-radius: 0;
     padding: 10px;
     text-align: center;
     position: relative;
     min-height: 120px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     background: #fff;
 }

 .compare-slot:last-child {
     border-right: none;
 }

 .compare-slot.filled {
     border: none;
     border-right: 1px solid #eee;
     background: #fff;
 }

 .compare-slot img {
     max-height: 60px;
     object-fit: contain;
     margin-bottom: 5px;
 }

 .compare-slot .remove-btn {
     position: absolute;
     top: 5px;
     right: 5px;
     cursor: pointer;
     color: #999;
     font-size: 14px;
 }

 .compare-slot .remove-btn:hover {
     color: #d1121b;
 }

 .compare-slot .title {
     font-size: 12px;
     color: #333;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     line-height: 1.4;
 }

 .compare-slot-empty {
     cursor: pointer;
     transition: all 0.2s;
     border: none;
 }

 .empty-icon-box {
     width: 44px;
     height: 44px;
     border: 1px dashed #bbb;
     border-radius: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     transition: all 0.2s;
 }

 .empty-icon-box i {
     font-size: 18px;
     color: #bbb;
     transition: all 0.2s;
 }

 .compare-slot-empty:hover .empty-icon-box {
     border-color: #0d6efd;
     background: #f0f7ff;
 }

 .compare-slot-empty:hover .empty-icon-box i {
     color: #0d6efd;
 }

 .compare-slot-empty:hover .empty-text {
     color: #0d6efd !important;
 }

 /* Global Heading Standard Sizes */
 h1 {
     font-size: 26px;
 }

 h2 {
     font-size: 22px;
 }

 h3 {
     font-size: 18px;
 }

 h4 {
     font-size: 16px;
 }

 h5 {
     font-size: 14px;
 }

 h6 {
     font-size: 13px;
 }

 /* Giới hạn font size trong nội dung bài viết */
 .ck-content h1,
 .post-detail h1 {
     font-size: 24px !important;
     margin: 15px 0 !important;
     font-weight: 700 !important;
     line-height: 1.3 !important;
 }

 .ck-content h2,
 .post-detail h2 {
     font-size: 20px !important;
     margin: 12px 0 !important;
     font-weight: 700 !important;
     line-height: 1.3 !important;
 }

 .ck-content h3,
 .post-detail h3 {
     font-size: 18px !important;
     margin: 10px 0 !important;
     font-weight: 600 !important;
     line-height: 1.4 !important;
 }

 .ck-content h4,
 .post-detail h4 {
     font-size: 16px !important;
     margin: 10px 0 !important;
     font-weight: 600 !important;
     line-height: 1.4 !important;
 }

 .ck-content h5,
 .post-detail h5 {
     font-size: 15px !important;
     margin: 8px 0 !important;
     font-weight: 600 !important;
     line-height: 1.5 !important;
 }

 .ck-content h6,
 .post-detail h6 {
     font-size: 14px !important;
     margin: 8px 0 !important;
     font-weight: 600 !important;
     line-height: 1.5 !important;
 }

 /* Styling for tables in CKEditor content */
 .ck-content table {
     width: 100% !important;
     border-collapse: collapse !important;
     margin: 20px 0 !important;
     font-size: 15px !important;
     font-family: inherit !important;
     background-color: #fff !important;
     border: 1px solid #e0e0e0 !important;
 }

 /* 5-Column Grid Layout Extension */
 @media (min-width: 992px) {
     .col-lg-2-4 {
         flex: 0 0 auto;
         width: 20%;
     }
 }

 @media (min-width: 1200px) {
     .col-xl-2-4 {
         flex: 0 0 auto;
         width: 20%;
     }
 }

 .ck-content table caption {
     caption-side: top !important;
     padding: 12px 15px !important;
     background-color: #f8f9fa !important;
     font-weight: 700 !important;
     color: #0f136d !important;
     border: 1px solid #e0e0e0 !important;
     border-bottom: none !important;
     font-size: 16px !important;
     text-transform: uppercase !important;
 }

 .ck-content table caption p {
     margin: 0 !important;
 }

 .ck-content table thead tr {
     background-color: #0f136d !important;
     color: #ffffff !important;
 }

 .ck-content table thead th {
     padding: 12px 15px !important;
     font-weight: 600 !important;
     border: 1px solid #0f136d !important;
     color: #ffffff !important;
 }

 .ck-content table thead th span {
     color: #ffffff !important;
 }

 .ck-content table tbody th,
 .ck-content table tbody td {
     padding: 10px 15px !important;
     border: 1px solid #e0e0e0 !important;
 }

 .ck-content table tbody tr {
     transition: background-color 0.2s ease !important;
 }

 .ck-content table tbody tr:nth-of-type(even) {
     background-color: #f8f9fa !important;
 }

 .ck-content table tbody tr:hover {
     background-color: #f1f3f5 !important;
 }

 /* ===== NEW SEARCH BOX HEADER ===== */
 .search-box {
     display: flex;
     border: 1px solid #e2e8f0;
     border-radius: 8px;
     background: #fff;
     padding: 3px;
     height: 44px;
     align-items: stretch;
     transition: border-color 0.2s;
 }

 .search-box:focus-within {
     border-color: #cbd5e1;
 }

 .search-box .search-input {
     border: none !important;
     box-shadow: none !important;
     background: transparent !important;
     padding: 0 10px 0 15px !important;
     font-size: 13.5px !important;
     color: #1e293b !important;
     font-weight: 500 !important;
     flex: 1;
     height: 100%;
 }

 .search-box .search-input::placeholder {
     color: #8c98a9 !important;
     font-weight: 400 !important;
     font-size: 13.5px !important;
 }

 .search-box .search-input:focus {
     outline: none !important;
     box-shadow: none !important;
 }

 .search-box .btn-search {
     background: var(--red) !important;
     color: #fff !important;
     border: none !important;
     border-radius: 6px !important;
     width: 42px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: background 0.2s;
     font-size: 16px;
 }

 .search-box .btn-search:hover {
     background: #cc0000 !important;
 }

 /* Download Center Grid Modern Card (Kho tài liệu & phần mềm) */
 .download-cat-card {
     border-color: #e2e8f0 !important;
     min-height: 155px;
     background-color: #fff;
     transition: all 0.25s ease-in-out;
 }

 .download-cat-card .btn-action-outline {
     border: 1px solid #fecdd3;
     color: var(--red, #e30000);
     background-color: #fff;
 }

 .download-cat-card:hover {
     border-color: var(--red, #e30000) !important;
     box-shadow: 0 4px 15px rgba(227, 0, 0, 0.1);
     transform: translateY(-2px);
 }

 .download-cat-card:hover .btn-action-outline {
     background-color: var(--red, #e30000) !important;
     color: #fff !important;
     border-color: var(--red, #e30000) !important;
 }

 /* ===== CUSTOM COMPARE CHECKBOX STYLES ===== */
 .compare-action {
     margin-top: 8px;
     padding-top: 8px;
     border-top: 1px dashed #e1e1e1;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .btn-card-add-cart {
     background: transparent;
     border: none;
     padding: 2px 4px;
     margin: 0;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #475569;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.2s ease;
     text-decoration: none;
     line-height: 1;
 }

 .btn-card-add-cart i {
     color: #f26522;
     font-size: 15px;
     transition: transform 0.2s ease, color 0.2s ease;
 }

 .btn-card-add-cart:hover {
     color: #e30000;
 }

 .btn-card-add-cart:hover i {
     color: #e30000;
     transform: scale(1.15);
 }

 .compare-label {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     cursor: pointer;
     font-size: 13px;
     font-weight: 500;
     color: #666;
     user-select: none;
     transition: color 0.2s ease;
     position: relative;
 }

 .compare-label input[type="checkbox"] {
     position: absolute;
     opacity: 0;
     width: 0;
     height: 0;
     margin: 0;
     pointer-events: none;
 }

 .compare-checkbox-custom {
     width: 16px;
     height: 16px;
     border: 1.5px solid #ccc;
     border-radius: 3px;
     background-color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     transition: all 0.2s ease;
     flex-shrink: 0;
     box-sizing: border-box;
 }

 .compare-checkbox-custom::after {
     content: "";
     width: 4px;
     height: 8px;
     border: solid #fff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg) scale(0);
     transition: transform 0.15s ease;
     margin-top: -1px;
 }

 /* Hover: Rê chuột vào màu đỏ */
 .compare-label:hover {
     color: #d1121b;
 }

 .compare-label:hover .compare-checkbox-custom {
     border-color: #d1121b;
 }

 /* Checked: Tích vào thì nút tích màu đỏ */
 .compare-label input[type="checkbox"]:checked~.compare-checkbox-custom {
     background-color: #d1121b;
     border-color: #d1121b;
 }

 .compare-label input[type="checkbox"]:checked~.compare-checkbox-custom::after {
     transform: rotate(45deg) scale(1);
 }

 .compare-label input[type="checkbox"]:checked~span:last-child {
     color: #333;
 }

 /* ==========================================================================
   RESPONSIVE MEDIA & RICH TEXT CONTENT (IMAGES, IFRAMES, VIDEOS, TABLES)
   Fixes distorted height/width, fixed frames & forced scaling across all pages
   ========================================================================== */
 .main-detail-content img,
 .content-body img,
 .product-description img,
 .article-content img,
 .news-detail img,
 .doc-detail img,
 .vd-detail-card img,
 .ck-content img,
 .rich-text img,
 .entry-content img,
 .detail-description img,
 .technical-specs img,
 .accordion-body img {
     max-width: 100% !important;
     height: auto !important;
     object-fit: contain !important;
     margin-top: 14px !important;
     margin-bottom: 14px !important;
     display: block !important;
     margin-left: auto !important;
     margin-right: auto !important;
 }

 .main-detail-content iframe,
 .content-body iframe,
 .product-description iframe,
 .article-content iframe,
 .news-detail iframe,
 .doc-detail iframe,
 .vd-detail-card iframe,
 .ck-content iframe,
 .rich-text iframe,
 .entry-content iframe,
 .detail-description iframe,
 .technical-specs iframe,
 .accordion-body iframe,
 .main-detail-content video,
 .content-body video,
 .product-description video,
 .article-content video,
 .vd-detail-card video,
 .ck-content video,
 .main-detail-content embed,
 .content-body embed {
     max-width: 100% !important;
     width: 100% !important;
     height: auto !important;
     aspect-ratio: 16 / 9 !important;
     margin-top: 14px !important;
     margin-bottom: 14px !important;
 }

 .main-detail-content table,
 .content-body table,
 .product-description table,
 .article-content table,
 .news-detail table,
 .doc-detail table,
 .vd-detail-card table,
 .ck-content table,
 .rich-text table,
 .entry-content table,
 .detail-description table,
 .technical-specs table,
 .accordion-body table {
     width: 100% !important;
     max-width: 100% !important;
     margin-top: 14px !important;
     margin-bottom: 14px !important;
     color: #334155 !important;
     vertical-align: top !important;
     border-collapse: collapse !important;
     border-spacing: 0 !important;
     border: 1px solid #e2e8f0 !important;
     border-radius: 6px !important;
     overflow: hidden !important;
     background-color: #ffffff !important;
     display: block !important;
     overflow-x: auto !important;
     -webkit-overflow-scrolling: touch;
 }

 /* Force system font reset inside rich-text tables */
 .main-detail-content table *,
 .content-body table *,
 .product-description table *,
 .article-content table *,
 .news-detail table *,
 .doc-detail table *,
 .vd-detail-card table *,
 .ck-content table *,
 .rich-text table *,
 .entry-content table *,
 .detail-description table *,
 .technical-specs table *,
 .accordion-body table * {
     font-family: inherit !important;
 }

 /* Table Header styling - Minimal & Clean */
 .main-detail-content table thead th,
 .main-detail-content table thead td,
 .content-body table thead th,
 .content-body table thead td,
 .product-description table thead th,
 .product-description table thead td,
 .article-content table thead th,
 .article-content table thead td,
 .news-detail table thead th,
 .news-detail table thead td,
 .doc-detail table thead th,
 .doc-detail table thead td,
 .vd-detail-card table thead th,
 .vd-detail-card table thead td,
 .ck-content table thead th,
 .ck-content table thead td,
 .rich-text table thead th,
 .rich-text table thead td,
 .entry-content table thead th,
 .entry-content table thead td,
 .detail-description table thead th,
 .detail-description table thead td,
 .technical-specs table thead th,
 .technical-specs table thead td,
 .accordion-body table thead th,
 .accordion-body table thead td,
 .main-detail-content table tr:first-child th,
 .main-detail-content table tr:first-child td,
 .content-body table tr:first-child th,
 .content-body table tr:first-child td,
 .product-description table tr:first-child th,
 .product-description table tr:first-child td {
     background-color: #f8fafc !important;
     color: #1e293b !important;
     font-weight: 700 !important;
     font-size: 13px !important;
     border-bottom: 1px solid #e2e8f0 !important;
     padding: 10px 14px !important;
     text-align: left !important;
 }

 /* Table Cells (td & th) */
 .main-detail-content table td,
 .main-detail-content table th,
 .content-body table td,
 .content-body table th,
 .product-description table td,
 .product-description table th,
 .article-content table td,
 .article-content table th,
 .news-detail table td,
 .news-detail table th,
 .doc-detail table td,
 .doc-detail table th,
 .vd-detail-card table td,
 .vd-detail-card table th,
 .ck-content table td,
 .ck-content table th,
 .rich-text table td,
 .rich-text table th,
 .entry-content table td,
 .entry-content table th,
 .detail-description table td,
 .detail-description table th,
 .technical-specs table td,
 .technical-specs table th,
 .accordion-body table td,
 .accordion-body table th {
     padding: 9px 14px !important;
     border: 1px solid #e2e8f0 !important;
     font-size: 13px !important;
     line-height: 1.5 !important;
     vertical-align: middle !important;
     background-color: #ffffff !important;
     color: #334155 !important;
 }

 .main-detail-content figure,
 .content-body figure,
 .product-description figure,
 .article-content figure,
 .news-detail figure,
 .doc-detail figure,
 .ck-content figure,
 .rich-text figure {
     max-width: 100% !important;
     height: auto !important;
 }

 .main-detail-content p,
 .content-body p,
 .product-description p,
 .article-content p,
 .news-detail p,
 .doc-detail p,
 .ck-content p {
     max-width: 100% !important;
     word-break: break-word;
     overflow-wrap: break-word;
 }