/* about.html — ảnh + video ĐAN XEN với chữ (thêm 5/10/2026), mỗi mục một kiểu, không lặp kiểu của 3 trang service:
     .aw-arch     Who we are        — video trong khung VÒM dưới tiêu đề + chip video nhỏ dưới đoạn văn
     .aw-depth    Meet the founder  — 2 lớp (video xưởng mộc + ảnh dụng cụ) trôi lệch tốc độ, chữ số "III" rỗng phía sau
     .aw-backdrop By the numbers    — video phủ kín sau các con số, mở ra theo hình tròn (iris) khi cuộn tới
     .aw-trio     What we stand for — 3 ảnh so le đứng ngay trên 3 thẻ, mỗi ảnh ứng với một cam kết
     .aw-marquee  Where we build    — dòng chữ rỗng cỡ lớn trượt ngang qua ảnh toàn cảnh
     .aw-doc      Credentials       — ảnh bản hợp đồng "thả" nghiêng bên phải tiêu đề, xoay thẳng dần khi cuộn
   CHỈ THÊM, không đổi phần đã có. Chỉ ảnh/video MINH HOẠ (StockSnap CC0, Mixkit Free License) — KHÔNG dùng ảnh dự án.
   Chuyển động: assets/about-weave.js. */
/* :where() giữ độ ưu tiên của 2 luật nền này ở mức thấp nhất, để các luật riêng bên dưới (height:118%, margin…) đè được */
:where(.aw-arch,.aw-chip,.aw-depth,.aw-backdrop,.aw-trio,.aw-doc) :where(img,video){ display:block; width:100%; height:100%; object-fit:cover; }
:where(figure.aw-chip,.aw-arch figure,.aw-doc figure){ margin:0; }

/* ================= WHO WE ARE — khung vòm + chip ================= */
.aw-arch{ position:relative; width:min(100%,380px); margin-top:clamp(1.8rem,3.4vw,2.8rem); }
.aw-arch::before{ content:''; position:absolute; inset:16px -16px -16px 16px; border:1px solid rgba(180,136,77,.6);
  border-radius:999px 999px 0 0; pointer-events:none; }
.aw-arch figure{ position:relative; aspect-ratio:3 / 4; overflow:hidden; border-radius:999px 999px 0 0; background:#0A1226;
  box-shadow:0 40px 80px -36px rgba(0,0,0,.85); }
.aw-arch video{ position:absolute; left:0; top:-9%; height:118%; will-change:transform; }
.aw-arch figure::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,0) 55%,rgba(13,23,48,.7) 100%); }
.aw-cap{ position:absolute; z-index:2; left:1.1rem; right:1.1rem; bottom:1rem; display:flex; align-items:center; gap:.7rem;
  font-size:.6rem; letter-spacing:.26em; text-transform:uppercase; color:#F5F1E8; text-shadow:0 1px 10px rgba(0,0,0,.8); }
.aw-cap::before{ content:''; flex:none; width:1.6rem; height:1px; background:#E8C284; }
.aw-chip{ position:relative; width:min(100%,400px); margin:clamp(1.8rem,3.4vw,2.8rem) 0 0 auto; aspect-ratio:16 / 9; overflow:hidden;
  background:#0A1226; box-shadow:0 30px 60px -30px rgba(0,0,0,.85), inset 0 0 0 1px rgba(180,136,77,.3); }
.aw-chip::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,0) 45%,rgba(13,23,48,.78) 100%); box-shadow:inset 0 0 0 1px rgba(180,136,77,.3); }

/* ================= MEET THE FOUNDER — hai lớp lệch chiều sâu ================= */
.ab-founder.aw-founder{ max-width:none; display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.aw-depth{ position:relative; aspect-ratio:4 / 5; max-width:400px; width:100%; margin-left:auto; }
.aw-depth-back{ position:absolute; inset:0 0 16% 18%; overflow:hidden; background:#0A1226; box-shadow:0 40px 80px -36px rgba(0,0,0,.85); }
.aw-depth-back::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(180,136,77,.3); }
.aw-depth-front{ position:absolute; left:0; bottom:0; width:56%; aspect-ratio:4 / 3; overflow:hidden; background:#0A1226; z-index:2;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(232,194,132,.55); }
/* chữ số La Mã III (đời thứ ba) — nét rỗng, nằm sau hai lớp ảnh */
.aw-depth-ghost{ position:absolute; z-index:0; left:-6%; top:-12%; font-family:'Playfair Display',serif; font-weight:700; font-style:italic;
  font-size:clamp(7rem,15vw,12rem); line-height:1; color:transparent; -webkit-text-stroke:1px rgba(232,194,132,.38);
  pointer-events:none; user-select:none; }
.aw-depth-back,.aw-depth-front{ z-index:1; }
.aw-depth-front{ z-index:2; }
.aw-depth-tag{ position:absolute; z-index:3; right:0; bottom:4%; font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:#E8C284; display:flex; align-items:center; gap:.7rem; white-space:nowrap; }
.aw-depth-tag::before{ content:''; width:1.6rem; height:1px; background:#E8C284; }

/* ================= BY THE NUMBERS — video nền mở theo hình tròn ================= */
.sc section.aw-numbers{ position:relative; overflow:hidden; }
.aw-numbers > .sc-wrap{ position:relative; z-index:2; }
.aw-backdrop{ position:absolute; inset:0; z-index:0; will-change:clip-path; }
.aw-backdrop video{ position:absolute; left:0; top:-10%; height:120%; will-change:transform; }
.aw-backdrop::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(13,23,48,.93) 0%,rgba(13,23,48,.78) 45%,rgba(13,23,48,.62) 100%),
             linear-gradient(180deg,rgba(13,23,48,.85) 0%,rgba(13,23,48,0) 22%,rgba(13,23,48,0) 78%,rgba(13,23,48,.9) 100%); }
.aw-numbers .ab-stats .lbl{ color:rgba(245,241,232,.86); }   /* chữ nhãn sáng hơn một chút vì giờ nằm trên video */

/* ================= WHAT WE STAND FOR — 3 ảnh so le trên 3 thẻ ================= */
.aw-trio{ list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; align-items:end;
  margin-top:clamp(2rem,4vw,3rem); padding:0 1px; }
.aw-trio li{ position:relative; overflow:hidden; background:#0A1226; }
.aw-trio li:nth-child(1){ aspect-ratio:4 / 3; }
.aw-trio li:nth-child(2){ aspect-ratio:4 / 3.9; }
.aw-trio li:nth-child(3){ aspect-ratio:4 / 3.4; }
.aw-trio img{ position:absolute; left:0; top:-9%; height:118%; will-change:transform; filter:saturate(.85); transition:filter .6s ease; }
.aw-trio li:hover img{ filter:none; }
.aw-trio li::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(13,23,48,0) 50%,rgba(13,23,48,.82) 100%); box-shadow:inset 0 0 0 1px rgba(180,136,77,.26); }
.aw-trio .aw-n{ position:absolute; z-index:2; left:clamp(1.1rem,2.2vw,1.8rem); bottom:.9rem;
  font-family:'Playfair Display',serif; font-style:italic; font-weight:600; font-size:clamp(1.1rem,1.8vw,1.5rem); color:#E8C284; line-height:1; }
.sc .aw-trio + .sc-grid{ margin-top:0; }

/* ================= WHERE WE BUILD — dòng chữ rỗng trượt ngang qua ảnh ================= */
.aw-marquee{ position:absolute; z-index:2; left:0; bottom:6%; white-space:nowrap; pointer-events:none; user-select:none;
  font-family:'Playfair Display',serif; font-weight:700; font-style:italic; letter-spacing:.02em; line-height:1;
  font-size:clamp(3rem,9vw,7.4rem); color:transparent; -webkit-text-stroke:1px rgba(245,241,232,.7); will-change:transform; }
.aw-marquee b{ font-weight:700; color:rgba(232,194,132,.92); -webkit-text-stroke:0; }

/* ================= LICENSING & CREDENTIALS — bản hợp đồng thả nghiêng ================= */
.aw-cred > .sc-wrap{ position:relative; }
.aw-doc{ position:absolute; z-index:2; top:0; right:clamp(1.5rem,6vw,4.5rem); width:clamp(220px,25vw,300px); }
.aw-doc::before{ content:''; position:absolute; inset:12px -12px -12px 12px; border:1px solid rgba(180,136,77,.6); pointer-events:none; }
.aw-doc figure{ position:relative; aspect-ratio:3 / 2; overflow:hidden; background:#0A1226; box-shadow:0 30px 60px -26px rgba(0,0,0,.9); }
.aw-doc figure::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(180,136,77,.3);
  background:linear-gradient(180deg,rgba(13,23,48,0) 50%,rgba(13,23,48,.7) 100%); }

/* ================= tablet / mobile ================= */
@media(max-width:900px){
  .ab-founder.aw-founder{ grid-template-columns:1fr; }
  .aw-depth{ margin:0 auto; max-width:340px; }
  .aw-doc{ position:relative; top:auto; right:auto; width:min(100%,320px); margin-top:1.6rem; }
}
@media(max-width:767px){
  .aw-arch{ width:min(100%,300px); }
  .aw-chip{ margin-left:0; }
  .aw-trio{ grid-template-columns:1fr; gap:.7rem; padding:0; }
  .aw-trio li:nth-child(n){ aspect-ratio:16 / 10; }
  .sc .aw-trio + .sc-grid{ margin-top:.9rem; }
  .aw-marquee{ font-size:clamp(2.2rem,12vw,3.4rem); }
}
@media(prefers-reduced-motion:reduce){ .aw-trio img{ transition:none; } }

/* ================= HERO "Built to last" — 3 thẻ nội dung trôi trên video (7/10/2026) =================
   Chủ site: thẻ nền kem cũ chưa sang. Làm lại thành TẤM NAVY ĐẬM viền chỉ vàng, cùng chất liệu với phần còn lại của trang:
   vạch vàng kim trên mép, logo ánh vàng, tiêu đề Marcellus, chữ mô tả chữ thường dễ đọc (trước là chữ in hoa cỡ .55rem).
   Lượt 2 cùng ngày, theo chủ site: BỎ số thứ tự 01/02/03, và THU chữ + thẻ nhỏ lại — bản đầu to quá nên cột 3 thẻ
   cao hơn màn hình, thẻ trên và thẻ dưới bị cắt mất chữ. Mọi kích thước bên trong thẻ giờ tính bằng em theo
   font-size của .lb-card, và font-size đó co theo CHIỀU CAO màn hình (1.6vh, chặn 12–14px) → cả cột luôn lọt màn hình.
   CHỈ đổi vẻ ngoài — không đụng transform của .lb-card vì GSAP đang lái nó, và không dùng backdrop-filter
   (thẻ chạy ngang trên video tua theo cuộn, làm mờ nền sẽ nặng máy).
   File này nạp sau <style> inline của about.html nên đè được các luật .lb-* ở đó. */
.lb-track{ gap:.85rem; display:grid; grid-auto-rows:1fr; }   /* lưới hàng 1fr → cả 3 thẻ cao bằng thẻ dài nhất, ở mọi khổ màn hình */
/* desktop: BA THẺ CAO BẰNG NHAU (chủ site yêu cầu) — cột thành lưới có các hàng 1fr nên hàng nào cũng cao bằng thẻ dài nhất.
   Muốn vậy cột phải cao theo nội dung (không còn top:0/bottom:0), nên canh giữa màn hình bằng top:50% + translateY(-50%).
   GSAP chỉ lái transform của từng .lb-card, không đụng .lb-track, nên đặt transform ở đây không xung đột. */
@media(min-width:992px){
  .lb-track{ width:min(285px,72vw); top:50%; bottom:auto; transform:translateY(-50%); }
}
.lb-card{
  position:relative; overflow:hidden;
  font-size:clamp(12.5px,1.95vh,16px);   /* lượt 3: chữ to hơn một chút (trước 12–14px) */
  justify-content:flex-start;             /* logo + chỉ vàng nằm cùng một cao độ ở cả 3 thẻ; khoảng dư dồn xuống đáy thẻ */
  padding:1.05em 1.2em 1.15em; border-radius:2px; gap:.75em;
  color:#F5F1E8;
  background:linear-gradient(155deg,rgba(26,41,74,.95) 0%,rgba(12,20,42,.97) 52%,rgba(7,12,26,.98) 100%);
  border:1px solid rgba(232,194,132,.36);
  box-shadow:0 28px 56px -26px rgba(0,0,0,.92), 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,236,190,.16);
  transition:border-color .45s ease, box-shadow .45s ease;
}
.lb-card:hover{ border-color:rgba(245,217,168,.78);
  box-shadow:0 32px 62px -26px rgba(0,0,0,.95), 0 0 30px -10px rgba(232,194,132,.38), inset 0 1px 0 rgba(255,236,190,.22); }
/* vạch vàng kim trên mép thẻ, sáng ở đầu rồi tan dần */
.lb-card::before{ content:''; position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none;
  background:linear-gradient(90deg,#B4884D 0%,#F5D9A8 24%,#E8C284 44%,rgba(232,194,132,0) 80%); }
/* logo: ảnh gốc màu navy (chìm trên nền tối) → dùng chính ảnh đó làm mặt nạ, tô bằng dải vàng kim */
.lb-card .ic-img{
  height:1.5em; opacity:1; object-fit:none; object-position:-999px -999px;
  background:linear-gradient(120deg,#B4884D 0%,#F5D9A8 46%,#D9A441 100%);
  -webkit-mask:url(logo-mark-navy.png) center / contain no-repeat; mask:url(logo-mark-navy.png) center / contain no-repeat;
}
/* khối chữ: ngăn với hàng logo bằng một chỉ vàng mờ */
.lb-card > div{ padding-top:.7em; border-top:1px solid rgba(232,194,132,.2); }
.lb-card h3{ font-family:'Marcellus','Playfair Display',serif; font-weight:400; text-transform:none;
  font-size:1.16em; line-height:1.22; letter-spacing:.005em; color:#F7F2E7; }
.lb-card p{ margin-top:.42em; font-family:'Manrope','Archivo',Arial,sans-serif; font-weight:400; text-transform:none;
  font-size:.83em; line-height:1.56; letter-spacing:.005em; opacity:1; color:rgba(245,241,232,.84); }
/* mobile: thẻ xếp dọc đầy bề ngang, không còn bị giới hạn chiều cao → chữ to lại cho dễ đọc */
@media(max-width:991px){ .lb-card{ font-size:16px; } }
@media(prefers-reduced-motion:reduce){ .lb-card{ transition:none; } }