/*!
 * Theme newnet-v2 — Trang Giới thiệu (page layout about). Prefix: ab-
 * Nội dung: data/about.php · View: vendor/cms/web/page/about.blade.php. Chỉ dùng token var(--nn-*), không viết mã màu cứng.
 */

/* ============================== HERO ============================== */
.ab-hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(var(--nn-space-8), 1.5rem + 2vw, var(--nn-space-14)) 0 clamp(var(--nn-space-10), 2rem + 2vw, var(--nn-space-16));
    background: var(--nn-deep-950); color: rgba(255, 255, 255, .74);
}
.ab-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ab-hero__bg::before {
    content: ""; position: absolute; inset: 0; opacity: .7;
    background-image: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 80% 70% at 60% 30%, #000 25%, transparent 80%);
}
.ab-hero__bg span { position: absolute; border-radius: var(--nn-radius-round); filter: blur(100px); animation: ab-drift 20s ease-in-out infinite alternate; }
.ab-hero__bg span:first-child { width: 560px; height: 560px; left: -180px; top: -220px; background: var(--nn-brand); opacity: .55; }
.ab-hero__bg span:last-child { width: 480px; height: 480px; right: -140px; bottom: -180px; background: var(--nn-accent); opacity: .28; animation-delay: -8s; }
@keyframes ab-drift { to { transform: translate(60px, 40px) scale(1.1); } }

.ab-hero__inner { display: grid; gap: var(--nn-space-12); align-items: center; margin-top: clamp(var(--nn-space-8), 1.5rem + 2vw, var(--nn-space-14)); }
.ab-hero__inner > * { min-width: 0; }
@media (min-width: 992px) { .ab-hero__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--nn-space-16); } }
.ab-hero__title {
    margin: var(--nn-space-5) 0; color: #fff; text-wrap: balance;
    font-size: clamp(2.125rem, 1.4rem + 2.4vw, 3.25rem); font-weight: var(--nn-weight-extrabold); line-height: 1.08; letter-spacing: -.035em;
}
.ab-hero__title span {
    display: block; padding-bottom: .08em;
    background: linear-gradient(90deg, var(--nn-glow-soft), var(--nn-accent-300));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ab-hero__lead { max-width: 600px; margin: 0 0 var(--nn-space-6); font-size: var(--nn-text-lg); line-height: var(--nn-leading-relaxed); }
.ab-hero__points { display: flex; flex-wrap: wrap; gap: var(--nn-space-2) var(--nn-space-5); list-style: none; margin: 0 0 var(--nn-space-8); padding: 0; }
.ab-hero__points li { display: inline-flex; align-items: center; gap: var(--nn-space-2); font-size: var(--nn-text-sm); color: rgba(255, 255, 255, .86); }
.ab-hero__points .nn-icon { color: var(--nn-success-400); font-size: var(--nn-icon-md); }

/* Thẻ hồ sơ công ty */
.ab-profile {
    position: relative; padding: var(--nn-space-7); border-radius: var(--nn-radius-2xl);
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(var(--nn-blur)); backdrop-filter: blur(var(--nn-blur));
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.ab-profile::before {
    content: ""; position: absolute; z-index: -1; inset: 18% -6% -6% 18%; border-radius: var(--nn-radius-3xl);
    background: var(--nn-gradient); opacity: .35; filter: blur(48px);
}
.ab-profile__head { display: flex; align-items: center; gap: var(--nn-space-3-5); padding-bottom: var(--nn-space-5); border-bottom: 1px solid rgba(255, 255, 255, .12); }
.ab-profile__head img { flex: none; }
.ab-profile__head div { display: grid; min-width: 0; line-height: var(--nn-leading-snug); }
.ab-profile__head strong { color: #fff; font-size: var(--nn-text-xl); font-weight: var(--nn-weight-extrabold); letter-spacing: var(--nn-tracking-wide); }
.ab-profile__head small { font-size: var(--nn-text-xs); color: rgba(255, 255, 255, .62); }
.ab-profile__facts { margin: 0; }
.ab-profile__facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nn-space-4); padding-block: var(--nn-space-3-5); border-bottom: 1px dashed rgba(255, 255, 255, .12); }
.ab-profile__facts dt { display: inline-flex; align-items: center; gap: var(--nn-space-2); flex: none; font-size: var(--nn-text-sm); font-weight: var(--nn-weight-regular); color: rgba(255, 255, 255, .62); }
.ab-profile__facts dt .nn-icon { font-size: var(--nn-icon-sm); color: var(--nn-cyan); }
.ab-profile__facts dd { margin: 0; text-align: right; font-size: var(--nn-text-md); font-weight: var(--nn-weight-semibold); color: #fff; }
.ab-profile__foot {
    display: flex; align-items: center; gap: var(--nn-space-3); margin-top: var(--nn-space-5); padding: var(--nn-space-3) var(--nn-space-4);
    border-radius: var(--nn-radius); background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .78); font-size: var(--nn-text-sm); text-decoration: none;
    transition: background var(--nn-duration) var(--nn-ease);
}
.ab-profile__foot:hover, .ab-profile__foot:focus-visible { background: rgba(255, 255, 255, .13); color: #fff; text-decoration: none; }
.ab-profile__foot strong { color: #fff; font-size: var(--nn-text-md); white-space: nowrap; }
.ab-profile__foot > .nn-icon { margin-left: auto; font-size: var(--nn-icon-md); color: var(--nn-cyan); }
.ab-profile__pulse { flex: none; width: 8px; height: 8px; border-radius: var(--nn-radius-round); background: var(--nn-success-400); box-shadow: 0 0 0 4px color-mix(in srgb, var(--nn-success-400) 25%, transparent); animation: ab-blink 2s infinite; }
@keyframes ab-blink { 50% { opacity: .35; } }

/* Dải số liệu */
.ab-stats {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; padding: 0;
    margin: clamp(var(--nn-space-10), 2rem + 2vw, var(--nn-space-16)) 0 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.ab-stats li { display: grid; align-content: start; gap: var(--nn-space-1-5); padding: var(--nn-space-6) var(--nn-space-4) 0 0; }
.ab-stats strong {
    font-size: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); font-weight: var(--nn-weight-extrabold); line-height: var(--nn-leading-none);
    letter-spacing: var(--nn-tracking-tighter); font-variant-numeric: tabular-nums; color: #fff;
}
.ab-stats span { font-size: var(--nn-text-sm); color: rgba(255, 255, 255, .66); }
@media (min-width: 768px) {
    .ab-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ab-stats li { padding-top: var(--nn-space-7); }
    .ab-stats li + li { padding-left: var(--nn-space-7); border-left: 1px solid rgba(255, 255, 255, .12); }
}

/* ============================== CÂU CHUYỆN ============================== */
.ab-story { display: grid; gap: var(--nn-space-10); }
.ab-story > * { min-width: 0; }
@media (min-width: 992px) {
    .ab-story { grid-template-columns: 5fr 7fr; gap: var(--nn-space-18); align-items: start; }
    .ab-story__head { position: sticky; top: calc(var(--nn-header-h) + var(--nn-space-8)); }
}
.ab-story__head h2 { margin: 0; text-wrap: balance; }
.ab-quote {
    position: relative; margin: var(--nn-space-8) 0 0; padding: var(--nn-space-6) var(--nn-space-6) var(--nn-space-6) var(--nn-space-7);
    border-radius: var(--nn-radius-xl); background: var(--nn-surface); overflow: hidden;
}
.ab-quote::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--nn-gradient); }
.ab-quote .nn-icon { font-size: 28px; color: var(--nn-brand-300); }
.ab-quote p { margin: var(--nn-space-2) 0 0; font-size: var(--nn-text-xl); font-weight: var(--nn-weight-semibold); line-height: var(--nn-leading-snug); color: var(--nn-ink); }
.ab-story__body p { margin: 0 0 var(--nn-space-5); font-size: var(--nn-text-lg); line-height: var(--nn-leading-relaxed); color: var(--nn-text); }
.ab-story__body p:first-child { font-size: var(--nn-text-2xl); line-height: 1.55; color: var(--nn-ink); font-weight: var(--nn-weight-medium); letter-spacing: var(--nn-tracking-tight); }
.ab-story__points { margin-top: var(--nn-space-8); padding-top: var(--nn-space-8); border-top: 1px solid var(--nn-border); gap: var(--nn-space-3-5) var(--nn-space-6); }
@media (min-width: 640px) { .ab-story__points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================== SỨ MỆNH · TẦM NHÌN · GIÁ TRỊ ============================== */
.ab-purpose { display: grid; gap: var(--nn-space-6); }
@media (min-width: 768px) { .ab-purpose { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-purpose__card {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(var(--nn-space-7), 1.5rem + 1.5vw, var(--nn-space-11)); border-radius: var(--nn-radius-2xl);
    background: #fff; border: 1px solid var(--nn-border);
}
.ab-purpose__card::after {
    content: ""; position: absolute; z-index: -1; right: -90px; top: -90px; width: 280px; height: 280px; border-radius: var(--nn-radius-round);
    background: radial-gradient(circle, color-mix(in srgb, var(--nn-brand) 14%, transparent), transparent 70%);
}
.ab-purpose__icon {
    display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--nn-radius-lg); font-size: 26px;
    color: #fff; background: var(--nn-gradient); box-shadow: var(--nn-shadow-brand);
}
.ab-purpose__card h3 { margin: var(--nn-space-6) 0 var(--nn-space-3); font-size: var(--nn-text-xs); font-weight: var(--nn-weight-bold); letter-spacing: var(--nn-tracking-wider); text-transform: uppercase; color: var(--nn-primary); }
.ab-purpose__card p { margin: 0; font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem); font-weight: var(--nn-weight-semibold); line-height: 1.5; letter-spacing: var(--nn-tracking-tight); color: var(--nn-ink); text-wrap: pretty; }
.ab-purpose__card--mission { background: var(--nn-bg-brand); border-color: transparent; }
.ab-purpose__card--mission::after { background: radial-gradient(circle, color-mix(in srgb, var(--nn-glow) 45%, transparent), transparent 70%); }
.ab-purpose__card--mission .ab-purpose__icon { color: var(--nn-brand-700); background: #fff; box-shadow: none; }
.ab-purpose__card--mission h3 { color: var(--nn-cyan); }
.ab-purpose__card--mission p { color: #fff; }

.ab-values { display: grid; gap: var(--nn-space-6); list-style: none; padding: 0; margin: var(--nn-space-6) 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .ab-values { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .ab-values { grid-template-columns: 1fr; } }
.ab-values li { padding: var(--nn-space-6); border-radius: var(--nn-radius-xl); background: #fff; border: 1px solid var(--nn-border); }
.ab-values .nn-icon-tile { width: 44px; height: 44px; border-radius: var(--nn-radius-md); }
.ab-values .nn-icon-tile .nn-icon { font-size: 21px; }
.ab-values h3 { margin: var(--nn-space-4) 0 var(--nn-space-1-5); font-size: var(--nn-text-lg); }
.ab-values p { margin: 0; font-size: var(--nn-text-sm); color: var(--nn-muted); }

/* ============================== LĨNH VỰC HOẠT ĐỘNG ============================== */
.ab-services { display: grid; gap: var(--nn-space-5); list-style: none; padding: 0; margin: 0; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ab-services li { min-width: 0; }
.ab-service {
    position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--nn-space-6-5);
    border-radius: var(--nn-radius-xl); background: #fff; border: 1px solid var(--nn-border); color: inherit; text-decoration: none;
    transition: transform .35s var(--nn-ease-out), box-shadow .35s, border-color .3s;
}
.ab-service:hover, a.ab-service:focus-visible {
    transform: translateY(-5px); border-color: var(--nn-brand-200); color: inherit; text-decoration: none;
    box-shadow: 0 30px 60px -36px color-mix(in srgb, var(--nn-brand-900) 45%, transparent);
}
.ab-service__num { position: absolute; top: var(--nn-space-6); right: var(--nn-space-6-5); font-size: var(--nn-text-xs); font-weight: var(--nn-weight-bold); letter-spacing: .06em; color: var(--nn-subtle); font-variant-numeric: tabular-nums; }
.ab-service__icon {
    display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--nn-radius-md); font-size: 22px;
    color: var(--nn-primary); background: var(--nn-brand-50);
    transition: background .3s, color .3s, transform .35s var(--nn-ease-out);
}
.ab-service:hover .ab-service__icon { color: #fff; background: var(--nn-gradient); transform: rotate(-6deg) scale(1.05); }
.ab-service h3 { margin: var(--nn-space-5) 0 var(--nn-space-1-5); font-size: var(--nn-text-lg); }
.ab-service p { margin: 0; font-size: var(--nn-text-sm); color: var(--nn-muted); }
.ab-service .nn-link-arrow { margin-top: auto; padding-top: var(--nn-space-4); font-size: var(--nn-text-sm); color: var(--nn-primary); }
.ab-service:hover .nn-link-arrow .nn-icon { transform: translateX(3px); }
/* Mobile: thẻ nằm ngang (icon trái, chữ phải) để danh sách gọn hơn */
@media (max-width: 575.98px) {
    .ab-services { gap: var(--nn-space-3); }
    .ab-service { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--nn-space-4); align-content: start; padding: var(--nn-space-5); }
    .ab-service__icon { grid-row: 1 / span 3; }
    .ab-service__num { top: var(--nn-space-5); right: var(--nn-space-5); }
    .ab-service h3 { margin: 0 var(--nn-space-8) var(--nn-space-1) 0; font-size: var(--nn-text-base); }
    .ab-service .nn-link-arrow { padding-top: var(--nn-space-2); }
}

/* ============================== HÀNH TRÌNH ============================== */
.ab-journey { isolation: isolate; overflow: hidden; background: var(--nn-deep-950); color: rgba(255, 255, 255, .72); }
.ab-journey::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(45% 80% at 0% 0%, color-mix(in srgb, var(--nn-brand) 38%, transparent), transparent 70%),
        radial-gradient(40% 70% at 100% 100%, color-mix(in srgb, var(--nn-accent) 22%, transparent), transparent 70%);
}
.ab-timeline { display: grid; gap: var(--nn-space-8); list-style: none; margin: 0; padding: 0; }
.ab-timeline li { position: relative; min-width: 0; padding-left: var(--nn-space-8); }
/* Trục & mốc: dọc trên mobile, ngang từ md */
.ab-timeline li::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: calc(var(--nn-space-8) * -1); width: 1px; background: rgba(255, 255, 255, .16); }
.ab-timeline li:last-child::before { display: none; }
.ab-timeline li::after {
    content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: var(--nn-radius-round);
    background: var(--nn-cyan); box-shadow: 0 0 0 5px color-mix(in srgb, var(--nn-glow) 20%, transparent);
}
.ab-timeline__time { display: block; font-size: var(--nn-text-sm); font-weight: var(--nn-weight-bold); letter-spacing: var(--nn-tracking-wide); text-transform: uppercase; color: var(--nn-cyan); font-variant-numeric: tabular-nums; }
.ab-timeline h3 { margin: var(--nn-space-2) 0; color: #fff; font-size: var(--nn-text-2xl); }
.ab-timeline p { margin: 0; font-size: var(--nn-text-md); }
@media (min-width: 768px) {
    .ab-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nn-space-10); }
    .ab-timeline li { padding: var(--nn-space-9) 0 0; }
    .ab-timeline li::before { left: 0; right: calc(var(--nn-space-10) * -1); top: 5px; bottom: auto; width: auto; height: 1px; display: block; }
    .ab-timeline li:last-child::before { display: block; right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .16), transparent); }
    .ab-timeline li::after { top: 0; }
}

/* ============================== THÔNG TIN DOANH NGHIỆP ============================== */
.ab-company { display: grid; gap: var(--nn-space-10); }
.ab-company > * { min-width: 0; }
@media (min-width: 992px) { .ab-company { grid-template-columns: 1fr 1fr; gap: var(--nn-space-16); align-items: center; } }
.ab-company__info { padding: clamp(var(--nn-space-6), 1rem + 1.5vw, var(--nn-space-10)); border-radius: var(--nn-radius-2xl); background: #fff; border: 1px solid var(--nn-border); box-shadow: var(--nn-shadow-sm); }
.ab-company__info dl { display: grid; gap: var(--nn-space-5); margin: var(--nn-space-2) 0 0; }
.ab-company__info dl > div { display: flex; align-items: flex-start; gap: var(--nn-space-4); }
.ab-company__info dt { flex: none; }
.ab-company__info .nn-icon-tile { width: 44px; height: 44px; border-radius: var(--nn-radius-md); }
.ab-company__info .nn-icon-tile .nn-icon { font-size: 20px; }
.ab-company__info dd { margin: 0; min-width: 0; font-size: var(--nn-text-md); font-weight: var(--nn-weight-semibold); line-height: var(--nn-leading-snug); color: var(--nn-ink); }
.ab-company__info dd small { display: block; margin-bottom: var(--nn-space-0-5); font-size: var(--nn-text-xs); font-weight: var(--nn-weight-regular); color: var(--nn-muted); }
.ab-company__contact { display: grid; gap: var(--nn-space-7); }
.ab-company__contact h2 { margin: 0 0 var(--nn-space-3); }

@media (prefers-reduced-motion: reduce) {
    .ab-hero__bg span, .ab-profile__pulse { animation: none; }
    .ab-service, .ab-service__icon { transition: none; }
}