/* ===== mobile.css — MỌI chỉnh sửa riêng cho điện thoại nằm ở đây (9/10/2026) =====
   AN TOÀN CHO BẢN PC: (1) thẻ <link> nạp file này có media="(max-width: 767px)" nên màn hình rộng hơn không áp dụng;
   (2) toàn bộ quy tắc bên dưới còn bọc thêm trong @media(max-width:767px). Đừng viết quy tắc nào ra ngoài khối @media đó.
   File được nạp SAU CÙNG trong <head> của cả 7 trang, nên thắng các quy tắc mobile cũ viết trong từng trang.
   Kiểm tra bản PC không đổi: scratchpad deskmeasure.mjs (đo offset/cỡ chữ ở 1440, 1024, 768 trước và sau). */
@media (max-width: 767px) {

  /* ---------- CỠ CHỮ TOÀN TRANG (10/10/2026) ----------
     Chủ site: "toàn bộ nội dung chữ của trang web đều cho nhỏ lại sao cho phù hợp với kích thước điện thoại".
     Gần như mọi cỡ chữ và khoảng cách trên site viết bằng rem, nên chỉ cần hạ cỡ gốc 16px → 14px là cả trang
     (chữ, lề, khoảng cách) co lại đều ~12%. Muốn nhỏ/to hơn nữa: đổi đúng con số này. */
  html { font-size: 14px; }

  /* ---------- THANH ĐẦU TRANG (cả 7 trang): logo 82px → 48px, lề gọn lại ---------- */
  /* tiền tố "html" để thắng cả quy tắc viết trong <body> của portfolio.html (trang đó đặt <style> sau thẻ <link> này) */
  html .nav-wrap { padding: .8rem 1.1rem; }
  html .logo-center img { height: 3rem; }

  /* ---------- TRANG CHỦ — HERO ----------
     MỌI quy tắc ở khối này phải bắt đầu bằng #trail-section (id hero của trang chủ): portfolio.html cũng có class .hero,
     thiếu id thì quy tắc trang chủ lọt sang Portfolio (đã từng đẩy nội dung hero Portfolio xuống 291px).
     Trước: .hero cao theo tỉ lệ ảnh (≈291px trên máy 390px) + overflow hidden, trong khi câu tagline và nút đôi đặt ở
     top:40vh (≈338px) → BỊ CẮT MẤT; khối logo 48vw cũng bị cắt gần hết.
     Giờ: ảnh vẫn hiện đủ, không cắt mép (đúng tỉ lệ 2400/1792 = 74.667vw); khối logo thu còn 27vw nằm gọn trong ảnh như bản PC;
     tagline + nút đôi chuyển xuống một dải ngay DƯỚI ảnh (nền trùng màu đầu dải chứng nhận nên liền mạch). */
  #trail-section { aspect-ratio: auto; padding-top: 74.667vw; background: #120E1D; }
  #trail-section .hero-bg { inset: 0 0 auto 0; height: 74.667vw; }
  #trail-section::after { top: calc(74.667vw - 7rem); bottom: auto; height: 7.1rem; }   /* đáy ảnh tối dần sớm hơn → chữ dưới khối 3D dễ đọc */

  /* Dòng "GENERAL CONTRACTOR IN / Oregon & Washington" (10/10/2026): hai dòng xếp chồng, nằm GIỮA logo và nút MENU.
     Khung chứa (.hero-eyebrow-tl) thả về static để dòng này và tiêu đề H1 tự định vị riêng theo .hero. */
  #trail-section .hero-eyebrow-tl { position: static; max-width: none; }
  #trail-section .hero-eyebrow-sm { position: absolute; z-index: 3; top: 1.3rem; left: 6.3rem; right: 5.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; white-space: nowrap; }
  #trail-section .hero-eyebrow-sm .eyebrow-rule { display: none; }
  #trail-section .hero-eyebrow-sm .eyebrow-text { font-size: 8.5px; letter-spacing: .18em; line-height: 1.2; }
  #trail-section .hero-eyebrow-sm .eyebrow-place { font-size: 13px; line-height: 1.15; }

  #trail-section .hero-h1 { position: absolute; z-index: 3; top: 4.3rem; left: 1.2rem; font-size: 1.06rem; line-height: 1.08; }
  #trail-section .hero-block-wrap { width: 24vw; margin-left: -12vw; top: 33vw; }             /* khối 3D nhỏ hơn, nằm dưới 3 dòng tiêu đề */
  #trail-section .block-ground-shadow { height: 12px; margin-top: .4rem; }

  /* "See the proof. Get the plan." + nút đôi: NHỎ LẠI và kéo lên nằm sát DƯỚI khối 3D (đè lên phần đáy ảnh đã tối dần) */
  #trail-section .hero-heading { position: relative; top: auto; right: auto; left: auto; max-width: none;
    margin-top: -3rem; padding: 0 1.1rem 1.05rem; align-items: center; text-align: center; }
  #trail-section .hero-heading::before { display: none; }            /* không cần mảng tối sau chữ: đáy ảnh đã tối sẵn */
  #trail-section .hero-tl-tagline { margin-top: 0; font-size: 1.16rem; line-height: 1.3; }
  #trail-section .hero-tl-btn-wrap { margin-top: .4rem; zoom: .72; }
  #trail-section .hero-tl-btn-wrap .split-cta { font-size: 12.5px; }
  /* iPad (html.is-tablet do script viewport trong <head> gắn): cả trang phóng to ~1.4 lần nên chữ trong cặp nút trông to, gần chạm mép nút → nhỏ lại */
  html.is-tablet #trail-section .hero-tl-btn-wrap .split-cta { font-size: 10.5px; }   /* khung nút tính bằng px nên chữ cũng giữ px, không co thêm theo cỡ gốc */

  /* ---------- DẢI CHỨNG NHẬN (trang chủ, About, 3 trang Service) ----------
     Trước: 6 mục xếp một cột, mỗi mục cao 46px → cả dải cao ~510px (hơn nửa màn hình).
     Giờ: lưới 2 cột × 3 hàng, icon và chữ thu nhỏ → dải cao khoảng 200px. Ảnh có height viết thẳng trong thẻ nên cần !important. */
  .trust-band, .sc .trust-band, .sc section.trust-band { padding: 1.35rem .9rem 1.5rem; }
  .trust-band .row, .sc .trust-band .row { grid-template-columns: 1fr 1fr; gap: 1rem .55rem;
    justify-items: start; align-items: center; max-width: 23rem; }
  .trust-col, .sc .trust-col { display: contents; }
  .trust-item, .sc .trust-item { font-size: .58rem; letter-spacing: .1em; gap: .45rem; opacity: .86; white-space: normal; }
  .trust-item img, .sc .trust-item img { height: 1.75rem !important; flex: none; }
  .trust-item b, .sc .trust-item b { font-size: .74rem; letter-spacing: .03em; white-space: nowrap; }


  /* ---------- THANH ĐẦU TRANG khi đã cuộn (cả 7 trang) ----------
     Logo cố định không có nền nên đè lên chữ đang cuộn qua bên dưới. Khi trang đã cuộn (>40px), thanh có nền navy
     mờ đặc + đường chỉ vàng; ở đầu trang thì vẫn trong suốt để thấy ảnh hero. Class html.is-scrolled do
     assets/site-footer.js gắn (class này chỉ được dùng trong file mobile, nên không ảnh hưởng bản PC).
     color !important: trang chủ đổi màu chữ MENU bằng style nội tuyến theo nền sáng/tối — trên thanh navy luôn phải là chữ kem. */
  html .nav-wrap { transition: background-color .3s ease, box-shadow .3s ease, color .35s ease; }
  html.is-scrolled .nav-wrap { background-color: #0A1122;   /* ĐẶC hoàn toàn: ở .93 chữ cuộn phía sau vẫn lộ mờ dưới logo */ box-shadow: 0 1px 0 rgba(232,194,132,.2), 0 10px 24px -14px rgba(0,0,0,.7);
    color: #F5F1E8 !important; }

  /* ---------- TRANG CHỦ — tiêu đề "From blueprint to reality": căn GIỮA màn hình ----------
     Bản PC dịch tiêu đề sang phải 0.5cm (transform) — trên điện thoại làm nó lệch phải và sát mép. */
  .blueprint-title { left: 1rem; right: 1rem; top: 4.7rem; transform: none; text-wrap: balance; }

  /* ---------- FOOTER (cả 7 trang) ----------
     (tiền tố "html": portfolio.html nạp site-footer.css SAU file này, phải tăng độ ưu tiên mới thắng)
     Trước: khối logo vàng là video NỀN cao trọn footer, nằm ngay sau slogan và thông tin liên hệ → chữ vàng chìm vào logo vàng.
     Giờ: video thu nhỏ thành một khối riêng ở trên cùng, canh giữa; slogan và liên hệ nằm bên dưới, canh giữa, đọc rõ. */
  html .site-foot { padding: 2rem 1.3rem 1.4rem; }
  html .site-foot::before { display: none; }
  html .site-foot .foot-video { position: relative; top: auto; left: auto; transform: none; display: block;
    height: auto; width: min(58vw, 240px); margin: 0 auto .7rem;   /* đã thử 36vw ("nhỏ quá") và 46vw ("hơi nhỏ") → 58vw */
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent), linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent), linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
            mask-composite: intersect; }
  html .site-foot .foot-grid { gap: 1.5rem; justify-items: center; text-shadow: none; }
  html .site-foot .foot-slogan { align-items: center; text-align: center; }
  html .site-foot .foot-kicker { margin-bottom: .8rem; }
  html .site-foot .foot-kicker::before { width: 1.6rem; }
  html .site-foot .foot-big .l2 { margin-left: auto; margin-right: auto; padding-left: .14em; }
  html .site-foot .foot-rule { margin: 1.1rem auto 0; background: linear-gradient(90deg, rgba(232,194,132,0), #E8C284, rgba(232,194,132,0)); transform-origin: center; }
  /* khối liên hệ (Email / Address / Tel / Licensed…): chủ site muốn CĂN LỀ TRÁI toàn bộ — nhãn nằm trên, giá trị nằm dưới */
  html .site-foot .foot-contact { justify-self: start; text-align: left; width: 100%; }
  html .site-foot .foot-row { flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: .45rem; }
  html .site-foot .foot-row .val { line-height: 1.7; }
  html .site-foot .foot-bottom { margin-top: 1.7rem; padding-top: 1.1rem; flex-direction: column; align-items: center; gap: .45rem; text-align: center; text-shadow: none; }


  /* ---------- MENU (cả 7 trang): bấm MENU thì chồng ô hiện Ở GIỮA MÀN HÌNH ----------
     Bản PC thả chồng ô từ chữ MENU ở góc phải (assets/menu-dropdown.css, vị trí lấy từ --md-top / --md-right do JS đo).
     Trên điện thoại: canh giữa cả hai chiều, nền phía sau tối đi để menu nổi lên như một lớp phủ.
     Bóng 100vmax = lớp tối phủ kín màn hình (không bắt chạm, nên chạm ra ngoài vẫn đóng menu như cũ). */
  html #menu-overlay { top: 50%; right: auto; left: 50%; transform: translate(-50%, -50%);
    width: min(19rem, calc(100vw - 3rem)); max-height: calc(100vh - 2rem); padding: 0; }
  html #menu-overlay.open { background: rgba(6,10,22,.6); box-shadow: 0 0 0 100vmax rgba(6,10,22,.6); }


  /* ---------- TRANG CHỦ — chữ trên video "We build in the other 2% / For Your Home. For Your Future." ----------
     Bản PC đặt khối chữ ở góc dưới-phải video. Trên điện thoại: đưa vào CHÍNH GIỮA khung video (cả ngang lẫn dọc), chữ canh giữa. */
  .video-caption { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%);
    width: max-content; max-width: calc(100% - 2rem); text-align: center;
    text-shadow: 0 1px 12px rgba(6,10,22,.75), 0 0 3px rgba(6,10,22,.6); }
  .video-caption .cap-row { justify-content: center; }


  /* ---------- NGẮT DÒNG THEO CỤM Ý (cả 7 trang, 10/10/2026) ----------
     Chủ site: "không được cắt đôi một vế, mỗi vế nằm một dòng, phải để ý mạch người đọc".
     .nb = một cụm ý không được ngắt giữa chừng (span đặt sẵn trong HTML; trên PC class này không có kiểu gì nên không đổi).
     Trình duyệt chỉ còn được xuống dòng Ở GIỮA hai cụm. text-wrap:balance chia các dòng cho cân, không để một từ lẻ loi cuối câu.
     Thêm câu mới: bọc mỗi cụm ý bằng <span class="nb">…</span>. */
  .nb { white-space: nowrap; }
  h1, h2, h3, blockquote, .stmt-lede, .stmt-credo, .sub-l1, .sc-cta p, .pf__cta p { text-wrap: balance; }
  p, li { text-wrap: pretty; }
  /* câu chốt "We own every detail." phải trọn MỘT dòng → cỡ chữ theo bề ngang máy */
  .stmt-main { font-size: 8.3vw; white-space: nowrap; }
  /* tiêu đề lớn của about / service: co theo bề ngang máy để mỗi vế (đã ngắt bằng <br>) nằm trọn một dòng cả trên máy 360px */
  .sc h2 { font-size: min(2.05rem, 7.3vw); }
  /* nhãn bên phải mỗi con số: nới từ 20 ký tự lên 15.5em để mỗi cụm nằm trọn một dòng */
  .stat-row .lbl { max-width: 15.5em; }   /* đủ rộng cho cụm dài nhất ("on or under budget"), vẫn xuống dòng giữa hai cụm */
  /* tên 3 dịch vụ trên thẻ ảnh (trang chủ): mỗi tên trọn một dòng kể cả trên máy 360px */
  #services h3 { font-size: min(1.05rem, 3.55vw); white-space: nowrap; }
  /* TRANG CHỦ — bốn thẻ bước 01–04 trên bản vẽ: hiện ở MỘT VỊ TRÍ DUY NHẤT (ngay dưới tiêu đề, rộng hết bề ngang),
     thay vì bốn góc như bản PC. Bản vẽ tự lùi xuống dưới thẻ (hàm bpTopReserve trong index.html đo mép đáy thẻ) nên thẻ
     KHÔNG che bản vẽ. Đổi vị trí thẻ: chỉ sửa top ở đây, bản vẽ tự chạy theo. */
  #s-blueprint .bp-step.s1, #s-blueprint .bp-step.s2, #s-blueprint .bp-step.s3, #s-blueprint .bp-step.s4 {
    left: 1rem; right: 1rem; top: 7.3rem; bottom: auto; max-width: none; padding: .85rem 1rem .95rem; }
  #s-blueprint .bp-step h3 { margin-bottom: .35rem; white-space: nowrap; }
  #s-blueprint .bp-step { background: rgba(13,23,48,.55); }

  /* PORTFOLIO — câu "The next one could be / yours.": chữ "yours." vốn nằm riêng một dòng; vế đầu phải trọn MỘT dòng → cỡ chữ theo bề ngang máy */
  html .pf__cta h2 { font-size: 7.5vw; white-space: nowrap; }

  /* ---------- PORTFOLIO — HERO ----------
     Video nền: bản PC neo mép TRÁI khung hình (object-position:left) → trên điện thoại chỉ thấy trời và nửa căn nhà; đưa về giữa.
     Logo 3D: bản PC nằm góc dưới-phải → trên điện thoại đè lên nút "Our projects"; đưa lên giữa màn hình, phía trên danh sách dịch vụ. */
  html .hero__bg--video video { object-position: center center; }
  /* chữ + nút neo ở ĐÁY màn hình đầu; logo 3D nằm chính giữa khoảng trống phía trên (từ thanh đầu trang tới đầu khối chữ).
     Công thức top: tâm khoảng trống = 50vh − 92px, trừ nửa chiều cao khung logo (62vw × 650/1080 ÷ 2 ≈ 18.7vw). */
  html .hero__grid { align-content: end; padding-top: 0; padding-bottom: 1.9rem; }
  html .hero__logo-col { --lw: min(62vw, 300px); left: 50%; right: auto; bottom: auto; transform: translateX(-50%);
    top: calc(50vh - 60px - 18.7vw); top: calc(50svh - 60px - 18.7vw); }   /* 25/10/2026: hạ thêm 32px theo yêu cầu user (cũ: −92px) */


  /* ---------- CHỮ BỊ CHE / BỊ CẮT (rà soát 10/10/2026 bằng scratchpad overlap.mjs) ---------- */
  /* (1) Khối cao trọn màn hình: trên iPhone "100vh" tính cả phần nằm SAU thanh công cụ của trình duyệt (Safari, Messenger…),
         nên đáy khối — nút bấm, chân bản vẽ — bị che. 100svh = đúng phần màn hình nhìn thấy được. Dòng vh đứng trước là dự phòng cho máy cũ. */
  .blueprint-sticky, .reveal-hero, .reveal-hero-sticky { height: 100vh; height: 100svh; }   /* KHÔNG gồm .lastband-sticky: trên điện thoại khối đó cao tự do (about.html), ép chiều cao làm thẻ tràn đè lên dải chứng nhận */
  html .hero[data-screen="hero"] { min-height: 100vh; min-height: 100svh; }
  /* (2) Trang About: các khối nội dung bay vào từ bên phải — trên điện thoại là cú bay nhanh 0.9s khi khối vừa lộ ra
         (JS trong about.html), không trượt theo cuộn như PC nên chữ không bị mép phải cắt lâu.
     (2a) Màn đầu About ("Built to last"): ghim 1 màn hình, video trống chỉ có tên công ty; cuộn thì từng thẻ bay từ phải
          vào chân màn hình rồi bay ra trái (JS gắn class .lb-phone). */
  .lastband.lb-phone { height: 340vh; height: 340svh; }
  .lb-phone .lastband-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
  .lb-phone .lb-head { padding-top: calc(70px + 7svh); }   /* nằm ở vùng tối phía trên, không đè khối logo vàng giữa video */
  .lb-phone .lb-track { position: absolute; top: auto; left: 1.5rem; right: 1.5rem; bottom: 6svh; width: auto;
    display: grid; padding: 0; }
  .lb-phone .lb-card { grid-area: 1 / 1; align-self: stretch; }
  .lb-head .lb-brand .brand-llc { font-size: max(.3em, 8px); }   /* chữ "LLC" cạnh tên công ty: .3em = 5.8px trên điện thoại, quá nhỏ */
  /* iPad xoay ngang (trang dựng rộng 760px, xem script viewport trong <head>): khung gần vuông hơn nên lộ nửa dấu ✦ (watermark Gemini)
     ở góc dưới-phải video → phóng video 1.18 để mép đó nằm ngoài khung. Điện thoại dọc vốn đã cắt mất góc này. */
  @media (orientation: landscape) { .lb-phone .lastband-video { transform: scale(1.18); } }
  /* iPad (html.is-tablet): video chỉ 1280×720 — phủ kín màn iPad dọc phải phóng ~3.3 lần nên nhoè. Lùi ra (25/10/2026): video rộng 165%
     màn hình (dọc) / 130% (ngang), căn giữa, phần trên–dưới là nền đúng màu mép video rgb(1,7,20) + mép video mờ dần → liền mạch.
     Dấu ✦ Gemini ở x≈90.6% khung hình vẫn nằm ngoài phần hiển thị (dọc thấy 20–80%, ngang 11–89%). */
  html.is-tablet .lb-phone .lastband-sticky { background: rgb(1,7,20); }
  html.is-tablet .lb-phone .lastband-video { inset: auto; left: 50%; top: 50%; width: 165%; height: auto; object-fit: contain;
    transform: translate(-50%,-50%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
  @media (orientation: landscape) { html.is-tablet .lb-phone .lastband-video { width: 130%; } }   /* chung 1 ô lưới + stretch → 3 thẻ cao bằng thẻ cao nhất */
  /* (2b) Trang About — màn hình đầu: user muốn video nền RÕ HẲN, không phủ tối (25/10/2026). Chữ đã nằm ở vùng tối phía trên
          khối logo vàng nên chỉ giữ bóng tối sát quanh chữ. */
  .lastband-shade { display: none; }
  .lb-head { filter: drop-shadow(0 2px 10px rgba(6,10,22,.95)) drop-shadow(0 0 3px rgba(6,10,22,.8)); }
  /* (3) Nhãn nhỏ màu vàng trên video hero các trang Service nằm đè lên vùng ảnh sáng → thêm bóng tối quanh chữ cho rõ */
  .reveal-eyebrow { text-shadow: 0 1px 10px rgba(6,10,22,.95), 0 0 3px rgba(6,10,22,.9); }
  /* (4) Dòng hướng dẫn dưới bản đồ tràn mép phải 7px */
  .map-hint { letter-spacing: .1em; white-space: normal; text-align: center; padding-left: .8rem; padding-right: .8rem; }

  /* ---------- 25/10/2026 — iPhone của user bật Display Zoom nên trang hiển thị như màn 320px: phải vừa từ 320px trở lên ---------- */
  /* (a) CẶP NÚT ĐÔI ở hero 3 trang Service + Portfolio: bỏ zoom cố định, mỗi nửa rộng theo bề ngang máy (tối đa 168px = cỡ cũ ở 390px)
         → cả cặp luôn nằm trọn trong màn hình. Tỉ lệ slant/h giữ ~15/40 để vạch chéo vẫn khớp cạnh. */
  html .reveal-hero .reveal-cta, html .pf-swap-hero .hero-tl-btn-wrap { zoom: 1; }
  html .reveal-hero .split-cta, html .pf-swap-hero .split-cta {
    --w: min(168px, calc(50vw - 19px)); --h: 34px; --slant: 13px;
    font-size: min(9.4px, 2.9vw); letter-spacing: .14em; }
  /* (b) Tiêu đề hero 3 trang Service ("Same address…"): bản PC có hiệu ứng chữ nổi 3D (nhiều lớp bóng lệch 1–2px + xoay phối cảnh)
         → ở cỡ chữ điện thoại trông nhòe / như in đúp. Trên điện thoại: chữ phẳng, sắc, chỉ một bóng tối mềm để nổi trên video. */
  html .reveal-hero .h1-stage { perspective: none; }
  html .reveal-hero .h1-stage::after { display: none; }
  html .reveal-hero h1 { transform: none !important; -webkit-mask-image: none; mask-image: none; -webkit-box-reflect: below 0 linear-gradient(transparent, transparent) !important;   /* bóng phản chiếu dưới chữ = bóng ma "in đúp"; "none" không ăn trên Chrome nên dùng mặt nạ trong suốt */
    text-shadow: 0 2px 12px rgba(6,10,22,.75), 0 0 2px rgba(6,10,22,.5); }
  html .reveal-hero h1 em { text-shadow: 0 2px 12px rgba(6,10,22,.75), 0 0 2px rgba(6,10,22,.5); }
  /* (c) Chú thích bản đồ trang chủ: 2 cột bằng nhau → "Commercial" bắt đầu đúng giữa, không dạt ra mép phải */
  #project-map .map-legend { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; font-size: .8rem; letter-spacing: .12em; }
  /* (d) Footer: địa chỉ nằm trọn MỘT dòng, chữ nhỏ lại theo bề ngang máy */
  /* (e) Trang chủ, khối statement: ở 320px câu châm ngôn + dòng chữ ký (mỗi vế nowrap) rộng hơn khung → cả trang bị kéo ngang 8px.
         Máy ≤359px: lề hẹp lại, giãn chữ châm ngôn ít hơn, 2 gạch mảnh ngắn lại — vẫn giữ nguyên cách ngắt theo vế. */
  @media (max-width: 359px) {
    .statement { padding-left: 1.1rem; padding-right: 1.1rem; }
    .stmt-credo { letter-spacing: .2em; }
    .statement .source { gap: .7rem; }
    .statement .sig-rule { width: 18px; }
  }
  html .site-foot .foot-row .val a[href*="share.google"] { white-space: nowrap; font-size: min(1em, 3.3vw); letter-spacing: .05em; }

}