/* Landing page Thang máy TEMI – phần riêng TEMI, nạp sau landing.css (giao diện landing Canny 2.3.1, chép bằng tools/port_canny.py).
   Màu, khung, cỡ chữ giữ đúng landing Canny; ở đây chỉ có logo TEMI, slide ảnh dọc, ảnh nhà máy, 2 cảnh giếng thang,
   thẻ sản phẩm riêng của TEMI (bảng tra giếng thang, mẫu trần, tính năng) và thẻ an toàn & chất lượng. */

/* ---------- Header: logo TEMI (khối đậm, tỉ lệ 3,2:1 – cao hơn logo Canny dài mảnh một chút) ---------- */
.brand__temi { width: auto; height: 31px; transition: height .25s; }
.site-header.is-compact .brand__temi { height: 27px; }
@media (max-width: 1366px) { .brand__temi, .site-header.is-compact .brand__temi { height: 27px; } }
@media (min-width: 1181px) and (max-width: 1240px) { .brand__temi, .site-header.is-compact .brand__temi { height: 25px; } }
@media (max-width: 560px) { .brand__temi, .site-header.is-compact .brand__temi { height: 21px; } }
@media (max-width: 374px) { .brand__temi, .site-header.is-compact .brand__temi { height: 17px; } }

/* ---------- 1. Hero: slide ảnh dọc (tháp thử, kỹ sư PNT) – ảnh nửa phải, nửa trái nền xanh có lưới mờ ---------- */
.hero__slide[data-fit="half"] { background: linear-gradient(160deg, #004A9A 0%, #0058B0 100%); }
.hero__slide[data-fit="half"]::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 48px 48px; }
.hero__slide[data-fit="half"] .hero__img { left: auto; width: 54%; object-position: 50% 42%; }
.hero__slide[data-fit="half"][data-tone="people"] .hero__img { object-position: 60% 30%; }
.hero__slide[data-fit="half"]::after { background: linear-gradient(90deg, #0058B0 0%, #0058B0 46%, rgba(0, 88, 176, .6) 54%, rgba(0, 88, 176, 0) 68%), linear-gradient(0deg, rgba(0, 72, 150, .45) 0%, rgba(0, 72, 150, 0) 28%); }
@media (max-width: 767px) {
  .hero__slide[data-fit="half"] .hero__img { width: 100%; }
  .hero__slide[data-fit="half"]::after { background: linear-gradient(0deg, rgba(0, 72, 150, .95) 0%, rgba(0, 72, 150, .78) 42%, rgba(0, 72, 150, .15) 72%, rgba(0, 72, 150, 0) 100%); }
}

/* ---------- 2. Về TEMI: ảnh nhà máy trong khung video của landing Canny, nhãn TEMI chỉ vào xưởng (như trang 20 của profile) ---------- */
.about__media { margin: 0; }
.about__pin { position: absolute; left: 17%; top: 11%; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.about__pin img { position: static; width: clamp(64px, 7vw, 96px); height: auto; padding: 7px 10px; background: #fff; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 45, 100, .3); object-fit: contain; }
.about__pin::after { content: ""; width: 2px; height: clamp(30px, 6.5vh, 60px); background: linear-gradient(#fff, rgba(255, 255, 255, .6)); }
.about__pin::before { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; margin-left: -6px; border: 3px solid #fff; border-radius: 50%; background: var(--pnt-red-primary); box-shadow: 0 0 0 4px rgba(217, 54, 69, .35); }
.about__media figcaption { position: absolute; right: 34px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--pnt-text-blue); background: rgba(255, 255, 255, .92); }
.about__media figcaption .ico { width: 15px; height: 15px; color: var(--pnt-red-primary); }
/* giá trị cốt lõi: cùng kiểu dòng "Công trình phù hợp" của thẻ sản phẩm */
.about__copy .values { margin-top: clamp(12px, 2.4vh, 20px); padding-left: 12px; border-left: 3px solid var(--pnt-red-primary); font-size: 13px; font-weight: 700; letter-spacing: .03em; line-height: 1.5; color: var(--pnt-text-blue); }
.about__copy .values span { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--pnt-text-muted); }

/* ---------- 3. Hai cảnh giếng thang ---------- */
.shaft__rails { fill: none; stroke: rgba(219, 235, 247, .28); stroke-width: 1; }
.shaft__floors path { fill: none; stroke: rgba(219, 235, 247, .55); stroke-width: 1.2; }
.shaft__floors text, .ard__floors text { font-size: 11px; font-weight: 700; fill: rgba(219, 235, 247, .85); }
.tower__meters { flex-wrap: wrap; row-gap: 6px; }
.ard__floors path { fill: none; stroke: rgba(219, 235, 247, .35); stroke-width: 1.2; stroke-dasharray: 3 4; }
.ard__ldoors rect { fill: rgba(255, 255, 255, .28); }
.ard__machine, .ard__gov { fill: none; stroke: #fff; stroke-width: 2; }
.ard__gov { stroke-width: 1.6; stroke: rgba(255, 255, 255, .8); }
.ard__cab { fill: rgba(255, 255, 255, .18); stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.ard__tag { font-size: 6.5px; font-weight: 800; letter-spacing: .02em; text-anchor: middle; fill: #fff; }
.ard__rope { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1; }
.ard__cw { fill: rgba(255, 255, 255, .45); }
.ard__buffer { fill: none; stroke: #fff; stroke-width: 1.5; }
.ard__car-box { fill: rgba(255, 255, 255, .12); stroke: #fff; stroke-width: 1.5; }
.ard__car-light { fill: #FFF1C2; filter: drop-shadow(0 0 5px rgba(255, 236, 170, .9)); transition: fill .3s, filter .3s; }
.ard__door { fill: #DCE9F6; stroke: #0A5FB0; stroke-width: .8; transform-box: fill-box; transition: transform 1s cubic-bezier(.4, 0, .2, 1); }
.ard__door--l { transform-origin: 0 50%; }
.ard__door--r { transform-origin: 100% 50%; }
.ard__svg { transition: filter .3s; }
.tower__scene--ard.is-dark .ard__svg { filter: brightness(.72) saturate(.6); }
.tower__scene--ard.is-dark .ard__car-light { fill: rgba(255, 255, 255, .12); filter: none; }
.tower__scene--ard.is-ard .ard__car-light { fill: rgba(255, 214, 140, .8); }
.tower__scene--ard.is-ard .ard__cab { fill: rgba(255, 176, 64, .6); stroke: #FFB040; animation: ardPulse .8s ease-in-out infinite; }
@keyframes ardPulse { 50% { fill: rgba(255, 176, 64, .2); } }
.tower__scene--ard.is-open .ard__door { transform: scaleX(.14); }
.tower__scene--ard .tower__num { display: flex; align-items: center; gap: 10px; }
.tower__scene--ard .tower__num small { align-self: flex-end; margin-bottom: .2em; }
.ard__arrow { width: 0; height: 0; border-left: .14em solid transparent; border-right: .14em solid transparent; opacity: 0; transition: opacity .2s; }
.ard__arrow.is-up { border-bottom: .22em solid var(--canny-yellow); opacity: 1; }
.ard__arrow.is-down { border-top: .22em solid var(--canny-yellow); opacity: 1; }
.ard__state { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 4px 12px 4px 10px; font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .16); transition: background-color .3s; }
.ard__state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #7CE0A6; }
.ard__state[data-kind="run"]::before { animation: ardBlink 1s infinite; }
.ard__state[data-kind="cut"] { background: rgba(217, 54, 69, .92); }
.ard__state[data-kind="cut"]::before { background: #fff; animation: ardBlink .5s infinite; }
.ard__state[data-kind="ard"] { background: rgba(255, 176, 64, .34); }
.ard__state[data-kind="ard"]::before { background: #FFB040; animation: ardBlink .8s infinite; }
.ard__state[data-kind="ok"] { background: rgba(124, 224, 166, .26); }
@keyframes ardBlink { 50% { opacity: .25; } }
.rnd img { object-position: 50% 30%; }   /* ảnh tháp thử (khung ngang như ảnh R&D landing Canny): giữ biển TEMI ELEVATOR */
@media (max-width: 640px) { .tower__scene--ard { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; } }

/* ---------- 5. Sản phẩm: ảnh 3D / bản vẽ hiện trọn, bảng tra giếng thang, cabin + 7 mẫu trần, bảng gọi, tính năng ---------- */
.ppanel__img--contain { object-fit: contain; object-position: 50% 50%; padding: 10px; background: #fff; border: 1px solid var(--pnt-border); }
/* tab MR / MRL / tính năng: hình 3D hẹp – cột ảnh hẹp lại, thẻ bảng tra rộng hơn (chỉ màn rộng; điện thoại như landing Canny: 1 cột) */
@media (min-width: 641px) { .ppanel:has(.model--finder), .ppanel:has(.model--list) { grid-template-columns: minmax(0, .34fr) minmax(0, 1fr); } }
@media (min-width: 1081px) { .ppanel:has(.model--finder) .models { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
@media (max-width: 1080px) { .ppanel:has(.model--finder) .models { grid-template-columns: 1fr; } }   /* máy tính bảng: bảng tra đủ rộng */
.model--finder .finder__loads { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 14px; border-top: 1px dashed var(--pnt-frame); }
.finder__load { padding: 5px 10px; border: 0; font-size: 12.5px; font-weight: 700; line-height: 1.2; color: var(--pnt-text-blue); background: #fff; box-shadow: inset 0 0 0 1px var(--pnt-border); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%); }
.finder__load:hover { background: var(--pnt-bg-blue-pale); }
.finder__load.is-active { color: #fff; background: var(--canny-blue); box-shadow: none; }
.finder__table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 12.5px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.finder__table th { padding: 4px 6px 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-align: left; text-transform: uppercase; color: var(--pnt-text-muted); border-bottom: 1px solid var(--pnt-frame); }
.finder__table td { padding: 6px 5px; font-weight: 600; white-space: nowrap; color: var(--pnt-text-blue); border-bottom: 1px dashed var(--pnt-border); }
.finder__table td.is-shaft { font-weight: 800; color: var(--pnt-red-hover); }
.finder__table td.is-none { color: var(--pnt-frame); }
.finder__table tbody tr { animation: fadeUp .35s ease both; }
.finder__note { margin-top: auto; padding-top: 10px; font-size: 11.5px; line-height: 1.4; color: var(--pnt-text-muted); }
.specs--text dd { font-size: 14px; line-height: 1.35; white-space: normal; }
.model--ceil .model__code, .model--list .model__code { margin-bottom: 0; }
/* 7 mẫu trần: lưới trong thẻ thứ 2, giãn theo chiều cao thẻ */
.model--ceil .ceilings { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: start; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--pnt-frame); }
.ceilings li { min-height: 0; display: flex; flex-direction: column; }
.ceilings img { width: 100%; height: 0; flex: 1; min-height: 34px; max-height: 92px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 45, 100, .14); transition: transform .25s; }
.ceilings li:hover img { transform: translateY(-3px); }
.ceilings span { display: block; margin-top: 4px; font-size: 11px; font-weight: 700; text-align: center; color: var(--pnt-text-blue); }
.model--gallery .model__pic { flex: 1 1 auto; width: 100%; height: 0; min-height: 70px; padding: 10px; object-fit: contain; background: #fff; border-top: 1px dashed var(--pnt-frame); }
.model__checks { flex: 1; display: grid; align-content: space-evenly; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--pnt-frame); font-size: 14px; line-height: 1.4; color: var(--pnt-text-body); }
.model__checks li { display: flex; gap: 8px; }
.model__checks .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--pnt-red-primary); stroke-width: 2.4; }
/* 1 cột khi đủ cao, 2 cột trên màn thấp */
.model--list .features__list { flex: 1; display: grid; align-content: space-evenly; padding-top: 12px; border-top: 1px dashed var(--pnt-frame); }
.features__list li { position: relative; padding: 2px 0 3px 15px; break-inside: avoid; font-size: 13.5px; line-height: 1.35; color: var(--pnt-text-body); cursor: help; }
.features__list li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 7px; height: 4px; border-left: 2px solid var(--canny-blue); border-bottom: 2px solid var(--canny-blue); transform: rotate(-45deg); }
.model--list + .model--list { border-top-color: var(--pnt-red-primary); }
.model--list + .model--list .features__list li::before { border-color: var(--pnt-red-primary); }
@media (max-width: 420px) { .model--list .features__list { columns: 1; } .finder__table { font-size: 12px; } .finder__table td, .finder__table th { padding-inline: 4px; } }

/* ---------- 4, 7. Thẻ trong dải ảnh: nút "Tải profile", thiết bị an toàn (nền sáng), IQC… (nền xanh), mô phỏng ---------- */
.ccard--more button { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; width: 100%; height: 100%; padding: 16px 18px; border: 0; background: none; text-align: left; color: #fff; }
.ccard--more button > .ico { width: 34px; height: 34px; margin-bottom: auto; }
.ccard--light { background: linear-gradient(165deg, #fff 0%, #F3F8FD 55%, #E1EEFA 100%); box-shadow: inset 0 0 0 1px var(--pnt-border); }
.ccard--light::before { display: none; }
.ccard__no { position: absolute; left: 14px; top: 14px; z-index: 2; padding: 2px 12px 2px 8px; font-size: 12.5px; font-weight: 800; font-style: italic; letter-spacing: .08em; color: #fff; background: var(--pnt-red-primary); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.ccard__media { position: absolute; left: 18px; right: 18px; top: 42px; bottom: 66px; }
.ccard .ccard__media img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 45, 100, .22)); }
.ccard--light .ccard__body b { color: var(--pnt-text-blue); }
.ccard--light .ccard__body span { font-weight: 500; color: var(--pnt-text-muted); }
.ccard--qc { color: #fff; background: var(--band-bg); }
.ccard--qc::before { display: none; }
.ccard__ico { position: absolute; left: 16px; top: 16px; width: 44px; height: 44px; padding: 10px; color: #fff; background: rgba(255, 255, 255, .16); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.ccard--qc:nth-child(10) .ccard__ico { background: var(--pnt-red-primary); }
.ccard--qc .ccard__body { bottom: 14px; }
.ccard--qc .ccard__body b { font-size: clamp(26px, 4.2vh, 40px); font-weight: 800; font-style: italic; line-height: 1.1; letter-spacing: -.02em; }
.ccard--qc .ccard__body span { margin-top: 4px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: rgba(255, 255, 255, .92); }
.ccard__pass { position: absolute; right: 26px; top: 16px; z-index: 2; padding: 2px 9px; font-size: 11px; font-weight: 800; font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #1F9D55; transform: rotate(-3deg); }

/* ---------- Mỗi màn vừa một khung hình (như landing Canny, rộng ≥ 1081px) ---------- */
@media (min-width: 1081px) and (max-height: 900px) {
  .model--list .features__list { display: block; columns: 2; column-gap: 14px; }
  .model--finder .model__code { margin-bottom: 10px; }
  .model--finder .finder__loads { padding-top: 10px; gap: 5px; }
  .finder__load { padding: 4px 8px; font-size: 12px; }
  .finder__table { margin-top: 8px; }
  .finder__table td { padding: 4px 5px; }
  .ard__state { margin-bottom: 8px; }
  .features__list li { font-size: 12.5px; }
}
@media (min-width: 1081px) and (min-height: 760px) and (max-height: 900px) {
  .model--list .features__list { display: grid; columns: auto; }
  .features__list li { font-size: 13px; }
}
@media (min-width: 1081px) and (max-height: 680px) {
  .finder__note { display: none; }
  .model { padding: 12px 16px 14px; }
  .model__name { font-size: 17px; }
  .model__code { margin: 4px 0 10px; }
  .finder__table td { padding: 3px 5px; }
  .model__checks { gap: 4px; padding-top: 10px; font-size: 13px; }
  .model--gallery .model__pic { min-height: 56px; padding: 6px; }
  .model--list .features__list { padding-top: 8px; }
  .features__list li { padding-block: 1px 2px; font-size: 12px; }
  .model--ceil .ceilings { padding-top: 10px; gap: 6px; }
}

/* cửa sổ tiêu chuẩn không có ảnh: mã dài (TCVN 6396, EN 81-20) nằm 1 dòng trong huy hiệu */
.certbox__badge b { font-size: 34px; white-space: nowrap; }