/* ==== Reset + layout ==== */
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #fff;
    font-size: 15px; /* Giảm cỡ chữ mặc định một chút */
}
a { text-decoration: none; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==== Header / Menu ==== */
.site-header {
    background: #357edd;
    position: sticky; top: 0; z-index: 1000;
}

.site-header .container {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px;
}

.site-title { color: #fff; font-weight: 700; letter-spacing: .5px; }

/* Menu chính */
.site-header .menu {
    list-style: none; display: flex; gap: 22px; margin: 0; padding: 0;
}
.site-header .menu li { position: relative; }
.site-header .menu li a {
    color: #fff;
    font-weight: 600;
    font-size: 16px; /* Giảm từ 18px */
    padding: 8px 12px;
    display: block;
}
.site-header .menu li a:hover { text-decoration: underline; }

/* Submenu (dropdown) */    
.site-header .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    padding: 8px 0;
    list-style: none;
    margin: 0;
    min-width: 200px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 9999;
}
.site-header .sub-menu li a {
    display: block;
    padding: 8px 14px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}
.site-header .sub-menu li a:hover {
    background: #f0f4ff;
    color: #357edd;
}

/* Hiện submenu khi hover */
.site-header .menu li:hover > .sub-menu {
    display: block;
}

/* Nút đăng nhập (Cũ - có thể bỏ nếu dùng .actions) */
.login-btn {
    border: 1px solid #fff; padding: 6px 16px; border-radius: 20px;
    color: #fff; font-weight: 600;
}
.login-btn:hover { background: #fff; color: #2c6dd6; }

/* ==== Hero (khối xanh lớn + ô tìm kiếm) ==== */
.hero {
    min-height: 60vh;
    display: grid; place-items: center;
    text-align: center;
    padding: 60px 20px;
    background:
    linear-gradient(140deg, rgba(0,0,0,.05) 20%, transparent 20%),
    linear-gradient(220deg, rgba(0,0,0,.06) 18%, transparent 18%),
    linear-gradient(135deg, #4a89dc, #5d9cec) !important; /* nền xanh */
}
.hero-inner { max-width: 900px; }
.hero h1 { font-size: clamp(24px, 3.8vw, 38px); letter-spacing: 1px; margin: 8px 0 10px; } /* Giảm các giá trị */
.hero p  { opacity: .95; margin: 0 0 26px; }

/* Ô tìm kiếm */
.search-box {
    display: flex; gap: 10px; justify-content: center;
    background: rgba(255,255,255,.18); padding: 14px; border-radius: 10px;
}
.search-box input {
    width: min(520px, 80vw);
    padding: 12px 14px; border: none; border-radius: 6px;
    outline: none; color: #1f2a44;
    font-size: 15px; /* Thêm để đồng bộ */
}
.search-box button {
    padding: 12px 22px; border: none; border-radius: 6px;
    font-weight: 700; cursor: pointer; background: #357edd; color: #fff;
    font-size: 15px; /* Thêm để đồng bộ */
}
.search-box button:hover { background: #285bb5; }

/* ==== Footer ==== */
.site-footer { background: rgba(0,0,0,.12); color: #eaf1ff; }
.site-footer .container { padding: 24px 20px; text-align: center; }

/* ==== Responsive ==== */
@media (max-width: 900px) {
  .site-header .menu { gap: 14px; flex-wrap: wrap; }
  .site-header .menu li a { font-size: 15px; } /* Điều chỉnh cho màn hình nhỏ */
}

/* ==== Actions (Đăng nhập / Đăng ký / Nạp tiền) ==== */
.actions {
    display: flex;
    gap: 12px;
}

.action-btn {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px; /* Giảm từ 14px */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

/* Đăng nhập */
.action-btn.login {
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
}
.action-btn.login:hover {
    background: #fff;
    color: #357edd;
}

/* Đăng ký */
.action-btn.register {
    background: #4caf50;
    border: 2px solid #4caf50;
    color: #fff;
}
.action-btn.register:hover {
    background: #388e3c;
    border-color: #388e3c;
    color: #fff;
}

/* Nạp tiền */
.action-btn.topup {
    background: #ff9800;
    border: 2px solid #ff9800;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(255,152,0,0.6);
}

/* Style riêng cho trang Privacy Policy */
.privacy-page {
    max-width: 900px;
    margin: 40px auto;
    line-height: 1.8;
    font-size: 15px;
    color: #333;
    background: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.privacy-page .page-title {
    font-size: 24px;
    margin-bottom: 20px;
    color: #357edd;
}
/* Font chữ màu đen cho trang Privacy Policy */
.privacy-page {
    color: #000; /* Đặt chữ mặc định màu đen */
}

.privacy-page h1,
.privacy-page h2,
.privacy-page h3,
.privacy-page p,
.privacy-page li {
    color: #000; /* Tất cả tiêu đề, đoạn văn, danh sách */
}
/* Đây là của chính sách bảo mật: end.

/* Tăng độ ưu tiên bằng cách thêm .woocommerce */
.custom-auth-page{
    display:flex;justify-content:center;align-items:center;
    min-height:80vh;padding:40px 16px;background:#f5f7fb;
}
.custom-auth-box{
    width:100%;max-width:440px;background:#fff;
    padding:30px 36px;border-radius:12px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
}
.custom-auth-box h2{
    margin:0 0 20px;font-size:22px;font-weight:700;color:#222;text-align:center;
}

/* ===== Input / nút ===== */
.custom-auth-box label{display:block;margin:0 0 6px;font-weight:600;color:#444;}
.custom-auth-box input[type="text"],
.custom-auth-box input[type="email"],
.custom-auth-box input[type="password"]{
    width:100%;padding:12px 14px;border:1px solid #dcdfe6;border-radius:8px;
    font-size:14px;margin:0 0 14px;transition:border-color .2s, box-shadow .2s;
}
.custom-auth-box input:focus{
    border-color:#357edd;outline:none;box-shadow:0 0 0 3px rgba(53,126,221,.12);
}
.custom-auth-box button[type="submit"],
.custom-auth-box .button, .woocommerce .custom-auth-box .woocommerce-button{
    width:100%;padding:12px 14px;border:0;border-radius:8px;cursor:pointer;
    background:#357edd;color:#fff;font-size:15px;font-weight:700;
    transition:background .25s;
}
.custom-auth-box button:hover{ background:#285bb5; }

/* Các quy tắc khác cũng được thêm .woocommerce */
.custom-auth-box .form-row{margin-top:8px;}
.custom-auth-box .woocommerce-form__label-for-checkbox{display:flex;gap:8px;align-items:center;margin-bottom:12px;}
.custom-auth-box .lost_password{margin-top:10px;text-align:right;}
.custom-auth-box .lost_password a{color:#357edd;text-decoration:none;}
.custom-auth-box .lost_password a:hover{text-decoration:underline;}
.custom-auth-box .social-login{margin-top:18px;text-align:center;}
.custom-auth-box .social-login p{margin:0 0 10px;font-weight:600;color:#555;}
.custom-auth-box .nsl-container .nsl-button{
    width:100%;border-radius:8px;min-height:44px;box-shadow:none;
}
.custom-auth-box .nsl-container .nsl-button-default div{
    height:44px;display:flex;align-items:center;justify-content:center;
}
.custom-auth-box .nsl-container .nsl-button .nsl-button-label-container{
    font-weight:700;
}
.custom-auth-box .nsl-container .nsl-button + .nsl-button{margin-top:10px;}
.page-template-template-login .entry-title,
.page-template-template-register .entry-title{display:none;}

.custom-auth-box .social-login {
    margin-top: 20px; /* Thêm khoảng cách phía trên */
    text-align: center; /* Căn giữa chữ "Hoặc" và nút */
    /* display: flex;  Nếu text-align không đủ, hãy thử bật flexbox và justify-content dưới đây */
    /* justify-content: center; */
    /* flex-direction: column; */
}

.custom-auth-box .social-login p {
    margin-bottom: 15px; /* Tăng khoảng cách dưới chữ "Hoặc" */
    font-weight: 600; /* Làm chữ "Hoặc" đậm hơn (nếu chưa có) */
    color: #555; /* Đặt màu chữ (nếu cần) */
    font-size: 15px; /* Điều chỉnh kích thước chữ */
}

/* Điều chỉnh riêng cho nút Nextend nếu cần */
.custom-auth-box .social-login .nsl-container {
    display: inline-block; /* Đảm bảo nút là inline-block để text-align có tác dụng */
    /* Hoặc sử dụng width và margin auto nếu muốn kiểm soát kích thước */
    /* max-width: 300px; */
    /* width: 100%; */
}

/* Đây là đăng nhập và đăng ký: end

/* Đây là gallery sản phẩm: start
/* Ẩn nút Thêm vào giỏ */
.woocommerce ul.products li.product .button {
  display: none !important;
}

h1.shop-category-title {
  all: unset;       /* reset style cũ */
  display: block;
  text-align: center;
  color: #000 !important;
  font-size: 28px !important;
  font-weight: 600;
  margin: 50px 0 40px !important;
}

/* Ẩn tên sản phẩm */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  display: none !important;
}

/* Ảnh sản phẩm hiển thị full, không crop */
ul.products li.product img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #eee;
  padding: 5px;
}

.woocommerce ul.products {
    margin-left: auto;
    margin-right: auto;
    padding: 0 30px; /* thêm khoảng cách 2 bên */
    max-width: 1600px; /* giới hạn chiều rộng toàn bộ grid */
}

/* Giá sản phẩm */
.woocommerce ul.products li.product .price {
  display: block;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  color: #e53935;
  margin-top: 5px;
}

.woocommerce ul.products li.product {
    width: 22%;         /* mỗi sản phẩm ~22% (4 sản phẩm 1 hàng) */
    margin: 1%;         /* khoảng cách giữa các ô */
    box-sizing: border-box;
}

.woocommerce ul.products li.product img {
    height: auto;
    object-fit: contain; /* giữ nguyên tỉ lệ, không crop */
}

.shop-category-title {
  text-align: center;
  color: #000;
  font-size: 28px;
  font-weight: 600;
  margin: 800px 0; /* tạo khoảng cách trên/dưới */
}

/* Đây là gallery sản phẩm: end

/* Đây là trang sản phẩm: start */

/* =========================
   Trang chi tiết sản phẩm
   ========================= */
.product-container {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin: 30px 0;
}

.product-image {
  flex: 1;
  max-width: 50%;
}
.product-image img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  padding: 5px;
}

.product-summary {
  flex: 1;
  font-size: 16px;
  line-height: 1.6;
  color: #000;
}

.product-summary .price {
  font-size: 22px;
  font-weight: bold;
  color: #e63946;
  margin-bottom: 20px;
}

/* Đây là trang sản phẩm: end */