/* Torilab — Trang Technology (page-technology.php). Dùng chung home.css; file này chỉ thêm phần riêng của trang. */

/* 1 · Hero */
.th-stmt{margin-top:22px;display:inline-flex;align-items:center;gap:12px;color:#fff;font-size:13px;letter-spacing:.12em}
.th-stmt::before{content:"";width:28px;height:1px;background:var(--lime)}
.th-hero .ctas{margin-top:32px}
.th-hero .hero-meta{display:none}
@media (min-width:721px){.th-hero .lead{max-width:min(54ch,calc(100% - 340px))}}
.th-cap{position:absolute;z-index:2;right:var(--pad);top:var(--cap-y,70%);width:280px;text-align:right}
.th-cap .mono{color:rgba(255,255,255,.5);font-size:12px;letter-spacing:.08em}
.th-cap p{margin-top:8px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.55)}
@media (max-width:720px){.th-cap{left:var(--pad);right:var(--pad);width:auto;text-align:left}.th-cap p{font-size:12.5px;max-width:42ch}}
.th-hero #tfield,.th-hero #tplane{position:absolute;inset:0;width:100%;height:100%;display:block}

/* 2 · Scientific Validation — 3 ô thông tin bài báo */
.th-paper{grid-template-columns:2.2fr 1.7fr 1fr}
.th-paper div{padding:20px 22px}
.th-paper b{font-size:18px;line-height:1.35;letter-spacing:-.015em}

/* 3 · Core — link trong thẻ lime */
.th-more{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-weight:500;color:var(--ink);border-bottom:1px solid rgba(13,20,14,.35);padding-bottom:2px}
.th-more i{font-style:normal;transition:transform .3s}
.th-more:hover{border-color:var(--ink)}
.th-more:hover i{transform:translateX(4px)}
/* Card 02 nền tối: link phải sáng (trước đây chữ tối trên nền tối 1.08:1) */
.bc.bc2 .th-more{color:var(--lime);border-bottom-color:rgba(204,255,102,.45)}
.bc.bc2 .th-more:hover{color:#fff;border-bottom-color:#fff}

/* 4 · Engineering — menu dính bên trái (3 nhóm) + nội dung dạng danh sách biên tập bên phải */
.eg{display:grid;grid-template-columns:minmax(260px,.8fr) 2fr;gap:clamp(24px,4vw,72px);align-items:start}
.eg-nav{position:sticky;top:120px;display:flex;flex-direction:column;gap:10px}
.eg-n{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;border-radius:22px;background:var(--card);border:1px solid transparent;transition:background .35s,border-color .35s}
.eg-n .mono{color:var(--ink-3)}
.eg-n b{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.eg-ico{width:56px;height:42px;opacity:.45;transition:opacity .35s}
.eg-ico svg{width:100%;height:100%;display:block}
.eg-n:hover{border-color:rgba(255,255,255,.14)}
.eg-n.on{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.eg-n.on .mono{color:rgba(13,20,14,.6)}
.eg-n.on b{color:var(--ink)}
.eg-n.on .eg-ico{opacity:1;filter:brightness(0) contrast(3)}
.eg-body{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.eg-p{background:#1B1B1A;border-radius:var(--r);padding:clamp(24px,3.2vw,52px);scroll-margin-top:110px}
.eg-ph{display:flex;align-items:baseline;gap:18px;padding-bottom:clamp(20px,2.4vw,32px);border-bottom:1px solid rgba(255,255,255,.12)}
.eg-ph .mono{color:var(--lime)}
.eg-ph h3{font-size:clamp(28px,2.6vw,42px);letter-spacing:-.035em;line-height:1.05}
.eg-sg{padding:clamp(22px,2.4vw,32px) 0;border-bottom:1px solid rgba(255,255,255,.08)}
.eg-sg:last-child{border-bottom:0;padding-bottom:0}
.eg-sh{display:grid;grid-template-columns:minmax(200px,.9fr) 1.6fr;gap:clamp(16px,3vw,48px);align-items:baseline}
.eg-sh h4{font-size:clamp(18px,1.4vw,21px);font-weight:600;letter-spacing:-.02em}
.eg-sh p{color:var(--ink-2);line-height:1.55}
.eg-list{list-style:none;margin-top:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:10px}
.eg-c{display:grid;grid-template-columns:minmax(200px,.9fr) 1.6fr;column-gap:clamp(16px,3vw,48px);row-gap:10px;padding:20px 22px;border-radius:18px;background:var(--bg);border:1px solid rgba(255,255,255,.06);transition:border-color .35s}
.eg-c:hover{border-color:rgba(204,255,102,.4)}
.eg-c h5{grid-column:1;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.eg-c{grid-template-rows:auto 1fr}
.eg-c .tc-st{grid-column:1;grid-row:2;justify-self:start;align-self:start}
.eg-c p{grid-column:2;grid-row:1/span 2;color:var(--ink-2);font-size:15px;line-height:1.6}
.tc-st{flex:none;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 10px;border-radius:99px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.tc-st i{width:6px;height:6px;border-radius:50%;background:currentColor}
.tc-st.op{background:rgba(204,255,102,.14);color:var(--lime)}
.tc-st.op i{box-shadow:0 0 0 3px rgba(204,255,102,.18);animation:tcp 2.4s ease-in-out infinite}
.tc-st.dev{border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.75)}
.tc-st.dev i{background:none;border:1px solid currentColor}
@keyframes tcp{50%{box-shadow:0 0 0 6px rgba(204,255,102,0)}}
.lc{margin-top:clamp(16px,2vw,24px)}
.th-note{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,80px);align-items:center;margin-top:clamp(16px,2vw,24px);background:var(--card);border-radius:var(--r);padding:clamp(24px,3vw,48px)}
.th-note p{color:var(--ink-2);line-height:1.6;max-width:86ch}

/* 6 · Responsible AI — 3 thẻ */
.th-rai .lead{margin-top:24px;color:rgba(255,255,255,.75);max-width:70ch}
.e3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(48px,5vw,80px)}
.e3>div{border:1px solid rgba(255,255,255,.4);border-radius:var(--r);padding:clamp(24px,2.6vw,40px);background:rgba(0,0,0,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.e3 .tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;border:1px solid rgba(204,255,102,.4);color:var(--lime);font-family:var(--mono);font-size:12px}
.e3 h3{font-size:clamp(22px,1.9vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.1;margin:32px 0 14px}
.e3 p{color:rgba(255,255,255,.72);line-height:1.6}

/* 7 · Partnerships — 3 hình thức hợp tác + lối liên hệ phụ */
.pt3{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(16px,3vw,40px)}
.pt3>div{background:rgba(13,20,14,.9);color:#fff;border-radius:24px;padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column}
.pt3 .mono{color:var(--lime)}
.pt3 h3{font-size:clamp(20px,1.7vw,26px);font-weight:600;letter-spacing:-.025em;margin:28px 0 12px;color:#fff}
.pt3 p{color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:24px}
.pt3-l{margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-weight:500;align-self:flex-start;border-bottom:1px solid rgba(204,255,102,.4);padding-bottom:2px}
.pt3-l i{font-style:normal;transition:transform .3s}
.pt3-l:hover i{transform:translateX(4px)}
.pt-sub{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 32px;color:var(--ink)}
.pt-sub a{border-bottom:1px solid rgba(13,20,14,.35)}
.pt-sub a:hover{border-color:var(--ink)}

@media (max-width:1100px){
  .th-paper{grid-template-columns:1fr 1fr}
  .th-paper div:first-child{grid-column:1/-1}
  .eg{grid-template-columns:1fr}
  .eg-nav{position:static;flex-direction:row;overflow-x:auto;scrollbar-width:none}
  .eg-nav::-webkit-scrollbar{display:none}
  .eg-n{flex:none;grid-template-columns:auto auto;padding:12px 16px}
  .eg-ico{display:none}
  .e3,.pt3{grid-template-columns:1fr}
  .th-note{grid-template-columns:1fr}
  .th-note .btn{justify-self:start}
}
@media (max-width:720px){
  .th-paper{grid-template-columns:1fr}
  .eg-sh,.eg-c{grid-template-columns:1fr}
  .eg-c p{grid-column:1;grid-row:auto}
  .eg-ph{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){.tc-st.op i{animation:none}}

/* Mobile: link dài trong Scientific Validation không được đẩy rộng grid */
.tech-page .hero-g>*{min-width:0}

/* Thẻ Responsible AI + Partnerships: dáng mái vòm như ô ~3% (Scientific Validation) */
.e3>div,.pt3>div{border-radius:var(--arch);display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(56px,5.2vw,88px) clamp(24px,2.6vw,40px) clamp(28px,2.6vw,40px)}
.e3 p,.pt3 p{max-width:34ch}
.e3 h3,.pt3 h3{max-width:16ch}
.pt3-l{align-self:center;display:inline-block;text-align:center}
.pt3-l i{margin-left:6px}
@media (max-width:1100px){.e3>div,.pt3>div{padding-top:clamp(56px,12vw,96px)}}
.pt-cta-b{grid-column:1/-1;justify-self:start;margin-top:clamp(8px,1.5vw,16px)}
/* Partnerships: khoảng cách nội dung → thẻ → nút giảm 1/2 */
.th-pt{row-gap:clamp(20px,2.6vw,48px)}
.th-pt .pt3{margin-top:clamp(8px,1.4vw,20px)}
.th-pt .pt-cta-b{margin-top:clamp(8px,1.4vw,20px)}
/* Responsible AI (trang Technology): ảnh nền riêng office_3 */
.eth4.th-rai{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.65)),url('../images/office_3.webp') center/cover no-repeat,#0B0B0B}
@media (max-width:720px){.eth4.th-rai{background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.65)),url('../images/office_3_MB.webp') center top/cover no-repeat,#0B0B0B}}
/* Mobile: chú thích hình chỉ giữ nhãn FIG. 01 để mặt phẳng to hơn */
@media (max-width:720px){.th-cap p{display:none}}
/* Mobile màn nhỏ (≤380px, vd iPhone SE): sub-headline hero + đoạn giới thiệu các section 18px → 16px */
@media (max-width:380px){.tech-page .lead{font-size:16px!important}}

/* Engineering trên mobile: bỏ menu 01/02/03, 3 nhóm thành accordion (+ / −) */
.eg-tg{display:none}
@media (max-width:1100px){
  .eg-nav{display:none!important}
  .eg-p{padding:0;overflow:hidden}
  .eg-ph{position:relative;padding:22px 64px 22px 22px;border-bottom:0;cursor:pointer;flex-direction:row!important;align-items:baseline;gap:14px}
  .eg-ph h3{font-size:clamp(22px,5.6vw,30px)}
  .eg-tg{display:grid;place-items:center;position:absolute;right:16px;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:var(--lime);color:var(--ink);cursor:pointer}
  .eg-tg span,.eg-tg span::after{display:block;width:14px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s}
  .eg-tg span{position:relative}
  .eg-tg span::after{content:"";position:absolute;left:0;top:0;transform:rotate(90deg)}
  .eg-p.open .eg-tg span::after{transform:rotate(0)}
  .eg-pb{display:none;padding:0 22px 22px;border-top:1px solid rgba(255,255,255,.12)}
  .eg-p.open .eg-pb{display:block}
}
/* Responsible AI: 3 thẻ nền đen 60%, không blur */
.e3>div{background:rgba(0,0,0,.4);backdrop-filter:none;-webkit-backdrop-filter:none;border-color:rgba(255,255,255,.3)}
/* Responsible AI trên mobile: đẩy toàn bộ nội dung xuống 200px để lộ ảnh nền */
@media (max-width:720px){.eth4.th-rai{padding-top:250px}}