:root{ --safe-bottom: env(safe-area-inset-bottom); }
html,body{ height:100%; }
body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; margin:0; background:#fff; color:#111; }
.container{ max-width:960px; margin:0 auto; padding:12px 12px 84px; }
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.card{ background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.05); }
.card img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:#f7f7f7; }
.card .p{ padding:10px; }
.name{ font-size:16px; line-height:1.25; max-height:40px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.price{ font-weight:700; margin-top:6px; font-size:18px; color:#b91c1c; }
.badge{ display:inline-block; background:#fee2e2; color:#b91c1c; padding:2px 8px; border-radius:999px; font-size:12px; }


/* Thanh tìm kiếm đáy */
.searchbar{ position:fixed; left:0; right:0; bottom:0; padding:8px 12px calc(8px + var(--safe-bottom)); background:#fff; border-top:1px solid #eee; z-index:50; }
.searchbar .wrap{ display:flex; gap:8px; }
.searchbar input{ flex:1; height:48px; border:1px solid #ddd; border-radius:12px; padding:0 14px; font-size:16px; }
.searchbar button{ height:48px; padding:0 14px; border:none; background:#111; color:#fff; border-radius:12px; font-size:16px; }


.header{ position:sticky; top:0; background:#fff; padding:10px 12px; border-bottom:1px solid #eee; z-index:40; }
.h1{ font-size:20px; font-weight:700; }
.actions{ display:flex; gap:8px; margin-top:8px; }
.btn{ display:inline-block; padding:10px 12px; border-radius:12px; border:1px solid #ddd; background:#fff; font-size:16px; }
.btn.primary{ background:#111; color:#fff; border-color:#111; }
.note{ font-size:14px; color:#555; }

/* ===== Header & Top nav ===== */
/* ===== Header & Top nav ===== */
.site-header{ position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid #eee; }
.site-header .brand{ display:flex; align-items:center; gap:10px; padding:10px 12px; cursor:pointer; }
.site-header .brand img{ width:40px; height:40px; border-radius:10px; background:#f5f5f5; }
.brand-text .brand-title{ font-weight:800; font-size:18px; line-height:1.1; }
.brand-text .brand-sub{ font-size:12px; color:#666; }

/* Lưới menu trên cùng */
/* ==== Header top line ==== */
.header-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
}

.auth-menu{
  display:flex;
  gap:12px;
  align-items:center;
}

.auth-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:14px;
  font-weight:600;
  color:#444;
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  background:#f3f4f6;
}

.auth-item:hover{ background:#e5e7eb; }
.auth-item.account{ background:#22c55e; color:#fff; }
.auth-item.login{ background:#a855f7; color:#fff; }

.auth-icon{
  width:16px;
  height:16px;
}

/* ====== NAV (đồng bộ kích thước mục + dropdown) ====== */
/* ====== NAV dropdown ====== */
.nav {
  display: flex;
  justify-content: center;   /* căn giữa */
  flex-wrap: wrap;           /* cho phép xuống dòng */
  gap: 12px;
  align-items: center;
}


.nav .nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  flex: 1 1 auto;    /* cho phép co giãn */
  height: 56px;
  padding: 0 16px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: #6c5ce7;
  text-decoration: none;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.nav .nav-item.home    { background:#111; }
.nav .nav-item.mark    { background:#ff5a72; }
.nav .nav-item.account { background:#22c55e; }
.nav .nav-item.login   { background:#a855f7; }

/* nút dropdown */
.nav .nav-item.dropdown { background:#3b82f6; position:relative; }

/* hộp dropdown */
.nav .dropdown-content{
  display:none;
  position:absolute;
  top:62px; left:0;
  z-index:1000;
  min-width:240px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.15);
  padding:8px;
}

/* mục trong dropdown */
.nav .dropdown-row{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px;
  color:#111; text-decoration:none;
}
.nav .dropdown-row:hover{ background:#f5f7fb; }
.nav .dropdown-row img{ width:24px;height:24px;object-fit:cover;border-radius:6px; }

/* mở dropdown khi hover hoặc focus (mobile tap) */
.nav .nav-item.dropdown:hover .dropdown-content,
.nav .nav-item.dropdown:focus-within .dropdown-content{ display:block; }




/* ===== Card heart button (đánh dấu) ===== */
.card{ position:relative; }
.heart{ position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:50%;
        border:none; background:#fff; color:#f43f5e; font-size:20px; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.heart.active{ background:#f43f5e; color:#fff; }

/* ====== ACTION BAR (4 nút) ====== */
.action-bar{
  position: sticky;         /* dùng sticky để không bị che khi mở bàn phím */
  bottom: calc(64px + env(safe-area-inset-bottom)); /* phía trên ô search */
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(140%) blur(6px);
  border-top: 1px solid #eee;
}

.action-btn{
  height: 56px;
  border: 0;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 700;
  color: #111;
  background: #f2f2f2;
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.action-btn span{ font-size: 15px; }
.action-btn small{
  font-size: 11px;
  font-weight: 600;
  opacity: .9;
  margin-top: 2px;
}

/* màu theo chức năng – tương phản mạnh, dễ nhận biết */
.btn-buy{
  background: #10b981;      /* emerald-500 */
  color: #fff;
}
.btn-buy:active{ filter: brightness(.95); }

.btn-save{
  background: #f59e0b;      /* amber-500 */
  color: #1b1200;
}
.btn-save:active{ filter: brightness(.95); }

.btn-help{
  background: #3b82f6;      /* blue-500 */
  color: #fff;
}
.btn-help:active{ filter: brightness(.95); }

.btn-share{
  background: #e5e7eb;      /* gray-200 */
  color: #111827;
}
.btn-share:active{ filter: brightness(.95); }

/* ====== DOCK SEARCH (bottom fixed) ====== */
.dock-search{
  position: fixed;
  left: 0; right: 0;
  bottom: env(safe-area-inset-bottom);
  z-index: 40;
  display: flex;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #ffffff;
  border-top: 1px solid #eee;
  box-shadow: 0 -2px 10px rgba(0,0,0,.04);
}
.dock-search__input{
  flex: 1;
  height: 48px;
  border-radius: 999px;
  border: 1.5px solid #d4d4d8;   /* zinc-300 */
  padding: 0 16px;
  font-size: 16px;
  background: #fafafa;
}
.dock-search__input::placeholder{ color: #6b7280; }

.dock-search__btn{
  height: 48px;
  min-width: 84px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #111827;      /* near-black for contrast */
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 6px 14px rgba(0,0,0,.08);
}

/* chạm cái là thấy – tăng vùng bấm & focus visible cho accessibility */
.action-btn:focus-visible,
.dock-search__input:focus-visible,
.dock-search__btn:focus-visible{
  outline: 3px solid rgba(56,189,248,.6); /* sky-400 */
  outline-offset: 2px;
  transition: outline-color .2s ease;
}

/* đảm bảo nội dung không bị nút che khuất ở màn hình nhỏ */
@supports (padding: max(0px)){
  .action-bar{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .dock-search{ padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}

/* Nếu cần, tăng khoảng cách dưới body toàn cục ở trang product */
.page-bottom-spacer{ height: 150px; }
@media (min-width:420px){ .page-bottom-spacer{ height: 160px; } }

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

.action-btn, .zalo-share-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  /* background: #f2f2f2; */
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.action-btn.primary { background:#10b981; color:#fff; }
.action-btn:active { filter:brightness(.95); }

.share-wrapper {
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* thêm vào /public/css/style.css */
button.cart{
  border:none;background:#fff;cursor:pointer;
  width:28px;height:28px;border-radius:50%;
  box-shadow:0 1px 2px rgba(0,0,0,.15);
  display:inline-flex;align-items:center;justify-content:center;
}
button.cart:active{transform:scale(0.96)}

/* Nút nổi trên card */
.card { position: relative; }
.card .heart,
.card .cart {
  position: absolute;
  right: 8px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #eee; box-shadow: 0 1px 2px rgba(0,0,0,.15);
  cursor: pointer;
}
.card .heart { top: 8px; }
.card .cart  { top: 48px; }   /* ngay dưới tim, cách ~8px */
.card .heart:active, .card .cart:active { transform: scale(.96); }

/* === CSS (mobile-first) cho /me === */
/* ============ /me page (mobile-first) ============ */
.page-me { --radius:14px; --card: #fff; --line:#eee; --ink:#111; --ink-2:#666; --brand:#6c5ce7; }

.page-me .tabs{
  display:flex; gap:.5rem; overflow-x:auto; padding:.25rem; margin:8px 0 12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  border-bottom:1px solid var(--line);
}
.page-me .tabs::-webkit-scrollbar{ display:none; }
.page-me .tabs a{
  flex:0 0 auto; padding:.5rem .75rem; border-radius:999px; text-decoration:none;
  color:var(--ink-2); background:#f6f7fb; border:1px solid #f0f1f5; font-weight:600; font-size:.95rem;
}
.page-me .tabs a.active{
  background:var(--brand); color:#fff; border-color:transparent; box-shadow:0 4px 14px rgba(108,92,231,.25);
}

.page-me .card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.page-me .card .p{ padding:12px; }

/* Form controls */
.page-me input, .page-me select, .page-me textarea{
  width:100%;   max-width: 350px;   /* giới hạn chiều ngang */
  box-sizing: border-box; /* tính cả padding & border trong width */padding:.62rem .7rem; border:1px solid #e6e6e9; border-radius:10px; background:#fff;
  font:inherit; color:var(--ink); outline:none; transition:border-color .15s, box-shadow .15s;
}
.page-me input:focus, .page-me select:focus, .page-me textarea:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px rgba(108,92,231,.12);
}
.page-me label{ display:block; color:var(--ink-2); font-weight:600; font-size:.92rem; }
.page-me label > input, .page-me label > select, .page-me label > textarea{ margin-top:6px; font-weight:500; }

/* Button */
.page-me .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1rem; border-radius:12px; border:0; background:var(--brand); color:#fff;
  font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(108,92,231,.25);
}
.page-me .btn.small{ padding:.45rem .7rem; font-size:.9rem; box-shadow:none; }
.page-me .btn:active{ transform:translateY(1px); }

/* Grid responsive */
.page-me .grid{ display:grid; gap:12px; }
@media (min-width: 700px){
  .page-me .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* 3 cột cho danh mục sở thích trên màn lớn */
@media (min-width: 1000px){
  .page-me .grid.prefs-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Chip checkbox (sở thích) */
.page-me .chip{
  display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem;
  border:1px solid #e9e9ee; border-radius:999px; background:#fafbff; cursor:pointer; user-select:none;
}
.page-me .chip input{ width:auto; }
.page-me .chip:hover{ border-color:#dcdcef; }

/* Bookmark cards */
.page-me .card article.card{ display:grid; grid-template-columns:92px 1fr; gap:10px; align-items:center; border:none; box-shadow:none; }
.page-me .card article.card img{ width:92px; height:92px; object-fit:cover; border-radius:12px; border:1px solid #eee; }
.page-me .card article.card .name{ font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:4px; }
.page-me .card article.card .price{ color:#e74c3c; font-weight:800; }

/* Orders table */
.page-me table.card{ width:100%; border-collapse:separate; border-spacing:0; }
.page-me table.card thead th{
  text-align:left; font-size:.9rem; color:#888; background:#fafafa; border-bottom:1px solid var(--line);
  padding:.7rem .8rem;
}
.page-me table.card td{ padding:.75rem .8rem; border-top:1px solid var(--line); }
.page-me table.card td.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Spacing utilities */
.page-me .mt-1{ margin-top:.5rem; } .page-me .mt-2{ margin-top:1rem; } .page-me .mt-3{ margin-top:1.5rem; }

/* ===== /me — phiên bản list theo mockup ===== */
.page-me .profile-list{ display:block; }
.page-me .avatar-row{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.page-me .avatar{ width:72px; height:72px; border-radius:50%; object-fit:cover; border:1px solid #eee; }

.page-me .field{ display:block; margin-top:10px; }
.page-me .field > span{ display:block; font-weight:700; font-size:.95rem; color:#333; margin-bottom:6px; }

.page-me .row-2{ display:block; } /* mobile: xếp dọc */
@media (min-width: 720px){
  .page-me .row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .page-me .avatar-row{ align-items:flex-start; }
}

/* danh sách sở thích */
.page-me .pref-list{ list-style:none; padding:0; margin:10px 0; border-top:1px solid #f0f0f2; }
.page-me .pref-item{ border-bottom:1px solid #f0f0f2; }
.page-me .pref-item label{ display:flex; align-items:center; gap:10px; padding:10px 4px; cursor:pointer; }
.page-me .pref-item input{ width:auto; }

/* nút lưu sát đáy card */
.page-me .save-btn{ width:100%; margin-top:14px; }

/* Form trong /me card có padding ngang rộng hơn */
.page-me .card.p {
  padding: 16px;   /* thay cho padding mặc định quá nhỏ */
}


.table { width:100%; border-collapse: collapse; }
.table th, .table td { padding:8px; border-bottom:1px solid #eee; text-align:left; }
.table th { background:#fafafa; font-weight:600; }

.grid { display:grid; }
.btn { background:#6b5bff; color:#fff; border:0; padding:8px 12px; border-radius:8px; cursor:pointer; }
.btn.small { padding:4px 8px; font-size:12px; }
.btn.danger { background:#e74c3c; }
.note { color:#666; font-size:12px; }
.card { background:#fff; border:1px solid #eee; border-radius:12px; }
.p { padding:12px; }

/* Badge trên card ưu đãi */
.card.reward { position: relative; }
.card.reward .badge {
  position: absolute; top:8px; left:8px;
  padding:4px 8px; border-radius:999px; font-size:12px; background:#eee;
}
.card.reward .badge.voucher  { background:#fef3c7; }   /* vàng nhạt */
.card.reward .badge.gift     { background:#e0f2fe; }   /* xanh nhạt */
.card.reward .badge.priority { background:#dcfce7; }   /* lục nhạt */

/* Reward card: chừa chỗ cho nhãn */
.card.reward{ position: relative; }   /* để badge bám theo card */

.card.reward .badge{
  position: absolute; top: 8px; left: 8px; z-index: 1;
}

/* Khi thẻ không có ảnh, nội dung cần padding-top để không bị badge che */
.card.reward img{ display:block; }     /* tránh khoảng trắng ẩn của <img> */
.card.reward .p{ padding-top: 28px; }  /* cao hơn chiều cao badge một chút */


/* ===== Tabs trong /me: luôn hiện đủ, tự xuống hàng ===== */
.tabs--me{
  display: grid !important;                      /* ghi đè flex cũ */
  grid-template-columns: repeat(5, minmax(0,1fr));  /* desktop: 5 cột */
  gap: 8px;
  overflow: visible !important;                  /* bỏ scroll ngang */
}

.tabs--me a{
  flex: unset !important;       /* ngắt ràng buộc flex từ .tabs cũ */
  white-space: nowrap;          /* chữ không bị xuống dòng trong từng nút */
  display: block;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 14px;
  line-height: 1.2;
}

.tabs--me a.active{
  background: #111827;
  color: #fff;
  border-color: #111827;
}

/* Tablet/đt phổ biến: 3 cột -> 2 hàng cho 5 tab */
@media (max-width: 768px){
  .tabs--me{ grid-template-columns: repeat(3, 1fr); }
}

/* Màn rất nhỏ (iPhone SE/Android mini): 2 cột -> 3 hàng */
@media (max-width: 420px){
  .tabs--me{ grid-template-columns: repeat(2, 1fr); }
  .tabs--me a{ padding: 12px 10px; font-size: 15px; }
}