/* --- PHẦN CSS BẠN CUNG CẤP (Đã tối ưu) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Font fallback nếu chưa có file Geomanist */
@font-face {
  font-family: "Geomanist";
  src: url("../public/fonts/Geomanist-Regular.otf") format("opentype");
}

:root {
  --primary: #e33b54;
  --secondary: #2ebd85;
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --border-primary: #e2e8f0;
}

body {
  font-family: "Geomanist", "Inter", sans-serif !important;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  margin: 0; padding: 0;
  overflow-x: hidden;
}

/* Các class từ CSS cũ của bạn (Ant Design overrides, Form, Buttons...) */
.ant-btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid transparent; padding: 6px 15px; border-radius: 6px; transition: 0.3s; font-weight: 500; }
.ant-btn-primary { background: var(--primary); color: white; }
.ant-btn-primary:hover { opacity: 0.9; box-shadow: 0 4px 12px rgba(227, 59, 84, 0.3); }
.ant-btn-default { background: white; border-color: #d9d9d9; color: var(--text-primary); }
.ant-input { width: 100%; padding: 10px 12px; border: 1px solid #d9d9d9; border-radius: 6px; outline: none; transition: 0.3s; }
.ant-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(227, 59, 84, 0.1); }

/* --- CSS LAYOUT MỚI (Landing Page & Album) --- */

/* Navbar */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-primary);
    padding: 15px 0;
}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.nav-flex { display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 24px; font-weight: 800; color: var(--primary); text-decoration: none; letter-spacing: -0.5px; }

/* Hero Section */
.hero { text-align: center; padding: 100px 20px; background: linear-gradient(180deg, #fff0f2 0%, #ffffff 100%); }
.hero h1 { font-size: 48px; color: #1f2937; margin-bottom: 20px; line-height: 1.2; }
.hero p { font-size: 18px; color: var(--text-secondary); margin-bottom: 40px; }

/* Grid Ảnh Album */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    padding: 20px 10px;
}

.photo-card {
    position: relative;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: #f1f5f9;
    border-radius: 4px;
    transition: transform 0.2s;
}
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.photo-card:hover img { transform: scale(1.05); }

/* Icon Tim (Chế độ Pick) */
.action-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.1); opacity: 0; transition: 0.2s;
    cursor: pointer;
}
.photo-card:hover .action-overlay { opacity: 1; }
.photo-card.active .action-overlay { opacity: 1; background: rgba(227, 59, 84, 0.1); border: 3px solid var(--primary); }

.heart-icon {
    position: absolute; top: 10px; right: 10px;
    font-size: 24px; color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    transition: 0.2s;
}
.photo-card.active .heart-icon { color: var(--primary); transform: scale(1.2); }

/* Checkbox (Chế độ View) */
.select-circle {
    position: absolute; top: 10px; right: 10px;
    width: 24px; height: 24px;
    border: 2px solid white; border-radius: 50%;
    background: rgba(0,0,0,0.2);
    transition: 0.2s;
}
.photo-card.active .select-circle {
    background: var(--secondary);
    border-color: var(--secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='16px' height='16px'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Form Styles */
.auth-box { max-width: 400px; margin: 50px auto; padding: 30px; border: 1px solid var(--border-primary); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.form-label { font-weight: 500; margin-bottom: 8px; display: block; font-size: 14px; }
.form-group { margin-bottom: 20px; }