/* =========================================================
   CODEMARKET — Light theme (ThemeWagon style)
   Nền trắng sạch, accent indigo, CTA xanh lá.
   Giữ nguyên toàn bộ tên class để các trang khác tự đổi giao diện.
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f6f7f9;
    --border: #c4cad3;
    --border-strong: #aeb6c2;
    --text: #0f1729;
    --muted: #6b7280;
    --accent: #4f46e5;       /* indigo - link, giá, hành động */
    --accent-dim: #4338ca;
    --accent-2: #16a34a;     /* green - CTA nổi bật */
    --danger: #ef4444;
    --ok: #16a34a;
    --radius: 12px;
    --dot-red:#FF5F57; --dot-yellow:#FEBC2E; --dot-green:#28C840;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'JetBrains Mono', monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    line-height: 1.5;
    min-height: 100vh;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0 0 .5em; letter-spacing:-.01em; color:var(--text);}
p{margin:0 0 1em;}
.mono{font-family:var(--font-mono);}
.container{max-width:1350px; margin:0 auto; padding:0 0px;}

/* ---------- Topbar (fallback; header.php ghi đè chi tiết) ---------- */
.topbar{
    position:sticky; top:0; z-index:50;
    background:#ffffff;
    border-bottom:1px solid var(--border);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; color:var(--text);}
.logo .prompt{color:var(--accent); font-family:var(--font-mono);}
.nav{display:flex; align-items:center; gap:24px; font-size:14.5px; font-weight:500;}
.nav a{color:var(--muted); transition:color .18s;}
.nav a:hover, .nav a.active{color:var(--text);}
.nav-actions{display:flex; align-items:center; gap:12px;}

/* ---------- Buttons ---------- */
.btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--font-body); font-weight:600; font-size:14px;
    padding:11px 20px; border-radius:10px; border:1px solid transparent;
    cursor:pointer; transition:transform .12s, background .18s, border-color .18s, box-shadow .18s, color .18s;
    white-space:nowrap;
    background:#fff;
    border-color:var(--border);
    color:var(--text);
}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--accent); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(79,70,229,.22);}
.btn-primary:hover{background:var(--accent-dim);}
.btn-accent{background:var(--accent-2); color:#fff; border-color:transparent; box-shadow:0 8px 20px rgba(22,163,74,.2);}
.btn-accent:hover{background:#15803d;}
.btn-outline{background:#fff; border-color:var(--border); color:var(--text);}
.btn-outline:hover{border-color:var(--accent); color:var(--accent);}
.btn-danger{background:#fff; border-color:rgba(239,68,68,.4); color:var(--danger);}
.btn-danger:hover{background:rgba(239,68,68,.08);}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:8px;}
.btn-block{width:100%;}
@keyframes marqueeInfinite {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.logo-carousel {
  overflow: hidden;
}

.logo-carousel .overflow-hidden {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.logo-carousel .logo-marquee {
  display: flex;
  gap: 1.5rem; /* Khoảng cách giữa các logo, tương ứng với gap-4 trong Bootstrap */
  align-items: center;
  flex-shrink: 0;
  min-width: 100%;
  /* Thời gian chạy 25s, bạn có thể tăng giảm tùy ý (số càng nhỏ chạy càng nhanh) */
  animation: marqueeInfinite 35s linear infinite; 
}

/* Tùy chọn: Dừng hiệu ứng khi rê chuột vào khung logo */
.logo-carousel:hover .logo-marquee {
  animation-play-state: paused;
}
.avatar{
    width:36px; height:36px; border-radius:50%; object-fit:cover;
    border:1px solid var(--border); background:var(--surface-2);
}
.avatar-lg{width:96px; height:96px;}

/* ---------- Hero (legacy fallback) ---------- */
.hero{padding:72px 0 56px; position:relative; overflow:hidden;}
.hero .container{position:relative; z-index:1;}
.hero-eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--font-mono); font-size:13px; color:var(--accent);
    background:rgba(79,70,229,.08); border:1px solid rgba(79,70,229,.2);
    padding:8px 16px; border-radius:999px; margin-bottom:22px;
}
.hero h1{font-size:52px; max-width:760px; line-height:1.05; letter-spacing:-.03em;}
.hero h1 span{color:var(--accent);}
.hero p.lead{color:var(--muted); font-size:18px; max-width:640px; margin-top:18px;}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
.hero-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px; margin-top:40px;}
.hero-stat{background:var(--surface-2); border:1px solid var(--border); border-radius:16px; padding:20px 18px;}
.hero-stat b{display:block; font-family:var(--font-display); font-size:28px; color:var(--text);}
.hero-stat span{color:var(--muted); font-size:13.5px;}
/* =========================================================
   HERO 3D BACKGROUND - CRYSTAL & GEOMETRY (LIGHT THEME)
========================================================= */

/* 1. Container chính với góc nhìn 3D (Perspective) */
.hero-modern {
    position: relative;
    overflow: hidden;
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* Ánh sáng hắt từ trung tâm để tạo chiều sâu */
    background: radial-gradient(circle at center 40%, #ffffff 0%, #eef2f6 80%);
    perspective: 1200px; /* Bật chiều sâu không gian 3D */
    padding: 100px 20px 80px;
    z-index: 1;
}

/* 2. Sàn lưới 3D (Grid Floor) trải dài vô tận */
.hero-bg-grid {
    position: absolute;
    width: 200%;
    height: 150%;
    bottom: -40%;
    left: -50%;
    background-image: 
        linear-gradient(rgba(79, 70, 229, 0.08) 2px, transparent 2px),
        linear-gradient(90deg, rgba(79, 70, 229, 0.08) 2px, transparent 2px);
    background-size: 60px 60px;
    /* Bẻ gập lưới xuống làm mặt sàn */
    transform: rotateX(72deg) translateZ(-150px);
    transform-origin: top center;
    animation: floorMove 10s linear infinite;
    z-index: -3;
    /* Mờ dần về phía chân trời */
    mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
    -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 70%);
}

@keyframes floorMove {
    0% { transform: rotateX(72deg) translateY(0) translateZ(-150px); }
    /* 60px bằng đúng kích thước của 1 ô lưới */
    100% { transform: rotateX(72deg) translateY(60px) translateZ(-150px); } 
}

/* 3. KHÔNG GIAN CÁC VẬT THỂ 3D ĐẰNG SAU */
.hero-3d-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    transform-style: preserve-3d;
}

/* Quả cầu thủy tinh (Glass Sphere) nổi khối 3D */
/* Quả cầu Trái Đất 3D */
.shape-sphere {
    position: absolute;
    width: 280px; /* Chỉnh to hơn một chút để nổi bật */
    height: 280px;
    border-radius: 50%;
    top: 5%;
    right: 12%;
    
    /* Dùng ảnh bản đồ Trái Đất trải phẳng */
    background-image: url('https://unpkg.com/three-globe/example/img/earth-blue-marble.jpg');
    
    /* MẸO TOÁN HỌC: Chiều ngang chu vi = Đường kính (280) * Pi (3.14) ≈ 880px */
    /* Set đúng 880px để bản đồ bọc vừa khít 1 vòng tròn 3D */
    background-size: 880px 100%;
    background-repeat: repeat-x;
    
    /* TÙY CHỌN: Nếu bạn muốn Trái Đất có màu Xanh Công Nghệ (Indigo) tiệp với giao diện thay vì màu thực tế, hãy bỏ // ở dòng dưới */
    /* filter: sepia(0.8) hue-rotate(190deg) saturate(2) brightness(0.9); */

    /* Kỹ thuật đổ bóng trong (inset) tạo khối cầu 3D tuyệt đối */
    box-shadow: 
        inset -30px -30px 45px rgba(0, 0, 0, 0.7),     /* Vùng tối (Ban đêm) */
        inset 15px 15px 35px rgba(255, 255, 255, 0.5), /* Điểm bắt sáng (Mặt trời chiếu) */
        0 30px 60px rgba(79, 70, 229, 0.25);           /* Bóng vầng hào quang chói ra ngoài */
    
    /* Gộp 2 hiệu ứng: Bay lơ lửng (cũ) và Tự quay quanh trục (mới) */
    animation: 
        floatSphere 12s infinite alternate ease-in-out,
        spinEarth 25s linear infinite;
}

/* Keyframe xoay bản đồ để tạo cảm giác Trái Đất đang quay */
@keyframes spinEarth {
    0% { background-position: 0 0; }
    100% { background-position: -880px 0; } /* Cuộn đúng 1 vòng chu vi đã tính ở trên */
}

/* Vòng nhẫn 3D (Torus/Ring) xoay trong không gian */
.shape-ring {
    position: absolute;
    width: 220px;
    height: 220px;
    bottom: 15%;
    left: 8%;
    border-radius: 50%;
    border: 35px solid rgba(22, 163, 74, 0.15); /* Màu xanh lá (Accent 2) */
    box-shadow: 
        inset 0 8px 15px rgba(255,255,255,0.9),
        0 15px 30px rgba(22, 163, 74, 0.1),
        inset 0 -8px 15px rgba(0,0,0,0.05);
    animation: spinRing 25s infinite linear;
    transform-style: preserve-3d;
}

/* Tấm kính (Glass Panel) nghiêng xuyên góc */
.shape-glass-panel {
    position: absolute;
    width: 350px;
    height: 450px;
    top: 15%;
    left: 25%;
    background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.1) 100%);
    border: 1px solid rgba(255,255,255,0.9);
    border-radius: 30px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* Xoay mặt kính đổ nghiêng hẳn trong không gian 3D */
    transform: rotateX(50deg) rotateY(-20deg) translateZ(-250px);
    box-shadow: -20px 30px 60px rgba(0,0,0,0.05), inset 0 0 30px rgba(255,255,255,0.6);
    animation: floatGlass 15s infinite alternate ease-in-out;
}

/* Chấm sáng (Flare) tạo cảm giác phép thuật */
.shape-blur-dot {
    position: absolute;
    width: 300px;
    height: 300px;
    background: rgba(236, 72, 153, 0.2);
    border-radius: 50%;
    filter: blur(60px);
    bottom: 0%;
    right: 25%;
    animation: floatSphere 18s infinite alternate-reverse ease-in-out;
}

/* Các Animation cho vật thể 3D */
@keyframes floatSphere {
    0% { transform: translate3d(0, 0, -80px) rotate(0deg); }
    50% { transform: translate3d(-30px, 40px, -30px) rotate(15deg); }
    100% { transform: translate3d(20px, -20px, -100px) rotate(-15deg); }
}

@keyframes spinRing {
    0% { transform: translateZ(-150px) rotateX(65deg) rotateY(25deg) rotateZ(0deg); }
    100% { transform: translateZ(-150px) rotateX(65deg) rotateY(25deg) rotateZ(360deg); }
}

@keyframes floatGlass {
    0% { transform: rotateX(50deg) rotateY(-20deg) translateZ(-250px) translateY(0); }
    100% { transform: rotateX(55deg) rotateY(-15deg) translateZ(-200px) translateY(-40px); }
}

/* 4. ĐỊNH DẠNG CHỮ & NỘI DUNG (GIỮ NGUYÊN MÀU ĐEN, RÕ NÉT) */
.hero-content {
    position: relative;
    z-index: 10; /* Đảm bảo chữ nằm trên cùng */
    max-width: 900px;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 24px;
    color: var(--text); /* Chữ màu đen nguyên bản */
    /* Đổ bóng trắng nhẹ bao quanh để chữ tách rời hoàn toàn khỏi nền 3D */
    text-shadow: 0 4px 20px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,1);
}

.hero-title span {
    color: var(--accent); /* Chữ nhấn màu Indigo */
}

.hero-desc {
    font-size: clamp(16px, 2vw, 18px);
    color: var(--muted);
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.6;
    font-weight: 500;
}
/* ---------- Section ---------- */
.section{padding:48px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap;}
.section-head h2{font-size:24px;}
.section-head .desc{color:var(--muted); font-size:14px;}
.section-head .desc a{color:var(--accent); font-weight:600;}

.tabs{display:flex; gap:6px; background:var(--surface-2); border:1px solid var(--border); padding:4px; border-radius:12px; width:fit-content;}
.tab-btn{padding:9px 18px; border-radius:9px; font-size:14px; font-weight:600; color:var(--muted); cursor:pointer; border:none; background:transparent;}
.tab-btn.active{background:#fff; color:var(--text); box-shadow:0 1px 3px rgba(15,23,41,.1);}

/* ---------- Filter bar ---------- */
.filterbar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:26px;}
.filterbar input[type=text], .filterbar select{
    background:#fff; border:1px solid var(--border); color:var(--text);
    padding:11px 14px; border-radius:10px; font-size:14px; font-family:var(--font-body);
}
.filterbar input[type=text]{flex:1; min-width:220px;}
.filterbar input[type=text]:focus, .filterbar select:focus{outline:none; border-color:var(--accent);}

/* ---------- Grid / Cards ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); gap:22px;}

.card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:0 1px 2px rgba(15,23,41,.04);
    overflow:hidden; transition:transform .18s, border-color .18s, box-shadow .18s;
    display:flex; flex-direction:column;
}
.card:hover{border-color:rgba(79,70,229,.4); transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(79,70,229,.35);}

.win-bar{
    display:flex; align-items:center; gap:6px; padding:12px 14px;
    background:var(--surface-2); border-bottom:1px solid var(--border);
}
.win-dot{width:9px; height:9px; border-radius:50%;}
.win-bar .path{margin-left:8px; font-family:var(--font-mono); font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.card-thumb{aspect-ratio:16/10; background:var(--surface-2); overflow:hidden; position:relative;}
.card-thumb img{width:100%; height:100%; object-fit:cover;}
.card-thumb .noimg{display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); font-family:var(--font-mono); font-size:13px;}
.badge{position:absolute; top:12px; right:12px; font-family:var(--font-mono); font-size:11px; font-weight:700; padding:6px 11px; border-radius:999px;}
.badge-code{background:rgba(79,70,229,.1); color:var(--accent); border:1px solid rgba(79,70,229,.28);}
.badge-web{background:rgba(22,163,74,.12); color:var(--accent-2); border:1px solid rgba(22,163,74,.3);}
.badge-sold{background:rgba(239,68,68,.1); color:var(--danger); border:1px solid rgba(239,68,68,.3);}

.card-body{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1;}
.card-title{font-weight:600; font-size:15.5px; line-height:1.3; color:var(--text);}
.card-desc{color:var(--muted); font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-meta{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:10px; border-top:1px solid var(--border);}
.card-seller{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted);}
.card-seller img{width:20px; height:20px; border-radius:50%; object-fit:cover;}
.price-tag{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:15px;}

/* ---------- Forms ---------- */
.form-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:32px; max-width:640px; margin:0 auto; box-shadow:0 1px 2px rgba(15,23,41,.04);}
.form-card.wide{max-width:820px;}
label{display:block; font-size:13.5px; font-weight:600; margin-bottom:6px; color:var(--text);}
.hint{color:var(--muted); font-size:12.5px; margin-top:5px;}
.form-group{margin-bottom:20px;}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=file], textarea, select{
    width:100%; background:#fff; border:1px solid var(--border); color:var(--text);
    padding:11px 14px; border-radius:10px; font-size:14.5px; font-family:var(--font-body);
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,70,229,.12);}
textarea{resize:vertical; min-height:110px;}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.pw-wrap{position:relative;}
.pw-toggle{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--muted); cursor:pointer; font-size:12px; font-family:var(--font-mono);}

/* domain chip list */
.domain-list{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.domain-chip{font-family:var(--font-mono); font-size:12.5px; background:var(--surface-2); border:1px solid var(--border); padding:6px 10px; border-radius:8px; display:flex; align-items:center; gap:8px;}
.domain-chip button{background:none; border:none; color:var(--danger); cursor:pointer; font-size:13px;}

/* ---------- Alerts ---------- */
.alert{padding:13px 16px; border-radius:10px; font-size:14px; margin-bottom:20px; border:1px solid;}
.alert-success{background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.3); color:#15803d;}
.alert-error{background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.3); color:#dc2626;}
.alert-info{background:rgba(79,70,229,.07); border-color:rgba(79,70,229,.25); color:var(--accent-dim);}

/* ---------- Profile ---------- */
.profile-head{display:flex; gap:22px; align-items:center; padding:32px 0; border-bottom:1px solid var(--border);}
.profile-name{font-size:24px; font-family:var(--font-display); font-weight:700;}
.profile-bio{color:var(--muted); font-size:14px; max-width:600px; margin-top:6px;}
.profile-stats{display:flex; gap:20px; margin-top:10px;}
.profile-stats span{font-size:13px; color:var(--muted);}
.profile-stats b{color:var(--text); font-family:var(--font-mono);}
.detail-grid p, .detail-grid h1, .detail-grid h3, .detail-grid b, .detail-grid a{overflow-wrap:anywhere; word-break:break-word;}
/* ---------- Detail page ---------- */
.detail-grid{display:grid; grid-template-columns:1.3fr .9fr; gap:32px;}
@media(max-width:860px){.detail-grid{grid-template-columns:1fr;}}
/* =========================================================
   CHI TIẾT SẢN PHẨM: Hiển thị Full ảnh (Contain) + Nền Blur
========================================================= */

.detail-thumb {
    position: relative;
    overflow: hidden;
    background: #0f172a; /* Màu nền dự phòng */
    aspect-ratio: 16 / 10; /* Hoặc tỷ lệ khung hình bạn muốn (ví dụ 16/9, 4/3) */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Tạo lớp nền blur mờ tự động từ chính ảnh sản phẩm */
.detail-thumb::before {
    content: "";
    position: absolute;
    inset: -30px; /* Tràn ra ngoài để khi blur không bị lộ viền trắng */
    background-image: var(--detail-blur-bg, none);
    background-size: cover;
    background-position: center;
    filter: blur(25px) brightness(0.6); /* Độ mờ và độ tối của nền */
    z-index: 1;
    pointer-events: none;
}

/* Đảm bảo ảnh hiển thị trọn vẹn (contain) và nổi lên trên lớp nền blur */
.detail-thumb img,
.detail-thumb .carousel-inner img,
.detail-thumb .cm-carousel-inner img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: contain !important; /* Hiển thị full toàn bộ ảnh, không bị cắt */
    background: transparent !important;
}

/* Xử lý nếu có carousel trong trang chi tiết */
.detail-thumb .cm-carousel,
.detail-thumb .carousel {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.detail-grid > *{min-width:0;}
#mainImage{display:block; width:100%; max-width:100%; aspect-ratio:16/10; object-fit:cover;}
.img-nav{position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%; border:none; cursor:pointer; z-index:2; background:rgba(15,23,41,.55); color:#fff; font-size:24px; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .18s, transform .18s;}
.img-nav:hover{background:rgba(15,23,41,.82);}
.img-nav:active{transform:translateY(-50%) scale(.92);}
.img-prev{left:10px;}
.img-next{right:10px;}
.img-counter{position:absolute; bottom:10px; right:10px; z-index:2; background:rgba(15,23,41,.6); color:#fff; font-size:12px; padding:3px 10px; border-radius:999px; font-family:var(--font-mono);}
.thumb-row{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
.thumb-item{width:64px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:border-color .15s, transform .15s;}
.thumb-item:hover{transform:translateY(-2px);}
.thumb-item.active{border-color:var(--accent);}
@media(max-width:860px){.buybox{position:static; margin-top:4px;} body{overflow-x:hidden;}}
@media(max-width:640px){.detail-grid{gap:20px;} .img-nav{width:34px; height:34px; font-size:20px;} .img-prev{left:8px;} .img-next{right:8px;} .thumb-item{width:54px; height:54px;} .buybox{padding:18px;} .buybox .price-tag{font-size:24px;}}
.split-note{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin-top:14px; line-height:1.7;}
.kv{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
.kv b{color:var(--text);}
.credential-box{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:16px; font-family:var(--font-mono); font-size:13px;}
.credential-box .row{display:flex; justify-content:space-between; padding:4px 0;}

/* ---------- Dashboard ---------- */
.dash-layout{display:grid; grid-template-columns:220px 1fr; gap:28px;}
@media(max-width:760px){.dash-layout{grid-template-columns:1fr;}}
.dash-nav{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:10px; height:fit-content; box-shadow:0 1px 2px rgba(15,23,41,.04);}
.dash-nav a{display:block; padding:10px 12px; border-radius:9px; font-size:14px; color:var(--muted); font-weight:500; margin-bottom:2px;}
.dash-nav a:hover{background:var(--surface-2); color:var(--text);}
.dash-nav a.active{background:var(--accent); color:#fff; font-weight:700;}
.stat-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-bottom:28px;}
.stat-card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:0 1px 2px rgba(15,23,41,.04);}
.stat-card .label{color:var(--muted); font-size:12.5px; font-family:var(--font-mono);}
.stat-card .value{font-family:var(--font-display); font-size:26px; margin-top:6px;}

table{width:100%; border-collapse:collapse; font-size:13.5px;}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--border);}
table thead th, table th{border-bottom:2px solid var(--border-strong);}
table tbody tr:hover{background:var(--surface-2);}
th{color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em;}
tr:hover td{background:var(--surface-2);}
.tag{display:inline-block; padding:3px 9px; border-radius:6px; font-size:11.5px; font-family:var(--font-mono);}
.tag-active{background:rgba(22,163,74,.1); color:#15803d;}
.tag-rented, .tag-sold_hidden{background:rgba(239,68,68,.1); color:var(--danger);}
.tag-disabled{background:rgba(107,114,128,.15); color:var(--muted);}

/* ---------- Empty state ---------- */
.empty{text-align:center; padding:60px 20px; color:var(--muted);}
.empty .icon{font-size:34px; margin-bottom:12px; font-family:var(--font-mono); color:var(--border);}

/* ---------- Footer (legacy fallback) ---------- */
.footer{border-top:1px solid var(--border); padding:60px 0 80px; margin-top:80px; color:var(--muted); font-size:13px;}
.footer .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.footer a{color:var(--accent);}

/* ---------- Auth pages ---------- */
.auth-wrap{min-height:calc(100vh - 70px); display:flex; align-items:center; justify-content:center; padding:40px 20px;}

@media(max-width:980px){
    .hero h1{font-size:42px;}
}
@media(max-width:760px){
    .hero h1{font-size:34px;}
    .hero-actions{flex-direction:column; align-items:flex-start;}
    .row-2{grid-template-columns:1fr;}
}


/* ===== The loai code (chips) ===== */
.cat-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.cat-chip { position:relative; cursor:pointer; }
.cat-chip input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.cat-chip span { display:inline-block; padding:8px 14px; border:1px solid var(--border); border-radius:999px; font-size:13px; color:var(--text); background:var(--surface-2); transition:all .15s; user-select:none; }
.cat-chip:hover span { border-color:var(--accent); color:var(--accent); }
.cat-chip input:checked + span { background:var(--accent); border-color:var(--accent); color:#fff; }
.cat-chip input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }

/* ===== Nut lien he mang xa hoi o trang ca nhan ===== */
.profile-socials { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.social-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:10px; font-size:13.5px; font-weight:600; text-decoration:none; color:#fff !important; transition:transform .12s, box-shadow .12s; }
.social-btn:hover { transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.15); }
.social-facebook { background:#1877f2; }
.social-zalo { background:#0068ff; }
.social-telegram { background:#229ED9; }
.social-website { background:var(--accent); }


/* ===== Mobile container padding (thay cho mobile-fixes.css da xoa) ===== */
@media (max-width: 992px){
  .container{ padding-left:16px; padding-right:16px; }
}
@media (max-width: 480px){
  .container{ padding-left:14px; padding-right:14px; }
}