/* =========================================================================
   trebra.vn — page.css
   CSS cho trang Giới thiệu, Liên hệ + bổ sung trang chủ.
   Nạp SAU components.css (priority 30).
   ⚠ Không lặp quy tắc global đã có trong components.css (đã dedupe).
   ========================================================================= */

/* =========================================================================
   TRANG CHỦ — sửa sau khi CHỤP MÀN HÌNH đối chiếu bản vẽ
   ========================================================================= */

/* Logo Tre trên ảnh đội ngũ giờ dựng bằng tre_logo() và định vị CHỒNG LÊN ảnh
   — xem .dn-logo trong components.css. Hai class .dn-logo__tre / .dn-logo__phu
   đã bỏ cùng đoạn markup gõ tay cũ. */
.doi-ngu{padding-block:var(--sp-7) var(--sp-8)}

/* Lưới 2×2 — bản vẽ ảnh gần sát nhau */
.dv__anh{gap:4px}

/* Ảnh full giữ tỉ lệ gốc, KHÔNG ép aspect-ratio.
   Giới hạn chiều cao: ảnh dọc 0.86 kéo dài cả màn hình trông rời rạc. */
.dv__anh--ar-goc .dv__img{aspect-ratio:auto;height:auto;max-height:78vh;object-fit:contain;
  background:var(--c-surface)}

/* Nút play đỏ giữa ảnh */
.dv__play-wrap{position:relative;display:block}
.dv__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;background:var(--c-red);color:var(--c-white);
  display:grid;place-items:center;font-size:20px;padding-left:4px;
  box-shadow:0 4px 20px rgb(0 0 0/25%);transition:transform var(--dur) var(--ease)}
.dv__play-wrap:hover .dv__play{transform:translate(-50%,-50%) scale(1.08)}

/* Ảnh chụp cho thấy dòng dẫn xuống 5 dòng thay vì 3 → nới max-width.
   Bản vẽ: "Chúng tôi là một công ty / thiết kế đồ họa / với chuyên môn về" */
.dv__dan{max-width:24ch}
/* Cột mô tả bị bó quá hẹp trong grid 1fr 1fr → cho rộng hơn */
.dv__body{grid-template-columns:1.1fr 1fr}
.dv__mo-ta{max-width:52ch}

/* Đánh giá sao trong thẻ testimonial */
.kh__sao{font-size:var(--fs-13);font-weight:var(--fw-bold);
  display:flex;align-items:center;gap:var(--sp-2)}
.kh__sao span{color:#F5A623;letter-spacing:.06em}

/* =========================================================================
   GIỚI THIỆU (T4)
   ========================================================================= */
/* đo bản vẽ T4: 16,0px, đang để 19,4 */
.gt__nhan{font-size:var(--fs-16);font-weight:var(--fw-medium);
  color:color-mix(in srgb,var(--c-ink) 60%,transparent);margin-bottom:var(--sp-3)}
.gt__nhan::before{content:"● ";color:var(--c-red);font-size:.7em;vertical-align:middle}

.gt-mo-dau{padding-block:var(--sp-10) var(--sp-8)}
.gt__title{font-size:var(--fs-30);line-height:1.22;letter-spacing:-.015em;max-width:30ch}
.gt__van{margin-top:var(--sp-6);display:grid;gap:var(--sp-4);max-width:78ch;
  font-size:var(--fs-16);line-height:var(--lh-body)}
.gt__van p{color:color-mix(in srgb,var(--c-ink) 75%,transparent)}

/* Bản vẽ T4: cột trái là TẤM NỀN ĐEN có logo Tre trắng đặt giữa, không phải
   ảnh chụp. Ô ảnh cũ chưa ai nhập nên cột trái đang trống hẳn. */
.gt-vh__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--sp-9);align-items:stretch}
.gt-vh__logo{background:var(--c-ink);display:grid;place-items:center;
  padding:var(--sp-9) var(--sp-7);min-height:280px}
.gt-vh__logo img{width:100%;max-width:250px;height:auto;display:block}
.gt-vh__text{display:grid;gap:var(--sp-4);font-size:var(--fs-16);line-height:var(--lh-body);
  align-content:start}
.gt-vh__title{font-size:var(--fs-24)}
.gt-vh__text>p{color:color-mix(in srgb,var(--c-ink) 75%,transparent)}
/* Hộp đỏ: bản vẽ đặt nút CTA ở GÓC DƯỚI PHẢI, đè lên mép hộp */
.gt-vh__hop{background:var(--c-red);color:var(--c-white);padding:var(--sp-6);
  margin-top:var(--sp-3);position:relative;display:grid;gap:var(--sp-3);
  font-size:var(--fs-13);line-height:var(--lh-body);padding-bottom:var(--sp-10)}
.gt-vh__hop p{color:inherit}
.gt-vh__nut{position:absolute;right:var(--sp-5);bottom:calc(-1 * var(--sp-4));
  display:inline-flex;align-items:center;gap:var(--sp-2)}
.gt-vh__nut-chu{background:var(--c-ink);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);
  white-space:nowrap}
.gt-vh__mui{width:34px;height:34px;border-radius:50%;background:var(--c-ink);
  color:var(--c-white);flex-shrink:0}
.gt-vh__mui svg{width:15px;height:15px}
.gt-vh__nut:hover .gt-vh__nut-chu,.gt-vh__nut:hover .gt-vh__mui{background:var(--c-white);color:var(--c-ink)}

.gt-sl__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-6);border-block:1px solid var(--c-border);padding-block:var(--sp-7)}
.gt-sl__nhan{font-size:var(--fs-12);color:color-mix(in srgb,var(--c-ink) 55%,transparent)}
.gt-sl__so{font-size:var(--fs-36);font-weight:var(--fw-bold);letter-spacing:-.02em;
  line-height:1;margin-top:var(--sp-2)}

/* đo bản vẽ T4 "Đa nhân cách / Không có cái tôi": 44,9px, đang để 27,7 */
.gt__sub{font-size:var(--fs-47);line-height:1.15;letter-spacing:-.01em;max-width:26ch}
.gt-tin__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--sp-9);
  margin-top:var(--sp-6);font-size:var(--fs-16);line-height:var(--lh-body)}
.gt-tin__grid p{color:color-mix(in srgb,var(--c-ink) 75%,transparent)}
.gt-tin__ds{display:grid;gap:var(--sp-3);list-style:none!important;margin:0}
.gt-tin__ds li{padding-left:var(--sp-5);position:relative;font-weight:var(--fw-medium)}
.gt-tin__ds li::before{content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--c-red)}

.gt-team__head{display:grid;grid-template-columns:1fr auto;gap:var(--sp-6);
  align-items:end;margin-bottom:var(--sp-8)}
.gt-team__head .gt__sub{text-align:right}
.gt-team__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--sp-5)}
.ns__media{aspect-ratio:var(--ar-nhan-su);overflow:hidden;border-radius:var(--radius);
  background:var(--c-surface)}
.ns__img{width:100%;height:100%;object-fit:cover}
.ns__head{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--sp-3);margin-top:var(--sp-4);padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--c-red)}
.ns__ten{font-size:var(--fs-13);font-weight:var(--fw-bold)}
.ns__chuc{font-size:var(--fs-12);color:color-mix(in srgb,var(--c-ink) 55%,transparent)}
.ns__nam{text-align:right;line-height:1.15}
.ns__nam strong{display:block;font-size:var(--fs-13)}
.ns__nam span{font-size:var(--fs-12);color:color-mix(in srgb,var(--c-ink) 55%,transparent)}
.ns__bio{font-size:var(--fs-12);line-height:var(--lh-body);margin-top:var(--sp-3);
  color:color-mix(in srgb,var(--c-ink) 65%,transparent)}

/* =========================================================================
   LIÊN HỆ (T5)
   ========================================================================= */
/* Trang Liên hệ được nạp qua page-{slug}.php chứ KHÔNG qua Template Name
   (ô Template của trang để trống), nên body không hề có class
   .page-template-page-lien-he — hai dòng cũ chưa bao giờ áp được, tiêu đề
   vẫn nằm ở cỡ trang chủ 52,8/72,5 thay vì 59,0/81,0 như bản vẽ T5.
   Gắn class thẳng vào thẻ, không phụ thuộc body class nữa. */
.lh__title--lon{font-size:var(--fs-59)}
.lh__title--lon strong{font-size:var(--fs-81)}

.studio{padding-block:var(--sp-10)}
.studio__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--sp-9);
  align-items:center;background:var(--c-surface);border-radius:var(--radius-lg);
  padding:var(--sp-8)}
.studio__title{font-size:var(--fs-31);line-height:1.15;letter-spacing:-.02em}
.studio__mo-ta{font-size:var(--fs-13);line-height:var(--lh-body);margin-top:var(--sp-4);
  color:color-mix(in srgb,var(--c-ink) 72%,transparent);max-width:40ch}
.studio__nhan{font-size:var(--fs-13);font-weight:var(--fw-bold);margin-top:var(--sp-6)}
.studio__nhan::before{content:"● ";color:var(--c-red);font-size:.7em;vertical-align:middle}
.studio__dc{font-style:normal;font-size:var(--fs-13);line-height:var(--lh-body);
  margin-top:var(--sp-2)}
.studio__social{display:flex;gap:var(--sp-4);margin-top:var(--sp-3);
  list-style:none!important;padding:0}
.studio__social a{font-size:var(--fs-13);text-decoration:underline}
.studio__anh img{width:100%;height:auto;aspect-ratio:var(--ar-studio);
  object-fit:cover;border-radius:var(--radius)}
/* Bản vẽ: pill đen + huy hiệu mũi tên tròn, dưới hàng social */
.studio__chi-dan{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-6)}
.studio__chi-dan-chu{background:var(--c-ink);color:var(--c-white);border-radius:var(--radius-pill);
  padding:var(--sp-3) var(--sp-6);font-size:var(--fs-13);font-weight:var(--fw-semibold);
  white-space:nowrap}
.studio__mui{width:34px;height:34px;border-radius:50%;background:var(--c-ink);
  color:var(--c-white);flex-shrink:0}
.studio__mui svg{width:15px;height:15px}
.studio__chi-dan:hover .studio__chi-dan-chu,.studio__chi-dan:hover .studio__mui{background:var(--c-red)}

/* =========================================================================
   FORM LIÊN HỆ (Fluent Forms) — bản vẽ T5
     5 ô tiếng Việt, KHÔNG nhãn nổi, xếp 2×2 rồi một ô lớn.
     Nút "Gửi" pill đỏ căn TRÁI.

   ⚠ Cấu trúc ô nằm trong DB plugin (wp_fluentform_forms.form_fields), không
     phải trong repo — xem _tools/seed-form-lien-he.php. CSS dưới đây bám vào
     class 'tre-nua' / 'tre-gui' / 'tre-dieu-khoan' do script đó đặt.
   ========================================================================= */
.frm-fluent-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4) var(--sp-4)}
.frm-fluent-form fieldset{display:contents}
/* <legend> của Fluent Forms có style nội tuyến display:block nên nó vẫn là MỘT
   ô của lưới và đẩy toàn bộ ô nhập lệch đi một chỗ: "Tên" đứng một mình cột
   phải, "Mail" và "Điện thoại" dồn thành một hàng. Cho nó chiếm trọn một hàng
   (cao 0) thay vì display:none — vẫn giữ tên biểu mẫu cho trình đọc màn hình. */
.frm-fluent-form legend{grid-column:1/-1}
.frm-fluent-form .ff-el-group{grid-column:1/-1;margin:0}
.frm-fluent-form .ff-el-group.tre-nua{grid-column:auto}
.frm-fluent-form .ff-el-form-hide_label .ff-el-input--label{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.frm-fluent-form .ff-el-form-control{width:100%;font:inherit;font-size:var(--fs-12);
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--c-border);border-radius:var(--radius-sm);
  background:var(--c-white);color:var(--c-ink)}
.frm-fluent-form textarea.ff-el-form-control{min-height:150px;resize:vertical}
.frm-fluent-form .ff-el-form-control:focus-visible{outline:2px solid var(--c-ink);outline-offset:1px}
.tre-dieu-khoan{font-size:var(--fs-9);line-height:1.5;
  color:color-mix(in srgb,var(--c-ink) 58%,transparent)}
.tre-dieu-khoan a{text-decoration:underline}
/* Bản vẽ: pill đỏ "Gửi" + huy hiệu mũi tên tròn đỏ bên cạnh, căn TRÁI.
   Fluent Forms không cho chèn thẻ vào cạnh nút, nên huy hiệu là ::after mang
   SVG dạng data-URI — không gọi file ngoài, không cần JS. */
.tre-gui{text-align:left;display:flex;align-items:center;gap:var(--sp-2)}
.frm-fluent-form .ff-btn-submit{border:0;cursor:pointer;font:inherit;
  border-radius:var(--radius-pill);padding:var(--sp-3) var(--sp-8);
  font-size:var(--fs-13);font-weight:var(--fw-semibold)}
.frm-fluent-form .ff-btn-submit:hover{filter:brightness(.9)}
.tre-gui::after{content:"";width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--c-red) center/15px 15px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E")}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:900px){
  .gt-vh__grid,.gt-tin__grid,.studio__grid,
  .gt-team__head{grid-template-columns:1fr;gap:var(--sp-6)}
  .gt-team__head .gt__sub{text-align:left}
  .gt-team__grid{grid-template-columns:1fr 1fr}
  .studio__grid{padding:var(--sp-6)}
  .dv__play{width:48px;height:48px;font-size:16px}
  .dv__body{grid-template-columns:1fr}
}
@media (max-width:520px){
  .gt-team__grid{grid-template-columns:1fr}
}