/* ===================================== */
/* CSS THÊM VÀO ĐỂ RESPONSIVE VÀ CĂN GIỮA */
/* ===================================== */

/* Đảm bảo trang chiếm toàn bộ màn hình */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body
{
  background-color:#fff;
/*   background: radial-gradient(at 50% -20%, #908392, #0d060e) fixed; */
}

/* Wrapper chính: Dùng Flexbox để căn giữa tuyệt đối theo cả chiều ngang và dọc */
.main-404-wrapper {
    display: flex;
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center;    /* Căn giữa theo chiều dọc */
    min-height: 100vh;      /* Chiếm trọn chiều cao viewport */
    padding: 20px;          /* Thêm padding an toàn */
    box-sizing: border-box;
}

/* Container cho toàn bộ nội dung (text + svg) */
.container-404 {
    /* Giới hạn kích thước tối đa để SVG không quá lớn trên màn hình desktop */
    max-width: 700px; 
    width: 100%;      
    padding: 20px;
    text-align: center;
}

/* Tạo khoảng cách cho SVG với text */
.row {
    margin-top: 30px;
    margin-bottom: 30px;
}


/* Style cơ bản cho text, bạn có thể chỉnh lại màu sắc, font tùy ý */
.text-center-404 h1 {
    font-size: clamp(3em, 8vw, 5em); /* Responsive font size */
    color: #ff1900;
    margin-bottom: 0.1em;
}

.text-center-404 h2 {
    font-size: clamp(1.2em, 3vw, 1.5em); /* Responsive font size */
    color: #000000;
    margin-bottom: 1em;
}

.btn-back-home {
    display: inline-block;
    padding: 10px 20px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn-back-home:hover {
    background-color: #2980b9;
}

/* ===================================== */
/* CÁC STYLE GỐC CỦA BẠN ĐỂ PHÍA DƯỚI NÀY */
/* ===================================== */

#handboy
{
   animation: swing ease-in-out 1.3s infinite alternate;
    transform-origin: 98% 98%;
    transform-box: fill-box;
    
}


#girllight
{
   animation: swing ease-in-out 1.3s infinite alternate;
    transform-origin: 0% 97%;
    transform-box: fill-box;
}

#hairgirl
{
    animation: swinghair ease-in-out 1.3s infinite alternate;
   transform-origin: 60% 0%;
    transform-box: fill-box;
  
}

#zero
{
  transform-origin:bottom;
  transform-box:fill-box;
  
}

/*************swing************/
@keyframes swing {
    0% { transform: rotate(10deg); }
    100% { transform: rotate(-10deg); }
}


/*************swing hair************/
@keyframes swinghair {
    0% { transform: rotate(6deg); }
    100% { transform: rotate(-6deg); }
}