/* ------------------------- Components  -------------------------------------------------- */

/* ------------------ UTILITY: COLOR & BACKGROUNDS -------------------------------------------------- */

/* --- Đổi màu Text nhanh --- */
.text-primary { color: var(--color-primary) !important; }
.text-secondary-teal { color: var(--color-secondary-teal) !important; }
.text-secondary-light { color: var(--color-secondary-light) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-warm { color: var(--color-bg-warm) !important; }
.text-white { color: var(--color-white) !important; }
.text-error { color: var(--color-alert-error) !important; }
.text-success { color: var(--color-alert-success) !important; }

/* --- Đổi màu Background nhanh (Tự động cân bằng màu chữ để dễ đọc) --- */
.bg-primary { background-color: var(--color-primary) !important; color: var(--color-white) !important; }
.bg-secondary-teal { background-color: var(--color-secondary-teal) !important; color: var(--color-white) !important; }
.bg-secondary-light { background-color: var(--color-secondary-light) !important; color: var(--color-dark) !important; }
.bg-dark { background-color: var(--color-dark) !important; color: var(--color-white) !important; }
.bg-warm { background-color: var(--color-bg-warm) !important; color: var(--color-dark) !important; }

/* ==========================================================================
   COMPONENT: UI TAGS (Thẻ nhãn)
   ========================================================================== */

/* Cấu trúc lõi của 1 thẻ Tag */
.tag {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.4em 1em;
   font-size: var(--copy-size-s); /* Dùng size nhỏ chuẩn hệ thống: 12px */
   border-radius: var(--border-radius);
   font-weight: 500;
   white-space: nowrap;
   line-height: 1.2;
   text-transform: uppercase; /* In hoa nhẹ trông sẽ rất luxury */
   letter-spacing: 0.05em;
}

/* Các biến thể màu sắc cho Tag */
.tag.tag-primary {
   background-color: var(--color-primary);
   color: var(--color-white);
}

.tag.tag-secondary {
   background-color: var(--color-secondary-teal);
   color: var(--color-white);
}

.tag.tag-light {
   background-color: var(--color-bg-warm);
   color: var(--color-dark-teal);
}

.tag.tag-outline {
   background-color: transparent;
   border: 1px solid var(--color-border);
   color: var(--color-text);
}

/* Tag trạng thái (Thành công / Thất bại) - Nền làm trong suốt 15% cho đẹp */
.tag.tag-success {
   background-color: rgba(70, 208, 84, 0.15); 
   color: var(--color-alert-success);
}

.tag.tag-error {
   background-color: rgba(255, 33, 62, 0.15); 
   color: var(--color-alert-error);
}

.overlay-no-image {
   background-color: var(--color-lightgray);
   display: flex;
   align-items: center;
   justify-content: center;
}

.overlay-no-image::before {
   content:"No image found";
   font-size: 10px;
   font-weight: 400;
   opacity: 0.66;
}

[data-theme-section="dark"] .overlay-no-image,
.overlay-no-image.dark {
   background-color: #55514f;
}

[data-bg-section="white"] .overlay-no-image {
   background-color: rgba(var(--color-dark-rgb),0.05);
}

/* ------------------------- Default Header -------------------------------------------------- */

.default-header {
   padding-top: calc(var(--nav-bar-height) + var(--section-padding));
}
.default-header-bottom {
   padding-bottom: calc(var(--nav-bar-height) + var(--section-padding));
}
.default-image-header {
   overflow: hidden;
}

.default-image-header .styled-col .col-row-title:last-child {
   margin-bottom: var(--gap);
}

.default-image-header .overlay-dark-gradient {   
   background: radial-gradient(circle at 50% 60%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 70%);
}

.section.full-height.default-image-header .container > .row {
   padding-top: calc((var(--nav-bar-height) * 0.66) + var(--section-padding));
}

.default-image-header .deco-line-y {
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 50%);
}

.default-image-header + .section .deco-line-y {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translate(-50%, -50%);
}

.default-image-header .styled-col .col-row-eyebrow + .col-row-title {
   margin-top: unset;
}

.default-image-header.small-image-bottom {
   padding-bottom: calc((var(--gap) * 2.5) + ((var(--card-width) * 1.333) * 0.666));
}

.default-image-header.small-image-bottom .overlay-dark-gradient {   
   background: radial-gradient(circle at 50% 100%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.4) 70%);
}

.default-image-header.small-image-bottom + .section-after-big-image .styled-figure {
   margin-top: calc((var(--card-width) * 1.333333) * -0.666);
}

.default-image-header.small-image-bottom + .section-after-big-image {
   padding-bottom: 0;
}
   

/* ------------------------- Parallax - Images -------------------------------------------------- */

@media screen and (min-width: 1025px) {

   [data-parallax-strength] {
      overflow: hidden;
      --parallax-strength: 0%;
      --parallax-height: 0%;
   }

   [data-parallax-strength] [data-parallax-target] {
      height: calc(100% + (var(--parallax-height) * 2));
      top: calc(var(--parallax-height) * -1);
      will-change: transform;
      -webkit-transform: translate3d(0,0,0);
      z-index: 0;
      rotate: 0.001deg;
   }

}

/* ------------------------- Table -------------------------------------------------- */

.table {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.table .table-group-hidden {
   display: grid;
   grid-template-rows: 0fr;
   transition: var(--animation-smooth);
   position: relative;
   margin-bottom: calc(var(--copy-size-m) * 1.5);
}

.table[data-table-status="active"] .table-group-hidden {
   grid-template-rows: 1fr;
}

.table .table-group-visible,
.table .table-group-inner {
   display: flex;
   flex-wrap: wrap;
   position: relative;
   gap: 0 var(--gap);
   overflow: hidden;
}

.table .border-relative {
   width: 100%;
   position: relative;
   height: 1px;
   background-color: var(--color-border);
}

.table .table-row {
   display: flex;
   position: relative;
   padding: calc(var(--copy-size-m) * 1) 0;
   width: 100%; 
   justify-content: space-between; 
   align-items: center;
}

.table .table-row span {
   font-size: var(--copy-size-l);
   line-height: 1.2;
}

.table[data-table-status="active"] .icon-link .on-not-active,
.table[data-table-status="not-active"] .icon-link .on-active {
   display: none;
}

@media screen and (max-width: 1240px) {

   .table .table-group-visible,
   .table .table-group-inner {
      gap: 0;
   }

   .table .table-row {
      width: 100%;
      flex-direction: column; 
      align-items: flex-start; 

      gap: 0.4rem; 
      padding: calc(var(--copy-size-m) * 0.8) 0;
   }
   .table .table-row span:last-child {
      text-align: left; /* Không ép canh phải nữa, chuyển về bên trái */
      opacity: 0.85;    /* Làm mờ nhẹ phần giá trị để phân tách cấp bậc thông tin */
      font-weight: 500; /* Có thể cho đậm lên một chút nếu thích */
   }

   .table .table-group-visible .table-row:nth-child(2) .border-top {
      display: none;
   }

}


/* ------------------------- Deco Line Y -------------------------------------------------- */

.deco-line-y {
   width: 1px;
   height: calc(var(--gap) * 2);
   background-color: rgba(var(--color-white-rgb), 0.4);
}

.deco-line-x {
   height: 1px;
   width: calc(var(--gap) * 2);
   background-color: rgba(var(--color-white-rgb), 0.4);
}

[data-theme-section="light"] .deco-line-y,
[data-theme-section="light"] .deco-line-x {
   background-color: rgba(var(--color-dark-rgb), 0.2);
}

/* ------------------------- Ornament -------------------------------------------------- */

.ornament {
   width: calc(var(--title-size) * 0.35);
   height: calc(var(--title-size) * 0.35);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.ornament svg {
   width: 100%;
}

.ornament svg > * {
   fill: var(--color-stone-200);
}

/* Transparent */

.ornament.transparent svg > * {
   fill: rgba(var(--color-white-rgb), 0.6);
}

/* Transparent - Dark */

.ornament.transparent.dark svg > * {
   fill: rgba(var(--color-dark-rgb), 0.2);
}

/* White */

.ornament.white svg > * {
   fill: var(--color-white);
}

/* ------------------------- Border Top Ornament -------------------------------------------------- */

.border-top-ornament {
   top: 0;
   position: absolute;
   width: 100%;
   transform: translateY(-50%);
   display: flex;
   justify-content: center;
   align-items: center;
   gap: calc(var(--gap) * 0.5);
}

.border-top-ornament::before,
.border-top-ornament::after {
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background-color: var(--color-border);
}


/* ------------------------- Single product Card -------------------------------------------------- */

.single-product-card {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 1em;
   /* background: var(--color-light); */
   --cut-size: 4rem;
   clip-path: polygon(0% 0%, calc(100% - var(--cut-size)) 0%, 100% var(--cut-size), 100% 100%, 0% 100%);
   overflow: hidden;
   position: relative;
}

.single-product-card .card-row {
   display: flex;
   flex-direction: column;
   /* align-items: center;
   text-align: center; */
}

.single-product-card .card-row-image {
   padding-bottom: 0.5em;
}

.single-product-card .card-image {
   width: 100%;
   overflow: hidden;
   position: relative;
}

.single-product-card .card-image::before {
   content: "";
   padding-top: 65%;
   display: block;
}

.single-product-card .card-image .overlay-hover {
   opacity: 0;
   visibility: hidden;
   transition: var(--animation-slow);
   display: none;
}

.single-product-card .card-image .ornament {
   position: absolute;
   bottom: calc(var(--gap) * 2);
   left: 50%;
   transform: translateX(-50%)
}

.single-product-card .card-row-title h3{
      font-weight: 400;
      font-size: calc(var(--title-size) * 0.15);
      line-height: 1.2;
      text-transform: uppercase;

}
.single-product-card .card-row-info p {
   font-size: var(--copy-size-m);
   line-height: 1.5;
}


.single-product-card .card-row-info {
   margin-top: calc(var(--gap) * 0.5);
}


.spec-list {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
}

.spec-list li {
   display: flex;
   align-items: baseline; 
   padding: 0.6em 0;
   font-size: var(--copy-size-m);
   border-bottom: 1px solid var(--color-dark);
}

.spec-list li:last-child {
   border-bottom: none;
   padding-bottom: 0;
}


.spec-label {
   flex: 0 0 35%;
   color: var(--color-dark);
   font-size: var(--copy-size-s);
   text-transform: uppercase;
   font-weight: 500;
   letter-spacing: 0.05em;
   opacity: 0.7; 
   padding-right: 1em;
}

/* --- Cột 2: Giá trị (D1600, MFC...) --- */
.spec-value {
   flex: 1; 
   font-size: var(--copy-size-s);
   color: var(--color-dark);
   font-weight: 500;
   text-align: left;
   line-height: 1.4;
}


@media screen and (max-width: 480px) {
   .spec-list li {
       flex-direction: column;
       gap: 0.2em;
   }
   .spec-label {
       flex: auto;
   }
}

@media (hover: hover) { 
   @media screen and (min-width: 1025px) {

      .single-product-card .card-image .overlay-hover {
         display: block;
      }

      .single-product-card:hover .card-image .overlay-hover {
         opacity: 1;
         visibility: visible;
      }
   }
}

/* ============= Product Card - Video Autoplay Background ======================== */

/* Khung chứa video, đè lên trên ảnh tĩnh */
.card-video-wrap {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
   z-index: 2; 
   
   /* LƯU Ý SỐ 1: Vô hiệu hóa tương tác chuột. 
      Giúp khách hàng click xuyên qua video để vào thẳng trang chi tiết sản phẩm. */
   pointer-events: none; 
}

/* CSS "Hack" để Iframe video tự động tràn viền giống như object-fit: cover */
.card-video-wrap iframe {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   height: 100%;
   
   /* Phóng to video lên 1.5 lần (hoặc 150%) để cắt đi viền đen 2 bên và tiêu đề bị lọt vào khung hình. 
      Căn giữa hoàn hảo bằng translate */
   transform: translate(-50%, -50%) scale(1.5); 
}


.single-product-card .card-video-wrap {
   opacity: 0;
   transition: opacity var(--animation-fast);
}

.single-product-card:hover .card-video-wrap {
   opacity: 1;
}


/* ------------------------- Single projects Card -------------------------------------------------- */

.single-projects-card {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
}

.single-projects-card :is(h1, h2, h3, h4, h5, p, span, .eyebrow, strong, svg) {
   color: var(--color-primary) !important;
}
.single-projects-card .card-image {
   width: 100%;
   overflow: hidden;
   position: relative;
}

.single-projects-card .card-image::before {
   content: "";
   padding-top: 100%;
   display: block;
}

.single-projects-card .card-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: calc(var(--gap) * 1.5);
   justify-content:space-between;
   padding: calc(var(--gap) * 1.5) var(--gap);
}

.single-projects-card .card-row {
   display: flex;
   flex-direction: column;
   z-index: 2;
}
.single-projects-card .card-row-info {
   gap: 1em;
   padding-top: 2.5em;
}
.single-projects-card .card-content .card-row-eyebrow {
   /* padding-top: 1.25em; */
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-direction: row;
   width: 100%;
}
.single-projects-card .card-content .eyebrow {
   color: var(--color-white);
   opacity: 0.66;
}
.single-projects-card .card-content h3 {
   color: var(--color-white);
}

.single-projects-card .card-content p {
   color: var(--color-text-light);
}
@media screen and (max-width: 1024px) {
   .single-projects-card .card-image::before {
      content: "";
      padding-top: 100%;
      display: block;
   }

   .single-projects-card .card-row-info {
      padding-top: 0.5em;
      gap: 0.75em;
   }

}
.single-projects-card .overlay.overlay-light {
   background-color: var(--color-light); 
   z-index: 1;
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.single-projects-card .card-image img {
   z-index: 0;
   transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) and (min-width: 1025px) {
   
   .single-projects-card:hover .overlay.overlay-light {
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
   }
   .single-projects-card:hover .card-image img {
      transform: scale(1.05);
   }
   .single-projects-card {
      color: var(--color-dark);
   }
   .single-projects-card .card-content .eyebrow,
   .single-projects-card .card-content h3 {
      transition: color 0.4s ease;
      color: var(--color-dark); 
   }

   .single-projects-card:hover .card-content .eyebrow,
   .single-projects-card:hover .card-content h3 {
      color: var(--color-white);
   }
}

/* ------------------------- Single projects Card -------------------------------------------------- */

.single-discover-card {
   width: 100%;
   position: relative;
   display: flex;
   flex-direction: column;
}

.single-discover-card .card-image {
   width: 100%;
   overflow: hidden;
   position: relative;
}

.single-discover-card .card-image::before {
   content: "";
   padding-top: 133.333%;
   display: block;
}

.single-discover-card .overlay-gradient {
   background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 40%);
}

.single-discover-card .overlay-dark {
   transition: all var(--animation-smooth);
   opacity: 0;
}

.single-discover-card .card-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   gap: calc(var(--gap) * 0.5);
   justify-content: flex-end;
   padding: calc(var(--gap) * 1.5) var(--gap);
}

.single-discover-card .card-row {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   z-index: 2;
}

.single-discover-card .card-row-info {
   gap: 1em;
}

.single-discover-card .card-content .eyebrow {
   color: var(--color-white);
}

.single-discover-card .card-content p {
   color: var(--color-text-light);
}

.single-discover-card .card-content .location {
   display: flex;
   align-items: center;
   gap: 0.35em;
   font-weight: 300;
   opacity: 0.7;
   font-size: var(--copy-size-m);
}

.single-discover-card .card-content .location svg {
   width: calc(var(--copy-size-m) * 1.2);
}

.single-discover-card .card-content .location svg * {
   stroke: var(--color-white);
   stroke-width: 1.5px;
}

@media (hover: hover) { 
   @media screen and (min-width: 1025px) {

      .single-discover-card:hover .overlay-dark {
         opacity: 0.7;
      }
   }
}


/* ------------------------- Swiper Slider - Setup -------------------------------------------------- */

.swiper-slider-group {
   width: 100%;
   position: relative;
}

.swiper-slider-group .swiper-carousel {
   width: 100%;
   position: relative;
   display: flex;
}

.swiper-slider-group .swiper-wrapper {
	position: relative;
	width: 100%;
   -webkit-transform-style: preserve-3d;
}

.swiper-slider-group .swiper-slide {
   width: 100%;
   flex-shrink: 0;
   margin-right: 0;
   display: block;
   overflow: hidden;
   -webkit-backface-visibility: hidden; 
   -webkit-transform: translateZ(0);
}

/* Swiper Controls */

.swiper-slider-group .swiper-controls {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--gap);
}

.swiper-slider-group .swiper-controls .swiper-arrow {
   position: relative;
   width: var(--btn-height-small);
   height: var(--btn-height-small);
   border-radius: 50%;
   background-color: rgba(var(--color-white-rgb), 0.2);
   backdrop-filter: blur(1em);
   -webkit-backdrop-filter: blur(1em);
   display: flex;
   justify-content: center;
   align-items: center;
   pointer-events: all;
   transform: scale(1) rotate(0.001deg);
   transition: transform var(--animation-primary);
   border: 0;
   outline: 0;
}

.swiper-slider-group .swiper-controls .swiper-arrow svg {
   width: 40%;
}

.swiper-slider-group .swiper-controls .swiper-arrow svg :is(polyline, line, path) {
   stroke: var(--color-white);
   stroke-width: 1px;
}

.swiper-slider-group .swiper-controls .swiper-arrow[data-swiper-control="prev"] svg {
   transform: scaleX(-1);
}

.swiper-slider-group .swiper-controls .swiper-arrow.swiper-button-disabled {
   transform: scale(0) rotate(0.001deg);
   pointer-events: none;
}


/* Swiper Progress Bar */

.swiper-slider-group .swiper-slider-info {
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: calc(var(--gap) * 0.5);
   align-items: center;
   padding-top: var(--gap);
}

.swiper-slider-group .swiper-count span {
   opacity: 0.5;
   line-height: 1;
   font-size: var(--copy-size-m);
}

.swiper-slider-group .swiper-count .swiper-active-slide {
   opacity: 1;
   font-weight: 400;
}

.swiper-slider-group .progress-bar {
   width: 20em;
   display: flex;
   flex-direction: column;
}

.swiper-slider-group .swiper-pagination {
   position: relative;
   width: 100%;
   display: flex;
   bottom: unset;
   left: unset;
   gap: 0.75em;
}

.swiper-slider-group .swiper-pagination .swiper-pagination-bullet {
   height: var(--gap);
   position: relative;
   border-radius: 0;
   margin: unset;
   width: 100%;
   background-color: transparent;
   display: flex;
   opacity: 1;
   flex-direction: column;
   justify-content: center;
   border: 0;
   outline: 0;
}

.swiper-slider-group .swiper-pagination .swiper-pagination-bullet::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translate(-50%, 100%) rotate(0.001deg);
   width: 4px;
   height: 4px;
   background-color: rgba(var(--color-dark-rgb), 0.8);
   border-radius: 50%;
   opacity: 0;
   transition: transform var(--animation-primary), opacity var(--animation-primary);
   pointer-events: none;
}

.swiper-slider-group .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
   transform: translate(-50%, 0%) rotate(0.001deg);
   opacity: 1;
}

.swiper-slider-group .swiper-pagination .swiper-pagination-bullet::before {
   content: "";
   width: 100%;
   height: 1px;
   background-color: var(--color-border);
   position: absolute;
}
 
.swiper-slider-group .swiper-pagination .swiper-progress {
   height: 1px;
   position: absolute;
   width: 100%;
   background-color: var(--color-primary);
   transform: scaleX(0);
   transform-origin: left top;
   opacity: 0;
   transition: opacity .3s ease-in-out;
}

.swiper-slider-group .swiper-pagination .swiper-pagination-bullet-active .swiper-progress {
   opacity: 1;
}

.swiper-slider-group .swiper-notification {
   position: absolute;
}

/* ------------------------- Swiper Slider - Custom: Cards -------------------------------------------------- */


.swiper-slider-group[data-swiper-slider-type="stay"] {
   overflow: hidden;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel {
   overflow: hidden;
   transform: translateZ(0);
   isolation: isolate;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .row-back {
   position: relative;
   width: 100%;
   overflow: hidden;
   background-color: var(--color-black);
   align-items: center;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .row-slider-card {
   flex-direction: column;
   align-items: center;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .overlay-dark {
   z-index: 2;
   background-color: unset;
   /* background: radial-gradient(circle at 50% 100%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%); */
   background: radial-gradient(circle at 50% 66%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%);
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-pagination {
   position: absolute;
   top: var(--gap);
   z-index: -1;
   opacity: 0;
   pointer-events: none;
   visibility: hidden;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-controls {
   position: absolute;
   top: 0;
   height: 100%;
   z-index: 5;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-controls .swiper-arrow-overlay {
   position: absolute;
   left: 0;
   top: 0;
   min-width: 15vw;
   height: 100%;
   z-index: 10;
   transform: scaleX(-1);
   outline: 0 !important;
   border: 0 !important;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   padding: var(--gap) var(--container-padding);
   cursor: pointer;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-controls .swiper-arrow-overlay[data-swiper-control="next"] {
   left: unset;
   right: 0;
   transform: scaleX(1);
}

@media screen and (min-width: 1025px) {

   .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-controls .swiper-arrow-overlay {
      pointer-events: all;
   }

   .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-controls .swiper-arrow {
      display: none;
   }
}

@media screen and (max-width: 540px) {
   .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-controls .swiper-arrow-overlay {
      padding: var(--gap) calc(var(--gap) * 0.5);
   }

   .swiper-slider-group[data-swiper-slider-type="stay"] .overlay-dark {
      background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 50%);
      transform: scale(1.5);
   }
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-count {
   position: absolute;
   z-index: 5;
   top: calc(var(--gap) * 2);
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   align-items: center;
   gap: 1em;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-count span {
   color: var(--color-white);
   width: 1em;
   text-align: center;
}

/* Slider Fade (Back) */

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-fade {
   position: absolute;
   z-index: 1;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-fade .swiper-slide {
   position: relative;
   opacity: 1 !important;
   width: 100vw;
   height: 100%;
}

/* .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-fade .swiper-slide::before {
   content: "";
   padding-top: calc(100vh - var(--nav-bar-height));
   display: block;
} */

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-fade .swiper-slide img {
   opacity: 0;
   transition: opacity var(--animation-slider);
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-fade .slide-is-transitioning {
   opacity: 1;
   z-index: 1;
   transition: opacity var(--animation-slider);
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-fade .swiper-slide-visible img {
   opacity: 1;
   z-index: 2;
   transition: opacity 0.01s linear 0s;
}

/* Slider Text */

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text {
   position: relative;
   z-index: 3;
   width: 100%;
   padding: calc(10vh + calc((var(--card-width) * 1.333333) * 0.666)) 0;
   text-align: center;
}

@media (hover: none) { 
   @media screen and (max-width: 1024px) {
      .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text {
         padding: calc((var(--vh, 1vh) * 10) + ((var(--card-width) * 1.333333) * 0.666)) 0;
      }
   }
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-slide {
   position: relative;
   width: unset;
   padding: 0 var(--title-size);
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .overlay-link {
   pointer-events: none;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-slide-active .overlay-link {
   pointer-events: all;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-slide-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   gap: var(--gap);
   padding: calc(1.5em + var(--gap)) 0;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text p {
   position: absolute;
   top: 0;
   opacity: 0;
   transform: translateY(1em) rotate(0.001deg);
   transition: all var(--animation-smooth) 0.4s;
   max-width: calc(100vw - var(--container-padding) * 2);
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-slide-active p,
.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-slide-duplicate-active p {
   opacity: 1;
   transform: translateY(0) rotate(0.001deg);
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text h2 {
   text-align: center;
   font-size: calc(var(--title-size) * 1);
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-wrapper {
   transition-timing-function: cubic-bezier(.6, 0, .2, 1);
   align-items: center;
}

@media screen and (max-width: 1024px) {

   .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-slide {
      padding: 0;
   }

   .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text .swiper-slide-inner {
      width: 100vw;
      padding: calc(1.5em + var(--gap)) calc((var(--gap) * 1) + var(--btn-height));
   }

}

@media screen and (max-width: 540px) {
   .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text h2 {
      font-size: calc(var(--title-size) * 0.6);
   }
}

/* Slider Main (Card) */

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-main {
   position: relative;
   z-index: 4;
   width: calc(var(--card-width)*1);
   margin-top: calc((var(--card-width) * 1.333333) * -0.666);
   clip-path: polygon(
      0 0,              /* top-left */
      calc(100% - 40px) 0, /* điểm cắt */
      100% 40px,        /* góc phải trên bị cắt */
      100% 100%,        /* bottom-right */
      0 100%            /* bottom-left */
   );
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-main .swiper-slide {
   position: relative;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-main .swiper-slide::before {
   content: "";
   padding-top: 133.3333%;
   display: block;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-main .swiper-slide-inner {
   width: 100%;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-main .swiper-slide .swiper-slide-inner {
   overflow: hidden;
}

.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-main .swiper-wrapper,
.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-main .swiper-slide .swiper-slide-inner {
   transition-timing-function: cubic-bezier(.6, 0, .2, 1);
   -webkit-backface-visibility: hidden; 
   -webkit-transform: translateZ(0);
}


/* ------------------------- Swiper Slider - Custom: Cards -------------------------------------------------- */

.swiper-slider-group[data-swiper-slider-type="double"] .row {
   gap: var(--container-padding);
}

.swiper-slider-group[data-swiper-slider-type="double"] .swiper-carousel {
   overflow: hidden;
   transform: translateZ(0);
   isolation: isolate;
}

.swiper-slider-group[data-swiper-slider-type="double"] .swiper-slide .swiper-slide-inner {
   position: relative;
   overflow: hidden;
}

.swiper-slider-group[data-swiper-slider-type="double"] .swiper-wrapper,
.swiper-slider-group[data-swiper-slider-type="double"] .swiper-slide .swiper-slide-inner {
   transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
   -webkit-backface-visibility: hidden; 
   -webkit-transform: translateZ(0);
}

@media screen and (max-width: 1024px) {
   .swiper-slider-group[data-swiper-slider-type="double"] .row {
      flex-direction: column;
   }

   .swiper-slider-group[data-swiper-slider-type="double"] .swiper-controls {
      height: calc(50% - (var(--container-padding) * 0.5));
   }
   
}
/* ------------------------- Row Split -------------------------------------------------- */

.row.split {
   /* QUAN TRỌNG: Đổi từ 'center' thành 'stretch' để cột chữ cao bằng đúng cột ảnh */
   align-items: stretch; 
   display: flex;
   flex-wrap: wrap;
}

.row.split .flex-col {
   width: 50%;
   /* order: 2; */
   display: flex; /* Bật flex cho cột để nội dung bên trong có thể kéo giãn */
}

.row.split .flex-col:nth-child(2) {
   padding: 0 calc(var(--container-padding) * .66);
}

.row.split:not(:first-child) {
   /* margin-top: calc(var(--section-padding) * .75); */
   margin-top: calc(var(--section-padding) * .25);
}

.row.split:nth-child(even) .flex-col:nth-child(2) {
   order: 1;
}

/* --- LOGIC CĂN CHỈNH TRÊN DƯỚI (MỚI) --- */
.row.split .content {
   display: flex;
   flex-direction: column;
   justify-content: space-between; /* Đẩy H2 lên đỉnh, content-bottom xuống đáy */
   height: 100%;
   width: 100%;
}

/* Khoảng cách an toàn giữa đoạn văn và nút */
.row.split .content-bottom p {
   margin-bottom: 1.5em;
}

/* ------------------------- Responsive -------------------------------------------------- */

@media screen and (max-width: 800px) {
   .row.split .flex-col:nth-child(1) { width: 45%; }
   .row.split .flex-col:nth-child(2) {
      width: 55%;
      padding: 0 0 0 calc(var(--container-padding) * .66);
   }
   .row.split:nth-child(even) .flex-col:nth-child(2) {
      padding: 0 calc(var(--container-padding) * .66) 0 0;
   }
}

@media screen and (max-width: 540px) {
   .row.split:not(:first-child) {
      margin-top: calc(var(--section-padding) * 1);
   }
   .row.split .flex-col:nth-child(1) { width: 100%; }
   .row.split .flex-col:nth-child(2),
   .row.split:nth-child(even) .flex-col:nth-child(2) {
      width: 100%;
      padding: calc(var(--section-padding) * .25) 0 0 0;
      order: 2;
   }
   /* Trên mobile khi rớt dòng, không cần kéo giãn cao bằng ảnh nữa để tránh khoảng trống xấu */
   .row.split .content {
      gap: 1.5em;
   }
}

/* ------------------------- Row Split - Card (Đã bỏ Radius) ----------------------------- */

.row.split .card {
   width: 100%;
   position: relative;
   background: var(--color-inactive);
   /* Đã xóa border-radius */
   overflow: hidden;
}

.row.split .card::before {
   content: "";
   padding-top: 66.666%; /* Tỷ lệ khung hình 3:2 */
   display: block;
}

.card .image-overlay {
   transform: scale(1.01) rotate(0.001deg);
   /* Đã xóa border-radius */
}

.card .dark-overlay {
   /* Đã xóa border-radius */
   background: var(--color-dark);
   opacity: 0;
   transition: var(--animation-slow);
}

.card .play-pause-overlay {
   /* Đã xóa border-radius */
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
}

.card.video-not-empty .image-overlay {
   transform: scale(1) rotate(0.001deg);
   transition: var(--animation-primary);
}

.card.video-not-empty:hover .image-overlay {
   transform: scale(1.075) rotate(-3deg);
}

.card .play-pause-overlay:hover .dark-overlay {
   opacity: .2;
}
/* ------------------------- News Grid -------------------------------------------------- */

.news-grid {
	width: 100%;
	position: relative;
}

/* ------------------------- News - Single News Item -------------------------------------------------- */

.single-news-item {
	position: relative;
	width: 100%;
	display: flex;
}

.single-news-item a {
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	background: var(--color-white);
	border-radius: calc(var(--border-radius) * 2);
	padding: calc(var(--gap-padding) * .66);
}

.single-news-item .inner-wrap {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1.4em;
}

.single-news-item .card {
	width: 100%;
	position: relative;
	background: var(--color-inactive);
	border-radius: calc(var(--border-radius) * .66);
	overflow: hidden;
}

.single-news-item .card::before {
	content: "";
	padding-top: 66.666%;
	display: block;
}

.single-news-item .card .image-overlay {
	border-radius: calc(var(--border-radius) * .66);
	transform: scale(1.01) rotate(0.001deg);
	transition: var(--animation-primary);
}

.single-news-item .text {
	position: relative;
	overflow: hidden;
	width: calc(100% + 2px);
	margin-left: -1px;
	overflow: hidden;
	padding-right: 1px;
	padding-left: 1px;
	border-radius: .5em;
}

.single-news-item .text-inner {
	position: relative;
	transition: var(--animation-primary);
	padding-bottom: .5em;
}

.single-news-item .text .date-badge {
	position: relative;
	display: inline-flex;
	height: 2em;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	border-radius: .5em;
	background: var(--color-light);
	margin-bottom: 2em;
	padding: 0 .75em;
}

.single-news-item .text .date-badge h5 {
	font-size: .85em;
	text-transform: uppercase;
	color: var(--color-dark);
	font-family: 'Brice Sun';
	transform: translateY(15%);
}

.single-news-item .text h3 {
	width: 100%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin-bottom: .5em;
	min-height: 3em;
	color: var(--color-dark);
}

.single-news-item .text p {
	width: 100%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	margin-bottom: 0;
	min-height: 4.5em;
	color: var(--color-text);
}

.single-news-item .btn-row {
	height: 3em;
	bottom: 0;
	width: 100%;
	left: 0;
	position: absolute;
	transform: translateY(3.25em);
	transition: var(--animation-primary);
}

.single-news-item .btn-row .btn {
	width: 100%;
}

/* Hover */

.single-news-item a:hover .text-inner {
	transform: translateY(-4em);
}

.single-news-item a:hover .text-inner .btn-row {
	transform: translateY(3.75em);
}

.single-news-item a:hover .card .image-overlay {
	transform: scale(1.075) rotate(-3deg);
}

@media screen and (max-width: 1024px) {

	.single-news-item .text .date-badge {
		margin-bottom: 1.15em;
	}

	.single-news-item a .text-inner,
	.single-news-item a:hover .text-inner {
		transform: translateY(0);
		padding-bottom: 4.75em;
	}
	
	.single-news-item a .text-inner .btn-row,
	.single-news-item a:hover .text-inner .btn-row {
		transform: translateY(-.25em);
	}
	
	.single-news-item a .card .image-overlay,
	.single-news-item a:hover .card .image-overlay {
		transform: scale(1.01) rotate(0.001deg);
	}
}

@media screen and (max-width: 540px) {
	.single-news-item a {
		padding: calc(var(--gap-padding) * 1);
	}

	.single-news-item .card {
		border-radius: .5em;
	}

	.single-news-item .text .date-badge h5 {
		font-size: .75em;
	}
	
}

/* ------------------------- Estimate Wizard UI -------------------------------------------------- */

.wizard-form {
   position: relative;
}
.wizard-options{
   --columns: 2;
    --grid-gap: 1em; 
   padding-top: 1.5em;
}


.wizard-card {
   position: relative;
   cursor: pointer;
   display: block;
}

.wizard-card input[type="radio"] {
   position: absolute;
   opacity: 0;
   cursor: pointer;
}

.wizard-card .card-inner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: var(--gap);
   transition: all var(--animation-primary);
   background-color: var(--color-light);
   gap: 1em;
}

.wizard-card .card-inner i {
   width: 2.5em;
   height: 2.5em;
   stroke: var(--color-primary) !important;
   transition: stroke var(--animation-primary);
}

.wizard-card .card-inner span {
   font-weight: 600;
   font-size: var(--copy-size-m);
   color: var(--color-dark) !important;
   text-transform: uppercase;
}

/* Trạng thái Hover và Active */
@media (hover: hover) {
   .wizard-card:hover .card-inner {
      border-color: var(--color-primary);
      transform: translateY(-4px);
   }
}


.wizard-card input[type="radio"]:checked + .card-inner span {
   color: var(--color-white) !important;
}

.wizard-card input[type="radio"]:checked + .card-inner i,
.wizard-card input[type="radio"]:checked + .card-inner i svg,
.wizard-card input[type="radio"]:checked + .card-inner i svg path {
   stroke: var(--color-white) !important;
   fill: none;
}
.wizard-card input[type="radio"]:checked + .card-inner {
   background-color: var(--color-primary) !important;
   border-color: var(--color-primary) !important;
}
.wizard-card input[type="radio"]:checked + .card-inner i, 
.wizard-card input[type="radio"]:checked + .card-inner i svg, 
.wizard-card input[type="radio"]:checked + .card-inner i svg path {
   stroke: var(--color-white) !important;
   fill: none !important; /* Khóa fill về none để nét vẽ SVG không bị đổ đặc màu */
   background: transparent !important; /* Xóa bỏ background bị nhận nhầm ở icon */
}

.wizard-card input[type="radio"]:checked + .card-inner span {
   color: var(--color-white) !important;
}

.form-col-radio,
.form-col-checkbox {
   position: relative !important;
}

.form-col-radio label,
.form-col-checkbox label {
   position: static !important;
}

.form-col-radio label::after {
   left: 1.6rem !important;
   top: 50% !important;
   margin-top: 0 !important;
}

.form-col-checkbox label::after {
   left: 1.72rem !important;
   top: calc(50% - 2px) !important;
   margin-top: 0 !important;
}

.form-col-radio:has(input:checked),
.form-col-checkbox:has(input:checked) {
   border-color: var(--color-primary-hex, #0F713A) !important;
   background-color: rgba(var(--color-primary-rgb, 15, 113, 58), 0.03) !important;
}

.tp-spec-selector {
   margin-top: 0.75rem;
   padding-left: 2.3rem;
   width: 100%;
}

.tp-spec-selector .form-select {
   border-radius: 0;
   border: 1px solid var(--color-border);
   padding: 0.6rem 1rem;
   font-size: var(--copy-size-m);
   background-color: var(--color-white);
}
.tp-spec-selector label{
   color: var(--color-primary);
}

.form-submit button.btn {
   width: 100% !important;
   display: block;
}

/* ==========================================================================WIZARD SUB-OPTIONS (SELECT & INPUT TEXT/NUMBER)========================================================================== */

/* Căn chỉnh Nhãn (Label) phía trên Input */
.wizard-sub-options .form-label,
.wizard-material h4.small,
.wizard-step h4.small{
   display: block;
   font-size: var(--copy-size-l);
   font-weight: 500;
   color: var(--color-dark);
   margin-bottom: 1.25rem;
}

/* Định dạng chung cho Select và Input */
.wizard-sub-options select,
.wizard-sub-options input[type="number"] {
   width: 100%;
   padding: 1rem 1.25rem;
   font-family: inherit;
   font-size: var(--copy-size-m);
   font-weight: 500;
   color: var(--color-dark);
   
   background-color: var(--color-white);
   border: 1px solid var(--color-border);
   
   outline: none;
   transition: all var(--animation-primary);
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

.wizard-sub-options select {
   cursor: pointer;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right 1.25rem center;
   background-size: 16px;
   padding-right: 3.5rem;
}

.wizard-sub-options input[type="number"]::-webkit-inner-spin-button, 
.wizard-sub-options input[type="number"]::-webkit-outer-spin-button { 
   -webkit-appearance: none; 
   margin: 0; 
}
.wizard-sub-options select:focus,
.wizard-sub-options input[type="number"]:focus {
   border-color: var(--color-primary);
   box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.03); 
}
.wizard-sub-options input::placeholder {
   color: var(--color-text);
   opacity: 0.5;
   font-weight: 400;
}

.form-submit{
    margin-top: 3em;

}
.form-submit .styled-form .form-submit button {
   background: transparent;
   padding: 0;
   width: 100% !important;
}
/* =================================================================CUSTOM RADIO & CHECKBOX (Tối ưu HTML)========================================================================== */

   .form-col-radio,
   .form-col-checkbox {
      position: relative;
      display: flex;
      align-items: center;
      padding: 1rem 1.25rem;
      border: 1px solid var(--color-border);
      background: var(--color-white);
  
      transition: all var(--animation-primary);
      cursor: pointer;
   }

   .form-col-radio input,
   .form-col-checkbox input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
      margin: 0;
   }
   .form-col-radio label,
   .form-col-checkbox label {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      cursor: pointer;
      font-size: var(--copy-size-m);
      color: var(--color-dark);
      font-weight: 500;
      user-select: none;
      margin: 0;
   }
   .form-col-radio label::before,
   .form-col-checkbox label::before {
      content: '';
      display: inline-block;
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      margin-right: 12px; 
      background: var(--color-white);
      border: 2px solid var(--color-border);
      transition: all var(--animation-primary);
   }
   
   /* Phân biệt hình dáng: Radio thì Tròn, Checkbox thì Vuông */
   .form-col-radio label::before { border-radius: 50%; }
   .form-col-checkbox label::before { border-radius: 4px; }
   
   
   /* 4. VẼ DẤU TICK / CHẤM TRÒN BÊN TRONG BẰNG ::AFTER (ẨN ĐI) */
   .form-col-radio label::after,
   .form-col-checkbox label::after {
      content: '';
      position: absolute;
      transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Hiệu ứng nảy */
      opacity: 0; /* Mặc định tàng hình */
   }
   
   /* Chấm tròn cho Radio */
   .form-col-radio label::after {
      width: 10px;
      height: 10px;
      background: var(--color-white);
      border-radius: 50%;
      left: 6px; /* Canh giữa so với cái hộp 22px */
      top: 50%;
      transform: translateY(-50%) scale(0);
   }
   
   /* Dấu tick (vẽ bằng viền) cho Checkbox */
   .form-col-checkbox label::after {
      left: 8px;
      top: calc(50% - 2px);
      width: 6px;
      height: 10px;
      border: solid var(--color-white);
      border-width: 0 2px 2px 0;
      transform: translateY(-50%) rotate(45deg) scale(0);
   }
   
   /* -------------------------------------------TRẠNG THÁI CHECKED VÀ HOVER ------------------------------------------- */
   
   /* Khi được chọn: Đổi màu hộp sang Primary */
   .form-col-radio input:checked + label::before,
   .form-col-checkbox input:checked + label::before {
      border-color: var(--color-primary);
      background: var(--color-primary);
   }
   
   /* Khi được chọn: Hiện dấu tick / chấm tròn lên */
   .form-col-radio input:checked + label::after {
      opacity: 1;
      transform: translateY(-50%) scale(1);
   }
   .form-col-checkbox input:checked + label::after {
      opacity: 1;
      transform: translateY(-50%) rotate(45deg) scale(1);
   }
   
   /* Khi được chọn: Chữ đậm lên và đổi viền ngoài cùng */
   .form-col-radio input:checked + label,
   .form-col-checkbox input:checked + label {
      color: var(--color-primary);
      font-weight: 600;
   }
   
   /* Hiệu ứng Hover */
   .form-col-radio:hover label::before,
   .form-col-checkbox:hover label::before {
      border-color: var(--color-primary);
   }

   

/* -------------------------------------------QUOTE DOCUMENT RESULT------------------------------------------- */

   .quote-document {
      background-color: var(--color-primary);
      overflow: hidden;
   }
   
   .quote-header {
      background-color: var(--color-primary); 
      color: var(--color-light);
      padding: 2.5rem 2rem;
      display: flex;
      align-items: center;
      gap: 1.5rem;
      justify-content: flex-end;
   }
   
   .quote-header .brand-mark {
      display: flex;
      align-items: center;
      justify-content: center;
   }
   
   .quote-header .title-wrap .text-white {
      color: var(--color-light) !important;
   }
   .quote-header .eyebrow {
      opacity: 0.7;
   }
   
   /* Phần Thân */
   .quote-body {
      padding: 2rem;
   }
   
   .quote-info-row {
      display: flex;
      justify-content: space-between;
      padding: 1rem 0;
      border-bottom: 1px solid var(--color-light);
   }
   
   .quote-info-row .label,
   .quote-info-row span,
   .quote-items-wrap span{
      color: var(--color-light) !important;
   }
   
   .quote-items-wrap {
      padding-top: 1.5rem;
   }
   
   .quote-items-list {
      list-style: none;
      padding: 0;
      gap: 0.75rem; */
   }
   
   .quote-items-list li {

      gap: 0.5rem;
      text-align: right;
      font-size: 0.95rem;
      color: var(--color-light);
   }
   
   .quote-items-list .bullet {
      margin-top: 6px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--color-light);
      flex-shrink: 0;
   }
   
   .quote-footer {
      padding: 3rem 2rem;
   }
   
   .quote-footer .price-number {
      margin: 0.5rem 0 1.5rem 0;
   }
   
   .quote-footer .action-buttons {
      display: flex;
      justify-content: center;
   }
   
   .quote-footer .disclaimer {
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
   }
   .quote-footer p.disclaimer{
      color: var(--color-light) !important;
      font-size: 0.8em;
   }
   /* Responsive Điện thoại */
   @media screen and (max-width: 600px) {
      .quote-info-row {
         flex-direction: column;
         gap: 0.5rem;
      }
      .quote-items-list {
         grid-template-columns: 1fr;
      }
   }

   .quote-info-block {
      display: block;
      width: 100%;
      padding: 1.25rem 1.5rem; 
      margin: 1.5rem 0; 
      box-sizing: border-box; 
      border: 1px solid rgba(230, 229, 213, 0.1);
   }
   .item-name-spec{
      display: flex;
      justify-content: space-between;

   }
   .item-name-spec strong{
      color: var(--color-light);
   }

   .quote-info-block .quote-items-list {
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
   }
   @media screen and (max-width: 600px) {
      .quote-info-block {
         padding: 1rem; 
         margin: 1rem 0;
      }
   }
/* ------------------------- SECTION STACKING -------------------------------------------------- */

.stack-section {
   position: relative;
   z-index: 1; 
   background-color: var(--color-white);
}

.stack-section {
   box-shadow: 0px -15px 30px rgba(0, 0, 0, 0.05);
}

/* -------------------------  COMPONENT: BUTTON ROLL -------------------------  */

.btn-roll {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
   height: var(--btn-height);
   padding: 0 2em; /* Độ rộng viền 2 bên */
   border-radius: var(--border-radius);
   overflow: hidden; /* Cắt phần chữ văng ra ngoài */
   text-decoration: none;
   
   /* CHỈ GIỮ LẠI BIẾN TỐC ĐỘ. Các biến góc xoay đã được dọn dẹp vì bạn không dùng tới */
   --roll-speed: var(--animation-smooth); 
}

/* Các biến thể màu sắc (Gọi từ :root) */
.btn-roll.primary { 
   color: var(--color-white);
}
.btn-roll.primary .btn-bg { 
   background-color: var(--color-primary);
   border-radius: calc(var(--border-radius) * 9); 
}

.btn-roll.secondary-teal { 
   color: var(--color-white);
   /* Đã gỡ bỏ dòng padding: 0 !important ở đây, vì class .btn-square bên dưới sẽ lo việc đó chuẩn mực hơn */
}
.btn-roll.secondary-teal .btn-bg { 
   background-color: var(--color-primary); 
}

/* Lớp nền màu */
.btn-roll .btn-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   transition: background-color var(--animation-fast);
}

/* -------------------------  CƠ CHẾ XOAY (FERRIS WHEEL TEXT LOGIC) - ĐÃ FIX -------------------------  */

/* Khung bọc chữ: Dùng lưới để chồng 2 chữ/icon lên nhau hoàn hảo */
.btn-roll .btn-label-wrap {
   position: relative;
   z-index: 1;
   display: grid;
   place-items: center;
}

/* Cấu trúc lõi chung cho mọi loại chữ và icon */
.btn-roll .label-front,
.btn-roll .label-bottom {
   grid-area: 1 / 1; 
   font-size: var(--copy-size-m);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   white-space: nowrap;
   
   /* Đưa chung thuộc tính tâm giữa vào đây để tiết kiệm code cho các phần Override bên dưới */
   transform-origin: center; 
   transition: transform var(--roll-speed), opacity var(--roll-speed);
}

/* TOÀN BỘ ĐOẠN HIỆU ỨNG TRẠNG THÁI BÌNH THƯỜNG CỦA FERRIS WHEEL (ROTATE) 
   ĐÃ ĐƯỢC XÓA BỎ VÌ BẠN CHỈ DÙNG HIỆU ỨNG TRƯỢT (TRANSLATE) */


/* ------------------------- OVERRIDE: SLIDE RIGHT ------------------------- */

/* --- MẶC ĐỊNH --- */
.btn-roll.primary .label-front {
   transform: translateX(0);
   opacity: 1; 
}
.btn-roll.primary .label-bottom {
   transform: translateX(-150%); 
   opacity: 0; 
}

/* --- KHI HOVER --- */
.btn-roll.primary:hover .label-front {
   transform: translateX(150%);
   opacity: 0; 
}
.btn-roll.primary:hover .label-bottom {
   transform: translateX(0);
   opacity: 1; 
}


/* ------------------------- OVERRIDE: SLIDE TOP-RIGHT ------------------------- */

/* --- MẶC ĐỊNH --- */
.btn-roll.secondary-teal.btn-square .label-front {
   transform: translate(0, 0);
   opacity: 1; 
}
.btn-roll.secondary-teal.btn-square .label-bottom {
   transform: translate(-150%, 150%);
   opacity: 0; 
}

/* --- KHI HOVER --- */
.btn-roll.secondary-teal.btn-square:hover .label-front {
   transform: translate(150%, -150%);
   opacity: 0; 
}
.btn-roll.secondary-teal.btn-square:hover .label-bottom {
   transform: translate(0, 0);
   opacity: 1; 
}

/* ------------------------- MODIFIER: SQUARE ICON BUTTON ------------------------- */

.btn-roll.btn-square {
   width: var(--btn-height); 
   padding: 0; /* Xóa khoảng đệm 2 bên của nút chữ để biến thành hình vuông */
   flex-shrink: 0; 
}

.btn-roll.btn-square .btn-label-wrap svg {
   width: 1.5em; 
   height: auto;
   display: block;
}

/* ------------------------- LINKED HOVER: HOVER NÚT PRIMARY -------------------------  */

.btn-roll.primary:hover ~ .btn-roll.secondary-teal.btn-square .label-front {
   transform: translate(150%, -150%);
   opacity: 0; 
}

.btn-roll.primary:hover ~ .btn-roll.secondary-teal.btn-square .label-bottom {
   transform: translate(0, 0);
   opacity: 1; 
}

/* ------------------------- Single Accordion -------------------------------------------------- */

.accordion {
   display: flex;
   flex-direction: column;
   margin-top: 3.75rem;
}

.accordion .single-accordion-item {
   display: flex;
   flex-direction: column;
   border-bottom: 1px solid var(--color-dark);
}

.accordion .single-accordion-item .top {
   padding: 1.8em 0 2em 0;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 3em;
}

.accordion .single-accordion-item .top h3 {
   max-width: calc(var(--title-size) * 6);
   font-size: calc(var(--title-size) * 0.145);
   font-weight: 600;
}

.accordion .single-accordion-item .top .plus {
   width: 1.1em;
   height: 1.1em;
   display: flex;
   position: relative;
   align-items: center;
   justify-content: center;
   transform: rotate(0.001deg);
   transition: var(--animation-primary);
}

.accordion .single-accordion-item .top .plus::before,
.accordion .single-accordion-item .top .plus::after {
   content: "";
   display: block;
   position: absolute;
   height: 100%;
   width: 2px;
   background-color: var(--color-dark);
   transform: rotate(0.001deg);
}

.accordion .single-accordion-item .top .plus::after {
   transition: var(--animation-primary);
   transform: rotate(90deg);
}

.accordion .single-accordion-item .bottom {
   display: grid;
   grid-template-rows: 0fr;
   transition: var(--animation-primary);
   position: relative;
}

.accordion .single-accordion-item .bottom-wrap {
   position: relative;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

.accordion .single-accordion-item .bottom-wrap .bottom-content {
   padding-bottom: 3em;
   padding-top: 1em;
   max-width: calc(var(--title-size) * 6);
}


/* Active */

.accordion .single-accordion-item[data-accordion-status="active"] .bottom {
   grid-template-rows: 1fr;
}

.accordion .single-accordion-item[data-accordion-status="active"] .top .plus {
   transform: rotate(270deg);
}

.accordion .single-accordion-item[data-accordion-status="active"] .top .plus::after {
   transform: rotate(180deg);
}