/* ===================================
   RESET
=================================== */

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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#f5f5f5;
    color:#333;
}

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

img{
    max-width:100%;
    display:block;
}

.container{
    width:1400px;
    max-width:95%;
    margin:auto;
}

/* ===================================
   TOP BAR
=================================== */

.topbar{
    background:#111;
    color:#fff;
    font-size:14px;
}

.topbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
}

.topbar .left,
.topbar .right{
    display:flex;
    gap:30px;
    align-items:center;
}

.topbar i{
    color:#ffb300;
    margin-right:5px;
}

/* ===================================
   HEADER
=================================== */

header{
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.1);
}

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

.logo img{
    width:220px;
}

/* ===================================
   SEARCH
=================================== */

.search{
    width:520px;
    display:flex;
}

.search input{
    flex:1;
    height:46px;
    border:2px solid #1565ff;
    border-right:none;
    padding:0 15px;
    border-radius:8px 0 0 8px;
    outline:none;
    font-size:16px;
}

.search button{
    width:60px;
    border:none;
    background:#1565ff;
    color:#fff;
    border-radius:0 8px 8px 0;
    cursor:pointer;
    font-size:18px;
    transition:.3s;
}

.search button:hover{
    background:#0d47d9;
}

/* ===================================
   HEADER RIGHT
=================================== */

.right{
    display:flex;
    gap:30px;
}

.right div{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    font-weight:bold;
    transition:.3s;
}

.right div:hover{
    color:#1565ff;
}

.right i{
    font-size:22px;
    color:#1565ff;
}

/* ===================================
   NAVIGATION
=================================== */

nav{
    background:#fff;
    margin-top:10px;
}

.banner-section{
    width:1400px;
    max-width:95%;
    margin:20px auto;
    display:grid;
    grid-template-columns:250px 1fr 250px;
    gap:20px;
}

/* ===================================
   CATEGORY
=================================== */

.category{
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.category .title{
    background:#1565ff;
    color:#fff;
    padding:16px;
    font-size:18px;
    font-weight:bold;
}

.category ul{
    list-style:none;
}

.category li{
    padding:16px;
    border-bottom:1px solid #eee;
    cursor:pointer;
    transition:.3s;
    font-size:16px;
}

.category li:hover{
    background:#f5f5f5;
    color:#1565ff;
    padding-left:22px;
}

/* ===================================
   SLIDER
=================================== */

.slider{
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.slider img{
    width:100%;
    height:420px;
    object-fit:cover;
}

/* ===================================
   RIGHT BANNER
=================================== */

.right-banner{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.right-banner img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* ===================================
   PRODUCT SECTION
=================================== */

.product-section{
    width:1400px;
    max-width:95%;
    margin:35px auto;
}

.product-header{
    height:60px;
    background:linear-gradient(90deg,#1565ff,#00b0ff);
    display:flex;
    align-items:center;
    border-radius:10px;
    padding:0 20px;
}

.product-header img{
    width:32px;
    height:32px;
    margin-right:10px;
}

.product-header h2{
    color:#fff;
    font-size:24px;
}

/* ===================================
   PRODUCT MENU
=================================== */

.product-menu{
    display:flex;
    justify-content:center;
    gap:15px;
    margin:25px 0;
}

.product-menu button{
    padding:12px 24px;
    background:#2f2f2f;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
    font-weight:bold;
    transition:.3s;
}

.product-menu button:hover{
    background:#1565ff;
}

.product-menu button.active{
    background:#1565ff;
}

/* ===================================
   PRODUCT GRID
=================================== */

.products{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    margin-top:20px;
}

/* ===================================
   PRODUCT CARD
=================================== */

.product-card{
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
    position:relative;
    transition:.3s;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.product-card img{
    width:100%;
    height:200px;
    display:block;
    object-fit:contain;
    object-position:center;
    background:#fff;
}

/* ===================================
   SALE
=================================== */

.sale{
    position:absolute;
    top:10px;
    right:10px;
    background:#ff3b30;
    color:#fff;
    padding:6px 12px;
    border-radius:6px;
    font-size:14px;
    font-weight:bold;
}

/* ===================================
   PRODUCT INFO
=================================== */

.product-info{
    padding:16px;
}

.product-info h3{
    font-size:18px;
    line-height:24px;
    height:50px;
    overflow:hidden;
    margin-bottom:10px;
}

.price-box{
    margin-top:8px;
}

.new-price{
    display:block;
    font-size:26px;
    color:#1565ff;
    font-weight:bold;
}

.old-price{
    display:block;
    margin-top:5px;
    color:#999;
    text-decoration:line-through;
    font-size:16px;
}

.product-info button{
    width:100%;
    margin-top:18px;
    padding:12px;
    border:none;
    border-radius:8px;
    background:#1565ff;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.product-info button:hover{
    background:#0d47d9;
}

/* ===================================
   CART
=================================== */

.cart-container{
    width:1100px;
    max-width:95%;
    margin:40px auto;
}

.cart-title{
    display:flex;
    align-items:center;
    gap:15px;
    margin-bottom:30px;
    font-size:52px;
    font-weight:bold;
    color:#1565ff;
}

.cart-item{
    display:flex;
    align-items:center;
    gap:25px;
    padding:25px;
    margin-bottom:25px;
    background:#fff;
    border-radius:15px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
}

.cart-img{
    width:150px;
    height:150px;
    object-fit:cover;
    border-radius:12px;
    flex-shrink:0;
}

.cart-info{
    flex:1;
}

.cart-info h3{
    font-size:32px;
    color:#222;
    margin-bottom:15px;
}

.cart-info p{
    font-size:20px;
    font-weight:bold;
    color:#1565ff;
    margin-bottom:8px;
}

.quantity{
    display:flex;
    align-items:center;
    gap:15px;
    margin-top:18px;
}

.quantity button:not(.delete-btn){
    width:45px;
    height:45px;
    border:none;
    border-radius:8px;
    background:#1565ff;
    color:#fff;
    font-size:22px;
    font-weight:bold;
    cursor:pointer;
}

.quantity button:hover{
    background:#0d47d9;
}

.quantity span{
    width:35px;
    text-align:center;
    font-size:28px;
    font-weight:bold;
    color:#222;
}

.delete-btn{
    width:90px;
    height:45px;

    border:none;
    border-radius:8px;

    background:#ff3b30;
    color:#fff;

    font-size:18px;
    font-weight:bold;

    cursor:pointer;

    margin-left:15px;
}

.delete-btn:hover{
    background:#d32f2f;
}

.cart-total{
    margin-top:30px;
    padding:25px 35px;
    background:#fff;
    border-radius:15px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);

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

#total-price{
    margin-left:auto;
    font-size:42px;
    font-weight:bold;
    color:#1565ff;
}

/* ===========================
   CHECKOUT
=========================== */

.checkout-container{

    width:700px;

    margin:50px auto;

    background:#fff;

    padding:30px;

    border-radius:12px;

    box-shadow:0 3px 12px rgba(0,0,0,.1);

}

.checkout-container h1{

    color:#1565ff;

    margin-bottom:25px;

    text-align:center;

}

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:bold;

}

.form-group input,

.form-group textarea{

    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:16px;

    outline:none;

}

.form-group input:focus,

.form-group textarea:focus{

    border-color:#1565ff;

}

.form-group textarea{

    height:120px;

    resize:none;

}

#checkout-total{

    margin-top:25px;

    color:#1565ff;

    text-align:right;

}

#order-btn{

    width:100%;

    height:50px;

    margin-top:25px;

    background:#1565ff;

    color:#fff;

    border:none;

    border-radius:8px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

#order-btn:hover{

    background:#0d47d9;

}

/* ===========================
   ORDERS PAGE
=========================== */

.orders-container{

    width:1200px;

    max-width:95%;

    margin:40px auto;

}

.orders-container h1{

    color:#1565ff;

    margin-bottom:25px;

}

.order-box{

    background:#fff;

    border-radius:12px;

    padding:20px;

    margin-bottom:20px;

    box-shadow:0 3px 12px rgba(0,0,0,.12);

}

.order-box h3{

    margin-bottom:12px;

}

.order-box p{

    margin:8px 0;

    font-size:16px;

}

/* ===========================
   ORDERS
=========================== */

.orders-container{
    width:1200px;
    max-width:95%;
    margin:40px auto;
}

.orders-container h1{
    font-size:42px;
    color:#1565ff;
    margin-bottom:30px;
}

/* ===========================
   ORDERS
=========================== */

.order-box{
    background:#fff;
    border-radius:12px;
    padding:25px;
    margin-bottom:25px;
    box-shadow:0 3px 12px rgba(0,0,0,.12);
}

.order-box h2{
    margin-bottom:15px;
    color:#1565ff;
}

.order-box p{
    margin:8px 0;
}

.order-total{
    color:#1565ff;
    margin:18px 0;
}

.order-product{
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:20px;
    padding:15px;
    border:1px solid #eee;
    border-radius:10px;
}

.order-product img{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:10px;
}

.order-product-info h4{
    font-size:22px;
    margin-bottom:10px;
}

.order-product-info p{
    margin:6px 0;
}

.delete-order{

    margin-top:20px;

    background:#ff3b30;

    color:#fff;

    border:none;

    padding:12px 20px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    font-weight:bold;

    transition:.3s;

}

.delete-order:hover{

    background:#d93025;

}

.status{

    color:#1565ff;

    font-weight:bold;

}

.status-btn{

    margin-left:15px;

    padding:12px 20px;

    background:#1565ff;

    color:#fff;

    border:none;

    border-radius:8px;

    cursor:pointer;

    font-weight:bold;

    transition:.3s;

}

.status-btn:hover{

    background:#0d47d9;

}

/* ===========================
   TRẠNG THÁI ĐƠN HÀNG
=========================== */

.status{
    display:inline-block;
    padding:6px 12px;
    margin-left:5px;
    border-radius:20px;
    font-size:14px;
    font-weight:bold;
}

/* Chờ xác nhận */

.status.pending{
    background:#fff3cd;
    color:#d68910;
}

/* Đang giao */

.status.shipping{
    background:#e3f2fd;
    color:#1565ff;
}

/* Hoàn thành */

.status.completed{
    background:#e8f5e9;
    color:#2e7d32;
}

/* ===========================
   BỘ LỌC ĐƠN HÀNG
=========================== */

.order-filter{

    display:flex;

    gap:12px;

    margin-bottom:25px;

    flex-wrap:wrap;

}

.order-filter button{

    padding:12px 20px;

    border:none;

    border-radius:8px;

    background:#2f2f2f;

    color:#fff;

    font-size:15px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}

.order-filter button:hover{

    background:#1565ff;

}

/* ===========================
   TÌM KIẾM ĐƠN HÀNG
=========================== */

.order-search{
    margin-bottom:25px;
}

.order-search input{
    width:100%;
    height:50px;
    padding:0 18px;

    border:2px solid #ddd;
    border-radius:10px;

    outline:none;

    font-size:16px;
}

.order-search input:focus{
    border-color:#1565ff;
}

/* ===========================
   SẮP XẾP ĐƠN HÀNG
=========================== */

.order-sort{
    display:flex;
    gap:12px;
    margin-bottom:25px;
}

.order-sort button{
    padding:12px 22px;

    border:none;
    border-radius:8px;

    background:#2f2f2f;
    color:#fff;

    font-size:15px;
    font-weight:bold;

    cursor:pointer;
    transition:.3s;
}

.order-sort button:hover{
    background:#1565ff;
}

/* ===========================
   THỐNG KÊ ĐƠN HÀNG
=========================== */

.order-stats{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:15px;
    margin-bottom:25px;
}

.stat-box{
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(0,0,0,.10);
}

.stat-box h3{
    margin-bottom:10px;
    font-size:16px;
}

.stat-box p{
    color:#1565ff;
    font-size:28px;
    font-weight:bold;
}

.revenue-box{
    grid-column:span 4;
}

.revenue-box p{
    font-size:32px;
}

/* ===========================
   ADMIN PAGE
=========================== */

.admin-container{

    width:1200px;

    max-width:95%;

    margin:40px auto;

}

.admin-container h1{

    font-size:36px;

    color:#1565ff;

    margin-bottom:8px;

}

.admin-subtitle{

    color:#777;

    margin-bottom:30px;

}

.admin-stats{

    display:grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:20px;

}

.admin-card{

    background:#fff;

    padding:25px;

    border-radius:12px;

    box-shadow:
        0 3px 12px rgba(0,0,0,.10);

}

.admin-card h3{

    margin-bottom:15px;

    font-size:17px;

}

.admin-card p{

    color:#1565ff;

    font-size:32px;

    font-weight:bold;

}

.admin-card.revenue{

    grid-column:span 4;

}

.admin-card.revenue p{

    font-size:36px;

}

/* ===========================
   ADMIN ORDERS
=========================== */

.admin-orders{
    margin-top:30px;
}

.admin-orders h2{
    margin-bottom:20px;
    color:#1565ff;
}

.admin-order{
    background:#fff;
    padding:20px;
    margin-bottom:15px;
    border-radius:12px;
    box-shadow:0 3px 12px rgba(0,0,0,.10);
}

.admin-order-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.admin-order-header h3{
    margin:0;
}

.admin-order-info{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.admin-order-total{
    margin-top:15px;
    color:#1565ff;
    font-size:20px;
    font-weight:bold;
}

/* ===========================
   ADMIN SEARCH & FILTER
=========================== */

.admin-search{
    margin-bottom:15px;
}

.admin-search input{
    width:100%;
    height:50px;

    padding:0 18px;

    border:2px solid #ddd;
    border-radius:10px;

    outline:none;

    font-size:16px;
}

.admin-search input:focus{
    border-color:#1565ff;
}


.admin-filter{
    display:flex;
    gap:10px;
    margin-bottom:20px;
    flex-wrap:wrap;
}

.admin-filter button{
    padding:11px 20px;

    border:none;
    border-radius:8px;

    background:#2f2f2f;
    color:#fff;

    font-weight:bold;
    cursor:pointer;

    transition:.3s;
}

.admin-filter button:hover{
    background:#1565ff;
}

/* ===========================
   ADMIN ORDER ACTIONS
=========================== */

.admin-order-actions{

    display:flex;

    gap:10px;

    margin-top:20px;

}

.admin-status-btn{

    padding:10px 18px;

    border:none;

    border-radius:8px;

    background:#1565ff;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}

.admin-status-btn:hover{

    background:#0d47d9;

}

.admin-delete-btn{

    padding:10px 18px;

    border:none;

    border-radius:8px;

    background:#ff3b30;

    color:#fff;

    font-weight:bold;

    cursor:pointer;

}

.admin-delete-btn:hover{

    background:#d93025;

}

/* =========================
   SẢN PHẨM TRONG ADMIN
========================= */

.admin-product {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
    margin-top: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.admin-product img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.admin-product-info {
    flex: 1;
}

.admin-product-info h3 {
    margin: 0 0 8px;
}

.admin-product-info p {
    margin: 0;
    font-weight: bold;
}

.admin-product button {
    padding: 10px 15px;
    border: none;
    border-radius: 6px;
    background: #ff3b30;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

.admin-refresh-btn {

    padding: 10px 18px;

    margin: 10px 0 20px;

    border: none;

    border-radius: 8px;

    background: #1565ff;

    color: white;

    font-weight: bold;

    cursor: pointer;

}

.admin-refresh-btn:hover {

    background: #0d47d9;

}

/* ===========================
   PRODUCT DETAIL
=========================== */

.product-detail-container{

    width:1200px;

    max-width:95%;

    margin:40px auto;

}

#product-detail{

    background:#fff;

    padding:30px;

    border-radius:12px;

    box-shadow:0 3px 15px rgba(0,0,0,.10);

}

/* ===========================
   PRODUCT DETAIL CONTENT
=========================== */

.detail-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:50px;

    align-items:center;

}

.detail-image img{

    width:100%;

    max-width:500px;

    height:450px;

    object-fit:cover;

    border-radius:12px;

}

.detail-info h1{

    font-size:32px;

    margin-bottom:20px;

}

.detail-price{

    margin-bottom:20px;

}

.detail-price .new-price{

    font-size:32px;

    color:#1565ff;

    font-weight:bold;

}

.detail-price .old-price{

    margin-left:15px;

}

.detail-description{

    line-height:1.7;

    color:#666;

    margin-bottom:25px;

}

.detail-buy{

    padding:15px 30px;

    border:none;

    border-radius:8px;

    background:#1565ff;

    color:#fff;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

}

.detail-buy:hover{

    background:#0d47d9;

}

.quantity-box {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

}

.quantity-box button {

    width: 40px;

    height: 40px;

    border: none;

    border-radius: 6px;

    background: #1565ff;

    color: white;

    font-size: 22px;

    font-weight: bold;

    cursor: pointer;

}

.quantity-box span {

    min-width: 30px;

    text-align: center;

    font-size: 20px;

    font-weight: bold;

}

.detail-navigation {

    display: flex;

    gap: 15px;

    margin-top: 15px;

}


.back-shop-btn,
.view-cart-btn {

    padding: 12px 20px;

    border: none;

    border-radius: 8px;

    font-weight: bold;

    cursor: pointer;

}


.back-shop-btn {

    background: #eee;

    color: #333;

}


.view-cart-btn {

    background: #1565ff;

    color: white;

}


.back-shop-btn:hover {

    background: #ddd;

}


.view-cart-btn:hover {

    background: #0d47d9;

}

.related-title {

    margin-top: 30px;

    margin-bottom: 20px;

}

.related-products {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}

.related-product {

    padding: 15px;

    border: 1px solid #ddd;

    border-radius: 10px;

    text-align: center;

}

.related-product img {

    width: 100%;

    height: 180px;

    object-fit: cover;

    border-radius: 8px;

}

.related-product h3 {

    margin: 12px 0;

}

.related-product button {

    padding: 10px 18px;

    border: none;

    border-radius: 6px;

    background: #1565ff;

    color: white;

    font-weight: bold;

    cursor: pointer;

}

.back-top {

    position: fixed;

    right: 25px;

    bottom: 25px;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: #1565ff;

    color: white;

    font-size: 22px;

    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 3px 10px rgba(0,0,0,.2);

    z-index: 999;

}

.back-top:hover {

    background: #0d47d9;

}

/* =========================
   RESPONSIVE - ĐIỆN THOẠI
========================= */

@media (max-width: 768px) {

    /* TRANG CHỦ */

    #product-list {

     grid-template-columns: repeat(2, 1fr);
 
     gap: 12px;

    }

.product-card {

 width: 100%;

}

.product-card img {
    width: 100%;
    height: 180px;
    display: block;
    object-fit: contain;
    object-position: center;
    background: #fff;
}

    .product-info h3 {

     font-size: 16px;

    }

    .price-box {

     flex-wrap: wrap;

    }

    .new-price {

     font-size: 18px;

    }

    /* HEADER ĐIỆN THOẠI */

    .header-main {
     flex-wrap: wrap;
     gap: 10px;
     padding: 10px;
    }

    .header-logo {
     width: 100%;
     text-align: center;
    }

    .header-logo img {
     max-width: 150px;
     height: auto;
    }

    .header-search {
     width: 100%;
    }

    .header-search input {
     width: 100%;
     box-sizing: border-box;
    }

    .header-actions {
     width: 100%;
     justify-content: space-between;
    }

    .header-actions a {
     font-size: 14px;
    }

    /* DANH MỤC + BANNER ĐIỆN THOẠI */

    .home-content {
     grid-template-columns: 1fr;
     gap: 15px;
    }

    .category-sidebar {
     width: 100%;
    }

    .banner-section {
     width: 100%;
    }

    .banner-section img {
     width: 100%;
     height: auto;
    }

    .product-detail-container {
        width: 95%;
        max-width: 95%;
        margin: 20px auto;
    }

    .detail-content {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .detail-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .detail-info h1 {
        font-size: 25px;
    }

    .detail-price .new-price {
        font-size: 27px;
    }

    .detail-navigation {
        flex-wrap: wrap;
    }

    .related-products {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .related-product img {
        height: 150px;
    }

}

.qr-payment {
    margin-top: 20px;
    padding: 20px;
    text-align: center;
    background: #f5f7fa;
    border-radius: 10px;
}

.qr-payment h3 {
    color: #1565ff;
    margin-bottom: 15px;
}

.qr-image {
    width: 220px;
    height: 220px;
    object-fit: contain;
    border-radius: 8px;
}

.qr-payment p {
    margin-top: 10px;
    color: #555;
}

/* ================= POPUP MUA HÀNG ================= */

.product-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* Nền tối phía sau */
.popup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

/* Khung popup */
.popup-box {
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 850px;
    min-height: 420px;

    margin: 50px auto;

    background: #fff;
    border-radius: 10px;

    padding: 25px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;

    box-sizing: border-box;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Nút đóng */
.popup-close {
    position: absolute;

    top: -15px;
    right: -15px;

    width: 35px;
    height: 35px;

    border: none;
    border-radius: 50%;

    background: #fff;

    font-size: 25px;
    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.popup-close:hover {
    background: #f1f1f1;
}

/* ================= BÊN TRÁI ================= */

.popup-left {
    padding: 10px;
}

.popup-left h2 {
    margin: 0 0 15px;

    font-size: 25px;
    color: #222;
}

.popup-price {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 20px;
}

.popup-price span:first-child {
    color: #ff3333;
    text-decoration: line-through;
    font-size: 18px;
}

.popup-price span:last-child {
    color: #075cff;
    font-size: 22px;
    font-weight: bold;
}

.popup-description {
    line-height: 1.8;
    color: #555;
    font-size: 15px;
}

/* ================= BÊN PHẢI ================= */

.popup-right {
    border: 1px solid #ddd;
    padding: 15px;
}

.popup-right h3 {
    text-align: center;

    font-size: 14px;
    color: #555;

    margin-top: 0;
    margin-bottom: 15px;
}

/* Một dòng thông tin */
.popup-row {
    display: flex;
    align-items: center;

    min-height: 55px;

    border-top: 1px solid #ddd;
}

.popup-row > span {
    width: 45%;
    font-size: 14px;
    color: #555;
}

/* Ô nhập mã giảm giá */
.popup-row input {
    width: 55%;

    padding: 10px;

    border: 1px solid #ddd;
    border-radius: 5px;

    box-sizing: border-box;
}

.popup-row input:focus {
    outline: none;
    border-color: #1769ff;
}

/* ================= SỐ LƯỢNG ================= */

.quantity-box {
    display: flex;
    align-items: center;
    gap: 5px;
}

.quantity-box button {
    width: 30px;
    height: 30px;

    border: none;
    border-radius: 5px;

    background: #eee;

    cursor: pointer;

    font-size: 18px;
}

.quantity-box button:hover {
    background: #ddd;
}

.quantity-box span {
    width: 55px;
    height: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #333;
    color: #fff;

    border-radius: 5px;
}

/* ================= TỔNG TIỀN ================= */

.popup-total {
    border-top: 1px solid #ddd;
    margin-top: 10px;
}

.popup-total p {
    display: flex;
    justify-content: space-between;

    margin: 0;

    padding: 10px 0;

    font-size: 14px;

    border-bottom: 1px solid #eee;
}

.popup-total strong {
    color: #075cff;
}

.popup-total p:nth-child(2) strong {
    color: red;
}

.popup-final {
    font-weight: bold;
}

.popup-final strong {
    font-size: 17px;
}

/* ================= NÚT THANH TOÁN ================= */

.popup-payment {
    width: 100%;

    margin-top: 20px;
    padding: 12px;

    border: none;
    border-radius: 5px;

    background: linear-gradient(
        90deg,
        #153cff,
        #0066ff
    );

    color: #fff;

    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
}

.popup-payment:hover {
    opacity: 0.9;
}

/* ================= YÊU THÍCH ================= */

.popup-favorite {
    width: 100%;

    margin-top: 10px;
    padding: 12px;

    border: none;
    border-radius: 5px;

    background: #fff;

    color: #333;

    text-align: left;

    cursor: pointer;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.popup-favorite:hover {
    background: #f5f5f5;
}

/* ================= ĐIỆN THOẠI ================= */

@media (max-width: 768px) {

    .popup-box {
        width: 94%;

        max-height: 90vh;
        overflow-y: auto;

        margin: 30px auto;

        padding: 15px;

        grid-template-columns: 1fr;
        gap: 15px;
    }

    .popup-left h2 {
        font-size: 20px;
    }

    .popup-right {
        padding: 10px;
    }

    .popup-close {
        top: -10px;
        right: -5px;
    }
}

.popup-balance {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.popup-balance strong {
    color: #ff3333;
    font-weight: bold;
}

/* ================= POPUP THÔNG BÁO ================= */

.notice-popup {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.notice-box {
    position: relative;
    width: 90%;
    max-width: 900px;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid #ddd;
}

.notice-header h3 {
    margin: 0;
    font-size: 18px;
    color: #333;
}

.notice-close {
    border: none;
    background: transparent;
    font-size: 30px;
    color: #777;
    cursor: pointer;
}

.notice-content {
    padding: 18px;
    color: #333;
    line-height: 1.6;
}

.notice-content p {
    margin: 7px 0;
}

.notice-content strong {
    font-weight: 700;
}

.notice-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 18px 18px;
}

.notice-hide {
    border: none;
    background: #f44343;
    color: #fff;
    padding: 10px 18px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

.notice-hide:hover {
    opacity: 0.9;
}

/* ================================
   TRANG ĐĂNG NHẬP / ĐĂNG KÝ
================================ */

.auth-container {
    min-height: 100vh;
    background: #f5f6f8;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 40px 20px;
}

.auth-box {
    width: 100%;
    max-width: 540px;

    background: #ffffff;

    padding: 40px;

    border-radius: 10px;

    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);

    box-sizing: border-box;
}

.auth-box h1 {
    text-align: center;

    color: #1555ff;

    font-size: 30px;

    margin: 0 0 10px;
}

.auth-subtitle {
    text-align: center;

    color: #555;

    margin-bottom: 30px;
}

.auth-box input {
    width: 100%;

    height: 48px;

    box-sizing: border-box;

    border: 1px solid #ddd;

    border-radius: 6px;

    padding: 0 15px;

    margin-bottom: 15px;

    font-size: 15px;

    outline: none;
}

.auth-box input:focus {
    border-color: #1555ff;

    box-shadow: 0 0 0 2px rgba(21, 85, 255, 0.1);
}

.auth-button {
    width: 100%;

    height: 48px;

    border: none;

    border-radius: 6px;

    background: #1555ff;

    color: white;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    margin-top: 5px;
}

.auth-button:hover {
    background: #0d45d8;
}

.auth-link {
    text-align: center;

    margin-top: 25px;

    color: #555;
}

.auth-link a {
    color: #1555ff;

    text-decoration: none;

    font-weight: bold;
}

.auth-link a:hover {
    text-decoration: underline;
}

#user-area {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

#user-area a {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #222 !important;
    text-decoration: none;
    font-weight: 600;
}

#user-area a:hover {
    color: #0066ff !important;
}

/* =================================
   TRANG NẠP TIỀN
================================= */

.deposit-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #f3f7ff, #eef4ff);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 20px;
    box-sizing: border-box;
}

.deposit-box {
    width: 100%;
    max-width: 650px;
    background: #ffffff;
    border-radius: 20px;
    padding: 35px;
    box-sizing: border-box;
    box-shadow: 0 10px 35px rgba(0, 80, 200, 0.12);
    border: 1px solid #e5ecf7;
}

.deposit-box h1 {
    text-align: center;
    color: #1769ff;
    margin: 0 0 15px;
    font-size: 30px;
}

.deposit-balance {
    text-align: center;
    background: #f1f6ff;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 25px;
    color: #555;
}

.deposit-balance strong {
    color: #1769ff;
    font-size: 20px;
}

.deposit-box label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

.deposit-box input {
    width: 100%;
    height: 50px;
    border: 1px solid #d7dfec;
    border-radius: 10px;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 16px;
    outline: none;
    transition: 0.2s;
    margin-bottom: 18px;
}

.deposit-box input:focus {
    border-color: #1769ff;
    box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.1);
}

.deposit-box > button {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #1769ff, #0052d9);
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.deposit-box > button:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(23, 105, 255, 0.25);
}

/* =================================
   THÔNG TIN CHUYỂN KHOẢN
================================= */

.deposit-info {
    display: none;
    margin-top: 25px;
    background: #f8fbff;
    border: 1px solid #dce8fa;
    border-radius: 15px;
    padding: 25px;
}

.deposit-info h3 {
    text-align: center;
    color: #1769ff;
    margin-top: 0;
    margin-bottom: 20px;
}

.deposit-info p {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    margin: 0;
    border-bottom: 1px solid #e7edf5;
    color: #555;
}

.deposit-info p:last-of-type {
    border-bottom: none;
}

.deposit-info strong {
    color: #222;
    text-align: right;
}


/* =================================
   QR CODE
================================= */

.qr-deposit {
    text-align: center;
    margin: 25px 0;
    padding: 20px;
    background: white;
    border-radius: 15px;
    border: 1px solid #e0e7f2;
}

.qr-deposit p {
    display: block;
    border: none;
    padding: 0;
    margin-bottom: 15px;
    color: #333;
}

.deposit-qr {
    width: 230px;
    max-width: 100%;
    display: block;
    margin: auto;
    border-radius: 12px;
    border: 5px solid white;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12);
}


/* =================================
   NÚT ĐÃ CHUYỂN KHOẢN
================================= */

.confirm-btn {
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 10px;
    background: #16a34a;
    color: white;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.2s;
}

.confirm-btn:hover {
    background: #12813a;
    transform: translateY(-2px);
}


/* =================================
   QUAY LẠI
================================= */

.back-home {
    display: block;
    text-align: center;
    margin-top: 25px;
    color: #1769ff;
    text-decoration: none;
    font-weight: 600;
}

.back-home:hover {
    text-decoration: underline;
}


/* =================================
   MOBILE
================================= */

@media (max-width: 600px) {

    .deposit-container {
        padding: 25px 12px;
    }

    .deposit-box {
        padding: 22px 18px;
        border-radius: 15px;
    }

    .deposit-box h1 {
        font-size: 25px;
    }

    .deposit-info {
        padding: 18px;
    }

    .deposit-info p {
        flex-direction: column;
        gap: 5px;
    }

    .deposit-info strong {
        text-align: left;
    }

    .deposit-qr {
        width: 200px;
    }

}

/* =========================================
   ADMIN DASHBOARD - GIAO DIỆN CHUYÊN NGHIỆP
========================================= */

.admin-container,
.admin-orders,
.admin-products,
.admin-section {
    width: 94%;
    max-width: 1400px;
    margin: 25px auto;
    box-sizing: border-box;
}

/* Tiêu đề chính */
.admin-container {
    background: #ffffff;
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    position: relative;
}

.admin-container h1 {
    margin: 0;
    color: #172033;
    font-size: 30px;
}

.admin-subtitle {
    color: #7a8496;
    margin-top: 8px;
}

/* Nút làm mới */
.admin-refresh-btn {
    position: absolute;
    right: 28px;
    top: 28px;
    border: none;
    padding: 11px 18px;
    border-radius: 10px;
    background: #1769ff;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.admin-refresh-btn:hover {
    background: #0d55d9;
    transform: translateY(-1px);
}

/* =========================================
   THỐNG KÊ
========================================= */

.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin-top: 25px;
}

.admin-card {
    background: #f8faff;
    border: 1px solid #e6ebf3;
    border-radius: 15px;
    padding: 20px;
    transition: 0.2s;
}

.admin-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
}

.admin-card h3 {
    margin: 0 0 12px;
    font-size: 15px;
    color: #667085;
}

.admin-card p {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1769ff;
}

.admin-card.revenue {
    background: linear-gradient(135deg, #effaf3, #ffffff);
}

.admin-card.revenue p {
    color: #16a34a;
}

/* =========================================
   DANH SÁCH ĐƠN HÀNG
========================================= */

.admin-orders,
.admin-products,
.admin-section {
    background: #ffffff;
    padding: 28px;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
}

.admin-orders h2,
.admin-products h2,
.admin-section h2 {
    margin-top: 0;
    color: #172033;
    font-size: 22px;
}

/* Tìm kiếm */
.admin-search {
    margin: 18px 0;
}

.admin-search input {
    width: 100%;
    box-sizing: border-box;
    padding: 13px 16px;
    border: 1px solid #d9e0ea;
    border-radius: 10px;
    outline: none;
    font-size: 14px;
}

.admin-search input:focus {
    border-color: #1769ff;
    box-shadow: 0 0 0 3px rgba(23, 105, 255, 0.1);
}

/* Bộ lọc */
.admin-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.admin-filter button {
    border: 1px solid #dce3ed;
    background: #f8fafc;
    padding: 9px 16px;
    border-radius: 9px;
    cursor: pointer;
    font-weight: 600;
    color: #475467;
}

.admin-filter button:hover {
    background: #1769ff;
    color: white;
    border-color: #1769ff;
}

/* =========================================
   QUẢN LÝ SẢN PHẨM - ADMIN PRO
========================================= */

.admin-products {
    margin-top: 30px;
    padding: 30px;
    background: #f8fafc;
    border: 1px solid #e6eaf0;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.06);
}


/* TIÊU ĐỀ */

.admin-products > h2 {
    margin: 0 0 25px;
    color: #111827;
    font-size: 25px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* =========================================
   FORM THÊM SẢN PHẨM
========================================= */

.product-form {
    display: grid;
    grid-template-columns:
        1.3fr
        1fr
        0.7fr
        1.5fr
        0.8fr
        auto;

    gap: 12px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04);
}


.product-form input {
    width: 100%;
    height: 44px;
    padding: 0 14px;

    border: 1px solid #d7dee8;
    border-radius: 9px;

    outline: none;
    box-sizing: border-box;

    background: #ffffff;
    color: #172033;

    font-size: 14px;

    transition:
        border-color .2s,
        box-shadow .2s;
}


.product-form input::placeholder {
    color: #98a2b3;
}


.product-form input:focus {
    border-color: #2563eb;

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.10);
}


/* NÚT THÊM */

.product-form button {
    height: 44px;

    border: none;
    border-radius: 9px;

    padding: 0 20px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 5px 12px
        rgba(37, 99, 235, 0.20);

    transition: all .2s ease;
}


.product-form button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(37, 99, 235, 0.28);
}


/* =========================================
   DANH SÁCH SẢN PHẨM
========================================= */

#admin-product-list {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(500px, 1fr)
        );

    gap: 20px;

    margin-top: 25px;
}


/* =========================================
   CARD
========================================= */

.admin-product {

    position: relative;

    display: flex;

    align-items: center;

    gap: 20px;

    min-height: 180px;

    padding: 20px;

    background: #ffffff;

    border: 1px solid #e5e7eb;

    border-radius: 16px;

    box-shadow:
        0 5px 20px
        rgba(15, 23, 42, 0.06);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}


.admin-product:hover {

    transform:
        translateY(-4px);

    border-color: #cbd5e1;

    box-shadow:
        0 14px 35px
        rgba(15, 23, 42, 0.10);
}


/* =========================================
   ẢNH SẢN PHẨM
========================================= */

.admin-product img {

    width: 150px;
    height: 150px;

    flex-shrink: 0;

    object-fit: cover;

    border-radius: 14px;

    border: 1px solid #e5e7eb;

    background: #f1f5f9;

    box-shadow:
        0 4px 12px
        rgba(0, 0, 0, 0.08);
}


/* =========================================
   THÔNG TIN
========================================= */

.admin-product-info {

    flex: 1;

    min-width: 0;
}


.admin-product-info h3 {

    margin:
        0 0 12px;

    color: #111827;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.3;

    word-break: break-word;
}


.admin-product-info p {

    margin: 7px 0;

    color: #475467;

    font-size: 14px;

    line-height: 1.4;
}


/* GIÁ GỐC */

.admin-product-info p:nth-of-type(1) {

    color: #344054;

    font-weight: 600;
}


/* GIẢM GIÁ */

.admin-product-info p:nth-of-type(2) {

    color: #dc2626;

    font-weight: 700;
}


/* GIÁ BÁN */

.admin-product-info p:nth-of-type(3) {

    color: #2563eb;

    font-size: 17px;

    font-weight: 800;
}


/* KHO */

.admin-product-info p:nth-of-type(4) {

    color: #059669;

    font-weight: 700;
}


/* ĐÃ BÁN */

.admin-product-info p:nth-of-type(5) {

    color: #f97316;

    font-weight: 700;
}


/* =========================================
   NÚT SỬA / XÓA
========================================= */

.admin-product button {

    min-width: 70px;

    border: none;

    border-radius: 9px;

    padding: 10px 13px;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s,
        box-shadow .2s,
        background .2s;
}


.admin-product button:hover {

    transform:
        translateY(-2px);
}


/* SỬA */

.admin-product button:first-of-type {

    background: #2563eb;

    color: white;

    box-shadow:
        0 4px 10px
        rgba(37, 99, 235, 0.18);
}


.admin-product button:first-of-type:hover {

    background: #1d4ed8;

    box-shadow:
        0 7px 16px
        rgba(37, 99, 235, 0.25);
}


/* XÓA */

.admin-product button:last-of-type {

    background: #ef4444;

    color: white;

    box-shadow:
        0 4px 10px
        rgba(239, 68, 68, 0.15);
}


.admin-product button:last-of-type:hover {

    background: #dc2626;

    box-shadow:
        0 7px 16px
        rgba(239, 68, 68, 0.23);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1200px) {

    .product-form {

        grid-template-columns:
            1fr
            1fr
            1fr;
    }

    #admin-product-list {

        grid-template-columns:
            1fr;
    }
}


@media (max-width: 700px) {

    .admin-products {

        padding: 18px;
    }


    .product-form {

        grid-template-columns:
            1fr;
    }


    .admin-product {

        flex-direction: column;

        align-items: stretch;
    }


    .admin-product img {

        width: 100%;

        height: 220px;
    }


    .admin-product button {

        width: 100%;

        margin-top: 5px;
    }
}

/* =========================================
   QUẢN LÝ NẠP TIỀN
========================================= */

.deposit-admin-table {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
}

.deposit-admin-table table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    background: white;
}

.deposit-admin-table th {
    background: #f5f8fc;
    color: #475467;
    font-size: 13px;
    font-weight: 700;
    padding: 14px;
    text-align: left;
    border-bottom: 1px solid #e5eaf1;
}

.deposit-admin-table td {
    padding: 14px;
    border-bottom: 1px solid #edf0f4;
    color: #344054;
    font-size: 14px;
}

.deposit-admin-table tbody tr:hover {
    background: #f8fbff;
}

.deposit-admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* Nút duyệt / từ chối */
.deposit-admin-table button {
    border: none;
    padding: 7px 12px;
    border-radius: 7px;
    cursor: pointer;
    font-weight: 600;
    margin-right: 5px;
}

.deposit-admin-table button:first-child {
    background: #16a34a;
    color: white;
}

.deposit-admin-table button:last-child {
    background: #ef4444;
    color: white;
}

.deposit-admin-table button:hover {
    opacity: 0.85;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 1000px) {

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

    .product-form {
        grid-template-columns: 1fr 1fr;
    }

    #admin-product-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .admin-container,
    .admin-orders,
    .admin-products,
    .admin-section {
        width: 94%;
        padding: 18px;
        margin: 15px auto;
    }

    .admin-container h1 {
        font-size: 23px;
    }

    .admin-refresh-btn {
        position: static;
        margin-top: 15px;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .product-form {
        grid-template-columns: 1fr;
    }

    #admin-product-list {
        grid-template-columns: 1fr;
    }
}

/* =================================
   TRANG TÀI KHOẢN
================================= */

.account-page {
    min-height: 100vh;
    background: #f5f7fb;
    padding: 40px 20px;
}

.account-container {
    max-width: 1100px;
    margin: auto;
}

.account-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.account-header h1 {
    margin: 0 0 8px;
    font-size: 30px;
    color: #172033;
}

.account-header p {
    margin: 0;
    color: #697386;
}

.account-home-btn {
    padding: 12px 20px;
    border-radius: 10px;
    background: #1769ff;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.account-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.account-card,
.account-section {
    background: white;
    border-radius: 18px;
    padding: 25px;
    box-shadow: 0 5px 25px rgba(0,0,0,.06);
}

.account-card h2,
.account-section h2 {
    margin-top: 0;
    color: #172033;
    font-size: 20px;
}

.account-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #edf0f5;
}

.account-row:last-child {
    border-bottom: none;
}

.account-row span {
    color: #737b8c;
}

.account-row strong {
    color: #172033;
}

.balance-card {
    text-align: center;
}

.account-balance {
    font-size: 36px;
    font-weight: 800;
    color: #1769ff;
    margin: 25px 0;
}

.deposit-account-btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 10px;
    background: #16a34a;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.account-section {
    margin-bottom: 20px;
}

.account-empty {
    text-align: center;
    padding: 30px;
    color: #8992a3;
    background: #f8f9fc;
    border-radius: 12px;
}

.account-logout {
    text-align: center;
    margin-top: 25px;
}

.account-logout button {
    border: none;
    padding: 13px 30px;
    border-radius: 10px;
    background: #ef4444;
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.account-logout button:hover {
    opacity: .9;
}


/* MOBILE */

@media (max-width: 700px) {

    .account-page {
        padding: 20px 12px;
    }

    .account-header {
        flex-direction: column;
        align-items: stretch;
    }

    .account-header h1 {
        font-size: 25px;
    }

    .account-home-btn {
        text-align: center;
    }

    .account-grid {
        grid-template-columns: 1fr;
    }

    .account-card,
    .account-section {
        padding: 20px;
    }

    .account-balance {
        font-size: 30px;
    }

}

.out-of-stock-btn {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 10px;
    background: #0465f7;
    color: #6b7280;
    font-size: 15px;
    font-weight: 600;
    cursor: not-allowed;
}

/* =====================================================
   TRANG CHỦ - GIAO DIỆN SHOP PRO
===================================================== */


/* =====================================================
   HEADER
===================================================== */

.main-header {
    background: #f5f8f8;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
}


.main-header .header {
    min-height: 100px;

    display: flex;
    align-items: center;

    gap: 28px;
}


/* LOGO */

.main-header .logo {
    width: 180px;
    flex-shrink: 0;
}


.main-header .logo a {
    display: block;
}


.main-header .logo img {
    display: block;

    max-width: 100%;
    max-height: 75px;

    object-fit: contain;
}


/* =====================================================
   SEARCH
===================================================== */

.main-header .search {
    flex: 1;

    max-width: 520px;

    height: 46px;

    display: flex;

    border: 2px solid #1769ff;

    border-radius: 10px;

    overflow: hidden;

    background: #ffffff;
}


.main-header .search input {
    flex: 1;

    min-width: 0;

    border: none;
    outline: none;

    padding: 0 16px;

    font-size: 14px;

    color: #172033;
}


.main-header .search input::placeholder {
    color: #98a2b3;
}


.main-header .search button {
    width: 58px;

    border: none;

    background: #1769ff;

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    transition: .2s;
}


.main-header .search button:hover {
    background: #0d55d9;
}


/* =====================================================
   HEADER ACTIONS
===================================================== */

.header-actions {
    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 22px;

    white-space: nowrap;
}


.header-account,
.header-balance,
.header-deposit,
.header-cart {

    display: flex;

    align-items: center;

    gap: 9px;

    color: #172033;

    text-decoration: none;

    font-size: 14px;
}


.header-account > i,
.header-balance > i,
.header-deposit > i,
.header-cart > i {

    color: #1769ff;

    font-size: 21px;
}


.header-account-info,
.header-balance > div {

    display: flex;

    flex-direction: column;

    gap: 2px;
}


.header-label {

    color: #667085;

    font-size: 12px;
}


.header-account strong,
.header-balance strong {

    font-size: 14px;
}


.header-account a {

    color: #172033;

    text-decoration: none;
}


.header-account a:hover {

    color: #1769ff;
}


.header-deposit:hover,
.header-cart:hover {

    color: #1769ff;
}


/* GIỎ HÀNG */

.header-cart {
    position: relative;
}


.cart-count {

    min-width: 18px;
    height: 18px;

    padding: 0 4px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: #ef4444;

    color: white;

    border-radius: 20px;

    font-size: 11px;

    font-weight: 700;
}


/* =====================================================
   HOME CONTENT
===================================================== */

.home-content {

    background: #f5f7fa;

    padding:
        20px 0 50px;
}


/* =====================================================
   BANNER
===================================================== */

.banner-section {

    display: grid;

    grid-template-columns:
        260px
        minmax(0, 1fr)
        260px;

    gap: 16px;

    align-items: stretch;

    margin-bottom: 28px;
}


/* =====================================================
   CATEGORY
===================================================== */

.category {

    background: #ffffff;

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 4px 15px
        rgba(15, 23, 42, .06);
}


.category .title {

    height: 52px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 0 18px;

    background:
        linear-gradient(
            135deg,
            #1769ff,
            #0d8bff
        );

    color: white;

    font-weight: 700;

    font-size: 16px;
}


.category ul {

    list-style: none;

    margin: 0;

    padding: 0;
}


.category li {

    min-height: 52px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 18px;

    border-bottom:
        1px solid #edf0f4;

    color: #344054;

    font-size: 14px;

    cursor: pointer;

    transition: .2s;
}


.category li:last-child {

    border-bottom: none;
}


.category li:hover {

    background: #f0f6ff;

    color: #1769ff;

    padding-left: 23px;
}


.category li span {

    font-size: 17px;
}


/* =====================================================
   SLIDER
===================================================== */

.slider{
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.slider img{
    width:100%;
    height:472px;
    object-fit:cover;
}

/* =====================================================
   RIGHT BANNER
===================================================== */

.right-banner{
    width: 100%; 
    height: auto; 
    border-radius: 12px; 
    cursor: pointer;
}

.right-banner img{
    width: 100%; 
    height: auto; 
    border-radius: 12px; 
    cursor: pointer;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

/* =====================================================
   PRODUCT SECTION
===================================================== */

.product-section {

    margin-top: 10px;
}


/* TIÊU ĐỀ */

.product-header {

    min-height: 58px;

    display: flex;

    align-items: center;

    padding: 0 20px;

    margin-bottom: 18px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #1769ff,
            #0ca5f5
        );

    box-shadow:
        0 5px 15px
        rgba(23, 105, 255, .16);
}


.product-title-left {

    display: flex;

    align-items: center;

    gap: 10px;
}


.product-title-left img {

    width: 30px;
    height: 30px;

    object-fit: contain;

    border-radius: 6px;
}


.product-title-left h2 {

    margin: 0;

    color: rgb(239, 242, 243);

    font-size: 21px;

    font-weight: 800;
}


/* =====================================================
   PRODUCT MENU
===================================================== */

.product-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
    margin: 15px 0;
}

.product-menu button {
    width: 100%;
    height: 42px;
    border: none;
    border-radius: 8px;
    background: #242424;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}


.product-menu button:hover {

    background: #1769ff;

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 12px
        rgba(23, 105, 255, .2);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {

    .main-header .header {

        gap: 16px;
    }

    .header-actions {

        gap: 12px;
    }

    .banner-section {

        grid-template-columns:
            220px
            minmax(0, 1fr)
            220px;
    }
}


@media (max-width: 950px) {

    .main-header .header {

        flex-wrap: wrap;

        padding:
            15px 0;
    }

    .main-header .logo {

        width: 150px;
    }

    .main-header .search {

        order: 3;

        width: 100%;

        max-width: none;
    }

    .header-actions {

        margin-left: auto;
    }

    .banner-section {

        grid-template-columns: 200px 1fr;
    }

    .right-banner {

        display: none;
    }
}


@media (max-width: 700px) {

    .home-content {

        padding-top: 12px;
    }

    .banner-section {

        grid-template-columns: 1fr;
    }

    .category {

        order: 2;
    }

    .slider {

        order: 1;
    }

    .right-banner {

        display: grid;

        order: 3;

        grid-template-columns: 1fr 1fr;
    }

    .slider img {

        min-height: 220px;
    }

    .header-actions {

        width: 100%;

        justify-content: space-between;
    }

    .header-account-info,
    .header-balance > div {

        display: none;
    }

    .product-menu {

        justify-content: flex-start;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;
    }

    .product-menu button {

        flex-shrink: 0;
    }
}

/* ===============================
   HEADER CÂN ĐỐI
================================ */

.main-header .header {
    max-width: 1230px;
    margin: auto;
    padding: 14px 0;
}

.main-header .logo {
    width: 170px;
}

.main-header .logo img {
    width: 100%;
    height: 70px;
    object-fit: contain;
}

.header-actions {
    gap: 18px;
}

.header-account,
.header-deposit,
.header-cart {
    min-height: 42px;
}

.header-account > i,
.header-deposit > i,
.header-cart > i {
    font-size: 20px;
}

.header-deposit,
.header-cart {
    font-weight: 600;
}

.header-cart {
    position: relative;
}

.cart-count {
    position: absolute;
    top: -7px;
    right: -10px;
}

.account-logout-btn {
    width: 100%;
    height: 46px;

    margin-top: 20px;

    border: none;
    border-radius: 10px;

    background: #ef4444;
    color: #fff;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;

    transition: .2s;
}

.account-logout-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
}

/* ===============================
   TOP BAR - 3 CHỮ CHẠY
================================ */

.topbar {
    width: 100%;
    height: 34px;
    background: #111;
    color: #f3ef12;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
}

.topbar-left {
    position: absolute;
    left: 10px;
    top: 0;

    height: 34px;

    display: flex;
    align-items: center;

    font-size: 13px;
    font-weight: 500;

    white-space: nowrap;
    z-index: 10;
}

.topbar-running {
    display: flex;
    align-items: center;
    gap: 80px;
    white-space: nowrap;

    position: absolute;
    left: 100%;

    animation: topbarRun 20s linear infinite;
}

.topbar-running span {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

@keyframes topbarRun {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-180%);
    }

}

.category-banner {
    width: 100%;
    margin-top: 10px;
    overflow: hidden;
    border-radius: 10px;
}

.category-banner img {
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:10px;
    box-shadow:0 2px 10px rgba(0,0,0,.1);
}

.slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.5s ease;
}

/* =========================================
   HOẠT ĐỘNG GẦN ĐÂY
========================================= */

.recent-activity {
    width: 100%;
    padding: 35px 0 45px;
    background: #f5f6f8;
}

.recent-container {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


/* =========================================
   KHUNG
========================================= */

.recent-box {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}


/* =========================================
   TIÊU ĐỀ
========================================= */

.recent-title {
    height: 52px;

    display: flex;
    align-items: center;

    padding: 0 22px;

    background: linear-gradient(
        90deg,
        #173cff,
        #087fb8
    );

    color: #fff;

    font-size: 18px;
    font-weight: 700;

    text-transform: uppercase;
}

.recent-title span {
    margin-right: 10px;
    font-size: 21px;
}


/* =========================================
   DANH SÁCH
========================================= */

.recent-list {
    padding: 10px 12px;

    max-height: 335px;

    overflow-y: auto;
}


/* =========================================
   TỪNG DÒNG
========================================= */

.recent-item {
    min-height: 48px;

    margin-bottom: 9px;

    padding: 8px 12px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border: 1px solid #d7d7d7;
    border-radius: 8px;

    background: #fff;

    font-size: 14px;
}


/* Nội dung bên trái */

.recent-content {
    flex: 1;

    min-width: 0;

    color: #444;

    line-height: 1.5;
}


/* Username */

.recent-user {
    color: #159447;
    font-weight: 700;
}


/* Tên sản phẩm */

.recent-product {
    color: #222;
    font-weight: 700;
}


/* Số tiền */

.recent-money {
    color: #064cff;
    font-weight: 700;
}


/* Thời gian */

.recent-time {
    flex-shrink: 0;

    margin-left: 10px;

    padding: 4px 8px;

    border-radius: 5px;

    background: #146cff;

    color: white;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================
   THANH CUỘN
========================================= */

.recent-list::-webkit-scrollbar {
    width: 6px;
}

.recent-list::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 10px;
}

.recent-list::-webkit-scrollbar-track {
    background: #f2f2f2;
}


/* =========================================
   KHI KHÔNG CÓ DỮ LIỆU
========================================= */

.recent-empty {
    padding: 30px 10px;

    text-align: center;

    color: #888;

    font-size: 14px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .recent-container {
        width: 94%;

        grid-template-columns: 1fr;

        gap: 18px;
    }

    .recent-title {
        font-size: 15px;
        height: 48px;
    }

    .recent-item {
        font-size: 13px;
    }

    .recent-time {
        font-size: 10px;
    }
}

/* ================= FOOTER ================= */

.site-footer {
    width: 100%;
    background: #ffffff;
    margin-top: 80px;
    padding-top: 35px;
}

.footer-container {
    max-width: 1180px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;

    gap: 80px;

    padding: 0 20px 45px;
}

.footer-column h3 {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 25px;
    color: #111;
}

.footer-about {
    padding-right: 20px;
}

.footer-logo {
    width: 160px;
    height: auto;
    display: block;
    margin-bottom: 25px;
}

.footer-column p {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

.footer-column p i {
    width: 28px;
    margin-right: 10px;
    color: #173cff;
    font-size: 20px;
}

.footer-about p {
    max-width: 380px;
}


/* THANH BẢN QUYỀN */

.footer-copyright {
    max-width: 1180px;
    margin: 0 auto 20px;

    background: #1428ff;
    color: white;

    min-height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;

    padding: 10px 20px;

    border-radius: 6px;

    font-size: 13px;
}


/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px;
    }

    .footer-about {
        padding-right: 0;
    }

    .footer-logo {
        width: 145px;
    }

    .footer-copyright {
        margin: 0 15px 15px;
        font-size: 12px;
    }

}

/* ===============================
   ẢNH SẢN PHẨM - DESKTOP
================================ */

.product-card img {
    width: 100%;
    height: 200px;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #fff;
}

/* ================================
   FIX ẢNH SẢN PHẨM - KHÔNG CẮT ẢNH
================================ */

.product-card img {
    width: 100% !important;
    height: 200px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    background: #fff !important;
}

/* MOBILE */
@media (max-width: 768px) {
    .product-card img {
        width: 100% !important;
        height: 200px !important;
        display: block !important;
        object-fit: contain !important;
        object-position: center !important;
        background: #fff !important;
    }
}