/* Thịnh Phát About — v1.1: wider desktop composition and balanced type */
.tp-about {
    --tp-navy: #092653;
    --tp-orange: #f39812;
    --tp-ink: #14284a;
    --tp-muted: #43536e;
    --tp-font: "Be Vietnam Pro", Arial, sans-serif;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(42px, 4.5vw, 76px) clamp(22px, 5vw, 86px);
    background:
        radial-gradient(circle at 7% 8%, rgba(74, 174, 239, .14) 1.5px, transparent 2px) 0 0 / 13px 13px,
        radial-gradient(circle at 96% 90%, rgba(74, 174, 239, .12) 1.5px, transparent 2px) 0 0 / 13px 13px,
        linear-gradient(135deg, #fff 0%, #f8fbff 100%);
    color: var(--tp-ink);
    font-family: var(--tp-font);
}
.tp-about, .tp-about * { box-sizing: border-box; }
.tp-about__inner {
    width: min(100%, 1500px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(430px, .88fr) minmax(0, 1.42fr);
    align-items: center;
    gap: clamp(34px, 4vw, 64px);
}
.tp-about__intro { min-width: 0; text-align: left; }
.tp-about__eyebrow {
    display: flex; align-items: center; gap: 18px;
    margin-bottom: 18px;
    color: var(--tp-orange);
    font-size: clamp(17px, 1.35vw, 22px);
    line-height: 1.2; font-weight: 800; letter-spacing: .015em;
}
.tp-about__eyebrow i { display: block; width: clamp(58px, 8vw, 130px); height: 3px; background: var(--tp-orange); border-radius: 3px; }
.tp-about__intro h2 {
    max-width: 690px;
    margin: 0 !important; color: var(--tp-navy) !important;
    font-family: var(--tp-font) !important;
    font-size: clamp(36px, 3.1vw, 52px) !important;
    line-height: 1.16 !important; letter-spacing: -.035em !important;
    font-weight: 800 !important; text-transform: uppercase;
    text-align: left !important;
}
.tp-about__accent { display:flex; align-items:center; gap:5px; margin: 18px 0 20px; }
.tp-about__accent span { width: 72px; height: 8px; background: var(--tp-navy); transform: skewX(-35deg); }
.tp-about__accent i { width: 52px; height: 8px; background: var(--tp-orange); transform: skewX(-35deg); }
.tp-about__description {
    max-width: 650px;
    margin: 0 !important; color: #1e2b43 !important;
    font-size: clamp(16px, 1.12vw, 18px) !important;
    line-height: 1.72 !important; font-weight: 400 !important;
    text-align: left !important;
}
.tp-about__values { display:grid; grid-template-columns: repeat(3, 1fr); margin: clamp(26px, 3vw, 40px) 0 28px; max-width:650px; }
.tp-about__value {
    display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    gap: 10px; padding: 0 12px; text-align:center;
    border-right: 1px solid rgba(9,38,83,.30);
    transition: transform .35s ease, color .35s ease;
}
.tp-about__value:last-child { border-right:0; }
.tp-about__value-icon { display:flex; align-items:center; justify-content:center; width:68px; height:62px; color:var(--tp-orange); transition: transform .35s ease; }
.tp-about__value-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.tp-about__value:first-child .tp-about__value-icon svg { stroke:var(--tp-navy); }
.tp-about__value strong { color:var(--tp-navy); font-size:clamp(14px, 1.08vw, 17px); line-height:1.38; font-weight:700; }
.tp-about__value:hover { transform: translateY(-7px); }
.tp-about__value:hover .tp-about__value-icon { transform: translateY(-4px) scale(1.08) rotate(-3deg); }
.tp-about__cta {
    position:relative; display:inline-flex; align-items:center; justify-content:space-between;
    min-width: 285px; min-height:60px; overflow:hidden;
    padding: 0 0 0 30px; border-radius:50px;
    background:var(--tp-navy); color:#fff !important;
    text-decoration:none !important; font-size:18px; font-weight:800;
    box-shadow:0 9px 22px rgba(9,38,83,.16);
    transition:transform .3s ease, box-shadow .3s ease;
}
.tp-about__cta span { position:relative; z-index:1; }
.tp-about__cta b {
    display:flex; align-items:center; justify-content:center; align-self:stretch;
    width:70px; margin-left:18px; background:var(--tp-orange);
    color:#fff; font-size:42px; line-height:1; font-weight:400;
    transition:width .3s ease, background .3s ease;
}
.tp-about__cta:hover { color:#fff !important; transform:translateY(-4px); box-shadow:0 14px 28px rgba(9,38,83,.25); }
.tp-about__cta:hover b { width:84px; background:#ffad24; }
.tp-about__phone { margin-top:14px; color:var(--tp-muted); font-size:14px; }
.tp-about__phone:before { content:"☎"; margin-right:8px; color:var(--tp-orange); font-weight:800; }
.tp-about__phone a { color:var(--tp-navy); text-decoration:none; font-weight:700; }
.tp-about__services { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(18px, 1.8vw, 28px); perspective:1000px; }
.tp-about__card {
    position:relative; overflow:hidden; min-width:0;
    border:1px solid rgba(9,38,83,.10); border-radius:18px;
    background:#fff; box-shadow:0 7px 22px rgba(13,35,69,.10);
    transform-style:preserve-3d; will-change:transform;
    transition:transform .38s cubic-bezier(.2,.75,.25,1), box-shadow .38s ease, border-color .38s ease;
}
.tp-about__card:hover { box-shadow:0 18px 34px rgba(13,35,69,.18); border-color:rgba(243,152,18,.65); }
.tp-about__photo { position:relative; overflow:hidden; aspect-ratio: 1.72 / 1; background:linear-gradient(135deg,#eaf3fc,#dce8f5); }
.tp-about__photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.tp-about__card:hover .tp-about__photo img { transform:scale(1.065); filter:saturate(1.08); }
.tp-about__photo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; width:100%; height:100%; color:var(--tp-navy); background:linear-gradient(135deg,#f5f9ff,#dfeafa); text-align:center; padding:15px; }
.tp-about__photo-placeholder span { width:65px; height:65px; color:var(--tp-orange); }
.tp-about__photo-placeholder svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.tp-about__photo-placeholder small { max-width:220px; font-size:11px; line-height:1.45; }
.tp-about__number {
    position:absolute; top:12px; right:12px; display:flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%; color:#fff; background:var(--tp-navy);
    font-size:12px; font-weight:800; box-shadow:0 3px 10px rgba(0,0,0,.15);
    transition:transform .35s ease, background .35s ease;
}
.tp-about__card:hover .tp-about__number { transform:rotate(10deg) scale(1.1); background:var(--tp-orange); }
.tp-about__card-copy { position:relative; padding:17px 20px 20px 24px; min-height:112px; }
.tp-about__card-copy:before { content:""; position:absolute; left:14px; top:20px; bottom:20px; width:5px; border-radius:5px; background:var(--tp-orange); transform:scaleY(.55); transform-origin:center; transition:transform .35s ease; }
.tp-about__card:hover .tp-about__card-copy:before { transform:scaleY(1); }
.tp-about__card-copy h3 {
    margin:0 0 6px 8px !important; color:var(--tp-navy) !important;
    font-family:var(--tp-font) !important; font-size:clamp(17px,1.35vw,21px) !important;
    line-height:1.35 !important; font-weight:800 !important; letter-spacing:-.015em;
    text-align:left !important;
}
.tp-about__card-copy p { margin:0 0 0 8px !important; color:var(--tp-muted) !important; font-size:clamp(14px,1.02vw,16px) !important; line-height:1.55 !important; font-weight:400 !important; text-align:left !important; }
.tp-about .tp-reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.tp-about .tp-reveal.tp-is-visible { opacity:1; transform:translateY(0); }
.tp-about__card.tp-reveal { transition:opacity .7s ease, transform .38s cubic-bezier(.2,.75,.25,1), box-shadow .38s ease, border-color .38s ease; transition-delay:calc(var(--tp-card-order, 0) * 90ms); }

@media (max-width: 1050px) {
    .tp-about__inner { grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:28px; }
    .tp-about__intro h2 { font-size:clamp(32px, 3.5vw, 42px) !important; }
    .tp-about__card-copy { min-height:120px; }
}
@media (max-width: 760px) {
    .tp-about { padding:38px 20px; }
    .tp-about__inner { grid-template-columns:1fr; gap:30px; }
    .tp-about__intro { max-width:720px; margin:0 auto; }
    .tp-about__intro h2 { max-width:100%; font-size:clamp(32px, 7vw, 44px) !important; }
    .tp-about__description { font-size:16px !important; }
    .tp-about__services { gap:14px; }
}
@media (max-width: 520px) {
    .tp-about { padding:32px 15px; }
    .tp-about__services { grid-template-columns:1fr; }
    .tp-about__photo { aspect-ratio:1.7 / 1; }
    .tp-about__card-copy { min-height:0; }
    .tp-about__values { margin:24px 0; }
    .tp-about__value { padding:0 5px; }
    .tp-about__value-icon { width:48px; height:48px; }
    .tp-about__value strong { font-size:12px; }
    .tp-about__cta { min-width:245px; min-height:54px; font-size:15px; }
}
@media (prefers-reduced-motion: reduce) {
    .tp-about *, .tp-about *::before, .tp-about *::after {
        animation-duration:.01ms !important; animation-iteration-count:1 !important;
        transition-duration:.01ms !important; scroll-behavior:auto !important;
    }
    .tp-about .tp-reveal { opacity:1; transform:none; }
}