/* ------------------------- Loading -------------------------------------------------- */

.loading-container {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   overflow: hidden;
   z-index: 500;
   pointer-events: none;
}

.loading-container .loading-screen {
   position: relative;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: var(--color-light);
}

.loading-logo {
   width: 10em;
   display: flex;
   flex-direction: column;
   align-items: center;
   position: absolute;
   top: 50%;
   transform: translateY(0%) rotate(0.001deg);
}

.loading-logo > * {
   display: flex;
   flex-direction: column;
   align-items: center;
   width: 100%;
   overflow: hidden;
   position: relative;
   transform: translateY(0%) rotate(0.001deg);
}

.loading-logo .iconmark {
   width: 55%;
}

.loading-logo svg {
   width: 100%;
}


/* ------------------------- Page Transition -------------------------------------------------- */

.transition-screen {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--color-light);
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: 0;
   visibility: hidden;
   padding-top: calc(var(--nav-bar-height) - var(--gap));
   background: var(--color-light);
}

.loading-circle {
   position: absolute;
   /* top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); */
   left: 50%;
   transform: translateX(-50%);
   bottom: var(--gap);
   width: calc(var(--title-size) * 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
}

.loading-circle svg {
   width: 100%;
}

.loading-circle svg circle {
   stroke: var(--color-primary);
   stroke: rgba(var(--color-dark-rgb), 0.4);
   opacity: 0;
   stroke-width: 2px;
}

/* ------------------------- Navigation -------------------------------------------------- */

.main-nav-bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding: calc(var(--gap) * 0.5) var(--container-padding);
   pointer-events: all;
   display: flex;
   align-items: center;
   transition: padding var(--animation-nav);
}

.main-nav-bar .border-bottom {
   transform: translateY(1px);
   overflow: hidden;
   transition: background-color var(--animation-nav);
}

.main-nav-bar .overlay-background {
   background-color: transparent;
   transition: background-color var(--animation-nav-smooth);
}

.main-nav-bar .overlay-alt-background {
   pointer-events: none;
   background-color: transparent;
   transition: background-color var(--animation-nav-smooth);
}

main {
   transition: background-color var(--animation-nav-smooth);
}

.main-nav-bar nav {
   display: flex;
   align-items: center;
   justify-content: flex-end; 
   gap: calc(var(--copy-size-m) * 1.5);
}

.main-nav-bar .row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: calc(var(--gap) * 0.6) 0;
}

/* ------------------------- Cheeseburger -------------------------------------------------- */

.main-nav-bar nav .deco-line {
   width: 1px;
   height: calc(var(--copy-size-m) * 1.2);
   display: block;
   background-color: var(--color-border-active);
   transition: background-color var(--animation-nav);;
}

.cheeseburger {
   width: calc((var(--copy-size-m) * 3) + 1.5em);
   height: var(--btn-height-small);
   /* display: flex; */
   justify-content: center;
   align-items: center;
   position: relative;
   cursor: pointer;
   margin-left: calc(var(--copy-size-m) * -1.5);
}

.cheeseburger-inner {
   width: 1.5em;
   height: 1.5em;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
}

.cheeseburger .bar {
   position: absolute;
   width: 2em;
   height: 2px;
   background-color: var(--color-primary);
   transition: transform var(--animation-smooth), background-color var(--animation-nav);
   transform: translate(0%, 0em) rotate(0.001deg);
}

.cheeseburger .bar::before {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 100%;
   top: 0;
   background-color: var(--color-dark);
   transform: translateX(-150%);
}

.cheeseburger .bar:nth-child(3)::before {
   transform: translateX(-300%);
}

.cheeseburger .bar:nth-child(1) {
   transform: translate(0%, -0.25em) rotate(0.001deg);
   transition-delay: 0s;
}

.cheeseburger .bar:nth-child(3) {
   transform: translate(-20%, 0.25em) rotate(0.001deg);
   width: 2em;
}

.main-nav-bar:hover .cheeseburger .bar {
   transition-delay: 0.05s;
}
.main-nav-bar:hover .bar:nth-child(3) {
   transition-delay: 0.1s;
}

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

      .cheeseburger:hover .bar:nth-child(1) {
         transform: translate(150%, -0.25em) rotate(0.001deg);
      }

      .cheeseburger:hover .bar:nth-child(2) {
         transform: translate(150%, 0em) rotate(0.001deg);
      }

      .cheeseburger:hover .bar:nth-child(3) {
         transform: translate(250%, 0.25em) rotate(0.001deg);
      }

   }
}

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar nav .deco-line ,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar nav .deco-line  {
   background-color: var(--color-border-active-light);
}

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .cheeseburger .bar,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .cheeseburger .bar,
[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .cheeseburger .bar::before,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .cheeseburger .bar::before {
   background-color: var(--color-white);
}

/* ------------------------- Button -------------------------------------------------- */

@media screen and (min-width: 1025px) {
   .main-nav-bar .btn-nav .text-mobile {
      display: none;
   }
}

@media screen and (max-width: 1024px) {
   .main-nav-bar .btn-nav .text-desktop {
      display: none;
   }

   .main-nav-bar nav .cheeseburger,
   .main-nav-bar .btn-nav {
      transform: translateY(0.25em);
   }

   .main-nav-bar .btn-nav .btn-click {
      height: 2em;
   }

   .main-nav-bar .btn-nav span {
      padding: 0;
   }
}


/* ------------------------- Close -------------------------------------------------- */

.close {
   width: calc((var(--copy-size-m) * 3) + 1em);
   height: var(--btn-height-small);
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   cursor: pointer;
   margin-left: calc(var(--copy-size-m) * -1.5);
   position: absolute;
   top: calc(var(--gap) * 1.1);
   left: var(--container-padding);
}

.close-inner {
   width: 1.1em;
   height: 1.1em;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   transform: rotate(-45deg);
   overflow: hidden;
}

.close .bar {
   position: absolute;
   width: 1.1em;
   height: 1px;
   background-color: var(--color-light);
   transition: transform var(--animation-smooth);
   transform: rotate(0.001deg) translateX(0%);
}

.close .bar::before {
   content: "";
   position: absolute;
   left: 0;
   width: 100%;
   height: 100%;
   top: 0;
   background-color: var(--color-light);
   transform: translateX(-250%);
}

.close .bar:nth-child(1) {
   transform: rotate(90deg) translateX(0%);
   transition-delay: 0.1s;
}

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

      .close:hover .bar:nth-child(1) {
         transform: rotate(90deg) translateX(250%);
      }

      .close:hover .bar:nth-child(2) {
         transform: rotate(0.001deg) translateX(250%);
      }
   }
}

/* ------------------------- Main Navigation Bar -------------------------------------------------- */

.main-nav-bar ul {
   display: flex;
   flex-direction: row;
   position: relative;
}

.main-nav-bar .nav-link {
   display: flex;
   transition: all var(--animation-nav) 0.1s;
}

.main-nav-bar .nav-link .nav-link-click {
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: var(--btn-height-small);
   position: relative;
   cursor: pointer;
}

.main-nav-bar .nav-link .nav-link-click::before {
   content:"";
   position: absolute;
   top: 95%;
   left: 50%;
   transform: translate(-50%, 100%) rotate(0.001deg);
   opacity: 0;
   width: 4px;
   height: 4px;
   background-color: rgba(var(--color-dark-rgb), 0.8);
   border-radius: 50%;
   transition: transform var(--animation-primary), opacity var(--animation-primary), background-color var(--animation-nav);
   pointer-events: none;
} 

.main-nav-bar .nav-link .nav-link-content {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.main-nav-bar .nav-link .nav-link-click span {
   font-size: var(--copy-size-m);
   font-weight: 600;
   text-transform: uppercase;
   color: var(--color-primary);
   padding: 0 calc(var(--copy-size-m) * 1.5);
   margin-top: 0.05em;
   white-space: nowrap;
   text-shadow: 0px calc(var(--btn-shadow-distance) * 1.5) transparent;
   transform: translateY(0em) rotate(0.001deg);
   transition: text-shadow var(--animation-smooth), color var(--animation-nav);
   line-height: 1.1;
}

.main-nav-bar:hover .nav-link .nav-link-click span {
   transition: text-shadow var(--animation-smooth), color 0s linear;
}

/* [data-links-no-hover="active"] .main-nav-bar:hover .nav-link .nav-link-click span {
   transition: text-shadow var(--animation-smooth), color var(--animation-nav);
} */

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

      /* .main-nav-bar .nav-link .nav-link-click:hover span {
         transition: all var(--animation-smooth);
         transform: translateY(calc(var(--btn-shadow-distance) * -1)) rotate(0.001deg);
         color: transparent;
         text-shadow: 0px var(--btn-shadow-distance) var(--color-dark);
      } */
   }
}

/* .main-nav-bar .nav-link[data-link-status="active"] .nav-link-click::before {
   transform: translate(-50%, -50%) rotate(0.001deg);
   opacity: 1;
} */

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


      /* .main-nav-bar .nav-link-ul:hover .nav-link .nav-link-click::before {
         transform: translate(-50%, 100%) rotate(0.001deg);
         opacity: 0;
      }

      .main-nav-bar .nav-link-ul .nav-link .nav-link-click:hover::before {
         transform: translate(-50%, -50%) rotate(0.001deg);
         opacity: 1;
      } */

   }
}

/* Nav Link Dropdown */

.main-nav-bar ul .nav-link-absolute  {
   position: absolute;
   left: 0;
   opacity: 0;
   visibility: hidden;
}

.main-nav-bar ul .nav-link-absolute .nav-link-click::before {
   content: none;
}

.main-nav-bar .nav-link-absolute .nav-link-content {
   gap: calc(var(--copy-size-m) * 0.6);
}

.main-nav-bar .nav-link-absolute .nav-link-content span {
   padding-right: 0;
}

.main-nav-bar .nav-link .dots {
   width: 14px;
   height: calc(var(--copy-size-m) * 1);
   flex-shrink: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.main-nav-bar .nav-link .dots .dot {
   width: 3px;
   height: 3px;
   background-color: rgba(var(--color-dark-rgb), 0.8);
   border-radius: 50%;
   transition: background-color var(--animation-nav);
}

.main-nav-bar ul[data-link-status="dropdown-stay-active"] .nav-link-absolute-stay,
.main-nav-bar ul[data-link-status="dropdown-discover-active"] .nav-link-absolute-discover {
   opacity: 1;
   visibility: visible;
}

.main-nav-bar ul[data-link-status="dropdown-stay-active"] .nav-link-relative,
.main-nav-bar ul[data-link-status="dropdown-discover-active"] .nav-link-relative {
   opacity: 0;
   visibility: hidden;
}

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

      .main-nav-bar ul .icon-link-stay .icon-link-click .icon-link-content span {
         text-shadow: 0px var(--btn-shadow-distance) var(--color-white);
      }
   }
}

/* Nav Link Dropdown - Dropdown*/

.main-nav-bar .nav-link .nav-link-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   display: flex;
   opacity: 0;
   visibility: hidden;
   transform: translateY(0.5em) rotate(0.001deg);
   transition: all var(--animation-primary);
   padding-top: 0.5em;
}

[data-page-transition="active"] .main-nav-bar .nav-link-absolute {
   pointer-events: none;
}

.main-nav-bar .nav-link .nav-link-dropdown-inner {
   display: flex;
   flex-direction: column;
   gap: 0.33em;
   box-shadow: 0px 2em 2em 0px rgba(var(--color-dark-rgb),0.1);
   background-color: var(--color-white);
   padding: calc(var(--copy-size-l) * 1.4) calc(var(--copy-size-m) * 2) calc(var(--copy-size-l) * 1.25) calc(var(--copy-size-m) * 1.5);
}

.main-nav-bar .nav-link .nav-link-dropdown [data-link-status="active"] span {
   font-weight: 400;
   color: var(--color-primary);
}

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

      .main-nav-bar .nav-link:hover .nav-link-dropdown {
         opacity: 1;
         visibility: visible;
         transform: translateY(0em) rotate(0.001deg);
      }
   }
}

/* Logo */

/* .main-nav-bar .logo {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

.main-nav-bar .logo svg {
   width: 10em;
}

.main-nav-bar .logo svg path {
   fill: var(--color-primary);
   transition: fill var(--animation-nav);
} */

/* --- TÌM ĐẾN PHẦN NÀY Ở CUỐI FILE VÀ THAY THẾ --- */

.main-nav-bar .logo {
   /* Xóa position absolute và transform đi */
   position: relative; 
   display: flex;
   align-items: center;
}

.main-nav-bar .logo svg {
   /* Bạn có thể tùy chỉnh lại chiều rộng logo nếu muốn */
   width: 10em; 
   height: auto;
}

.main-nav-bar .logo svg path {
   fill: var(--color-primary);
   transition: fill var(--animation-nav);
}



/* Theme */

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar .logo svg path,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .logo svg path{
   fill: var(--color-white);
}

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar .nav-link .nav-link-click span,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .nav-link .nav-link-click span {
   color: var(--color-white);
}

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

      /* [data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar .nav-link .nav-link-click:hover span,
      [data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .nav-link .nav-link-click:hover span {
         text-shadow: 0px var(--btn-shadow-distance) var(--color-white);
      } */

   }
}

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar .btn.btn-nav .btn-click,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .btn.btn-nav .btn-click {
   background-color: rgba(var(--color-white-rgb), 0.2);
   backdrop-filter: blur(1em);
   -webkit-backdrop-filter: blur(1em);
}

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar .border-bottom,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .border-bottom {
   background-color: var(--color-border-light);
}

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar .nav-link .nav-link-click::before,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .nav-link .nav-link-click::before {
   background-color: var(--color-primary);
}

[data-scrolling-started="false"][data-theme-nav="dark"][data-page-transition="not-active"] .main-nav-bar .nav-link .dots .dot,
[data-scrolling-started="true"][data-theme-nav="dark"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .nav-link .dots .dot {
   background-color: var(--color-primary);
}

/* Scrolling Started */

[data-scrolling-started="true"][data-page-transition="not-active"] .main-nav-bar {
   padding: calc(var(--gap) * 0) var(--container-padding);
}

[data-scrolling-started="true"] .main-nav-bar .overlay-background {
   background-color:var(--color-light);
   border-bottom: 1px solid var(--color-primary);
}

[data-scrolling-started="true"][data-bg-nav="transparent"][data-page-transition="not-active"] .main-nav-bar .overlay-background {
   background-color: rgba(var(--color-black-rgb), 0.2);
   backdrop-filter: blur(0.5em);
   -webkit-backdrop-filter: blur(0.5em);
}

[data-scrolling-started="true"][data-bg-nav="white"][data-page-transition="not-active"] .main-nav-bar .overlay-alt-background,
[data-scrolling-started="true"][data-bg-nav="white"][data-page-transition="not-active"] main {
   background-color: var(--color-white);
}

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

   .main-nav-bar {
      padding: calc(var(--gap) * 0) var(--container-padding);
   }

   .main-nav-bar ul,
   .main-nav-bar nav .deco-line {
      display: none;
   }
}

/* ------------------------- Side Nav - Back -------------------------------------------------- */

.overlay.side-nav-back {
   opacity: 0;
   visibility: hidden;
   transition: all var(--animation-slow);
   pointer-events: all;
   backdrop-filter: blur(0.2em);
   -webkit-backdrop-filter: blur(0.2em);
   transition-delay: 0.3s;
   background-color: rgba(var(--color-black-rgb), 0.66);
}

[data-navigation-status="active"] .side-nav-back {
   transition-delay: 0s;
   opacity: 1;
   visibility: visible;
}

/* ------------------------- Side Nav -------------------------------------------------- */

.side-nav-box {
   position: relative;
   transform: translateX(-101%) rotate(0.001deg);
   transition: transform var(--animation-slow);
   pointer-events: all;
   transition-delay: 0.1s;
   min-width: 33.333%;
}

[data-navigation-status="active"] .side-nav-box {
   transform: translateX(0%) rotate(0.001deg);  
   transition-delay: 0s;
}

@media screen and (max-width: 1024px) {
   .side-nav-box {
      width: 100%;
      min-width: 100%;
      max-width: 100%;
   }
}

.side-nav {
   height: 100%;
   background-color: var(--color-primary-hex);
   clip-path: polygon(
      0 0,
      calc(100% - 10%) 0,
      100% 10%,
      100% 100%,
      0 100%
   );
   display: flex;
   flex-direction: column;
   padding-top: calc((var(--gap) * 1.1) + var(--btn-height-small));
   overflow: hidden;
   max-height: 100%;
   z-index: 2;
   position: relative;
}

.side-nav .row-links-primary {
   height: 100%;
   padding: var(--gap) var(--container-padding);
}

@media screen and (min-height: 720px) {
   .side-nav .row-links-primary {
      padding-top: 8vh;
   }
}

.side-nav .row-links-primary .col-row-eyebrow {
   padding-bottom: 1em;
}

.side-nav .row-links-primary .col,
.section-footer .col-links-primary {
   width: 100%;
}

.side-nav .row-links-primary ul,
.section-footer .col-links-primary ul  {
   display: flex;
   flex-direction: column;
   width: 100%;
}

.side-nav .row-links-primary .nav-link,
.section-footer .col-links-primary .nav-link {
   display: flex;
   width: 100%;
}

.side-nav .row-links-primary .nav-link-click,
.section-footer .col-links-primary .nav-link-click {
   display: flex;
   width: 100%;
   padding: 0.25em 0;
   transition: all var(--animation-smooth);
   position: relative;
}

.side-nav .row-links-primary ul .nav-link span,
.section-footer .col-links-primary ul .nav-link span {
   font-family: 'Helvetica Now Display', sans-serif;
   font-weight: 400;
   font-size: calc(var(--title-size) * 0.275);
   line-height: 1.2;
   color: var(--color-light);
}

/* Đoạn code thay thế cho phần ::before cũ */
.side-nav .row-links-primary .nav-link-click::before,
.section-footer .col-links-primary .nav-link-click::before {
   content: "";
   position: absolute;
   top: 50%;
   right: 0;
   opacity: 0;
   
   /* Giữ nguyên biến màu sắc và animation của bạn */
   background-color: rgba(var(--color-light-rgb), 0.8);
   transition: transform var(--animation-primary), opacity var(--animation-primary), background-color var(--animation-nav);
   pointer-events: none;

   width: 1em; 
   height: 1em;
   

   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18L18 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 6H18V15' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 18L18 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9 6H18V15' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-size: contain;
   mask-size: contain;

   /* Điều chỉnh vị trí bắt đầu để mượt hơn với icon mới */
   transform: translate(150%, -50%) rotate(0.001deg);
}

/* Các phần xử lý Active và Hover giữ nguyên Logic của bạn */
.side-nav .row-links-primary .nav-link[data-link-status="active"] .nav-link-click::before,
.section-footer .col-links-primary .nav-link[data-link-status="active"] .nav-link-click::before {
   transform: translate(0%, -50%) rotate(0.001deg);
   opacity: 1;
}

@media (hover: hover) { 
   @media screen and (min-width: 1025px) {
      .side-nav .row-links-primary ul:hover .nav-link .nav-link-click::before,
      .section-footer .col-links-primary ul:hover .nav-link .nav-link-click::before {
         transform: translate(150%, -50%) rotate(0.001deg);
         opacity: 0;
      }

      .side-nav .row-links-primary ul .nav-link .nav-link-click:hover::before,
      .section-footer .col-links-primary ul .nav-link .nav-link-click:hover::before {
         transform: translate(0%, -50%) rotate(0.001deg);
         opacity: 1;
      }
   }
}

.section-footer .full-width-logo {
   width: 100%;
   position: relative;
}
.section-footer .link .link-click  span {
   color: var(--color-primary);
}
.section-footer :is(p, span)  {
   color: var(--color-primary);
}
.side-nav .row-links-secondary {
   position: relative;
   flex-shrink: 0;
   /* padding: max(var(--gap), 6vh) var(--container-padding); */
   gap: var(--gap);
}


.side-nav .row-links-secondary .col-row-eyebrow {
   padding-bottom: 1em;
   padding-top: 0.5em;
}

.side-nav .row-links-secondary .col,
.section-footer .col-links-secondary .col-split {
   min-width: 10em;
   width: 100%;
}

.side-nav .row-links-secondary ul,
.section-footer .col-links-secondary ul {
   display: flex;
   flex-direction: column;
   gap: 0.33em;
}

.side-nav .row-rating {
   position: relative;
   flex-shrink: 0;
   padding: var(--gap) var(--container-padding);
}

.side-nav .row-rating .col {
   width: 100%;
}

.side-nav .row-rating .col-row-rating {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

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

   .side-nav .row-links-primary ul .nav-link span {
      font-size: calc(var(--title-size) * 0.475);
   }

   .section-footer .col-links-primary ul .nav-link span {
      font-size: calc(var(--title-size) * 0.475);
   }

}

/* contact Floating Button */

.floating-contact-btn {
   position: fixed;
   right: var(--gap);
   bottom: var(--gap);
   background-color: var(--color-primary);
   border-radius: 50%;
   width: calc(var(--btn-height) * 1);
   height:calc(var(--btn-height) * 1);
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   pointer-events: all;
   overflow: hidden;
   z-index: 100;
}

.floating-contact-btn svg {
   width: 40%;
   transition: opacity var(--animation-primary);
}

.floating-contact-btn svg path {
   fill: var(--color-lightgray);
}

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

      .whatsapp-box {
         display: flex;
      }

      .floating-contact-btn:hover svg {
         opacity: 0.75;
      }
   }
}

/* WhatsApp Link (hidden on Desktop) */

.contact-link-mobile {
   display: none;
}

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

   .contact-link-mobile {
      display: block;
   }      

   .contact-link-desktop {
      display: none;
   }
}

/* ==========================================================================ELASTIC LINE FOOTER========================================================================== */

   .site-footer {
      position: relative;
      background-color: var(--color-bg-warm); /* Màu nền footer tùy ý bạn */
      margin-top: 50px; /* Đẩy xuống một chút để dây có không gian nảy lên */
    }
    
    /* Khung chứa SVG */
    .footer-elastic-wrap {
      position: absolute;
      top: -50px; /* Nhấc nó lên nằm giữa ranh giới Section trên và Footer */
      left: 0;
      width: 100%;
      height: 100px; /* Không gian nảy (50px lên, 50px xuống) */
      overflow: visible; 
      z-index: 10;
    }
    
    /* Thẻ SVG dàn full 100% chiều ngang */
    .footer-elastic-svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    
    /* Sợi dây dùng màu chủ đạo */
    .footer-elastic-path {
      fill: none;
      stroke: var(--color-primary); /* Đã tích hợp màu hệ thống Tuấn Phát */
      stroke-width: 2px; /* Độ mảnh của dây */
      stroke-linecap: round;
    }

/* ------------------------- Side Nav - Images -------------------------------------------------- */
/* 
.side-nav-images {
   position: absolute;
   left: 100%;
   height: 100%;
   width: 100%;
   pointer-events: none;
}  */
.side-nav-images {
   position: absolute; 
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
   pointer-events: none;
}
.side-nav-images::after {
   content: '';
   position: absolute;
   top: -8px;
   right: 0px; 
   
   width: clamp(120px, 12vw, 185px); 
   height: clamp(120px, 12vw, 185px);
   
   background-color: var(--color-primary); 

   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.7 184.7'%3E%3Cpath d='M122.2,6.8A22.8,22.8,0,0,0,105.9,0H.8A.9.9,0,0,0,0,.8V91.6a.8.8,0,0,0,.8.7H92.3v91.6a.9.9,0,0,0,.8.8h91.6V138.5h0V78.8a22.8,22.8,0,0,0-6.8-16.3Z'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 184.7 184.7'%3E%3Cpath d='M122.2,6.8A22.8,22.8,0,0,0,105.9,0H.8A.9.9,0,0,0,0,.8V91.6a.8.8,0,0,0,.8.7H92.3v91.6a.9.9,0,0,0,.8.8h91.6V138.5h0V78.8a22.8,22.8,0,0,0-6.8-16.3Z'/%3E%3C/svg%3E");
   
   -webkit-mask-size: contain;
   mask-size: contain;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
   -webkit-mask-position: top right;
   mask-position: top right;
   z-index: 10;
}
[data-navigation-status="active"] .side-nav-images {
   transform: translateX(0%) rotate(0.001deg);  
}

.side-nav-images .single-nav-image {
   transition: transform var(--animation-slow);
   transform: translateX(-101%) rotate(0.001deg);
}

[data-navigation-status="active"] .side-nav-images .single-nav-image[data-nav-image-status="active"] {
   transform: translateX(0%) rotate(0.001deg);  
   z-index: 2;
}

@media screen and (max-width: 1024px) {
   .side-nav-images {
      display: none;
   }
}


/* ------------------------- Section - Error Header -------------------------------------------------- */

.section-error-header .col-row-title {
   padding-bottom: calc(var(--gap) * 0.5);
}

/* ------------------------- Section - Footer -------------------------------------------------- */

.section-footer {
   padding: 0;
   /* background-color: var(--color-light); */
}

/* Row Links */

.section-footer .row-links {
   position: relative;
   display: flex;
   flex-wrap: wrap;
}

.section-footer .row-links .col-row-eyebrow {
   padding-bottom: calc(var(--gap) * 1);
}

.section-footer .row-links .col-links-primary .col-row-eyebrow {
   padding-bottom: calc(var(--gap) * 0.75);
}

.section-footer .row-links .col {
   position: relative;
   width: 50%;
   padding: calc(var(--gap) * 2.25) calc(var(--container-padding)/2)
}

/* Styling of Primary Links found at .side-nav */

.section-footer .row-links .col-links-primary {
   padding-bottom: calc(var(--gap) * 3.5);
}

/* Styling of Secondary Links found at .side-nav */

.section-footer .row-links .col-links-secondary {
   display: flex;
   flex-direction: row;
}

.section-footer .row-links .col-row-address {
   display: flex;
   flex-direction: column;
   gap: 0.33em;
}

.section-footer .row-links .col-row-external-links {
   display: flex;
   flex-direction: column;
   gap: 0.33em;
   padding-top: 1.5em;
}

/* Row Credits */

.section-footer .row-credits {
   position: relative;
   display: flex;
   flex-wrap: wrap;
}

.section-footer .row-credits .col {
   position: relative;
   width: 33.33333%;
   padding: calc(var(--gap) * 1) var(--container-padding);
   justify-content: center;
}

.section-footer .row-credits .col-row-reviews {
   display: flex;
   align-items: center;
   justify-content: flex-start;
}

.section-footer .row-credits .col-row-socials {
   display: flex;
   flex-direction: row;
   gap: 1.25em;
}

.section-footer .row-credits .col-copyright {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
}

.section-footer .row-credits .col-copyright p.inactive {
   opacity: 0.6;
}

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

   .section-footer .row-links .col,
   .section-footer .row-credits .col {
      width: 50%;
   }

   .section-footer .row-links .col.col-credentials,
   .section-footer .row-credits .col.col-copyright {
      width: 100%;
   }

   .section-footer .row-links .col.col-credentials .border-left,
   .section-footer .row-credits .col.col-copyright .border-left {
      width: 100%;
      height: 1px;
   }
}

@media screen and (max-width: 720px) {
   .section-footer .row-links .col,
   .section-footer .row-credits .col {
      width: 100%;
   }

   .section-footer .row-links .border-left,
   .section-footer .row-credits .border-left {
      width: 100%;
      height: 1px;
   }

   .section-footer .row-links .col {
      padding: calc(var(--gap) * 1.5) var(--container-padding);
   }
   
   .section-footer .row-links .col-links-primary {
      padding-top: calc(var(--gap) * 2);
      padding-bottom: calc(var(--gap) * 1.5);
   }

   .section-footer .row-credits .col-reviews {
      padding-top: calc(var(--gap) * 1.25);
   }

   .section-footer .row-credits .col-socials {
      margin-top: calc(var(--gap) * -1.25);
      padding-bottom: calc(var(--gap) * 1.25);
   }

   .section-footer .row-credits .col-socials .border-left {
      display: none;
   }
}


/* Built in Pop-up - Back */

.overlay.credits-back {
   opacity: 0;
   visibility: hidden;
   transition: all var(--animation-slow);
   pointer-events: all;
   backdrop-filter: blur(0.2em);
   -webkit-backdrop-filter: blur(0.2em);
   transition-delay: 0.3s;
   background-color: rgba(var(--color-black-rgb), 0.66);
}

[data-credits-status="active"] .overlay.credits-back {
   transition-delay: 0s;
   opacity: 1;
   visibility: visible;
}

/* Built in Pop-up - Box */

.credits-box {
   position: absolute;
   transition: all var(--animation-slow);
   pointer-events: all;
   top: 121%;
   left: 50%;
   transform: translate(-50%, 0%) rotate(0.001deg);
}

[data-credits-status="active"] .credits-box {
   top: 50%;
   transform: translate(-50%, -50%) rotate(0.001deg);
}

.credits-box .credits {
   background-color: var(--color-white);
   display: flex;
   flex-direction: column;
   z-index: 2;
   position: relative;
   width: calc(14em + (var(--gap) * 2.5));
}

.credits-box .close {
   top: calc(var(--gap) * 0.5);
   left: unset;
   right: calc(var(--gap) * 0.5);
   margin-left: 0;
   width: var(--btn-height-small);
   z-index: 4;
}

.credits-box .close .bar,
.credits-box .close .bar::before {
   background-color: var(--color-white);
}

.credits-box .credits-images {
   width: 100%;
   position: relative;
   background-color: var(--color-dark);
}

.credits-box .credits-images .overlay-gradient {
   background: linear-gradient(199deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
   z-index: 3;
}

.credits-box .credits-images::before {
   content: "";
   display: block;
   padding-top: 60%;
}

.credits-box .credits-images .single-credits-image {
   opacity: 0;
   z-index: 0;
}

.credits-box .credits-images .single-credits-image.prev-active {
   opacity: 0;
   z-index: 2;
   transition: opacity 0.4s ease-in-out;
}

.credits-box .credits-images .single-credits-image.active {
   opacity: 1;
   z-index: 1;
}

.credits-box .credits-title {
   display: flex;
   padding: var(--gap);
   padding-bottom: 0;
}

.credits-box .credits-names {
   display: flex;
   flex-wrap: wrap;
   gap: calc(var(--gap) * 0.5);
   padding: var(--gap);
   padding-top: calc(var(--gap) * 0.75);
}

.credits-box .credits-names .single-name {
   display: flex;
   flex-direction: column;
   gap: 0.4em;
   width: calc(50% - (var(--gap) * 0.25));
}

@media screen and (max-width: 540px) {
   .credits-box .credits {
      max-width: calc(100vw - (var(--gap) * 2));
   }
}

/* Footer Book Now - Box */

.section-footer .row-book {
   position: relative;
   overflow: hidden;
   width: 100%;
}

.section-footer .row-book .col {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
   padding: var(--section-padding) 0;
}


/* ------------------------- Section - Home Header -------------------------------------------------- */

.section-home-header {
   position: relative;
   overflow: hidden;
   padding: 0;
}

.section-home-header .row-title {
   min-height: 100vh;
   padding-top: var(--section-padding);
   align-items: flex-end;
   padding-bottom: calc(var(--gap) * 2);
}

.section-home-header .row-btn {
   padding-bottom: var(--section-padding);
}

.section-home-header .row {
   align-items: flex-end;
}

.section-home-header .col-row-deco {
   margin-top: calc(var(--gap) * -1);
}

.section-home-header .overlay-dark-gradient {   
   background: radial-gradient(circle at 50% 65%, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7) 90%);
   transform: scale(2, 1);
}
/* SVG Layer */

.hero-shape-wrap{
   position: absolute;
   inset: 0;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   pointer-events: none;
   overflow: hidden;
}
/* SVG */
.hero-shape{
   width: min(32vw, 420px);
   height: auto;
   overflow: visible;
   transform-origin: center center;
   will-change: transform, opacity;
   backface-visibility: hidden;
   contain: layout paint;
}
/* SVG Path */
.hero-shape path{
   fill: #fff;
}

.scroll-down-wrap {
   /* Neo cứng vào góc dưới phải của container */
   position: absolute;
   right: var(--container-padding);
   bottom: calc(var(--gap) * 1);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   z-index: 10;
   text-decoration: none;
   cursor: pointer;
}

/* Chữ "Cuộn xuống" xoay dọc */
.scroll-down-wrap span {
   color: var(--color-white);
   writing-mode: vertical-rl; /* BÍ QUYẾT: Dàn chữ theo chiều dọc */
   letter-spacing: 0.1em;
   font-size: 0.75rem;
   opacity: 0.7;
   transition: opacity var(--animation-fast);
}

/* Khung mờ của đường kẻ */
.scroll-down-wrap .scroll-line {
   width: 1px;
   height: 60px; /* Độ dài đường kẻ */
   background-color: rgba(255, 255, 255, 0.2);
   position: relative;
   overflow: hidden;
}

/* Vệt sáng chạy bên trong đường kẻ */
.scroll-down-wrap .scroll-line::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 50%;
   background-color: var(--color-white, #fff);
   
   /* Hiệu ứng trượt lặp lại liên tục */
   animation: scrollDownAnim 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
}

/* --- TRẠNG THÁI HOVER --- */
.scroll-down-wrap:hover span {
   opacity: 1; /* Sáng bừng lên khi rê chuột */
}

/* --- ANIMATION KEYFRAMES --- */
@keyframes scrollDownAnim {
   0% { transform: translateY(-100%); }
   100% { transform: translateY(200%); }
}

/* --- RESPONSIVE MOBILE --- */
@media screen and (max-width: 768px) {
   .scroll-down-wrap {
      /* Trên mobile có thể ẩn đi hoặc thu nhỏ lại để không vướng ngón tay */
      right: 10px;
      bottom: 20px;
   }
   .scroll-down-wrap .scroll-line {
      height: 40px;
   }
}

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

      .section-home-header .container {
         min-height: 100vh;
         min-height: calc(var(--vh, 1vh) * 100);
         display: flex;
         flex-direction: column;
         justify-content: flex-end;
      }

      .section-home-header .row-title  {
         padding-top: calc(var(--nav-bar-height-mobile) + var(--section-padding));
         min-height: unset;
      }

      .section-home-header .col-row-deco .deco-line-y {
         height: 5vh;
      }

      .section-home-header .row-btn {
         padding-bottom: calc(var(--gap) * 2);
      }
   }
}

/* ------------------------- Section - Home Intro -------------------------------------------------- */

.section-home-intro .col-images-left,
.section-home-intro .col-images-right {
   gap: var(--section-padding);
}

.section-home-intro .col-images-left .col-row:nth-child(1) {
   display: flex;
   justify-content: flex-end;
   padding-right: var(--gap);
}

.section-home-intro .col-images-left .col-row:nth-child(2) figure,
.section-home-intro .col-images-right .col-row:nth-child(1) figure {
   width: 80%;
}

.section-home-intro .col-images-right .col-row:nth-child(1) {
   display: flex;
   justify-content: flex-end;
}

.section-home-intro .col-images-right .col-row:nth-child(2) {
   display: flex;
   padding-left: var(--gap);
}

.section-home-intro .col-images-left .col-row:nth-child(1) figure,
.section-home-intro .col-images-right .col-row:nth-child(2) figure {
   width: 40%;
}

.section-home-intro .styled-figure {
   width: 100%;
   position: relative;
   overflow: hidden;
}

@media screen and (max-width: 1024px) {
   .section-home-intro .row.grid {
      --columns: 1;
      gap: calc(var(--gap) * 2.5) var(--grid-gap);
   }

   .section-home-intro .col-images-left,
   .section-home-intro .col-images-right {
      display: flex;
      flex-direction: row;
      align-items: center;
   }

   .section-home-intro .col-images-left .col-row,
   .section-home-intro .col-images-right .col-row {
      width: 100%;
      display: flex;
   }

   .section-home-intro .col-row-ornament {
      display: none;
   }
}

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


   .section-home-intro .col-images-left,
   .section-home-intro .col-images-right {
      gap: 0;
   }

   .section-home-intro .col-images-left .col-row:nth-child(1) {
      justify-content: flex-start;
      padding-right: 0;
   }
   .section-home-intro .col-images-right .col-row:nth-child(2) {
      justify-content: flex-end;
      padding-left: 0;
   }

   .section-home-intro .col-images-left .col-row:nth-child(1) figure,
   .section-home-intro .col-images-right .col-row:nth-child(2) figure {
      width: calc(100% - calc(var(--gap) * 2));
   }

   .section-home-intro .col-images-left .col-row:nth-child(2) figure,
   .section-home-intro .col-images-right .col-row:nth-child(1) figure {
      width: 100%;
   }

}
   

/* ------------------------- Section - Home Intro After -------------------------------------------------- */

.section-home-intro-after {
   padding-top: calc(var(--gap) * 1.66);
   padding-bottom: calc(var(--gap) * 1.66);
}

.section-home-intro-after .col {
   gap: 1em;
   max-width: 36em;
}

/* ------------------------- Section - Stay Slider -------------------------------------------------- */

.section-stay-slider {
   padding-top: 0;
   padding-bottom: 0;
}

/* ------------------------- Section - Image Split -------------------------------------------------- */

.section-image-split .row.grid {
   --columns: 2;
   --grid-gap: calc(var(--gap) * 2);
   align-items: center;
}

.section-image-split + .section-image-split {
   padding-top: 0;
}

@media screen and (max-width: 1024px) {
   .section-image-split .row.grid {
      --columns: 2;
      --grid-gap: calc(var(--gap) * 2);
   }
}

@media screen and (min-width: 721px) {
   .section-image-split .row.grid.flipped .col-image {
      order: 3;
   }
}

@media screen and (max-width: 720px) {
   .section-image-split .row.grid {
      --columns: 1;
      gap: calc(var(--gap) * 2) var(--grid-gap);
   }
}


/* ------------------------- Section - Service Split -------------------------------------------------- */

.section-service-split .row.grid {
   --columns: 2;
   --grid-gap: calc(var(--gap) * 2);
   align-items: stretch; 
}

.section-service-split + .section-service-split {
   padding-top: 0;
}
.section-service-split .col-content .col-row-bottom {
   margin-top: auto; 
   display: flex;   
   align-items:flex-end;
   justify-content: space-between;
   gap: calc(var(--gap) * 1);
}

.section-service-split .col-row-bottom p {
   flex: 1; 
   margin-bottom: 0;
   font-size: var(--copy-size-l);
}

.section-service-split .col-row-bottom .small-image {
   width: 35%;
   flex-shrink: 0;  
   /* border-radius: var(--border-radius);  */
}

.section-service-split .col-row-bottom .medium-image {
   width: 30%;
   flex-shrink: 0;  
   /* border-radius: var(--border-radius);  */
}

@media screen and (max-width: 1024px) {
   .section-service-split .row.grid {
      --columns: 2;
      --grid-gap: calc(var(--gap) * 1.5);
   }
}

@media screen and (min-width: 721px) {
   .section-service-split .row.grid.flipped .col-image {
      order: 3;
   }
}

@media screen and (max-width: 720px) {
   .section-service-split .row.grid {
      --columns: 1;
      gap: calc(var(--gap) * 2) var(--grid-gap);
   }
   
   .section-service-split .col-content .col-row-bottom {
      margin-top: 0; 
      flex-direction: column; /* Đảo trục thành dọc */
      align-items: flex-start;
      gap: 1.5em;
   }

   .section-service-split .col-row-bottom .small-image {
      width: 60%;
   }
}


/* ------------------------- Section - Text Split -------------------------------------------------- */

.section-text-split .row.grid {
   --columns: 2;
   --grid-gap: calc(var(--gap) * 1);
}

.section-text-split .row.grid .col-row-text {
   padding-top: 0.25em;
}

@media screen and (max-width: 720px) {
   .section-text-split .row.grid {
      --columns: 1;
      gap: calc(var(--gap) * 2) var(--grid-gap);
   }

   .section-text-split .row.grid .col-row-text {
      padding-top: 0em;
   }
}

/* ------------------------- Section - Stay Header -------------------------------------------------- */

.section-stay-header {
   padding-bottom: 0;
}

/* ------------------------- Section - Products Cards -------------------------------------------------- */

.section-product-cards {
   padding-top: calc(var(--gap) * 3);
}

.section-product-cards .row.grid {
   --columns: 4;
   --grid-gap: calc(var(--container-padding) / 2);
   gap: calc(var(--gap) * 3) var(--grid-gap);
}

@media screen and (max-width: 720px) {
   .section-product-cards .row.grid {
      --columns: 2;
      gap: calc(var(--gap) * 2.5) var(--grid-gap);
   }
}

/* ------------------------- Section - projects Header -------------------------------------------------- */

.section-projects-header {
   padding-bottom: 0;
}

/* ------------------------- Section - projects Cards -------------------------------------------------- */

.section-projects-intro {
   padding-bottom: 0;
}

/* ------------------------- Section - projects Cards -------------------------------------------------- */

.section-projects-cards {
   padding-top: calc(var(--gap) * 3);
}

/* .section-projects-cards .row.grid {
   --columns: 3;
   --grid-gap: calc(var(--container-padding)/2);

}

@media screen and (max-width: 1024px) {
   .section-projects-cards .row.grid {
      --columns: 2;
      gap: calc(var(--gap) * 1) var(--grid-gap);
   }
}

@media screen and (max-width: 720px) {
   .section-projects-cards .row.grid {
      --columns: 1;
   }
} */
/* ==========================================================================
   LAYOUT GRID ĐẶC BIỆT CHỈ ĐỊNH CHO SECTION PROJECTS CARDS
   ========================================================================== */

   .section-projects-cards .row.grid {
  
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: calc(var(--container-padding) / 2) !important;
      /* gap: calc(var(--gap) * 3) calc(var(--container-padding) / 2); */
   }
   .section-projects-cards .row.grid > .col {
      width: 100%;
      max-width: 100%;
   }

   @media screen and (min-width: 1025px) {
      .section-projects-cards .row.grid .col:nth-child(4) {
         grid-column: 2; 
      }
   
   }
 
   @media screen and (max-width: 1024px) {
      .section-projects-cards .row.grid {
         grid-template-columns: repeat(2, 1fr);
         gap: calc(var(--gap) * 1) calc(var(--container-padding) / 2);
      }
      

      .section-projects-cards .row.grid .col:nth-child(4) {
         grid-column: auto; 
      }
   }
   
   @media screen and (max-width: 720px) {
      .section-projects-cards .row.grid {
         grid-template-columns: 1fr;
      }
   }

/* ------------------------- Section - other Header -------------------------------------------------- */

.section-other-header {
   padding-bottom: 0;
}

/* ------------------------- Section - Contact Header -------------------------------------------------- */
.section-contact-header {
   padding-bottom: calc(var(--nav-bar-height));
}

/* ------------------------- Section - other Cards -------------------------------------------------- */

.section-other-cards {
   padding-top: calc(var(--gap) * 3);
}

.section-other-cards .row.grid {
   --columns: 3;
   --grid-gap: var(--container-padding);
   gap: calc(var(--gap) * 3) var(--grid-gap);
}

.section-other-cards + .section-small-image {
   padding-top: 0;
   padding-bottom: 0;
}

@media screen and (max-width: 1024px) {
   .section-other-cards .row.grid {
      --columns: 2;
      gap: calc(var(--gap) * 1) var(--grid-gap);
   }
}

@media screen and (max-width: 720px) {
   .section-other-cards .row.grid {
      --columns: 1;
   }
}

/* ------------------------- Section - projects Single Header -------------------------------------------------- */

.section-projects-single-header {
   padding-bottom: 0;
   z-index: 2;
}

.section-projects-single-header .col-row-image {
   padding-top: calc(var(--gap) * 1.5);
}

.section-projects-single-header .styled-figure {
   width: var(--card-width);
   margin-bottom: calc((var(--card-width) * 1.333333) * -0.666);
}

.section-projects-single-header + .section-big-image .background-media {
   min-height: 90vh;
   transform-origin: bottom center;
}

@media (hover: none) { 
   @media screen and (max-width: 1024px) {
      .section-projects-single-header + .section-big-image .background-media {
         min-height: 65vh;
         min-height: calc(var(--vh, 1vh) * 65);
      }
   }
}

/* ------------------------- Section - page Single Header -------------------------------------------------- */

.section-page-single-header + .section-big-image .background-media {
   min-height: 90vh;
}

@media (hover: none) { 
   @media screen and (max-width: 1024px) {
      .section-page-single-header + .section-big-image .background-media {
         min-height: 65vh;
         min-height: calc(var(--vh, 1vh) * 65);
      }
   }
}

/* ------------------------- Section - Big Image -------------------------------------------------- */

.section-big-image {
   padding: 0;
   position: relative;
   overflow: hidden;
}

.section-big-image .background-media {
   width: 100%;
   position: relative;
   min-height: 90vh;
}

.section-big-image.section-big-image-text {
   padding-top: var(--section-padding);
   padding-bottom: var(--section-padding);
}

.section-big-image.section-big-image-text .background-media {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
}

.section-big-image.section-big-image-text .col-row-btn {
   padding-top: var(--gap);
}

@media (hover: none) { 
   @media screen and (max-width: 1024px) {
      .section-big-image .background-media {
         min-height: 30vh;
         min-height: calc(var(--vh, 1vh) * 30);
      }


      .section-big-image.section-big-image-text {
         padding-top: calc(var(--section-padding) * 1.5);
         padding-bottom: calc(var(--section-padding) * 1.5);
      }
   }
}

/* ------------------------- Section - After Big Image -------------------------------------------------- */

.section-after-big-image {
   padding-top: 0;
}

.section-after-big-image .col-row-image {
   padding-bottom: var(--gap);
}

.section-after-big-image .col-row-image:last-child {
   padding-bottom: 0;
}

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

/* ------------------------- Section - Three Images -------------------------------------------------- */



.section-three-images {
   padding-top: 0;
   padding-bottom: 0;
}

.section-three-images + .section-footer {
   margin-top: var(--section-padding);
}

.section-three-images + .section-image-split {
   margin-top: var(--section-padding);
}

.section-three-images-block .container.small .row.centered {
   padding-bottom: calc(var(--gap) * 3.25);
}

/* @media screen and (min-width: 721px) {
 .section-three-images.offset .col:nth-child(even),
   .section-three-images-block.offset .col:nth-child(even) {
      margin-top: var(--container-padding);
   }
} */

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

   .section-three-images .row.grid,
   .section-three-images-block .row.grid {
      --columns: 2;
   }

   .section-three-images .col:nth-child(3),
   .section-three-images-block .col:nth-child(3) {
      display: none;
   }
}
/* ------------------------- Section - Two Images -------------------------------------------------- */

.section-two-images .row.grid {
   flex-wrap: wrap;
   gap: var(--gap) var(--grid-gap);
   --grid-gap: var(--container-padding);
   --columns: 2;
}

.section-two-images {
   padding-top: 0;
   padding-bottom: 0;
}

/* Kế thừa khoảng cách khi đứng trước các section khác */
.section-two-images + .section-footer,
.section-two-images + .section-image-split {
   margin-top: var(--section-padding);
}

.section-two-images-block .container.small .row.centered {
   padding-bottom: calc(var(--gap) * 3.25);
}

/* Tạo hiệu ứng so le (offset) trên Desktop cho cột thứ 2 (cột chẵn) */
@media screen and (min-width: 721px) {
   .section-two-images.offset .col:nth-child(even),
   .section-two-images-block.offset .col:nth-child(even) {
      margin-top: var(--container-padding);
   }
}

/* Tùy chỉnh hiển thị trên Mobile */
@media screen and (max-width: 720px) {
   .section-two-images .row.grid,
   .section-two-images-block .row.grid {
      --columns: 1; 
 
   }

}

/* ------------------------- Section - Dining Intro -------------------------------------------------- */

.section-dining-intro {
   padding-bottom: calc(var(--gap) * 3.25);
}

/* ------------------------- Section - Small Image -------------------------------------------------- */

.section-small-image {
   z-index: 2;
}

.section-small-image .col-row-image {
   padding-top: var(--gap);
}

.section-small-image .styled-figure {
   width: var(--card-width);
}

.section-small-image + .section-big-image {
   margin-top: calc((var(--card-width) * 1.333333) * -0.666);
}

/* ==========================================================================
   UTILITY: SECTION DECOR SVG (Background trang trí)
   ========================================================================== */

/* Bước 1: Setup cho Section bọc ngoài */
/* (Bất kỳ section nào chứa .section-decor đều nên có 2 thuộc tính này) */
.section:has(> .section-decor),
.section-other-header {
   position: relative;
   overflow: hidden; /* Ngăn SVG rớt ra ngoài gây thanh cuộn ngang */
}

/* Bước 2: Setup khối chứa SVG */
.section-decor {
   position: absolute;
   top: 0;
   right: 0;
   width: 45vw;           /* Tự động co giãn theo màn hình (chiếm 45% chiều rộng) */
   max-width: 600px;      /* Không được to quá mức này trên Desktop */
   min-width: 300px;      /* Không được nhỏ quá mức này trên Mobile */
   height: 100%;
   z-index: 0;            /* Đẩy xuống dưới cùng */
   pointer-events: none;  /* LƯU Ý QUAN TRỌNG: Khách hàng click xuyên qua SVG, không bị chặn link/nút */
   display: flex;
   justify-content: flex-end;
   align-items: flex-start; /* Ép SVG bám sát góc trên */
   
   /* --- TÙY BIẾN MÀU SẮC Ở ĐÂY --- */
   color: var(--color-primary); /* SVG sẽ dùng màu này do ta đã set fill="currentColor" */
   opacity: 0.05;               /* Độ mờ vừa phải để làm hình chìm tinh tế */
}

/* Bước 3: Setup cho thẻ <svg> bên trong */
.section-decor svg {
   width: 100%;
   height: auto;
   /* Dịch SVG ra khỏi rìa một chút để tạo không gian mở, không bị đóng hộp cứng nhắc */
   transform: translate(25%, -15%); 
}

/* Bước 4: Bảo vệ nội dung chính */
/* Bắt buộc container phải nằm lớp trên SVG để chữ không bị che */
.section-decor ~ .container,
.section > .container {
   position: relative;
   z-index: 2;
}

/* --- OPTIONAL: Phiên bản dùng cho Section nền tối (Dark Theme) --- */
[data-theme-section="dark"] .section-decor {
   color: var(--color-white); /* Tự động chuyển SVG thành màu trắng chìm trên nền tối */
   opacity: 0.1;
}



.cut-tr {
   --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;
}

.cut-tr-button {
   --cut-size: 1rem; 
   clip-path: polygon(
      0% 0%, 
      calc(100% - var(--cut-size)) 0%, 
      100% var(--cut-size), 
      100% 100%, 
      0% 100%
   );
   overflow: hidden; 
   position: relative;
}

@media screen and (max-width: 720px) {
   .cut-tr {
      --cut-size: 2rem;
   }
}


/* ------------------------- Section - Menu -------------------------------------------------- */

.section-menu .row-menu-controls {
   padding-top: calc(var(--gap) * 1.5);
   padding-bottom: calc(var(--gap) * 0.75);
}

.section-menu .row-disclaimer {
   padding-top: calc(var(--gap) * 1.5);
   padding-bottom: calc(var(--gap) * 1.5);
}

.section-menu .row-disclaimer p {
   font-size: var(--copy-size-s);
   opacity: 0.6;
}

/* Filter Controls */

.section-menu .row-menu-controls .menu-controls {
   display: flex;
   gap: 1.5em;
   overflow-x: scroll;
}

.section-menu .single-menu-btn {
   display: flex;
   padding: 0.4em 0em;
   border-radius: 10em;
   position: relative;
   cursor: pointer;
   transition: padding var(--animation-primary);
}

.section-menu .single-menu-btn[data-filter-status="active"] {
   padding: 0.4em 0.9em;
}

.section-menu .single-menu-btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: 10em;
   border: 1px solid var(--color-border);
   transition: opacity var(--animation-primary);
   opacity: 0;
}

.section-menu .single-menu-btn[data-filter-status="active"]::before {
   opacity: 1;
}

.section-menu .single-menu-btn span {
   font-size: var(--copy-size-m);
   opacity: 0.5;
   transition: opacity var(--animation-primary);
   color: var(--color-dark);
   white-space: nowrap;
}

.section-menu .single-menu-btn:hover span {
   opacity: 1;
}

.section-menu .single-menu-btn[data-filter-status="active"] span {
   opacity: 1;
   font-weight: 400;
}

/* Filter Items */

.section-menu [data-filter-grid] .menu-list[data-filter-status="not-active"] {
   display: none;
}

.section-menu [data-filter-grid] {
	transform: translateY(0em) rotate(0.001deg);
   transition: opacity .2s ease-out, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-menu [data-filter-grid].toggle-fade-out {
	opacity: 0;
	transform: translateY(0.5em) rotate(0.001deg);;
	transition: opacity .2s ease-in, transform 0.2s cubic-bezier(0.7, 0, 0.84, 0);
}
 
.section-menu [data-filter-grid].toggle-fade-in {
	opacity: 0;
	transform: translateY(var(--gap)) rotate(0.001deg);
}

.section-menu .row-menu-grid .menu-list {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   gap: calc(var(--gap) * 0.75) var(--grid-gap);
   --grid-gap: var(--container-padding);
   --columns: 2;
}

.section-menu .row-menu-grid .single-menu-item {
   width: calc((99.99% / var(--columns)) - (var(--grid-gap) * ((var(--columns) - 1) / var(--columns))));
   display: flex;
   flex-direction: column;
   gap: 0.6em;
   position: relative;
   padding-top: calc(var(--gap) * 0.75);
}

.section-menu .row-menu-grid .single-menu-item.special {
   width: 100%;
   background-color: rgb(99, 70, 34, 0.05);
   padding: calc(var(--gap) * 0.75);
}

.section-menu .row-menu-grid .single-menu-item.special .border-top {
   display: none;
}

.section-menu .row-menu-grid .single-menu-item .col-menu-eyebrow {
   padding-top: calc(var(--gap) * 0.1);
}

.section-menu .row-menu-grid .single-menu-item.special .col-menu-eyebrow {
   display: flex;
   align-items: center;
   gap: 0.3em;
}

.section-menu .row-menu-grid .single-menu-item.special .col-menu-eyebrow svg {
   width: calc(var(--copy-size-m) * 1.1);
   margin-bottom: 0.15em;
   margin-left: calc(var(--copy-size-m) * -0.2);
}

.section-menu .row-menu-grid .single-menu-item.special .col-menu-eyebrow svg * {
   fill: var(--color-primary);
   stroke: transparent;
   stroke-width: 0px;
}

.section-menu .row-menu-grid .single-menu-item .col-menu-price {
   display: flex;
   align-items: center;
   gap: 1em;
}

.section-menu .row-menu-grid .single-menu-item .col-menu-price p {
   font-weight: 400;
   font-size: var(--copy-size-m);
}

.section-menu .row-menu-grid .single-menu-item .col-menu-price .duration {
   display: flex;
   align-items: center;
   gap: 0.25em;
   font-weight: 300;
   opacity: 0.6;
}

.section-menu .row-menu-grid .single-menu-item .col-menu-price .duration svg {
   width: calc(var(--copy-size-m) * 1.2);
   margin-bottom: 0.1em;
}

.section-menu .row-menu-grid .single-menu-item .col-menu-price .duration svg * {
   stroke: var(--color-dark);
   stroke-width: 1.5px;
}

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

   .section-menu .row-menu-grid .menu-list {
      --columns: 1;
   }
}

/* ------------------------- Section - page Single Header -------------------------------------------------- */

.section-page-single-header {
   overflow: hidden;
   padding: 0;
}

.section-page-single-header .overlay-dark-gradient {   
   background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%);
   transform: scale(1);
   opacity: 0.5;
}
   
.section-page-single-header h1 {
   font-size: calc(var(--title-size) * 0.475);
   line-height: 1.2;
}
.section-page-single-header h2 {
   font-weight: 400;
   font-size: calc(var(--copy-size-l) * 2);
   margin-bottom: 1.25em;
}

.section-page-single-header .styled-col {
   gap: calc(var(--gap) * 2);
}

@media screen and (max-width: 540px) {
   .section-page-single-header h1 {
      font-size: calc(var(--title-size) * 0.6);
   }
}


/* -------------------------    Section page Single Header - Custom Layout-------------------------------------------------- */

.section-page-single-header .row-title {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   height: 100vh;
   width: 100%;
   padding-top: calc(var(--nav-bar-height) * 1.5);
   padding-bottom: calc(var(--gap) * 2);
}
.section-page-single-header .top-left-block {
   display: flex;
   flex-direction: column;
   align-items: flex-start;   
   justify-content: flex-start;
   flex: 1; 
   width: 100%;
   text-align: left; 
   gap: calc(var(--gap) * 0.5);
}
.section-page-single-header .top-center-block {
   display: flex;
   flex-direction: column;
   align-items: center;  
   justify-content: center;
   flex: 1;              
   width: 100%;
   gap: calc(var(--gap) * 1.5); 
}

.col-row-links-category {
   display: flex;
   flex-direction:column;
   /* justify-content: space-between;
   align-items: center; */
   width: 100%;

}

[data-theme-section="dark"] .col-row-links-category .link-click span {
   color: var(--color-white);
}
[data-theme-section="dark"] .col-row-links-category .link-click::before {
   background-color: var(--color-white);
}

.section-page-single-header .bottom-left-block {
   display: flex;
   flex-direction: column;
   align-items: flex-start; 
   text-align: left;
   width: 100%;
}
.section-page-single-header .bottom-left-block .col-row-text p {
   max-width: 35em;
}

@media screen and (max-width: 1024px) {
   .col-row-links-category {
      justify-content: center;
      gap: 1em 2em;           
      flex-wrap: wrap;
   }
}

.section-page-single-header .row.grid {
   --columns: 2;
   justify-content: flex-end;
   align-items: flex-end;
   /* padding-top: var(--section-padding); */
   padding-bottom: calc(var(--section-padding)/2);
}
@media (max-width: 768px) {
   .section-page-single-header .row.grid {
      --columns: 1;
   }
}

/* ==========================================================================
   COMPONENT: BUTTON SLASH (Quét góc chéo cao cấp)
   ========================================================================== */

   .btn-slash {
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      
      height: var(--btn-height);
      padding: 0 3em; 
      font-size: var(--copy-size-m);
      font-weight: 500;
      letter-spacing: 0.05em;
      
      background: transparent;
      border-radius: 0; /* Giao diện góc cạnh, sắc sảo */
      overflow: hidden; /* Cắt phần background bị dư ra ngoài */
      text-decoration: none;
      z-index: 1;
      
      /* Chuyển màu chữ mượt mà khi nền trượt qua */
      transition: color 0.5s cubic-bezier(0.19, 1, 0.22, 1);
   }
   
   /* KHỐI NỀN TRƯỢT (QUÉT CHÉO) */
   .btn-slash::before {
      content: '';
      position: absolute;
      top: 0;
      left: -10%; /* Kéo rộng ra một chút để che lấp phần viền do bị xéo */
      width: 120%;
      height: 100%;
      
      /* Tạo độ nghiêng -15 độ và thu nhỏ nó lại bằng 0 để tàng hình */
      transform: skewX(-15deg) scaleX(0);
      transform-origin: right; /* Mặc định neo ở bên phải (để lúc thoát ra nó chạy về phải) */
      
      transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      z-index: -1;
   }
   
   /* --- BIẾN THỂ: DARK --- */
   .btn-slash.dark {
      color: var(--color-dark);
      border: 1px solid var(--color-dark);
   }
   .btn-slash.dark::before {
      background-color: var(--color-dark);
   }
   
   /* --- BIẾN THỂ: PRIMARY --- */
   .btn-slash.primary {
      color: var(--color-primary);
      border: 1px solid var(--color-primary);
   }
   .btn-slash.primary::before {
      background-color: var(--color-primary);
   }
   
   /* ==========================================================================
      HOVER EFFECTS
      ========================================================================== */
   
   /* Khi hover: Đổi màu chữ thành trắng */
   .btn-slash:hover {
      color: var(--color-white);
   }
   
   /* Khi hover: Khối xéo bung ra 100% và đổi tâm sang Trái để lao từ Trái vào */
   .btn-slash:hover::before {
      transform: skewX(-15deg) scaleX(1);
      transform-origin: left;
   }
/* ------------------------- Section - Double Slider -------------------------------------------------- */

.section-double-slider {
   padding-top: 0;
}

.section-double-slider .row-title,
.section-double-slider .row.centered {
   padding-bottom: calc(var(--gap) * 3);
}

.section-double-slider .row-btn {
   padding-top: calc(var(--gap) * 1.5);
}

/* ------------------------- Pagebuilder -------------------------------------------------- */

.section-combine-no-padding + .section-combine-no-padding {
   padding-top: 0;
}

.section-combine-no-padding + .section-projects-intro::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--color-border);
   height: 1px;
}



.section-about-us .row.columns {
   --grid-gap: var(--container-padding);
}

/* Cột tiêu đề: 9/12 = 75% */
.section-about-us .col-title {
   --column-width: 2;
}

.section-about-us .col-title-sub {
   --column-width: 2;
}
.section-about-us .col-whitespace {
   --column-width: 2;
}

.section-about-us .col-content {
   --column-width: 6;
}

.col-row-whitespace {
   width: 100%;
   flex-basis: 100%;
   height: var(--gap);
}
@media (max-width: 768px) {
   .section-split-detail .col-title,
   .section-split-detail .col-content,
   .section-split-detail .col-slidebar {
      --column-width: 12; /* Full width */
   }
   .section-split-detail .col-whitespace {
      display: none !important;
   }
}
/* ------------------------- SECTION news -------------------------------------------------- */

.content .col-row-info h2 {
   font-size: calc(var(--copy-size-l) * 1.5);
   line-height: 1.2;
   color: var(--color-dark);
   margin-bottom: 1.25rem;
}
/* ------------------------- Section - sticky Slider -------------------------------------------------- */
.section-wrap-stacked {
   flex-flow: column;
   display: flex;
   position: relative;
 }

 .section-sticky-slide {
   padding-top: var(--section-padding);
   /* padding-bottom: var(--section-padding); */
   display: block;
   position: sticky;
   top: 0;
   overflow: visible;
 }
/* ===== SECTION SPLIT DETAIL ===== */
.section-split-detail .row.columns {
   --grid-gap: var(--container-padding);
}

/* Cột tiêu đề: 9/12 = 75% */
.section-split-detail .col-title {
   --column-width: 12;
}

.section-split-detail .col-content {
   --column-width: 7;
}
.section-split-detail .col-whitespace {
   --column-width: 2;
}
/* Cột sidebar: 3/12 = 25% */
.section-split-detail .col-slidebar {
   --column-width: 3;
   background: var(--color-light);
   --cut-size: 2rem;
   clip-path: polygon(0% 0%, calc(100% - var(--cut-size)) 0%, 100% var(--cut-size), 100% 100%, 0% 100%);
   overflow: hidden;
   position: relative;
   padding: 1rem;
}

/* Whitespace row - chiếm toàn bộ độ rộng */

.col-row-whitespace {
   width: 100%;
   flex-basis: 100%;
   height: var(--gap);
}
@media (max-width: 768px) {
   .section-split-detail .col-title,
   .section-split-detail .col-content,
   .section-split-detail .col-slidebar {
      --column-width: 12; /* Full width */
   }
   .section-split-detail .col-whitespace {
      display: none !important;
   }
}


/* ========================================TABLE OF CONTENTS STYLING======================================== */

/* Container TOC - Sticky */
.col-slidebar.toc-sticky-container {
   position: sticky;
   top: 150px;
   height: fit-content;
   max-height: calc(100vh - 200px);
   overflow-y: auto;
   scroll-behavior: smooth;
}

/* Title */
.toc-title {
   display: block;
   font-size: var(--copy-size-s);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--color-text);
   margin-bottom: 1.5em;
   opacity: 0.7;
}

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

.toc-list li {
   margin: 0;
   padding: 0;
}

.toc-list a {
   display: block;
   padding: 0.6em 0;
   color: var(--color-text);
   opacity: 0.7;
   text-decoration: none;
   font-size: var(--copy-size-m);
   line-height: 1.4;
   
   transition: all var(--animation-nav);
   border-left: 2px solid transparent;
   padding-left: 1em;
   margin-left: -1.2em;
}

.toc-list a:hover {
   opacity: 1;
   color: var(--color-primary);
}

/* Active state */
.toc-list a.active,
.toc-list li.active > a {
   opacity: 1;
   color: var(--color-primary);
   font-weight: 600;
   border-left-color: var(--color-primary);
}

.toc-list .toc-level-2 a {
   font-size: var(--copy-size-m);
   padding-left: 1em;
}

.toc-list .toc-level-3 a {
   font-size: var(--copy-size-m);
   padding-left: 2em;
   opacity: 0.6;
}

.toc-list .toc-level-4 a {
   font-size: var(--copy-size-s);
   padding-left: 3em;
   opacity: 0.5;
}

/* Hover trên h2, h3, h4 - Optional */
.col-content.styled-content h2,
.col-content.styled-content h3,
.col-content.styled-content h4 {
   position: relative;
   scroll-margin-top: 100px; /* Giãn cách khi scroll đến */
}

/* ========================================RESPONSIVE ======================================== */

@media (max-width: 1024px) {
   .col-slidebar.toc-sticky-container {
      top: 120px;
      max-height: calc(100vh - 150px);
   }
   
   .toc-list a {
      font-size: 0.875rem;
      padding: 0.5em 0;
   }
}

/* ========================================
   TABLE OF CONTENTS - MOBILE COLLAPSIBLE
   ======================================== */

   @media (max-width: 768px) {
      .col-slidebar.toc-sticky-container {
         position: sticky;
         left: 0;
         right: 0;
         width: 100%;
         max-width: 100%;
         max-height: none;
         height: auto;
         background: var(--color-white);
         border-top: 1px solid var(--color-border);
         z-index: 98;
         padding: 1rem var(--container-padding);
         overflow: visible;
         display: block;
      }
   
      .toc-title {
         display: flex;
         align-items: center;
         justify-content: space-between;
         cursor: pointer;
         margin-bottom: 0;
         padding: 0;
      }
   
      .toc-toggle-icon {
         display: inline-block;
         width: 24px;
         height: 24px;
         transition: transform 0.3s ease;
         flex-shrink: 0;
      }
   
      .toc-toggle-icon svg {
         width: 100%;
         height: 100%;
         stroke: var(--color-primary);
         stroke-width: 2;
      }
   
      .toc-list {
         display: none;
         border: none;
         padding: 1rem 0 0 0;
         border-top: 1px solid var(--color-border);
         max-height: calc(100vh - 150px);
         overflow-y: auto;
         margin: 0;
         list-style: none;
      }
   
      .toc-list.active {
         display: block;
      }
   
      .toc-toggle-icon.active {
         transform: rotate(180deg);
      }
   
      .toc-list li {
         margin: 0.3rem 0;
      }
   
      .toc-list a {
         padding: 0.6rem 0;
         border-left: none;
         margin-left: 0;
      }
   }
   
   /* Desktop - giữ nguyên */
   @media (min-width: 769px) {
      .col-slidebar.toc-sticky-container {
         position: sticky;
         top: 150px;
         height: fit-content;
         max-height: calc(100vh - 200px);
         overflow-y: auto;
         display: block;
      }
   
      .toc-list {
         display: block !important;
      }
   
      .toc-toggle-icon {
         display: none;
      }
   }
/* ========================================CUSTOM SCROLLBAR (Optional)======================================== */

.col-slidebar.toc-sticky-container::-webkit-scrollbar {
   width: 6px;
}
.col-slidebar.toc-sticky-container::-webkit-scrollbar-track {
   background: transparent;
}

.col-slidebar.toc-sticky-container::-webkit-scrollbar-thumb {
   background: var(--color-border);
   border-radius: 3px;
   transition: background var(--animation-nav);
}

.col-slidebar.toc-sticky-container::-webkit-scrollbar-thumb:hover {
   background: var(--color-primary);
}

/* ==========================================================================ARTICLE SHARE BLOCK ========================================================================== */

   .article-share-block {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      
      /* Khoảng cách với phần nội dung phía trên */
      margin-top: 4rem; 
      padding-top: 2.5rem;
      border-top: 1px solid var(--color-border); /* Đường kẻ phân cách */
  }
  
  /* Chữ "Chia sẻ bài viết" */
  .article-share-block .share-label {
      margin: 0;
      color: var(--color-text);
      opacity: 0.6; /* Làm mờ nhẹ đi để nhường sự chú ý cho icon */
  }
  
  /* Danh sách Icon */
  .article-share-block .share-icons-list {
      display: flex;
      align-items: center;
      gap: 0.75rem;
  }
  
  /* Nút bấm mạng xã hội */
  .article-share-block .share-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      background-color: var(--color-inactive)
      color: var(--color-dark);
      border: none;
      cursor: pointer;
      text-decoration: none;
      transition: all var(--animation-fast);
      --cut-size: 0.5rem;
      clip-path: polygon(0% 0%, calc(100% - var(--cut-size)) 0%, 100% var(--cut-size), 100% 100%, 0% 100%);
      overflow: hidden;
  }
  
  /* Cấu hình SVG bên trong nút */
  .article-share-block .share-btn svg {
      width: 18px;
      height: 18px;
      /* Dùng fill hoặc stroke tùy theo định dạng của từng SVG */
      fill: currentColor; 
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
  }
  
  /* Ngoại lệ cho Zalo & X vì 2 icon này được vẽ full fill (không dùng stroke) */
  .article-share-block .share-btn.zalo-btn svg,
  .article-share-block .share-btn[aria-label="Share on X"] svg {
      stroke: none;
  }
  
  /* --- HIỆU ỨNG KHI HOVER --- */
  .article-share-block .share-btn:hover {
      background-color: var(--color-primary); /* Sáng lên màu thương hiệu */
      color: var(--color-white); /* Icon thành màu trắng */
      transform: translateY(-4px); /* Nẩy nhẹ lên */
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
  
  /* --- RESPONSIVE CHO MOBILE --- */
  @media screen and (max-width: 540px) {
      .article-share-block {
          flex-direction: column;
          align-items: flex-start; /* Ép chữ và icon dạt sang trái trên điện thoại */
          gap: 1.25rem;
      }
  }

  /* ==========================================================================ARTICLE AUTHOR BLOCK ========================================================================== */

.article-author-block {
   display: flex;
   align-items: flex-start;
   gap: 1.5rem;
   margin-top: 3rem;
   padding: 2rem;
   background-color: var(--color-light);
}

.article-author-block .author-avatar-link {
   flex-shrink: 0;
   transition: transform var(--animation-fast);
}
/* .article-author-block .author-avatar-link:hover {
   transform: scale(1.05) rotate(5deg);
} */

.article-author-block .author-avatar-link svg {
   display: block;
   object-fit: cover; 
}
.article-author-block .author-details {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}
.article-author-block .author-header {
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-wrap: wrap;
}

.article-author-block .author-name {
   text-decoration: none;
   color: var(--color-dark);
   transition: color var(--animation-fast);
}

.article-author-block .author-name h4 {
   margin: 0;
   font-size: 1.125rem;
}

.article-author-block .author-name:hover {
   color: var(--color-primary);
}
.article-author-block .author-socials {
   display: flex;
   gap: 0.5rem;
}

.article-author-block .social-mini {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 28px;
   height: 28px;
   background-color: var(--color-inactive);
   border-radius: 6px;
   color: var(--color-dark);
   transition: all var(--animation-fast);
}

.article-author-block .social-mini svg {
   width: 14px;
   height: 14px;
   fill: none;
   stroke: currentColor;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.article-author-block .social-mini:hover {
   background-color: var(--color-primary);
   color: var(--color-white);
   transform: translateY(-2px);
}
.article-author-block .author-bio {
   margin: 0;
   font-size: var(--copy-size-m);
   opacity: 0.8;
}

@media screen and (max-width: 600px) {
   .article-author-block {
       flex-direction: column; 
       align-items: center;
       text-align: center;
       padding: 1.5rem;
   }
   .article-author-block .author-header {
       justify-content: center; 
   }
}
/* ==========================================================================
   RELATED POSTS SECTION
   ========================================================================== */

   .related-posts-container.mt-80 {
      margin-top: 5rem;
      padding-top: 4rem;
      border-top: 1px solid var(--color-border);
   }
   
   /* Nút xem tất cả dạng Text Link */
   .related-header .btn-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-weight: 500;
      color: var(--color-dark);
      text-decoration: none;
      transition: color var(--animation-fast);
   }
   
   .related-header .btn-link svg {
      transition: transform var(--animation-fast);
   }
   
   .related-header .btn-link:hover {
      color: var(--color-primary);
   }
   
   /* Đẩy mũi tên bay sang phải khi hover */
   .related-header .btn-link:hover svg {
      transform: translateX(4px); 
   }
   
   /* --- LƯỚI GRID 3 CỘT --- */
   .related-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2.5rem;
   }
   
   /* --- THẺ BÀI VIẾT (CARD) --- */
   .related-post-card {
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: var(--color-dark);
      group;
   }
   
   /* Khung ảnh */
   .related-post-card .card-image-wrap {
      width: 100%;
      position: relative;
      overflow: hidden;
      aspect-ratio: 4 / 3; /* Tỷ lệ khung hình ảnh 4:3 chuẩn báo chí */
      background-color: var(--color-inactive);
   }
   
   .related-post-card .card-image-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.8s cubic-bezier(0.2, 1, 0.8, 1); /* GSAP-like easing */
   }
   
   /* Lớp phủ làm tối ảnh nhẹ khi hover */
   .related-post-card .overlay-dark {
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.15);
      opacity: 0;
      transition: opacity 0.4s ease;
   }
   
   /* Khung chứa nội dung (Tiêu đề, Meta) */
   .related-post-card .card-content {
      padding-top: 1.5rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
   }
   
   /* Chữ màu thương hiệu cho Danh mục */
   .related-post-card .text-primary {
      color: var(--color-primary);
   }
   
   /* Chữ nhạt cho Ngày tháng */
   .related-post-card .inactive {
      opacity: 0.6;
   }
   
   /* Tiêu đề bài viết */
   .related-post-card .card-title {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.4;
      transition: color var(--animation-fast);
      
      /* Rút gọn nếu tiêu đề quá dài (2 dòng thì cắt) */
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;  
      overflow: hidden;
   }
   
   /* ==========================================================================
      HOVER EFFECTS (TRẠNG THÁI RÊ CHUỘT)
      ========================================================================== */
   
   /* 1. Zoom ảnh mượt mà */
   .related-post-card:hover .card-image-wrap img {
      transform: scale(1.08);
   }
   
   /* 2. Hiện lớp mờ ảo để ảnh có chiều sâu */
   .related-post-card:hover .overlay-dark {
      opacity: 1;
   }
   
   /* 3. Đổi màu tiêu đề sang màu thương hiệu */
   .related-post-card:hover .card-title {
      color: var(--color-primary);
   }
   
   /* ==========================================================================
      RESPONSIVE CHO MOBILE & TABLET
      ========================================================================== */
   
   @media screen and (max-width: 1024px) {
      .related-grid {
         grid-template-columns: repeat(2, 1fr); /* 2 cột trên Tablet */
         gap: 2rem;
      }
   }
   
   @media screen and (max-width: 600px) {
      .related-grid {
         grid-template-columns: 1fr; /* 1 cột trên Điện thoại */
         gap: 2.5rem;
      }
      
      /* Ẩn nút xem tất cả ở header và mang xuống dưới bằng flex order nếu cần, 
         hoặc giữ nguyên dạng flex-between-center nhưng cho chữ nhỏ lại */
      .related-header {
         align-items: flex-end;
      }
   }

   /* ------------------------- Section - FAQ -------------------------------------------------- */

.section-faq {
   padding-top: calc(var(--section-padding) * 0.5);
   overflow: hidden;
}

.section-faq .row {
   gap: 0 var(--grid-gap);
}

.section-faq .col-title {
   --column-width: 12;
   padding-bottom: 1.8em;
}

.section-faq .col-text {
   --column-width: 12;
}

.section-faq .col-text .col-row {
   max-width: calc(var(--title-size) * 12.6);
}

.section-faq .col-text .spacer {
   display: inline-block;
   pointer-events: none;
}

.section-faq .col-number {
   --column-width: 12;
   align-items: flex-end;
}

.section-faq .col-whitespace {
   --column-width: 4;
}

.section-faq .col-accordion {
   --column-width: 8;
}
 .section-faq .col-content {
   --column-width: 8;
} 

.section-faq .col-accordion .col-row {
   padding-bottom: 1.8em;
}


@media screen and (min-width: 1025px) {
   .section-faq .col-title, 
   .section-faq .col-number {
      position: absolute;
      top: 0.15em;
   }
}

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

   .section-faq .col-accordion .col-row {
      display: none;
   }

   .section-faq .col-whitespace {
      display: none;
   }

   .section-faq .col-number {
      display: none;
   }
   .section-faq .col-accordion {
      --column-width: 12;
   }
   
}

/* 1. Thiết lập lớp nền cho từng mục Accordion */
.accordion .single-accordion-item {
   display: flex;
   position: relative;
   border-bottom: 1px solid var(--color-dark);
   gap: var(--grid-gap);
   width: 100%;
   overflow: hidden; /* Bắt buộc để lớp màu hover không bị tràn ra ngoài border */
   z-index: 1;
   transition: color var(--animation-primary);
}

/* 2. Dựng lớp màu nền ẩn bằng clip-path (Mặc định thu xuống đáy 100%) */
.accordion .single-accordion-item::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1; /* Nằm dưới chữ và số */
   
   /* Kỹ thuật clip-path quét từ dưới lên: inset(Top Right Bottom Left) */
   clip-path: inset(100% 0 0 0); 
   transition: clip-path var(--animation-fast);
   will-change: clip-path;
}

/* 3. Hiệu ứng HOVER: Quét màu nền lên full khung (Top về 0%) */
.accordion .single-accordion-item:hover::before,
.accordion .single-accordion-item[data-accordion-status="active"]::before {
   clip-path: inset(0 0 0 0);
}

/* Khi hover hoặc active, đổi chữ và dấu cộng thành màu trắng để hiển thị rõ trên nền màu */
.accordion .single-accordion-item:hover .num,
.accordion .single-accordion-item:hover .top h3,
.accordion .single-accordion-item:hover .bottom-content p,
.accordion .single-accordion-item[data-accordion-status="active"] .num,
.accordion .single-accordion-item[data-accordion-status="active"] .top h3 {
   color: var(--color-white) !important;
   opacity: 1;
}

/* Đổi màu dấu cộng (+) thành màu trắng khi hover/active */
.accordion .single-accordion-item:hover .top .plus::before,
.accordion .single-accordion-item:hover .top .plus::after,
.accordion .single-accordion-item[data-accordion-status="active"] .top .plus::before,
.accordion .single-accordion-item[data-accordion-status="active"] .top .plus::after {
   background-color: var(--color-white) !important;
}


/* ==========================================================================
   4. CẤU HÌNH VÒNG LẶP 5 MÀU TUẦN TỰ (LẶP LẠI NẾU CÓ BƯỚC 6, 7, 8)
   ========================================================================== */

/* Dòng 1, Dòng 6: Màu 1 (Primary Green) */
.accordion .single-accordion-item:nth-child(5n+1)::before {
   background-color: var(--color-primary);
}

/* Dòng 2, Dòng 7: Màu 2 (Secondary Light Green) */
.accordion .single-accordion-item:nth-child(5n+2)::before {
   background-color: var(--color-secondary-light);
}
/* Riêng màu này nền sáng, nên khi hover giữ chữ màu tối cho dễ đọc */
.accordion .single-accordion-item:nth-child(5n+2):hover .num,
.accordion .single-accordion-item:nth-child(5n+2):hover .top h3,
.accordion .single-accordion-item:nth-child(5n+2):hover .bottom-content p {
   color: var(--color-dark) !important;
}
.accordion .single-accordion-item:nth-child(5n+2):hover .top .plus::before,
.accordion .single-accordion-item:nth-child(5n+2):hover .top .plus::after {
   background-color: var(--color-dark) !important;
}

/* Dòng 3, Dòng 8: Màu 3 (Secondary Teal) */
.accordion .single-accordion-item:nth-child(5n+3)::before {
   background-color: var(--color-secondary-teal);
}

/* Dòng 4: Màu 4 (Secondary Blue/Dark Teal) */
.accordion .single-accordion-item:nth-child(5n+4)::before {
   background-color: var(--color-secondary-blue);
}

/* Dòng 5: Màu 5 (Secondary Warm) */
.accordion .single-accordion-item:nth-child(5n+5)::before {
   background-color: var(--color-primary); /* Bạn có thể dùng biến màu của xưởng hoặc mã màu bất kỳ */
}
/* 
.single-accordion-item .col-number {
   --column-width: 4;

}
.single-accordion-item .col-content {
   --column-width: 8;
} */