/*
Theme Name: VinaSite Child - Eco Terra Pack
Theme URI: https://baobithanthienmt.com/
Description: Child theme của VinaSite, chứa nội dung riêng cho Công ty TNHH Eco Terra Pack (bao bì thân thiện môi trường). Không sửa theme cha để không mất tuỳ biến khi VinaSite tự cập nhật.
Author: Eco Terra Pack
Template: vinasite
Version: 1.6.2
Text Domain: vinasite-ecoterrapack
*/

/* =========================================================================
   1) SỬA LỖI THANH MENU DÍNH (sticky) ĐÈ LÊN NỘI DUNG
   JS theme cha đo chiều cao thanh menu rồi gán cho phần tử đệm; có lúc phần
   đệm chưa kịp cập nhật nên nội dung trồi lên bị menu che. Đặt sàn chiều cao
   + tắt scroll-anchoring để trình duyệt không tự bù trừ sai vị trí cuộn.
   ========================================================================= */
#vs-header-spacer.is-active {
    min-height: 64px;
}
.vs-header,
.vs-bar,
#vs-header-spacer {
    overflow-anchor: none;
}

/* =========================================================================
   2) BANNER HERO — thiết kế riêng cho Eco Terra Pack
   Không dùng khối .vs-hero mặc định của theme cha (CSS generic, bị 2 file của
   theme đá nhau) mà dựng hệ class riêng .etp-* để kiểm soát hoàn toàn bố cục.
   Vẫn giữ .vs-slider* để script trượt slide có sẵn của theme cha chạy được.

   LƯU Ý ĐỘ ƯU TIÊN: theme cha có các luật kiểu ".vs-scope h1", ".vs-scope p",
   ".vs-scope a" (0,1,1) — mạnh hơn class đơn (0,1,0) nên sẽ đè màu/cỡ chữ của
   hero. Vì vậy MỌI luật bên dưới đều gắn tiền tố ".etp-hero" để thắng về độ
   ưu tiên mà không cần dùng !important.
   ========================================================================= */
.etp-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(90% 120% at 78% 8%, rgba(255, 255, 255, .18), transparent 58%),
        linear-gradient(135deg, var(--vs-primary) 0%, var(--vs-primary-dark) 82%);
}
/* Vệt tối rất nhẹ ở đáy để tách banner khỏi khối nội dung phía dưới */
.etp-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .16));
}
.etp-hero .etp-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.etp-hero .etp-hero__bg svg {
    width: 100%;
    height: 100%;
    display: block;
}
.etp-hero .etp-hero__track {
    position: relative;
    z-index: 1;
}
.etp-hero .etp-hero__slide {
    display: flex;
    align-items: center;
}
.etp-hero .etp-hero__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
    padding-block: clamp(3rem, 5.5vw, 4.75rem) clamp(5rem, 7vw, 6.25rem);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    min-height: clamp(500px, 64vh, 680px);
}

/* --- Cột chữ --- */
.etp-hero .etp-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1.25rem;
    padding: .45rem 1rem .45rem .8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #fff;
}
.etp-hero .etp-hero__rule {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--vs-accent);
    flex: none;
}
.etp-hero .etp-hero__title {
    margin: 0 0 1.15rem;
    color: #fff;
    font-size: clamp(2.05rem, 3.5vw, 3.35rem);
    line-height: 1.08;
    letter-spacing: -.022em;
    font-weight: 800;
    text-wrap: balance;
    max-width: 16ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .18);
}
.etp-hero .etp-hero__lead {
    margin: 0 0 2rem;
    max-width: 50ch;
    font-size: clamp(1rem, 1.05vw, 1.0625rem);
    line-height: 1.75;
    color: rgba(255, 255, 255, .88);
}
.etp-hero .etp-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.15rem;
    margin-bottom: 2rem;
}
.etp-hero .etp-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .95rem 1.65rem;
    border-radius: 999px;
    border: 1.6px solid transparent;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.etp-hero .etp-btn .vs-ico {
    width: 18px;
    height: 18px;
}
.etp-hero .etp-btn--solid {
    background: #fff;
    color: var(--vs-primary-dark);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
}
.etp-hero .etp-btn--solid:hover,
.etp-hero .etp-btn--solid:focus-visible {
    color: var(--vs-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 20px 38px -16px rgba(0, 0, 0, .65);
}
.etp-hero .etp-btn--line {
    border-color: rgba(255, 255, 255, .45);
    color: #fff;
}
.etp-hero .etp-btn--line:hover,
.etp-hero .etp-btn--line:focus-visible {
    background: rgba(255, 255, 255, .14);
    border-color: #fff;
    color: #fff;
}
.etp-hero .etp-hero__tel {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 700;
    font-size: .95rem;
    color: #fff;
    text-decoration: none;
    opacity: .92;
}
.etp-hero .etp-hero__tel:hover {
    color: #fff;
    opacity: 1;
}
.etp-hero .etp-hero__tel .vs-ico {
    width: 18px;
    height: 18px;
    color: var(--vs-accent);
}
.etp-hero .etp-hero__points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem 1.35rem;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
    list-style: none;
    max-width: 46rem;
}
.etp-hero .etp-hero__points li {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .85);
}
.etp-hero .etp-hero__points .vs-ico {
    width: 16px;
    height: 16px;
    color: var(--vs-accent);
    flex: none;
}

/* --- Cột hình minh hoạ --- */
.etp-hero .etp-hero__visual {
    position: relative;
    display: flex;
    justify-content: flex-end;
}
/* Quầng sáng sau tấm thẻ, tạo cảm giác sản phẩm được rọi đèn */
.etp-hero .etp-hero__visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    width: 132%;
    aspect-ratio: 1;
    right: -14%;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .17), transparent 62%);
    pointer-events: none;
}
.etp-hero .etp-hero__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 410px);
    padding: clamp(1.6rem, 2.6vw, 2.25rem);
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07));
    border: 1px solid rgba(255, 255, 255, .26);
    box-shadow: 0 38px 70px -36px rgba(0, 0, 0, .6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.etp-hero .etp-hero__badge {
    position: absolute;
    top: -15px;
    left: clamp(1.6rem, 2.6vw, 2.25rem);
    padding: .45rem .95rem;
    border-radius: 999px;
    background: var(--vs-accent);
    color: #2a1c00;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .01em;
    box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .55);
}
.etp-hero .etp-hero__art {
    display: flex;
    justify-content: center;
    padding: .9rem 0 1.4rem;
}
.etp-hero .etp-hero__art svg {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .28));
}
.etp-hero .etp-hero__panel-foot {
    display: grid;
    gap: .25rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .22);
}
.etp-hero .etp-hero__panel-foot strong {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}
.etp-hero .etp-hero__panel-foot span {
    font-size: .85rem;
    color: rgba(255, 255, 255, .78);
}

/* --- Cụm điều hướng slide (đáy, trong khung container, không đè nội dung) --- */
.etp-hero .etp-hero__controls {
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(1.4rem, 3vw, 2.25rem);
    width: min(1200px, 100%);
    padding-inline: clamp(1rem, 4vw, 2rem);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.etp-hero .etp-hero__nav {
    position: static !important;
    transform: none !important;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .38);
    color: #fff;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.etp-hero .etp-hero__nav:hover {
    background: #fff;
    color: var(--vs-primary-dark);
    border-color: #fff;
}
.etp-hero .etp-hero__nav .vs-ico {
    width: 18px;
    height: 18px;
}
.etp-hero .vs-slider__arrow--prev.etp-hero__nav .vs-ico {
    transform: rotate(180deg);
}
.etp-hero .etp-hero__dots {
    position: static !important;
    display: flex;
    gap: .45rem;
    padding: 0 !important;
    margin-left: .35rem;
}
.etp-hero .etp-hero__dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    background: rgba(255, 255, 255, .38);
    transition: width .25s ease, background .25s ease;
}
.etp-hero .etp-hero__dots button.is-active {
    width: 30px;
    background: var(--vs-accent);
}

/* --- Responsive --- */
@media (max-width: 1100px) {
    .etp-hero .etp-hero__title {
        max-width: 18ch;
    }
    .etp-hero .etp-hero__panel {
        width: min(100%, 360px);
    }
}
@media (max-width: 980px) {
    .etp-hero .etp-hero__inner {
        grid-template-columns: 1fr;
        gap: 2.25rem;
        min-height: 0;
        padding-block: clamp(2.5rem, 7vw, 3.5rem) clamp(4.5rem, 9vw, 5.25rem);
    }
    .etp-hero .etp-hero__visual {
        justify-content: flex-start;
    }
    .etp-hero .etp-hero__visual::before {
        display: none;
    }
    .etp-hero .etp-hero__panel {
        width: min(100%, 420px);
    }
    .etp-hero .etp-hero__title {
        max-width: none;
    }
}
@media (max-width: 640px) {
    .etp-hero .etp-hero__nav {
        display: none;
    }
    .etp-hero .etp-hero__controls {
        justify-content: center;
    }
    .etp-hero .etp-hero__art svg {
        max-width: 215px;
    }
    .etp-hero .etp-hero__points {
        gap: .5rem 1rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .etp-hero .etp-btn,
    .etp-hero .etp-hero__nav,
    .etp-hero .etp-hero__dots button {
        transition: none;
    }
    .etp-hero .etp-hero__track {
        scroll-behavior: auto;
    }
}

/* =========================================================================
   3) DẢI CTA PHÍA TRÊN FOOTER (sitewide)
   ========================================================================= */
.vs-footer-cta {
    background: var(--vs-primary-dark);
    color: #fff;
    padding-block: clamp(1.5rem, 4vw, 2.25rem);
}
.vs-footer-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.vs-footer-cta__text h2 {
    margin: 0 0 .35rem;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
    color: #fff !important;
    text-wrap: balance;
}
.vs-footer-cta__text p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: .95rem;
}
.vs-footer-cta__actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    flex: none;
}
@media (max-width: 640px) {
    .vs-footer-cta__inner { flex-direction: column; align-items: stretch; text-align: center; }
    .vs-footer-cta__actions { justify-content: center; }
    .vs-footer-cta__actions .vs-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .vs-footer-cta .vs-btn { transition: none; }
}

/* =========================================================================
   4) MÀU FOOTER — theme cha hardcode nâu cà phê (#241206) không khớp logo xanh
   ========================================================================= */
.vs-footer {
    background: var(--vs-primary-dark) !important;
    color: rgba(255, 255, 255, .78) !important;
}
.vs-footer a {
    color: rgba(255, 255, 255, .78) !important;
}
.vs-footer a:hover,
.vs-footer a:focus-visible {
    color: #fff !important;
}
.vs-footer__map {
    border-color: rgba(255, 255, 255, .55) !important;
    color: #fff !important;
}
.vs-footer__map:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
}

/* =========================================================================
   5) KHỐI CÂU HỎI THƯỜNG GẶP — icon màu riêng cho từng câu hỏi
   Dùng lại đúng cấu trúc .vs-faq__ico / .vs-faq__qtext của theme cha (chip
   bo góc + icon SVG trắng), chỉ đổi nền chip theo từng tông màu và xử lý
   phần mũi tên cho thẻ <details> (theme cha viết cho accordion bằng <button>
   nên luật xoay mũi tên dựa vào aria-expanded không áp dụng được).
   ========================================================================= */
.vs-faq__item > summary.vs-faq__q {
    list-style: none;               /* Firefox: bỏ tam giác mặc định */
}
.vs-faq__item > summary.vs-faq__q::-webkit-details-marker {
    display: none;                  /* Safari/Chrome cũ */
}
.vs-faq__item[open] > .vs-faq__q > .vs-ico {
    transform: rotate(180deg);
}
.vs-faq .vs-faq__a p {
    margin: 0;
    padding-bottom: 1.2rem;
}
@media (min-width: 560px) {
    .vs-faq .vs-faq__a {
        padding-left: 4.2rem;       /* thẳng hàng với chữ câu hỏi, không thụt dưới icon */
    }
}

/* Sáu tông màu, dùng luân phiên theo thứ tự câu hỏi */
.etp-faq--t1 .vs-faq__ico { background: linear-gradient(135deg, #17B85C 0%, #0B6E38 100%); box-shadow: 0 3px 8px rgba(11, 110, 56, .3); }
.etp-faq--t2 .vs-faq__ico { background: linear-gradient(135deg, #F2B705 0%, #B97F12 100%); box-shadow: 0 3px 8px rgba(185, 127, 18, .3); }
.etp-faq--t3 .vs-faq__ico { background: linear-gradient(135deg, #19B0B0 0%, #0C6E70 100%); box-shadow: 0 3px 8px rgba(12, 110, 112, .3); }
.etp-faq--t4 .vs-faq__ico { background: linear-gradient(135deg, #8B6BE0 0%, #5B3CC4 100%); box-shadow: 0 3px 8px rgba(91, 60, 196, .3); }
.etp-faq--t5 .vs-faq__ico { background: linear-gradient(135deg, #F5903F 0%, #C2560F 100%); box-shadow: 0 3px 8px rgba(194, 86, 15, .3); }
.etp-faq--t6 .vs-faq__ico { background: linear-gradient(135deg, #4A90E2 0%, #1D5FB0 100%); box-shadow: 0 3px 8px rgba(29, 95, 176, .3); }

/* Khi mở, viền thẻ ăn theo màu icon để khối câu hỏi không bị rời rạc */
.etp-faq--t1[open] { border-color: #17B85C; }
.etp-faq--t2[open] { border-color: #F2B705; }
.etp-faq--t3[open] { border-color: #19B0B0; }
.etp-faq--t4[open] { border-color: #8B6BE0; }
.etp-faq--t5[open] { border-color: #F5903F; }
.etp-faq--t6[open] { border-color: #4A90E2; }

/* =========================================================================
   6) KHỐI "PHỤC VỤ ĐA DẠNG NGÀNH NGHỀ"
   Theme cha cho card .vs-feature nền trắng + chip icon vàng giống hệt nhau,
   card lại chỉ có tiêu đề nên chiều cao hàng bị kéo theo card dài nhất, thừa
   khoảng trắng ở đáy. Ở đây: thêm dòng mô tả (trong PHP), chip icon đổ màu
   riêng từng ngành và gạch màu chạy ngang mép trên khi rê chuột.
   ========================================================================= */
.etp-ind {
    gap: clamp(1rem, 2vw, 1.4rem);
}
.etp-ind__card {
    position: relative;
    overflow: hidden;
    padding: 1.75rem;
    gap: .85rem;
    border-radius: var(--vs-radius-md);
}
/* Gạch màu mép trên, chỉ hiện khi rê chuột / focus */
.etp-ind__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--_tone, var(--vs-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.etp-ind__card:hover::before,
.etp-ind__card:focus-within::before {
    transform: scaleX(1);
}
.etp-ind__card .vs-ico-chip {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--_chip, var(--vs-bg-soft));
    color: #fff;
    box-shadow: 0 4px 12px -4px var(--_shadow, rgba(0, 0, 0, .25));
    transition: transform .2s ease;
}
.etp-ind__card:hover .vs-ico-chip {
    transform: translateY(-2px) scale(1.04);
}
.etp-ind__card .vs-feature__title {
    font-size: 1.08rem;
    text-wrap: balance;
}
.etp-ind__card .vs-feature__desc {
    font-size: .9rem;
    line-height: 1.65;
}

/* Sáu tông màu — trùng bảng màu đã dùng ở khối Câu hỏi thường gặp */
.etp-ind--t1 { --_tone: #0B6E38; --_chip: linear-gradient(135deg, #17B85C 0%, #0B6E38 100%); --_shadow: rgba(11, 110, 56, .45); }
.etp-ind--t2 { --_tone: #B97F12; --_chip: linear-gradient(135deg, #F2B705 0%, #B97F12 100%); --_shadow: rgba(185, 127, 18, .45); }
.etp-ind--t3 { --_tone: #0C6E70; --_chip: linear-gradient(135deg, #19B0B0 0%, #0C6E70 100%); --_shadow: rgba(12, 110, 112, .45); }
.etp-ind--t4 { --_tone: #5B3CC4; --_chip: linear-gradient(135deg, #8B6BE0 0%, #5B3CC4 100%); --_shadow: rgba(91, 60, 196, .45); }
.etp-ind--t5 { --_tone: #C2560F; --_chip: linear-gradient(135deg, #F5903F 0%, #C2560F 100%); --_shadow: rgba(194, 86, 15, .45); }
.etp-ind--t6 { --_tone: #1D5FB0; --_chip: linear-gradient(135deg, #4A90E2 0%, #1D5FB0 100%); --_shadow: rgba(29, 95, 176, .45); }

@media (prefers-reduced-motion: reduce) {
    .etp-ind__card::before,
    .etp-ind__card .vs-ico-chip {
        transition: none;
    }
}

/* =========================================================================
   7) NÚT LIÊN HỆ NỔI (plugin VinaSite Call Button)
   Theme cha ẩn ảnh gốc của plugin rồi vẽ lại từng nút bằng mặt nạ CSS, chọn
   hình theo dạng link: tel: / mailto: / facebook / zalo. KHÔNG có luật cho
   link bản đồ nên biến --dg rỗng, mặt nạ hỏng và nút hiện ra một ô vuông
   trắng. Dưới đây: (a) trả lại đúng logo Zalo thay cho chữ "Zalo", (b) bổ
   sung hình cho nút bản đồ để không còn ô trắng nếu bật lại.
   ========================================================================= */

/* --- Zalo: dùng đúng logo Zalo do plugin cung cấp --- */
.box-support a[href*="zalo"] {
    background: #035ADA !important;              /* trùng nền tròn của logo, tránh hở viền */
    border-color: rgba(255, 255, 255, .5) !important;
}
.box-support a[href*="zalo"]::before {
    content: none !important;                    /* bỏ chữ "Zalo" của theme cha */
}
.box-support a[href*="zalo"] img {
    display: block !important;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.box-support a[href*="zalo"]::after {
    border-color: #5FA0FF;                       /* vòng sáng lan toả theo màu Zalo */
}

/* --- Bản đồ: vá hình bị thiếu ở theme cha (ghim địa điểm) --- */
.box-support a[href*="google.com/maps"],
.box-support a[href*="goo.gl/maps"],
.box-support a[href*="maps.app.goo.gl"] {
    --dg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* --- Email: Cloudflare (Email Obfuscation) đổi href mailto: thành
   /cdn-cgi/l/email-protection# rồi mới khôi phục lại bằng JS. Trong khoảng
   thời gian đó — hoặc khi script của Cloudflare không chạy — luật
   a[href^="mailto:"] của theme cha không khớp và nút cũng thành ô trắng.
   Bắt thêm cả dạng link đã mã hoá cho chắc. --- */
.box-support a[href*="email-protection"] {
    --dg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}