/* ================================================================
   Adam Solutions — ngôn ngữ đồ hoạ: biên tập + HUD kỹ thuật (ENH-067)
   9 thành phần dùng chung toàn site.
   Kỷ luật: mỗi màn hình tối đa 1 ghost-word + 1 vrail + 2–3 hud-block.
   ================================================================ */

/* ---- 1. ghost-word — chữ khổng lồ mờ làm nền ---- */
.ghost-word {
	position: absolute; z-index: 0; pointer-events: none; user-select: none;
	font-size: var(--fs-ghost); font-weight: 800; line-height: .78;
	letter-spacing: -.04em; text-transform: uppercase; white-space: nowrap;
	color: #fff; opacity: .035;
	/* KHÔNG dùng `contain: paint` hay `translateZ(0)` ở đây. Đã đo có đối chứng
	   (BUG-017, 4 kịch bản × 2 viewport × 3 lượt): `contain: paint` làm TỆ ĐI rõ rệt
	   (50fps / 4 frame >50ms ở tải cao), `translateZ(0)` không cải thiện.
	   Cách đúng là bỏ qua render section ngoài màn hình — xem `content-visibility` dưới. */
}
.ghost-word--l { transform: translateY(-50%); }
.ghost-word--r { transform: translateY(-50%); }
.ghost-word--l { left: -.06em; top: 50%; transform: translateY(-50%); }
.ghost-word--r { right: -.06em; top: 50%; transform: translateY(-50%); }
.ghost-word--tl { left: -.05em; top: -.12em; }
.ghost-word--outline { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); opacity: 1; }
.has-ghost { position: relative; overflow: hidden; }
.has-ghost > .container { position: relative; z-index: 1; }

/* ---- 2. vrail — chữ dọc bám mép màn hình ---- */
.vrail {
	position: absolute; z-index: 2; pointer-events: none;
	font-size: var(--fs-micro); font-weight: 600;
	letter-spacing: var(--tr-micro); text-transform: uppercase;
	color: var(--a-text-dim); white-space: nowrap;
}
.vrail--r { right: 26px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: right center; }
.vrail--l { left: 26px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; }
.vrail em { font-style: normal; color: var(--a-red); }

/* ---- 3. (đã gỡ index-mark ở Phase 84 — xem ENH-071) ---- */

/* ---- 4. hud-block — khối dữ liệu kỹ thuật ---- */
.hud-block {
	display: grid; gap: 3px;
	font-family: var(--font-mono); font-size: var(--fs-hud);
	letter-spacing: var(--tr-hud); line-height: 1.45;
	padding-left: 12px; position: relative;
}
.hud-block::before {
	content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
	width: 1px; background: linear-gradient(var(--a-red), transparent);
}
.hud-block__k { color: var(--a-text-dim); text-transform: uppercase; }
.hud-block__v { color: var(--a-text); font-weight: 500; }
.hud-block__v i { font-style: normal; color: var(--a-red); }
.hud-row { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-7); }

/* ---- 5. spec-chip — chip thông số ---- */
.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.spec-chip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 9px;
	border: 1px solid var(--a-border);
	font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tr-hud);
	color: var(--a-text-muted); text-transform: uppercase; white-space: nowrap;
}
.spec-chip b { font-weight: 600; color: var(--a-text); }
.spec-chip--red { border-color: rgba(225,29,42,.42); color: var(--a-red-hover); }

/* ---- 6. hair-rule + 7. dash-link ---- */
.hair-rule { height: 1px; background: var(--a-border); border: 0; margin: 0; }
.hair-rule--fade { background: linear-gradient(to right, var(--a-border), transparent); }
.dash-link {
	position: relative; padding-left: 46px;
	font-family: var(--font-mono); font-size: var(--fs-hud);
	letter-spacing: var(--tr-hud); color: var(--a-text-dim);
}
.dash-link::before {
	content: ""; position: absolute; left: 0; top: 50%; width: 36px; height: 1px;
	background: repeating-linear-gradient(to right, var(--a-text-dim) 0 4px, transparent 4px 8px);
}

/* ---- 8. bracket-frame — khung đỏ mảnh LỆCH khỏi ảnh ---- */
.bracket-frame { position: relative; }
.bracket-frame::before, .bracket-frame::after {
	content: ""; position: absolute; width: 46px; height: 46px;
	border: 1px solid var(--a-red); pointer-events: none;
	transition: .3s var(--ease);
}
.bracket-frame::before { top: -10px; left: -10px; border-right: 0; border-bottom: 0; }
.bracket-frame::after  { bottom: -10px; right: -10px; border-left: 0; border-top: 0; }
.bracket-frame:hover::before { top: -16px; left: -16px; }
.bracket-frame:hover::after  { bottom: -16px; right: -16px; }

/* ---- 9. dot-mark ---- */
.dot-mark { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--a-red); box-shadow: 0 0 9px var(--a-red); }

/* ---- Nhãn micro (dùng thay .section__eyebrow cũ) ---- */
.micro {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: var(--fs-micro); font-weight: 600;
	letter-spacing: var(--tr-micro); text-transform: uppercase;
	color: var(--a-text-dim);
}
.micro--red { color: var(--a-red); }
.micro::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.micro--bare::before { display: none; }

/* ---- Bố cục lệch lưới ---- */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-5); align-items: start; }
.off-a { grid-column: 1 / span 6; }
.off-b { grid-column: 8 / span 5; padding-top: var(--sp-9); }
.off-c { grid-column: 2 / span 5; padding-top: var(--sp-7); }
.off-d { grid-column: 7 / span 6; }
.off-full { grid-column: 1 / -1; }

/* ---- Số liệu nét mảnh ---- */
.stat__num { font-size: var(--fs-stat) !important; font-weight: 200 !important; letter-spacing: -.02em; }
.stat__num sup { font-weight: 400; }

/* ---- Áp lại tiêu đề section theo thang mới ---- */
.section__title { font-size: var(--fs-d2); letter-spacing: -.02em; }
.section__eyebrow {
	font-size: var(--fs-micro); letter-spacing: var(--tr-micro); font-weight: 600;
	color: var(--a-text-dim);
}
.section__eyebrow::before { width: 22px; opacity: .6; background: currentColor; }

/* ---- Ghi đè component cũ theo ngôn ngữ mới ---- */
/* Bỏ bo góc: ref dùng góc vuông, hairline thay viền dày */
.card, .cat-tile, .quote, .project-card, .quote-form, .field input,
.field select, .field textarea, .search-form input[type="search"],
.btn, .spec-chip, .pagination .page-numbers { border-radius: 0; }

.card, .quote { background: transparent; border-color: var(--a-border-soft); }
.card:hover { transform: none; box-shadow: none; border-color: var(--a-red); }
.card__title { font-size: 1.05rem; letter-spacing: -.01em; }
.entry-meta, .news-card__date {
	font-family: var(--font-mono); font-size: var(--fs-hud);
	letter-spacing: var(--tr-hud); text-transform: uppercase;
}

.section__head { position: relative; }
/* index + micro nằm cùng hàng, tiêu đề xuống dòng dưới */
.section__head .micro { margin-bottom: var(--sp-3); }
.section__head .section__title { margin-top: var(--sp-2); }

.archive-header .micro { margin-bottom: var(--sp-3); }
.archive-title { font-size: var(--fs-d2); }
.archive-header .hair-rule { margin-top: var(--sp-5); }

.breadcrumb { font-family: var(--font-mono); font-size: var(--fs-hud); letter-spacing: var(--tr-hud); text-transform: uppercase; }

.page-hero h1 { font-size: var(--fs-d1); line-height: 1.04; }
.error-404 h1 { font-size: var(--fs-d1); color: var(--a-text); }

/* Marquee thương hiệu: chữ mảnh hơn, đúng chất biên tập */
.brand-item { font-weight: 300; letter-spacing: .06em; font-size: 1.05rem; }

/* Nút: vuông, chữ nhỏ giãn rộng */
.btn { letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; padding: 15px 28px; }
.btn--lg { font-size: .82rem; padding: 18px 34px; }
.btn:hover { transform: none; box-shadow: none; }
.btn--ghost:hover { border-color: var(--a-red); }

/* Bracket phải nằm trên ô bọc ngoài — .project-card có overflow:hidden sẽ cắt mất */
.project-cell { position: relative; }
.project-cell.is-hidden { display: none; }

/* Filter: vuông, chữ micro giãn rộng — pill bo tròn lệch hẳn ngôn ngữ mới */
.filter-bar { gap: 0; border-bottom: 1px solid var(--a-border-soft); }
.filter-bar button {
	border: 0; border-bottom: 1px solid transparent; border-radius: 0;
	padding: 10px 16px; margin-bottom: -1px;
	font-family: var(--font-mono); font-size: var(--fs-hud);
	letter-spacing: var(--tr-hud); text-transform: uppercase;
}
.filter-bar button:hover { border-bottom-color: var(--a-text-dim); }
.filter-bar button.is-active { background: transparent; color: var(--a-red); border-bottom-color: var(--a-red); }

/* ---- Responsive: dưới 900px quy về lưới thường, giảm tải trang trí ---- */
@media (max-width: 1200px) {
	.vrail { display: none; }
}
@media (max-width: 900px) {
	.grid12 { grid-template-columns: 1fr; }
	.off-a, .off-b, .off-c, .off-d { grid-column: 1 / -1; padding-top: 0; }
	.ghost-word { font-size: clamp(90px, 34vw, 200px); opacity: .028; }
	/* Bỏ độ lệch âm: ở cỡ chữ mobile, `-.06em` ≈ 8px lọt ra ngoài mép phải và
	   sinh cuộn ngang toàn trang (chữ tràn sang TRÁI thì vô hại). */
	.ghost-word--r { right: 0; }
	.ghost-word--l { left: 0; }
	.ghost-word--tl { left: 0; }
	.bracket-frame::before, .bracket-frame::after { width: 26px; height: 26px; }
	.hud-row { gap: var(--sp-4) var(--sp-5); }
}

/* ---- Bỏ qua render section ngoài màn hình ----
   `content-visibility: auto` cho trình duyệt bỏ hẳn layout + paint của section chưa nhìn thấy.
   `contain-intrinsic-size` giữ chiều cao ước lượng để thanh cuộn không nhảy.

   CHỈ áp cho section ở luồng thường. TUYỆT ĐỐI KHÔNG áp cho `.stage` hay tổ tiên của
   `.stage__viewport` / `.stage__chapter-inner` — content-visibility tạo containment và
   sẽ phá `position: sticky` của sân khấu. */
.section:not(.has-ghost),
.section--alt,
.brands,
.cta-final {
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}