/* Toan Cau homepage v4 - layout modeled after horizontal editorial strips */
:root{--tc-blue:#1679ad;--tc-dark:#09263f;--tc-orange:#f0a04e;--tc-orange-soft:#fff2e3;--tc-border:#dce6ee}
.site-header .brand-logo,.site-footer .brand-logo{width:44px!important;height:44px!important;max-width:44px!important;max-height:44px!important;object-fit:contain!important;display:block!important;flex:0 0 44px!important}
.site-header .nav-wrap{height:74px}
.hero-slides,.hero-content{min-height:clamp(360px,35vw,500px)!important}
/* Preserve the banner image URL rendered by index.php. */
.hero-slide{background-color:#09263f}
.hero-overlay{display:none!important}
.hero h1{font-size:clamp(30px,4.2vw,56px)!important}
.section-partners,.section-projects,.section-services{padding:46px 0!important}
.section-partners{background:#f7fafc}
.section-services{background:#f7fafc;padding-bottom:66px!important}
.section-title{font-size:clamp(24px,3vw,36px)!important}
.section-head{margin-bottom:18px!important}
.horizontal-track{display:flex!important;flex-flow:row nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;gap:16px!important;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:3px 1px 14px}
.horizontal-track::-webkit-scrollbar{display:none}
.horizontal-track > *{flex-shrink:0!important;scroll-snap-align:start;min-width:0}
.partner-tile{flex:0 0 calc((100% - 5 * 16px) / 6)!important;width:calc((100% - 5 * 16px) / 6)!important;height:108px!important;border:1px solid var(--tc-border)!important;background:white!important;display:flex!important;align-items:center;justify-content:center;overflow:hidden;border-radius:8px!important;padding:13px!important}
.partner-tile a{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.partner-tile img{display:block!important;max-height:72px!important;max-width:100%!important;width:auto!important;height:auto!important;object-fit:contain!important;filter:none!important;opacity:1!important}
.project-track .project-slide{flex:0 0 calc((100% - 2 * 16px)/3)!important;width:calc((100% - 2 * 16px)/3)!important;display:block;height:auto!important;overflow:hidden;border-radius:9px!important}
.project-slide .card-media{aspect-ratio:16/10;overflow:hidden}
.project-slide .card-media img{width:100%;height:100%;object-fit:cover}
.project-slide .card-body{padding:16px 18px!important;min-height:140px!important}
.project-slide h3{font-size:17px;line-height:1.4}
.service-track .service-tile{flex:0 0 calc((100% - 3 * 16px)/4)!important;width:calc((100% - 3 * 16px)/4)!important;min-height:124px!important;display:flex!important;align-items:center;justify-content:center;text-align:center;padding:22px!important;border:1px solid var(--tc-border)!important;border-radius:9px!important;background:white!important}
.service-tile strong{font-size:17px;line-height:1.5;color:var(--tc-dark)}
.service-accent{display:none!important}
.slider-controls{display:flex;justify-content:flex-end;gap:9px!important;align-items:center}
.project-controls{margin-top:-52px;margin-bottom:21px;position:relative;z-index:2;pointer-events:none}
.project-controls button{pointer-events:auto}
.slider-arrow{display:grid!important;place-items:center;width:40px!important;height:40px!important;border:1px solid #cbd8e3!important;border-radius:7px!important;background:white!important;color:var(--tc-blue)!important;font-size:27px!important;line-height:1!important;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.slider-arrow:hover:not(:disabled),.partner-tile:hover,.service-tile:hover,.project-slide:hover{background:var(--tc-orange-soft)!important;border-color:var(--tc-orange)!important}
.slider-arrow:disabled{opacity:.35!important;cursor:not-allowed}
.btn,.card,.partner-tile,.service-tile{border-radius:9px!important}
.btn-primary{background:var(--tc-blue)!important}
.btn-primary:hover{background:#eaa151!important;color:#102d47!important}
.main-nav a:hover,.main-nav a.active{color:var(--tc-blue)!important}
@media(max-width:980px){.partner-tile{flex-basis:calc((100% - 2 * 16px)/3)!important;width:calc((100% - 2 * 16px)/3)!important}.project-track .project-slide{flex-basis:calc((100% - 16px)/2)!important;width:calc((100% - 16px)/2)!important}.service-track .service-tile{flex-basis:calc((100% - 16px)/2)!important;width:calc((100% - 16px)/2)!important}.project-controls{margin-top:0;margin-bottom:15px}.site-header .nav-wrap{height:68px}}
@media(max-width:640px){.section-partners,.section-projects,.section-services{padding:34px 0!important}.section-head{align-items:center!important}.section-head .btn{font-size:11px!important;padding:9px!important}.section-title{font-size:24px!important}.horizontal-track{gap:12px!important}.partner-tile{flex-basis:calc((100% - 12px)/2)!important;width:calc((100% - 12px)/2)!important;height:90px!important}.project-track .project-slide{flex-basis:86%!important;width:86%!important}.service-track .service-tile{flex-basis:80%!important;width:80%!important;min-height:104px!important}.service-tile strong{font-size:15px}.hero-slides,.hero-content{min-height:390px!important}.slider-arrow{width:36px!important;height:36px!important}.site-header .brand-logo,.site-footer .brand-logo{width:40px!important;height:40px!important;max-width:40px!important;max-height:40px!important;flex-basis:40px!important}}
@media(max-width:380px){.partner-tile{flex-basis:80%!important;width:80%!important}}
@media(prefers-reduced-motion:reduce){.horizontal-track{scroll-behavior:auto}}

/* V4.1 — product carousel follows services */
.section-products{padding:46px 0 66px!important;background:#fff}
.section-products .section-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.product-track .product-slide{flex:0 0 calc((100% - 3 * 16px)/4)!important;width:calc((100% - 3 * 16px)/4)!important;display:block;overflow:hidden;border:1px solid var(--tc-border)!important;border-radius:9px!important;background:white;text-decoration:none}
.product-slide .card-media{aspect-ratio:4/3;overflow:hidden;background:#f5f8fa}
.product-slide .card-media img{width:100%;height:100%;object-fit:cover}
.product-slide .card-body{padding:16px!important}
.product-slide .card-body h3{color:var(--tc-dark);font-size:17px;line-height:1.4;margin:0 0 10px}
.product-slide:hover{background:var(--tc-orange-soft)!important;border-color:var(--tc-orange)!important}
@media(max-width:980px){.product-track .product-slide{flex-basis:calc((100% - 16px)/2)!important;width:calc((100% - 16px)/2)!important}}
@media(max-width:640px){.section-products{padding:34px 0 46px!important}.section-products .section-head{align-items:flex-start!important;gap:10px}.section-products .section-actions{gap:8px}.product-track .product-slide{flex-basis:80%!important;width:80%!important}.product-slide .card-body h3{font-size:16px}}

/* V4 FINAL — concrete layout spec, loaded after app.css */
.section-partners{padding:18px 0!important;background:#f4f4f4!important}
.edge-carousel{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:10px;align-items:center;width:100%}
.edge-carousel > .horizontal-track{min-width:0;margin:0;padding:3px 0!important;gap:8px!important}
.edge-carousel > .slider-arrow{background:#1748bf!important;color:white!important;border:0!important;border-radius:0!important;width:36px!important;height:36px!important;min-width:36px!important}
.edge-carousel > .slider-arrow:hover:not(:disabled){background:#f1a04d!important;color:#09263f!important}
.partner-track .partner-tile{box-sizing:border-box;flex:0 0 calc((100% - 10 * 8px)/11)!important;width:calc((100% - 10 * 8px)/11)!important;height:96px!important;background:#fff!important;border:0!important;border-radius:2px!important;padding:6px!important}
.partner-track .partner-tile img{max-height:70px!important;width:100%!important;max-width:100%!important;object-fit:contain!important}
.section-projects{background:white!important}
.project-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;overflow:visible!important}
.project-grid .project-slide{width:auto!important;min-width:0!important;display:block!important;overflow:hidden;border-radius:6px!important}
.project-grid .project-slide .card-body{min-height:128px!important}
.section-services{background:#f4f4f4!important;padding:40px 0 50px!important}
.service-track .service-tile{box-sizing:border-box;flex:0 0 calc((100% - 2 * 12px)/3)!important;width:calc((100% - 2 * 12px)/3)!important;min-height:130px!important;border-radius:4px!important;border:1px solid #e2e6ea!important;background:#fff!important}
.service-carousel > .horizontal-track{gap:12px!important}
.service-tile:hover{background:#fff1e1!important;border-color:#ef9f49!important}
.section-products .section-kicker{display:none}
.section-products .product-slide{display:flex!important;align-items:center;flex-direction:row;min-height:146px;border:1px solid #d5dfeb!important;border-radius:3px!important}
.section-products .product-slide .card-media{flex:0 0 48%;width:48%;height:144px;aspect-ratio:auto!important;background:white}
.section-products .product-slide .card-media img{width:100%;height:100%;object-fit:contain!important;padding:7px;box-sizing:border-box}
.section-products .product-slide .card-body{flex:1;min-width:0;padding:10px!important}
.section-products .product-slide h3{font-size:14px!important;margin:0!important;line-height:1.45!important;color:#1748a9!important}
@media(max-width:1200px){.partner-track .partner-tile{flex-basis:calc((100% - 7 * 8px)/8)!important;width:calc((100% - 7 * 8px)/8)!important}}
@media(max-width:980px){.partner-track .partner-tile{flex-basis:calc((100% - 4 * 8px)/5)!important;width:calc((100% - 4 * 8px)/5)!important}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.service-track .service-tile{flex-basis:calc((100% - 12px)/2)!important;width:calc((100% - 12px)/2)!important}}
@media(max-width:640px){.edge-carousel{grid-template-columns:30px minmax(0,1fr) 30px;gap:5px}.edge-carousel > .slider-arrow{width:30px!important;min-width:30px!important;height:34px!important;font-size:24px!important}.partner-track .partner-tile{flex-basis:calc((100% - 2 * 8px)/3)!important;width:calc((100% - 2 * 8px)/3)!important;height:78px!important;padding:4px!important}.partner-track .partner-tile img{max-height:56px!important}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.project-grid .project-slide .card-body{padding:10px!important;min-height:120px!important}.project-grid .project-slide h3{font-size:14px}.service-track .service-tile{flex-basis:100%!important;width:100%!important;min-height:110px!important;padding:14px!important}.section-products .product-slide{flex-basis:90%!important;width:90%!important;min-height:128px}.section-products .product-slide .card-media{height:126px}}
@media(max-width:380px){.partner-track .partner-tile{flex-basis:calc((100% - 8px)/2)!important;width:calc((100% - 8px)/2)!important}.project-grid{grid-template-columns:1fr}}

/* V4 polish: typography, brand scale and matching hover */
.site-header .nav-wrap{min-height:76px;height:auto!important;padding-top:8px;padding-bottom:8px}
.site-header .brand-logo{width:60px!important;height:60px!important;max-width:60px!important;max-height:60px!important;flex:0 0 60px!important;object-fit:contain!important}
.site-footer .brand-logo{width:66px!important;height:66px!important;max-width:66px!important;max-height:66px!important;flex:0 0 66px!important;object-fit:contain!important}
.service-track .service-tile strong{font-size:19px!important;line-height:1.45!important}
.section-products .product-slide:hover,.section-products .product-slide:focus-visible{background:var(--tc-orange-soft,#fff2e3)!important;border-color:var(--tc-orange,#f0a04e)!important;box-shadow:0 8px 22px rgba(240,160,78,.13)!important}
.section-products .product-slide:hover h3,.section-products .product-slide:focus-visible h3{color:#ae520e!important}
.project-grid .project-slide{cursor:pointer}
@media(max-width:980px){.site-header .nav-wrap{min-height:68px;height:auto!important;padding-top:6px;padding-bottom:6px}.site-header .brand-logo{width:50px!important;height:50px!important;max-width:50px!important;max-height:50px!important;flex:0 0 50px!important}.site-footer .brand-logo{width:60px!important;height:60px!important;max-width:60px!important;max-height:60px!important;flex:0 0 60px!important}}
@media(max-width:640px){.site-header .nav-wrap{min-height:64px}.site-header .brand-logo{width:45px!important;height:45px!important;max-width:45px!important;max-height:45px!important;flex:0 0 45px!important}.site-footer .brand-logo{width:54px!important;height:54px!important;max-width:54px!important;max-height:54px!important;flex:0 0 54px!important}.service-track .service-tile strong{font-size:17px!important}}

/* Keep the approved product-hover border fix: cards lift 5px on hover. */
.section-products #products-track.product-track {
    padding-top: 10px !important;
}

/* V4 compact hero — 2026-10-23.
   Reserve room for the partner strip on normal laptop/desktop viewports.
   The grid grows to fit text: do not clip content on small screens or at zoom.
   Do not override the CMS background-image, add an overlay or change widths. */
.hero {
    --tc-hero-height: clamp(330px, calc(100vh - 235px), 410px);
    --tc-hero-height: clamp(330px, calc(100svh - 235px), 410px);
}
.hero .hero-slides {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}
.hero .hero-slides,
.hero .hero-content {
    min-height: var(--tc-hero-height) !important;
}
.hero .hero-slide {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    min-width: 0;
}
.hero .hero-content {
    height: 100%;
    padding-top: 24px;
    padding-bottom: 38px;
}
.hero .hero-copy {
    min-width: 0;
    padding: 0 !important;
}
.hero h1 {
    font-size: clamp(32px, 3.3vw, 46px) !important;
    line-height: 1.12;
    margin: 14px 0 12px;
}
.hero p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}
.hero .eyebrow {
    padding: 6px 12px;
    font-size: 11px;
}
.hero .hero-actions {
    margin-top: 18px;
    gap: 10px;
}
.hero .hero-actions .btn {
    padding: 11px 17px;
    font-size: 13px;
}
.hero .hero-dots {
    bottom: 14px;
}
@media (max-width: 640px) {
    .hero {
        --tc-hero-height: clamp(320px, calc(100vh - 200px), 380px);
        --tc-hero-height: clamp(320px, calc(100svh - 200px), 380px);
    }
    .hero .hero-content {
        padding-top: 22px;
        padding-bottom: 36px;
    }
    .hero h1 {
        font-size: clamp(28px, 7.5vw, 36px) !important;
        margin-top: 12px;
    }
    .hero p {
        font-size: 14px;
    }
    .hero .eyebrow {
        font-size: 10px;
        padding: 6px 10px;
    }
    .hero .hero-actions .btn {
        font-size: 12px;
        padding: 10px 12px;
        min-height: 44px;
    }
}

/* Tăng độ rõ của chữ banner, không phủ tối toàn bộ ảnh. */
.hero .hero-copy {
    position: relative;
    isolation: isolate;
}

/* Nền chỉ nằm phía sau khối nội dung banner. */
.hero .hero-copy::before {
    content: "";
    position: absolute;
    inset: -14px -18px;
    z-index: -1;
    pointer-events: none;

    background: linear-gradient(
        110deg,
        rgba(7, 33, 54, 0.80),
        rgba(7, 33, 54, 0.72)
    );

    border-radius: 8px;
}

/* Giữ tiêu đề, mô tả và nhãn nhỏ rõ trên nền xanh. */
.hero .hero-copy h1,
.hero .hero-copy p,
.hero .hero-copy .eyebrow {
    color: #ffffff !important;
}

/* Thu gọn khoảng nền bao quanh chữ trên điện thoại. */
@media (max-width: 640px) {
    .hero .hero-copy::before {
        inset: -10px -8px;
    }
}