/* ============================================================
   PHẦN GIỚI THIỆU (#gioi-thieu) — BACKGROUND ĐỘNG (logo TAHUBA)
   ------------------------------------------------------------
   File riêng cho phần "Giới thiệu" để chỉnh sửa cho tiện.
   - Markup nền động nằm ở: Pages/Shared/_GioiThieuBackground.cshtml
   - Layout: hiệu ứng + logo ở CỘT TRÁI, chữ ở CỘT PHẢI.
   - Nền section màu xanh theo primary-blue.
   ============================================================ */

:root {
    /* >>> CHỈNH NHANH TẠI ĐÂY <<< */
    --gt-logo-img: url('/assets/images/logo-bg-white.png'); /* đổi logo (cũng đổi src trong file partial) */
    --gt-photo: url('/assets/images/total_bg_1.jpg');       /* ảnh nền bổ sung */
    --gt-tint: 3, 29, 61;      /* màu xanh đậm phủ lên ảnh (R, G, B) */
    --gt-speed-bg: 14s;        /* tốc độ chuyển sắc nền xanh (hiệu ứng động) */
    --gt-speed-spin: 5s;       /* tốc độ vòng sáng quay */
    --gt-speed-float: 6s;      /* tốc độ logo trôi lên xuống */

    /* Lớp phủ xanh động: ĐẬM bên trái (logo) -> MỜ bên phải (chữ/ảnh).
       Lưu ý: bên phải KHÔNG để 0 hẳn, giữ ~0.3 để vẫn thấy màu động phủ nhẹ trên ảnh.
       Tăng số alpha = phủ đậm hơn (thấy rõ hơn) / giảm = lộ ảnh nhiều hơn. */
    --gt-fade: linear-gradient(to right,
        rgba(0, 0, 0, 0.8) 35%,
        rgba(0, 0, 0, 0.7) 45%,
        rgba(0, 0, 0, 0.6) 55%,
        rgba(0, 0, 0, 0.45) 75%,
        rgba(0, 0, 0, 0.3) 100%);
}

/* ---------- Khung section: ẢNH NỀN ---------- */
#gioi-thieu.about {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-color: rgb(var(--gt-tint));
    background-image: var(--gt-photo);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* Lớp phủ xanh CHUYỂN MÀU ĐỘNG (cũ), được "mask" mờ dần sang phải để lộ ảnh */
#gioi-thieu.about::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(-45deg, #052f63, #0a59b8, #155ea7, #074691, #0a59b8, #052f63);
    background-size: 400% 400%;
    animation: gt-bg-pan var(--gt-speed-bg) ease infinite;
    -webkit-mask: var(--gt-fade);
    mask: var(--gt-fade);
}

/* Nội dung dồn về CỘT PHẢI, đè lên nền hiệu ứng tràn full section */
#gioi-thieu.about .about-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 460px;
    position: relative;
    z-index: 2;
    /* Cho click "xuyên" qua vùng trống để bấm được logo bên dưới */
    pointer-events: none;
}

/* ---------- CỘT PHẢI: chữ, bỏ nền & border để ăn theo nền hiệu ứng ---------- */
#gioi-thieu.about .about-content {
    flex: 0 1 60%;
    background: transparent;
    border: 0;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-align: left;
    pointer-events: auto; /* chữ & nút vẫn bấm được bình thường */
}

#gioi-thieu.about .section-title,
#gioi-thieu.about .brand-slogan {
    color: var(--white);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

#gioi-thieu.about .section-title.text-left {
    text-align: left;
}

#gioi-thieu.about .about-text {
    color: rgba(255, 255, 255, 0.92);
    text-align: justify;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

#gioi-thieu.about .section-subtitle {
    color: #ffd700;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

/* Khối Tầm nhìn / Sứ mệnh / Giá trị (sau khi bấm "Xem thêm") nổi trên nền xanh.
   Các thẻ .vmv-card vốn nền trắng + chữ tối nên hiển thị tốt, không cần đổi màu chữ. */
#gioi-thieu.about .about-more {
    position: relative;
    z-index: 2;
    padding-bottom: 8px;
}

#gioi-thieu.about .compact-vmv {
    align-items: stretch;
}

#gioi-thieu.about .compact-vmv .vmv-card {
    height: auto;
    min-height: 100%;
    padding: 26px 24px;
}

#gioi-thieu.about .compact-vmv .vmv-title {
    font-size: 1.12rem;
    font-weight: 750;
    line-height: 1.35;
    margin-bottom: 10px;
}

#gioi-thieu.about .compact-vmv .vmv-subtitle {
    color: #0a59b8;
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: 0;
    line-height: 1.45;
}

#gioi-thieu.about .compact-vmv .vmv-desc {
    font-size: 0.94rem;
    font-weight: 400;
    line-height: 1.75;
}

/* ============================================================
   NỀN ĐỘNG (.gt-bg) — phủ kín TOÀN BỘ section, làm nền cho chữ
   ============================================================ */
.gt-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* Quầng sáng mờ (ambient blobs) */
.gt-blob {
    position: absolute;
    border-radius: 50%;
}
.gt-blob-1 {
    top: 4%; left: 4%; width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(120, 180, 255, 0.18) 0%, transparent 70%);
}
.gt-blob-2 {
    bottom: 4%; right: 6%; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(218, 165, 32, 0.12) 0%, transparent 70%);
}

/* Các ngôi sao lấp lánh */
.gt-stars { position: absolute; inset: 0; }
.gt-star {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: gt-twinkle 2.4s ease-in-out infinite;
}

/* ---------- Khu vực logo (nằm nửa trái của section) ---------- */
.gt-logo-area {
    position: absolute;
    top: 50%; left: 27%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: gt-float var(--gt-speed-float) ease-in-out infinite, gt-entrance 1s ease-out both;
}

/* Vòng xung nhịp (pulse rings) */
.gt-ring {
    position: absolute;
    width: 430px; height: 430px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
.gt-ring-1 { border: 2px solid rgba(120, 180, 255, 0.6); animation: gt-pulse-ring 3s ease-out infinite 0s; }
.gt-ring-2 { border: 2px solid rgba(218, 165, 32, 0.5); animation: gt-pulse-ring 3s ease-out infinite 1s; }
.gt-ring-3 { border: 2px solid rgba(120, 180, 255, 0.4); animation: gt-pulse-ring 3s ease-out infinite 2s; }
.gt-ring-4 { border: 2px solid rgba(218, 165, 32, 0.3); animation: gt-pulse-ring 3s ease-out infinite 3s; }

/* Vòng sáng gradient quay tròn */
.gt-halo {
    position: absolute;
    width: 350px; height: 350px;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: gt-spin-ring var(--gt-speed-spin) linear infinite;
    background: conic-gradient(
        rgba(255, 215, 0, 0) 0deg,
        rgba(255, 215, 0, 0.9) 60deg,
        rgba(255, 255, 180, 1) 90deg,
        rgba(255, 215, 0, 0.9) 120deg,
        rgba(255, 215, 0, 0) 180deg,
        rgba(120, 180, 255, 0) 200deg,
        rgba(120, 180, 255, 0.9) 270deg,
        rgba(180, 210, 255, 1) 300deg,
        rgba(120, 180, 255, 0.9) 330deg,
        rgba(120, 180, 255, 0) 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #fff calc(100% - 7px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #fff calc(100% - 7px));
}

/* Các chấm sáng bay quanh quỹ đạo */
.gt-orbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.gt-dot { border-radius: 50%; }
.gt-orbit-1 .gt-dot {
    width: 14px; height: 14px; margin: -7px 0 0 -7px;
    background: radial-gradient(circle, #ffd700 30%, rgba(255, 215, 0, 0) 70%);
    box-shadow: 0 0 12px 5px rgba(255, 215, 0, 0.9);
    animation: gt-orbit1 8s linear infinite;
}
.gt-orbit-2 .gt-dot {
    width: 10px; height: 10px; margin: -5px 0 0 -5px;
    background: radial-gradient(circle, #a8ccff 30%, rgba(168, 204, 255, 0) 70%);
    box-shadow: 0 0 10px 4px rgba(168, 204, 255, 0.9);
    animation: gt-orbit2 12s linear infinite;
}
.gt-orbit-3 .gt-dot {
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    background: radial-gradient(circle, #fff 30%, transparent 70%);
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.8);
    animation: gt-orbit3 16s linear infinite;
}

/* Logo tròn có hiệu ứng phát sáng */
.gt-logo {
    position: relative;
    width: 300px; height: 300px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    animation: gt-glow 3s ease-in-out infinite;
    cursor: pointer;
    pointer-events: auto; /* cho phép click dù .gt-bg đặt pointer-events:none */
}
.gt-logo img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Click vào logo -> lật 3D một vòng quanh trục Y (giữ nguyên hiệu ứng phát sáng) */
.gt-logo.gt-flipping {
    animation: gt-glow 3s ease-in-out infinite, gt-flip 0.9s ease-in-out;
}

/* Vệt sáng quét ngang qua logo */
.gt-shimmer { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; z-index: 2; pointer-events: none; }
.gt-shimmer::after {
    content: "";
    position: absolute;
    top: -10%; left: -80%;
    width: 50%; height: 120%;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.06) 40%, rgba(255, 255, 255, 0.22) 50%, rgba(255, 220, 100, 0.12) 56%, rgba(255, 255, 255, 0.06) 62%, transparent 80%);
    transform: skewX(-8deg);
    animation: gt-shimmer 4s ease-in-out infinite 2s;
}

/* ============================================================
   KEYFRAMES (tiền tố gt- để không đụng style.css)
   ============================================================ */
@keyframes gt-bg-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes gt-spin-ring {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes gt-pulse-ring {
    0%   { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}
@keyframes gt-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-16px); }
}
@keyframes gt-entrance {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
@keyframes gt-glow {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(120, 180, 255, 0.7)) drop-shadow(0 0 40px rgba(120, 180, 255, 0.3)); }
    50%      { filter: drop-shadow(0 0 34px rgba(120, 180, 255, 1)) drop-shadow(0 0 70px rgba(218, 165, 32, 0.4)) drop-shadow(0 0 100px rgba(120, 180, 255, 0.5)); }
}
@keyframes gt-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.2; transform: scale(0.5); }
}
@keyframes gt-shimmer {
    0%        { left: -80%; }
    40%, 100% { left: 140%; }
}
/* Lật 3D một vòng (perspective gói trong transform nên không cần đặt ở phần tử cha) */
@keyframes gt-flip {
    from { transform: perspective(1000px) rotateY(0deg); }
    to   { transform: perspective(1000px) rotateY(360deg); }
}
@keyframes gt-orbit1 {
    from { transform: rotate(0deg) translateX(195px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(195px) rotate(-360deg); }
}
@keyframes gt-orbit2 {
    from { transform: rotate(180deg) translateX(185px) rotate(-180deg); }
    to   { transform: rotate(540deg) translateX(185px) rotate(-540deg); }
}
@keyframes gt-orbit3 {
    from { transform: rotate(90deg) translateX(205px) rotate(-90deg); }
    to   { transform: rotate(450deg) translateX(205px) rotate(-450deg); }
}

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
    .gt-logo-area { left: 50%; opacity: 0.5; } /* logo về giữa & mờ đi để chữ dễ đọc */
    #gioi-thieu.about .about-container { justify-content: center; min-height: 420px; }
    #gioi-thieu.about .about-content { flex-basis: 100%; text-align: center; }
    #gioi-thieu.about .section-title.text-left { text-align: center; }
    #gioi-thieu.about .about-actions { justify-content: center; }
}

/* ---------- MOBILE: logo nhỏ lại & nằm trên cùng, chữ ở dưới ---------- */
@media (max-width: 1024px) {
    #gioi-thieu.about {
        background-position: center;
        background-attachment: scroll;
    }

    /* Mobile xếp dọc -> đổi hướng "mask" lớp phủ: TRÊN (logo) đậm -> DƯỚI (chữ) nhạt */
    #gioi-thieu.about::before {
        -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.4) 100%);
        mask: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.7) 45%, rgba(0,0,0,0.4) 100%);
    }

    /* Xếp dọc, chừa khoảng trống phía trên cho logo */
    #gioi-thieu.about .about-container {
        flex-direction: column;
        justify-content: flex-start;
        min-height: 0;
        padding-top: 230px;
    }

    /* Ghim logo lên trên cùng + thu nhỏ.
       Bỏ animation float (chứa translate -50% gây kéo về giữa), giữ các hiệu ứng khác. */
    .gt-logo-area {
        animation: gt-entrance 1s ease-out both;
        top: 12px;
        left: 50%;
        transform: translateX(-50%) scale(0.6);
        transform-origin: top center;
        opacity: 1;
    }

    /* Nền tối trong suốt nhẹ sau chữ để đọc rõ trên nền động */
    #gioi-thieu.about .about-content {
        /* background: rgba(2, 20, 45, 0.42);
        border-radius: 14px; */
        padding: 22px 8px;
        /* -webkit-backdrop-filter: blur(2px); */
        /* backdrop-filter: blur(2px); */
    }
}