/* ==========================================================================
   TMT STUDIO — main.css
   Hệ thống giao diện dựng theo bố cục Aalto + đặc tả trong Web-Layout.pdf
   Mục lục:
     1. Tokens & reset
     2. Tiện ích chung (wrap, lưới dọc, tiêu đề, nút mũi tên, rich text)
     3. Loader
     4. Header / logo / menu / trang dẫn
     5. Dải tiêu đề trang (page-head) + tab con + breadcrumb
     6. Trang Home — lưới 16 ô
     7. Lưới dự án + thẻ tile
     8. Chi tiết công trình (viewer 16:9, thumbnail, thông số, lightbox)
     9. Studio: about / philosophy / services / experience
    10. Zigzag (Awards & News) + trang bài viết
    11. Contact
    12. Footer
    13. Phân trang, trạng thái, tiện ích phụ
    14. Responsive
   ========================================================================== */

/* ============================ 1. TOKENS & RESET ========================== */
:root {
    /* Bảng màu khách chốt ở bản vẽ Rev1 (slide 1). Con số CMYK quy về sRGB
       theo đúng cách Illustrator/Photoshop đổi, nên in ra và hiện trên màn
       hình là cùng một màu:
           cam        C=11.72 M=66.8 Y=98.05 K=1.17 -> #e2662a
           xám đậm    K=90                          -> #414042  (chữ, line đậm)
           xám nhạt   K=60                          -> #808285  (chữ, line nhạt)
           xám nền    K=70, opacity 30%             -> --scrim
           trắng mờ   opacity 50%                   -> --veil
           line sọc   K=10                          -> #e6e7e8  (xem --hatch) */
    --accent:        #e2662a;
    --accent-dark:   #c4541f;
    --ink:           #414042;   /* K=90 — tiêu đề, nhãn, đường kẻ đậm */
    --ink-soft:      #4a4a4a;   /* thân bài: nằm giữa K=90 và K=60 cho dễ đọc */
    --muted:         #808285;   /* K=60 — chữ phụ, đường kẻ nhạt */
    --line:          #e4e4e4;
    --line-faint:    #efefef;
    --bg:            #ffffff;
    --bg-alt:        #fafafa;
    --dark:          #2a2a2a;

    /* Lớp phủ trắng mờ 50% của bảng màu Rev1 — dùng cho ảnh CHƯA được chọn
       trong dải xem nhanh ở trang chi tiết công trình.
       Ô "xám transparent K=70, opacity 30%" trong bảng màu chưa rõ khách định
       dùng cho chi tiết nào (các lớp phủ khi rê chuột hiện đang đậm hơn thế),
       nên tạm chưa khai báo, chờ khách chỉ đúng chỗ rồi thêm. */
    --veil:          rgba(255, 255, 255, .5);

    /* Hai font chính, đều có bộ dấu tiếng Việt và đủ normal / bold / italic
       (bản vẽ Rev1, slide 1 mục 4). Oswald cũ KHÔNG có kiểu nghiêng thật nên
       phải đổi; Roboto Condensed là đúng font khách nêu tên làm chuẩn. */
    --font-head: 'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'Inter', Helvetica, Arial, system-ui, -apple-system, sans-serif;

    --wrap:      1440px;
    --gutter:    clamp(20px, 4vw, 64px);
    --header-h:  78px;

    /* Cỡ logo dùng CHUNG cho thanh menu và màn hình chờ — để logo lúc đang tải
       trang và logo lúc trang hiện ra bằng đúng nhau, không bị nhảy cỡ. */
    --logo-h:    34px;   /* chiều cao file logo tải lên */
    --logo-fs:   22px;   /* cỡ chữ của logo dựng sẵn bằng CSS */

    /* Cỡ chữ và cỡ nút mũi tên dùng CHUNG cho mọi trang, lấy trang All Projects
       làm chuẩn (duyệt bản vẽ đợt 2: "chữ lớn, chữ nhỏ làm đồng bộ với trang
       All Project, các mũi tên cũng vậy"). Sửa ở đây là cả site đổi theo. */
    --fs-name:   17px;   /* chữ LỚN: tên dự án, tên thẻ, tiêu đề cột */
    --fs-sub:    13px;   /* chữ NHỎ: hạng mục, địa điểm, ngày tháng */

    /* Cạnh ô vuông của MỌI nút mũi tên. Bản vẽ Rev1 lấy nút "lên đầu trang"
       làm chuẩn cho cả nút chuyển hình (slide 12) lẫn nút dự án trước / sau
       (slide 17), mà nút đó phải cao bằng đường kính icon Zalo = 38px
       (slide 8). Đo trên ảnh mẫu cũng ra đúng 38px. */
    --arrow:     38px;

    --ease:      cubic-bezier(.22, .61, .36, 1);
    --dur:       .45s;

    /* Dải nền kẻ sọc của page-head: nghiêng 45 độ theo hướng "/", màu K=10.
       DÙNG ẢNH LÁT NỀN 10x10px chứ không phải repeating-linear-gradient.
       Lý do: gradient nghiêng 45 độ bị trình duyệt làm mượt trên một dải rộng
       nên nét sọc trông mờ nhoè — đúng ý khách chê "chi tiết kẻ sọc không sắc
       nét" (Review-2). Ảnh lát thì mình nắm được từng điểm ảnh. Đây cũng là
       cách trang khách lấy làm ví dụ (aalto.qodeinteractive.com) đang làm.
       Bước lặp giữa hai nét: 5px.

       LỊCH SỬ HAI LẦN SỬA Ở REVIEW-3 — đọc trước khi dựng lại ảnh:
         • Bản 1 tô ĐÚNG MỘT điểm ảnh đặc mỗi hàng. Hai điểm liền kề của cùng
           một nét chỉ chạm nhau ở GÓC nên nét nhìn đứt quãng thành từng hạt
           ("chỉnh thành nét liền").
         • Bản 2 tô HAI điểm đặc cạnh nhau mỗi hàng. Hết đứt, nhưng bậc thang
           rộng 2 điểm ảnh nên lộ răng cưa ("chỉnh đường kẻ nét thẳng, không
           răng cưa").
         • Bản 3 (đang dùng) KHỬ RĂNG CƯA đúng cách: tính ĐỘ PHỦ thật của nét
           lên từng điểm ảnh (lấy mẫu 8x8 điểm con), nét dày 1.3px đo VUÔNG GÓC
           với nét. Kết quả mỗi hàng là một điểm LÕI ĐẶC 100% kèm hai điểm vai
           44% hai bên:
               lõi 100% -> nét vẫn sắc, không mờ nhoè như gradient;
               vai 44%  -> lấp đúng chỗ hở ở góc, nên nét thẳng và mượt.
           Tổng mực 37.6%, bằng đúng bản 2 nên tông xám của dải không đổi.
       Muốn sửa hoạ tiết thì dựng lại file public/assets/img/hatch.png theo
       đúng ba con số: bước lặp 5px, nét 1.3px vuông góc, màu #e6e7e8. */
    --hatch: url(../img/hatch.png);
}

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Điện thoại: chạm/rà vào chữ không hiện ô nền xanh của trình duyệt
       (duyệt bản vẽ đợt 2). Trạng thái bấm đã có hiệu ứng đổi màu riêng. */
    -webkit-tap-highlight-color: transparent;
}
a, button, summary, label, [role="button"] { -webkit-tap-highlight-color: transparent; }

/* Cột dọc cao tối thiểu bằng màn hình + .site-main giãn ra: trang nào ít nội
   dung (vd Projects → Design & Build chỉ có 1 dự án) footer vẫn nằm sát đáy
   màn hình chứ không nhảy lên giữa trang. */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    background: var(--bg);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
}

img, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; transition: color .25s var(--ease); }

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* line-height 1.25 chứ không phải 1.15 như hồi dùng Oswald: chữ HOA tiếng Việt
   có dấu chồng hai tầng (Ầ, Ổ, Ặ, Ợ...) nên phần nhô lên + thò xuống của
   Roboto Condensed chiếm tới ~1,19 lần cỡ chữ. Để 1.15 thì tiêu đề hai dòng bị
   dấu của dòng dưới chạm vào chân dòng trên. Đo bằng TextMetrics trên chính
   trang chi tiết công trình, không phải ước lượng. */
/* Độ đậm và giãn chữ lấy ĐÚNG theo trang khách đưa làm ví dụ
   (aalto.qodeinteractive.com): Roboto Condensed, weight 700, letter-spacing
   -0,04em, chữ HOA. Bản trước để weight 600 và giãn chữ DƯƠNG +0,01em nên
   nhìn bè và rời ra, không ra dáng Roboto Condensed — đúng ý khách chê
   "font chữ lớn chưa hợp, chưa tương đồng font Roboto Condensed" (Review-2). */
h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.04em;
    margin: 0;
    line-height: 1.25;
}

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Máy cảm ứng: CHẠM vào mục menu không được hiện viền cam (bản vẽ Rev1 slide 5
   — "trên iPad xuất hiện viền màu cam xung quanh từ Home"). Safari trên iPad
   coi cú chạm là "chọn bằng bàn phím" nên vẫn vẽ viền quanh liên kết vừa bấm,
   và viền đó nằm lại tới khi chạm chỗ khác.
   Chỉ tắt cho liên kết và nút; ô nhập liệu vẫn giữ viền vì đó là chỗ người
   dùng bàn phím ngoài cần nhìn thấy con trỏ đang ở đâu. */
@media (hover: none) {
    a:focus-visible,
    button:focus-visible { outline: none; }
}

::selection { background: var(--accent); color: #fff; }

/* Chỉ dành cho trình đọc màn hình và máy tìm kiếm, không hiện trên giao diện */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
}

/* ======================== 2. TIỆN ÍCH CHUNG ============================= */
.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Lưới kẻ dọc 4 cột chạy nền toàn trang đã BỎ theo duyệt bản vẽ đợt 2
   ("bỏ kẻ sọc đứng"). Khối .grid-lines cũng đã gỡ khỏi layouts/front.php. */

/* KHÔNG đặt z-index ở đây. Trước kia có z-index: 1 để nằm trên lưới kẻ dọc —
   lưới đó đã bỏ, mà cái z-index còn sót lại thì biến .site-main thành một
   "tầng riêng": mọi thứ bên trong, kể cả bản đồ phóng to (z-index 700), đều
   bị nhốt dưới thanh menu (z-index 200) nên nút thu nhỏ bị che mất. */
.site-main {
    position: relative;
    /* Nở ra chiếm hết chỗ trống để footer luôn bị đẩy xuống đáy màn hình */
    flex: 1 0 auto;
    padding-top: var(--header-h);
}
.is-home .site-main { padding-top: 0; }

.section-title {
    font-size: clamp(26px, 2.6vw, 38px);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 14px;
}

.lede {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
    color: var(--muted);
}

/* Liên kết kiểu mũi tên trong khung vuông.
   QUY TẮC MÀU CHỐT Ở BẢN VẼ Rev1 (slide 12 và 26 vẽ rõ bốn trạng thái):
   lúc thường mũi tên ĐEN như viền ô, rê chuột hoặc bấm mới chuyển CAM. Đây là
   điều ngược lại với đợt duyệt 2 (khi đó mũi tên cam sẵn) — sửa ở đây và ở
   .pdnav__arrow, .send-btn__icon, .to-top là cả site đi theo.
   Dùng chung cho mọi nút "quay lại" và "xem thêm". */
.arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--ink);
}
.arrow-link__icon {
    display: grid;
    place-items: center;
    width: var(--arrow);
    height: var(--arrow);
    color: var(--ink);
    --box-line: var(--ink);
    border: 1px solid var(--box-line);
    transition: color .25s var(--ease), border-color .25s var(--ease),
                background .25s var(--ease);
}
.arrow-link__icon svg { width: 18px; height: 18px; }
/* Rê chuột / bấm: CHỈ MŨI TÊN chuyển cam, Ô VUÔNG GIỮ NGUYÊN (Review-2 —
   "rà chuột hoặc click chỉ mũi tên chuyển màu, ô vuông không chuyển").
   Quy tắc này áp cho mọi nút mũi tên vuông của site. */
.arrow-link:hover { color: var(--accent); }
.arrow-link:hover .arrow-link__icon { color: var(--accent); }

/* Nét mũi tên dày hơn mặc định để bằng độ đậm trong bản vẽ khách gửi.
   Chỉ còn tác dụng ở trình duyệt quá cũ, xem khối @supports ngay bên dưới. */
.arrow-link__icon path,
.pdnav__arrow path,
.pd__nav path,
.to-top path { stroke-width: 2.75; }

/* ---------------------------------------------------------------------
   MŨI TÊN CAM TRONG Ô VUÔNG — vẽ lại bằng CSS theo đúng bản vẽ khách gửi.

   Ba điểm khác mũi tên mặc định:
     • nét dày hơn hẳn;
     • dáng MỞ RỘNG (ngang bằng ~0,69 lần cao) chứ không thon;
     • KHÔNG nằm giữa ô: mũi tên thụt vào từ mép gốc, mũi nhọn rơi vào
       khoảng giữa ô vuông. Mũi tên sang trái thì lệch ngược lại, mũi tên
       lên trên thì lệch xuống dưới — cùng một quy tắc.

   Hình vẽ nằm ngay trong CSS nên sửa một chỗ là mọi nút đổi theo; thẻ
   <svg> trong HTML được giữ lại làm bản dự phòng cho trình duyệt cũ.
   --------------------------------------------------------------------- */
@supports ((-webkit-mask: none) or (mask: none)) {
    .arrow-link__icon,
    .pdnav__arrow,
    .pd__nav,
    .send-btn__icon,
    .to-top {
        /* Ba con số quyết định dáng mũi tên — sửa ở đây là cả site đổi theo:
             --chev-h  chiều cao mũi tên, tính theo cạnh ô
             --chev-w  bề ngang mũi tên (giữ ~0,70 lần chiều cao cho dáng mở)
             --chev-in đẩy ra khỏi ô; số ÂM để hai cánh ĐÈ LÊN đường viền,
                       cắt viền thành hai chỗ hở đúng như bản vẽ khách gửi. */
        --chev-h:  74%;
        --chev-w:  52%;
        --chev-in: -3px;

        /* XOÁ VIỀN: đoạn viền bị mũi tên chắn ngang được bỏ hẳn, nên mũi tên
           trông như phá ra khỏi ô vuông chứ không đè lên nét viền. Hai mốc
           tự tính theo --chev-h nên đổi cỡ mũi tên là khoảng hở theo ngay. */
        --cut-a: calc((100% - var(--chev-h)) / 2);
        --cut-b: calc(100% - var(--cut-a));
        /* Bốn cạnh của khung đều là lớp nền của CÙNG MỘT ô ::after (xem mục
           ngay dưới). Cạnh nào bị mũi tên phá thì thay lớp nền LIỀN bằng lớp
           có khoảng hở ở giữa — khoét dọc hay khoét ngang tuỳ cạnh. */
        --edge-on:    linear-gradient(var(--box-line), var(--box-line));
        --edge-cut-v: linear-gradient(to bottom,
            var(--box-line) 0 var(--cut-a),
            transparent var(--cut-a) var(--cut-b),
            var(--box-line) var(--cut-b) 100%);
        --edge-cut-h: linear-gradient(to right,
            var(--box-line) 0 var(--cut-a),
            transparent var(--cut-a) var(--cut-b),
            var(--box-line) var(--cut-b) 100%);

        position: relative;
    }

    .arrow-link__icon > svg,
    .pdnav__arrow > svg,
    .pd__nav > svg,
    .send-btn__icon > svg,
    .to-top > svg { display: none; }

    /* KHUNG VUÔNG VẼ BẰNG MỘT LỚP DUY NHẤT.

       Cách cũ: bốn cạnh do `border` của thẻ vẽ, riêng cạnh bị mũi tên phá thì
       bỏ màu rồi vẽ đè lại bằng một vệt ::after rộng 1px. Hai hình chữ nhật ấy
       được trình duyệt làm tròn về lưới điểm ảnh ĐỘC LẬP nhau, nên khi máy để
       mức phóng 110% / 125% (rất phổ biến trên Windows) chúng lệch nhau nửa
       điểm ảnh: cạnh trái dày gấp đôi ba cạnh kia và thừa ra một mẩu nhỏ chìa
       khỏi góc dưới — đúng chỗ khách chê "một số chỗ bị lỗi nhẹ" (Review-3).

       Cách mới: CẢ BỐN CẠNH là bốn lớp nền của cùng một ô ::after phủ khít
       khung viền, nên luôn làm tròn giống nhau — không lệch, không chìa.
       Viền thật của thẻ giữ nguyên bề dày 1px nhưng để TRONG SUỐT, cốt giữ
       nguyên kích thước ô và vị trí mũi tên y như cũ.

       LƯU Ý về độ ưu tiên: mấy nút bên dưới khai `border: 1px solid ...` ở các
       mục sau trong file. `border` là thuộc tính GỘP nên nó đặt lại cả bốn
       cạnh, mà cùng độ ưu tiên thì khai báo đứng sau thắng — viền sẽ hiện trở
       lại và chồng lên lớp nền. Vì vậy mỗi selector dưới đây đều phải kèm thêm
       một lớp cha cho nặng ký hơn. */
    /* .arrow-link__icon khai báo border ở NGAY TRÊN khối này nên không cần
       thêm gì; bốn nút còn lại khai ở các mục sau, phải kèm lớp cha. */
    .arrow-link__icon { border-color: transparent; }
    /* Kèm .pdnav__side để thắng khai báo border của .pdnav__arrow ở mục 9 */
    .pdnav__side .pdnav__arrow { border-color: transparent; }
    /* Kèm .send-btn để thắng khai báo border của .send-btn__icon ở mục 11 */
    .send-btn .send-btn__icon { border-color: transparent; }
    /* Kèm .pd__frame để thắng khai báo border của .pd__nav ở mục 8 */
    .pd__frame .pd__nav { border-color: transparent; }
    /* Kèm .site-footer để thắng khai báo border của .to-top ở mục 12 */
    .site-footer .to-top { border-color: transparent; }

    .arrow-link__icon::after,
    .pdnav__arrow::after,
    .pd__nav::after,
    .send-btn__icon::after,
    .to-top::after {
        content: "";
        position: absolute;
        inset: -1px;                  /* phủ khít khung viền của thẻ */
        background:
            var(--edge-l, var(--edge-on)) left   top    / 1px  100% no-repeat,
            var(--edge-r, var(--edge-on)) right  top    / 1px  100% no-repeat,
            var(--edge-t, var(--edge-on)) left   top    / 100% 1px  no-repeat,
            var(--edge-b, var(--edge-on)) left   bottom / 100% 1px  no-repeat;
    }

    /* Mũi tên sang PHẢI thì thò ra ở cạnh trái -> khoét cạnh trái */
    .arrow-link__icon,
    .send-btn__icon,
    .pd__nav--next,
    .pdnav__side--next .pdnav__arrow { --edge-l: var(--edge-cut-v); }

    /* Mũi tên sang TRÁI -> khoét cạnh phải */
    .pd__nav--prev,
    .pdnav__side--prev .pdnav__arrow { --edge-r: var(--edge-cut-v); }

    /* Nút lên đầu trang: mũi tên HƯỚNG LÊN nhưng đặt sát cạnh DƯỚI, hai cánh
       phá qua viền dưới (hình mẫu Review-2) -> khoét cạnh dưới. */
    .to-top { --edge-b: var(--edge-cut-h); }

    .arrow-link__icon::before,
    .pdnav__arrow::before,
    .pd__nav::before,
    .send-btn__icon::before,
    .to-top::before {
        content: "";
        position: absolute;
        top: 50%;
        left: var(--chev-in);
        transform: translateY(-50%);
        width: var(--chev-w);
        height: var(--chev-h);
        background: currentColor;
        -webkit-mask: var(--chev) no-repeat center / 100% 100%;
        mask: var(--chev) no-repeat center / 100% 100%;
    }

    /* Sang phải — dáng mặc định, lệch về mép trái */
    .arrow-link__icon,
    .send-btn__icon,
    .pd__nav--next,
    .pdnav__side--next .pdnav__arrow {
        --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 100'%3E%3Cpath d='M14 12 L55 50 L14 88' fill='none' stroke='%23000' stroke-width='12'/%3E%3C/svg%3E");
    }

    /* Sang trái — lật hình và đẩy sang mép phải */
    .pd__nav--prev,
    .pdnav__side--prev .pdnav__arrow {
        --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 69 100'%3E%3Cpath d='M55 12 L14 50 L55 88' fill='none' stroke='%23000' stroke-width='12'/%3E%3C/svg%3E");
    }
    .pd__nav--prev::before,
    .pdnav__side--prev .pdnav__arrow::before { left: auto; right: var(--chev-in); }

    /* Mũi tên hướng LÊN, đặt sát cạnh DƯỚI của ô, hai cánh phá qua viền dưới
       (hình mẫu Review-2). Đây chính là mẫu chuẩn cho mọi nút mũi tên vuông,
       chỉ khác góc xoay. */
    .to-top {
        --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 69'%3E%3Cpath d='M12 55 L50 14 L88 55' fill='none' stroke='%23000' stroke-width='12'/%3E%3C/svg%3E");
    }
    .to-top::before {
        top: auto;
        bottom: var(--chev-in);
        left: 50%;
        transform: translateX(-50%);
        width: var(--chev-h);     /* xoay 90 độ nên hai chiều đổi chỗ */
        height: var(--chev-w);
    }
}

/* Nội dung do quản trị viên nhập */
.rich p { margin: 0 0 1.15em; }
/* Đoạn được bấm nút "thụt đầu dòng" trong trình soạn thảo của khu quản trị */
.rich .is-indent { text-indent: 2.2em; }
.rich p:last-child { margin-bottom: 0; }
.rich h2, .rich h3 { margin: 1.6em 0 .6em; text-transform: uppercase; }
.rich ul, .rich ol { margin: 0 0 1.15em 1.25em; }
.rich ul li { list-style: disc; }
.rich ol li { list-style: decimal; }
.rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.rich img { margin: 1.5em 0; }
.rich blockquote {
    margin: 1.6em 0;
    padding: 22px 28px;
    background: var(--hatch), var(--bg-alt);
    font-style: italic;
    color: var(--ink);
}

/* ============================== 3. LOADER =============================== */
/* Chữ TMT Studio hiện ra trước, rồi Ô VUÔNG chạy từ ngoài vào ÔM TRỌN CHỮ TMT
   — dừng lại đúng vị trí khung trong logo thật ở thanh menu. */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background: #fff;
    transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.loader.is-done { opacity: 0; visibility: hidden; }

.loader__mark {
    display: flex;
    align-items: center;
    font-family: var(--font-head);
    font-size: var(--logo-fs);   /* bằng đúng logo ở thanh menu */
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
}

/* Khối chữ TMT — cũng chính là đích đến của ô vuông.
   Lề trong và bề dày nét lấy đúng tỷ lệ của .logo__box (4px 5px 3px / viền 2px
   ở cỡ chữ 22px), đổi sang em nên phóng to bao nhiêu vẫn đúng dáng logo. */
.loader__tmt {
    position: relative;
    display: inline-block;
    padding: .18em .23em .14em;
    color: var(--ink);
}
.loader__tmt-text {
    display: inline-block;
    opacity: 0;
    animation: loaderText .32s var(--ease) forwards;
}
.loader__studio {
    padding-left: .09em;
    color: var(--accent);
    opacity: 0;
    animation: loaderText .32s var(--ease) .1s forwards;
}

/* Ô vuông chạy từ ngoài mép trái vào, dừng đúng lúc ôm trọn chữ TMT.
   inset: 0 nên điểm dừng luôn khít khối chữ, không cần canh tay. */
.loader__box {
    position: absolute;
    inset: 0;
    border: .09em solid var(--ink);
    transform: translateX(-60vw);
    animation: loaderBox .55s cubic-bezier(.16, .84, .3, 1) .18s forwards;
}

@keyframes loaderBox  { to { transform: translateX(0); } }
@keyframes loaderText { to { opacity: 1; } }

/* Khi đã tải logo riêng lên (nên dùng SVG): logo hiện dần và phóng nhẹ.
   Với file SVG, các nét bên trong còn được "vẽ" lần lượt nhờ stroke-dash. */
.loader__img {
    height: var(--logo-h);   /* bằng đúng logo ở thanh menu */
    width: auto;
}
.loader__mark.is-ready .loader__img {
    animation: loaderPop .85s var(--ease) backwards;
}
@keyframes loaderPop { from { opacity: 0; transform: scale(.9); } }

/* HAI ẢNH RỜI (Cấu hình → Màn hình chờ): ảnh CHỮ chạy vào từ mép PHẢI, ảnh
   KHUNG chạy vào từ mép TRÁI, hai mảnh gặp nhau ở giữa màn hình và ghép thành
   logo hoàn chỉnh. Hai ảnh cùng quãng đường, cùng nhịp nên chạm đích một lúc.
   Ảnh chữ quyết định khổ (cao đúng bằng logo ở thanh menu), ảnh khung đè lên,
   dính mép trái và canh giữa theo chiều dọc; hai file xuất cùng khổ canvas là
   chồng khít, không phải chỉnh gì thêm.                                       */
.loader__mark--pair {
    position: relative;
    display: inline-block;
    line-height: 0;
}

/* Cả hai mảnh đều lấy VỊ TRÍ CUỐI làm mặc định, hiệu ứng chỉ kéo ngược chúng ra
   ngoài lúc mở màn (fill-mode: backwards). Trình duyệt nào bỏ hiệu ứng thì logo
   vẫn hiện đủ ở đúng chỗ, chỉ mất chuyển động — không bao giờ mất hút.
   Hiệu ứng chỉ nổ khi main.js gắn .is-ready, tức là lúc ẢNH ĐÃ TẢI XONG: trên
   mạng chậm (điện thoại 4G, lần đầu vào) mà chạy ngay từ lúc vẽ trang thì hai
   mảnh bay xong trước khi ảnh kịp về, người xem chỉ thấy logo hiện sẵn.       */
.loader__wordmark {
    display: block;
    height: var(--logo-h);   /* bằng đúng logo ở thanh menu */
    width: auto;
}
.loader__mark.is-ready .loader__wordmark {
    animation: loaderMeetRight .62s cubic-bezier(.16, .84, .3, 1) .12s backwards;
}

/* LỚP BỌC giữ cỡ và vị trí của khung, đứng yên suốt hiệu ứng. Ba biến
   --loader-box-* do khu quản trị truyền xuống qua thuộc tính style của
   .loader__mark--pair. Khung NEO THEO MÉP TRÁI của ảnh chữ (không phải theo
   tâm) nên chỉnh cỡ thì khung chỉ co/nới ở bên phải, mép trái vẫn dính chữ T. */
.loader__frame-box {
    position: absolute;
    display: inline-block;   /* thẻ span: cần khối để ôm đúng ảnh ở trường hợp solo */
    left: 0;
    top: 50%;
    width: var(--loader-box-w, 100%);
    transform: translateY(-50%)
               translate(var(--loader-box-x, 0%), var(--loader-box-y, 0%));
}
/* Chỉ có mỗi ảnh khung: nó tự định khổ nên canh theo chiều cao như ảnh chữ */
.loader__frame-box--solo {
    position: static;
    width: auto;
    transform: none;
}

/* ẢNH khung chỉ lo phần chạy ngang. Keyframes của nó KHÔNG được dùng var():
   Safari trên iOS không giải biến CSS trong @keyframes, gặp biến là bỏ luôn
   hiệu ứng và khung nằm chết ở ngoài màn hình, người xem không thấy gì.       */
.loader__frame {
    display: block;
    width: 100%;
    height: auto;
    /* Gỡ trần "img { max-width: 100% }" ở phần reset — không gỡ thì khung rộng
       hơn ảnh chữ sẽ bị cắt về đúng 100%, chỉnh mãi không nới ra được. */
    max-width: none;
}
.loader__mark.is-ready .loader__frame {
    animation: loaderMeetLeft .62s cubic-bezier(.16, .84, .3, 1) .12s backwards;
}
.loader__frame-box--solo .loader__frame {
    width: auto;
    height: calc(var(--logo-h) * var(--loader-box-scale, 1));
}

@keyframes loaderMeetLeft  { from { transform: translateX(-60vw); } }
@keyframes loaderMeetRight { from { transform: translateX(60vw); } }

/* Dùng cho máy bật "giảm chuyển động" (xem mục ngay dưới) */
@keyframes loaderFadeIn    { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    /* Máy bật "giảm chuyển động": bỏ phần CHẠY từ ngoài vào (dịch chuyển lớn)
       nhưng vẫn giữ một nhịp mờ dần, để màn hình chờ còn ra dáng hiệu ứng chứ
       không hiện phựt như lỗi. Mờ dần không nằm trong nhóm gây chóng mặt. */
    .loader__box, .loader__tmt-text, .loader__studio, .loader__img,
    .loader__wordmark, .loader__frame {
        transform: none;
        animation: loaderFadeIn .45s var(--ease) forwards;
    }
    html { scroll-behavior: auto; }
}

/* ===================== 4. HEADER / LOGO / MENU ========================== */
/* KHÔNG có đường kẻ dưới chân thanh menu (bản vẽ Rev1 slide 1 mục 3, nhắc lại
   ở slide 8 và 12). Dải tiêu đề bên dưới đã có sọc chéo nên ranh giới vẫn rõ. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    height: var(--header-h);
    background: #fff;
    transition: transform .35s var(--ease);
}
.site-header.is-hidden { transform: translateY(-100%); }

/* TRANG CHỦ: logo và menu nằm ĐÈ TRÊN ảnh nền, không có dải trắng phía trên
   (duyệt bản vẽ đợt 2 — áp dụng cho cả máy tính, iPad lẫn điện thoại). */
.is-home .site-header {
    background: transparent;
    /* Vệt tối rất nhẹ để chữ trắng luôn đọc được trên ảnh sáng màu */
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .34), rgba(0, 0, 0, 0));
}
/* Chữ TMT và khung đổi sang trắng cho nổi trên ảnh; chữ "Studio" giữ nguyên
   màu cam của thương hiệu vì trên nền sẫm vẫn đọc rõ. */
.is-home .site-header .logo__box { border-color: #fff; color: #fff; }
.is-home .site-header .main-nav__list > li + li { border-left-color: rgba(255, 255, 255, .35); }
.is-home .site-header .main-nav__list > li > a { color: rgba(255, 255, 255, .88); }
.is-home .site-header .lang-switch a { color: rgba(255, 255, 255, .7); }
.is-home .site-header .lang-switch a.is-active { color: #fff; }
.is-home .site-header .lang-switch__sep { background: rgba(255, 255, 255, .45); }
.is-home .site-header .burger span { background: #fff; }
/* Logo ảnh do quản trị viên tải lên: đảo sang trắng cho hợp nền ảnh.
   Khi đã có "Logo TRANG CHỦ" riêng (Cấu hình → Logo) thì file đó được giữ
   NGUYÊN MÀU — nhờ class .logo__img--as-is — vì đã là bản dành cho nền sẫm. */
.is-home .site-header .logo__img { filter: brightness(0) invert(1); }
.is-home .site-header .logo__img--as-is { filter: none; }

.site-header__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* TRANG CHỦ: logo và nút 3 gạch phải nằm SÁT HAI MÉP màn hình, trùng đúng chỗ
   của logo và nút tắt ở trang MENU (bản vẽ Rev1 slide 3).
   Lỗi cũ: khung 1440px bó cụm này lại, nên trên màn hình rộng hơn 1440px thì
   logo bị "thu vào trong" khoảng trăm pixel so với trang MENU — bấm mở menu là
   thấy logo nhảy chỗ. Bỏ trần bề ngang thì cả hai cùng neo theo --gutter.
   Chỉ áp cho trang chủ: các trang trong vẫn giữ logo thẳng hàng với nội dung. */
.is-home .site-header__inner { max-width: none; }

/* Đưa cả logo lẫn menu về BÊN PHẢI (hoặc trái) trên giao diện máy tính.
   Đổi giá trị của --header-align trong :root là xong:
     left   -> logo trái, menu phải (mặc định, như hiện nay)
     right  -> cả cụm logo + menu dồn về phải
     center -> logo giữa, menu phải                                        */
.site-header--right .site-header__inner  { justify-content: flex-end; }
.site-header--right .main-nav            { margin-left: 0; }
.site-header--center .site-header__inner { justify-content: center; }
.site-header--center .logo               { margin-right: auto; margin-left: auto; }

/* Logo: khung chữ nhật + TMT đen + Studio cam */
.logo {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-head);
    font-size: var(--logo-fs);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
}
.logo__box {
    padding: 4px 5px 3px;
    border: 2px solid var(--ink);
    color: var(--ink);
}
.logo__accent { color: var(--accent); padding-left: 2px; }

/* Logo do quản trị viên tải lên (Cấu hình → Logo website). Chiều cao cố định,
   bề ngang tự co theo file nên SVG hay PNG đều hiện đúng tỷ lệ. */
.logo__img { height: var(--logo-h); width: auto; }

/* Menu ngang */
.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; }
.main-nav__list > li + li { border-left: 1px solid var(--line); }
.main-nav__list > li > a {
    display: block;
    padding: 6px 18px;
    font-size: 15px;
    color: var(--ink-soft);
}
.main-nav__list > li > a:hover { color: var(--accent); }
.main-nav__list > li > a.is-active { color: var(--accent); font-weight: 500; }
.main-nav__lang { padding-left: 18px; }

/* Chuyển ngữ */
.lang-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.lang-switch a { color: var(--muted); }
.lang-switch a:hover { color: var(--accent); }
.lang-switch a.is-active { color: var(--ink); font-weight: 600; }
.lang-switch__sep { width: 1px; height: 1.15em; background: var(--line); }

/* Trong trang dẫn: chữ to hơn theo tỷ lệ bản vẽ, gạch đứng cao bằng chữ và
   canh giữa theo chiều dọc (duyệt bản vẽ đợt 2).

   Lưới 1fr - auto - 1fr để GẠCH ĐỨNG rơi đúng tâm khối, nhờ vậy nó thẳng trục
   với gạch ngang ngắn phía trên. Nếu để flex thường thì hai chữ dài ngắn khác
   nhau ("Vietnamese" và "English") sẽ đẩy gạch đứng lệch sang một bên. */
.lang-switch--long {
    display: inline-grid;
    grid-template-columns: 1fr auto 1fr;
    font-size: clamp(16px, 1.5vw, 20px);
    gap: clamp(16px, 2vw, 26px);
    align-items: center;
    line-height: 1;
}
.lang-switch--long a:first-of-type { text-align: right; }
.lang-switch--long a:last-of-type  { text-align: left; }
.lang-switch--long .lang-switch__sep {
    height: 1.45em;
    background: #c9c9c9;
    align-self: center;
}

/* Nút 3 gạch. Theo hình vẽ duyệt đợt 2: ba vạch CÙNG canh phải, vạch giữa dài
   nhất, vạch trên ngắn nhất, vạch dưới ở khoảng giữa. Hover thành ba vạch đều. */
.burger {
    margin-left: 22px;
    width: 34px;
    height: 22px;
    position: relative;
    flex: 0 0 auto;
    /* Điện thoại: chạm vào không hiện ô nền xanh của trình duyệt */
    -webkit-tap-highlight-color: transparent;
}
.site-header--bare .burger { margin-left: auto; }
.burger span {
    position: absolute;
    right: 0;
    height: 2px;
    background: var(--ink);
    transition: width .3s var(--ease), background .3s var(--ease);
}
.burger span:nth-child(1) { top: 2px;  width: 23px; }
.burger span:nth-child(2) { top: 10px; width: 34px; }
.burger span:nth-child(3) { top: 18px; width: 26px; }
.burger:hover span { width: 34px; background: var(--accent); }

/* Trang dẫn: menu trắng toàn màn hình */
.nav-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: #fff;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .4s var(--ease);
}
.nav-overlay[hidden] { display: none; }
.nav-overlay.is-open { opacity: 1; }

/* Lớp phủ nhận con trỏ khi mở menu (tabindex="-1" trong layout) nhưng KHÔNG
   được vẽ viền: nó là cả màn hình, viền cam chạy quanh mép trông như lỗi. */
.nav-overlay:focus,
.nav-overlay:focus-visible { outline: none; }

/* Logo của trang dẫn phải nằm ĐÚNG chỗ logo trên thanh menu, để bấm mở / đóng
   menu thì logo đứng yên chứ không nhảy (bản vẽ Rev1 slide 3).
   Cách làm: thay vì đặt một con số top cố định, cho logo nằm giữa một dải cao
   đúng bằng thanh menu — logo to nhỏ thế nào (chữ dựng bằng CSS hay file ảnh
   quản trị viên tải lên) cũng tự canh trùng. */
.nav-overlay__logo {
    position: absolute;
    top: 0;
    left: var(--gutter);
    height: var(--header-h);
    display: inline-flex;
    align-items: center;
}

/* Nút tắt: thu về 80% so với bản đầu (duyệt bản vẽ đợt 2 — "hiệu ứng đẹp,
   kích thước hơi lớn"). Giữ nguyên vùng bấm 44px cho ngón tay.
   Vị trí lấy theo nút 3 gạch trên thanh menu: cùng nằm giữa dải --header-h, và
   đẩy sang phải nửa phần chênh bề ngang (44px của nút tắt so với 34px của nút
   3 gạch) để TÂM hai nút trùng nhau — bấm mở rồi bấm tắt, dấu X hiện đúng chỗ
   vừa bấm. */
.nav-overlay__close {
    position: absolute;
    top: calc((var(--header-h) - 44px) / 2);
    right: calc(var(--gutter) - (44px - 34px) / 2);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: var(--ink);
    transition: color .25s var(--ease), transform .35s var(--ease);
}
.nav-overlay__close svg { width: 22px; height: 22px; }
.nav-overlay__close:hover { color: var(--accent); transform: rotate(90deg); }

/* Một cột duy nhất gồm menu + dòng chuyển ngữ, canh giữa màn hình */
.nav-overlay__inner { display: flex; flex-direction: column; align-items: center; }

.nav-overlay__menu { display: flex; flex-direction: column; align-items: center; }
.nav-overlay__menu a {
    position: relative;
    padding: 16px 0;
    font-family: var(--font-head);
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink);
}
.nav-overlay__menu a + a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 1px;
    background: var(--line);
}
.nav-overlay__menu a:hover { color: var(--accent); }

/* Chuyển ngữ nằm NGAY DƯỚI mục Contact, cùng một cột với menu và có gạch
   ngăn giống hệt các mục bên trên — đúng bản vẽ. Trước đây nó bị neo xuống
   sát đáy màn hình nên rời hẳn khỏi khối menu. */
.nav-overlay__lang {
    position: relative;
    padding-top: 16px;
}
.nav-overlay__lang::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 1px;
    background: var(--line);
}

body.nav-open { overflow: hidden; }

/* ================= 5. DẢI TIÊU ĐỀ TRANG + TAB CON ====================== */
/* MẪU CHUẨN theo bản vẽ Rev1: nền TRẮNG kẻ sọc chéo 45 độ sắc nét, không viền
   dưới. Mọi trang trong đều dùng dải này, chỉ trang HOME và trang MENU là
   không có (slide 1 mục 2). Đợt duyệt 2 từng chốt nền xám phẳng #f6f6f6 và bỏ
   sọc — Rev1 quay lại kiểu kẻ sọc, nên đừng sửa ngược lại lần nữa.
   --head-gap là khoảng hở giữa mép dưới dải tiêu đề và khối nội dung đầu tiên:
   dán sát như yêu cầu ban đầu nhưng chừa một hơi thở nhỏ cho đỡ tức mắt.
   Sửa đúng một dòng này là cả site đổi theo. */
.page-head {
    --head-gap: clamp(14px, 1.6vw, 22px);

    background: var(--hatch), var(--bg);
    /* Màn hình retina: giữ nét sọc sắc cạnh thay vì bị phóng to nhoè ra */
    image-rendering: pixelated;
    padding: clamp(38px, 5vw, 62px) 0 clamp(22px, 3vw, 34px);
    margin-bottom: var(--head-gap);
}
/* Chiều cao tối thiểu giữ nguyên dù trang không có tab con (News) hay không có
   breadcrumb, để dải tiêu đề mọi trang cao bằng nhau. */
.page-head__inner { min-height: clamp(106px, 9.8vw, 140px); }
.page-head__title {
    font-size: clamp(28px, 3.4vw, 44px);
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Khối nội dung cần khoảng cách với dải tiêu đề (trang chữ, không phải ảnh) */
.page-gap { padding-top: clamp(34px, 4.5vw, 60px); }

/* Bộ đếm lượt truy cập KHÔNG hiện trên trang Contact. Bản vẽ Rev1 (slide 26
   mục 2) có yêu cầu dựng lại, nhưng xem thực tế xong khách chốt bỏ hẳn — xem
   ghi chú đầy đủ về lịch sử đổi ý trong ContactController::index().
   Việc đếm vẫn chạy, số liệu xem ở Quản trị → Tổng quan. */

.subtabs { display: flex; flex-wrap: wrap; gap: clamp(18px, 3.5vw, 56px); margin-top: clamp(20px, 3vw, 38px); }
.subtabs a {
    font-family: var(--font-head);
    font-size: var(--fs-name);
    font-weight: 500;
    color: #9b9b9b;
}
.subtabs a:hover { color: var(--accent); }
.subtabs a.is-active { color: var(--accent); font-weight: 700; }

/* ==================== 6. TRANG HOME — LƯỚI 16 Ô ======================== */
.home {
    position: relative;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
}

.home__bg { position: absolute; inset: 0; overflow: hidden; }
.home__layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    pointer-events: none;
    opacity: 0;
    /* Thời lượng do JS đặt riêng cho từng lớp: tự chuyển chậm, rê chuột nhanh hơn */
    transition-property: opacity, transform;
    transition-duration: 900ms;
    transition-timing-function: cubic-bezier(.33, 0, .2, 1);
    will-change: opacity, transform;
}
.home__layer.is-active { opacity: 1; }

/* Các kiểu hiệu ứng chuyển ảnh nền — chọn trong Quản trị → Cấu hình → Trang chủ.
   Lớp mới sinh ra ở trạng thái "chưa vào", thêm .is-active là chạy về vị trí gốc. */

/* zoom: ảnh mới nở ra rất nhẹ rồi dừng lại (Ken Burns) */
.home__layer--zoom { transform: scale(1.055); }
.home__layer--zoom.is-active { transform: scale(1); }

/* slide: trượt ngang vào khung */
.home__layer--slide { transform: translateX(6%); }
.home__layer--slide.is-active { transform: translateX(0); }

/* slide-up: trượt từ dưới lên */
.home__layer--slide-up { transform: translateY(6%); }
.home__layer--slide-up.is-active { transform: translateY(0); }

/* blur: nhoè rồi rõ dần, kèm phóng rất nhẹ cho khỏi lộ mép */
.home__layer--blur {
    transform: scale(1.04);
    filter: blur(14px);
    transition-property: opacity, transform, filter;
}
.home__layer--blur.is-active { transform: scale(1); filter: blur(0); }
.home__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.38) 0%, rgba(0,0,0,.14) 35%, rgba(0,0,0,.42) 100%);
}

.home__grid {
    position: relative;
    height: 100%;
    padding-top: var(--header-h);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
}

.home__cell {
    position: relative;
    /* Mặc định làm tối, để ô đang xem sáng bật lên so với phần còn lại */
    background-color: rgba(0, 0, 0, .28);
    border-right: 1px solid rgba(255, 255, 255, .3);
    border-bottom: 1px solid rgba(255, 255, 255, .3);
    /* Tắt nhanh để ô cũ không còn sáng khi ô mới đã bật */
    transition: background-color .28s var(--ease), box-shadow .28s var(--ease);
}
.home__cell:nth-child(4n) { border-right: 0; }
.home__cell:nth-child(n + 13) { border-bottom: 0; }

.home__cell > a {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 18px 20px;
    color: #fff;
}

.home__cat {
    font-size: var(--fs-sub);
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .75);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.home__name {
    font-family: var(--font-head);
    font-size: clamp(13px, 1.05vw, 17px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}

/* Ô của dự án đang hiển thị (tự chạy) VÀ ô đang rê chuột đều sáng lên.
   Duyệt bản vẽ đợt 2: "ô transparent không viền" — bỏ hẳn nền trắng mờ và
   vòng viền sáng; ô nổi bật bằng cách GỠ lớp phủ tối, để lộ ảnh thật. */
.home__cell.is-current,
.home__cell:hover {
    background-color: transparent;
    box-shadow: none;
    transition-duration: .5s;
}

/* Nhịp loé nhẹ đúng lúc ảnh nền đổi, để người xem cảm nhận được thời điểm chuyển */
.home__cell.is-current {
    animation: cellLight .95s var(--ease);
}
@keyframes cellLight {
    0%   { background-color: rgba(0, 0, 0, .28); }
    40%  { background-color: rgba(255, 255, 255, .14); }
    100% { background-color: transparent; }
}

.home__cell.is-current .home__cat,
.home__cell:hover .home__cat {
    opacity: 1;
    transform: translateY(0);
}
.home__cell.is-current .home__name,
.home__cell:hover .home__name {
    color: #fff;
    text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: reduce) {
    .home__cell.is-current { animation: none; }
    /* Vẫn giữ nhịp MỜ CHỒNG giữa hai ảnh (không gây chóng mặt), chỉ bỏ phần
       phóng / trượt / nhoè. Trước đây ép còn 1ms nên ảnh đổi phựt một cái,
       cộng với việc JS không chạy vòng chuyển ảnh -> trang chủ đứng im. */
    .home__layer { transform: none !important; filter: none !important; }
}

.home__empty {
    position: relative;
    display: grid;
    place-items: center;
    height: 100%;
    color: #fff;
}

/* ===================== 7. LƯỚI DỰ ÁN + THẺ TILE ======================== */
.tile-grid { display: grid; gap: 4px; }
.tile-grid--4 { grid-template-columns: repeat(4, 1fr); }

.tile > a { display: block; position: relative; }

.tile__media {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--bg-alt);
}
.tile__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.tile > a:hover .tile__media img { transform: scale(1.04); }

.tile__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 16px;
    text-align: center;
    color: #fff;
    background: rgba(60, 60, 60, 0);
    opacity: 0;
    transition: background .4s var(--ease), opacity .4s var(--ease);
}
.tile > a:hover .tile__overlay {
    background: rgba(60, 60, 60, .52);
    opacity: 1;
}
.tile__cat { font-size: var(--fs-sub); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.tile__name {
    font-family: var(--font-head);
    font-size: var(--fs-name);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ==================== 8. CHI TIẾT CÔNG TRÌNH =========================== */
/* Tỉ lệ hai cột đo trên ảnh mẫu bản vẽ Rev1 (slide 9-11): cột thông số hẹp hơn
   và khoảng hở rộng hơn bản cũ, nhờ vậy khung ảnh to ra và trang thoáng hơn.
   Quy về phần trăm bề ngang khối nội dung: cột phải ~22%, khoảng hở ~8%. */
.pd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(250px, 22%, 293px);
    gap: clamp(28px, 8%, 107px);
    /* stretch để cột phải cao bằng khung ảnh, nhờ đó cụm thông số thứ hai
       tụt được xuống đúng mép dưới ảnh */
    align-items: stretch;
}

/* Mốc toạ độ cho hai nút qua/lại. Nút nằm ngoài .pd__stage nên lúc trượt ảnh,
   khung có che phần thừa (overflow: hidden) cũng không cắt vào nút. */
.pd__frame { position: relative; }

/* --- Khung 16:9 --- */
.pd__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    /* Nền TRẮNG (Review-2). Ảnh vuông / chữ nhật đứng không phủ kín khung nên
       hai bên lộ nền; để xám #f2f2f2 như trước thì thành hai mảng xám. */
    background: var(--bg);
    touch-action: pan-y;
    will-change: transform;
}
/* Chuyển ảnh chậm và êm hơn bản đầu (.5s hơi gắt — duyệt bản vẽ đợt 2):
   ảnh mới hiện dần đồng thời lùi rất nhẹ về đúng khung. */
.pd__slide {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;          /* giữ ảnh trong khung, thay cho overflow của .pd__stage */
    opacity: 0;
    visibility: hidden;
    transition: opacity .68s cubic-bezier(.33, 0, .2, 1),
                visibility .68s cubic-bezier(.33, 0, .2, 1);
    cursor: zoom-in;
}
.pd__slide.is-active { opacity: 1; visibility: visible; }

/* ---- Vuốt bằng ngón tay: ảnh kế tiếp bám theo tay 1:1 ----
   .is-peek  = hai ảnh hai bên được dựng sẵn, chờ trượt vào khung.
   .is-dragging = ngón tay đang kéo, tắt sạch hiệu ứng để bám cho sát.
   .is-settling = đã buông tay, ảnh tự trượt nốt về đúng chỗ. */
.pd__slide.is-peek { opacity: 1; visibility: visible; }
.pd__slide.is-peek img { transform: none; transition: none; }

.pd__stage.is-dragging,
.pd__stage.is-settling {
    /* Che hai ảnh bên ngoài khung, không cho tràn sang cột thông số */
    overflow: hidden;
    cursor: grabbing;
}
.pd__stage.is-dragging .pd__slide { transition: none; }
.pd__stage.is-dragging .pd__slide img { transition: none; }
.pd__stage.is-settling .pd__slide {
    transition: transform .38s cubic-bezier(.22, .61, .36, 1);
}


/* Trước đây máy cảm ứng phải cho nút vào trong khung, vì nút nằm bên trong
   .pd__stage mà lúc vuốt khung có che phần thừa nên cắt mất nửa nút. Nay nút
   đã tách ra .pd__frame nên không còn chuyện đó — máy cảm ứng đi theo đúng
   quy tắc bề ngang như máy tính. */
.pd__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.022);
    transition: transform .9s cubic-bezier(.33, 0, .2, 1);
}
.pd__slide.is-active img { transform: scale(1); }

/* Ảnh vuông hoặc chữ nhật đứng: giữ nguyên khổ ảnh, KHÔNG phóng to cho vừa
   khung 16:9. Chiều cao vẫn bằng khung, phần thừa hai bên để trống và ảnh
   canh theo mép trái / giữa / phải tuỳ lựa chọn trong Quản trị
   (duyệt bản vẽ đợt 2). */
.pd__slide--fit img { object-fit: contain; }
.pd__slide--fit.pd__slide--left  img { object-position: left center; }
.pd__slide--fit.pd__slide--right img { object-position: right center; }

@media (prefers-reduced-motion: reduce) {
    .pd__slide img, .pd__slide.is-active img { transform: none; transition: none; }
}

.pd__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    transition: transform .35s var(--ease);
}
.pd__slide:hover .pd__play { transform: scale(1.06); }

/* Nút qua/lại — bản vẽ Rev1 (slide 12 mục 2 và 4):
     • nằm HẲN NGOÀI khung ảnh, cách mép một khoảng --pd-nav-gap;
     • đúng mẫu nút "lên đầu trang" xoay ngang: ô vuông viền mảnh, mũi tên to
       bản phá qua viền, KHÔNG nền trắng và KHÔNG đổ bóng (ra ngoài ảnh rồi thì
       không cần chống chìm nữa);
     • lúc thường màu mực, rê chuột mới chuyển cam.
   RIÊNG HAI NÚT NÀY nhỏ hơn nút chuẩn một chút và có chừa khoảng hở với mép
   ảnh (khách chốt sau khi xem thực tế). Các nút mũi tên còn lại của site vẫn
   giữ đúng 38px = --arrow. Hai con số khai ở .pd để nút của khung ảnh và nút
   của dải xem nhanh bên dưới cùng ăn theo. */
.pd {
    --pd-nav-size: 32px;
    --pd-nav-gap:  10px;
}

.pd__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--pd-nav-size);
    height: var(--pd-nav-size);
    display: grid;
    place-items: center;
    color: var(--ink);
    --box-line: var(--ink);
    border: 1px solid var(--box-line);
    transition: color .25s var(--ease), border-color .25s var(--ease),
                opacity .2s var(--ease);
    z-index: 3;
}
.pd__nav--prev { right: calc(100% + var(--pd-nav-gap)); left: auto; }
.pd__nav--next { left:  calc(100% + var(--pd-nav-gap)); right: auto; }
.pd__nav:hover { color: var(--accent); }

/* --- Dải xem nhanh: ảnh không active phủ trắng mờ 50% ---
   Dải rộng ĐÚNG BẰNG khung ảnh, hai nút qua/lại nằm ngoài dải (bản vẽ Rev1
   slide 12 mục 2). Trước đây hai nút nằm chung một hàng flex với dải nên bóp
   dải hẹp lại, mép trái không thẳng với ảnh lớn.
   Mỗi hàng 4 ảnh, tỉ lệ 16:9 như ảnh mẫu. */
.pd__thumbs {
    position: relative;
    --thumb-gap: clamp(8px, 2.2%, 26px);
    margin-top: var(--thumb-gap);
}
.pd__thumblist {
    display: flex;
    gap: var(--thumb-gap);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.pd__thumblist::-webkit-scrollbar { display: none; }

.pd__thumb { flex: 0 0 calc((100% - 3 * var(--thumb-gap)) / 4); }
.pd__thumb button { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; }
.pd__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd__thumb button::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--veil);        /* trắng mờ 50% — bảng màu Rev1 */
    transition: background .3s var(--ease);
}
.pd__thumb.is-active button::after,
.pd__thumb button:hover::after { background: rgba(255, 255, 255, 0); }

.pd__thumbplay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0;
    border-left: 14px solid #fff;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
    filter: drop-shadow(0 0 4px rgba(0,0,0,.5));
    z-index: 1;
}

/* Nút qua/lại của dải xem nhanh: KHÔNG có ô vuông, chỉ mỗi mũi tên, nhưng
   MŨI TÊN TO BẰNG mũi tên nằm trong ô vuông ở trên (bản vẽ Rev1 slide 12
   mục 4).
   Mũi tên trong ô cao 74% phần ruột ô, tức 74% x (cạnh ô - 2px viền) — svg ở
   đây đã bó viewBox sát nét vẽ (xem chú thích trong project-detail.php) nên
   chiều cao svg CHÍNH LÀ chiều cao nét, đặt đúng con số đó là hai mũi tên bằng
   nhau.

   KHOẢNG HỞ: nút trên là ô vuông nên hở tính từ cạnh ô. Nút dưới không có ô,
   nếu để nét vẽ nằm giữa vùng bấm 32px thì nó bị lùi thêm ~12px nữa, nhìn hở
   gấp đôi nút trên. Vì vậy vùng bấm vẫn giữ 32px cho dễ bấm, nhưng nét vẽ được
   dán sát MÉP TRONG của vùng bấm (justify-items) — nhờ vậy khoảng hở của nét
   vẽ dưới bằng đúng khoảng hở của cạnh ô trên.
   max-width: none để thắng luật chung `svg { max-width: 100% }` ở mục 1.
   Hiệu ứng cũng giống: rê chuột thì mũi tên chuyển cam. */
.pd__thumbnav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: var(--pd-nav-size); height: var(--pd-nav-size);
    color: var(--ink);
    transition: color .25s var(--ease);
    z-index: 2;
}
.pd__thumbnav svg {
    height: calc((var(--pd-nav-size) - 2px) * .74);
    width: auto;
    max-width: none;
}
/* Nét vẽ dán sát mép trong của vùng bấm, không nằm giữa */
.pd__thumbnav--prev { right: calc(100% + var(--pd-nav-gap)); justify-items: end; }
.pd__thumbnav--next { left:  calc(100% + var(--pd-nav-gap)); justify-items: start; }
.pd__thumbnav:hover { color: var(--accent); }

/* CHỖ ĐỨNG CHO NÚT Ở MÀN HÌNH HẸP.
   Nút cần 32px + 10px hở = 42px lề trang. Lề trang (--gutter) đạt 42px từ
   khoảng 1050px trở lên, nên ở khổ máy tính và iPad ngang KHUNG ẢNH GIỮ NGUYÊN
   BỀ NGANG, mép trái vẫn thẳng hàng với tiêu đề trang đúng như bản vẽ.

   Chỉ ở khoảng 761px–1200px (iPad dọc, cửa sổ thu hẹp) lề trang mới sát sao,
   nên chừa hẳn chỗ bằng lề trong của .pd__viewer. Khung ảnh và dải xem nhanh
   cùng nằm trong .pd__viewer nên thu lại bằng nhau, vẫn thẳng hàng với nhau. */
@media (min-width: 761px) and (max-width: 1200px) {
    .pd__viewer { padding: 0 calc(var(--pd-nav-size) + var(--pd-nav-gap)); }
}

/* --- Bảng thông số --- */
/* Hai cụm thông số: cụm đầu bám mép trên, cụm sau bị đẩy xuống đáy cột */
.pd__specs {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pd__specs dl { display: flex; flex-direction: column; }
/* Cụm thông số TRÊN (chủ đầu tư, địa điểm) bỏ đường kẻ của dòng cuối: dưới nó
   là một khoảng trống dài tới cụm thông số thứ hai, để đường kẻ lại thành ra
   một vạch lửng lơ (Review-2 gạch đỏ đúng chỗ này). Cụm DƯỚI vẫn giữ đường kẻ
   cuối vì nó đóng khối, nằm ngang mép dưới khung ảnh. */
.pd__specs > dl:first-child .pd__spec:last-child { border-bottom: 0; }
.pd__spec {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
}
.pd__spec dt {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.pd__spec dd { text-align: right; color: var(--ink-soft); }

/* Cụm thông số thứ hai, nằm ở ĐÁY cột phải (duyệt bản vẽ đợt 2 — mục 23).
   Nhờ .pd__specs dùng space-between, cụm này tự tụt xuống ngang mép dưới
   khung ảnh, chừa khoảng trống ở giữa cho thoáng. */
.pd__specs-more { margin-top: clamp(26px, 3.5vw, 44px); }

.pd__desc { max-width: 900px; margin: clamp(34px, 4vw, 56px) 0 0; }

/* --- Chân trang chi tiết: dự án trước | tất cả | dự án sau --- */
.pd__foot { padding: clamp(26px, 3.5vw, 44px) 0 0; }

.pdnav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(14px, 2.5vw, 32px);
    padding-top: clamp(22px, 3vw, 32px);
    border-top: 1px solid var(--line);
}

.pdnav__side {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;                      /* cho phép tên dài bị cắt gọn */
    color: var(--ink);
}
.pdnav__side--next { justify-content: flex-end; text-align: right; }

/* Cùng mẫu với nút lên đầu trang, xoay ngang (bản vẽ Rev1 slide 17):
   lúc thường mũi tên và viền cùng màu mực, rê chuột mới chuyển cam. */
.pdnav__arrow {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: var(--arrow); height: var(--arrow);
    color: var(--ink);
    --box-line: var(--ink);
    border: 1px solid var(--box-line);
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.pdnav__side:hover .pdnav__arrow { color: var(--accent); }

.pdnav__thumb {
    flex: 0 0 auto;
    width: 68px; height: 48px;
    overflow: hidden;
    background: var(--bg-alt);
}
.pdnav__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.pdnav__side:hover .pdnav__thumb img { transform: scale(1.06); }

.pdnav__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pdnav__label { font-size: var(--fs-sub); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pdnav__name {
    font-family: var(--font-head);
    font-size: var(--fs-name);
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .25s var(--ease);
}
.pdnav__side:hover .pdnav__name { color: var(--accent); }

/* Nút "Quay lại Tin tức / Tất cả dự án".
   Đợt duyệt 2 (chốt lại): nút này KHÔNG dùng kiểu mũi tên cam. Giữ khung viền
   mảnh và biểu tượng 4 ô vuông — hàm ý "xem toàn bộ dạng lưới", nhờ vậy không
   lẫn với hai nút mũi tên trước / sau nằm hai bên.
   Dùng chung cho cuối trang chi tiết VÀ cuối trang danh sách đã lọc hạng mục. */
.all-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 18px;
    font-size: 14px;
    color: var(--ink);
    border: 1px solid var(--line);
    white-space: nowrap;
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.all-link:hover { color: var(--accent); border-color: var(--accent); }
/* Biểu tượng 4 ô vuông. Trước đây dựng bằng 4 thẻ <i> trong một lưới CSS: bề
   ngang và khe hở rơi vào số lẻ nên trình duyệt vẽ mỗi ô một kiểu, nhìn méo mó
   (Review-2: "hiển thị icon Tất dự án không đẹp"). Nay vẽ bằng SVG toạ độ chẵn.

   KHÔNG dùng shape-rendering: crispEdges nữa (Review-3 — "hiển thị trên máy PC
   ... một số chỗ bị lỗi nhẹ"). crispEdges bắt trình duyệt nắn từng ô về đúng
   lưới điểm ảnh, mỗi ô nắn riêng một kiểu; máy tính để mức phóng 110% / 125%
   thì ô này ra 7px, ô kia ra 6px — bốn ô to nhỏ khác nhau, đo trên ảnh khách
   gửi đúng là 7/6 như vậy. Để trình duyệt vẽ theo đúng toạ độ hình học thì bốn
   ô luôn bằng nhau ở mọi mức phóng; ở mức 100% toạ độ vẫn là số chẵn nên nét
   vẫn sắc như cũ. */
.all-link__grid {
    flex: 0 0 auto;
    fill: currentColor;
    shape-rendering: geometricPrecision;
}

/* Nút đứng một mình ở cuối trang danh sách */
.all-row {
    display: flex;
    justify-content: center;
    margin-top: clamp(38px, 5vw, 66px);
}

/* .pdnav__all chỉ còn lo phần xếp chỗ trong lưới điều hướng trước / sau */
.pdnav__all { white-space: nowrap; }

/* --- Dự án liên quan --- */
.related { padding: clamp(50px, 6vw, 90px) 0 clamp(30px, 4vw, 60px); }
.related__carousel { position: relative; margin-top: 34px; }
.related__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 24px) / 3);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.related__track::-webkit-scrollbar { display: none; }
.related__item { scroll-snap-align: start; }
.related__item .tile__media { aspect-ratio: 4 / 3; }
.related__item .tile__overlay { background: rgba(60,60,60,0); opacity: 0; }
.related__item a:hover .tile__overlay { background: rgba(60,60,60,.45); opacity: 1; }
/* Chiều cao cố định của dòng tên, dùng để tính đúng tim ảnh cho nút mũi tên */
.related__carousel { --name-h: 36px; }

.related__name {
    display: block;
    margin-top: 14px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-family: var(--font-head);
    font-size: var(--fs-name);
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.related__item a:hover .related__name { color: var(--accent); }

/* Mũi tên canh đúng TIM CỦA ẢNH, không tính phần chữ bên dưới
   (duyệt bản vẽ đợt 2). 100% = chiều cao ảnh + dòng tên, nên trừ dòng tên ra
   rồi chia đôi là ra đúng giữa ảnh. */
.related__nav {
    position: absolute;
    top: calc((100% - var(--name-h)) / 2);
    transform: translateY(-50%);
    width: var(--arrow); height: var(--arrow);
    display: grid; place-items: center;
    color: var(--ink);
    background: #fff;
    transition: color .25s var(--ease);
    z-index: 2;
}
.related__nav:hover { color: var(--accent); }
.related__nav--prev { left: -8px; }
.related__nav--next { right: -8px; }

/* --- Lightbox toàn màn hình --- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 800;
    overflow: hidden;          /* ảnh phóng to tràn ra ngoài không sinh thanh cuộn */
    /* Nền đặc hoàn toàn để nội dung trang không lờ mờ hiện xuyên qua;
       hiệu ứng mờ dần đã do thuộc tính opacity đảm nhiệm. */
    background: #101010;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .3s var(--ease);
    /* Toàn bộ nền cũng nhận cử chỉ: vuốt trúng mép đen ngoài ảnh vẫn đổi được
       ảnh, và trình duyệt không giành lấy cú vuốt để cuộn trang. */
    touch-action: none;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox__body {
    width: min(92vw, 1600px);
    max-height: 88vh;
    display: grid;
    place-items: center;
    /* Chụm hai ngón để phóng ảnh, không để trình duyệt tự zoom cả trang */
    touch-action: none;
    /* Khối này là thứ trượt ngang khi vuốt đổi ảnh (project.js lo phần chạy) */
    will-change: transform, opacity;
}
/* Bấm vào ảnh KHÔNG thoát nữa (duyệt bản vẽ đợt 2): giữ nguyên toàn màn hình,
   lăn chuột / chụm hai ngón để phóng to - thu nhỏ, kéo để xem chỗ khác. */
.lightbox__body img {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    cursor: zoom-in;
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
}
.lightbox.is-zoomed .lightbox__body img { cursor: grab; }
.lightbox.is-zoomed .lightbox__body img:active { cursor: grabbing; }
.lightbox__body iframe { width: min(92vw, 1600px); aspect-ratio: 16 / 9; height: auto; border: 0; }
.lightbox__body video { max-width: 100%; max-height: 88vh; }

/* Thanh trên cùng: chỉ còn số thứ tự ảnh (nút tắt đã tách ra ngoài để canh
   được theo mép màn hình). Có nền gradient để số luôn đọc được dù ảnh bên
   dưới sáng hay tối. */
.lightbox__bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px clamp(14px, 3vw, 30px);
    background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    z-index: 2;
}
.lightbox__count {
    font-family: var(--font-head);
    font-size: 15px;
    letter-spacing: .08em;
    color: rgba(255, 255, 255, .85);
}

/* Nút tắt: CHỮ X y hệt nút tắt của trang MENU — cùng vị trí, cùng cỡ, cùng
   hiệu ứng xoay 90 độ và đổi màu (bản vẽ Rev1 slide 15). Bản cũ là nút bo tròn
   có chữ "Thu nhỏ", khách yêu cầu bỏ.
   Dùng lại đúng công thức toạ độ của .nav-overlay__close nên hai trang khớp
   nhau; chỉ khác màu chữ vì nền ở đây là ảnh tối. */
.lightbox__close {
    position: absolute;
    top: calc((var(--header-h) - 44px) / 2);
    right: calc(var(--gutter) - (44px - 34px) / 2);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    color: #fff;
    transition: color .25s var(--ease), transform .35s var(--ease);
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox__close:hover { color: var(--accent); transform: rotate(90deg); }

/* Dòng nhắc "Lăn chuột hoặc chụm 2 ngón tay để phóng to" đã bỏ theo yêu cầu
   khách (Review-2), nên phần kiểu dáng của nó cũng gỡ luôn. Các thao tác phóng
   to / kéo ảnh vẫn dùng được, chỉ là không nhắc nữa. */

/* Mũi tên qua lại trong chế độ xem full: thu còn ~65% so với bản đầu
   (duyệt bản vẽ đợt 2 — "hơi lớn, giảm còn khoảng 60-70% là đẹp"). */
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px; height: 36px;   /* ~69% của bản đầu (52px) */
    display: grid; place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 50%;
    transition: color .25s var(--ease), border-color .25s var(--ease),
                background .25s var(--ease);
    z-index: 2;
}
/* Rê chuột hoặc bấm: CHỈ MŨI TÊN chuyển cam, viền tròn và nền giữ nguyên
   (bản vẽ Rev1 slide 15 mục 2). */
.lightbox__nav:hover { color: var(--accent); }
.lightbox__nav--prev { left: clamp(10px, 2vw, 24px); }
.lightbox__nav--next { right: clamp(10px, 2vw, 24px); }
.lightbox__nav svg { width: 18px; height: 18px; }
/* Ảnh phóng to rồi thì mũi tên lùi ra sau, tránh vướng lúc kéo ảnh */
.lightbox.is-zoomed .lightbox__nav { opacity: .35; }

/* ========================= 9. STUDIO =================================== */
/* Ảnh chân dung CAO BẰNG khối chữ bên cạnh (Review-2: "bố cục để tổng chiều
   cao hình bằng tổng chiều cao đoạn Text"). Trước đây ảnh bị khoá tỉ lệ 3:4
   nên luôn kết thúc sớm hơn đoạn chữ, chừa một mảng trống dưới ảnh. */
.about__inner {
    display: grid;
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: clamp(30px, 5vw, 80px);
    align-items: stretch;
}
.about__photo { margin: 0; height: 100%; }
.about__photo img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}
.about__text { text-align: justify; }

.philosophy, .services, .experience { padding: clamp(56px, 7vw, 100px) 0 0; }

.col-grid { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: 38px; }
.col-grid--4 { grid-template-columns: repeat(4, 1fr); }
.col-grid--5 { grid-template-columns: repeat(5, 1fr); }

.col-card__media { position: relative; margin: 0; overflow: hidden; background: var(--bg-alt); }
.col-card__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .7s var(--ease); }
.col-card__scrim {
    position: absolute;
    inset: 0;
    background: rgba(60, 60, 60, 0);
    transition: background .35s var(--ease);
}
.col-card__title {
    margin-top: 16px;
    text-align: center;
    font-size: var(--fs-name);
    font-weight: 600;
    transition: color .25s var(--ease);
}
.col-card__text { margin-top: 10px; text-align: justify; color: var(--muted); font-size: 14px; }

.col-card--link a:hover .col-card__scrim { background: rgba(60, 60, 60, .45); }
.col-card--link a:hover .col-card__title { color: var(--accent); }
.col-card--link a:hover .col-card__media img { transform: scale(1.04); }

/* Trang chi tiết dịch vụ */
.split__inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 70px);
    align-items: start;
}
.split__media { margin: 0; }
.split__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.split__body .rich { text-align: justify; }
.split__body .arrow-link { margin-top: 42px; }

/* Experience */
.exp-grid__title {
    margin-top: 14px;
    font-size: var(--fs-name);
    font-weight: 600;
    text-transform: uppercase;
}
.exp-grid__sub { margin: 2px 0 0; font-size: var(--fs-sub); color: var(--muted); }

.exp-table { padding: clamp(50px, 6vw, 86px) 0 0; }
/* Ba cột thật (không phải CSS columns) để thứ tự đọc chạy TỪ TRÁI SANG PHẢI.
   PHP lo việc đổ công trình vào cột nào và cắt thể loại ở đâu (bản vẽ Rev1
   slide 19); CSS chỉ dựng khung. */
.exp-table__cols {
    --exp-gap: 34px;          /* khoảng cách giữa hai thể loại */

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(28px, 4vw, 60px);
    align-items: start;
}
.exp-table__col { min-width: 0; }
.exp-table__group { margin-bottom: var(--exp-gap); }
.exp-table__heading {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ink);
    font-size: var(--fs-name);
    font-weight: 700;
    text-transform: uppercase;
}
/* Khúc NỐI TIẾP của một thể loại bị cắt sang cột bên cạnh: không hiện lại tên
   thể loại, nhưng vẫn CHỪA ĐÚNG CHỖ của dòng tiêu đề để dòng đầu của ba cột
   thẳng hàng nhau (bỏ hẳn thì cột đó nhảy lên cao hơn 33px, nhìn như lỗi).
   Đường kẻ đậm vẫn vẽ nên đầu ba cột trông đều nhau.
   Dùng color: transparent chứ không phải display: none — trình đọc màn hình
   vẫn đọc được tên thể loại cho mấy dòng này. */
.exp-table__group--noi .exp-table__heading { color: transparent; }

.exp-table__row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.exp-table__row dt { color: var(--ink-soft); }
.exp-table__row dd { color: var(--muted); text-align: right; white-space: nowrap; }

/* ============ 10. ZIGZAG (AWARDS & NEWS) + BÀI VIẾT ===================
   Cấu trúc theo mockup PDF: một DẢI nét đứt chạy suốt bề ngang, tấm ảnh đè
   lên một đầu dải và NHÔ RA khỏi dải trên - dưới.
   Hai nước đẩy thêm: ảnh tràn ra tận mép trang ở phía ngoài, và số thứ tự
   cỡ lớn cắt ngang đường nét đứt.
   ------------------------------------------------------------------- */
.zigzag {
    display: flex;
    flex-direction: column;
    gap: clamp(54px, 7vw, 120px);
    counter-reset: zz;
}

.zigzag__item {
    /* --pad-y: vừa là lề dọc của item, vừa là độ nhô của ảnh ra khỏi dải
       --colgap: khoảng hở ảnh → chữ, giữ đúng ~7,4% bề ngang như mockup */
    --pad-y:  clamp(34px, 4.2vw, 66px);
    --colgap: clamp(38px, 6.5vw, 100px);

    counter-increment: zz;
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--colgap);
    align-items: center;
    padding: var(--pad-y) 0;
}

/* Dải nét đứt: chỉ chiếm phần giữa, chừa ra để ảnh phá lên trên và xuống dưới */
.zigzag__band {
    position: absolute;
    inset: var(--pad-y) 0;
    border: 1px dashed #cfcfcf;
    pointer-events: none;
}

/* Số thứ tự lớn, nằm vắt ngang mép trên của dải.
   Đặt trong dòng chảy của khối chữ (không dùng position:absolute) để ở mọi
   bề ngang nó cũng không bao giờ đè lên tiêu đề. */
.zigzag__index {
    --idx: clamp(42px, 5.8vw, 98px);
    display: block;
    margin: calc(var(--idx) * -.52) 0 clamp(4px, .8vw, 12px);
    font-family: var(--font-head);
    font-size: var(--idx);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: #f0f0f0;
    pointer-events: none;
    user-select: none;
}
.zigzag__index::before { content: counter(zz, decimal-leading-zero); }

/* Ảnh cao vượt dải đúng --pad-y ở trên và dưới.
   Duyệt bản vẽ đợt 2: ảnh KHÔNG tràn ra mép trang nữa mà canh thẳng lề trái
   (hoặc phải) đúng theo thanh tiêu đề bên trên, giống mọi trang khác. */
.zigzag__media {
    position: relative;
    z-index: 2;
    display: block;
    overflow: hidden;
    background: var(--bg-alt);
    margin-block: calc(var(--pad-y) * -1);
}
.zigzag__item.is-flipped .zigzag__media { order: 2; }

/* Đợt duyệt 2 từng cho MỤC ĐẦU TIÊN dán sát mép dưới dải tiêu đề bằng cách bỏ
   lề trên của item, bỏ phần ảnh nhô lên và kéo dải lên đụng mép. Hệ quả: riêng
   mục 1 thì dải nét đứt KHÔNG nằm giữa ảnh (đo được lệch 18px) và cao hơn các
   mục khác — đúng lỗi khách nêu ở bản vẽ Rev1 slide 21, kèm yêu cầu "đồng nhất
   kích thước, vị trí hình đại diện, khung và thông tin".
   Nên phần biệt lệ đó đã BỎ: mọi mục giờ dựng y hệt nhau. Đừng dựng lại. */
.zigzag__media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .7s var(--ease);
}
.zigzag__scrim {
    position: absolute;
    inset: 0;
    background: rgba(60, 60, 60, 0);
    transition: background .35s var(--ease);
}
.zigzag__media:hover .zigzag__scrim { background: rgba(60, 60, 60, .4); }
.zigzag__media:hover img { transform: scale(1.04); }

.zigzag__body {
    position: relative;
    z-index: 2;
    /* Neo chữ vào mép trên của dải để số thứ tự vắt đúng lên đường nét đứt */
    align-self: start;
    /* Lề phải giữ chữ không chạm đường nét đứt bên phải của dải */
    padding-right: clamp(26px, 3.4vw, 50px);
}
.zigzag__item.is-flipped .zigzag__body {
    order: 1;
    padding-right: 0;
    padding-left: clamp(26px, 3.4vw, 50px);
}

/* KHỐI CHỮ CAO BẰNG NHAU Ở MỌI MỤC (bản vẽ Rev1 slide 21: "đồng nhất kích
   thước, vị trí hình đại diện, khung và thông tin").
   Trước đây chiều cao dải nét đứt chạy theo độ dài chữ nên mỗi mục một khác —
   đo được 228 / 278 / 222px trên ba mục của trang Giải thưởng. Nay tiêu đề
   chốt 2 dòng, đoạn tóm tắt chốt 3 dòng: ngắn thì vẫn chiếm đủ chỗ, dài thì
   cắt bớt kèm dấu ba chấm. Nhờ vậy khối chữ luôn cao bằng nhau, kéo theo dải
   nét đứt của mọi mục bằng nhau. */
.zigzag__title {
    font-size: clamp(18px, 1.7vw, 23px);
    text-transform: uppercase;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 2.5em;             /* 2 dòng x line-height 1.25 của h1-h4 */
}
.zigzag__title a:hover { color: var(--accent); }

/* Dấu hiệu bài báo bên ngoài: mở tab mới */
.ext-icon { display: inline-block; vertical-align: baseline; margin-left: 6px; opacity: .6; }

.zigzag__meta { display: flex; gap: 14px; margin: 8px 0 0; font-size: 13px; font-style: italic; color: var(--muted); }
.zigzag__excerpt {
    margin: 14px 0 26px;
    color: var(--ink-soft);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 5.25em;            /* 3 dòng x line-height 1.75 của thân bài */
}

/* Trang bài viết */
.article__head { max-width: 860px; margin: 0 auto; text-align: center; }
.article__meta { display: flex; justify-content: center; gap: 16px; margin: 10px 0 0; font-size: 13px; font-style: italic; color: var(--muted); }
.article__lede {
    margin: 26px 0 0;
    padding: 26px 30px;
    background: var(--hatch), var(--bg-alt);
    color: var(--ink);
    font-size: 16px;
}
.article__cover { margin: clamp(34px, 4vw, 56px) 0 0; }
.article__cover img { width: 100%; aspect-ratio: 16 / 9; max-height: 560px; object-fit: cover; }
.article__body { max-width: 860px; margin: clamp(34px, 4vw, 52px) auto 0; text-align: justify; }

/* Căn đúng cột chữ (860px) để mép trái thẳng hàng với thân bài và khối chia sẻ.
   Chỉ ảnh bìa mới được tràn rộng hơn, vì đó là ảnh mở đầu có chủ ý. */
/* Kịch bản bài viết theo duyệt bản vẽ đợt 2:
       Ảnh đại diện khổ lớn -> Nội dung bài -> Ảnh minh hoạ -> Chú thích
       -> Ảnh minh hoạ -> Chú thích -> ...
   Xếp một cột nên thêm 9-10 ảnh vẫn đọc trôi chảy, mỗi ảnh kèm đúng chú thích
   của nó (nhập trong Quản trị → Bài viết → Ảnh trong bài). */
.article__gallery {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 3.5vw, 46px);
    max-width: 860px;
    margin: clamp(34px, 4vw, 48px) auto 0;
}
.article__gallery figure { margin: 0; }
.article__gallery img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article__gallery figcaption {
    margin-top: 10px;
    font-size: var(--fs-sub);
    font-style: italic;
    color: var(--muted);
}

.article__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 20px;
    max-width: 860px;
    margin: clamp(38px, 5vw, 60px) auto 0;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}
.article__share { display: flex; align-items: center; gap: 10px; }
.article__share-label {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--ink);
}
.article__share a {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border: 1px solid var(--line);
    color: var(--ink-soft);
    transition: color .25s var(--ease), border-color .25s var(--ease),
                background .25s var(--ease);
}
.article__share a:hover { border-color: var(--accent); color: #fff; background: var(--accent); }

/* ========================== 11. CONTACT ================================
   Dựng theo mockup trang 38-39 của PDF: bản đồ khổ 16:9 bên trái, cột phải
   xếp dọc tên công ty -> thông tin -> form gửi liên hệ.
   ---------------------------------------------------------------------- */
/* Dán sát mép dưới dải tiêu đề, giống trang Project (duyệt bản vẽ đợt 2) */
.contact { padding-top: 0; }

.contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(288px, 26%, 380px);
    gap: clamp(30px, 5vw, 84px);
    /* Hai cột bằng chiều cao nhau, mép dưới thẳng hàng như trong bản vẽ */
    align-items: stretch;
}

/* --- Bản đồ --- */
.ct-map {
    position: relative;
    height: 100%;
    min-height: clamp(340px, 32vw, 520px);
    background: var(--bg-alt);
    border: 1px solid var(--line);
}
.ct-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.ct-map.is-full {
    position: fixed;
    inset: 0;
    z-index: 700;
    height: auto;
    border: 0;
}

/* Nút mở rộng đặt ở góc trên bên trái, đúng vị trí trong bản vẽ */
.ct-map__expand {
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: 13px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.ct-map__expand:hover { color: var(--accent); border-color: var(--accent); }

/* Toàn màn hình: nút đổi thành CHỮ X y hệt nút tắt của trang MENU — cùng chỗ,
   cùng cỡ, cùng hiệu ứng xoay 90 độ và chuyển cam (bản vẽ Rev1 slide 26 mục 5).
   Dùng lại đúng công thức toạ độ của .nav-overlay__close nên ba chỗ (trang
   MENU, xem ảnh toàn màn hình, bản đồ mở rộng) đều khớp nhau.
   Bản trước là nút bo tròn nền đen kèm chữ "Thu nhỏ", khách yêu cầu bỏ. */
.ct-map.is-full .ct-map__expand {
    left: auto;
    right: calc(var(--gutter) - (44px - 34px) / 2);
    top: calc((var(--header-h) - 44px) / 2);
    z-index: 5;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    gap: 0;
    color: var(--ink);
    background: none;
    border: 0;
    box-shadow: none;
    transition: color .25s var(--ease), transform .35s var(--ease);
}
.ct-map.is-full .ct-map__expand:hover { color: var(--accent); transform: rotate(90deg); }
.ct-map.is-full .ct-map__expand-text { display: none; }
.ct-map.is-full .ct-map__ico { width: 22px; height: 22px; }

/* Máy không có chuột: trả cả màu lẫn góc xoay, tránh nút nằm nghiêng lại sau
   khi chạm */
@media (hover: none) {
    .ct-map.is-full .ct-map__expand:hover { color: var(--ink); transform: none; }
}
.ct-map__ico--close { display: none; }
.ct-map.is-full .ct-map__ico--open  { display: none; }
.ct-map.is-full .ct-map__ico--close { display: block; }

/* --- Cột thông tin công ty --- */
.ct-side__name {
    margin: 0;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--ink);
    font-size: clamp(17px, 1.5vw, 21px);
    text-transform: uppercase;
    letter-spacing: .02em;
}
.ct-side__info {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}
.ct-side__info li {
    margin-bottom: 11px;
    font-size: 15px;
    line-height: 1.62;
    color: var(--ink-soft);
    text-align: justify;
}
.ct-side__info b { font-weight: 600; color: var(--ink); }
.ct-side__info a:hover { color: var(--accent); }

/* --- Form: các dòng chỉ có gạch chân, như bản vẽ ---
   Khoảng cách giữa hai dòng kẻ lấy ĐÚNG theo bảng thông số ở trang con của
   PROJECTS (bản vẽ Rev1 slide 26 mục 3). Bên đó mỗi dòng là padding 11px trên
   dưới + dòng chữ 26,25px + 1px đường kẻ = 49,25px. Ở đây dùng y hệt con số
   và bỏ luôn lề dưới của .field, nếu không lại cộng thêm vào. */
.ct-form { margin-top: clamp(26px, 3vw, 44px); }
.field { margin-bottom: 0; }
.field input, .field textarea {
    /* display: block để bỏ khoảng hở chân dòng của phần tử inline — không có
       nó thì dưới ô Nội dung thừa ra ~7px, hàng nút Gửi cao hơn hàng nhập liệu */
    display: block;
    width: 100%;
    padding: 11px 2px;
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    transition: border-color .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 116px; }
.field input:focus, .field textarea:focus { outline: 0; border-bottom-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 1; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Nằm dưới nút Gửi. Không đặt min-height: lúc chưa có thông báo thì nó phải
   chiếm 0 chỗ, nếu không lại đội chiều cao khối form lên. */
.contact__note { margin: 12px 0 0; font-size: 14px; }
.contact__note .is-ok  { color: #2e7d32; }
.contact__note .is-err { color: #c62828; }

/* Hàng cuối của form cũng có gạch chân như ba hàng trên, nút Send nằm nép
   sát phải - đúng bố cục PDF. */
/* Hàng nút Gửi cao ĐÚNG BẰNG một hàng nhập liệu phía trên (Review-2: "khoảng
   cách 2 dòng kẻ ở nút gửi cao bằng khoảng cách 2 dòng kẻ chỗ Email").
   Một hàng nhập liệu = 11px + dòng chữ 26,25px + 11px + 1px kẻ = 49,25px.
   Nút cao 38px (ô mũi tên), nên chừa (48,25 - 38) / 2 ≈ 5px trên dưới.
   Lề dọc của .send-btn cũng phải bỏ, nếu không lại cộng thêm 12px. */
.ct-form__foot {
    display: flex;
    justify-content: flex-end;
    padding: 5px 0;
    border-bottom: 1px solid var(--line);
}

/* Nút Send theo Ý BAN ĐẦU của bản vẽ (duyệt bản vẽ đợt 2 — khách thích bản
   này hơn bản nền cam): chữ "Send" trần, mũi tên nằm trong khung vuông viền
   mảnh, không có nền. Gửi xong đổi chữ thành "Sent" và cả chữ lẫn mũi tên
   chuyển màu cam. */
.send-btn {
    --box-line: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 0 0 0 10px;      /* lề dọc do .ct-form__foot lo, xem ghi chú trên */
    background: none;
    border: 0;
    color: var(--ink);
    font-family: var(--font-head);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    transition: color .25s var(--ease);
}
/* Ô mũi tên dùng ĐÚNG mẫu nút "dự án sau" ở trang chi tiết: ô vuông cùng cỡ,
   mũi tên to bản, hai cánh phá qua viền và đoạn viền đó bị xoá.
   Ba trạng thái vẽ trong bản vẽ Rev1 slide 26: thường (đen) → rê chuột / bấm
   (cam) → gửi xong đổi chữ thành "Sent" và giữ nguyên màu cam. */
.send-btn__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--arrow);
    height: var(--arrow);
    color: var(--ink);
    border: 1px solid var(--box-line);
    transition: color .25s var(--ease), border-color .25s var(--ease),
                transform .25s var(--ease);
}
.send-btn:hover:not(:disabled) { color: var(--accent); }
.send-btn:hover:not(:disabled) .send-btn__icon {
    color: var(--accent);
    transform: translateX(3px);
}

.send-btn.is-sent { color: var(--accent); }
.send-btn.is-sent .send-btn__icon { color: var(--accent); }

.send-btn:disabled { cursor: default; }
.send-btn.is-busy { opacity: .5; }

/* ========================== 12. FOOTER ================================= */
.site-footer {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;                       /* không co lại khi trang ngắn */
    margin-top: clamp(60px, 8vw, 110px);
    /* Chân trang KHÔNG kẻ sọc, để nền đen phẳng (Review-2: "Bỏ chi tiết kẻ
       sọc"). Trước đây có một lớp sọc trắng rất mờ cho đỡ phẳng. */
    background: var(--dark);
    color: #d8d8d8;
}
.site-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 26px var(--gutter);
}

.site-footer__contact { display: flex; align-items: center; gap: 14px; }
.ficon {
    display: grid;
    place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #fff;
    color: var(--dark);
    transition: background .25s var(--ease), color .25s var(--ease);
}
.ficon:hover { background: var(--accent); color: #fff; }
.ficon--zalo { background: #0068ff; color: #fff; font-size: 11px; font-weight: 700; }
.ficon--zalo:hover { background: var(--accent); }

.site-footer__social { display: flex; align-items: center; gap: 28px; }
.site-footer__social > a { font-size: 15px; color: #d8d8d8; }
.site-footer__social > a:hover { color: var(--accent); }

/* Nút lên đầu trang — bản vẽ Rev1 slide 8 lấy nút này làm MẪU CHUẨN cho mọi
   nút mũi tên vuông của site:
     • hình vuông, cạnh bằng đường kính icon Zalo (38px = var(--arrow));
     • lúc thường TRẮNG TOÀN BỘ, cả viền lẫn mũi tên;
     • rê chuột hoặc bấm thì CHỈ MŨI TÊN chuyển cam, viền giữ nguyên trắng.
   Trước đây mũi tên cam sẵn (đợt duyệt 2) — Rev1 đổi lại như trên. */
.to-top {
    display: grid;
    place-items: center;
    width: var(--arrow); height: var(--arrow);
    color: #fff;
    --box-line: #fff;
    border: 1px solid var(--box-line);
    transition: color .25s var(--ease), border-color .25s var(--ease),
                background .25s var(--ease);
}
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { color: var(--accent); }

/* Dải bản quyền dưới cùng, tách khỏi hàng biểu tượng bằng một vạch mờ */
.site-footer__legal { border-top: 1px solid rgba(255, 255, 255, .13); }
.site-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 24px;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 15px var(--gutter) 18px;
}
.site-footer__legal p {
    margin: 0;
    font-size: 13px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .58);
}

/* ============== 13. PHÂN TRANG / TRẠNG THÁI / PHỤ ===================== */
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: clamp(40px, 5vw, 70px); }
.pager a, .pager span {
    display: grid;
    place-items: center;
    min-width: 38px; height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    font-family: var(--font-head);
    color: var(--muted);
}
.pager a:hover { border-color: var(--accent); color: var(--accent); }
.pager .is-active { border-color: var(--ink); color: var(--ink); font-weight: 600; }
.pager__gap { border: 0; }

.empty-note { padding: 60px 0; text-align: center; color: var(--muted); }

.status-page { padding: clamp(50px, 9vw, 130px) 0; text-align: center; }
.status-page__code { font-family: var(--font-head); font-size: clamp(60px, 12vw, 140px); font-weight: 700; color: var(--line); margin: 0; line-height: 1; }
.status-page__msg { margin: 12px 0 34px; color: var(--muted); }
.status-page .arrow-link { justify-content: center; }

/* ========================= 14. RESPONSIVE ============================== */
@media (max-width: 1200px) {
    .pd { grid-template-columns: 1fr; }
    .pd__specs { max-width: 560px; }

    /* Màn hình hẹp: xếp một cột. .exp-table__col tan ra, các thể loại thành
       hàng dọc đúng thứ tự PHP đã đổ (cột trái → giữa → phải), tức đúng thứ tự
       gốc của danh sách.
       align-items: stretch — KHÔNG để lọt align-items: start của bản lưới:
       ở đây trục ngang là trục phụ, "start" làm mỗi thể loại co lại vừa bằng
       chữ thay vì rộng hết khổ (lỗi cũ, nhìn rất lệch). */
    .exp-table__cols {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .exp-table__col  { display: contents; }

    /* Thể loại bị cắt đôi ở bản 3 cột: xếp một cột thì hai khúc nằm LIỀN NHAU,
       nên bỏ hẳn dòng tiêu đề đã chừa chỗ ở bản 3 cột và khử luôn khoảng cách
       giữa hai khúc — đọc ra đúng MỘT danh sách liên tục, không ai thấy là nó
       từng bị cắt. */
    .exp-table__group--noi { margin-top: calc(-1 * var(--exp-gap)); }
    .exp-table__group--noi .exp-table__heading { display: none; }
    .related__track { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 1024px) {
    :root { --header-h: 68px; }

    .main-nav { display: none; }              /* chỉ còn logo + nút 3 gạch */

    /* Menu ngang bị ẩn nên không còn gì đẩy nút 3 gạch sang phải nữa,
       phải tự đẩy để nút luôn canh sát lề phải */
    .burger { margin-left: auto; }

    .tile-grid--4 { grid-template-columns: repeat(3, 1fr); }
    .col-grid--4  { grid-template-columns: repeat(2, 1fr); }
    .col-grid--5  { grid-template-columns: repeat(3, 1fr); }

    /* Xếp một cột thì ảnh nằm trên chữ, không còn gì để cao bằng nữa — trả ảnh
       về khổ ngang cố định thay vì kéo dài theo chữ. */
    .about__inner { grid-template-columns: 1fr; }
    .about__photo { height: auto; }
    .about__photo img { height: auto; aspect-ratio: 4 / 3; }
    .split__inner { grid-template-columns: 1fr; }
    /* Contact: bản đồ nằm trên, thông tin và form xuống dưới */
    .contact__grid { grid-template-columns: 1fr; gap: clamp(26px, 4vw, 40px); }
    .ct-side__info li { text-align: left; }

    /* Home: 16 ô xếp 2 cột x 8 hàng, chữ nhỏ lại */
    .home__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(8, 1fr); }
    .home__cell:nth-child(4n) { border-right: 1px solid rgba(255,255,255,.3); }
    .home__cell:nth-child(2n) { border-right: 0; }
    .home__cell:nth-child(n + 13) { border-bottom: 1px solid rgba(255,255,255,.3); }
    .home__cell:nth-child(n + 15) { border-bottom: 0; }
    .home__cell > a { padding: 10px 12px; }
}

/* Dưới ngưỡng này, ảnh nhỏ trong khung trước/sau ăn hết chỗ của tên bài
   (còn ~119px ở khổ 768 nên tên bị cắt cụt). Bỏ ảnh, nhường chỗ cho chữ. */
@media (max-width: 860px) {
    .pdnav__thumb { display: none; }
}

@media (max-width: 760px) {
    body { font-size: 14.5px; }

    .tile-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .col-grid--5  { grid-template-columns: repeat(2, 1fr); }

    /* Zigzag đổ thành 1 cột, bỏ phần khung đè nhau */
    .zigzag__item { grid-template-columns: 1fr; }
    .zigzag__item.is-flipped .zigzag__media { order: 0; }
    .zigzag__item.is-flipped .zigzag__body { order: 0; }

    /* Xếp dọc thì các mục nằm rời nhau, không còn cần cao bằng nhau nữa — bỏ
       phần chừa chỗ cố định để tiêu đề một dòng khỏi hở một khoảng trống bên
       dưới. Vẫn giữ giới hạn số dòng cho bài nào chữ quá dài. */
    .zigzag__title, .zigzag__excerpt { min-height: 0; }
    /* Xếp dọc: ảnh tràn hết bề ngang màn hình, khối chữ thành một khung nét
       đứt riêng kéo lên đè mép dưới ảnh. Lề TRÊN phải cộng thêm đúng phần đè
       đó, nếu không tiêu đề sẽ chạm vào đáy ảnh. */
    .zigzag__item {
        grid-template-columns: 1fr;
        padding: 0;
    }
    .zigzag__band { display: none; }

    /* Điện thoại: ảnh vẫn canh đúng lề như thanh tiêu đề, không tràn ra mép */
    .zigzag__media,
    .zigzag__item.is-flipped .zigzag__media {
        order: 0;
        margin: 0;
    }
    .zigzag__media img { aspect-ratio: 3 / 2; }

    .zigzag__body,
    .zigzag__item.is-flipped .zigzag__body {
        --overlap-y: 26px;
        --pad-m: clamp(22px, 5vw, 32px);
        order: 0;
        margin: calc(var(--overlap-y) * -1) clamp(8px, 3vw, 20px) 0;
        padding: calc(var(--overlap-y) + var(--pad-m)) var(--pad-m) var(--pad-m);
        border: 1px dashed #cfcfcf;
        background: #fff;
    }

    /* Số thứ tự nằm gọn trong khung chữ, không nhô lên đè vào ảnh */
    .zigzag__index {
        margin: 0 0 6px;
        font-size: 32px;
        color: #e2e2e2;
    }

    .related__track { grid-auto-columns: 78%; }
    .related__nav { display: none; }

    /* Điện thoại: chừa 2 x 42px cho nút thì ảnh chẳng còn lại bao nhiêu, nên ở
       khổ này cho nút vào TRONG mép ảnh — đúng ảnh mẫu giao diện điện thoại
       (bản vẽ Rev1 slide 13).
       KHÔNG đổ nền cho nút (Review-2: "nút chuyển hình ô vuông, không có nền
       solid") — chỉ còn ô vuông viền mảnh nằm trên ảnh. */
    .pd__nav--prev { left: 8px;  right: auto; }
    .pd__nav--next { right: 8px; left: auto; }

    /* Ở khổ này nút nằm ĐÈ LÊN dải ảnh chứ không đứng ngoài, nên nét vẽ trả về
       giữa vùng bấm cho cân, không dán mép như bản máy tính. */
    .pd__thumbnav--prev { left: 0;  right: auto; }
    .pd__thumbnav--next { right: 0; left: auto; }
    .pd__thumbnav { justify-items: center; }

    /* Xem full trên điện thoại: mũi tên nhỏ thêm nữa cho đỡ che ảnh */
    .lightbox__nav { width: 34px; height: 34px; }
    .lightbox__nav svg { width: 15px; height: 15px; }

    /* Điều hướng dự án: trước | sau nằm một hàng, "tất cả" xuống hàng dưới */
    .pdnav { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
    .pdnav__side { order: 1; gap: 10px; }
    .pdnav__side--next { order: 2; }
    .pdnav__all { order: 3; grid-column: 1 / -1; justify-self: center; }
    .pdnav__arrow { width: 36px; height: 36px; }
    .pdnav__label { font-size: 11px; }
    .pdnav__name { font-size: 14px; }

    .site-footer__inner { flex-direction: column; align-items: flex-start; }
    .site-footer__social { width: 100%; justify-content: space-between; gap: 14px; }

    .home { height: auto; min-height: 0; }
    .home__bg { position: fixed; }
    .home__grid { height: auto; grid-template-rows: none; padding-top: calc(var(--header-h) + 8px); }
    .home__cell { aspect-ratio: 16 / 10; }
}

@media (max-width: 480px) {
    .tile-grid--4 { grid-template-columns: 1fr; }
    .col-grid--4  { grid-template-columns: 1fr; }
    /* Experience trên điện thoại: giữ 2 ảnh mỗi hàng cho trang khỏi dài lê thê
       (duyệt bản vẽ đợt 2). Máy tính và iPad vẫn 5 ảnh mỗi hàng như cũ. */
    .col-grid--5  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .exp-grid__title { font-size: 14px; }
    .exp-grid__sub   { font-size: 12px; }

    /* Home vẫn giữ 2 cột để đỡ phải cuộn 16 màn hình */
    .home__cell { aspect-ratio: 3 / 4; }
    .home__name { font-size: 12px; letter-spacing: .02em; }
    .home__cat  { font-size: 11px; }
}

/* ============ 15. THIẾT BỊ CẢM ỨNG — KHÔNG GIỮ TRẠNG THÁI HOVER ==========
   Trên điện thoại và iPad, sau khi chạm một nút thì trình duyệt vẫn giữ :hover
   cho tới lúc chạm chỗ khác — nên bấm "lên đầu trang" xong kéo xuống, mũi tên
   vẫn đứng màu cam (duyệt bản vẽ đợt 2). Máy không có chuột thì trả nút về
   đúng màu gốc; máy tính vẫn giữ nguyên hiệu ứng rê chuột.
   ------------------------------------------------------------------------ */
@media (hover: none) {
    .to-top:hover                       { color: #fff; }
    .pd__nav:hover                      { color: var(--ink); }
    .pd__thumbnav:hover,
    .related__nav:hover                 { color: var(--ink); }
    .pager a:hover                      { color: var(--muted); border-color: var(--line); }

    .lightbox__nav:hover                { color: #fff; }
    /* Nút tắt dạng chữ X: trả cả màu lẫn góc xoay, tránh nút nằm nghiêng lại
       sau khi chạm (giống cách xử lý nút tắt của trang MENU ngay dưới đây). */
    .lightbox__close:hover              { color: #fff; transform: none; }

    /* Màu gốc của mũi tên là MÀU MỰC, cam chỉ xuất hiện lúc rê chuột; ô vuông
       thì không bao giờ đổi màu (Review-2). Máy cảm ứng không có "rê chuột"
       nên trả mũi tên và chữ về màu mực, tránh nút nằm lại màu cam sau khi chạm. */
    .arrow-link:hover                   { color: var(--ink); }
    .arrow-link:hover .arrow-link__icon { color: var(--ink); }
    .pdnav__side:hover .pdnav__arrow    { color: var(--ink); }
    .pdnav__side:hover .pdnav__name     { color: var(--ink); }
    .ct-map__expand:hover               { color: var(--ink); border-color: var(--line); }

    /* Nút Send: chỉ trả về màu mực khi CHƯA gửi. Gửi xong ("Sent") phải giữ
       màu cam đúng như bản vẽ, nên loại trạng thái is-sent ra khỏi phép trả. */
    .send-btn:hover:not(.is-sent)                  { color: var(--ink); }
    .send-btn:hover:not(.is-sent) .send-btn__icon  { color: var(--ink); transform: none; }

    .ficon:hover                        { background: #fff; color: var(--dark); }
    .ficon--zalo:hover                  { background: #0068ff; color: #fff; }
    .site-footer__social > a:hover      { color: #d8d8d8; }

    .nav-overlay__close:hover           { color: var(--ink); transform: none; }
    .nav-overlay__menu a:hover          { color: var(--ink); }

    .burger:hover span                  { background: var(--ink); }
    .burger:hover span:nth-child(1)     { width: 23px; }
    .burger:hover span:nth-child(2)     { width: 34px; }
    .burger:hover span:nth-child(3)     { width: 26px; }
    .is-home .site-header .burger:hover span { background: #fff; }
}

/* In ấn */
@media print {
    .site-header, .nav-overlay, .site-footer, .loader, .lightbox { display: none !important; }
    .site-main { padding-top: 0; }
}