:root {
    --bg-color: #121212;
    --card-bg-color: #1E1E1E;
    --text-color: #E0E0E0;
    --subtitle-color: #A0A0A0;
    --accent-color: #9b59b6;
    --accent-hover-color: #8e44ad;
    --shadow-color: rgba(0, 0, 0, 0.2);
    --border-color: #2c2c2c;

    --light-bg-color: #F4F6F8;
    --light-card-bg-color: #FFFFFF;
    --light-text-color: #2c3e50;
    --light-subtitle-color: #7f8c8d;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    -ms-overflow-style: none;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: none;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

body.light-theme {
    --bg-color: var(--light-bg-color);
    --card-bg-color: var(--light-card-bg-color);
    --text-color: var(--light-text-color);
    --subtitle-color: var(--light-subtitle-color);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --border-color: #EAECEF;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.75s ease, visibility 0.75s ease;
}

#preloader.preloader-hidden {
    opacity: 0;
    visibility: hidden;
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid var(--card-bg-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

header {
    border-bottom: 1px solid var(--border-color);
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    background-color: rgba(30, 30, 30, 0.7);
    transition: background-color 0.3s ease;
}

body.light-theme header {
    background-color: rgba(255, 255, 255, 0.7);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    text-decoration: none;
}

.theme-toggle-checkbox {
    display: none;
}

.theme-toggle-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--bg-color);
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    width: 50px;
    height: 26px;
    padding: 5px;
}

.theme-toggle-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.theme-toggle-checkbox:checked+.theme-toggle-label::after {
    transform: translateX(24px);
}

.sun,
.moon {
    font-size: 14px;
}

.hero {
    text-align: center;
    padding: 80px 0 60px;
}

.hero h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.hero .subtitle {
    font-size: 1.2rem;
    color: var(--subtitle-color);
    max-width: 600px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.section-subtitle {
    text-align: center;
    color: var(--subtitle-color);
    margin-bottom: 40px;
}

.downloads-section,
.community-section {
    padding: 40px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 60px;
}

.card {
    background-color: var(--card-bg-color);
    border-radius: 15px;
    padding: 30px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px var(--shadow-color);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    line-height: 1;
    color: var(--accent-color);
}

.card-icon svg {
    stroke: var(--accent-color);
}

.card-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.card-description {
    color: var(--subtitle-color);
    margin-bottom: 25px;
    line-height: 1.6;
}

.card-button {
    display: inline-block;
    background-color: var(--accent-color);
    color: #fff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.card-button:hover {
    background-color: var(--accent-hover-color);
}

.ipa-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.ipa-item {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    padding: 15px 25px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

.ipa-item:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    transform: translateY(-3px);
}

.ipa-item span {
    font-weight: 400;
    color: var(--subtitle-color);
    margin-left: 5px;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 50px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    min-width: 250px;
    text-align: center;
}

.social-link i {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: invert(1);
}

.icon-youtube {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.582,6.186c-0.23-0.86-0.908-1.538-1.768-1.768C18.254,4,12,4,12,4S5.746,4,4.186,4.418 C3.326,4.648,2.648,5.326,2.418,6.186C2,7.746,2,12,2,12s0,4.254,0.418,5.814c0.23,0.86,0.908,1.538,1.768,1.768 C5.746,20,12,20,12,20s6.254,0,7.814-0.418c0.86-0.23,1.538-0.908,1.768-1.768C22,16.254,22,12,22,12S22,7.746,21.582,6.186z M10,15.464V8.536L16,12L10,15.464z"/></svg>');
}

.icon-telegram {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22,3.292,2.484,10.74,8.7,13.447l1.836,5.8,3.225-3.123,4.44,3.242L22,3.292ZM11.954,14.659,10.3,18.9l-1.2-3.746,8.513-7.7-6.663,7.2Z"/></svg>');
}

.icon-zalo {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="%232962ff" d="M15,36V6.827l-1.211-0.811C8.64,8.083,5,13.112,5,19v10c0,7.732,6.268,14,14,14h10 c4.722,0,8.883-2.348,11.417-5.931V36H15z"></path><path fill="%23eee" d="M29,5H19c-1.845,0-3.601,0.366-5.214,1.014C10.453,9.25,8,14.528,8,19 c0,6.771,0.936,10.735,3.712,14.607c0.216,0.301,0.357,0.653,0.376,1.022c0.043,0.835-0.129,2.365-1.634,3.742 c-0.162,0.148-0.059,0.419,0.16,0.428c0.942,0.041,2.843-0.014,4.797-0.877c0.557-0.246,1.191-0.203,1.729,0.083 C20.453,39.764,24.333,40,28,40c4.676,0,9.339-1.04,12.417-2.916C42.038,34.799,43,32.014,43,29V19C43,11.268,36.732,5,29,5z"></path><path fill="%232962ff" d="M36.75,27C34.683,27,33,25.317,33,23.25s1.683-3.75,3.75-3.75s3.75,1.683,3.75,3.75 S38.817,27,36.75,27z M36.75,21c-1.24,0-2.25,1.01-2.25,2.25s1.01,2.25,2.25,2.25S39,24.49,39,23.25S37.99,21,36.75,21z"></path><path fill="%232962ff" d="M31.5,27h-1c-0.276,0-0.5-0.224-0.5-0.5V18h1.5V27z"></path><path fill="%232962ff" d="M27,19.75v0.519c-0.629-0.476-1.403-0.769-2.25-0.769c-2.067,0-3.75,1.683-3.75,3.75 S22.683,27,24.75,27c0.847,0,1.621-0.293,2.25-0.769V26.5c0,0.276,0.224,0.5,0.5,0.5h1v-7.25H27z M24.75,25.5 c-1.24,0-2.25-1.01-2.25-2.25S23.51,21,24.75,21S27,22.01,27,23.25S25.99,25.5,24.75,25.5z"></path><path fill="%232962ff" d="M21.25,18h-8v1.5h5.321L13,26h0.026c-0.163,0.211-0.276,0.463-0.276,0.75V27h7.5 c0.276,0,0.5-0.224,0.5-0.5v-1h-5.321L21,19h-0.026c0.163-0.211,0.276-0.463,0.276-0.75V18z"></path></svg>');
    filter: none !important;
}

.social-link:not(.personal) {
    color: #fff;
}

.social-link.youtube:not(.personal) {
    background-color: #FF0000;
}

.social-link.telegram:not(.personal) {
    background-color: #2AABEE;
}

.social-link.zalo:not(.personal) {
    background-color: #0068FF;
}

.social-link:not(.personal):hover {
    transform: translateY(-5px);
    box-shadow: 0 7px 20px -5px var(--glow-color, rgba(0, 0, 0, 0.5));
}

.social-link.youtube:hover {
    --glow-color: #ff000080;
}

.social-link.telegram:hover {
    --glow-color: #2aabee80;
}

.social-link.zalo:hover {
    --glow-color: #0068ff80;
}

.social-link.personal {
    background-color: transparent;
}

.social-link.personal i {
    filter: none;
}

.social-link.telegram.personal {
    border-color: #2AABEE;
    color: #2AABEE;
}

.social-link.zalo.personal {
    border-color: #0068FF;
    color: #0068FF;
}

.social-link.telegram.personal i {
    filter: invert(58%) sepia(85%) saturate(1512%) hue-rotate(172deg) brightness(97%) contrast(92%);
}

.social-link.personal:hover {
    color: #fff;
    transform: translateY(-5px);
}

.social-link.telegram.personal:hover {
    background-color: #2AABEE;
    box-shadow: 0 7px 20px -5px #2aabee80;
}

.social-link.zalo.personal:hover {
    background-color: #0068FF;
    box-shadow: 0 7px 20px -5px #0068ff80;
}

.social-link.personal:hover i {
    filter: invert(1);
}

footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
    color: var(--subtitle-color);
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.2rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .social-links {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}

.hidden-element {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}