/* =========================================================================
   NgoiSaoXanh — Trang chủ
   ========================================================================= */

/* ============================ HERO SLIDER ==============================
   Chỉ ảnh (mockup Document\Header_Abouts.jpg). Header nằm đè phía trên (nền mờ 0.2) nên chiều cao đã gồm cả header.
   Lớp tối mỏng ở mép trên (menu dễ đọc) và mép dưới (dải lĩnh vực + nút điều khiển dễ nhìn).
   Từ 1024px dải lĩnh vực cao --strip-h và đè lên mép dưới slideshow đúng một nửa (--strip-h / 2). */
.hero-slider {
    position: relative;
    overflow: hidden;
    background: var(--bg-3);
    isolation: isolate;
}
/* Dưới 1024px: ảnh slideshow có chữ in sẵn nên giữ đúng tỷ lệ ảnh như trên máy tính (2:1), không cắt.
   Khung nằm ngay dưới header (padding-top) để header không che chữ; ảnh khác tỷ lệ thì hiện trọn (contain). */
@media (max-width: 1023.98px) {
    .hero-slider { box-sizing: border-box; height: calc(50vw + var(--header-h)); padding-top: var(--header-h); }
    .hero-slider::before { display: none; }
    .hero-slider::after { height: 40%; }
}
@media (min-width: 1024px) {
    :root { --strip-h: 96px; }
    .hero-slider { height: 90vh; min-height: 520px; max-height: 780px; }
}

.hero-slider::before,
.hero-slider::after {
    content: "";
    position: absolute; left: 0; right: 0;
    z-index: 2;
    pointer-events: none;
}
.hero-slider::before { top: 0; height: 180px; background: linear-gradient(180deg, rgba(2, 15, 11, .45) 0%, rgba(2, 15, 11, 0) 100%); }
.hero-slider::after { bottom: 0; height: 160px; background: linear-gradient(0deg, rgba(8, 51, 36, .7) 0%, rgba(8, 51, 36, 0) 100%); }


.hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { height: 100%; }
.hero-swiper .swiper-slide {overflow: hidden;background: var(--bg-3);}
.hero-img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023.98px) {
    .hero-img { object-fit: contain; }
}

/* Zoom chậm kiểu điện ảnh trên ảnh đang hiện */
.js .hero-swiper .swiper-slide .hero-img { transform: scale(1.06); transition: transform 7s linear; }
.js .hero-swiper .swiper-slide-active .hero-img { transform: scale(1); }

.hero-empty { position: absolute; inset: 0; }

/* ---- Điều khiển: nút ← ⏸ → ở góc phải dưới (từ 1024px nằm trên dải lĩnh vực đang đè lên mép dưới) ---- */
.hero-controls {
    position: absolute;
    left: 0; right: 0;
    bottom: var(--sp-3);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-4);
    pointer-events: none;
}
.hero-controls > * { pointer-events: auto; }
@media (min-width: 1024px) {
    .hero-controls { bottom: calc(var(--strip-h) / 2 + var(--sp-4)); }
}
.hero-counter { display: flex; align-items: center; gap: var(--sp-4); }
.hero-pagination.swiper-pagination-fraction {
    position: static;
    width: auto;
    color: var(--muted);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    letter-spacing: .08em;
}
.hero-pagination .swiper-pagination-current { color: var(--accent); font-weight: var(--fw-semibold); }
.hero-progress { position: relative; display: block; width: clamp(64px, 12vw, 160px); height: 1px; background: var(--border-strong); overflow: hidden; }
.hero-progress > span { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--progress, 0)); }

.hero-nav { display: flex; align-items: center; gap: var(--sp-2); }
.hero-nav .btn-circle { width: 36px; height: 36px; background: rgba(2, 15, 11, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-nav .btn-circle:hover { background: var(--text); border-color: var(--text); color: var(--bg-0); }
.hero-pause .icon-play { display: none; }
.hero-pause[aria-pressed="true"] .icon-play { display: block; }
.hero-pause[aria-pressed="true"] .icon-pause { display: none; }

@media (max-width: 575.98px) {
    .hero-progress { display: none; }
    .hero-nav .btn-circle { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    .js .hero-swiper .swiper-slide .hero-img { transform: none; transition: none; }
}

/* ============================ DẢI LĨNH VỰC =============================
   Mockup Document\Header_Abouts.jpg: card kính mờ, mỗi mục = icon trong vòng tròn trắng + số 01 + tiêu đề in hoa + 1 dòng phụ.
   Mobile: card nằm ngay dưới slideshow, lưới 2 cột kẻ ô (mục lẻ cuối cùng chiếm cả hàng).
   Từ 1024px: 1 hàng, vạch dọc ngắn giữa các mục; card cao cố định --strip-h và đè lên slideshow đúng nửa chiều cao.
   Mobile: nền section = nền khối Giới thiệu ngay sau để liền mạch. Từ 1024px section không nền, margin-bottom âm nửa card
   để khối Giới thiệu kéo lên sát mép dưới slideshow (không còn dải trống dưới card).
   Markup: Views/Default/_HomeServices.cshtml (--count = số mục). */
.home-services { position: relative; z-index: 3; background: var(--bg-1); padding-top: var(--sp-4); }

.service-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
    border: 1px solid var(--cream-line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    box-shadow: var(--shadow);
}
.service-item { position: relative; border-bottom: 1px solid var(--cream-2); }
.service-item:nth-child(odd) { border-right: 1px solid var(--cream-2); }
.service-item:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
/* bỏ vạch dưới của hàng cuối */
.service-item:last-child,
.service-item:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

.service-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: 100%;
    padding: var(--sp-3);
    color: inherit;
    text-decoration: none;
}
.service-icon-wrap {
    flex: none;
    display: grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--cream-2);
}
.service-icon { width: 22px; height: 22px; object-fit: contain; }
/* icon .svg/.png: tô màu trắng trên vòng tròn --surface bằng mask, không phụ thuộc màu gốc của file */
.service-icon-mask {
    background-color: var(--text);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.service-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.service-num { color: var(--cream-ink-2); font-size: var(--fs-xs); line-height: 1; font-variant-numeric: tabular-nums; }
.service-title {
    color: var(--cream-ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    text-transform: uppercase;
}
.service-sub { color: var(--cream-ink-2); font-size: var(--fs-xs); line-height: 1.4; }
/* từ 1024px card cao cố định: tiêu đề tối đa 2 dòng, dòng phụ 1 dòng (dài thì "…") */
@media (min-width: 1024px) {
    .service-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .service-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
a.service-link:hover .service-icon-wrap,
a.service-link:focus-visible .service-icon-wrap { box-shadow: 0 0 0 3px var(--cream-line); }
a.service-link:hover .service-title { color: var(--surface); }
a.service-link:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }

@media (min-width: 1024px) {
    /* nửa dưới của card không chiếm chỗ: khối Giới thiệu kéo lên sát mép dưới slideshow, nền của nó nằm sau card */
    .home-services { padding-top: 0; background: none; margin-bottom: calc(var(--strip-h) / -2); }
    .service-strip {
        grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr));
        height: var(--strip-h);
        margin-top: calc(var(--strip-h) / -2);
    }
    .service-item, .service-item:nth-child(odd) { border: 0; }
    .service-item:last-child:nth-child(odd) { grid-column: auto; }
    .service-item + .service-item::before {
        content: "";
        position: absolute; left: 0; top: 25%; bottom: 25%;
        width: 1px;
        background: var(--cream-2);
    }
    .service-link { gap: var(--sp-3); padding: 0 var(--sp-4); }
    .service-icon-wrap { width: 52px; height: 52px; }
    .service-icon { width: 28px; height: 28px; }
    .service-title { font-size: var(--fs-sm); }
    .service-sub { font-size: var(--fs-sm); }
}

/* ============================ GIỚI THIỆU ===============================
   Mockup Document\Header_Abouts.jpg: trái = nhãn + tiêu đề in hoa + đoạn văn + nút trắng + hàng số liệu ngăn bằng vạch dọc;
   phải = 1 ảnh lớn + 2 ảnh nhỏ xếp dọc. Những chỗ mockup tô vàng cam (nhãn, cụm nhấn, nút) dùng màu trắng theo yêu cầu khách.
   Markup: Views/Default/_HomeAbout.cshtml. Ghép từ .section .split .eyebrow .btn .media; ở đây chỉ phần riêng. */
.home-about {
    background: url(/Contents/Design/bg-about-us.jpg);background-size:cover;
}
.home-about-split { --gap: var(--sp-8); }
.home-about .eyebrow { margin-bottom: var(--sp-3); color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.home-about .hl { color: var(--accent); }

.home-about-title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
}
.home-about-desc { max-width: 52ch; margin: 0 0 var(--sp-5); color: var(--text-2); }

/* Hàng số liệu "10+ / Năm kinh nghiệm": mobile 2 cột, từ 576px theo số mục (tối đa 4) */
.about-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) 0;
    margin: var(--sp-8) 0 0;
}
.about-stat { position: relative; padding: 0 var(--sp-3); }
.about-stat:nth-child(odd) { padding-left: 0; }
.about-stat:nth-child(even)::before {
    content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
    width: 1px; background: var(--border-strong);
}
.about-stat-num { color: var(--accent); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.about-stat-label { margin: var(--sp-1) 0 0; color: var(--text-2); font-size: var(--fs-xs); line-height: 1.4; }

@media (min-width: 576px) {
    .about-stats { grid-template-columns: repeat(var(--count, 4), minmax(0, 1fr)); }
    .about-stat, .about-stat:nth-child(odd) { padding: 0 var(--sp-4); }
    .about-stat:first-child { padding-left: 0; }
    .about-stat:nth-child(even)::before { display: none; }
    .about-stat + .about-stat::before {
        content: ""; position: absolute; left: 0; top: 10%; bottom: 10%;
        width: 1px; background: var(--border-strong); display: block;
    }
}

/* Ảnh: about-gallery-N = số ảnh. 3 ảnh: lớn bên trái (chiếm 2 hàng) + 2 nhỏ bên phải; 2 ảnh: hai cột; 1 ảnh: một khung 3:2 */
.about-gallery { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.about-gallery .media { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.about-gallery-0 .about-gallery-main,
.about-gallery-1 .media { aspect-ratio: 3 / 2; }
.about-gallery-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-gallery-2 .media { aspect-ratio: 4 / 5; }
.about-gallery-3 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.about-gallery-3 .about-gallery-main { grid-row: 1 / span 2; min-height: 280px; }
.about-gallery-3 .about-gallery-item { aspect-ratio: 5 / 4; }

@media (min-width: 1024px) {
    .home-about { padding-top: calc(var(--strip-h) / 2 + var(--sp-12)); }
    .home-about-split { --gap: var(--sp-10); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .about-gallery { gap: var(--sp-4); }
}

/* ========================= NĂNG LỰC & CAM KẾT ==========================
   Mockup Document\nang-luc-va-cam-ket.jpg, card màu trắng kem (--cream) theo yêu cầu khách:
   "01" + tiêu đề in hoa trên cùng, ảnh 16:9 ở giữa (thẳng hàng giữa các card), mô tả dưới cùng.
   Dưới 1024px: .scroller hiện 2 card, vuốt ngang; từ 1024px: 4 cột.
   Markup: Views/Default/_HomeCapabilities.cshtml. Ghép từ .section-head .scroller .media .ratio-16x9 .zoom. */
.home-capabilities .section-head { margin-bottom: var(--sp-6); }
.home-capabilities .section-title { margin-bottom: 0; text-align: center; }

.capability-list {
    --item: calc((100% - var(--sp-4)) / 2);
    margin-block: 0;
    padding-left: var(--gutter);
    list-style: none;
}
.capability {
    position: relative;
    display: flex; flex-direction: column; gap: var(--sp-3);
    min-width: 0;
    padding: var(--sp-3);
    border: 1px solid var(--cream-line);
    border-radius: var(--radius-lg);
    background: var(--cream);
    color: var(--cream-ink-2);
    box-shadow: var(--shadow);
    transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.capability:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
/* mobile: tiêu đề cao tối thiểu 2 dòng -> ảnh các card thẳng hàng dù tiêu đề dài ngắn khác nhau */
.capability-head { display: flex; align-items: flex-start; gap: var(--sp-2); min-height: calc(2 * 1.35em); }
.capability-num {
    flex: none;
    color: var(--surface);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
}
.capability-title {
    margin: 0;
    color: var(--cream-ink);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    text-transform: uppercase;
}
.capability-title a { color: inherit; text-decoration: none; }
.capability:hover .capability-title a { color: var(--surface); }
.capability-media { border-radius: var(--radius); }
.capability-text { margin: 0; color: var(--cream-ink-2); font-size: var(--fs-xs); line-height: 1.6; }
.capability .stretched-link:focus-visible { outline: none; }
.capability:focus-within { box-shadow: var(--shadow), var(--focus-ring); }

@media (min-width: 1024px) {
    .capability-list { padding-left: 0; }
    .capability { padding: var(--sp-4); }
    .capability-head { min-height: 0; }   /* đủ rộng, tiêu đề thường 1 dòng */
    .capability-num, .capability-title { font-size: var(--fs-sm); }
    .capability-text { font-size: var(--fs-sm); }
}

/* ============================ SẢN PHẨM =================================
   Mockup Document\san-pham.jpg (đổi sang tone tối): thanh tab thể loại con + lưới card sản phẩm (2 cột mobile, 4 cột từ 1024px).
   Markup: Views/Default/_HomeProducts.cshtml. Ghép từ .section-head-split .tabs .tabs-bar .grid .card .media .ratio-4x3 .zoom .btn-circle. */
.home-products{background:var(--bg-1) }
.home-products .section-head { margin-bottom: var(--sp-5); }
.home-products .section-title { margin-bottom: 0; }
.home-products .tabs-bar { margin-bottom: var(--sp-5); }
.home-products .empty { padding: var(--sp-8) var(--sp-4); margin: 0; font-size: var(--fs-sm); }

/* .product-card đã chuyển sang nsx/components.css (dùng chung với trang danh sách/chi tiết sản phẩm) */

/* ============================ DỰ ÁN NỔI BẬT ============================
   Tiêu đề + mô tả thể loại, rồi hàng card bài viết trượt ngang: mobile ~1 card (thấy mép card kế), tablet 2, từ 1024px 3 card.
   Markup: Views/Default/_HomeProjects.cshtml; trượt bằng Swiper 11: Contents/JS/nsx/home-projects.js.
   Ghép từ .section-head-split .swiper .card .media .ratio-3x2 .zoom .link-arrow .btn-circle. */
.home-projects{background:url(/Contents/Design/bg-project.jpg) no-repeat right;background-size:cover;}
.home-projects .section-head { margin-bottom: var(--sp-6); }
.home-projects .section-title { margin-bottom: var(--sp-2); }
.home-projects .section-desc { margin-block: 0; color: var(--text-2); }

/* .project-list chứa Swiper (.project-swiper) và 2 nút ← → nằm đè hai bên. --item = bề rộng 1 card:
   dùng cho bố cục TRƯỚC khi Swiper khởi tạo (khớp slidesPerView/spaceBetween trong home-projects.js) để trang không giật khi JS chạy. */
.project-list { position: relative; --item: calc((100% - var(--sp-4) * .2) / 1.2); }
.project-swiper:not(.swiper-initialized) .swiper-slide { width: var(--item); margin-right: var(--sp-4); }
/* height:auto -> các card cao bằng nhau; display:flex -> trả lại bố cục cột của .card (CSS Swiper đặt .swiper-slide là block) */
.project-swiper .swiper-slide { display: flex; height: auto; }

.project-nav {
    position: absolute; top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    background: var(--panel);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.project-nav-prev { left: var(--sp-2); }
.project-nav-next { right: var(--sp-2); }
.project-nav.swiper-button-disabled { opacity: .35; pointer-events: none; }
/* chưa có JS hoặc không có gì để trượt: ẩn nút */
.project-swiper:not(.swiper-initialized) ~ .project-nav,
.project-nav.swiper-button-lock { display: none; }

.project-card .card-body { padding: var(--sp-4); }
.project-card .card-title { font-size: var(--fs-base); }
.project-card .card-footer { padding-top: var(--sp-2); }

@media (min-width: 768px) {
    .project-list { --item: calc((100% - var(--sp-4)) / 2); }
}
@media (min-width: 1024px) {
    .project-list { --item: calc((100% - var(--sp-4) * 2) / 3); }
    .project-card .card-title { font-size: var(--fs-h4); }
}

/* ========================= ĐÁNH GIÁ KHÁCH HÀNG =========================
   Tiêu đề + hàng card nhận xét trượt ngang (dùng lại khung .project-list/.project-swiper/.project-nav của khối Dự án).
   Card: dấu ngoặc kép xanh, lời nhận xét (tối đa 6 dòng), dưới cùng ảnh đại diện tròn + họ tên + thông tin khách.
   Markup: Views/Default/_HomeReviews.cshtml. Ghép từ .section-head .swiper .card .btn-circle. */
.home-reviews .section-head { margin-bottom: var(--sp-6); }
.home-reviews .section-title { margin-bottom: var(--sp-2); }
.home-reviews .section-desc { margin-block: 0; color: var(--text-2); }

.review-card { margin: 0; }
.review-card .card-body { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: var(--sp-5); }
.review-quote {
    color: var(--accent);
    font-size: var(--fs-index);
    font-weight: var(--fw-bold);
    line-height: .6;
    opacity: .6;
}
.review-text { margin: 0; }
.review-text p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    margin: 0;
    color: var(--text-2);
    font-size: var(--fs-sm);
    line-height: 1.7;
}
/* tác giả luôn nằm sát đáy -> các card thẳng hàng dù lời nhận xét dài ngắn khác nhau */
.review-author {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-top: auto;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}
.review-avatar {
    flex: none;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border-radius: var(--radius-pill);
    object-fit: cover;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-semibold);
}
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-name { color: var(--text); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.review-info { color: var(--text-2); font-size: var(--fs-xs); }

/* ========================= CẨM NANG XÂY DỰNG ===========================
   Tiêu đề + mô tả thể loại, rồi hàng card bài viết trượt ngang: mobile ~1 card, tablet 2, từ 1024px 4 card.
   Dùng lại khung .project-list/.project-swiper/.project-nav của khối Dự án; .project-list-4 = bề rộng card khi 4 card/hàng.
   Markup: Views/Default/_HomeNews.cshtml. Ghép từ .section-head .swiper .card .media .ratio-3x2 .zoom .clamp-2 .clamp-3 .section-more. */
.home-guides .section-head { margin-bottom: var(--sp-6); }
.home-guides .section-title { margin-bottom: var(--sp-2); }
.home-guides .section-desc { margin-block: 0; color: var(--text-2); }

.guide-card .card-body { gap: var(--sp-2); padding: var(--sp-4); }
.guide-card .card-title { font-size: var(--fs-base); }

/* ========================= MÀU CARD TRÊN TRANG CHỦ =====================
   Nhịp màu từ trên xuống: Năng lực (kem) → Sản phẩm (kem) → Dự án (xanh --surface, điểm nhấn tối ở giữa) → Cẩm nang (kem).
   Thanh tab sản phẩm giữ nền --surface (nsx/components.css .tabs-bar) làm "đầu bảng" cho lưới card kem. */

/* Card nền kem — Cẩm nang: class .card-cream; Sản phẩm: lưới có class .products-cream (cả hai trong nsx/components.css,
   dùng chung với trang danh sách sản phẩm). */

/* Card nền --surface — Dự án nổi bật: viền mảnh trắng, tiêu đề --text, mô tả --text-2 (--muted chỉ ~3.8:1 trên --surface),
   "Xem chi tiết" giữ xanh nhấn --accent. Hover: viền --accent-line, tiêu đề --accent, card nổi bóng. */
.project-card { border-color: var(--border-strong); background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); }
.project-card:hover { border-color: var(--accent-line); background: var(--surface); box-shadow: var(--shadow-lg); }
.project-card .card-title { color: var(--text); }
.project-card:hover .card-title { color: var(--accent); }
.project-card .card-text { color: var(--text-2); }

@media (min-width: 1024px) {
    .project-list-4 { --item: calc((100% - var(--sp-4) * 3) / 4); }
}

/* Chữ nhỏ in đậm → Roboto (quy ước ở cuối nsx/components.css) */
.hero-pagination .swiper-pagination-current, .service-title, .capability-num, .capability-title,
:where(.service-sub, .about-stat-label, .capability-text, .review-text, .review-info) :is(strong, b) { font-family: var(--font-sm-bold); }
.home-about .eyebrow { font-family: var(--font); }   /* eyebrow ở đây chỉ đậm 500 */