/* ======= HEADER CHUNG ======= */
.ts-header {
    z-index: 20;
    color: var(--ts-white);
    width: 100%;
}
.ts-header--home{
    position:absolute;
    top:0;
}

/* ======= HEADER HOME (dọc) ======= */
.ts-header--home {
    /*max-width: 80vw;*/
}

.ts-header--home .container {
    position: relative;
}

/* ===== THANH TÌM KIẾM HEADER HOME ===== */
input:focus-visible {
    outline:0;
}
.ts-header__search-bar {
      position: absolute;
    top: 0;
    right: 0;
    z-index: 21;
    pointer-events: none;
}

.ts-header__search-form {
    width: 100%;
    position: relative;
    pointer-events: auto;
}

.ts-header__search-input {
  width: 100%;
    padding: 40px 104px 40px 40px;
    font-size: 14px;
    color: #ffffff;
    background: #FFFFFF0A;
    border: none;
    backdrop-filter: blur(2px);
    font-size:18px;
}

.ts-header__search-input::placeholder {
    color: rgba(255, 255, 255, 0.9);
}

.ts-header__search-submit {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* icon kính lúp */
.ts-header__search-icon {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
}

.ts-header__panel {
        padding: 40px;
    display: flex;
        pointer-events: all;
            justify-content: space-between;
}

.ts-header__logo img {
    height:80px;
    width:auto;
}

.ts-header__company {
    margin-top: 40px;
}
.ts-header__company p{
    margin:0;
}

.ts-header__subtitle {
font-size: 18px;
    line-height: 24px;
    margin-bottom: 4px;
    color: #fff;
    font-weight: 600;
}

.ts-header__title {
      letter-spacing: 0.08em;
    font-family: Inter;
    font-size: 60px;
    line-height: 88px;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    margin-bottom: 0;
    margin-top:0;
}

.ts-header__desc {
      font-size: 18px;
    line-height: 24px;
    opacity: .6;
    font-weight: 300;
}

.ts-header__nav {
    margin-top: 40px;
}

.ts-header__menu {
    list-style: none;
    padding: 0;
    margin-bottom:40px;
    padding-right:4px;
}
.ts-header__menu::-webkit-scrollbar {
    width: 6px;                 /* độ rộng */
}

.ts-header__menu::-webkit-scrollbar-track {
    background: transparent;    /* nền trong suốt */
}

.ts-header__menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff 0%, #01933E 100%);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05); /* viền nhẹ */
}

.ts-header__menu::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ffffff 0%, #9ee7bf 100%);
}

.ts-header__menu-item {
        border-bottom: 1px solid var(--ts-green-light);
}
.ts-header__menu-item:first-child{
    border-top: 1px solid var(--ts-green-light);
}

.ts-header__menu-item > a {
       display: flex;
       align-items:center;
    padding: 20px 0;
    font-size: 18px;
    text-decoration: none;
    line-height: 24px;
    position: relative;
    color:var(--ts-white);
    font-weight:600;
        justify-content: space-between;
}

.ts-header__menu-item--active a,
.ts-header__menu-item a:hover {
    color: #f8ffb3;
}
.ts-header__menu-item--active a svg path,
.ts-header__menu-item a:hover svg path{
 fill:#f8ffb3   
}

.ts-header__submenu{
    padding-bottom: 2rem;
    padding-left: 1rem;
}
.ts-header__submenu li:not(:last-child){
    margin-bottom:10px;
}
.ts-header__submenu li a{
    color:var(--ts-white);
}
.ts-header__submenu.ts-header__submenu--level-3{
        padding-bottom: 0;
    padding-top: 10px;
}

.ts-header__cta {
    margin-top: auto;
}

.ts-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
        padding: 8px 8px 8px 24px;
    border: 1px solid transparent;
    font-size: 18px;
    line-height:24px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease,
        transform 0.1s ease;
        min-width:230px;
}
.ts-header__cta .ts-button{
    width:100%;
}
.ts-button:hover{
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.ts-button--white {
    background-color: var(--ts-white);
    color: var(--ts-black);
        border: 1px solid var(--ts-green-light);
}

.ts-button--white:hover {
    background-color: #f7fff9; /* nền trắng hơi xanh nhẹ */
    border-color: var(--ts-green-light);
    color: var(--ts-green-dark, #00793a);
}

.ts-button__icon {
width: 48px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    background: var(--ts-green);
        display: flex;
    align-items: center;
    justify-content: center;
    margin-left:1.5rem;
}

/* icon search */
.ts-header__search {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

@media (max-width:1199px){
    /* hamburger */
.header-mobile__child{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ts-header__toggle-bar {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px 0;
    background-color: var(--ts-white);
    transition: transform 0.25s, opacity 0.25s;
}
/* Overlay full màn */
    .ts-header__overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.25s, visibility 0.25s;
        z-index: 30;
    }

    .ts-header__overlay--open {
        visibility: visible;
        opacity: 1;
    }

    .ts-header__overlay-inner {
        height: 100%;
        padding: 24px 20px 32px;
        background: linear-gradient(180deg, var(--ts-green) 0%, var(--ts-green-dark) 100%);
        display: flex;
        flex-direction: column;
    }

    .ts-header__overlay-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .ts-header__overlay-close {
        border: 0;
        background: transparent;
        font-size: 32px;
        color: var(--ts-white);
        line-height: 1;
        order:2;
    }

    /* ===== NAV MOBILE ===== */
.ts-nav-mobile {
    margin-top: 32px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ts-nav-mobile__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Mỗi item là khối dọc, bên trong có head + submenu */
.ts-nav-mobile__list > .ts-nav-mobile__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.ts-nav-mobile__list > .ts-nav-mobile__item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

/* Hàng đầu: text + icon nằm ngang */
.ts-nav-mobile__head {
    display: flex;
    align-items: center;
    padding: 10px 0;
}

/* level 2, 3 lùi vào */
.ts-nav-mobile__head--level-2 {
    padding-left: 16px;
}

.ts-nav-mobile__link {
    flex: 1 1 auto;
    color: var(--ts-white);
    text-decoration: none;
    font-size: 18px;
}

.ts-nav-mobile__link--level-2 {
    font-size: 16px;
}

.ts-nav-mobile__link--level-3 {
    font-size: 16px;
    padding-left: 32px;
}

/* Nút mũi tên */
.ts-nav-mobile__toggle {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 0 4px 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Icon luôn là trắng */
.ts-nav-mobile__toggle svg {
    width: 14px;
    height: 14px;
    transform: rotate(0deg); /* đóng: quay xuống (arrow-down) */
    transition: transform 0.25s ease;
}

.ts-nav-mobile__toggle svg path {
    fill: #ffffff;
}

/* Submenu ẩn/mở bằng max-height cho mượt */
.ts-nav-mobile__submenu {
    list-style: none;
    margin: 0;
    max-height: 0;
    overflow: auto;
    transition: max-height 0.25s ease;
}

.ts-nav-mobile__item--level-2.ts-nav-mobile__item--open .ts-nav-mobile__submenu{
 padding: 8px 0
}

/* Khi item mở → submenu xổ xuống */
.ts-nav-mobile__item--open > .ts-nav-mobile__submenu {
    max-height: 500px; /* đủ lớn cho vài dòng, cần thì tăng */
}

/* Mũi tên quay lên khi mở */
.ts-nav-mobile__item--open > .ts-nav-mobile__head > .ts-nav-mobile__toggle svg{
    transform: rotate(180deg);
}

    /* CTA cuối cùng */
    .ts-header__overlay-cta {
        margin-top: 16px;
    }

    /* Khóa scroll body khi mở menu */
    body.ts-header--no-scroll {
        overflow: hidden;
    }
}
@media (max-width:767px){
    .ts-nav-mobile__toggle svg {
    width: 12px;
    height: 12px;
}
}

/* ======= HEADER INNER (ngang) ======= */
.ts-header--inner {
    position: absolute;
    top: 0;
    z-index: 15;
    color: var(--ts-white);
    padding:12px 0;
    background: linear-gradient(90deg, #01933E 0%, #005825 100%);  
}

.ts-header__inner-wrap {
position:relative
}

.ts-header--inner .ts-header__logo img {
        height: auto;
    max-width: 100px;
}

.ts-header__menu--inline {
    display: flex;
        justify-content: right;
}

.ts-header__menu--inline .ts-header__menu-item {
    border: 0;
    position:relative;
}
.ts-header__menu--inline .ts-header__menu-item:not(:first-child){
    margin-left:2rem;
}

.ts-header__menu--inline a {
    padding:0;
    font-size:16px;
    line-height:22px;
}

.ts-header__menu--inline .ts-header__submenu{
    position: absolute;
    background: linear-gradient(90deg, #01933e 0%, #005825 100%);
    min-width: 320px;
    padding: 20px;
    border: 1px solid #01933e;
   opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity .2s ease-out,
        transform .2s ease-out,
        visibility .2s ease-out;
    z-index: 20;
}
.ts-header__menu--inline .ts-header__menu-item--has-children svg{
    margin-left:0.5rem;
}
.ts-header__menu--inline .ts-header__menu-item--has-children svg path{
    fill:#fff;
}
.ts-header__menu--inline .ts-header__menu-item--has-children:hover > .ts-header__submenu,
.ts-header__menu--inline .ts-header__submenu-item--has-children:hover > .ts-header__submenu{
  opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ts-header__menu--inline .ts-header__submenu--level-3{
    left:100%;
    top:0;
}

@media (max-width:1500px){
    .ts-header__menu--inline .ts-header__menu-item:not(:first-child){
        margin-left:1.5rem;
    }
}
@media (min-width:992px){
    .ts-header__panel {
        flex-direction: column;
        height: 100vh;
    }
        .ts-header--home {
             pointer-events: none;
    }
        .ts-header__panel{
            max-width:320px;
        }
        .ts-header__search-bar{
            left: calc(320px + 15px);
        }
        .ts-header__inner-wrap .row{
            align-items:center;
        }
        .ts-header__panel {
        background: linear-gradient(180deg, var(--ts-green) 0%, var(--ts-green-dark) 100%);
        backdrop-filter: blur(200px);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.35);
    }
}
@media (min-width:1500px){
    .ts-header__panel{
        max-width:400px;
    }
    .ts-header__search-bar{
        left: calc(400px + 15px);
    }
    .ts-header--inner .ts-header__nav{
        margin-right:3rem;
    }
    .ts-header__menu--inline a {
    font-size:18px;
    line-height:24px;
}
}
@media (min-width:1600px){
     .ts-header__panel{
        max-width:480px;
    }
    .ts-header--home .ts-header__menu{
        max-height:400px;
        overflow:auto;
    }
    .ts-header__search-bar{
        left: calc(480px + 15px);
    }
}
@media (max-width:1600px){
    .ts-header__panel{
        padding:1rem;
    }
    .ts-header__company,
    .ts-header__nav{
        margin-top:20px;
    }
    .ts-header--home .ts-header__menu-item a{
        padding:12px 0;
    }
    .ts-header__title{
            font-size: 36px;
    line-height: 64px;
    }
    .ts-header--home .ts-header__menu{
        max-height:300px;
    }
    .ts-header__search-input{
        padding:2rem;
    }
    .ts-header--inner .ts-header__cta .ts-button{
        padding:0.5rem;
    }
    .ts-header--inner .ts-button__icon{
        margin-left:0.5rem;
    }
}
@media (max-width:1500px){
    .ts-header__subtitle{
        font-size:16px;
        line-height:22px;
    }
    .ts-header__logo img{
        height:60px;
    }
    .ts-header__title{
        font-size:32px;
        line-height:60px;
    }
    .ts-header--home .ts-header__menu-item a{
        padding:8px 0;
        font-size:16px;
    }
    .ts-button__icon{
        width:32px;
        height:32px;
        line-height:32px;
    }
    .ts-button__icon svg{
        width:18px;
        height:18px;
    }
    .ts-header--home .ts-header__menu{
        max-height:250px
    }
    .ts-button{
        font-size:16px;
        line-height:22px;
        min-width:200px;
    }
    .ts-header__search-input{
        padding:1rem;
    }
    .ts-header__search-input{
        font-size:16px;
    }
}

/* RESPONSIVE: nếu muốn thanh search full-width trên tablet */
@media (max-width: 1199.98px) {
    .ts-header__search-bar {
    }
    .ts-button{
        padding:8px 8px 8px 1rem;
        font-size:16px;
    }
}
@media (max-width: 991.98px) {
    .ts-header{
            background: linear-gradient(180deg, var(--ts-green) 0%, var(--ts-green-dark) 100%);
            padding:0.5rem 0;
            height:60px;
    }
    .ts-header--home {
        position: relative;
        width: 100%;
        height: auto;
    }

    .ts-header__panel {
        padding:0;
        align-items:center;
    }

    .ts-header__company,
    .ts-header__nav,
    .ts-header__cta {
        display: none; /* phần mô tả + menu chỉ show trong overlay mobile */
    }

    .ts-header__logo img {
        max-height: 44px;
    }
    
     .ts-header__search-bar {
        display: none;
    }
    
    .ts-header__search-bar.open{
        display: block !important;
    position: absolute;
    top: 52px;
    left: 0;
    right: 0;
            background: #000000c7;
    }

    .ts-header__search {
                position: relative;
        top: 0;
        right: 0;
        order:1;
    }
    .ts-header__logo{
     order:2;   
    }
    .ts-header__toggle{
        order:3;
    }
    .ts-button__icon{
        margin-left:0.5rem;
    }
}
@media (max-width:767px){
      .ts-button{
        font-size:14px;
        line-height:20px;
        min-width:180px;
    }
}
@media (max-width:575px){
      .ts-button{
        font-size:12px;
        line-height:18px;
    }
        .ts-button__icon {
        width: 25px;
        height: 25px;
        line-height: 25px;
    }
        .ts-button__icon svg {
        width: 15px;
        height:15px;
        }
}

    .page-hero {
  position: relative;
  width: 100%;
  min-height: 240px;
  color: #fff;
  overflow: hidden;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image:url('/image/catalog/banner/dau-trang.jpg');
}

/* lớp phủ tối ảnh */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
box-shadow: 0px 4px 12px 0px #1C1C1C33;
    background: #1C1C1C33;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  padding: 290px 0 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.page-hero__title {
    font-size: 60px;
    line-height: 88px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
    margin-top: 0;
}

/* breadcrumb trong hero */
.page-hero__breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
}

.page-hero__breadcrumb-item {
  display: inline-flex;
  align-items: center;
    font-weight: 300;
}

.page-hero__breadcrumb-item + .page-hero__breadcrumb-item::before {
  content: "/";
  margin: 0 12px;
}

.page-hero__breadcrumb-item a {
  color: #ffffff;
  text-decoration: none;
}

.page-hero__breadcrumb-item a:hover {
  text-decoration: underline;
}

/* responsive */
@media (min-width:992px){
    .page-hero__breadcrumb-item {
      font-size: 18px;
      line-height:24px;
}
}
@media (max-width:1600px){
    .page-hero__inner {
      padding: 190px 0 100px;
    }
    .page-hero__title{
        font-size:48px;
        line-height:76px;
    }
}
@media (max-width:1500px){
    .page-hero__title{
        font-size:42px;
        line-height:70px;
    }
}
@media (max-width:1199px){
    .page-hero__inner{
            padding: 140px 0 60px;
    }
      .page-hero__title{
        font-size:36px;
        line-height:64px;
    }
}
@media (max-width: 991px) {
      .page-hero__title{
        font-size:32px;
        line-height:48px;
    }
}
@media (max-width:767px){
    .page-hero__breadcrumb {
    font-size: 14px;
  }
}

@media (max-width: 575px) {
  .page-hero {
    min-height: 200px;
  }

 .page-hero__inner {
        padding: 100px 0 40px;
    }
       .page-hero__title{
        font-size:24px;
        line-height:40px;
    }
}