/* =========================================================================
   NgoiSaoXanh — utilities: khoảng cách, chữ, màu, ảnh, cắt dòng
   Thang khoảng cách: 0 1 2 3 4 5 6 8 10 12 16 20 24  (x 4px)
   ========================================================================= */

/* ---- Margin ---- */
.m-0 { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }       .mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: var(--sp-1); }        .mb-1 { margin-bottom: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }        .mb-2 { margin-bottom: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }        .mb-3 { margin-bottom: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }        .mb-4 { margin-bottom: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }        .mb-5 { margin-bottom: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }        .mb-6 { margin-bottom: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }        .mb-8 { margin-bottom: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }      .mb-10 { margin-bottom: var(--sp-10); }
.mt-12 { margin-top: var(--sp-12); }      .mb-12 { margin-bottom: var(--sp-12); }
.mt-16 { margin-top: var(--sp-16); }      .mb-16 { margin-bottom: var(--sp-16); }
.mt-20 { margin-top: var(--sp-20); }      .mb-20 { margin-bottom: var(--sp-20); }

/* ---- Padding ---- */
.p-0 { padding: 0 !important; }
.p-4 { padding: var(--sp-4); }
.p-6 { padding: var(--sp-6); }
.p-8 { padding: var(--sp-8); }
.px-4 { padding-inline: var(--sp-4); }    .py-2 { padding-block: var(--sp-2); }
.px-6 { padding-inline: var(--sp-6); }    .py-4 { padding-block: var(--sp-4); }
.px-8 { padding-inline: var(--sp-8); }    .py-6 { padding-block: var(--sp-6); }
.pt-0 { padding-top: 0 !important; }      .py-8 { padding-block: var(--sp-8); }
.pb-0 { padding-bottom: 0 !important; }   .py-12 { padding-block: var(--sp-12); }

/* ---- Cỡ chữ ---- */
.text-display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: var(--fw-bold); letter-spacing: -.01em; text-transform: uppercase; color: var(--text); }
.text-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.text-h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.text-h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.text-h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); }
.text-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--muted); }
.text-base { font-size: var(--fs-base); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.text-stat { font-size: var(--fs-stat); line-height: 1; font-weight: var(--fw-bold); color: var(--accent); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; }

/* ---- Độ đậm / kiểu ---- */
.fw-light { font-weight: var(--fw-light); }
.fw-regular { font-weight: var(--fw-regular); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.fw-black { font-weight: var(--fw-black); }
.uppercase { text-transform: uppercase; letter-spacing: .04em; }
.normal-case { text-transform: none; letter-spacing: normal; }  /* bỏ in hoa của .section-title / .text-display */
.tracking-wide { letter-spacing: var(--tracking-wide); }
.italic { font-style: italic; }
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }
.break-word { overflow-wrap: anywhere; }

/* ---- Căn ---- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* ---- Màu chữ ---- */
.text-white { color: var(--text); }
.text-body { color: var(--text-2); }
.text-muted { color: var(--muted); }
.text-muted-2 { color: var(--muted-2); }
.text-accent { color: var(--accent); }
.text-warm { color: var(--warm); }
.text-danger { color: var(--danger); }
/* Tô xanh 1 từ khoá trong tiêu đề: <h1>TỪ Ý TƯỞNG ĐẾN <span class="hl">CÔNG TRÌNH</span>.</h1> */
.hl { color: var(--accent); }

/* ---- Độ rộng đoạn văn ---- */
.measure { max-width: 62ch; }
.measure-sm { max-width: 44ch; }
.measure-center { max-width: 62ch; margin-inline: auto; }

/* ---- Cắt dòng (thay .line1…4 cũ) ---- */
.clamp-1, .clamp-2, .clamp-3, .clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Khung ảnh theo tỉ lệ (thay .imgH/.imgW/.postImg cũ) ----
   <div class="media ratio-4x3"><img src=".." alt=".." width=".." height=".." loading="lazy"></div>
   Ảnh luôn phủ kín khung (object-fit: cover). Dùng .media-contain cho ảnh sản phẩm nền trắng. */
.media { position: relative; overflow: hidden; background-color: var(--surface); }
.media > img, .media > picture > img, .media > video, .media > iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.media-contain > img, .media-contain > picture > img { object-fit: contain; padding: var(--sp-4); }
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-4x3 { aspect-ratio: 4 / 3; }
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-3x2 { aspect-ratio: 3 / 2; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-21x9 { aspect-ratio: 21 / 9; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.object-cover { object-fit: cover; }
.object-contain { object-fit: contain; }

/* Lớp phủ tối trên ảnh để đặt chữ: thêm .overlay (từ dưới lên) hoặc .overlay-side (từ trái sang) vào .media/.hero */
.overlay::after, .overlay-side::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.overlay::after { background: var(--overlay); }
.overlay-side::after { background: var(--overlay-side); }

/* Zoom ảnh khi hover (chỉ thiết bị có chuột). Đặt .zoom lên phần tử cha (card/link) chứa .media */
@media (hover: hover) {
    .zoom .media > img, .zoom.media > img { transition: transform var(--dur-slow) var(--ease); }
    .zoom:hover .media > img, .zoom.media:hover > img,
    .zoom:focus-within .media > img { transform: scale(var(--zoom)); }
}

/* ---- Viền, bo góc, bóng ---- */
.border { border: 1px solid var(--border); }
.border-accent { border: 1px solid var(--accent-line); }
.rounded-0 { border-radius: 0; }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.glow { box-shadow: var(--glow); }

/* ---- Tương tác ---- */
.pointer { cursor: pointer; }
.no-pointer { pointer-events: none; }
.select-none { user-select: none; }
/* Làm cả card bấm được: đặt .stretched-link vào <a> tiêu đề, cha có position: relative */
.stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }