/* Chung */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #1a0b2e; 
    color: #ffffff;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Header */
.header-wrapper {
    background-color: #120624;
    box-shadow: 0 4px 10px #000000; 
    border-bottom: 1px solid #333333;
    width: 100%;
}

.header {
    width: 1500px;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between; 
    align-items: center;/
}

/* Thêm class này để bọc cụm Logo và Menu */
.header-left {
    display: flex;
    align-items: center;
}

.header .logo { 
    width: 250px;
}

.header .logo img { 
    width: 100%; 
    display: block; 
}

.header .menu { 
    margin-left: 60px;
}

.header .menu ul {
    display: flex; /* Xếp menu nằm ngang */
    align-items: center;
}

.header .menu ul li { 
    margin-right: 40px; 
    font-weight: bold; 
    font-size: 18px; 
}

.header .login-btn { 
    display: flex;
    align-items: center;
}

.header .login-btn span {
    color: #e59344;
    font-weight: bold;
    margin-right: 20px;
    font-size: 16px;
    /* Xóa line-height cũ */
}

.header .login-btn a {
    display: inline-block;
    border: 1px solid #ffffff;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin-left: 10px;
}

.header .login-btn .btn-up {
    background-color: #e59344;
    border: 1px solid #e59344;
    color: #ffffff;
}

.header .login-btn .btn-up:hover {
    background-color: #cd7f32;
}

.header .login-btn .btn-in:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Banner */
.main-content {
    width: 1500px;
    margin: 50px auto;
    overflow: hidden;
}

.banner-left {
    float: left;
    width: 980px;
    height: 560px; 
    border: 5px solid #333333;
    border-radius: 15px;
    box-shadow: 0 0 15px #000000;
    overflow: hidden;
    background-color: #222222;
}

.banner-left img { width: 100%; height: 100%; display: block; }

.top-donate {
    float: right;
    width: 480px;
    background-color: #f7eed7;
    border: 3px solid #b1937b;
    border-radius: 10px;
    color: #333333;
    box-shadow: 0 0 15px #000000;
}

.donate-header {
    background-color: #556b8d;
    color: #ffffff;
    text-align: center;
    padding: 18px 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom: 2px solid #b1937b;
}

.donate-header h3 { margin: 0; font-size: 22px; }
.donate-list { padding: 20px; }
.donate-list ul li { padding: 15px 0; border-bottom: 1px dashed #cccccc; font-size: 16px; font-weight: bold; overflow: hidden; }
.donate-list ul li:last-child { border-bottom: none; }

.donate-list .rank {
    float: left;
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    background-color: #e59344;
    color: #ffffff;
    margin-right: 12px;
    font-size: 15px;
}

.donate-list .amount {
    float: right;
    background-color: #00d2ff;
    color: #000000;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 16px;
}

/* Chữ chạy + thanh hỗ trợ */
.scrolling-text {
    width: 1460px; 
    margin: 30px auto;
    background-color: #ffffff;
    color: #333333;
    padding: 15px 20px;
    border-radius: 25px;
    font-weight: bold;
    border: 2px solid #e2c19e;
    font-size: 20px;
}

.support-sidebar {
    position: fixed;
    top: 30%;
    right: 0; 
    width: 160px;
    background-color: #ffffff;
    color: #333333;
    border-bottom-left-radius: 10px;
    box-shadow: -3px 0 10px rgba(0,0,0,0.8);
    z-index: 999;
    transition: right 0.4s ease; 
}

.toggle-btn {
    position: absolute;
    left: -35px; 
    top: 0;
    width: 35px;
    height: 45px;
    background-color: #dcb670; 
    color: #ffffff;
    line-height: 45px;
    text-align: center;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: -3px 0 5px rgba(0,0,0,0.5);
}

.toggle-btn:hover { background-color: #c9a05b; }
.support-sidebar ul li { border-bottom: 1px solid #eeeeee; }
.support-sidebar ul li a { display: block; padding: 18px; font-size: 15px; font-weight: bold; color: #666666; }
.support-sidebar ul li a:hover { background-color: #f5f5f5; color: #000000; }
.support-sidebar span { margin-right: 8px; font-size: 20px; }

/* Danh sách mô hình */
.section-container {
    width: 1500px;
    margin: 60px auto 20px auto;
    overflow: hidden;
}

.model-card {
    float: left;
    width: 325px;
    margin: 0 25px 30px 25px; 
    background-color: #f7eed7; 
    border: 3px solid #b1937b;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box; 
    color: #333333;
    position: relative; 
}

.model-card img { width: 100%; border-radius: 8px; border: 2px solid #333333; display: block; }
.model-name { text-align: center; font-size: 18px; margin: 15px 0; height: 40px; }
.model-stats { font-size: 14px; color: #555555; padding: 0 10px; border-top: 1px dashed #b1937b; padding-top: 15px; }
.stat-left { float: left; }
.stat-right { float: right; }

/* Hàng mới */
.showcase-container {
    width: 1460px; 
    padding: 20px;
    margin: 80px auto;
    background-color: #f0f6ff; 
    border: 4px solid #b3cdef; 
    border-radius: 20px;
    overflow: hidden;
}

.showcase-header { text-align: center; margin-top: -50px; margin-bottom: 20px; }
.showcase-footer { text-align: center; margin-bottom: -50px; margin-top: 20px; }

.product-list {
    width: 100%;
    overflow: hidden;
}

.product-card {
    float: left;
    width: 320px;
    margin: 0 17px 20px 17px;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 8px #cccccc;
    box-sizing: border-box;
    height: 440px;
    position: relative;
}

.product-card img { 
    width: 100%; 
    height: 220px; 
    border-radius: 5px; 
}

.product-desc { 
    font-size: 15px; 
    color: #333333; 
    font-weight: bold; 
    height: 60px; 
    overflow: hidden; 
    margin: 15px 0; 
}

.product-price {
    color: #d10000;
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;
    background-color: #fff5f5;
    border: 1px solid #ffeaea;
    padding: 8px;
}

.product-status {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    text-align: left;
    color: #d10000;
    font-size: 15px;
    font-weight: bold;
    border-top: 1px dashed #cccccc;
    padding-top: 12px;
}

/* Đăng nhập và đăng ký */
.auth-container {
    width: 500px;
    margin: 40px auto 80px auto; 
    background-color: #f7eed7; 
    border: 3px solid #b1937b;
    border-radius: 10px;
    padding: 30px 40px;
    box-sizing: border-box;
    color: #333333;
    box-shadow: 0 0 15px #000000;
}

.auth-title {
    text-align: center;
    font-size: 26px;
    margin-top: 0;
    margin-bottom: 25px;
    color: #0056b3;
    text-transform: uppercase;
    border-bottom: 2px dashed #b1937b;
    padding-bottom: 15px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 15px;
}

.form-group input {
    width: 100%;
    padding: 12px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 15px;
    box-sizing: border-box; 
}

.auth-btn {
    width: 100%;
    background-color: #e59344;
    color: #ffffff;
    padding: 15px;
    border: 1px solid #cd7f32;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
}

.auth-btn:hover { background-color: #cd7f32; }
.auth-links { text-align: center; margin-top: 20px; font-size: 15px; }
.auth-links a { color: #0056b3; font-weight: bold; text-decoration: underline; }
.auth-links p { margin: 8px 0; }

/* Giỏ hàng */
.cart-container {
    background-color: #f7eed7;
    border: 3px solid #b1937b;
    border-radius: 10px;
    padding: 30px;
    color: #333333;
}

.cart-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.cart-table th, .cart-table td {
    border-bottom: 1px solid #dddddd;
    padding: 15px;
    text-align: center;
}

.cart-table th {
    background-color: #556b8d;
    color: #ffffff;
    font-size: 16px;
}

.cart-summary {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px dashed #b1937b;
    text-align: right;
}

.cart-summary h3 {
    color: #d10000;
    font-size: 24px;
    display: inline-block;
    margin-right: 30px;
}

/* Trang sản phẩm */
.shop-container {
    width: 1500px;
    margin: 0 auto;
    background-color: #eaf1f8; 
    padding: 20px;
    border-radius: 10px;
    border: 2px solid #cdd6e5;
    margin-top: 30px;
    overflow: hidden;
}

.filter-sidebar {
    float: left;
    width: 250px;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

.filter-sidebar h3 {
    color: #0056b3;
    text-align: center;
    font-size: 22px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
    margin-top: 0;
}

.filter-group { margin-bottom: 20px; }
.filter-group label { display: block; font-weight: bold; font-size: 14px; color: #333; margin-bottom: 8px; }
.filter-group input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; font-size: 14px; }

.filter-btn {
    width: 100%;
    background-color: #0056b3;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
}

.filter-btn:hover { background-color: #004494; }

.product-grid {
    width: 100%; 
    overflow: hidden;
}

.gundam-card {
    float: left;
    width: 330px; 
    margin: 0 17px 20px 17px; 
    background: #fff;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 1px solid #eaeaea;
    text-align: center;
    box-sizing: border-box;
}

.gundam-card img { width: 100%; height: 200px; border-radius: 5px; margin-bottom: 10px; }
.g-title { font-weight: bold; font-size: 15px; color: #333; margin: 10px 0; height: 40px; overflow: hidden; }
.g-info { font-size: 13px; color: #555; margin: 5px 0; padding-bottom: 10px; border-bottom: 1px dashed #ccc; }

.g-icons { margin: 10px 0; text-align: center; overflow: hidden; }
.g-icons span { display: inline-block; width: 30px; height: 30px; background-color: #f0f0f0; border-radius: 50%; line-height: 30px; font-size: 14px; margin: 0 3px; }
.g-price { color: #d10000; font-weight: bold; font-size: 18px; margin: 15px 0; }

.buy-btn {
    background-color: #e59344;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    width: 80%;
}

.buy-btn:hover { background-color: #cd7f32; }

/* Footer */
.footer-wrapper {
    width: 100%;
    background-color: #0b0517; 
    padding: 40px 0 20px 0;
    margin-top: 50px;
    border-top: 2px solid #333333; 
    clear: both;
}

.footer { width: 1500px; margin: 0 auto; text-align: center; color: #ffffff; overflow: hidden; }
.footer-logo { width: 300px; margin-bottom: 10px; }
.work-time { font-size: 18px; font-weight: bold; margin-bottom: 25px; color: #eeeeee; }
.footer-line { width: 700px; border: 0; border-top: 1px solid #555555; margin: 0 auto 25px auto; }
.footer-menu { width: 450px; margin: 0 auto; overflow: hidden; }
.footer-menu ul li { float: left; margin: 0 20px; font-weight: bold; font-size: 16px; }
.footer-menu ul li a:hover { color: #e59344; }
.copyright { font-size: 15px; color: #bbbbbb; margin-top: 30px; }


/* Guide */
.guide-container {
    width: 1000px;
    max-width: 90%;
    margin: 40px auto 80px auto; 
    background-color: #f7eed7; /* Kế thừa màu của ô đăng nhập/giỏ hàng */
    border: 3px solid #b1937b;
    border-radius: 10px;
    padding: 40px;
    box-sizing: border-box;
    color: #333333;
    box-shadow: 0 0 15px #000000;
}

.guide-title {
    text-align: center;
    font-size: 28px;
    margin-top: 0;
    margin-bottom: 40px;
    color: #0056b3;
    text-transform: uppercase;
    border-bottom: 2px dashed #b1937b;
    padding-bottom: 15px;
}

.guide-step {
    text-align: center;
    margin-bottom: 50px;
}

.guide-step:last-child {
    margin-bottom: 10px; 
}

.guide-step img {
    max-width: 100%;
    height: auto;
    border: 2px solid #333333;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    margin-bottom: 20px;
}

.guide-step p {
    font-size: 20px;
    font-weight: bold;
    color: #d10000; 
    margin: 0;
}

/* Điện thoại */
@media screen and (max-width: 768px) {
    .header, .main-content, .section-container, .showcase-container, .footer, .scrolling-text, .shop-container, .auth-container {
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    /* Mọi thứ dọc */
    .header .logo { width: 100%; text-align: center; float: none; }
    .header .logo img { width: 60%; margin: 0 auto; }
    .header .menu { width: 100%; margin-left: 0; padding-top: 10px; text-align: center; float: none; }
    .header .menu ul li { float: none; display: inline-block; margin: 0 8px; font-size: 14px; }
    .header .login-btn { float: none; text-align: center; margin-top: 15px; width: 100%; }
    
    /* Chữ chạy */
    .scrolling-text { font-size: 14px; padding: 10px; border-radius: 10px; margin: 10px auto; }

    /* Banner */
    .banner-left { float: none; width: 100%; height: auto; margin-bottom: 20px; }
    .top-donate { float: none; width: 100%; }

    /* Sản phẩm */
    .model-card, .gundam-card, .product-card {
        float: none;
        width: 100%;
        margin: 0 0 20px 0;
        display: block;
        height: auto; 
    }
    
    /* Ảnh */
    .product-card img, .gundam-card img, .model-card img {
        height: auto;
        max-height: 250px;
        object-fit: contain;
    }

    /* Thanh */
    .filter-sidebar { float: none; width: 100%; margin-bottom: 20px; }
    .product-grid { width: 100%; }

    /* Footer */
    .footer-line { width: 100%; }
    .footer-menu { width: 100%; }
    .footer-menu ul li { float: none; display: block; margin: 10px 0; text-align: center; }
    .work-time { font-size: 14px; }
    .footer-logo { width: 80%; }
}

@media screen and (max-width: 768px) {
    .guide-container {
        width: 100% !important;
        padding: 20px;
        margin: 20px auto;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    .guide-title {
        font-size: 22px;
    }
    .guide-step p {
        font-size: 16px;
    }
}