/* ========================================================================= trebra.vn — components.css FILE OVERRIDE DUY NHẤT. Nạp SAU tokens.css và main.css. Cập nhật 26/07: áp toàn bộ SỐ ĐO THẬT từ bản vẽ. ========================================================================= */ .js-anim [x-cloak]{display:none!important} .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link:focus{position:fixed;top:var(--sp-4);left:var(--sp-4);width:auto;height:auto; clip:auto;padding:var(--sp-3) var(--sp-5);background:var(--c-ink);color:var(--c-white); z-index:9999;border-radius:var(--radius)} .site-nav__warn,.site-footer__warn{font-size:var(--fs-caption);color:var(--c-red); border:1px dashed var(--c-red);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm)} .container{width:100%;max-width:calc(var(--container) + var(--gutter) + var(--gutter)); margin-inline:auto;padding-inline:var(--gutter)} .container--narrow{max-width:var(--container-narrow)} /* [1] Bỏ dấu chấm đầu dòng — wp-block-library nạp sau, đặt lại list-style */ .site-nav__list,.site-nav__list li, .site-nav-mobile__list,.site-nav-mobile__list li, .site-footer__list,.site-footer__list li, .site-footer__social,.site-footer__social li, .gia-card__ql,.gia-card__ql li, .du-an__share,.du-an__share li, .du-an__linh-vuc,.du-an__linh-vuc li, .dv__muc,.dv__muc li{list-style:none!important;margin:0} .site-nav__list li::marker,.site-footer__list li::marker, .site-footer__social li::marker,.dv__muc li::marker{content:none} /* ========================================================================= HEADER — đo: logo 23.7px · menu 15.2px · CTA 9.4px · cao ~100px ========================================================================= */ /* dải EN/VN — bản vẽ y=23, 12.8px, căn phải */ /* Dải EN/VN + hàng logo cộng lại phải ≈ 100px như bản vẽ (đo: hero bắt đầu ở y≈100 trên artboard 1089). Bản đầu tôi tách EN/VN thành dải riêng làm header cao 128px, đẩy hero xuống — thấy khi đặt bản vẽ cạnh web cùng tỉ lệ. */ .site-header__top{max-width:calc(var(--container) + var(--gutter) + var(--gutter)); margin-inline:auto;padding-inline:var(--gutter); display:flex;justify-content:flex-end;padding-top:var(--sp-1);line-height:1.1} .site-header__ngonngu{display:flex;gap:var(--sp-4);font-size:var(--fs-12)} .site-header__nn{color:color-mix(in srgb,var(--c-ink) 45%,transparent)} .site-header__nn.is-dang{color:var(--c-ink);font-weight:var(--fw-semibold)} .site-header__inner{max-width:calc(var(--container) + var(--gutter) + var(--gutter)); padding-block:var(--sp-2)} /* Logo: bản vẽ đo x=25..262 y=15..98 trên artboard 1089 → rộng ~237px, cao ~83px. Trên container 1280 giữ đúng tỉ lệ đó: ~200px ngang. Dùng ảnh trích từ bản vẽ, chữ trơn "DESIGN STUDIO" thiếu hẳn dấu hiệu Tre + chấm đỏ. */ .site-header__logo{display:block;line-height:0;max-width:200px} .site-header__logo-img{width:100%;height:auto;display:block} /* dự phòng nếu quay lại dùng chữ */ .site-header__logo-text{display:grid;font-weight:var(--fw-bold);letter-spacing:-.01em} .site-header__logo-d{font-size:var(--fs-24b);line-height:1} .site-header__logo-s{font-size:1.41rem;line-height:1} /* nút sáng/tối + CTA có huy hiệu mũi tên */ .site-header__sang{font-size:var(--fs-19);line-height:1; color:color-mix(in srgb,var(--c-ink) 55%,transparent)} .site-header__cta{display:inline-flex;align-items:center;gap:var(--sp-3);padding-right:var(--sp-2)} .site-header__cta-mui{width:26px;height:26px;border-radius:50%;flex-shrink:0; display:grid;place-items:center;background:var(--c-white);color:var(--c-ink)} .site-header__cta-mui svg{width:13px;height:13px;display:block} .site-header__cta:hover .site-header__cta-mui{background:var(--c-ink);color:var(--c-white)} .site-nav__list{display:flex;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;flex-wrap:wrap} .site-nav__list a{font-size:var(--fs-15);font-weight:var(--fw-medium)} .site-header__actions .btn{font-size:var(--fs-9);padding:var(--sp-3) var(--sp-6); letter-spacing:.02em} .site-nav__list .sub-menu{position:absolute;opacity:0;visibility:hidden;background:var(--c-white); border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--sp-3); min-width:210px;display:grid;gap:var(--sp-1);box-shadow:0 8px 24px rgb(0 0 0/8%); transition:opacity var(--dur) var(--ease);z-index:10} .site-nav__list>li{position:relative} .site-nav__list>li:hover>.sub-menu,.site-nav__list>li:focus-within>.sub-menu{opacity:1;visibility:visible} .site-nav__list .sub-menu a{display:block;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-13)} .site-nav__list .sub-menu a:hover{background:var(--c-surface);border-radius:var(--radius-sm)} /* ========================================================================= FOOTER — đo: tiêu đề cột 28.8 · mục 13.9 (dòng cách 30.7) · social 23.7 nhãn cột 20.4 · nội dung 17.3 · logo 33.9 · giờ 23.9 ========================================================================= */ .site-footer__inner{max-width:calc(var(--container) + var(--gutter) + var(--gutter))} /* "Lời đề nghị" 35.9px + nút pill 18.6px + dải thanh đỏ/trắng */ .ft-de-nghi{display:flex;align-items:center;gap:var(--sp-8);flex-wrap:wrap; padding-bottom:var(--sp-9)} .ft-de-nghi__title{font-size:var(--fs-36);font-weight:var(--fw-bold);letter-spacing:-.02em; display:flex;align-items:center;gap:var(--sp-4)} .ft-de-nghi__mui{font-size:var(--fs-24);line-height:1} .ft-de-nghi__nut{display:inline-flex;align-items:center;gap:var(--sp-3); font-size:var(--fs-19);padding:var(--sp-3) var(--sp-7);border-radius:var(--radius-pill); border:1px solid color-mix(in srgb,var(--c-white) 35%,transparent)} .ft-de-nghi__nut:hover{background:var(--c-white);color:var(--c-ink)} .ft-de-nghi__cham{width:9px;height:9px;border-radius:50%;background:var(--c-red);flex-shrink:0} .ft-de-nghi__thanh{display:grid;grid-template-columns:1fr 1fr;gap:4px; margin-left:auto;width:min(260px,40vw)} .ft-de-nghi__thanh i{display:block;height:14px} .ft-de-nghi__thanh i:nth-child(1),.ft-de-nghi__thanh i:nth-child(4){background:var(--c-red)} .ft-de-nghi__thanh i:nth-child(2),.ft-de-nghi__thanh i:nth-child(3){background:var(--c-white)} /* hai cột Dịch vụ / Lĩnh vực — tiêu đề 28.8px, mục 13.9px có chấm đầu dòng */ /* Bản vẽ: "Dịch vụ" bắt đầu x=492/1089 = 45%, "Lĩnh vực" x=851 = 78%, khối kết thúc ~1030 → rộng ~538/963 nội dung = 56%. Bản trước để 760px làm hai cột dạt sang trái so với bản vẽ — thấy khi so ảnh footer. Hai cột KHÔNG bằng nhau: cột trái 359px (x=492→851), cột phải ~179px (x=851→1030) vì mục "Dịch vụ" dài gấp đôi mục "Lĩnh vực" → 2fr / 1fr. */ .ft-cot{display:grid;grid-template-columns:2fr 1fr;gap:var(--sp-9); padding-block:var(--sp-8);width:56%;min-width:min(100%,420px);margin-left:auto} .ft-cot__title{font-size:var(--fs-29);font-weight:var(--fw-bold);letter-spacing:-.02em; margin-bottom:var(--sp-5)} /* 1 CỘT DỌC — đo được đang ra 2 cột (181.9px × 2) vì quy tắc auto-fit cũ vẫn thắng khi rule mới không khai grid-template-columns. Bản vẽ xếp 1 cột dọc. */ .site-footer__list{display:grid;grid-template-columns:1fr;gap:1rem} .site-footer__list li{display:flex;align-items:baseline;gap:var(--sp-3)} .site-footer__list li::before{content:"";width:6px;height:6px;border-radius:50%; background:var(--c-white);flex-shrink:0} .site-footer__list a{font-size:var(--fs-14);line-height:var(--lh-footer)} /* Bản vẽ: hàng social CANH GIỮA, có vạch kẻ ngang trên và dưới ngăn khối */ .site-footer__social{display:flex;gap:var(--sp-6);flex-wrap:wrap;justify-content:center; padding-block:var(--sp-7); border-block:1px solid color-mix(in srgb,var(--c-white) 18%,transparent)} .site-footer__social a{font-size:var(--fs-24b);font-weight:var(--fw-medium); padding:var(--sp-3) var(--sp-8);border:1px solid color-mix(in srgb,var(--c-white) 30%,transparent); border-radius:var(--radius-pill)} .site-footer__social a:hover{background:var(--c-white);color:var(--c-ink)} /* Liên hệ — tiêu đề 34.8px · nhãn cột 20.4px · nội dung 17.3px */ .ft-lien-he{padding-top:var(--sp-9);border-top:1px solid color-mix(in srgb,var(--c-white) 18%,transparent)} .ft-lien-he__title{font-size:var(--fs-36);font-weight:var(--fw-bold);letter-spacing:-.02em; display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-7)} .ft-lien-he__cot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8)} .ft-o__nhan{font-size:var(--fs-21);display:flex;align-items:center;gap:var(--sp-3); margin-bottom:var(--sp-3)} .ft-o__cham{width:8px;height:8px;border-radius:50%;background:var(--c-white);flex-shrink:0} .ft-o__noi{font-size:var(--fs-17);line-height:var(--lh-footer)} .site-footer__contact{font-size:var(--fs-17);line-height:var(--lh-footer)} .site-footer__phone{display:flex;align-items:center;gap:var(--sp-2)} .site-footer__phone a{font-size:var(--fs-17);font-weight:var(--fw-bold)} /* "( • )" — chấm ĐỎ trong ngoặc trước số, đúng bản vẽ */ .ft-dt__ngoac{display:inline-flex;align-items:center;gap:2px;font-size:var(--fs-17)} .ft-dt__cham{width:8px;height:8px;border-radius:50%;background:var(--c-red);display:inline-block} /*
mặc định in nghiêng — bản vẽ dùng chữ ĐỨNG, ĐẬM */ .site-footer__address{font-style:normal;font-weight:var(--fw-bold)} /* mũi tên ĐỎ giữa "Thứ 2" và "Thứ 7" + kẻ dọc ngăn các ô giờ */ .ft-gio__mui{color:var(--c-red);font-size:var(--fs-17)} .ft-gio__thu{align-items:center} .ft-gio__o{padding-left:var(--sp-6); border-left:1px solid color-mix(in srgb,var(--c-white) 25%,transparent)} /* logo chân trang 33.9/32.2px + bảng giờ */ .ft-duoi{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-8); flex-wrap:wrap;padding-block:var(--sp-9) var(--sp-6)} /* bản vẽ y=11045: logo chân trang lớn hơn header (33.9/32.2px so với 23.7/22.5) */ .ft-duoi__logo{display:block;width:min(290px,60vw);height:auto} .ft-duoi__d{font-size:2.12rem} .ft-duoi__s{font-size:2.01rem} .ft-social__cham{display:inline-block;width:9px;height:9px;border-radius:50%; background:var(--c-red);margin-right:var(--sp-3);vertical-align:middle} .site-footer__social span[aria-disabled]{display:inline-flex;align-items:center; font-size:var(--fs-24b);font-weight:var(--fw-medium);padding:var(--sp-3) var(--sp-8); border:1px solid color-mix(in srgb,var(--c-white) 30%,transparent); border-radius:var(--radius-pill);opacity:.75;cursor:default} .site-footer__list li span{font-size:var(--fs-14);line-height:var(--lh-footer)} .ft-gio{display:flex;align-items:flex-end;gap:var(--sp-8);flex-wrap:wrap} .ft-gio__thu{display:flex;gap:var(--sp-6);font-size:var(--fs-21)} .ft-gio__o{text-align:left} .ft-gio__nhan{font-size:var(--fs-12);color:color-mix(in srgb,var(--c-white) 65%,transparent)} .ft-gio__so{font-size:1.49rem;font-weight:var(--fw-bold);line-height:1.1} .ft-gio__phu{font-size:.775rem;color:color-mix(in srgb,var(--c-white) 65%,transparent)} .site-footer__legal{font-size:var(--fs-12); border-top:1px solid color-mix(in srgb,var(--c-white) 18%,transparent);padding-top:var(--sp-5)} /* ========================================================================= TRANG CHỦ ========================================================================= */ /* Banner — đo 1091×549 = tỉ lệ 2:1 */ .hero-banner{width:100%;aspect-ratio:var(--ar-banner);overflow:hidden;background:var(--c-surface)} .hero-banner img{width:100%;height:100%;object-fit:cover} /* "Xin chào !" — đo 65.8px, 2 cột CHỮ */ .hero{padding-block:var(--sp-10) var(--sp-9)} .xc-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--sp-9);align-items:start} .xc-title{font-size:var(--fs-66);letter-spacing:-.03em;line-height:1} .xc-text{display:grid;gap:var(--sp-4);max-width:60ch;font-size:var(--fs-13); line-height:var(--lh-body)} .xc-text p{color:color-mix(in srgb,var(--c-ink) 72%,transparent)} .xc-nhan{font-weight:var(--fw-bold);color:var(--c-ink)!important} /* Ảnh đội ngũ — đo 1005×1276 (0.79), rộng 92% artboard. ⚠ Bản trước có max-width:920px CHẶN mất width:92% — đo ra 920/1440 = 64%, không bao giờ đạt 92%. Bỏ trần cứng, giữ 92% của khổ màn hình. */ .doi-ngu{padding-block:var(--sp-8) var(--sp-10)} /* 92% của KHỔ MÀN HÌNH, không phải 92% của container (container 1132 → chỉ ra 72%). Kéo ra khỏi container bằng translateX để không phụ thuộc cấu trúc cha. */ .doi-ngu__anh{position:relative;width:92vw;max-width:none; margin-left:50%;transform:translateX(-50%)} .doi-ngu__img{width:100%;max-width:none;height:auto;display:block} /* LOGO CHỒNG LÊN ẢNH — mọi số là % của KHUNG ẢNH nên đúng ở mọi khổ. Cách ra số (artboard bản vẽ 816.5pt, ảnh x 27.7→781.4 y 606.3→1563.1): logo trong bản vẽ x 248.7→547.0 · đỉnh y 747.0 file PNG 1482×520, phần có mực nằm ở x 179→1362 (79.8% bề rộng file), y 125→453 → phải cộng bù phần lề trong suốt của file, nếu không logo hiện nhỏ hơn và cao hơn chỗ cần. → bề rộng thẻ img = 36.5% ÷ 0.798 = 45.8vw = 49.8% khung ảnh → trái 22.8% · đỉnh 11.4% khung ảnh */ .dn-logo{position:absolute;left:22.8%;top:11.4%;width:49.8%;margin:0;z-index:2; display:flex;justify-content:center} img.dn-logo__img{width:100%;height:auto;display:block} /* bậc chữ của tre_logo(): bản vẽ "DESIGN" 35.0pt = 61.7px ở khổ 1440, mà .tre-logo-chu__phu bằng .72em → cỡ gốc 5.95vw */ .dn-logo .tre-logo-chu{font-size:5.95vw} /* Dải logo khách — đo cao 24–27px */ .logo-dai{padding-block:var(--sp-6);border-block:1px solid var(--c-border)} .logo-dai__list{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-7);flex-wrap:wrap} .logo-dai__list img{height:27px;width:auto;opacity:.6;filter:grayscale(1);transition:var(--dur)} .logo-dai__list img:hover{opacity:1;filter:none} /* --- Dải logo khách chạy ngang (19/08) — VIẾT SẴN, CHƯA BẬT ------------- Chưa bật vì: (a) chưa có logo nào đủ điều kiện — ô 'da_cho_phep' trong ACF yêu cầu văn bản cho phép, hiện chưa khách nào có; (b) vòng lặp liền mạch cần nhân đôi danh sách trong template-parts/duoi-trang.php, mà khối đó có logic quyền dùng nhãn hiệu — không sửa khi deploy không có người trực. Cách bật sau này: nhân đôi danh sách trong PHP (in hai lần, bản thứ hai aria-hidden="true"), rồi thêm class --chay vào .dt-logo__dai. 38s/vòng: đủ chậm để đọc tên. linear là đúng — đường cong ease làm chuyển động liên tục giật từng nhịp. */ .dt-logo__dai--chay{overflow:hidden} .dt-logo__dai--chay > *{animation:tre-logo-chay 38s linear infinite} .dt-logo__dai--chay:hover > *{animation-play-state:paused} @keyframes tre-logo-chay{from{translate:0}to{translate:-50%}} /* Ba khối dịch vụ — đo: dẫn 40.8 · tên 85.8/77.2 · số 41.3 */ .dv{padding-block:var(--sp-11)} .dv__dan-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9);margin-bottom:var(--sp-6)} .dv__dan{font-size:var(--fs-40);line-height:1.15;max-width:16ch;letter-spacing:-.01em} .dv__phu{font-size:var(--fs-19);line-height:1.35; color:color-mix(in srgb,var(--c-ink) 78%,transparent);max-width:26ch} .dv__ten{font-size:var(--fs-86);line-height:1;letter-spacing:-.03em} /* Đo lại bản vẽ T1 ở hệ số ĐÚNG (1089/817 = 1,3337 — bề rộng thiết kế là 1089, không phải khổ chụp 1440): nhãn dưới tên dịch vụ 18,5px, nhãn mục 01/02/03 là 18,3px, thân bài 18,7px. Ba chỗ này đang để 12,8 và 13,3 — lệch −29% đến −31%, không phải ảo giác do khổ chụp. Dùng token gần nhất (fs-19 = 19,36) thay vì ghi số cứng, giữ hệ thang chữ. */ .dv__nhan{font-size:var(--fs-19);font-weight:var(--fw-semibold);letter-spacing:.08em; margin-top:var(--sp-2);color:color-mix(in srgb,var(--c-ink) 55%,transparent)} /* Khối 2 và 3 nhỏ hơn — đo 77.2px. ⚠ :nth-of-type đếm theo VỊ TRÍ TRONG CHA, không đếm riêng .dv — nên khối .dv đầu tiên vẫn dính n+2 và bị hạ xuống 77.28px (đo được) thay vì 85.8px. Dùng ~ để chỉ chọn .dv nào đứng SAU một .dv khác. */ .dv ~ .dv .dv__ten{font-size:var(--fs-77)} .dv__body{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-9); margin-top:var(--sp-7);align-items:start} .dv__mo-ta{display:grid;gap:var(--sp-4);font-size:var(--fs-19); line-height:var(--lh-body);max-width:44ch} .dv__mo-ta p{color:color-mix(in srgb,var(--c-ink) 75%,transparent)} .dv__muc{display:grid} .dv__muc li{border-bottom:1px solid var(--c-border)} .dv__muc a{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) 0; transition:color var(--dur) var(--ease)} .dv__muc a:hover{color:var(--c-red)} .dv__mui{width:30px;height:30px;flex-shrink:0;border:1.5px solid var(--c-ink); border-radius:50%;display:grid;place-items:center;font-size:13px} .dv__muc a:hover .dv__mui{border-color:var(--c-red)} .dv__so{font-size:var(--fs-41);font-weight:var(--fw-bold);min-width:2.2ch;line-height:1} /* Bản vẽ 29,2px ở khổ 1440; --fs-19 chỉ tới 25,7 (-12%). --fs-21 ra 27,8 (-4,8%), gần nhất trong thang mà không phải ghi số cứng. */ .dv__nhan-muc{font-size:var(--fs-21);font-weight:var(--fw-semibold);letter-spacing:.06em} .dv__muc--phai .dv__nhan-muc{flex:1} .dv__muc--phai .dv__so{order:3;text-align:right} /* Mục chưa có trang đích: giữ ĐÚNG nhịp 01/02/03 của bản vẽ nhưng không bấm được. Dùng chung khuôn với thẻ ở trên để không lệch một pixel nào — chỉ khác con trỏ và độ mờ. Cảnh báo bên dưới CHỈ biên tập viên thấy. */ /* ⚠ Selector PHẢI có 'li': span nằm TRONG
  • , không phải con trực tiếp của
      . Bản đầu viết '.dv__muc > span[...]' nên không khớp gì — render ra mới thấy opacity vẫn 1 và con trỏ vẫn là auto. */ .dv__muc li > span[aria-disabled]{display:flex;align-items:center;gap:var(--sp-4); padding:var(--sp-5) 0;opacity:.45;cursor:default} .dv__muc--phai li > span[aria-disabled] .dv__nhan-muc{flex:1} .dv__muc--phai li > span[aria-disabled] .dv__so{order:3;text-align:right} .dv__canh-bao{display:block;padding:0 0 var(--sp-4);font-size:var(--fs-13); font-style:normal;color:var(--c-red)} .dv__canh-bao code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em} /* Ảnh khối — đo: lưới 4:3 · full trang chủ VUÔNG 1:1 */ .dv__anh{margin-top:var(--sp-8);display:grid;gap:var(--grid-gap)} .dv__anh--luoi{grid-template-columns:1fr 1fr} .dv__anh--full{grid-template-columns:1fr} .dv__img{width:100%;object-fit:cover;border-radius:var(--radius);background:var(--c-surface)} .dv__anh--luoi .dv__img{aspect-ratio:var(--ar-chuan)} .dv__anh--full .dv__img{aspect-ratio:var(--ar-vuong)} /* Khách hàng nói — đo 95.2px, dẫn 27.9px, 3 cột */ .kh{padding-block:var(--sp-11) 0} .kh__dan{text-align:center;font-size:var(--fs-19); color:color-mix(in srgb,var(--c-white) 65%,transparent)} .kh__title{text-align:center;font-size:var(--fs-95);line-height:var(--lh-tight); letter-spacing:-.03em;margin-top:var(--sp-3)} .kh__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:var(--sp-10);background:var(--c-white);color:var(--c-ink)} .kh__item{padding:var(--sp-7);border-right:1px solid var(--c-border);display:grid;gap:var(--sp-4)} .kh__item:last-child{border-right:0} .kh__logo{height:34px;width:auto;object-fit:contain} .kh__quote{font-size:var(--fs-13);line-height:var(--lh-body); color:color-mix(in srgb,var(--c-ink) 78%,transparent)} .kh__meta{display:grid;gap:2px;font-size:var(--fs-12)} .kh__meta strong{font-size:var(--fs-13)} .kh__meta span{color:color-mix(in srgb,var(--c-ink) 55%,transparent)} /* Liên hệ — đo T1: 52.8 + 72.4 · nhãn "LIÊN HỆ" 32.7 */ /* text-wrap:pretty — KHÔNG dùng balance. front-page.php:234 có
      cứng giữa hai dòng ("Rất vui được gặp bạn
      Hãy làm việc cùng nhau"), mà balance bỏ cuộc trên khối có ngắt dòng cưỡng bức. Quét cả dải 320–1920: chữ "nhau" rớt một mình ở 336–429px (94/1601 độ rộng). 375px hỏng, 768/1440/1920 sạch. */ .lh__title{font-size:var(--fs-53);line-height:1.08;letter-spacing:-.02em;margin-bottom:var(--sp-8); text-wrap:pretty} .lh__title strong{font-size:var(--fs-72);font-weight:var(--fw-bold);display:block} .lh-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--sp-10);align-items:start} .lh__nhan{font-weight:var(--fw-bold);font-size:var(--fs-29);margin-bottom:var(--sp-4)} .lh__mo-ta{font-size:var(--fs-13);line-height:var(--lh-body); color:color-mix(in srgb,var(--c-ink) 72%,transparent);max-width:46ch;margin-bottom:var(--sp-6)} .lh__email{margin-top:var(--sp-6);font-size:var(--fs-13); color:color-mix(in srgb,var(--c-ink) 55%,transparent)} .lh__email a{color:var(--c-ink);text-decoration:underline} .lh-phone{font-size:var(--fs-36);font-weight:var(--fw-bold);letter-spacing:-.02em} .lh-phone:hover{color:var(--c-red)} /* Blog — đo: "Blog" 25.7 · tiêu đề bài 19.1 · ảnh 384×216 (16:9) */ .blog-home__grid{display:grid;grid-template-columns:.75fr 2fr;gap:var(--sp-9);align-items:start} .blog-home__head .h4{font-size:var(--fs-26);margin-block:var(--sp-3) var(--sp-5);max-width:16ch; line-height:1.15} .blog-home__list{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)} /* Thẻ bài — đo T3 y=9771: ảnh 384×216 (16:9) · dấu ❝ lề trái, tiêu đề thụt 41px · tiêu đề 19.1 dòng cách 21 (1.10) · mô tả 11.6 dòng cách 13 (1.12) */ .card--post .card__media{aspect-ratio:var(--ar-blog);overflow:hidden;background:var(--c-surface)} .card--post .card__img{width:100%;height:100%;object-fit:cover} /* bản vẽ: ảnh x=286..670, chữ bắt đầu x=313 → thụt 27px; ảnh đáy 9987, tiêu đề 10028 → cách 41px */ .card--post .card__body{padding-top:var(--sp-7);padding-inline:1.7rem} /* cột dấu ❝ rộng đúng 41px = khoảng thụt đo được (x=313 dấu → x=354 tiêu đề) */ .card--post .card__dau{display:grid;grid-template-columns:2.56rem 1fr; gap:0;align-items:start} .card--post .card__nhay{font-size:var(--fs-24b);line-height:.9;font-weight:var(--fw-bold)} .card--post .card__title{font-size:var(--fs-19);line-height:1.10;letter-spacing:-.01em} /* 11.6px không có token (thang tokens.css nhảy từ 12.8 xuống 9.4). Ghi thẳng số đo ở đây vì KHÔNG sửa tokens.css. Khi được phép, nâng thành --fs-11 trong tokens.css rồi thay biến vào đây. */ .card--post .card__excerpt{font-size:.725rem;line-height:1.12;margin-top:var(--sp-3); color:color-mix(in srgb,var(--c-ink) 78%,transparent)} /* Bản vẽ khối Blog không có ngày; trang lưu trữ /blog/ (ngoài bản vẽ) vẫn giữ */ .blog-home .card--post .card__meta{display:none} /* ========================================================================= CASE STUDY — đo bản vẽ T3 (Bioluk), artboard 1089px hero 1121×841 (4:3) full-bleed cột TRÁI x=77–79 · cột PHẢI x=478–485 → 44% / 56% "2024" 47.0px ĐEN (không đỏ — đã soi bản vẽ) tiêu đề 25.7px dòng cách 31 → 1.21 dẫn nhập 19.4px dòng cách 24 → 1.24, ĐẬM, cột phải thân bài 16.0px dòng cách 19.3 → 1.21 (dùng 1.30, xem tokens) dãy ảnh x=53..1064 → rộng hơn container chữ 8% dải bước 24.1px, kẻ ngang trên + dưới, đoạn văn chỉ ở cột phải meta cuối nhãn 16.0px đậm có dấu hai chấm · nội dung 13.3px dòng cách 16 ========================================================================= */ .du-an__hero{width:100%;aspect-ratio:var(--ar-chuan);overflow:hidden;background:var(--c-surface)} .du-an__hero-img{width:100%;height:100%;object-fit:cover} /* --- dẫn nhập: 1 lưới duy nhất, không tách head/cols như trước --- */ .du-an__intro{padding-block:var(--sp-9) var(--sp-8);display:grid; grid-template-columns:44fr 56fr;gap:var(--sp-8);align-items:start} .du-an__nam{font-size:var(--fs-47);color:var(--c-ink);font-weight:var(--fw-bold);line-height:1} .du-an__title{font-size:var(--fs-26);letter-spacing:-.01em;margin-top:var(--sp-3);line-height:1.21} .du-an__linh-vuc{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)} .du-an__linh-vuc a{font-size:var(--fs-12);padding:var(--sp-1) var(--sp-4); border:1px solid var(--c-border);border-radius:var(--radius-pill)} /* bản vẽ: dẫn nhập y=913 nằm GIỮA "2024" (869) và tiêu đề (929) → thụt xuống ~44px */ .du-an__intro-phai{padding-top:var(--sp-7)} .du-an__dan{font-size:var(--fs-19);font-weight:var(--fw-bold); line-height:1.24;letter-spacing:-.01em;max-width:36ch} .du-an__dan>*+*{margin-top:var(--sp-3)} .du-an__than{font-size:var(--fs-16);line-height:var(--lh-body);margin-top:var(--sp-3)} .du-an__than>*+*{margin-top:var(--sp-4)} /* --- MÉP RỘNG --- Bản vẽ: chữ dẫn nhập lùi vào x=77; ảnh, meta và Blog đều bám x=53. Rộng ảnh / rộng chữ = (1064−53)/(1089−2×77) = 1011/935 = 1.08. → nới 8% so với .container, KHÔNG dựng lưới thứ hai ngoài hệ 1280 (QĐ-13). 1280 − 2×28.5 = 1223 = 1132 × 1.08 ✓ */ .du-an__rong{width:100%;max-width:var(--container);margin-inline:auto; padding-inline:clamp(1.25rem,2vw,1.78rem)} /* minmax(0,1fr) chứ KHÔNG để cột auto: cột auto co giãn theo max-content, mà max-content của dải bước là cả đoạn văn trên một dòng (đo được 3000px) → lưới phình ra, trang tràn ngang 3108px. Lỗi chỉ lộ khi dải bước có dữ liệu thật. */ .du-an__gallery{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)} .du-an__gallery-img{width:100%;max-width:100%;height:auto;object-fit:cover; border-radius:var(--radius);background:var(--c-surface)} .du-an__gallery img[style]{width:100%!important} /* --- dải bước xen giữa dãy ảnh (bản vẽ y=1972) --- */ .du-an__buoc{margin-block:var(--sp-9) var(--sp-10)} .du-an__buoc-dau{display:grid;grid-template-columns:44fr 56fr;gap:var(--sp-8); padding-block:var(--sp-5);border-block:1px solid var(--c-border)} .du-an__buoc-ten,.du-an__buoc-td{font-size:var(--fs-24);font-weight:var(--fw-bold); line-height:1.15;letter-spacing:-.01em} /* ô lưới mặc định min-width:auto → không cho chữ dài ép cột rộng ra */ .du-an__buoc-ten,.du-an__buoc-td,.du-an__buoc-nd{min-width:0} .du-an__buoc-than{display:grid;grid-template-columns:44fr 56fr;gap:var(--sp-8); padding-top:var(--sp-5)} /* bản vẽ: đoạn văn chỉ ở cột phải, cột trái để trống */ .du-an__buoc-nd{grid-column:2;font-size:var(--fs-16);line-height:var(--lh-body)} /* --- meta cuối trang --- */ .du-an__meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-7);padding-block:var(--sp-9);border-top:1px solid var(--c-border); margin-top:var(--sp-9);font-size:var(--fs-13);line-height:1.2} /* ghi đè main.css: bản vẽ KHÔNG viết hoa, KHÔNG giãn chữ, KHÔNG xám */ .du-an__meta-label{font-size:var(--fs-16);font-weight:var(--fw-bold); text-transform:none;letter-spacing:0;color:var(--c-ink);margin-bottom:var(--sp-3)} /* Bản vẽ: 4 icon vuông nhỏ, không phải chữ (khách chốt 16/08/2026) */ .du-an__share{display:flex;gap:var(--sp-4);flex-wrap:wrap;font-size:var(--fs-13)} .du-an__share-nut{display:grid;place-items:center;width:24px;height:24px; color:color-mix(in srgb,var(--c-ink) 72%,transparent); transition:color var(--dur) var(--ease)} .du-an__share-nut svg{width:17px;height:17px;display:block} .du-an__share-nut:hover{color:var(--c-red)} /* ========================================================================= HUB / ARCHIVE — đo bản vẽ T6 (dùng chung T6·T10·T11·T12·T18), artboard 1089 hero full-bleed, phần nhìn thấy ≈ 4:3 nhãn "Khám phá tất cả" 29.3px x=80 số tổng 129.9px x=112 · dấu "+" 43.0px x=265, trong thẻ nền tối lưới đếm 2 cột × 3 hàng · nhãn 21.0px (x=470/790) · số 34.5px (x=625/948) lưới dự án 2 cột, ảnh 549×412 (1.33) tên dự án 16.8px · mô tả 12.0px ========================================================================= */ .hub-hero{width:100%;aspect-ratio:var(--ar-chuan);overflow:hidden;background:var(--c-surface)} .hub-hero__img{width:100%;height:100%;object-fit:cover} .kham-pha{padding-block:var(--sp-9)} .kham-pha__grid{display:grid;grid-template-columns:.42fr .58fr;gap:var(--sp-9);align-items:start} .kham-pha__nhan{font-size:var(--fs-29);font-weight:var(--fw-bold);letter-spacing:-.02em} .kham-pha__the{display:inline-flex;align-items:flex-start;gap:var(--sp-2); margin-top:var(--sp-5);padding:var(--sp-5) var(--sp-7) var(--sp-8); background:var(--c-ink);color:var(--c-white);border-radius:var(--radius);position:relative} .kham-pha__the:hover{background:var(--c-red)} /* 129.9px không có token; ghi thẳng số đo, KHÔNG sửa tokens.css */ .kham-pha__so{font-size:clamp(3.5rem,9vw,8.12rem);line-height:.82;font-weight:var(--fw-bold); letter-spacing:-.04em} .kham-pha__cong{font-size:clamp(1.5rem,2.4vw,2.69rem);line-height:1;font-weight:var(--fw-bold)} .kham-pha__mui{position:absolute;left:var(--sp-7);bottom:var(--sp-4);font-size:var(--fs-19)} .kham-pha__list{display:grid;grid-template-columns:1fr 1fr;list-style:none!important;margin:0} .kham-pha__o{border-bottom:1px solid var(--c-border)} .kham-pha__o:nth-child(odd){border-right:1px solid var(--c-border)} .kham-pha__o a{display:grid;grid-template-columns:1fr auto;align-items:center; gap:var(--sp-3) var(--sp-5);padding:var(--sp-5) var(--sp-6);transition:color var(--dur) var(--ease)} .kham-pha__o a:hover{color:var(--c-red)} .kham-pha__o.is-dau>a{color:var(--c-red)} .kham-pha__ten{font-size:var(--fs-21);line-height:1.15;max-width:12ch} .kham-pha__dem{font-size:clamp(1.5rem,2.6vw,2.16rem);font-weight:var(--fw-bold); line-height:1;text-align:right} .kham-pha__mui-nho{grid-column:2;font-size:var(--fs-16);text-align:right} .hub-luoi__title{font-size:var(--fs-30);letter-spacing:-.02em;margin-bottom:var(--sp-3)} .hub-luoi__mo-ta{font-size:var(--fs-16);line-height:var(--lh-body);max-width:60ch; margin-bottom:var(--sp-7)} .hub-them{display:flex;justify-content:center;margin-top:var(--sp-8)} .hub-them a{color:inherit} /* --- thẻ dự án --- */ .grid--du-an{grid-template-columns:1fr 1fr;gap:var(--grid-gap)} .card--du-an .card__media{aspect-ratio:var(--ar-chuan);overflow:hidden;background:var(--c-surface)} .card--du-an .card__img{width:100%;height:100%;object-fit:cover} .card--du-an .card__body{padding-top:var(--sp-4)} .card--du-an .card__hang{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .card__cham{width:6px;height:6px;border-radius:50%;background:var(--c-ink);flex-shrink:0} .card--du-an .card__title{font-size:var(--fs-17);line-height:1.2;letter-spacing:-.01em} /* Đo bản vẽ T6: 10,7px. Không có token nào trong 10% (fs-9 = 9,44 lệch −12%, fs-12 = 12,8 lệch +20%) nên ghi thẳng số, theo đúng tiền lệ đã chốt cho các cỡ 11,6 · 129,9 · 34,5. KHÔNG thêm token mới vào tokens.css. */ .card__nut{font-size:.67rem;font-weight:var(--fw-semibold);padding:var(--sp-1) var(--sp-4); border-radius:var(--radius-pill);background:var(--c-red);color:var(--c-white);white-space:nowrap} .card__mui{width:20px;height:20px;border:1px solid var(--c-border);border-radius:50%; display:grid;place-items:center;font-size:10px;flex-shrink:0} .card__mo-ta{font-size:var(--fs-12);line-height:1.3;margin-top:var(--sp-2); color:color-mix(in srgb,var(--c-ink) 70%,transparent)} .card--du-an .card__meta{display:none} /* Quét cả dải: chữ "tôi" rớt một mình ở 760–790 và 911–948px (69/1601 độ rộng). 768px hỏng, 375/1440/1920 sạch — chỉ kiểm breakpoint quen thuộc thì sót. */ .card__title{font-size:var(--fs-19);text-wrap:pretty} .card__meta{font-size:var(--fs-12)} .loc-bar a{font-size:var(--fs-13)} /* --- TRANG DỊCH VỤ — đo bản vẽ T2 (dùng chung T15) --- nhãn đầu 14.5px x=61 · tiêu đề 34.6px x=60, 2 dòng nhãn mục 19.8px · tiêu đề mục 33.4px, 3 dòng danh sách khả năng: chấm ĐỎ, 6 mục thẻ dự án hiện NGÀY căn phải thay cho mô tả */ .dv-dau{padding-block:var(--sp-6) var(--sp-5)} .dv-dau__grid{display:grid;grid-template-columns:1fr auto;gap:var(--sp-8);align-items:start} .dv-dau__nhan{font-size:var(--fs-14);color:color-mix(in srgb,var(--c-ink) 65%,transparent)} .dv-dau__title{font-size:var(--fs-30);line-height:1.22;letter-spacing:-.02em; max-width:24ch;margin-top:var(--sp-3)} .dv-dau__thanh{display:flex;gap:var(--sp-4);padding-top:var(--sp-2)} .dv-dau__thanh span{display:block;width:150px;height:16px;border-radius:2px} .dv-dau__thanh-do{background:var(--c-red)} .dv-dau__thanh-den{background:var(--c-ink)} .dv-dan__grid{display:grid;grid-template-columns:1fr .8fr;gap:var(--sp-9);align-items:start} .dv-dan__nhan{font-size:var(--fs-19);font-weight:var(--fw-medium)} .dv-dan__title{font-size:var(--fs-31);line-height:1.2;letter-spacing:-.02em; max-width:22ch;margin-top:var(--sp-4)} .dv-dan__kn-nhan{font-size:var(--fs-13);color:color-mix(in srgb,var(--c-ink) 65%,transparent); margin-bottom:var(--sp-3)} .dv-dan__kn-list{list-style:none!important;margin:0;display:grid;gap:var(--sp-2)} .dv-dan__kn-list li{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-13)} .dv-dan__kn-list li::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--c-red);flex-shrink:0} /* Ngày trong hàng tên: chỉ lưới trang dịch vụ dùng. Bản trước để .card__meta ở DÒNG DƯỚI tên — bản vẽ đặt ngày CÙNG DÒNG, căn phải. */ .card__ngay{display:none} .grid--dich-vu .card__nut,.grid--dich-vu .card__mui, .grid--dich-vu .card__mo-ta,.grid--dich-vu .card__meta{display:none} .grid--dich-vu .card__ngay{display:block;margin-left:auto;font-size:var(--fs-17); color:var(--c-ink);white-space:nowrap} .grid--dich-vu .card__hang{flex-wrap:nowrap} .grid--dich-vu .card__title{font-size:var(--fs-17);flex:1} /* --- dẫn nhập + ảnh đội ngũ trên hub (bản vẽ y=2712–3115) --- */ .hub-gioi-thieu__nhan{font-size:var(--fs-16);color:color-mix(in srgb,var(--c-ink) 60%,transparent)} .hub-gioi-thieu__title{font-size:var(--fs-28);line-height:1.2;letter-spacing:-.01em; max-width:26ch;margin-block:var(--sp-3) var(--sp-5)} .hub-gioi-thieu__than{font-size:var(--fs-16);line-height:var(--lh-body);max-width:62ch} .hub-doi-ngu{margin-top:var(--sp-8)} .hub-doi-ngu__img{width:92%;max-width:920px;margin-inline:auto;height:auto;display:block} /* ========================================================================= ĐUÔI TRANG DÙNG CHUNG — bản vẽ T2·T6·T10·T11·T12·T15·T18 6 dịch vụ nền đen · băng CTA nền xám · FAQ accordion · Blog ========================================================================= */ .dt-dv__nhan{font-size:var(--fs-14);color:color-mix(in srgb,var(--c-white) 65%,transparent)} .dt-dv__title{font-size:var(--fs-36);line-height:1.15;letter-spacing:-.02em; max-width:20ch;margin-block:var(--sp-3) var(--sp-8)} .dt-dv__list{display:grid;grid-template-columns:repeat(3,1fr);gap:0; list-style:none!important;margin:0} /* Bản vẽ T6: mỗi ô là chấm đỏ → tên → MÔ TẢ 2–4 dòng, xếp DỌC. Bản đầu xếp ngang vì tôi mới đọc tên dịch vụ trong bản vẽ, chưa đọc phần mô tả nằm ngay dưới. min-width:0 để chữ dài không thổi cột grid ra max-content — đúng cái bẫy đã làm lưới gallery phình lên 3000px. */ .dt-dv__o{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-3); padding:var(--sp-6) var(--sp-5);min-width:0; border-top:1px solid color-mix(in srgb,var(--c-white) 18%,transparent); border-right:1px solid color-mix(in srgb,var(--c-white) 18%,transparent)} .dt-dv__o:nth-child(3n){border-right:0} /* Chấm đỏ: đo bản vẽ đường kính ≈45pt trên artboard 816pt = 5,5% bề ngang trang → ~79px ở khổ 1440. Bản đầu để 26px, nhỏ hơn bốn lần. Phóng to ảnh PDF ra mới thấy — ở ảnh ghép thu nhỏ trông chỉ như "chấm to hơn một chút". Bên trong KHÔNG có icon, đúng là hình tròn đặc. */ .dt-dv__cham{width:clamp(48px,5.5vw,80px);aspect-ratio:1;border-radius:50%; background:var(--c-red);flex-shrink:0;margin-bottom:var(--sp-4)} /* đo bản vẽ T2: 16,7px — không phải 19,4 như tôi ước lượng bằng mắt trên ảnh phóng to */ .dt-dv__ten{font-size:var(--fs-17);font-weight:var(--fw-bold)} .dt-dv__mo-ta{font-size:var(--fs-13);line-height:var(--lh-body); color:color-mix(in srgb,var(--c-white) 72%,transparent)} /* --- Giới thiệu studio (khối 0 của đuôi trang) --- Bản vẽ T2/T6: logo Tre lớn bên trái, bên phải chấm đỏ + tiêu đề + thân bài + gạch đầu dòng in đậm; dưới cùng ảnh lớn. Trước đây khối này chỉ có ở archive-du_an.php và thiếu logo, chấm đỏ, gạch đầu dòng. */ .gt-studio{background:var(--c-surface)} .gt-studio__grid{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:var(--sp-9);align-items:start} .gt-studio__logo img{width:100%;max-width:250px;height:auto;display:block} .gt-studio__cham{display:block;width:9px;height:9px;border-radius:50%; background:var(--c-red);margin-bottom:var(--sp-4)} .gt-studio__title{font-size:var(--fs-19);font-weight:var(--fw-bold);line-height:1.35; letter-spacing:-.01em;max-width:44ch} .gt-studio__than{font-size:var(--fs-13);line-height:var(--lh-body);max-width:56ch; margin-top:var(--sp-4);padding-left:var(--sp-4);position:relative} .gt-studio__than::before{content:"";position:absolute;left:0;top:.55em; width:7px;height:7px;border-radius:50%;background:var(--c-red)} .gt-studio__gach{list-style:none!important;margin:var(--sp-5) 0 0;display:grid;gap:var(--sp-3)} .gt-studio__gach li{display:flex;align-items:baseline;gap:var(--sp-3); font-size:var(--fs-17);font-weight:var(--fw-bold)} .gt-studio__gach li::before{content:"";width:7px;height:7px;border-radius:50%; background:var(--c-red);flex-shrink:0} .gt-studio__anh{margin-top:var(--sp-8)} .gt-studio__anh-img{width:100%;height:auto;display:block} /* --- Khách hàng nói gì --- */ .dt-tm__dau{display:flex;align-items:flex-end;justify-content:space-between; gap:var(--sp-8);flex-wrap:wrap;margin-bottom:var(--sp-8)} .dt-tm__nhan{font-size:var(--fs-14);color:color-mix(in srgb,var(--c-ink) 60%,transparent)} .dt-tm__title{font-size:var(--fs-40);line-height:1.1;letter-spacing:-.02em; max-width:16ch;text-align:right} .dt-tm__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0} .dt-tm__the{min-width:0;padding:var(--sp-6) var(--sp-6) var(--sp-7);margin:0; border-top:1px solid var(--c-border);border-right:1px solid var(--c-border)} .dt-tm__the:last-child{border-right:0} .dt-tm__logo img{max-height:44px;width:auto;object-fit:contain} .dt-tm__ai{display:flex;flex-direction:column;margin-top:var(--sp-5)} .dt-tm__ten{font-size:var(--fs-16);font-weight:var(--fw-bold)} .dt-tm__chuc{font-size:var(--fs-13);color:color-mix(in srgb,var(--c-ink) 65%,transparent)} .dt-tm__cty{font-size:var(--fs-9);font-weight:var(--fw-semibold);letter-spacing:.08em; text-transform:uppercase;margin-top:var(--sp-2)} .dt-tm__loi{font-size:var(--fs-13);line-height:var(--lh-body);margin:var(--sp-4) 0 0; padding:0;border:0;color:color-mix(in srgb,var(--c-ink) 78%,transparent)} .dt-cta{background:var(--c-surface)} .dt-cta__title{font-size:var(--fs-40);line-height:1.15;letter-spacing:-.02em;max-width:24ch} /* Bản vẽ: pill đỏ + huy hiệu mũi tên TRÒN RIÊNG bên cạnh, cách một khoảng hở */ .dt-cta__nut{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-7)} .dt-cta__chu{background:var(--c-red);color:var(--c-white);border-radius:var(--radius-pill); padding:var(--sp-3) var(--sp-6);font-size:var(--fs-12);font-weight:var(--fw-semibold)} .dt-cta__mui{width:34px;height:34px;border-radius:50%;background:var(--c-red); color:var(--c-white);flex-shrink:0} .dt-cta__mui svg{width:15px;height:15px} .dt-cta__nut:hover .dt-cta__chu,.dt-cta__nut:hover .dt-cta__mui{background:var(--c-ink)} /* Dải logo khách — nằm TRONG băng CTA, cách bằng đường kẻ trên */ .dt-logo{border-top:1px solid var(--c-border);margin-top:var(--sp-8)} .dt-logo__dai{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-6);flex-wrap:wrap;padding-block:var(--sp-6)} .dt-logo__o img{max-height:34px;width:auto;object-fit:contain} /* Pill FAQ đo 14,0px; pill "Lời đề nghị" dưới footer đo 18,7px. Cùng class .ft-de-nghi__nut nên phải tách cỡ ra, không thì một trong hai luôn sai. */ .dt-faq__nut{font-size:var(--fs-14)} /* Bản vẽ: thẻ TRẮNG BO GÓC trên nền đen, thụt sang phải ~nửa bề ngang, nút mũi tên tròn ở mép phải. Bản đầu là dòng kẻ ngang suốt — sai hình khối. */ .dt-faq__list{display:grid;gap:var(--sp-3);margin-left:auto;width:min(100%,62%)} .dt-faq__o{background:var(--c-white);color:var(--c-ink);border-radius:var(--radius-lg,14px); padding:var(--sp-4) var(--sp-5);border:0} .dt-faq__o summary{cursor:pointer;list-style:none;display:flex;align-items:center; justify-content:space-between;gap:var(--sp-5)} .dt-faq__hoi{font-size:var(--fs-14);font-weight:var(--fw-semibold);line-height:1.35} .dt-faq__mui{width:26px;height:26px;border-radius:50%;background:var(--c-ink); color:var(--c-white);flex-shrink:0} .dt-faq__mui svg{width:12px;height:12px} /* Thẻ đang mở: mũi tên đỏ và quay ngược — bản vẽ vẽ mũi chỉ xuống-trái */ .dt-faq__o[open] .dt-faq__mui{background:var(--c-red);transform:rotate(180deg)} .dt-faq__o p{font-size:var(--fs-12);line-height:var(--lh-body);margin-top:var(--sp-3); color:color-mix(in srgb,var(--c-ink) 72%,transparent)} /* Câu chưa có lời đáp: thẻ tĩnh, con trỏ thường — không mời khách bấm vào chỗ rỗng */ .dt-faq__o--tinh{display:flex;align-items:center;justify-content:space-between; gap:var(--sp-4);flex-wrap:wrap} .dt-faq__nhac{font-size:var(--fs-9);color:var(--c-red);font-style:normal;flex-basis:100%} /* --- Đội ngũ --- */ .dt-team__title{font-size:var(--fs-30);line-height:1.15;letter-spacing:-.02em; text-align:center;max-width:26ch;margin-inline:auto} .dt-team__phu{text-align:center;font-size:var(--fs-14);margin-top:var(--sp-2); color:color-mix(in srgb,var(--c-ink) 55%,transparent)} .dt-team__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-5);margin-top:var(--sp-8)} .dt-team__the{min-width:0;margin:0} .dt-team__anh img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block} .dt-team__ai{display:flex;align-items:baseline;justify-content:space-between; gap:var(--sp-3);margin-top:var(--sp-3)} .dt-team__ten{font-size:var(--fs-14);font-weight:var(--fw-bold)} .dt-team__nam{text-align:right;line-height:1.1} .dt-team__nam strong{display:block;font-size:var(--fs-14)} .dt-team__nam small{font-size:var(--fs-9);letter-spacing:.06em;text-transform:uppercase; color:color-mix(in srgb,var(--c-ink) 55%,transparent)} .dt-team__chuc{font-size:var(--fs-12);color:color-mix(in srgb,var(--c-ink) 65%,transparent)} .dt-team__loi{font-size:var(--fs-9);line-height:var(--lh-body);margin:var(--sp-3) 0 0; padding:0;border:0;color:color-mix(in srgb,var(--c-ink) 75%,transparent)} .blog-home__dieu-huong{display:flex;gap:var(--sp-3);margin-top:var(--sp-6)} .blog-home__nut{width:34px;height:34px;border-radius:50%;background:var(--c-surface); display:grid;place-items:center;font-size:var(--fs-13)} /* ========================================================================= BÁO GIÁ — đo: bảng so sánh 13.2px ========================================================================= */ /* tiêu đề 32.0px viết hoa · tên gói 31.9 · mô tả 13.2 · giá 20.2 · nhãn "Quyền lợi khách hàng" 19.6 · dòng quyền lợi + bảng 13.2 */ /* Bản vẽ: huy hiệu mũi tên TRÒN ĐEN bên trái tiêu đề, đường kính ~ chiều cao chữ */ .bg-title{font-size:var(--fs-31);text-transform:uppercase;letter-spacing:-.01em; line-height:1.2;margin-bottom:var(--sp-8); display:flex;align-items:center;gap:var(--sp-4)} .bg-title__mui{width:1.35em;height:1.35em;border-radius:50%;background:var(--c-ink); color:var(--c-white);flex-shrink:0} .bg-title__mui svg{width:.62em;height:.62em} /* Hero trang báo giá: CÓ LỀ, tỉ lệ 1.75 — đo x=35.4→805.8 / artboard 817, 770×441. Khác hero trang dịch vụ (tràn viền, 1.33). */ .bg-hero{width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--c-surface); margin-top:var(--sp-6)} .bg-hero__img{width:100%;height:100%;object-fit:cover;display:block} .bg-ghi-chu{font-size:var(--fs-9);line-height:1.6;margin-top:var(--sp-5); color:color-mix(in srgb,var(--c-ink) 62%,transparent);max-width:72ch} /* Dẫn nhập đầu trang báo giá — bản vẽ: tiêu đề đậm trái, thân bài phải */ .bg-dan__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-8);align-items:start} .bg-dan__title{font-size:var(--fs-30);line-height:1.15;letter-spacing:-.02em;max-width:18ch} .bg-dan__than{font-size:var(--fs-16);line-height:var(--lh-body);max-width:46ch} /* MỘT hộp viền liền, 3 cột dính nhau — không phải 3 thẻ rời có khoảng cách. Dải giá NỀN ĐEN chữ trắng. Quyền lợi nằm TRONG cột. Nút căn ĐÁY đều nhau. */ .gia-bang{display:grid;grid-template-columns:repeat(3,1fr); border:1px solid var(--c-border);border-radius:var(--radius)} .gia-card{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-7) var(--sp-6); border-right:1px solid var(--c-border)} .gia-card:last-child{border-right:0} .gia-card__ten{font-size:var(--fs-31);letter-spacing:-.02em;line-height:1.1} .gia-card__mo-ta{font-size:var(--fs-13);line-height:1.3; color:color-mix(in srgb,var(--c-ink) 70%,transparent);min-height:3.9em} /* dải giá nền đen chạy hết bề ngang cột — bản vẽ, không phải chữ đỏ trên nền trắng */ .gia-card__gia{font-size:var(--fs-21);font-weight:var(--fw-bold); background:var(--c-ink);color:var(--c-white); margin-inline:calc(-1 * var(--sp-6));padding:var(--sp-4) var(--sp-6);text-align:center} .gia-card__ql-nhan{font-size:var(--fs-19);font-weight:var(--fw-bold);margin-top:var(--sp-4)} .gia-card__ql{font-size:var(--fs-13);line-height:1.3;display:grid;gap:var(--sp-4)} .gia-card__ql li{padding-bottom:var(--sp-4);border-bottom:1px solid var(--c-border)} /* pill ĐEN + huy hiệu mũi tên tròn, đẩy xuống ĐÁY để 3 cột bằng nhau */ .gia-card__nut{margin-top:auto;padding-top:var(--sp-6);align-self:flex-start; display:inline-flex;align-items:center;gap:var(--sp-3)} .gia-card__nut>span:first-child{background:var(--c-ink);color:var(--c-white); padding:var(--sp-3) var(--sp-7);border-radius:var(--radius-pill);font-size:var(--fs-13); font-weight:var(--fw-semibold)} .gia-card__mui{width:34px;height:34px;border-radius:50%;background:var(--c-ink); color:var(--c-white);display:grid;place-items:center;flex-shrink:0} .gia-card__mui svg{width:15px;height:15px;display:block} .gia-card__nut:hover>span:first-child,.gia-card__nut:hover .gia-card__mui{background:var(--c-red)} .bg-luu-y{font-size:var(--fs-12);margin-top:var(--sp-4); color:color-mix(in srgb,var(--c-ink) 60%,transparent)} /* Đo bản vẽ T8: 33,3px — tôi ước lượng bằng mắt ra 24, thiếu 30% */ .bg-ql-nhan{font-size:var(--fs-31);font-weight:var(--fw-bold);letter-spacing:-.01em; margin-block:var(--sp-10) var(--sp-5)} .bang-bọc{overflow-x:auto} .bang-so-sanh{font-size:var(--fs-13);width:100%;border-collapse:collapse} .bang-so-sanh th,.bang-so-sanh td{padding:var(--sp-3) var(--sp-4);vertical-align:top} /* Bản vẽ: cột giá trị CĂN GIỮA, cột hạng mục căn trái */ .bang-so-sanh td,.bang-so-sanh thead th+th{text-align:center} .bang-so-sanh th{text-align:left} .bang-so-sanh thead th{font-weight:var(--fw-bold);border-bottom:1.5px solid var(--c-ink); padding-bottom:var(--sp-4)} .bang-so-sanh tbody th{font-weight:var(--fw-regular)} /* Bản vẽ kẻ sọc xen kẽ thay cho đường kẻ từng dòng — mắt bám hàng tốt hơn ở bảng 24–40 dòng, và đó đúng là thứ bản vẽ vẽ. */ .bang-so-sanh tbody tr:nth-child(odd){background:var(--c-surface)} .bang-so-sanh td.co{color:var(--c-red);font-weight:var(--fw-bold)} .bang-so-sanh td.trong{color:color-mix(in srgb,var(--c-ink) 35%,transparent)} .bg-noi-dung{margin-top:var(--sp-9);max-width:var(--container-narrow)} /* ========================================================================= BÀI VIẾT + QUY TRÌNH — đo bản vẽ T9 · T14 (=T17) hero 1092×614 (1.78) · tiêu đề bài 16.0 · thân bài 13.7 "QUY TRÌNH THỰC HIỆN" 32.0 · lưới 3×3 · số bước 26.1 · chữ 14.2 ========================================================================= */ .qt-hero{width:100%;aspect-ratio:var(--ar-blog);overflow:hidden;background:var(--c-surface)} .qt-hero__img{width:100%;height:100%;object-fit:cover} .qt-bai{max-width:72ch} .qt-bai__title{font-size:var(--fs-16);font-weight:var(--fw-bold);margin-bottom:var(--sp-5)} .qt-bai__than{font-size:var(--fs-14);line-height:1.35} .qt-bai__than>*+*{margin-top:var(--sp-5)} .qt-khoi{margin-top:var(--sp-11)} /* Bản vẽ: huy hiệu mũi tên tròn đen bên trái tiêu đề, giống trang báo giá */ .qt-khoi__title{font-size:var(--fs-31);text-transform:uppercase;letter-spacing:-.01em; margin-bottom:var(--sp-8);display:flex;align-items:center;gap:var(--sp-4)} .qt-khoi__mui{width:1.35em;height:1.35em;border-radius:50%;background:var(--c-ink); color:var(--c-white);flex-shrink:0} .qt-khoi__mui svg{width:.62em;height:.62em} .quy-trinh{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7) var(--sp-6); list-style:none!important;margin:0} /* Bản vẽ: mỗi bước là HỘP BO TRÒN CÓ VIỀN, số nằm NGOÀI hộp bên trái. Bản đầu chỉ có số + chữ trần, không hộp — đúng chữ, sai hình. */ .quy-trinh__buoc{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4); align-items:center} .quy-trinh__so{font-size:var(--fs-26);font-weight:var(--fw-regular); line-height:1;min-width:1.6ch;text-align:center; color:color-mix(in srgb,var(--c-ink) 75%,transparent)} .quy-trinh__td{font-size:var(--fs-14);font-weight:var(--fw-medium);line-height:1.35;margin:0; border:1px solid var(--c-border);border-radius:var(--radius-pill); padding:var(--sp-4) var(--sp-6);min-height:4.4em;display:flex;align-items:center} /* ========================================================================= GIỚI THIỆU — đo: tiêu đề 30.7 · phụ 28.0 · nhân sự 0.65 ========================================================================= */ .gt__title{font-size:var(--fs-30);line-height:1.2} .gt__sub{font-size:var(--fs-28);line-height:1.2} .card__media--nhan-su{aspect-ratio:var(--ar-nhan-su)} /* ========================================================================= TRẠNG THÁI RỖNG ========================================================================= */ .section:has(.empty-state){padding-block:var(--sp-8)} .empty-state{padding:var(--sp-7) var(--sp-5);text-align:center; color:color-mix(in srgb,var(--c-ink) 55%,transparent); border:1px dashed var(--c-border);border-radius:var(--radius-lg); background:color-mix(in srgb,var(--c-surface) 50%,transparent); max-width:520px;margin-inline:auto;font-size:var(--fs-13)} /* ========================================================================= RESPONSIVE — đo scrollWidth ở 320/375/390/430 ========================================================================= */ @media (max-width:900px){ .xc-grid,.dv__dan-grid,.dv__body,.lh-grid, .blog-home__grid,.blog-home__list, .du-an__intro{grid-template-columns:1fr;gap:var(--sp-6)} .du-an__buoc-dau,.du-an__buoc-than{grid-template-columns:1fr;gap:var(--sp-3)} .du-an__intro-phai{padding-top:0} .du-an__buoc-nd{grid-column:1} .du-an__buoc{margin-block:var(--sp-7)} .dv__anh--luoi{grid-template-columns:1fr} .grid--du-an{grid-template-columns:1fr} /* lưới đếm 2 cột ép trong cột phải .58fr → tràn ngang từ 320px. Xuống 1 cột. */ .kham-pha__grid,.kham-pha__list, .dv-dau__grid,.dv-dan__grid{grid-template-columns:1fr;gap:var(--sp-5)} .dv-dau__thanh span{width:96px} .gia-bang{grid-template-columns:1fr} .gia-card{border-right:0;border-bottom:1px solid var(--c-border)} .gia-card:last-child{border-bottom:0} .gia-card__mo-ta{min-height:0} .quy-trinh{grid-template-columns:1fr;gap:var(--sp-5)} .ft-cot,.ft-lien-he__cot{grid-template-columns:1fr;gap:var(--sp-6)} .ft-de-nghi__thanh{margin-left:0;width:100%} .ft-duoi{align-items:flex-start} .ft-gio{gap:var(--sp-6)} .site-header__cta-chu{display:none} .site-header__sang{display:none} .kham-pha__o:nth-child(odd){border-right:0} .kham-pha__ten{max-width:none} .card__nut{white-space:normal} .kh__item{border-right:0;border-bottom:1px solid var(--c-border)} .logo-dai__list{justify-content:center;gap:var(--sp-5)} .logo-dai__list img{height:22px} .doi-ngu__anh{width:100%;margin-left:0;transform:none} .hero-banner,.du-an__hero{aspect-ratio:4/3} .lh__title strong{display:inline} .bang-so-sanh{display:block;overflow-x:auto;white-space:nowrap} /* --- đuôi trang dùng chung --- */ .dt-dv__list,.dt-tm__list{grid-template-columns:1fr} .dt-dv__o,.dt-tm__the{border-right:0} .dt-tm__title{text-align:left} .dt-faq__list{width:100%;margin-left:0} .dt-team__list{grid-template-columns:repeat(2,minmax(0,1fr))} .dt-logo__dai{justify-content:center} } @media (max-width:560px){ .dt-team__list{grid-template-columns:1fr} } /* --------------------------------------------------------------------- MŨI TÊN CHÉO — kích thước cho SVG do tre_mui() in ra Trước đây 9 chỗ dùng ký tự "↗" (U+2197). Inter không có glyph này: ô tròn đo ra đủ 26px bề rộng nhưng RỖNG trên màn hình. Đổi sang SVG nên phải đặt bề rộng cho svg, không còn dựa vào font-size nữa. --------------------------------------------------------------------- */ /* Chỉ đặt CĂN GIỮA ở rule dùng chung. KHÔNG đặt bề rộng svg ở đây: khối này nằm CUỐI file nên width:100% sẽ đè mọi cỡ riêng khai phía trên (cùng độ đặc hiệu, rule sau thắng) — mũi tên phình kín ô tròn 42px. Cỡ để từng class tự khai; .btn__mui là cái duy nhất muốn lấp đầy ô 1em. */ .mui-cheo{display:inline-grid;place-items:center;vertical-align:-.12em} .mui-cheo svg{display:block} .btn__mui{width:1em;height:1em;margin-left:.45em} .btn__mui svg{width:100%;height:100%} .dv__mui svg{width:13px;height:13px} .card__mui svg{width:9px;height:9px} /* ========================================================================= HERO CÓ DẢI CHẤM — bản vẽ T1 · T6 · T8 Băng cuộn ngang có scroll-snap: không JS vẫn vuốt được, ảnh đầu vẫn hiện. Chấm chỉ nhận con trỏ bấm khi JS đã gắn (class .co-js đặt từ JS) — vẽ nút bấm được trong khi không bấm được là nói dối người dùng. ========================================================================= */ .hero-slider{position:relative} .hero-slider__bang{display:flex;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none} .hero-slider__bang::-webkit-scrollbar{display:none} .hero-slider__o{flex:0 0 100%;min-width:0;scroll-snap-align:start} .hero-slider__img{width:100%;height:100%;object-fit:cover;display:block} .hero-slider__cham{position:absolute;right:var(--sp-6);bottom:var(--sp-5); display:flex;gap:var(--sp-2);z-index:2} .hero-slider__cham-nut{width:9px;height:9px;border-radius:50%;border:0;padding:0; background:color-mix(in srgb,var(--c-white) 55%,transparent); cursor:default;pointer-events:none; transition:background var(--dur) var(--ease)} .hero-slider.co-js .hero-slider__cham-nut{cursor:pointer;pointer-events:auto} .hero-slider__cham-nut.is-dang{background:var(--c-red)} .hero-slider__cham-nut:focus-visible{outline:2px solid var(--c-white);outline-offset:2px} @media (prefers-reduced-motion:reduce){ .hero-slider__bang{scroll-behavior:auto} } /* ========================================================================= LOGO CHỮ — bậc cuối của tre_logo(), dùng khi CHƯA có file ảnh nào Không phải trang trí: hai PNG logo nằm trong theme mà công cụ file của 1Panel chỉ ghi được văn bản, nên bản trên máy chủ có thể thiếu ảnh. Rơi về chữ thì trang vẫn đọc được; in thẻ img trỏ file không có thì icon vỡ. ========================================================================= */ .tre-logo-chu{display:inline-flex;align-items:center;gap:.28em;line-height:1; font-weight:var(--fw-bold);letter-spacing:-.03em} .tre-logo-chu__ten{font-size:1.62em;position:relative} /* chấm đỏ trên chữ "e" — dấu hiệu nhận biết của logo Tre trong bản vẽ */ .tre-logo-chu__ten::after{content:"";position:absolute;right:.06em;top:.12em; width:.16em;height:.16em;border-radius:50%;background:var(--c-red)} /* display:block chứ không để inline:
      vẫn xuống dòng nhưng khối chữ hai dòng phải là MỘT ô của flex, không thì "DESIGN" nằm ngang hàng "Tre" còn "STUDIO" rơi xuống dưới lệch hẳn sang trái. Đã đo bằng ảnh chụp. */ .tre-logo-chu__phu{display:block;font-size:.72em;line-height:1.05;letter-spacing:.01em; text-align:left;font-weight:var(--fw-bold)} /* CHỈ nhắm thẻ img. tre_logo() truyền cùng chuỗi class cho cả ảnh lẫn bản chữ, nên quy tắc không có img{} sẽ đặt display:block lên .tre-logo-chu và phá thế inline-flex — "Tre" rơi xuống một dòng, "DESIGN/STUDIO" dòng khác. Chỉ thấy khi tạm giấu thư mục assets/design để giả lập máy chủ thiếu ảnh. */ img.gt-studio__logo-img,img.gt-vh__logo-img{width:100%;max-width:250px;height:auto;display:block} /* bản chữ trong hai khối trên phải to lên cho cân với ô */ .gt-studio__logo .tre-logo-chu,.gt-vh__logo .tre-logo-chu{font-size:var(--fs-24)} .gt-vh__logo .tre-logo-chu{color:var(--c-white)} .ft-duoi__logo.tre-logo-chu{font-size:var(--fs-19);color:var(--c-white)} .site-header__logo-img.tre-logo-chu{font-size:var(--fs-15)} /* ========================================================================= NHỊP DỌC GIỮA CÁC SECTION — đo lại từ bản vẽ 16/08/2026 ───────────────────────────────────────────────────────────────────────── Đo khoảng trống giữa hai khối liền nhau trên 5 trang bản vẽ, quy về khổ 1440px: T1 trang chủ 64 · 63 · 84 · 95 · 150 · 134 T6 hub 60 · 62 · 88 · 61 · 220 · 118 T2 dịch vụ 166 · 85 · 61 · 206 · 117 T4 giới thiệu 77 · 83 · 163 · 91 · 80 · 65 T8 báo giá 81 · 121 · 102 · 134 Nhịp thường dùng là 60–95px; số 150–220 chỉ xuất hiện ở vài chỗ chuyển lớn (trước khối nền đen, trước footer). Site đang để --section-y = clamp(3rem, 6vw, 7.5rem) → 86.4px mỗi bên, tức 173px giữa hai section; riêng .dv để --sp-11 = 96px → 192px. Gấp 2–3 lần bản vẽ. Đây là lý do trang "rộng thênh thang" so với thiết kế. ĐÃ CHUYỂN vào tokens.css (19/08/2026) — trước đây đè ở đây vì tokens.css là vùng cấm; hạn chế đó đã gỡ. Giá trị y hệt, số đo bản vẽ chép sang cùng. Không khai lại :root ở file này nữa: hai nơi cùng khai một biến thì tokens.css trông như nguồn chuẩn trong khi thực tế bị file sau đè. ========================================================================= */ .dv{padding-block:var(--section-y)} /* Trước khối nền đen và trước footer bản vẽ nới rộng hẳn ra */ .section--ink{padding-block:var(--section-y-lon)} .blog-home{padding-bottom:var(--section-y-lon)} /* Bản vẽ T1 nới rộng đúng hai chỗ: trước khối Blog (134px) và trước footer. Footer đang cộng dồn margin-top 128px + padding-top 80px = 208px, gấp rưỡi bản vẽ; kéo margin về nhịp chung. */ .blog-home{padding-block:var(--section-y-lon)} .site-footer{margin-top:var(--section-y)} /* ========================================================================= CHUYỂN ĐỘNG — tham khảo madebyshape.co.uk/work (bản vẽ chép bố cục từ đây; 5 câu FAQ trong bản vẽ còn để nguyên tên "Shape"). Đọc thẳng CSS đang chạy của họ, lấy CÁCH LÀM chứ không bê mã: · MỘT đường cong duy nhất cho mọi chuyển động: cubic-bezier(.135,.9,.15,1) · 0.9s — bật nhanh rồi hãm rất dài. Chính cái đuôi dài đó tạo cảm giác "mượt", không phải thời lượng. · .lazy-load{opacity:0} rồi hiện dần khi ảnh vào khung nhìn. · html{scroll-behavior:smooth} · .group-hover:scale-105 — ảnh trong thẻ phóng 5% khi rê chuột. KHÔNG chép một thứ của họ: trang đó không có prefers-reduced-motion. Người bị say chuyển động sẽ chóng mặt thật. Ở đây tắt sạch. ========================================================================= */ :root{ --ease-muot: cubic-bezier(.135,.9,.15,1); --dur-muot: .9s; } html{scroll-behavior:smooth} /* Trạng thái ẩn CHỈ do JS đặt. Viết sẵn trong HTML thì tắt JS là mất trắng nội dung — đúng cái bẫy "trang trống trơn khi script hỏng". */ /* Dùng thuộc tính `translate` RIÊNG, không dùng transform:translateY(). Đã dính ngay lần đầu: .doi-ngu__anh căn full-bleed bằng transform:translateX(-50%), và transform:translateY(26px) của hiệu ứng ĐÈ mất phép căn đó → ảnh 92vw nhảy sang phải nửa bề rộng, trang chủ tràn ngang 380–420px ở 88/161 bề rộng quét. `translate` cộng dồn với `transform`, nên phần tử nào đang có transform layout vẫn giữ nguyên. */ .js-hien{opacity:0;translate:0 26px; transition:opacity var(--dur-muot) var(--ease-muot), translate var(--dur-muot) var(--ease-muot)} .js-hien.la-hien{opacity:1;translate:none} /* --- Tiêu đề lớn trượt lên từ sau mặt nạ (19/08) ------------------------- Ba tiêu đề dịch vụ là khoảnh khắc chữ mạnh nhất của site (85.8 / 77.2 / 77.2px). Cho chúng lộ dần bằng clip-path thay vì mờ dần như mọi khối khác. Dùng clip-path nên KHÔNG cần thẻ bọc: không đụng markup, không đụng main.js. .dv__ten đã nhận sẵn .js-hien/.la-hien (nó khớp '.section > .container > *' trong CHON của main.js) — chỉ cần đè lại phần biểu diễn. An toàn khi tắt JS: .js-hien do JS thêm, không có JS thì không có class, tiêu đề hiện bình thường, không mặt nạ. Đặc hiệu: .dv__ten.js-hien là (0,2,0), thắng .js-hien (0,1,0) — cố ý, để tắt opacity/translate chung và chỉ dùng mặt nạ. Vì thế phần giảm chuyển động BẮT BUỘC cũng phải (0,2,0) trở lên, xem khối @media ngay dưới. */ ⚠ inset() KHÔNG nhận giá trị âm. Bản đầu viết inset(-15% ...) cho trạng thái hiện — khai báo không hợp lệ, trình duyệt BỎ nó, quy tắc ẩn ở trên thắng, và ba tiêu đề kẹt sau mặt nạ VĨNH VIỄN. Đo được: thêm .la-hien mà clip-path vẫn inset(0% 0% 105%). Trạng thái hiện phải là inset(0). */ .dv__ten.js-hien{ opacity:1;translate:none; clip-path:inset(0 0 100% 0); transition:clip-path var(--dur-muot) var(--ease-muot)} .dv__ten.js-hien.la-hien{clip-path:inset(0 0 0 0)} /* Ảnh trong thẻ phóng nhẹ khi rê chuột. Khung đã có overflow:hidden. */ .card--post .card__media img, .card--du-an .card__media img{transition:transform 1.1s var(--ease-muot)} .card--post:hover .card__media img, .card--du-an:hover .card__media img{transform:scale(1.05)} /* Nút và liên kết mượt theo cùng một đường cong */ /* 19/08: đổi .9s → .42s. Đổi màu nền kéo dài 0.9s cảm giác lờ đờ và nhoè khi rê chuột qua nhanh; --dur-nhanh dứt khoát hơn, vẫn cùng đường cong. (Bản đề xuất ban đầu là quét màu bằng ::before scaleX. Bỏ: .btn--red, .section--ink .btn và .btn--ghost đều khai background riêng, chèn thêm một lớp nền nữa phải sắp lại toàn bộ hệ màu nút — không đáng làm khi deploy không có người trực.) */ .btn,.gia-card__nut,.dt-cta__nut,.kham-pha__the{ transition:background-color var(--dur-nhanh) var(--ease-muot), color var(--dur-nhanh) var(--ease-muot), border-color var(--dur-nhanh) var(--ease-muot), transform var(--dur-nhanh) var(--ease-muot)} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .js-hien,.js-hien.la-hien{opacity:1;translate:none;transition:none} /* Mặt nạ tiêu đề: phải khớp đặc hiệu (0,2,0) của quy tắc bật, nếu không phần tắt THUA và tiêu đề kẹt sau mặt nạ — tức là mất chữ, không phải mất hiệu ứng. Đây đúng lỗi đã ghi ở dòng ~1332 với .mui-cheo. */ .dv__ten.js-hien,.dv__ten.js-hien.la-hien{clip-path:none;transition:none} /* Marquee: phải là animation:none — transition:none KHÔNG tắt @keyframes. */ .dt-logo__dai--chay > *{animation:none} .card--post .card__media img,.card--du-an .card__media img, .card--post:hover .card__media img,.card--du-an:hover .card__media img{ transition:none;transform:none} } /* ========================================================================= FONT — Oldschool Grotesk, đúng font của bản vẽ ───────────────────────────────────────────────────────────────────────── Dò font nhúng trong WEB TRE24326.XEM OK.pdf: 39/39 bộ chữ là "OldschoolGroteskVar". Trước đây theme thay bằng Inter (tokens.css dòng 25 ghi rõ đã đo 12 font thay thế, chênh ~1%). ⚠ Và file Inter đang có trong theme HỎNG: chỉ 10.252 byte / 115 glyph, THIẾU toàn bộ nguyên âm có dấu tiếng Việt (à á ã â è é ê ì í…). Nghĩa là mọi chữ có dấu trên site đang rơi về font hệ thống — trang chạy hai font lẫn nhau từ đầu tới giờ mà không ai thấy, vì chữ không dấu vẫn đúng. Hàm doctor chỉ kiểm file CÓ TỒN TẠI, không kiểm nó đọc được. Bản mới: variable, 749 glyph, đủ dấu tiếng Việt cả thường lẫn HOA, trục wght 50–900 và wdth 25–100. 290 KB. Đè --font-sans ở đây, KHÔNG động tokens.css. ========================================================================= */ @font-face{ font-family:'Oldschool Grotesk'; font-style:normal; font-weight:50 900; font-stretch:25% 100%; font-display:swap; src:url('../fonts/OldschoolGrotesk-Variable.woff2') format('woff2-variations'), url('../fonts/OldschoolGrotesk-Variable.woff2') format('woff2'); } :root{ --font-sans:'Oldschool Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; } /* Cỡ cho các SVG mới của tre_icon(). Đổi từ ký tự sang SVG nên phải đặt bề rộng tường minh, không còn dựa vào font-size như trước. */ .kham-pha__mui svg{width:34px;height:12px;display:block} .kham-pha__mui-nho svg{width:24px;height:9px;display:block} .ft-de-nghi__mui svg{width:30px;height:11px;display:block} .ft-gio__mui svg{width:26px;height:10px;display:block} .kh__sao-ds{display:inline-flex;gap:.12em;vertical-align:-.1em} .kh__sao-ds svg{width:.95em;height:.95em;display:block;color:#F5A623} .site-header__sang svg{width:15px;height:15px;display:block} .card--post .card__nhay svg{width:1.15em;height:1.15em;display:block} .bang-tick{display:inline-grid;place-items:center} .bang-tick svg{width:15px;height:15px;display:block} /* SVG là khối, không còn ăn text-align như ký tự ⟶ trước đây */ .kham-pha__mui-nho{justify-self:end} /* ========================================================================= THANG CHỮ — ĐÈ TOÀN BỘ. Sửa một lỗi gốc của chính tôi. ───────────────────────────────────────────────────────────────────────── tokens.css đặt mỗi cỡ chữ bằng đúng số đo trên bản vẽ, nhưng bản vẽ rộng 1089px còn site nghiệm thu ở 1440px. Thiếu hệ số 1440/1089 = 1,3223. Đo lại ở khổ 1440: phần tử bản vẽ cần web đang có tỉ lệ thân bài 24,7px 16,0px 65% "Branding" 113,5px 85,8px 76% "Thiết kế bao bì" 102,2px 77,3px 76% "Xin chào !" 87,0px 65,8px 76% 76% chính là 1089/1440. Toàn bộ chữ nhỏ hơn thiết kế một phần ba — đây là lý do khách nhìn ảnh so sánh và nói "quá khác so với mẫu". ⚠ Tôi đã THẤY dấu hiệu này rồi tự giải thích nó đi: docstring cũ của _tools/so-sanh-ban-ve.py ghi "chữ web hiện nhỏ hơn ~24% là hệ quả của khổ chụp 1440, KHÔNG PHẢI LỖI của trang". Ảnh ghép nói đúng, tôi lý luận sai và còn ghi cái sai đó vào công cụ để lần sau tin tiếp. CÁCH SỬA: bản vẽ là bản mô tả TỈ LỆ, không phải số pixel cố định. Nên mỗi cỡ chữ = (số đo bản vẽ ÷ 1089) × bề rộng màn hình, kẹp hai đầu: · sàn = giá trị đang chạy → màn nhỏ không đổi, các phép quét cũ còn giá trị · trần = giá trị ở 1440 → màn lớn hơn không phình thêm Đè ở đây, KHÔNG động tokens.css. ========================================================================= */ :root{ --fs-95: clamp(2.75rem, 8.742vw, 7.868rem); --fs-86: clamp(2.50rem, 7.879vw, 7.091rem); --fs-81: clamp(2.38rem, 7.438vw, 6.694rem); --fs-77: clamp(2.25rem, 7.089vw, 6.380rem); --fs-72: clamp(2.13rem, 6.648vw, 5.983rem); --fs-66: clamp(2.00rem, 6.042vw, 5.438rem); --fs-59: clamp(1.88rem, 5.418vw, 4.876rem); --fs-53: clamp(1.75rem, 4.848vw, 4.364rem); --fs-47: clamp(1.63rem, 4.316vw, 3.884rem); --fs-41: clamp(1.63rem, 3.792vw, 3.413rem); --fs-40: clamp(1.50rem, 3.747vw, 3.372rem); --fs-36: clamp(1.50rem, 3.297vw, 2.967rem); --fs-31: clamp(1.38rem, 2.865vw, 2.579rem); --fs-30: clamp(1.38rem, 2.819vw, 2.537rem); --fs-29: clamp(1.31rem, 2.645vw, 2.380rem); --fs-28: clamp(1.25rem, 2.571vw, 2.314rem); --fs-26: clamp(1.19rem, 2.360vw, 2.124rem); --fs-24: clamp(1.13rem, 2.213vw, 1.992rem); --fs-24b: clamp(1.48rem, 2.176vw, 1.959rem); --fs-21: clamp(1.31rem, 1.928vw, 1.736rem); --fs-19: clamp(1.21rem, 1.781vw, 1.603rem); --fs-17: clamp(1.08rem, 1.589vw, 1.430rem); --fs-16: clamp(1.00rem, 1.469vw, 1.322rem); --fs-15: clamp(0.95rem, 1.396vw, 1.256rem); --fs-14: clamp(0.87rem, 1.276vw, 1.149rem); --fs-13: clamp(0.83rem, 1.221vw, 1.099rem); --fs-12: clamp(0.80rem, 1.175vw, 1.058rem); --fs-9: clamp(0.59rem, 0.863vw, 0.777rem);} /* Dòng cách thân bài: bản vẽ đo được 19,3 ÷ 16 = 1,21. tokens.css để 1,30 để bù dấu tiếng Việt cao của Inter — nay đã dùng đúng font Oldschool Grotesk (dấu thấp) nên phần bù đó thừa, chữ bị thưa hơn thiết kế. */ :root{ --lh-body: 1.21 } /* Ô chờ logo khách — chưa có file thì hiện TÊN thương hiệu, bố cục đúng ngay */ .dt-logo__o--cho{display:inline-flex;flex-direction:column;align-items:center;gap:2px; padding:var(--sp-2) var(--sp-4);border:1px dashed var(--c-border);border-radius:var(--radius); color:color-mix(in srgb,var(--c-ink) 55%,transparent)} .dt-logo__ten{font-size:var(--fs-14);font-weight:var(--fw-semibold);white-space:nowrap} .dt-logo__nhac{font-size:var(--fs-9);color:var(--c-red)} /* --container đã chuyển vào tokens.css (19/08/2026) cùng số đo cột chữ. */ /* ========================================================================= THU KHOẢNG TRẮNG THỪA — đo bằng _tools/do-khoang-trang.py, không đoán ───────────────────────────────────────────────────────────────────────── Dò dải ngang "một màu" trên ảnh chụp thật ở khổ 1440. Bốn chỗ lớn nhất: 525px trong ảnh khối "Thiết kế logo" — ép 1:1 nên lộ nửa dưới toàn nền 354px giữa "Xin chào !" và logo — đệm section cộng lề trắng sẵn của ảnh 330px đáy ảnh 5 người — lề trắng nằm trong chính file ảnh 190px giữa khối cuối và footer ========================================================================= */ /* Ảnh khối dịch vụ: bản vẽ để 1:1, nhưng ảnh nguồn của ta có nhiều nền trống ở nửa dưới nên ô vuông lộ ra một mảng phẳng 525px. Cắt còn 3:2 và neo lên trên — sản phẩm vẫn trọn khung, phần nền thừa bị cắt. */ .dv__anh--full .dv__img{aspect-ratio:3/2;object-position:center 42%} /* Ảnh 5 người có sẵn 12% lề trắng ở đáy trong chính file. Cắt bớt bằng khung ngắn hơn + neo lên trên; phần trắng ở ĐỈNH giữ nguyên vì logo nằm đè lên đó (bản vẽ cũng vậy). */ .doi-ngu__anh{aspect-ratio:1325/1520;overflow:hidden} .doi-ngu__img{height:100%;object-fit:cover;object-position:center top} .doi-ngu{padding-block:var(--sp-5) var(--sp-6)} /* Footer: bản vẽ có nhịp 60–95px, footer đang để 140–190px giữa các cụm */ .site-footer__inner{gap:var(--sp-6)} /* Banner đầu trang khi CHƯA có ảnh: khối tối có logo, đúng tông bản vẽ. Thấp hơn tỉ lệ 2:1 của ảnh thật — một mảng phẳng cao 814px ngay màn hình đầu là quá nhiều, mà đây vốn chỉ là chỗ chờ. */ .hero-banner__cho{aspect-ratio:16/5;background:var(--c-ink);color:var(--c-white); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--sp-4);text-align:center;padding:var(--sp-6)} .hero-banner__cho .hero-banner__logo, .hero-banner__cho img{width:min(320px,32vw);height:auto} .hero-banner__cho .tre-logo-chu{font-size:min(3.4vw,44px);color:var(--c-white)} .hero-banner__nhac{font-size:var(--fs-12);color:#9A9A9A;max-width:60ch} .hero-banner__nhac code{color:var(--c-red)} /* Bản vẽ: "Xin chào !" cách banner ~40px, không phải 118px */ .hero{padding-block:var(--section-y)} /* Khung banner ép aspect-ratio 2:1 cho ẢNH THẬT. Khi đang là khối chờ 16:5 thì phần dư lộ ra thành một dải xám ngay dưới — bỏ ép, để khối chờ tự định cao. */ .hero-banner:has(.hero-banner__cho){aspect-ratio:auto;background:none} /* Bản vẽ: "Xin chào !" xong là tới ảnh ngay. Web đang để 312px đệm cộng dồn. */ .hero{padding-block:var(--section-y) var(--sp-4)} .doi-ngu{padding-block:var(--sp-3) var(--sp-6)} /* Khối chờ ảnh HERO ở các trang trong: cùng cách xử lý như banner trang chủ. Đo được: /du-an/ dành 1160px cho một mảng phẳng vì .hub-hero ép 4/3 — khoảng trắng toàn trang 39,8% trong khi bản vẽ T6 chỉ 21,4%. Chỗ chờ thì không nên chiếm chỗ như ảnh thật. */ .hub-hero:has(.tre-ph),.qt-hero:has(.tre-ph),.bg-hero:has(.tre-ph), .du-an__hero:has(.tre-ph){aspect-ratio:16/5} .hub-hero .tre-ph,.qt-hero .tre-ph,.bg-hero .tre-ph,.du-an__hero .tre-ph{ background:var(--c-ink);height:100%} .hub-hero .tre-ph--nhac,.qt-hero .tre-ph--nhac,.bg-hero .tre-ph--nhac, .du-an__hero .tre-ph--nhac{ background:repeating-linear-gradient(45deg,#1A1A1A,#1A1A1A 12px,#222 12px,#222 24px); border-color:#3A3A3A;color:#9A9A9A} .hub-hero .tre-ph--nhac .tre-ph__ten,.qt-hero .tre-ph--nhac .tre-ph__ten, .bg-hero .tre-ph--nhac .tre-ph__ten,.du-an__hero .tre-ph--nhac .tre-ph__ten{color:#DDD} /* Footer: gọn lại. Đo được ~700px khoảng trắng trên MỌI trang — 190 trước footer, 145 giữa "Lời đề nghị" và cột, 138 quanh dải social, 127 trước logo. Bản vẽ giữ nhịp 60–95px, đây gấp đôi. Sửa một chỗ, lợi cả 13 trang. */ .site-footer{padding-block:var(--section-y) var(--sp-6)} .site-footer__inner{gap:var(--sp-5)} .ft-de-nghi{padding-bottom:var(--sp-7)} .ft-cot{gap:var(--sp-8);padding-block:var(--sp-6)} .site-footer__social{padding-block:var(--sp-5)} .ft-lien-he{padding-top:var(--sp-6)} .ft-duoi{padding-block:var(--sp-6) var(--sp-4)} /* Khối liên hệ dùng chung ở cuối trang báo giá / quy trình / trang chủ */ .lh-khoi{background:var(--c-surface)} .lh-khoi .lh__title--lon{margin-bottom:var(--sp-6)} /* Biểu tượng mạng xã hội — bản vẽ T5 vẽ 4 icon, không phải chữ */ .mxh-icon{display:inline-grid;place-items:center;width:1.5em;height:1.5em} .mxh-icon svg{width:100%;height:100%;display:block} .studio__social{display:flex;gap:var(--sp-4);align-items:center;list-style:none!important;margin:0} .studio__social a,.studio__social-cho{display:inline-grid;place-items:center; color:var(--c-ink);transition:color var(--dur-muot) var(--ease-muot)} .studio__social a:hover{color:var(--c-red)} .studio__social-cho{opacity:.4;cursor:default} /* ========================================================================= FAQ — dựng lại theo ẢNH bản vẽ, không theo trí nhớ Cắt vùng FAQ của T2 ra xem: nền ĐEN · tiêu đề trắng 2 dòng bên trái · nút pill ĐỎ bên phải · mỗi câu là THẺ TRẮNG BO GÓC thụt vào từ ~32% bề rộng. Thẻ đóng có nút tròn ĐEN mũi tên ↗; thẻ mở nút tròn ĐỎ, mũi tên quay 180°. Bản trước dựng thành dòng kẻ ngang trên nền đen — khác hẳn thiết kế. ========================================================================= */ .dt-faq__dau{display:flex;align-items:flex-start;justify-content:space-between; gap:var(--sp-8);flex-wrap:wrap;margin-bottom:var(--sp-7)} .dt-faq__title{font-size:var(--fs-53);line-height:1.12;letter-spacing:-.02em;max-width:16ch} .dt-faq__nut{display:inline-flex;align-items:center;gap:var(--sp-2); background:var(--c-red);color:var(--c-white);border-radius:var(--radius-pill); padding:var(--sp-2) var(--sp-5);font-size:var(--fs-14);font-weight:var(--fw-semibold); white-space:nowrap;transition:background-color var(--dur-muot) var(--ease-muot)} .dt-faq__nut:hover{background:var(--c-ink)} .dt-faq__nut-mui svg{width:.9em;height:.9em;display:block} /* ⚠ KHỐI THẺ (nền trắng, bo góc, nút tròn) ĐÃ CÓ SẴN ở phần .dt-faq__ phía trên file. Tôi suýt viết lại lần hai vì đọc ảnh so cả trang ở cỡ thu nhỏ và tưởng web đang là dòng kẻ ngang. Chụp riêng khối FAQ ở cỡ thật mới thấy nó vốn đã đúng. Chỉ giữ lại phần THẬT SỰ thiếu: nút pill đỏ và cỡ tiêu đề. Bài học: soi khối nào thì chụp riêng khối đó, đừng phán từ ảnh toàn trang. */ .dt-faq__o[open] .dt-faq__dau-cham{background:var(--c-red);rotate:180deg} .dt-faq__dau-cham{width:26px;height:26px;border-radius:50%;background:var(--c-ink); color:var(--c-white);flex-shrink:0;display:grid;place-items:center; transition:background-color var(--dur-muot) var(--ease-muot), rotate var(--dur-muot) var(--ease-muot)} .dt-faq__dau-cham svg{width:12px;height:12px;display:block} /* ========================================================================= HEADER DÍNH ĐÈ LÊN NỘI DUNG khi cuộn tới một mốc Chụp khối FAQ thì thấy header che mất dòng tiêu đề và nút đỏ. Mọi liên kết neo trong trang, mọi lần trình duyệt khôi phục vị trí cuộn đều dính. Chừa sẵn khoảng bằng chiều cao header cho mọi mốc có thể nhảy tới. ========================================================================= */ :target,section[id],section,.section,h1,h2,h3{scroll-margin-top:calc(var(--header-h,88px) + 16px)} /* ========================================================================= HAI BẢNG TRANG QUY TRÌNH (bản vẽ T9 · T14 · T17) Đo từ ảnh cắt: đầu cột nền xám nhạt, kẻ ngăn dọc mảnh giữa các cột, thân bài nhiều đoạn, dòng kết in đậm có kẻ ngăn TRÊN. Bảng loại bao bì: biểu tượng nét ĐỎ, "Đặc tính" chấm tròn nhỏ, "Phù hợp" dấu tích đỏ. ========================================================================= */ .qt-tc,.qt-bb{margin-top:var(--section-y)} .qt-tc__title{font-size:var(--fs-26);font-weight:var(--fw-bold);letter-spacing:-.01em} .qt-tc__dan{font-size:var(--fs-13);line-height:var(--lh-body);max-width:92ch; margin-top:var(--sp-3);color:color-mix(in srgb,var(--c-ink) 82%,transparent)} /* Cuộn ngang TRONG bảng, không để bảng đẩy cả trang tràn ngang */ .qt-tc__bang,.qt-bb__bang{display:grid;overflow-x:auto;margin-top:var(--sp-6); border:1px solid var(--c-border)} .qt-tc__bang{grid-template-columns:repeat(3,minmax(220px,1fr))} .qt-bb__bang{grid-template-columns:repeat(5,minmax(180px,1fr))} .qt-tc__cot,.qt-bb__cot{display:flex;flex-direction:column;min-width:0; border-right:1px solid var(--c-border)} .qt-tc__cot:last-child,.qt-bb__cot:last-child{border-right:0} .qt-tc__dau,.qt-bb__dau{background:var(--c-surface);font-weight:var(--fw-bold); font-size:var(--fs-14);padding:var(--sp-4) var(--sp-4);margin:0} .qt-tc__than{font-size:var(--fs-13);line-height:var(--lh-body);padding:var(--sp-5) var(--sp-4); flex:1;color:color-mix(in srgb,var(--c-ink) 82%,transparent)} .qt-tc__ket{font-size:var(--fs-13);font-weight:var(--fw-bold);padding:var(--sp-4); border-top:1px solid var(--c-border);margin:0} .qt-bb__icon{display:grid;place-items:center;padding:var(--sp-5) 0 var(--sp-3);color:var(--c-red)} .qt-bb__icon .bb-icon{display:block;width:72px;height:60px} .qt-bb__icon svg{width:100%;height:100%;display:block;stroke-width:1.4} .qt-bb__nhan{font-size:var(--fs-13);font-weight:var(--fw-bold);padding:0 var(--sp-4) var(--sp-2);margin:0} .qt-bb__nhan--2{border-top:1px solid var(--c-border);padding-top:var(--sp-4);margin-top:auto} .qt-bb__ds{list-style:none!important;margin:0;padding:0 var(--sp-4) var(--sp-5); display:grid;gap:var(--sp-3);font-size:var(--fs-12);line-height:1.3} .qt-bb__ds li{display:flex;gap:var(--sp-2);align-items:flex-start} .qt-bb__ds:not(.qt-bb__ds--tick) li::before{content:"";width:5px;height:5px;border-radius:50%; background:color-mix(in srgb,var(--c-ink) 45%,transparent);flex-shrink:0;margin-top:.5em} .qt-bb__tick{color:var(--c-red);flex-shrink:0} .qt-bb__tick svg{width:12px;height:12px;display:block;margin-top:.15em} /* Khoảng trắng dưới "Xin chào !" — khách báo quá lớn. Đo ra thì phần trống KHÔNG phải do CSS: gap chữ→logo là 229px, bản vẽ 251px, web đã hẹp hơn. Trống nằm TRONG FILE ẢNH — 24% chiều cao đỉnh ảnh là nền trắng trơn, và object-position:top phơi ra trọn vẹn phần đó. Cắt bớt đỉnh ảnh và kéo logo lên tương ứng. Logo vẫn phải chồng lên đầu nhóm người như bản vẽ, nên hai số này đi cùng nhau. */ /* ⚠ CÁCH CẮT: object-fit:cover + object-position cắt CẢ HAI ĐẦU. Lần đầu tôi dùng cách đó, đo lại thì nội dung chạm đáy khung — CẮT MẤT CHÂN nhóm người, trong khi bản vẽ hiện đủ cả giày. Đổi sang kéo ảnh lên bằng margin âm: chỉ đỉnh bị cắt, đáy nguyên vẹn. Số đo file ảnh: nội dung nằm ở 24%–88% chiều cao, tức 24% đỉnh là nền trắng. Kéo lên 144px (≈10,9% bề rộng khung) chừa lại ~260px trắng vừa đủ cho logo. */ .doi-ngu__anh{aspect-ratio:1325/1366;overflow:hidden} .doi-ngu__img{width:100%;height:auto;object-fit:fill;margin-top:-10.87%} .dn-logo{top:1.2%} .doi-ngu{padding-block:0 var(--sp-6)} .hero{padding-block:var(--section-y) var(--sp-2)} /* ========================================================================= HIỆU ỨNG RÊ CHUỘT CHO NÚT CÓ MŨI TÊN ───────────────────────────────────────────────────────────────────────── Mũi tên chéo ↗ vẽ theo hướng (1,-1), tức −45° so với trục ngang. Quay +45° (chiều kim đồng hồ) là đúng về 0° — thành mũi tên ngang →. Dùng thuộc tính `rotate`/`scale` RIÊNG chứ không gộp vào transform: nhiều ô ở đây đang dùng transform để CĂN VỊ TRÍ (translateX(-50%)), gộp vào là đè mất phép căn. Đúng cái bẫy đã làm trang chủ tràn ngang 380px hôm qua. Thời lượng riêng .42s: đường cong giữ nguyên cho đồng bộ, nhưng 0,9s của hiệu ứng cuộn đặt lên một cái nút bấm thì rê chuột xong vẫn thấy nó đang bò — cảm giác trang nặng chứ không phải mượt. ========================================================================= */ :root{ --dur-nhanh:.42s } .mui-cheo,.mui-cheo svg{ transition:rotate var(--dur-nhanh) var(--ease-muot), scale var(--dur-nhanh) var(--ease-muot), translate var(--dur-nhanh) var(--ease-muot), background-color var(--dur-nhanh) var(--ease-muot), color var(--dur-nhanh) var(--ease-muot), border-color var(--dur-nhanh) var(--ease-muot)} /* 1. Mũi tên CHÉO quay về ngang. :not(.mui-ngang) để không đụng mũi tên vốn ngang */ a:hover .mui-cheo:not(.mui-ngang) svg, a:focus-visible .mui-cheo:not(.mui-ngang) svg, button:hover .mui-cheo:not(.mui-ngang) svg, .gia-card__nut:hover .mui-cheo svg{rotate:45deg} /* 2. Huy hiệu tròn to lên một chút — "to hơn" nhưng không xô đẩy chữ bên cạnh, vì scale không chiếm thêm chỗ trong luồng bố cục */ a:hover .mui-cheo:not(.mui-ngang),a:focus-visible .mui-cheo:not(.mui-ngang), button:hover .mui-cheo:not(.mui-ngang){scale:1.14} /* 3. Mũi tên NGANG thì đẩy nhẹ sang phải thay vì quay */ a:hover .mui-ngang,a:focus-visible .mui-ngang{translate:5px 0} /* 4. Đảo màu huy hiệu: nền đen → đỏ, nền đỏ → đen. Chỉ những ô THẬT SỰ có nền */ a:hover .site-header__cta-mui, a:hover .gia-card__mui, a:hover .dt-cta__mui, a:hover .gt-vh__mui, a:hover .studio__mui, a:hover .bg-title__mui{background:var(--c-red);color:var(--c-white)} .dt-faq__nut:hover .dt-faq__nut-mui{color:var(--c-white)} /* ô viền (không nền) thì đổi màu viền */ a:hover .dv__mui,a:hover .card__mui{border-color:var(--c-red);color:var(--c-red)} @media (prefers-reduced-motion: reduce){ /* Phải khớp ĐÚNG độ đặc hiệu của quy tắc bật hiệu ứng, nếu không phần tắt thua. Đo lần đầu: quay đã tắt nhưng scale vẫn 1.14 vì quy tắc bật dùng :not(.mui-ngang) (0,3,1) còn quy tắc tắt chỉ (0,2,1). */ .mui-cheo,.mui-cheo svg{transition:none} a:hover .mui-cheo:not(.mui-ngang),a:focus-visible .mui-cheo:not(.mui-ngang), button:hover .mui-cheo:not(.mui-ngang), a:hover .mui-cheo:not(.mui-ngang) svg,a:focus-visible .mui-cheo:not(.mui-ngang) svg, button:hover .mui-cheo:not(.mui-ngang) svg, .gia-card__nut:hover .mui-cheo svg, a:hover .mui-ngang,a:focus-visible .mui-ngang{rotate:none!important;scale:1!important;translate:none!important} } /* ========================================================================= NÚT CÓ MŨI TÊN — HIỆU ỨNG RÊ CHUỘT ĐẦY ĐỦ ───────────────────────────────────────────────────────────────────────── Bốn lớp chuyển động cùng một nhịp, tất cả trên cùng đường cong cubic-bezier(.135,.9,.15,1): 1. cả nút nở 1.05 — "to hơn" như yêu cầu 2. mũi tên chéo quay về ngang 3. huy hiệu tròn nở 1.18 và trượt 3px sang phải → cảm giác lao đi 4. đảo màu + đổ bóng nhẹ → nút nhấc lên khỏi mặt trang Vì sao nở bằng `scale` chứ không tăng padding: tăng padding làm nút RỘNG THẬT, xô đẩy mọi thứ cạnh nó và bắt trình duyệt tính lại bố cục mỗi khung hình. scale chỉ vẽ lại, không đụng luồng bố cục. Vì sao liệt kê từng class thay vì a:has(.mui-cheo): mũi tên còn nằm trong dòng "01 DỰ ÁN TIÊU BIỂU" rộng hết cột và trong thẻ dự án — nở 1.05 một dòng ngang hết cột thì trông như trang bị rung, không phải nút bấm. ========================================================================= */ .btn,.site-header__cta,.gia-card__nut,.dt-cta__nut,.dt-faq__nut, .studio__chi-dan,.gt-vh__nut,.ft-de-nghi__nut,.kham-pha__the{ transition:scale var(--dur-nhanh) var(--ease-muot), background-color var(--dur-nhanh) var(--ease-muot), color var(--dur-nhanh) var(--ease-muot), border-color var(--dur-nhanh) var(--ease-muot), box-shadow var(--dur-nhanh) var(--ease-muot)} /* NỞ: áp cho MỌI nút — scale không cần nền, không đụng luồng bố cục */ .btn:hover,.btn:focus-visible, .site-header__cta:hover,.site-header__cta:focus-visible, .gia-card__nut:hover,.gia-card__nut:focus-visible, .dt-cta__nut:hover,.dt-cta__nut:focus-visible, .dt-faq__nut:hover,.dt-faq__nut:focus-visible, .studio__chi-dan:hover,.studio__chi-dan:focus-visible, .gt-vh__nut:hover,.gt-vh__nut:focus-visible, .ft-de-nghi__nut:hover,.ft-de-nghi__nut:focus-visible{scale:1.05} /* BÓNG: CHỈ nơi có nền thật. ⚠ Đo từng nút mới thấy: 5/9 nút là THẺ BỌC TRONG SUỐT chứa một viên pill và một huy hiệu rời (gia-card · dt-cta · studio__chi-dan · gt-vh · ft-de-nghi). Đổ bóng lên thẻ bọc thì bóng vẽ quanh cái KHUNG RỖNG — kể cả phần padding-top 32px — thành một mảng chữ nhật sáng nổi lên sau nút, sắc cạnh, chẳng dính gì tới viên pill bo tròn. Ảnh chụp bắt ngay được. Với những nút đó, đổ bóng lên chính viên pill và huy hiệu. */ .btn:hover,.btn:focus-visible, .site-header__cta:hover,.site-header__cta:focus-visible, .dt-faq__nut:hover,.dt-faq__nut:focus-visible, .gia-card__nut:hover>span:first-child,.gia-card__nut:hover .gia-card__mui, .dt-cta__nut:hover>span:first-child,.dt-cta__nut:hover .dt-cta__mui, .studio__chi-dan:hover>span:first-child,.studio__chi-dan:hover .studio__mui, .gt-vh__nut:hover>span:first-child,.gt-vh__nut:hover .gt-vh__mui, .ft-de-nghi__nut:hover{ box-shadow:0 8px 22px color-mix(in srgb,var(--c-ink) 22%,transparent)} /* Thẻ "2+" của khối Khám phá là một ô lớn — nở ít hơn cho khỏi thô */ .kham-pha__the:hover,.kham-pha__the:focus-visible{scale:1.025} /* Huy hiệu tròn: nở mạnh hơn thân nút và trượt sang phải, để mũi tên trông như đang chạy ra khỏi nút chứ không phải phóng to cả cụm một cách máy móc */ a:hover .mui-cheo:not(.mui-ngang),a:focus-visible .mui-cheo:not(.mui-ngang), button:hover .mui-cheo:not(.mui-ngang){scale:1.18;translate:3px 0} @media (prefers-reduced-motion: reduce){ .btn,.site-header__cta,.gia-card__nut,.dt-cta__nut,.dt-faq__nut, .studio__chi-dan,.gt-vh__nut,.ft-de-nghi__nut,.kham-pha__the{transition:none} .btn:hover,.site-header__cta:hover,.gia-card__nut:hover,.dt-cta__nut:hover, .dt-faq__nut:hover,.studio__chi-dan:hover,.gt-vh__nut:hover, .ft-de-nghi__nut:hover,.kham-pha__the:hover, .gia-card__nut:hover>span:first-child,.gia-card__nut:hover .gia-card__mui, .dt-cta__nut:hover>span:first-child,.studio__chi-dan:hover>span:first-child, .gt-vh__nut:hover>span:first-child{scale:1!important;box-shadow:none!important} } /* ========================================================================== BÀI VIẾT ĐƠN (single.php) — bản vẽ KHÔNG vẽ trang này. Mọi giá trị dưới đây lấy từ token đã có, không chế thêm cỡ chữ mới. ========================================================================== */ /* Hero 16:9 — cùng khuôn .qt-hero của trang quy trình, khác tên để đổi riêng được về sau mà không đụng trang kia. */ .bai-hero{width:100%;aspect-ratio:var(--ar-blog);overflow:hidden;background:var(--c-surface)} .bai-hero__img{width:100%;height:100%;object-fit:cover} .bai{padding-block:var(--section-y-lon)} .bai__dau{margin-bottom:var(--sp-8)} .bai__nhan{font-size:var(--fs-19);color:var(--c-red);font-weight:var(--fw-semibold); margin-bottom:var(--sp-3)} /* ⚠ --fs-36 CÒN TẠM: case study dùng --fs-26 nhưng nằm trong bố cục 2 cột. Phải render hai bên cạnh nhau rồi mới chốt. */ .bai__title{font-size:var(--fs-36);line-height:var(--lh-heading);letter-spacing:-.02em} .bai__meta{font-size:var(--fs-13);color:#6b6b6d;margin-top:var(--sp-4)} /* Thân bài: .entry-content TRƯỚC ĐÂY KHÔNG CÓ STYLE NÀO — nội dung do trình soạn thảo sinh ra rơi về mặc định trình duyệt. Đây là phần việc thật của single.php, không phải cái khung. */ .bai__than{font-size:var(--fs-16);line-height:var(--lh-body)} .bai__than>*+*{margin-top:var(--sp-5)} .bai__than h2{font-size:var(--fs-28);line-height:var(--lh-heading);margin-top:var(--sp-9)} .bai__than h3{font-size:var(--fs-24);line-height:var(--lh-heading);margin-top:var(--sp-8)} .bai__than h4{font-size:var(--fs-19);line-height:var(--lh-heading);margin-top:var(--sp-7)} .bai__than a{text-decoration:underline;text-underline-offset:.18em} .bai__than a:hover{color:var(--c-red)} .bai__than ul,.bai__than ol{padding-left:1.35em} .bai__than li+li{margin-top:var(--sp-2)} .bai__than blockquote{border-left:3px solid var(--c-red);padding-left:var(--sp-5); font-size:var(--fs-19);line-height:var(--lh-heading)} .bai__than code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em; background:var(--c-surface);padding:.1em .35em;border-radius:3px} .bai__than pre{background:var(--c-surface);padding:var(--sp-5);overflow:auto} .bai__than pre code{background:none;padding:0} .bai__than hr{border:0;border-top:1px solid var(--c-border);margin-block:var(--sp-8)} .bai__than table{width:100%;border-collapse:collapse;font-size:var(--fs-13)} .bai__than th,.bai__than td{border:1px solid var(--c-border);padding:var(--sp-3);text-align:left} /* Ảnh trong bài phá lề ra bề rộng container chính — dãy ảnh case study rộng 93% khổ giấy, cùng nhịp đó. Chỉ phá khi còn chỗ; màn hẹp thì thôi. */ .bai__than :is(figure,.wp-block-image){margin-inline:auto} .bai__than :is(figure,.wp-block-image) img{width:100%;height:auto;display:block} .bai__than figcaption,.bai__than .wp-element-caption{font-size:var(--fs-12); color:#6b6b6d;margin-top:var(--sp-3);text-align:center} @media (min-width:1100px){ .bai__than :is(figure,.wp-block-image.alignwide,.wp-block-image.alignfull){ width:min(var(--container),92vw); margin-left:calc(50% - min(var(--container),92vw)/2); margin-right:calc(50% - min(var(--container),92vw)/2)} } .bai__trang{margin-top:var(--sp-7);font-size:var(--fs-13)} .bai__cuoi{margin-top:var(--sp-9);padding-top:var(--sp-6); border-top:1px solid var(--c-border)} /* ---- Kết quả tìm kiếm (search.php) — bản vẽ không vẽ ---- */ .tim-kiem__dau{margin-bottom:var(--sp-8)} .tim-kiem__nhan{font-size:var(--fs-19);color:var(--c-red);font-weight:var(--fw-semibold); margin-bottom:var(--sp-3)} .tim-kiem__title{font-size:var(--fs-36);line-height:var(--lh-heading);letter-spacing:-.02em} .tim-kiem__dem{font-size:var(--fs-13);color:#6b6b6d;margin-top:var(--sp-4)} .tim-kiem__rong{max-width:52ch} .tim-kiem__rong form{margin-top:var(--sp-5)} .tim-kiem__loi-ra{margin-top:var(--sp-6)}