*,::after,::before{box-sizing:inherit;padding:0;margin:0}html{line-height:1.15;box-sizing:border-box;font-family:sans-serif}main{display:block}h1{font-size:2em;margin:.67em 0}a{background-color:transparent}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{line-height:inherit;border:1px solid currentColor}button{overflow:visible;text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;padding:1px 6px}input{overflow:visible}input,textarea{padding:1px}fieldset{border:1px solid currentColor;margin:0 2px}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}select{text-transform:none}textarea{overflow:auto;vertical-align:top}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=color]{background:inherit}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.5}::-webkit-file-upload-button,::-webkit-search-decoration{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}hr{box-sizing:content-box;height:0;color:inherit;overflow:visible}dl,ol,ul{margin:1em 0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{margin:0}b,strong{font-weight:bolder}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border:0}svg:not(:root){overflow:hidden}table{text-indent:0;border-color:inherit}details{display:block}dialog{background-color:inherit;border:solid;color:inherit;display:block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}dialog:not([open]){display:none}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
/* Video Wrapper */
.video-wrapper {
    position: relative;
    align-items: center;
    width: 80%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    perspective: 1500px;
    z-index: 1;
}

/* Video Container */
.video-container {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.video-container:hover {
    transform: scale(1.08) rotateX(2deg) rotateY(2deg);
}

/* Video chính */
.animated-video {
    width: 100%;
    height: 100%;
    border-radius: 25px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    object-fit: cover;
    filter: brightness(1.1) contrast(1.2);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%);
    z-index: 2;
}

/* Hiệu ứng ánh sáng phản chiếu */
.video-reflect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 50%);
    border-radius: 25px;
    mix-blend-mode: overlay;
    animation: reflectShift 8s ease-in-out infinite;
    z-index: 3;
    pointer-events: none;
}

/* Hiệu ứng viền phát sáng đa lớp */
.video-container::before,
.video-container::after {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 35px;
    z-index: 0;
    filter: blur(20px);
    opacity: 0.9;
    transition: opacity 0.5s ease;
}

.video-container::before {
    background: linear-gradient(45deg, #ff00cc, #3333ff, #00ffcc, #ffcc00);
    background-size: 300% 300%;
    animation: neonGlow 5s linear infinite;
}

.video-container::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
    animation: pulseGlow 4s ease-in-out infinite;
}

.video-container:hover::before,
.video-container:hover::after {
    opacity: 1;
}

/* Hiệu ứng sóng năng lượng */
.energy-wave {
    position: absolute;
    inset: 0;
    border-radius: 25px;
    background: transparent;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.3);
    animation: waveExpand 3s infinite ease-out;
    z-index: 1;
    pointer-events: none;
}

/* Hiệu ứng hạt sáng tương tác */
.particles-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    animation: particleFlow 6s infinite ease-in-out;
}

.particle:nth-child(1) {
    width: 12px;
    height: 12px;
    top: 15%;
    left: 25%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    width: 18px;
    height: 18px;
    top: 40%;
    left: 65%;
    animation-delay: 1s;
}

.particle:nth-child(3) {
    width: 10px;
    height: 10px;
    top: 70%;
    left: 35%;
    animation-delay: 2s;
}

.particle:nth-child(4) {
    width: 15px;
    height: 15px;
    top: 85%;
    left: 10%;
    animation-delay: 3s;
}

/* Keyframes */
@keyframes reflectShift {
    0%, 100% { transform: translateX(-20%) translateY(-20%); }
    50% { transform: translateX(20%) translateY(20%); }
}

@keyframes neonGlow {
    0% { background-position: 0% 0%; }
    100% { background-position: 300% 300%; }
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.25; }
    50% { transform: scale(1.05); opacity: 0.5; }
}

@keyframes waveExpand {
    0% { box-shadow: 0 0 40px rgba(255, 255, 255, 0.3); transform: scale(1); opacity: 1; }
    100% { box-shadow: 0 0 80px rgba(255, 255, 255, 0); transform: scale(1.2); opacity: 0; }
}

@keyframes particleFlow {
    0% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-50px) scale(1.3); opacity: 0.4; }
    100% { transform: translateY(0) scale(1); opacity: 0.8; }
}

/* Responsive */
@media (max-width: 768px) {
    .video-wrapper {
        width: 90%;
    }
    .animated-video {
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .video-wrapper {
        width: 95%;
    }
    .animated-video {
        border-radius: 15px;
    }
}