/* Nhúng Font (Giữ nguyên) */
@font-face {
    font-family: 'SVN-Tungsten Bold';
    src: url('fonts/SVN-Tungsten Bold.otf') format('opentype'),
         url('fonts/SVN-Tungsten Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Gotham';
    src: url('fonts/SVN-Gotham Regular.otf') format('opentype'),
         url('fonts/SVN-Gotham Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'SVN-Gotham';
    src: url('fonts/SVN-Gotham Bold.otf') format('opentype'),
         url('fonts/SVN-Gotham Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Áp dụng font chung */
body {
    font-family: 'SVN-Gotham', sans-serif;

    /* Nền mặc định cho mobile (trạng thái nhập liệu) */
    background-image: url('mobile.jpg'); /* <--- NỀN CHO MOBILE (Input State) */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    color: #EBEBEC;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
    padding-top: 100px; /* Padding top mặc định */
    overflow-x: hidden;
    position: relative;
    z-index: 1;
}

/* Thêm quy tắc: Tăng padding-top chỉ trên màn hình mobile */
@media (max-width: 767px) {
    body {
        padding-top: 150px; /* Tăng padding top lên 150px trên mobile */
    }
}


/* Thêm quy tắc mới: Nền cho mobile khi hiển thị kết quả */
body.show-result {
    background-image: url('mobile2.jpg'); /* <--- NỀN CHO MOBILE (Result State) */
}


/* Lớp mờ phủ lên background (Không đổi) */
/*body::before { ... }*/

/* Style cho khối nội dung chính (Container) */
.container {
    background-color: rgba(37, 37, 37, 0.8);
    padding: 10px 10px; /* Padding trên mobile */
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 90%; /* Mobile */
    /* max-width sẽ được điều chỉnh trong media query cho desktop */
    margin: 0 auto;
    margin-bottom: 5px;
    margin-top: 5px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Điều chỉnh khoảng cách giữa các phần tử bên trong container (Mobile) */
.title {
    font-family: 'SVN-Tungsten Bold', sans-serif;
    color: #EBEBEC;
    margin-bottom: 5px; /* Giảm khoảng cách dưới title trên mobile */
    margin-top: 5px;
    font-size: 2em;
    text-transform: uppercase;
}

.headline {
     font-family: 'SVN-Gotham', sans-serif;
     color: #EBEBEC;
     margin-bottom: 5px; /* Giảm khoảng cách dưới headline trên mobile */
    margin-top: 5px;
     font-size: 1.0em;
}

.input-label {
    display: block;
    margin-bottom: 8px;
    font-size: 1.1em;
    color: #BEBEBEC;
    text-align: center;
    width: 100%;
}

#name-input {
    padding: 5px;
    margin-bottom: 15px; /* Giảm khoảng cách dưới input trên mobile */
    margin-top: 5px;
    border: 1px solid #555;
    border-radius: 4px;
    width: calc(100% - 30px);
    font-size: 1em;
    background-color: #333;
    color: #EBEBEC;
    box-sizing: border-box;
    text-align: center;
}

/* Style chung cho các nút */
button {
    font-family: 'SVN-Gotham', sans-serif;
    font-weight: bold;
    border: none;
    font-size: 1.5em;
    margin: 0; /* Quan trọng: giữ margin 0 ở đây và quản lý khoảng cách bằng gap hoặc margin của container cha */
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    text-transform: uppercase;
    color: #EBEBEC;
}

.primary-button {
    background-color: #E51E26;
    margin-top: 10px; /* Khoảng cách trên nút primary trong input section trên mobile */
    margin-bottom: 10px; /* Khoảng cách dưới nút primary trong input section trên mobile */
}

.secondary-button {
    background-color: #1E324C;
}

button:hover,
button:active {
    background-color: #E51E26;
}

.primary-button:hover,
.primary-button:active {
     background-color: #c91a22;
}


.hidden {
    display: none;
}

/* Animation cho ảnh kết quả (Giữ nguyên) */
@keyframes magicSpin {
    0% {
      transform: rotateY(0deg) scale(0.8);
      opacity: 0.5;
    }
    50% {
      transform: rotateY(180deg) scale(1.05);
      opacity: 1;
    }
    100% {
      transform: rotateY(360deg) scale(1);
      opacity: 1;
    }
  }

  .animate-spin {
    animation: magicSpin 1.2s ease-out forwards; /* Thời gian animation */
  }


/* Note Box Styles (Mobile) */
.note-box {
    background-color: #333;
    border: 0.5px solid #555;
    border-radius: 5px;
    padding: 15px;
    margin-top: 15px; /* Giảm khoảng cách trên note box trên mobile */
    font-size: 0.5em;
    color: #BEBEBEC;
    text-align: left;
    font-family: 'SVN-Gotham', sans-serif;
    width: 100%;
    box-sizing: border-box;
}

.note-box strong {
    color: #EBEBEC;
}

/* --- PHẦN STYLE KẾT QUẢ --- */

/* Style cho khu vực hiển thị kết quả - Mobile (Xếp chồng) */
#result-section {
    display: block; /* Item con sẽ xếp chồng */
    text-align: center; /* Căn giữa các item con */
    margin-top: 5px; /* Giảm khoảng cách trên result-section từ 10px xuống 5px */
    width: 100%;
    /* Bỏ gap và flex-wrap của mobile */
}

/* Quy tắc để ẩn result section khi input section hiển thị (ngược lại) */
/* Đã dời quy tắc này lên ngay sau quy tắc block mặc định */
body:not(.show-result) #result-section {
     display: none;
}


/* Container chứa canvas - Mobile (Chiếm phần lớn chiều rộng) */
#prediction-image-container {
    margin: 0 auto 0 auto; /* Đặt khoảng cách dưới là 0px */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Bỏ flex properties của mobile side-by-side */
    max-width: 320px; /* Giới hạn kích thước tối đa hình ảnh trên mobile */
    width: 100%; /* Đảm bảo chiếm đủ chiều rộng có sẵn */
}

/* Style cho canvas bên trong (Giữ nguyên) */
#prediction-canvas {
    max-width: 100%; /* Chiếm tối đa 100% của container */
    height: auto;
    display: block;
    margin: auto;
}

/* Container mới cho Nhóm nút và Lưu ý - Mobile (Nằm dưới canvas) */
.button-and-disclaimer-container {
    display: flex;
    flex-direction: column; /* Các item con (nút và lưu ý) xếp dọc */
    justify-content: center;
    gap: 10px; /* Khoảng cách giữa nhóm nút và lưu ý */
    margin: 0 auto; /* Căn giữa container */
    margin-top: 0; /* Khoảng cách trên đã có ở prediction-image-container margin-bottom (giờ là 0) */
    /* Bỏ flex properties của mobile side-by-side */
    max-width: 150px; /* Giới hạn chiều rộng của cột nút */
    width: 100%;
    align-items: center;
}

/* Nhóm nút Tải và Thử lại - Style chung cho Mobile và Desktop */
.button-group {
    margin: 0;
    display: flex;
    flex-direction: row; /* THAY ĐỔI THÀNH ROW để xếp ngang trên mobile */
    justify-content: center; /* Căn giữa các nút theo chiều ngang */
    gap: 10px; /* Khoảng cách giữa các nút */
    width: 100%; /* Chiếm toàn bộ chiều rộng của container cha */
    align-items: center; /* Căn giữa các nút cá nhân theo chiều dọc */
}

/* Style cho các nút bên trong button-group (icon buttons) - Style chung */
.button-group button {
    font-size: 1.2em; /* Kích thước icon (có thể điều chỉnh trong media query nếu cần) */
    padding: 8px 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto; /* Chiều rộng tự động theo nội dung */
    max-width: 100px; /* Giới hạn chiều rộng tối đa cho nút trên mobile */
    box-sizing: border-box;
}

/* Đảm bảo icon bên trong nút không bị ảnh hưởng bởi click */
.button-group button i {
    pointer-events: none;
}

/* Style cho Share Disclaimer - Style chung */
.share-disclaimer {
    margin-top: 0;
    font-size: 0.85em;
    color: #BEBEBEC;
    font-family: 'SVN-Gotham', sans-serif;
    text-align: center;
    width: 100%;
}

/* Ẩn nút Chia sẻ theo yêu cầu (Giữ nguyên) */
/* Đảm bảo quy tắc này đã bị xóa hoặc ghi chú như hướng dẫn trước */
/*
#shareButton {
    display: none !important;
}
*/


/* Responsive adjustments cho màn hình lớn hơn (desktop) */
@media (min-width: 768px) {
    /* Nền cho desktop (cả trạng thái nhập liệu và kết quả) */
    body {
        background-image: url('desktop.jpg');
    }
     /* Đảm bảo nền desktop không bị ghi đè bởi body.show-result ở mobile */
    body.show-result {
         background-image: url('desktop.jpg'); /* Vẫn sử dụng nền desktop khi kết quả hiển thị trên desktop */
    }

    /* Container (Tăng kích thước cho Desktop) */
    .container {
        padding: 20px 20px; /* Tăng padding trên desktop */
        max-width: 630px; /* Tăng kích thước tối đa khoảng 15% (từ 550px) */
    }

    /* Title, Headline, Input (Desktop) */
    .title { font-size: 2.0em; margin-bottom: 10px; }
    .headline { font-size: 1.2em; margin-bottom: 10px; margin-top: 5px; }
    #name-input { padding: 15px; margin-bottom: 30px; margin-top: 5px; }
    .primary-button { margin-top: 20px; margin-bottom: 20px; }
    .note-box { margin-top: 30px; }

    /* Chỉnh sửa khu vực hiển thị kết quả cho Desktop (Chia cột) */
    #result-section {
        display: flex; /* Kích hoạt Flexbox */
        flex-direction: row; /* Các item (Canvas Container, Button+Disclaimer Container) xếp cạnh nhau */
        align-items: center; /* Đã thay đổi thành center để căn giữa dọc */
        justify-content: center; /* Căn giữa toàn bộ Flex Container theo chiều ngang */
        gap: 0px; /* Khoảng cách giữa các item chính */
        flex-wrap: nowrap; /* Ngăn xuống dòng trên desktop */
        margin-top: 0;
        width: 100%;
    }

    /* Container chứa canvas trên Desktop - Item Flex đầu tiên (Khoảng 80% diện tích có sẵn) */
    #prediction-image-container {
        margin: 0; /* Bỏ margin của mobile */
        flex: 8; /* shorthand cho flex-grow: 8, flex-shrink: 1, flex-basis: 0% */
        max-width: 400px; /* Tăng kích thước tối đa khoảng 15% (from 255px) */
        min-width: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Style cho canvas bên trong prediction-image-container trên Desktop (Giữ nguyên) */
    #prediction-canvas {
       max-width: 100%;
       height: auto;
       display: block;
       margin: auto;
    }

    /* Container mới cho Nhóm nút và Lưu ý - Item Flex thứ hai trên Desktop (Khoảng 20% diện tích có sẵn) */
    .button-and-disclaimer-container {
        gap: 15px; /* Khoảng cách giữa nhóm nút và lưu ý trên desktop */
        margin-top: 0; /* Bỏ margin của mobile */
        flex: 2; /* shorthand cho flex-grow: 2, flex-shrink: 1, flex-basis: 0% */
        max-width: 150px; /* Giữ giới hạn chiều rộng cho cột nút */
        min-width: 0;
        width: 100%;
        display: flex; /* Giữ Flexbox cho nội dung bên trong */
        flex-direction: column; /* Giữ xếp dọc cho nội dung bên trong */
        justify-content: center;
        align-items: center;
    }

    /* Nhóm nút Tải và Thử lại trên Desktop */
    .button-group {
        gap: 15px; /* Tăng khoảng cách giữa các nút trên desktop */
    }

    /* Style cho các nút bên trong button-group trên Desktop */
    .button-group button {
         font-size: 1.5em; /* Tăng kích thước icon trên desktop */
         padding: 10px 15px;
         width: 100%;
         margin: 0;
    }

    /* Style cho Share Disclaimer trên Desktop */
    .share-disclaimer {
        /* Giữ nguyên style chung */
    }
}

/* Quy tắc hiển thị/ẩn các phần dựa trên class 'show-result' trên body (Giữ nguyên) */
body.show-result #input-section {
    display: none;
}

body:not(.show-result) #input-section {
    display: block;
}

body.show-result .title {
    /* display: none; (Đã xóa) */
}

body:not(.show-result) #result-section {
     display: none;
}


/* Share Disclaimer (Đã chuyển vào button-and-disclaimer-container và có style riêng) */


/* Style cho phần chân trang (footer) */
.footer-note {
    margin-top: 10px; /* Khoảng cách trên footer trên mobile */
    padding-top: auto;
    color: #BEBEBEC;
    font-size: 0.5em;
    text-align: center;
    width: 100%;
    max-width: 500px;
    z-index: 1;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .footer-note {
        margin-top: 20px; /* Khôi phục khoảng cách trên footer trên desktop */
    }
}

/* Style cho các link bên trong footer */
.footer-note a.footer-link {
    color: #EBEBEC; /* Đảm bảo màu link */
    text-decoration: none; /* Đảm bảo không có gạch chân mặc định */
    margin: 0 5px;
}

.footer-note a.footer-link:hover {
    text-decoration: underline; /* Gạch chân khi hover */
}