/* ==========================================================================
   Giao diện frontend web hẹn hò
   Bảng màu: hồng chủ đạo, nền xám nhạt, chữ đậm dễ đọc trên mobile
   ========================================================================== */

:root {
    --pink: #e91e8c;
    --pink-dark: #c2126f;
    --blue: #1f3fbe;
    --amber: #f0ad2e;
    --ink: #2c2c2c;
    --muted: #6d6d6d;
    --line: #e2e2e2;
    --bg: #eeeeee;
    --card: #ffffff;
    --radius: 4px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* Ngăn ngăn kéo menu (nằm ngoài màn hình bên phải) tạo thanh cuộn ngang */
    overflow-x: hidden;
    background: var(--bg);
    color: var(--ink);
    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

.container { width: min(1200px, 100% - 32px); margin-inline: auto; }

/* ------------------------------ Header ------------------------------ */

/* Dải mảnh trên cùng: khẩu hiệu bên trái, hotline bên phải */
.topbar { background: #2b2b32; color: #d8d8de; font-size: 13px; }
.topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; min-height: 36px;
}
.topbar-slogan { text-transform: uppercase; letter-spacing: .4px; }
.topbar-hotline b { color: #fff; }

/* Thanh chính dính khi cuộn: logo - menu - nút hành động */
.site-header {
    background: #fff; position: sticky; top: 0; z-index: 50;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
/* Khi ngăn kéo mở, nâng header lên trên mọi lớp khác (chat nổi đang ở 90) */
.site-header.drawer-active { z-index: 200; }
.header-inner {
    display: flex; align-items: center; gap: 18px; min-height: 66px;
}

.brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pink), #ff6fae);
    color: #fff; font-size: 19px; display: grid; place-items: center;
    box-shadow: 0 3px 10px rgba(233,30,140,.35);
}
.brand-text {
    font-size: 23px; font-weight: 800; color: var(--pink); letter-spacing: -.3px;
}

/* ------------------------------ Menu ------------------------------ */

/* Nút mở menu: ba vạch, chuyển thành dấu X khi ngăn kéo mở */
.nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: 0; cursor: pointer; padding: 8px;
    width: 42px; height: 42px; margin-left: auto; z-index: 130;
}
.nav-toggle-bar {
    display: block; width: 24px; height: 2.5px; border-radius: 2px;
    background: var(--pink); transition: transform .26s ease, opacity .2s ease;
}
.nav-toggle.active .nav-toggle-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.active .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle.active .nav-toggle-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Desktop: ngăn kéo tan biến, các phần tử con trở lại bố cục flex của header */
.nav-drawer { display: contents; }
.drawer-head, .nav-overlay { display: none; }

.nav-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
}
.nav-list > li { position: static; min-width: 0; }
.nav-list > li > a {
    display: block; padding: 10px 13px; border-radius: 8px; color: #40404a;
    font-weight: 600; font-size: 13px; white-space: nowrap; text-decoration: none;
    transition: background .15s, color .15s;
}
.filter-panel {
  scrollbar-width: none; /* Dành cho Firefox */
  -ms-overflow-style: none; /* Dành cho IE/Edge */
}

/* Dành cho Chrome, Safari, Edge, Opera */
.filter-panel::-webkit-scrollbar {
  display: none;
}
.filter-panel {
  /* Thu nhỏ còn 85% kích thước ban đầu */
  transform: scale(0.85); 
  
  /* Cố định tâm thu nhỏ ở góc trên bên trái */
  transform-origin: top left; 
  
  /* Chỉnh lại chiều rộng nếu bị hẫng khoảng trống */
  width: 115%; 
}
.nav-list > li > a:hover { background: #fdf0f7; color: var(--pink); }
.nav-list > li > a.active { color: var(--pink); }

.caret { font-size: 10px; opacity: .6; }

/* Nút hành động bên phải */
.header-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.btn-nav-ghost, .btn-nav-solid {
    padding: 9px 18px; border-radius: 24px; font-weight: 600; font-size: 14px;
    white-space: nowrap; text-decoration: none;
}
.btn-nav-ghost { color: #40404a; border: 1px solid #dcdce2; }
.btn-nav-ghost:hover { border-color: var(--pink); color: var(--pink); text-decoration: none; }
.btn-nav-solid {
    background: linear-gradient(135deg, var(--pink), #ff6fae); color: #fff;
    box-shadow: 0 3px 10px rgba(233,30,140,.3);
}
.btn-nav-solid:hover { text-decoration: none; opacity: .93; }
.btn-account {
    display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
    border-radius: 24px; background: #f6f6f8; color: #40404a; font-weight: 600; font-size: 14px;
}
.btn-account img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.btn-account:hover { background: #fdf0f7; color: var(--pink); text-decoration: none; }

/* Mega menu nhiều cột */
.has-mega .mega-menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-top: 2px solid var(--pink);
    box-shadow: 0 14px 28px rgba(0,0,0,.14); z-index: 40; padding: 22px 0;
}
.has-mega:hover .mega-menu, .has-mega:focus-within .mega-menu { display: block; }
.mega-cols {
    list-style: none; margin: 0; padding: 0;
    columns: 4; column-gap: 28px; max-height: 60vh;
}
.mega-cols li { break-inside: avoid; }
.mega-cols a {
    display: block; padding: 8px 10px; border-radius: 6px; color: #4a4a55;
    font-size: 14px; text-decoration: none;
}
.mega-cols a:hover { background: #fdf0f7; color: var(--pink); }

/* ------------------------------ Hero + tìm kiếm ------------------------------ */

.hero { padding: 26px 0; text-align: center; }
.hero-cta {
    display: inline-block; background: var(--pink); color: #fff;
    padding: 14px 42px; font-size: 26px; font-weight: 800; text-transform: uppercase;
    border: 3px solid var(--pink-dark); text-decoration: none;
}
.hero-cta:hover { background: var(--pink-dark); text-decoration: none; }
select {
  /* 1. Xóa giao diện mặc định của iOS/WebKit */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* 2. Đặt lại style theo ý bạn */
  background-color: #ffffff; /* Màu nền */
  border-radius: 4px; /* Bo góc mong muốn */
  border: 1px solid #ccc;
  padding: 10px 15px;
  color: #333333; /* Màu chữ */
  
  /* 3. Thêm mũi tên tùy chỉnh (vì bước 1 sẽ xóa luôn mũi tên mặc định) */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22293%22%20height%3D%22293%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M236%20129L146.5%20218.5%2057%20129z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.search-bar { background: var(--pink); padding: 14px 0; }
.search-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.search-form input[type=text] { flex: 1 1 480px; padding: 12px 14px; border: 0; }
.search-form select { padding: 12px; border: 0; }
.btn-search { background: var(--blue); color: #fff; border: 0; padding: 12px 34px; font-size: 17px; cursor: pointer; }

/* ------------------------------ Khối nội dung ------------------------------ */

.home-block { padding: 20px 0; }

.block-title {
    text-align: center; color: var(--amber); font-size: 30px; font-style: italic;
    margin: 0 0 8px;
}
.block-title::after {
    content: ""; display: block; width: 120px; height: 2px;
    background: #555; margin: 14px auto 26px;
}
.block-more { text-align: right; margin-top: 12px; }
.btn-more {
    display: inline-block; background: #fff; color: var(--amber); font-weight: 700;
    padding: 14px 34px; border-radius: 40px; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.empty { text-align: center; color: var(--muted); }

/* Lưới thẻ tin */
.card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.post-card { background: var(--card); box-shadow: 0 2px 8px rgba(0,0,0,.1); display: flex; flex-direction: column; }
.post-thumb { position: relative; display: block; }
.post-thumb img { width: 100%; aspect-ratio: 3/4; object-fit: cover; }
.badge-verified {
    position: absolute; top: 10px; left: 0; background: #2fa84f; color: #fff;
    padding: 4px 10px; font-size: 13px;
}
.badge-featured {
    position: absolute; top: 10px; right: 0; background: var(--amber); color: #fff;
    padding: 4px 10px; font-size: 13px;
}
.post-date {
    position: absolute; left: 12px; bottom: 10px; color: #fff; font-style: italic;
    text-shadow: 0 1px 3px rgba(0,0,0,.8); font-size: 14px;
}
.post-body { padding: 14px; }
.post-title { margin: 0 0 8px; font-size: 16px; line-height: 1.5; font-weight: 600; }
.post-title a { color: var(--ink); }
.post-title a:hover { color: var(--pink); }
.place-tag {
    background: var(--pink); color: #fff; padding: 2px 8px; margin-right: 6px;
    font-style: italic; font-size: 14px; display: inline-block;
}
.post-meta { margin: 0; color: var(--muted); font-size: 15px; }
.heart { color: #e12a2a; }

/* Lưới thành viên: thẻ ảnh dọc, bo góc, nổi lên khi rê chuột */

.province-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.province-cloud a { background: #fff; padding: 8px 16px; color: var(--ink); border: 1px solid var(--line); }
.province-cloud span { color: var(--muted); }

.article-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.article-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
    transition: transform .2s ease, box-shadow .2s ease;
}
.article-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.13); }
.article-thumb { display: block; overflow: hidden; }
.article-thumb img {
    aspect-ratio: 16/10; object-fit: cover; width: 100%;
    transition: transform .35s ease;
}
.article-card:hover .article-thumb img { transform: scale(1.05); }
.article-body { padding: 12px 14px 14px; }
.article-card h3 { font-size: 16.5px; margin: 0 0 6px; line-height: 1.4; }
.article-card h3 a { color: var(--ink); }
.article-card h3 a:hover { color: var(--pink); }
.article-card p { margin: 0; color: var(--muted); font-size: 14px; }
.article-meta { font-size: 13px; margin-bottom: 6px !important; }
.article-meta span {
    background: #fdf0f7; color: var(--pink); padding: 2px 9px;
    border-radius: 10px; margin-right: 6px; font-size: 12px;
}

/* ------------------------------ Trang trong ------------------------------ */

.page-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; padding: 24px 0; }
.content-box { background: #fff; padding: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.sidebar-box { background: #fff; padding: 20px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* Khu vực dạng thẻ nhiều cột: gọn hơn danh sách dọc, cột bên khỏi dài quá */
.area-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.area-chips a {
    padding: 6px 12px; border-radius: 999px;
    background: #f4f5f7; color: var(--muted);
    font-size: 13px; font-weight: 600; transition: .15s;
}
.area-chips a:hover { background: #fdeef6; color: var(--pink); text-decoration: none; }
.sidebar-more { font-size: 13.5px; font-weight: 700; color: var(--pink); }

/* Cột bên bám theo khi cuộn để không bỏ trống nửa dưới */
@media (min-width: 901px) {
    .page-layout > aside { position: sticky; top: 130px; align-self: start; }
}
.sidebar-box h3 { color: var(--pink); text-align: center; margin: 0 0 6px; }
.sidebar-box h3::after { content: ""; display: block; height: 1px; background: var(--pink); margin: 10px 0 14px; }
.sidebar-list { list-style: none; margin: 0; padding: 0; }
.sidebar-list li { border-bottom: 1px solid var(--line); }
.sidebar-list a { display: block; padding: 10px 0; color: #444; }

/* ------------------------------ Form đăng tin ------------------------------ */

.form-head {
    background: linear-gradient(135deg, var(--pink), var(--pink-dark));
    color: #fff; padding: 26px 28px; border-radius: 12px 12px 0 0;
}
.form-head h1 { margin: 0 0 6px; font-size: 26px; }
.form-head p { margin: 0; opacity: .92; font-size: 15px; }

.post-form .alert { margin: 16px 0 0; }

/* mỗi nhóm trường là một thẻ trắng, có số thứ tự ở tiêu đề */
.form-card {
    background: #fff; padding: 24px 28px; margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.form-card:last-of-type { border-radius: 0 0 12px 12px; margin-bottom: 20px; }
.form-card-title {
    display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
    font-size: 19px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.form-card-title span {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    background: var(--pink); color: #fff; font-size: 15px;
    display: grid; place-items: center;
}

/* mỗi trường tự quản khoảng cách, không phụ thuộc thẻ label rời rạc */
.post-form .field { margin-bottom: 18px; }
.post-form .field:last-child { margin-bottom: 0; }
.post-form .field > label { display: block; font-weight: 700; margin: 0 0 8px; }
.post-form .field > label em { color: #e12a2a; font-style: normal; }
.post-form .field small { display: block; color: var(--muted); font-size: 13px; margin-top: 6px; }
.field-note {
    margin: 0; background: #fff8e6; border-left: 4px solid var(--amber);
    padding: 10px 14px; color: #6b5a2a; font-size: 14px;
}

.post-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.post-form .form-row.three { grid-template-columns: repeat(3, 1fr); }
.post-form .form-row .field { margin-bottom: 0; }

.form-actions {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: #fff; padding: 20px 28px; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.form-actions .btn { border-radius: 30px; }
.form-actions-note { color: var(--muted); font-size: 14px; margin-left: auto; }

@media (max-width: 720px) {
    .post-form .form-row,
    .post-form .form-row.three { grid-template-columns: 1fr; }
    .form-head, .form-card, .form-actions { padding-left: 18px; padding-right: 18px; }
    .form-actions-note { margin-left: 0; }
}

/* Trang tĩnh: nội quy, điều khoản, liên hệ */
.static-page { line-height: 1.75; }
.static-meta { text-align: center; color: var(--muted); font-size: 14px; margin: -12px 0 24px; }
.static-content { font-size: 16.5px; }
.static-content h2 { font-size: 22px; margin: 28px 0 12px; color: var(--pink); }
.static-content h3 { font-size: 18px; margin: 22px 0 10px; }
.static-content p { margin: 0 0 14px; }
.static-content ul, .static-content ol { margin: 0 0 16px; padding-left: 24px; }
.static-content li { margin-bottom: 8px; }
.static-content img { border-radius: 8px; margin: 16px 0; }
.static-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.static-content th, .static-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.static-content blockquote {
    margin: 16px 0; padding: 12px 18px; background: #faf7f9;
    border-left: 4px solid var(--pink); color: #444;
}

.detail-title { text-align: center; font-size: 34px; font-style: italic; margin: 0 0 22px; }
.detail-category { color: var(--blue); font-style: italic; font-weight: 700; font-size: 24px; margin: 24px 0 10px; }
.detail-category span { color: var(--amber); }
.detail-info { text-align: center; }
.detail-info .info-head { color: var(--blue); font-weight: 700; margin-bottom: 14px; }
.detail-info dl { margin: 0; }
.detail-info .info-row { margin-bottom: 8px; }
.detail-info .info-row b { font-weight: 700; }

.contact-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 22px 0; }
.contact-row .btn-pass { background: #e8380d; color: #fff; border: 0; padding: 12px 22px; cursor: pointer; }
.contact-row input { border: 2px solid #e8380d; padding: 11px 14px; flex: 1 1 260px; color: var(--blue); font-style: italic; }
.contact-row .btn-confirm { background: var(--blue); color: #fff; border: 0; padding: 12px 30px; cursor: pointer; }
.contact-revealed { font-size: 22px; font-weight: 700; color: #158a3b; }

.post-gallery { display: grid; gap: 16px; margin-top: 20px; }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 26px 0; }
.post-nav a { background: #fff; padding: 20px; text-align: center; display: block; color: var(--ink); }
.post-nav span { display: block; color: var(--amber); font-weight: 700; }

.comment-list { list-style: none; margin: 20px 0 0; padding: 0; }
.comment-list li { border-bottom: 1px solid var(--line); padding: 14px 0; }
.comment-author { font-weight: 700; color: #1a7d5a; }

/* ------------------------------ Form / auth ------------------------------ */

.auth-card { background: #fff; max-width: 760px; margin: 28px auto; padding: 40px; box-shadow: 0 2px 10px rgba(0,0,0,.1); }
.auth-title { text-align: center; font-size: 40px; font-style: italic; margin: 0 0 30px; }
.auth-form label { display: block; font-weight: 700; margin: 18px 0 8px; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password],
.auth-form input[type=date], .auth-form input[type=number], .auth-form input[type=tel],
.auth-form select, .auth-form textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #ccc; border-radius: 6px;
    font-size: 16px; font-family: inherit; background: #fff; box-sizing: border-box;
    height: 48px;
}
.auth-form textarea { height: auto; }
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus {
    outline: none; border-color: var(--pink);
}
/* hai ô trên một hàng (chiều cao / cân nặng, tuổi / hôn nhân...) */
.auth-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.auth-form .form-row > div { min-width: 0; }
.auth-form .form-row label { margin-top: 0; }
.auth-form .checkbox { display: flex; align-items: center; gap: 10px; font-weight: 400; }
.code-hint { margin: 20px 0 8px; }
.code-link { color: var(--amber); font-weight: 700; }
.auth-actions { display: flex; gap: 14px; margin-top: 24px; }
.auth-foot { text-align: center; margin-top: 20px; color: var(--muted); }

.btn { display: inline-block; border: 0; padding: 14px 30px; font-size: 14px; cursor: pointer; text-align: center; }
.btn-primary { background: var(--pink); color: #fff; }
.btn-primary:hover { background: var(--pink-dark); text-decoration: none; }
.btn-ghost { background: #eee; color: #444; }

.alert { padding: 12px 16px; margin: 16px 0; border-left: 4px solid; background: #fff; }
.alert-success { border-color: #2fa84f; }
.alert-danger  { border-color: #e12a2a; }
.alert-warning { border-color: var(--amber); }
.alert-info    { border-color: var(--blue); }

.filter-bar { background: #fff; padding: 16px; display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.filter-bar select, .filter-bar input { padding: 10px; border: 1px solid #ccc; }

.pagination { list-style: none; display: flex; gap: 6px; justify-content: center; padding: 0; margin: 28px 0; }
.page-link { display: block; padding: 9px 15px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.page-item.active .page-link { background: var(--pink); color: #fff; border-color: var(--pink); }
.page-item.disabled .page-link { opacity: .5; pointer-events: none; }

/* ------------------------------ Trang cá nhân thành viên ------------------------------ */

.profile-head { display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.profile-photo { position: relative; flex: 0 0 auto; }
.profile-photo img {
    width: 168px; height: 168px; border-radius: 50%; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 4px 18px rgba(0,0,0,.14);
}
.profile-photo .dot-online { right: 14px; bottom: 14px; width: 18px; height: 18px; }
.profile-headline { flex: 1 1 320px; }
.profile-headline h1 { margin: 0 0 10px; font-size: 30px; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.profile-tags span {
    display: inline-flex; align-items: center;
    background: #f4f4f6; color: #444; padding: 4px 14px; border-radius: 20px;
    font-size: 14px; line-height: 1.4;
}
.profile-tags .tag-vip { background: var(--amber); color: #fff; }
.profile-tags .tag-verified { background: #2fa84f; color: #fff; }
/* Phải nêu rõ nền ở đây, nếu không luật .profile-tags span phía trên
   sẽ đè mất nền màu và chữ trắng thành ra không đọc được */
.profile-tags .tag-online { background: #22a35a; color: #fff; }
.profile-tags .tag-new    { background: var(--pink); color: #fff; }
.profile-active { color: var(--muted); margin: 0 0 16px; font-size: 14px; }
/* Căn giữa theo chiều dọc, nếu không các nút bị kéo cao bằng nhau tới 80px */
.profile-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profile-actions .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px; padding: 0 20px; border-radius: 999px;
    font-size: 14px; font-weight: 700; line-height: 1;
}
.profile-actions .btn .ic { width: 17px; height: 17px; flex: 0 0 17px; }
.btn-blue-outline { background: #fff; color: var(--blue); border: 2px solid var(--blue); }
.btn-blue-outline:hover { background: var(--blue); color: #fff; text-decoration: none; }
.matched-note { color: #158a3b; font-weight: 600; margin: 14px 0 0; }

.info-heading { font-size: 20px; margin: 0 0 16px; position: relative; padding-left: 14px; }
.info-heading::before {
    content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
    background: var(--pink); border-radius: 4px;
}
.profile-section, .info-panel { padding-top: 26px; }

.info-list { margin: 0; display: grid; gap: 2px; }
.info-list > div {
    display: grid; grid-template-columns: 190px 1fr; gap: 16px;
    padding: 12px 14px; border-radius: 8px;
}
.info-list > div:nth-child(odd) { background: #faf7f9; }
.info-list dt { font-weight: 700; color: #444; margin: 0; }
.info-list dd { margin: 0; color: #333; }

/* ------------------------------ Bình luận ------------------------------ */

.comment-box { margin-top: 20px; }

/* Ô nhập bình luận */
.comment-form { display: flex; gap: 12px; margin-bottom: 24px; }
.comment-form > img {
    width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
    flex: 0 0 auto; border: 1px solid var(--line);
}
.comment-form > div { flex: 1; min-width: 0; }
.comment-form textarea {
    width: 100%; padding: 12px 16px; border: 1px solid #dcdce2; border-radius: 20px;
    font-size: 15px; font-family: inherit; line-height: 1.5; resize: vertical;
    background: #f6f7f9; transition: border-color .15s, background .15s;
}
.comment-form textarea::placeholder { color: #9aa0a6; }
.comment-form textarea:focus {
    outline: none; border-color: var(--pink); background: #fff;
    box-shadow: 0 0 0 3px rgba(233,30,140,.1);
}
.comment-login {
    background: #faf7f9; border: 1px dashed #e2cad8; padding: 18px;
    border-radius: 12px; text-align: center; color: var(--muted); margin-bottom: 20px;
}
.comment-login a { font-weight: 700; }

/* Luồng bình luận kiểu bong bóng, có trả lời lồng nhau */
.comment-thread, .comment-children { list-style: none; margin: 0; padding: 0; }
.comment-thread > li { padding: 16px 0; border-top: 1px solid var(--line); }
.comment-thread > li:first-child { border-top: 0; padding-top: 0; }

/* Trả lời thụt vào, có đường kẻ dọc nối để thấy rõ quan hệ cha - con */
.comment-children {
    margin: 12px 0 0 22px; padding-left: 22px; border-left: 2px solid #ebecef;
}
.comment-children > li { padding: 12px 0 0; border: 0; }
.comment-children > li:first-child { padding-top: 0; }

.comment-row { display: flex; gap: 12px; }
.comment-row > img {
    width: 42px; height: 42px; border-radius: 50%; object-fit: cover;
    flex: 0 0 auto; border: 1px solid var(--line);
}
.is-reply .comment-row > img { width: 34px; height: 34px; }
.comment-content { flex: 1; min-width: 0; }

.comment-bubble {
    background: #f2f3f5; border-radius: 4px 18px 18px 18px; padding: 10px 16px;
    display: inline-block; max-width: 100%;
}
.comment-bubble .comment-author {
    display: block; font-weight: 700; color: #1a7d5a; font-size: 14px; line-height: 1.4;
}
.comment-bubble .comment-author:hover { text-decoration: underline; }
.comment-bubble p { margin: 2px 0 0; word-break: break-word; line-height: 1.5; }

/* Hàng công cụ: thời gian, trả lời, xoá. Nút xoá chỉ hiện khi rê vào bình luận. */
.comment-tools {
    display: flex; align-items: center; gap: 14px;
    padding: 6px 0 0 16px; font-size: 13px;
}
.comment-tools time { color: var(--muted); }
.comment-reply-btn {
    background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
    color: var(--muted); font-weight: 700; font-size: 13px;
}
.comment-reply-btn:hover { color: var(--pink); text-decoration: underline; }
.comment-del { color: #c62828; font-size: 13px; opacity: 0; transition: opacity .15s; }
.comment-row:hover .comment-del,
.comment-row:focus-within .comment-del { opacity: 1; }

/* Thanh công cụ dưới ô nhập: nút đính kèm ảnh + nút gửi */
.comment-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.attach-btn {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    background: #f2f3f5; color: #444; padding: 7px 14px; border-radius: 20px;
    font-size: 14px; font-weight: 600; margin: 0;
}
.attach-btn:hover { background: #fce1ef; color: var(--pink); }
.comment-bar .reply-actions { margin-left: auto; margin-top: 0; }
.comment-bar .btn { margin-top: 0; }

/* Ảnh đính kèm hiển thị trong bình luận */
.comment-image { display: inline-block; margin-top: 8px; border-radius: 12px; overflow: hidden; }
.comment-image img {
    max-width: 300px; max-height: 300px; border: 1px solid var(--line);
    object-fit: cover; transition: transform .25s ease;
}
.comment-image:hover img { transform: scale(1.03); }
.comment-form .file-preview img { max-width: 160px; height: 120px; border-radius: 12px; }

.reply-form { margin: 12px 0 0; }
.reply-form textarea { border-radius: 18px; padding: 10px 16px; }
.reply-actions { display: flex; gap: 8px; margin-top: 8px; }
.btn-small { padding: 7px 18px; font-size: 14px; border-radius: 20px; }

.contact-note { color: var(--muted); font-size: 13px; margin: 0; }

/* ------------------------------ Khu tài khoản ------------------------------ */

/* Menu khu tài khoản: dạng pill, cuộn ngang khi hẹp thay vì xuống dòng lộn xộn */
.account-nav {
    background: #fff; margin-bottom: 20px; border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 8px;
    max-width: 855px;
}
.account-nav ul {
    list-style: none; margin: 0; padding: 0; display: flex; gap: 6px;
    overflow-x: auto; scrollbar-width: thin;
}
.account-nav li { flex: 0 0 auto; }
.account-nav a {
    display: block; padding: 10px 18px; color: #555; font-weight: 600;
    white-space: nowrap; border-radius: 24px; font-size: 15px; transition: background .15s, color .15s;
}
.account-nav a:hover { background: #fce1ef; color: var(--pink); text-decoration: none; }
.account-nav a.active { background: var(--pink); color: #fff; }

.section-title { font-size: 22px; margin: 0 0 16px; color: var(--ink); }
.box-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.content-box + .content-box { margin-top: 20px; }

.account-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 20px; }
.account-stats > div {
    background: #faf7f9; border: 1px solid var(--line); border-radius: 8px;
    padding: 16px; text-align: center; color: var(--muted); font-size: 14px;
}
.account-stats span { display: block; font-size: 26px; font-weight: 700; color: var(--pink); }

.profile-avatar { display: flex; gap: 20px; align-items: center; margin-bottom: 10px; }
.profile-avatar img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; }

.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.simple-table th { color: var(--muted); font-size: 14px; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; color: #fff; }
.bg-success { background: #2fa84f; } .bg-danger { background: #e12a2a; }
.bg-warning { background: var(--amber); } .bg-secondary { background: #8a8a8a; }

.package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.package-grid .full { grid-column: 1 / -1; }
.package-card {
    border: 2px solid var(--line); border-radius: 10px; padding: 18px; cursor: pointer;
    display: block; transition: border-color .15s;
}
.package-card:has(input:checked) { border-color: var(--pink); background: #fdf3f8; }
.package-card .price { display: block; font-size: 22px; font-weight: 700; color: var(--pink); margin: 6px 0; }
.package-card p { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.bank-note { background: #fff8e6; padding: 12px; border-left: 4px solid var(--amber); }

/* Album ảnh: thẻ đều nhau, nhãn trạng thái và nút xoá đặt trên ảnh */
.photo-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px;
}
.photo-grid figure {
    margin: 0; position: relative; border-radius: 10px; overflow: hidden;
    background: #f3f3f5; box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.photo-grid img {
    aspect-ratio: 3 / 4; object-fit: cover; width: 100%; display: block;
    transition: transform .25s ease;
}
.photo-grid figure:hover img { transform: scale(1.04); }
.photo-grid figcaption {
    position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between;
    align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px;
    background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
}
.photo-grid figcaption a {
    color: #fff; background: rgba(225, 42, 42, .9); padding: 4px 12px;
    border-radius: 20px; font-size: 12px; opacity: 0; transition: opacity .2s;
}
.photo-grid figure:hover figcaption a,
.photo-grid figure:focus-within figcaption a { opacity: 1; }

/* Ô chọn ảnh + khung xem trước */
.upload-field { margin-top: 8px; }
.upload-field input[type=file] {
    display: block; width: 100%; padding: 18px; background: #fafafa;
    border: 2px dashed #d5b7c8; border-radius: 10px; cursor: pointer; font-size: 15px;
}
.upload-field input[type=file]:hover { border-color: var(--pink); background: #fdf3f8; }
.upload-hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; }

.file-preview {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px; margin-top: 14px;
}
.file-preview:empty { display: none; }
.file-preview img {
    width: 100%; height: 160px; max-height: 160px; object-fit: cover; border-radius: 8px;
    border: 1px solid var(--line); background: #fafafa; display: block;
}

.noti-list { list-style: none; margin: 0; padding: 0; }
.noti-list li { padding: 14px; border-bottom: 1px solid var(--line); }
.noti-list li.unread { background: #fdf3f8; }
.noti-list p { margin: 4px 0; color: var(--muted); }

/* Khung chat */
.chat-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.chat-list { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); padding: 16px; max-height: 620px; overflow-y: auto; }
.chat-item { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 8px; color: var(--ink); position: relative; }
.chat-item:hover, .chat-item.active { background: #fdf3f8; text-decoration: none; }
.chat-item img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.chat-item p { margin: 0; font-size: 13px; color: var(--muted); }
.chat-unread { background: var(--pink); color: #fff; border-radius: 20px; padding: 1px 8px; font-size: 12px; }
.chat-window { display: flex; flex-direction: column; min-height: 520px; }
.chat-head { display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.chat-head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px 0; display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 70%; background: #f1f1f4; padding: 10px 14px; border-radius: 12px; }
.chat-msg.mine { align-self: flex-end; background: #fce1ef; }
.chat-msg p { margin: 0; }
.chat-msg small { color: var(--muted); font-size: 12px; }
.chat-form { display: flex; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.chat-form input { flex: 1; padding: 12px; border: 1px solid #ccc; }

/* ------------------------------ Modal thông báo ------------------------------ */

.modal-overlay {
    position: fixed; inset: 0; background: rgba(20, 20, 25, .6);
    display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal-overlay.open { display: flex; animation: modal-fade .18s ease-out; }
.modal-box {
    background: #fff; border-radius: 12px; width: min(440px, 100%); padding: 32px 28px 24px;
    text-align: center; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,.28);
    animation: modal-pop .2s ease-out;
}
.modal-close {
    position: absolute; top: 10px; right: 14px; background: none; border: 0;
    font-size: 26px; line-height: 1; color: #9aa0a6; cursor: pointer;
}
.modal-close:hover { color: var(--ink); }
.modal-icon {
    width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; font-size: 30px; font-weight: 700; color: #fff;
}
.modal-icon.success { background: #2fa84f; }
.modal-icon.error   { background: #e12a2a; }
.modal-icon.info    { background: var(--blue); }
.modal-title { margin: 0 0 10px; font-size: 21px; }
.modal-body { color: var(--muted); margin-bottom: 20px; }
.modal-body p { margin: 0; }
.modal-code {
    margin-top: 16px; background: #fdf2f8; border: 2px dashed var(--pink); color: var(--pink);
    font-size: 28px; font-weight: 800; letter-spacing: 6px; padding: 14px; border-radius: 8px;
}
.modal-actions .btn { width: 100%; border-radius: 8px; }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------ Footer ------------------------------ */
/* Bố cục theo dự án fcoplayer: thương hiệu -> liên kết chính sách ->
   4 cột liên kết -> thông tin công ty -> dòng bản quyền, ngăn nhau bằng đường kẻ mờ. */

.site-footer {
    background: black;
    color: rgba(255, 255, 255, .88);
    margin-top: 40px;
    padding: 56px 0 15px;
    width: 100%;
}
.site-footer a { color: inherit; text-decoration: none; }
.site-footer img { display: block; max-width: 100%; }

.site-footer__container { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

.site-footer__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 25px;
}
.site-footer__brand {
    font-size: 40px;
    line-height: 1;
    font-weight: 900;
    color: #fff;
}
.site-footer__top-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.site-footer__slogan { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .7); }

.site-footer__policy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding-bottom: 10px;
}
.site-footer__policy-nav a {
    font-size: 14px;
    color: rgba(255, 255, 255, .88);
    transition: .25s ease;
}
.site-footer__policy-nav a:hover { color: #fff; }

.site-footer__line {
    border-top: 1px solid rgba(255, 255, 255, .18);
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer__middle { display: grid; padding: 40px 0 10px; }
.site-footer__links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px; }

.footer-col__title {
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
}
.footer-col__list { margin: 0; padding: 0; list-style: none; }
.footer-col__list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 14px;
}
.footer-col__list li::before,
.site-footer__company-list li::before {
    content: "›";
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(255, 255, 255, .72);
}
.footer-col__list--social li:before {
    content: "";
}
.footer-col__list--social li{
    padding-left: 0px!important;

}
.footer-col__list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, .82);
    transition: .25s ease;
}
.footer-col__list a:hover { color: #fff; }

.site-footer__company {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 34px 16px 10px;
}
.company-info-block { flex: 1; min-width: 300px; }
.site-footer__entity-address { font-style: normal; }
.site-footer__company-title {
    margin: 0 0 24px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}
.site-footer__company-list { display: block; margin: 0; padding: 0; list-style: none; }
.site-footer__company-list li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 500;
    line-height: 25px;
    color: #fff;
}
.footer-note { flex-shrink: 0; max-width: 340px; margin-bottom: 15px; }
.site-footer .disclaimer {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: rgba(255, 255, 255, .62);
}

.site-footer__bottom { padding: 15px 16px 0; text-align: center; margin: 0 auto; }
.site-footer__bottom p {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 200;
}

@media (max-width: 1200px) {
    .site-footer__middle { grid-template-columns: 1fr; }
    .site-footer__line { width: 100%; }
    .site-footer__links { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .site-footer__top { flex-direction: column; align-items: flex-start; }
    .site-footer__top-right { width: 100%; justify-content: flex-start; }
}

@media (max-width: 768px) {
    .site-footer { padding: 40px 0 20px; }
    .site-footer__brand { font-size: 30px; }
    .site-footer__policy-nav { gap: 16px 20px; }
    .site-footer__links { grid-template-columns: 1fr; gap: 28px; }
    .footer-col__title { font-size: 18px; margin-bottom: 16px; }
    .site-footer__company-title { font-size: 18px; }
    /* Mobile: hai khối xếp chồng và được phép co lại, tránh đẩy ngang trang */
    .company-info-block { min-width: 0; }
    .footer-note { max-width: none; flex-shrink: 1; width: 100%; }
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1024px) {
    .card-grid, .article-grid { grid-template-columns: repeat(2, 1fr); }
    .mega-cols { columns: 2; }
    /* màn hình vừa: giấu bớt chữ dài để menu không chen nút hành động */
    .topbar-slogan { display: none; }
    .nav-list > li > a { padding: 10px 9px; font-size: 14px; }
    .page-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    /* ---------- Menu mobile: ngăn kéo trượt từ phải ---------- */

    .nav-toggle { display: flex; }

    .nav-drawer {
        display: flex; flex-direction: column;
        position: fixed; top: 0; right: 0; bottom: 0;
        width: min(320px, 86vw); background: #fff; z-index: 140;
        box-shadow: -8px 0 30px rgba(0,0,0,.22);
        transform: translateX(100%);
        transition: transform .28s cubic-bezier(.4,0,.2,1), visibility .28s;
        overflow-y: auto; overscroll-behavior: contain;
        visibility: hidden;   /* đóng thì không nhận sự kiện chạm */
        max-width: 100vw;
    }
    .nav-drawer.open { transform: translateX(0); visibility: visible; }

    .drawer-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 18px; flex: 0 0 auto;
        background: linear-gradient(135deg, #ff5fa8, var(--pink) 60%, #c2126f); color: #fff;
    }
    .drawer-title { font-size: 17px; font-weight: 700; letter-spacing: .3px; }
    .drawer-close {
        background: rgba(255,255,255,.2); border: 0; color: #fff; cursor: pointer;
        width: 32px; height: 32px; border-radius: 50%; font-size: 24px; line-height: 1;
    }
    .drawer-close:hover { background: rgba(255,255,255,.35); }

    /* Lớp phủ mờ phía sau ngăn kéo */
    .nav-overlay {
        position: fixed; inset: 0; z-index: 110;
        background: rgba(18,18,22,.5); backdrop-filter: blur(2px);
        opacity: 0; transition: opacity .28s ease;
    }
    .nav-overlay.show { opacity: 1; }
    .nav-overlay[hidden] { display: none; }

    /* Danh sách menu trong ngăn kéo */
    .nav-list {
        flex-direction: column; align-items: stretch; gap: 0;
        padding: 8px 0; flex: 1 1 auto;
    }
    .nav-list > li > a {
        border-radius: 0; padding: 14px 18px; font-size: 13.5px;
        border-bottom: 1px solid #f1f1f4; white-space: normal;
        display: flex; align-items: center; justify-content: space-between;
    }
    .nav-list > li > a.active { background: #fdf2f8; }
    .nav-list > li > a.active::after { display: none; }

    /* Mũi tên của mục có danh mục con, xoay khi mở */
    .caret {
        font-size: 14px; opacity: .5; transition: transform .22s ease;
        flex: 0 0 auto; margin-left: 10px;
    }
    .has-mega.open > a .caret { transform: rotate(180deg); opacity: 1; color: var(--pink); }
    .has-mega.open > a { color: var(--pink); background: #fdf2f8; }

    /* Danh mục con dạng xổ xuống, ẩn mặc định */
    .has-mega .mega-menu {
        position: static; display: none; box-shadow: none; border-top: 0;
        background: #fafafb; padding: 4px 0;
    }
    .has-mega.open > .mega-menu { display: block; }
    .has-mega:hover .mega-menu { display: none; }
    .has-mega.open:hover .mega-menu { display: block; }
    .mega-menu .container { width: 100%; padding: 0; }
    .mega-cols { columns: 1; max-height: none; }
    .mega-cols a {
        padding: 11px 18px 11px 34px; font-size: 14px; text-transform: none;
        border-bottom: 1px solid #f1f1f4;
    }
    .mega-cols li:last-child a { border-bottom: 0; }

    /* Nút hành động xuống đáy ngăn kéo, xếp dọc cho dễ bấm */
    .header-actions {
        flex-direction: column; align-items: stretch; gap: 10px;
        margin: 0; padding: 16px 18px 22px; flex: 0 0 auto;
        border-top: 1px solid #f1f1f4;
    }
    .btn-nav-ghost, .btn-nav-solid { text-align: center; padding: 12px 18px; font-size: 15px; }
    .btn-account { justify-content: center; padding: 8px 16px 8px 8px; }
    .btn-account span { display: inline; }

    /* Khoá cuộn nền khi ngăn kéo đang mở */
    body.drawer-open { overflow: hidden; }
}

@media (max-width: 720px) {
    .card-grid, .article-grid { grid-template-columns: 1fr 1fr; }
    .auth-card { padding: 22px; }
    .auth-form .form-row { grid-template-columns: 1fr; }
    .post-nav { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    /* Điện thoại nhỏ: thu gọn tối đa để logo không bị đẩy */
    .brand-text { font-size: 19px; }
    .brand-mark { width: 32px; height: 32px; font-size: 17px; }
    .site-header .header-inner { min-height: 58px; gap: 10px; }
    .topbar-inner { justify-content: center; font-size: 12px; }
    .card-grid, .article-grid { grid-template-columns: 1fr; }
}


/* ---------- Mobile: thẻ thành viên chuyển sang dạng hàng ngang ----------
   Ảnh vuông bên trái, thông tin bên phải. Xem được nhiều người trên một
   màn hình thay vì phải cuộn dài như lưới thẻ ảnh dọc.                    */

@media (max-width: 560px) {
    /* bỏ hiệu ứng nhấc lên vì trên cảm ứng không có trạng thái rê chuột */

    /* Ảnh vuông cố định bên trái */

    /* Ngày tham gia bỏ đi cho gọn, nhãn thu nhỏ lại */
    .badge-verified {
        top: 6px; left: 0; padding: 2px 7px; font-size: 10.5px;
        border-radius: 0 10px 10px 0;
    }

    /* Cột thông tin bên phải */
    /* nhãn khu vực về dạng chữ nhỏ, không còn nền hồng chiếm chỗ */

}


/* ---------- Mobile: thẻ tin đăng và bài viết cũng chuyển sang hàng ngang ---------- */

@media (max-width: 560px) {
    .card-grid, .article-grid { grid-template-columns: 1fr; gap: 10px; }

    /* ----- Thẻ tin đăng ----- */
    .post-card {
        flex-direction: row; align-items: stretch;
        border-radius: 12px; overflow: hidden;
    }
    .post-thumb { flex: 0 0 104px; width: 104px; }
    .post-thumb img { aspect-ratio: 1; height: 100%; }
    .post-thumb .post-date { display: none; }

    .post-card .badge-verified,
    .post-card .badge-featured {
        top: 6px; padding: 2px 7px; font-size: 10.5px;
    }
    .post-card .badge-verified { left: 0; border-radius: 0 10px 10px 0; }
    .post-card .badge-featured { right: 0; border-radius: 10px 0 0 10px; }

    .post-body {
        flex: 1; min-width: 0; padding: 11px 13px;
        display: flex; flex-direction: column; justify-content: center; gap: 3px;
    }
    .post-title {
        margin: 0; font-size: 15px; line-height: 1.4;
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    }
    .post-title a {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* nhãn khu vực về dạng chữ nhỏ cho đỡ chiếm chỗ, giống thẻ thành viên */
    .post-title .place-tag {
        order: 2; background: none; color: var(--muted); padding: 0; margin: 0;
        font-size: 12.5px; font-style: normal; font-weight: 500;
    }
    .post-title .place-tag::before { content: "📍"; margin-right: 2px; font-size: 11px; }
    .post-meta { font-size: 13.5px; line-height: 1.45; }

    /* ----- Thẻ bài viết ----- */
    .article-card { display: flex; align-items: stretch; }
    .article-card:hover { transform: none; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
    .article-card:active { background: #fdf2f8; }

    .article-thumb { flex: 0 0 104px; width: 104px; }
    .article-thumb img { aspect-ratio: 1; height: 100%; }
    .article-card:hover .article-thumb img { transform: none; }

    .article-body {
        flex: 1; min-width: 0; padding: 11px 13px;
        display: flex; flex-direction: column; justify-content: center; gap: 4px;
    }
    .article-card h3 {
        font-size: 15px; margin: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .article-meta { margin: 0 !important; font-size: 12px; }
    /* đoạn trích ẩn đi cho gọn, tiêu đề đã đủ thông tin */
    .article-card > .article-body > p:not(.article-meta) { display: none; }
}


/* ==========================================================================
   Mobile: các khối còn dùng bố cục cứng
   ========================================================================== */

@media (max-width: 760px) {
    /* Khung chat trang đầy đủ: danh sách hội thoại nằm trên, khung chat nằm dưới */
    .chat-layout { grid-template-columns: 1fr; }
    .chat-list { max-height: 220px; }
    .chat-window { min-height: 60vh; }

    /* Trang cá nhân: avatar và thông tin xếp dọc, căn giữa */
    .profile-head { flex-direction: column; align-items: center; text-align: center; gap: 16px; }
    .profile-photo img { width: 128px; height: 128px; }
    .profile-tags { justify-content: center; }
    .profile-actions { justify-content: center; }
    .profile-actions .btn { flex: 1 1 auto; min-width: 130px; }

    /* Hàng nhãn - giá trị: nhãn lên trên, giá trị xuống dưới */
    .info-list > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 12px; }
    .info-list dt { font-size: 13px; color: var(--muted); }

    /* Hàng "Số điện thoại": ba phần tử xếp dọc thay vì chen một hàng */
    .contact-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .contact-row .btn-pass,
    .contact-row .btn-confirm { width: 100%; padding: 12px; border-radius: 8px; }
    .contact-row input { flex: 1 1 auto; width: 100%; border-radius: 8px; }
    .contact-revealed { text-align: center; }

    /* Bộ lọc và ô tìm kiếm: mỗi thành phần một dòng, đủ rộng để bấm */
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar select, .filter-bar input, .filter-bar .btn { width: 100%; }
    .search-form { flex-direction: column; }
    .search-form input[type=text], .search-form select, .btn-search { width: 100%; flex: 1 1 auto; }
}

@media (max-width: 560px) {
    /* Menu khu tài khoản: cuộn ngang, ẩn thanh cuộn cho gọn */
    .account-nav { border-radius: 10px; padding: 6px; }
    .account-nav a { padding: 9px 14px; font-size: 14px; }
    .account-nav ul { scrollbar-width: none; }
    .account-nav ul::-webkit-scrollbar { display: none; }

    /* Thẻ số liệu: 2 cột thay vì tự co làm chữ quá nhỏ */
    .account-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .account-stats > div { padding: 12px 8px; font-size: 13px; }
    .account-stats span { font-size: 21px; }

    /* Bảng dữ liệu: cuộn ngang trong khung riêng thay vì vỡ trang */
    .simple-table { display: block; overflow-x: auto; white-space: nowrap; }
    .simple-table th, .simple-table td { padding: 9px 10px; font-size: 14px; }

    /* Biểu mẫu nhiều cột về một cột */
    .form-grid, .package-grid { grid-template-columns: 1fr; }
    .content-box { padding: 18px 16px; }

    /* Album ảnh: 2 cột cho đỡ vụn */
    .photo-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }

    /* Bình luận: thu gọn thụt lề để phần trả lời không bị bóp còn một dòng chữ */
    .comment-children { margin-left: 10px; padding-left: 12px; }
    .comment-form > img { width: 36px; height: 36px; }
    .comment-row > img { width: 36px; height: 36px; }
    .is-reply .comment-row > img { width: 30px; height: 30px; }
    .comment-bubble { padding: 9px 13px; }
    .comment-tools { gap: 12px; padding-left: 12px; }
    /* trên cảm ứng không có rê chuột nên nút xoá phải luôn hiện */
    .comment-del { opacity: 1; }

    /* Trang Khám phá: thẻ vừa màn hình, nút bấm to hơn */
}

/* ------------------------------ Trang Khám phá ------------------------------ */

.discover-page { padding: 16px 0; }
.discover-head { text-align: center; margin-bottom: 16px; }
.discover-head h1 { margin: 0 0 8px; font-size: 32px; font-style: italic; color: var(--pink); }
.discover-head p { margin: 0; color: var(--muted); }
.discover-count { margin-top: 10px !important; }
.discover-count b { color: var(--pink); }
.discover-empty { text-align: center; padding: 40px 24px; }

/* Lưới tự chia cột theo bề rộng còn lại: tránh cảnh chỉ 1 cột khiến thẻ
   phình to gần hết màn hình ở khoảng 560-1024px. */
/* Khoảng thở giữa thanh điều hướng dính trên đỉnh và nội dung bên dưới */
main { display: block; padding-top: 14px; }

/* Đường dẫn phân cấp (Trang chủ › Hẹn hò › ...) */
.breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
    margin: 0 0 14px; font-size: 13.5px; color: #9aa0a8;
}
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--pink); text-decoration: none; }
.breadcrumb span { color: var(--ink); font-weight: 600; }

/* ------------------------- Khám phá: vuốt thẻ -------------------------
   Một chồng thẻ giữa màn hình. Kéo ngang để chọn, kéo dọc trong thẻ để
   xem chi tiết. Máy tính dùng thêm phím mũi tên. */

/* Trang chạy toàn màn hình: chiếm trọn chiều cao, không cuộn trang */
body.is-bare { background: #dce4f8; height: 100%; overflow: hidden;
    --sw-bar: 73px; --sw-tab: 63px; --sw-gap: 10px; }
html:has(body.is-bare) { height: 100%; }
body.is-bare main { padding-top: 0; height: 100vh; height: 100dvh; }

.discover-page {
    display: flex; flex-direction: column;
    height: 100vh;      /* dự phòng cho trình duyệt cũ */
    height: 100dvh;     /* trừ luôn thanh địa chỉ di động, tránh che thanh dưới */
    padding: 0;
}


/* Chiều cao dải thông tin và thanh điều hướng — cụm nút neo theo hai giá trị này.
   --sw-pad: đệm trên của khung, --sw-gap: khoảng cách trên thanh điều hướng.
   --sw-view: chỗ trống thật sự còn lại cho một hồ sơ. */
.discover-page {
    --sw-bar: 73px; --sw-tab: 63px; --sw-pad: 12px; --sw-gap: 10px;
    --sw-view: calc(100vh - var(--sw-pad) - var(--sw-gap) - var(--sw-tab));
    --sw-view: calc(100dvh - var(--sw-pad) - var(--sw-gap) - var(--sw-tab));
}

/* Nút lọc nổi ở góc trên khung */
.sw-filter-btn {
    position: absolute; top: 30px; right: 30px; z-index: 14;
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.sw-filter-btn svg {
    width: 19px; height: 19px; fill: none; stroke: var(--pink);
    stroke-width: 1.9; stroke-linejoin: round; stroke-linecap: round;
}
.sw-filter-btn:hover { background: #fff; }

/* Khung trắng theo tỉ lệ như bản mẫu: viền 16px, ảnh gần vuông */
/* Khung dính sát trên dưới, chỉ bo góc hai bên cho gọn */
.sw-stage {
    position: relative; flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    width: 100%; max-width: 560px; margin: 0 auto;
    background: #fff; border-radius: 0; padding: 12px 12px 0;
    box-shadow: 0 0 40px rgba(17, 24, 39, .12);
}

/* ---- Chồng thẻ ---- */
/* Khung cuộn dọc: mỗi lần cuộn dừng đúng một hồ sơ (scroll-snap).
   Chiều cao do JS tính theo chỗ trống còn lại của màn hình. */
.sw-deck {
    /* Chiếm hết chỗ trống trong khung (khung đã cao 100vh), không đặt chiều cao
       cứng để tránh chỏi với thanh điều hướng và dải thông tin bên dưới. */
    position: relative; flex: 0 0 auto; height: var(--sw-view); box-sizing: border-box;
    overflow-y: auto; overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    border-radius: 22px;
}

.sw-deck::-webkit-scrollbar { display: none; }

/* Chỉ hồ sơ đầu tiên hiện ra; xong người này mới tới người kế */
.sw-card { display: none; }
.sw-card:first-child { display: block; }
.sw-card {
    position: relative;
    height: auto;
    border-radius: 22px;
    overflow: hidden;
    background: transparent;  /* ← ĐỔI THÀNH transparent */
    will-change: transform;
}
.sw-card.is-dragging { transition: none; cursor: grabbing; }
.sw-card.is-animating { transition: transform .34s ease, opacity .34s ease; }
.sw-card.is-gone { opacity: 0; }

/* Vùng cuộn bên trong thẻ: ảnh chiếm trọn, chi tiết nằm dưới */
.sw-scroll { position: relative; }

/* Ảnh cao đúng một khung nhìn; cuộn tiếp là tới phần chi tiết, rồi tới người kế */
.sw-photo {
    position: relative;
    height: calc(var(--sw-view) - var(--sw-bar));
    overflow: hidden;
}

/* Phần chi tiết trượt lên che ảnh khi bấm "Xem thêm" */
/* Phần chi tiết nằm ngay dưới ảnh, cuộn tới là thấy */
.sw-detail { position: relative; z-index: 3; }
.sw-detail-close {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: 100%; padding: 10px; border: 0; cursor: pointer;
    background: #fff; color: var(--muted); font-size: 13px; font-weight: 700;
    border-bottom: 1px solid #f0f1f4;
}
.sw-detail-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sw-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 22px;  /* ← THÊM DÒNG NÀY */
}
.sw-photo::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 34%;border-radius: 22px;
    background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}

.sw-badges { position: absolute; top: 11px; left: 11px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 2; }
.sw-badges .tag {
    padding: 6px 13px; border-radius: 999px; line-height: 1;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.sw-place {
    position: absolute; top: 11px; left: 11px; z-index: 2;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 11px; border-radius: 999px;
    background: rgba(0,0,0,.42); color: #fff; font-size: 12.5px; font-weight: 600;
    backdrop-filter: blur(4px);
}
.sw-place .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; }

.sw-stamp {
    position: absolute; top: 46px; z-index: 4;
    padding: 8px 18px; border-radius: 10px;
    font-size: 26px; font-weight: 900; letter-spacing: 2px;
    opacity: 0; pointer-events: none;
}
.sw-stamp-like { left: 22px; color: #1fbf75; border: 4px solid #1fbf75; transform: rotate(-16deg); }
.sw-stamp-nope { right: 22px; color: #ff4d67; border: 4px solid #ff4d67; transform: rotate(16deg); }

@keyframes sw-nhac { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Dải thông tin trắng dưới ảnh, nằm trong khung */
.sw-bar {
    position: sticky; bottom: 0; z-index: 4;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 14px; background: #fff;
}
.sw-bar-main { flex: 1 1 auto; min-width: 0; }
.sw-bar h3 {
    margin: 0 0 2px; font-size: 18px; font-weight: 800; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-bar p {
    margin: 0; font-size: 13.5px; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sw-down {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: #f2f4f7; color: var(--ink);
    animation: sw-nhac 1.8s ease-in-out infinite;
}
.sw-down svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sw-down:hover { background: #e6e9ee; }

/* ---- Phần chi tiết ---- */
.sw-detail { background: #fff; }
.sw-detail-body { padding: 18px 20px 26px; }
.sw-detail section { margin-bottom: 20px; }
.sw-detail h4 {
    margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--ink);
    display: flex; align-items: center; gap: 8px;
}
.sw-detail h4::before { content: ""; width: 3px; height: 15px; border-radius: 3px; background: var(--pink); }
.sw-bio { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }

.sw-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.sw-facts li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); }
.sw-facts .ic {
    width: 17px; height: 17px; flex: 0 0 17px;
    fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.sw-facts .lbl { color: var(--muted); font-size: 13px; }

/* Thanh mức tương hợp */
.sw-score-bar { height: 8px; border-radius: 4px; background: #eef0f3; overflow: hidden; }
.sw-score-bar span { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pink), #ff8ab8); }
.sw-score-txt { margin: 8px 0 0; font-size: 13.5px; color: var(--muted); }
.sw-score-txt b { color: var(--pink); font-size: 15px; }

.sw-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; }
.sw-chips span { padding: 5px 12px; border-radius: 8px; background: #f3f4f6; color: #4b5563; font-size: 12.5px; font-weight: 600; }

.sw-album { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.sw-album img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }

.sw-more { display: inline-block; font-size: 14px; font-weight: 700; color: var(--pink); }

/* ---- Nút điều khiển ---- */
/* Cụm nút nổi đè lên đáy ảnh, ngay phía trên dải thông tin */
.sw-controls {
    /* Neo trên đáy ảnh: cộng chiều cao dải thông tin và thanh điều hướng bên dưới */
    position: absolute; left: 0; right: 0; z-index: 12;
    bottom: calc(var(--sw-bar) + var(--sw-tab) + var(--sw-gap) + 14px);
    display: flex; align-items: center; justify-content: center; gap: 14px;
    pointer-events: none;
}
.sw-controls > * { pointer-events: auto; }
.sw-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
    background: #fff; border: 0;
    box-shadow: 0 4px 16px rgba(17, 24, 39, .22);
    transition: transform .15s, box-shadow .15s;
}
.sw-btn svg { width: 23px; height: 23px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sw-btn-nope svg { stroke: #ff4d67; }
.sw-btn-like svg { stroke: #ff3b7f; }
.sw-btn-undo, .sw-btn-info { width: 42px; height: 42px; }
.sw-btn-undo svg { width: 20px; height: 20px; stroke: #f0a020; }
.sw-btn-info svg { width: 20px; height: 20px; stroke: #4a90e2; }
.sw-btn:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 22px rgba(17, 24, 39, .3); }
.sw-btn:active { transform: scale(.94); }
.sw-btn:disabled { opacity: .45; cursor: default; transform: none; }

/* Dòng gợi ý phím: ẩn để cụm nút neo đúng đáy ảnh */
.sw-hint { display: none; }
.sw-hint b { color: var(--ink); }
.sw-key {
    display: inline-block; margin: 0 1px; padding: 1px 7px;
    border: 1px solid var(--line); border-radius: 5px; background: #fff;
    font-size: 12px; color: var(--ink);
}

/* Thanh điều hướng nằm trong khung, ngay dưới cụm nút */
.sw-tabbar {
    flex: 0 0 auto; display: flex; align-items: stretch;
    margin: 10px -12px 0; padding: 0 4px calc(2px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e7e9ee; background: #fff;
}
.sw-tabbar a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 9px 4px 8px; color: #9aa0a8; font-size: 11px; font-weight: 600;
    transition: color .15s;
}
.sw-tabbar a svg {
    width: 22px; height: 22px; fill: none; stroke: currentColor;
    stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.sw-tabbar a:hover { color: var(--ink); text-decoration: none; }
.sw-tabbar a.on { color: var(--pink); }
.sw-tabbar a.on svg { fill: currentColor; stroke: none; }

/* ---- Hết hồ sơ ---- */
.sw-none { text-align: center; padding: 30vh 20px; }
.sw-none h2 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--ink); }
.sw-none p { margin: 0 auto 18px; max-width: 340px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.sw-none-actions { display: flex; flex-direction: column; gap: 10px; max-width: 260px; margin: 0 auto; }
.sw-none-actions .btn { padding: 12px 20px; border-radius: 999px; text-align: center; }
.sw-radar { position: relative; width: 90px; height: 90px; margin: 0 auto 20px; }
.sw-radar span {
    position: absolute; inset: 0; margin: auto;
    border: 2px solid var(--pink); border-radius: 50%; opacity: 0;
    animation: sw-quet 2.4s ease-out infinite;
}
.sw-radar span:nth-child(2) { animation-delay: .8s; }
.sw-radar span:nth-child(3) { animation-delay: 1.6s; }
@keyframes sw-quet {
    0%   { width: 14px; height: 14px; opacity: .85; }
    100% { width: 90px; height: 90px; opacity: 0; }
}

/* ---- Hộp chọn nhóm cho khách ---- */
.sw-onboard {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(17, 24, 39, .62); backdrop-filter: blur(3px);
}
.sw-onboard-box {
    background: #fff; border-radius: 18px; padding: 28px 24px; max-width: 420px; width: 100%;
    text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
.sw-onboard-box h2 { margin: 0 0 8px; font-size: 21px; font-weight: 800; color: var(--ink); }
.sw-onboard-box > p { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; }
.sw-onboard-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.sw-onboard-opts a {
    padding: 14px 10px; border-radius: 12px;
    background: #f4f5f7; color: var(--ink); font-size: 15px; font-weight: 700;
    transition: .15s;
}
.sw-onboard-opts a:hover { background: var(--pink); color: #fff; text-decoration: none; }
.sw-onboard-note { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---- Bộ lọc nhanh ---- */
.sw-modal {
    position: fixed; inset: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(17, 24, 39, .58);
}
.sw-modal[hidden] { display: none; }
.sw-modal-box { background: #fff; border-radius: 18px; padding: 22px; max-width: 400px; width: 100%; }
.sw-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sw-modal-head h2 { margin: 0; font-size: 19px; font-weight: 800; color: var(--ink); }
.sw-modal-close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted); cursor: pointer; }
.sw-modal-box select, .sw-modal-box input[type=number] {
    width: 100%; padding: 11px 12px; border: 1.5px solid #e3e6ea; border-radius: 10px; font-size: 15px;
}
.sw-modal-foot { display: flex; gap: 10px; margin-top: 20px; }
.sw-modal-foot .btn { flex: 1; text-align: center; }

/* ---- Hộp ghép đôi ---- */
.sw-match {
    position: fixed; inset: 0; z-index: 320;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: linear-gradient(160deg, rgba(233,30,140,.95), rgba(120,30,180,.95));
}
.sw-match[hidden] { display: none; }
.sw-match-inner { text-align: center; color: #fff; max-width: 420px; }
.sw-match-title { margin: 0 0 26px; font-size: 34px; font-weight: 900; font-style: italic; }
.sw-match-avatars { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 22px; }
.sw-match-avatars img {
    width: 108px; height: 108px; border-radius: 50%; object-fit: cover;
    border: 4px solid #fff; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.sw-match-heart { display: inline-flex; }
.sw-match-heart svg { width: 40px; height: 40px; fill: #fff; stroke: none; animation: sw-dap 1s ease-in-out infinite; }
@keyframes sw-dap { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.sw-match-text { margin: 0 0 24px; font-size: 17px; }
.sw-match-actions { display: flex; flex-direction: column; gap: 10px; }
.sw-match-actions .btn { padding: 13px 24px; border-radius: 999px; }
.sw-match-actions .btn-ghost { background: rgba(255,255,255,.18); color: #fff; border: 0; }

/* ---- Xé đôi khi bỏ qua ----
   Hai bản sao của thẻ, mỗi bản bị cắt theo một đường răng cưa lệch nhau,
   rồi trượt về hai phía. Nhìn như tờ giấy bị xé làm đôi. */
.sw-tear { position: fixed; z-index: 305; pointer-events: none; overflow: hidden; }
.sw-tear-half {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    border-radius: 20px;
}
.sw-tear-half.tren {
    clip-path: polygon(0 0, 100% 0, 100% 44%, 82% 49%, 64% 43%, 46% 50%, 28% 44%, 10% 51%, 0 46%);
    animation: sw-xe-tren .62s cubic-bezier(.36, .07, .3, .95) forwards;
}
.sw-tear-half.duoi {
    clip-path: polygon(0 46%, 10% 51%, 28% 44%, 46% 50%, 64% 43%, 82% 49%, 100% 44%, 100% 100%, 0 100%);
    animation: sw-xe-duoi .62s cubic-bezier(.36, .07, .3, .95) forwards;
}
@keyframes sw-xe-tren {
    0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(-58%, -14%) rotate(-13deg); opacity: 0; }
}
@keyframes sw-xe-duoi {
    0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
    100% { transform: translate(-46%, 18%) rotate(9deg); opacity: 0; }
}

/* ---- Tim bung khi thích ---- */
.sw-burst { position: fixed; z-index: 310; pointer-events: none; }
.sw-burst svg { width: 42px; height: 42px; fill: #ff3b7f; animation: sw-bay .9s ease-out forwards; }
@keyframes sw-bay {
    0%   { transform: scale(.4) translateY(0); opacity: 1; }
    60%  { transform: scale(1.25) translateY(-60px); opacity: .95; }
    100% { transform: scale(.85) translateY(-140px); opacity: 0; }
}

/* Màn hình thấp (laptop nhỏ): bỏ bớt phần đầu để thẻ có chỗ */
@media (min-width: 561px) and (max-height: 820px) {
    .discover-page .breadcrumb { display: none; }
    .discover-head { margin-bottom: 6px; }
    .discover-head h1 { font-size: 19px; margin-bottom: 2px; }
    .discover-head p { display: none; }
    .sw-toolbar { margin-bottom: 6px; }
    .sw-hint { display: none; }
    .sw-controls { margin-top: 14px; }
    .sw-btn { width: 54px; height: 54px; }
    .sw-btn svg { width: 23px; height: 23px; }
    .sw-btn-undo, .sw-btn-info { width: 42px; height: 42px; }
}

@media (max-width: 560px) {
    .discover-page { padding: 0; }
    .sw-stage { border-radius: 0; padding: var(--sw-pad) 10px 0; }
    .sw-tabbar { margin: var(--sw-gap) -10px 0; }
    .discover-page, body.is-bare { --sw-pad: 10px; --sw-gap: 8px; }
    .sw-deck, .sw-card, .sw-detail { border-radius: 18px; }
    .discover-head { margin-bottom: 10px; }
    .discover-head h1 { font-size: 21px; }
    .discover-head p { display: none; }
    .sw-stage { max-width: 100%; }
            .sw-facts { grid-template-columns: 1fr; }

    .sw-controls { padding: 12px 0 4px; gap: 12px; }
    .sw-hint { display: none; }
    .sw-match-avatars img { width: 88px; height: 88px; }
    .sw-match-title { font-size: 28px; }
}

/* ---------------------------- Trang Tâm sự ----------------------------
   Dùng chung dải tab và thanh sắp xếp với trang Hẹn hò; thẻ riêng vì có
   thêm chủ đề muốn chia sẻ và lời nhắn ngắn. */

.confide-page { padding: 6px 0 36px; }
.confide-head { margin: 0 0 20px; }
.confide-head h1 {
    margin: 0 0 8px; font-size: 28px; font-weight: 800;
    line-height: 1.25; color: var(--ink); letter-spacing: -.2px;
}
.confide-head p { margin: 0; max-width: 800px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Hàng lọc theo chủ đề — nối liền bên dưới thanh sắp xếp thành một khối trắng */
.confide-page .dating-bar { border-radius: 0; margin-bottom: 0; }
.topic-row {
    display: flex; flex-wrap: wrap; gap: 8px;
    background: var(--card); border-top: 1px solid #f0f1f4;
    border-radius: 0 0 14px 14px; padding: 13px 20px 15px; margin: 0 0 20px;
    box-shadow: 0 2px 12px rgba(17, 24, 39, .06);
}
.topic-row a {
    padding: 8px 15px; border-radius: 999px;
    background: #f4f5f7; border: 1.5px solid transparent;
    color: var(--muted); font-size: 14px; font-weight: 600; transition: .15s;
}
.topic-row a:hover { background: #eceef1; color: var(--ink); text-decoration: none; }
.topic-row a.on { background: #fdeef6; border-color: #f6c8de; color: var(--pink); }

.confide-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.ccard {
    display: flex; flex-direction: column;
    background: var(--card); border-radius: 16px; overflow: hidden;
    box-shadow: 0 3px 14px rgba(17, 24, 39, .08);
    transition: box-shadow .2s ease, opacity .28s ease, transform .28s ease;
}
.ccard:hover { box-shadow: 0 8px 24px rgba(17, 24, 39, .14); }
.ccard.card-gone { opacity: 0; transform: scale(.96); }

.ccard-photo { position: relative; display: block; background: #f1f2f4; }
.ccard-photo img { width: 100%; aspect-ratio: 1 / 1; max-height: 240px; object-fit: cover; display: block; }
.ccard-tags { position: absolute; top: 9px; left: 9px; display: flex; flex-wrap: wrap; gap: 5px; z-index: 2; }

.ccard-body { display: flex; flex-direction: column; flex: 1; padding: 12px 14px 14px; }
.ccard-name {
    margin: 0 0 5px; font-size: 16px; font-weight: 800; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ccard-name a { color: var(--ink); }
.ccard-name a:hover { color: var(--pink); text-decoration: none; }

.ccard-place { display: flex; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.ccard-place .mi { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ccard-place .ic {
    width: 15px; height: 15px; flex: 0 0 15px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}

/* Chủ đề muốn chia sẻ — điểm nhấn riêng của trang này */
.ccard-topic { margin: 0 0 8px; min-height: 26px; }
.ccard-topic span {
    display: inline-flex; align-items: center; max-width: 100%;
    padding: 5px 11px; border-radius: 8px;
    background: #f3f0ff; color: #6246c8;
    font-size: 12.5px; font-weight: 600; line-height: 1.3;
    /* Giữ một dòng để mọi thẻ cùng chiều cao, chủ đề dài thì cắt bớt */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.ccard-note {
    margin: 0 0 12px; min-height: 38px;
    color: var(--muted); font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.ccard-actions { display: flex; gap: 7px; margin-top: auto; }
.btn-confide {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 6px; border-radius: 999px; cursor: pointer;
    font-size: 13px; font-weight: 700; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.btn-confide .ic {
    width: 16px; height: 16px; flex: 0 0 16px; pointer-events: none;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.btn-confide-chat { background: #6246c8; border: 1.5px solid #6246c8; color: #fff; }
.btn-confide-chat:hover { background: #5238b4; border-color: #5238b4; color: #fff; text-decoration: none; }
.btn-confide-like { background: var(--card); border: 1.5px solid #e3e6ea; color: #46505f; }
.btn-confide-like:hover { border-color: #c9ced5; background: #f7f8fa; color: #46505f; text-decoration: none; }
.btn-confide-like.is-liked { background: #fdeef6; border-color: #f6c8de; color: var(--pink); }
.btn-confide-like.is-liked .ic { fill: currentColor; }
.btn-confide:active { transform: scale(.97); }
.btn-confide:disabled { opacity: .55; cursor: default; transform: none; }

@media (max-width: 1200px) { .confide-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .confide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .confide-page { padding: 4px 0 28px; }
    .confide-head h1 { font-size: 22px; }
    .confide-head p { font-size: 14.5px; }
    .topic-row {
        gap: 6px; overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: none; padding: 11px 14px 13px;
    }
    .topic-row::-webkit-scrollbar { display: none; }
    .topic-row a { white-space: nowrap; padding: 7px 13px; font-size: 13.5px; }
    .confide-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .ccard-body { padding: 10px 12px 12px; }
    .ccard-name { font-size: 15px; }
    .ccard-note { display: none; }
    .btn-confide { font-size: 12.5px; padding: 8px 5px; }
}

/* ---------------------------- Trang Hẹn hò ----------------------------
   Bố cục theo khối trắng bo tròn trên nền xám của site: phần đầu, dải tab,
   thanh sắp xếp, lưới hồ sơ, rồi tới mẹo an toàn và bài giới thiệu. */

.dating-page { padding: 6px 0 36px; }

.dating-head { margin: 0 0 20px; }
.dating-head h1 {
    margin: 0 0 8px; font-size: 28px; font-weight: 800;
    line-height: 1.25; color: var(--ink); letter-spacing: -.2px;
}
.dating-head p { margin: 0; max-width: 780px; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Khối trắng bọc tab + thanh sắp xếp cho gọn mắt */
.dating-tabs {
    display: flex; gap: 26px; flex-wrap: wrap;
    background: var(--card); border-radius: 14px 14px 0 0;
    padding: 4px 20px 0; margin: 0;
    box-shadow: 0 2px 12px rgba(17, 24, 39, .06);
}
.dating-tabs a {
    position: relative; padding: 14px 2px 13px;
    color: var(--muted); font-size: 15px; font-weight: 700;
    border-bottom: 2px solid transparent; transition: color .15s;
}
.dating-tabs a:hover { color: var(--ink); text-decoration: none; }
.dating-tabs a.on { color: var(--pink); border-bottom-color: var(--pink); }

.dating-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    background: var(--card); border-top: 1px solid #f0f1f4;
    border-radius: 0 0 14px 14px; padding: 12px 20px; margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(17, 24, 39, .06);
}
.dating-bar .result-total { display:none; margin: 0; font-size: 14.5px; color: var(--muted); }
.dating-bar .result-total b { color: var(--ink); font-weight: 800; }

.sort-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.sort-tabs span { color: #9aa0a8; margin-right: 2px; }
.sort-tabs a {
    padding: 7px 14px; border-radius: 8px;
    color: var(--muted); font-weight: 600; transition: .15s;
}
.sort-tabs a:hover { background: #f4f5f7; color: var(--ink); text-decoration: none; }
.sort-tabs a.on { background: #fdeef6; color: var(--pink); }

/* Nhãn tích xanh trên thẻ */
.tag-verified {
    display: inline-flex; align-items: center; gap: 5px;
    background: #2f80ed; padding-left: 9px;
}
.tag-verified .ic {
    width: 13px; height: 13px; flex: 0 0 13px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}

/* Mẹo an toàn */
.safety-box {
    margin-top: 30px; padding: 24px;
    background: var(--card); border-radius: 16px;
    box-shadow: 0 2px 14px rgba(17, 24, 39, .07);
}
.safety-box h2 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 18px; font-size: 19px; font-weight: 800; color: var(--ink);
}
.safety-box h2::before {
    content: ""; width: 4px; height: 18px; border-radius: 3px; background: var(--pink);
}
.safety-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.safety-item {
    padding: 16px; border-radius: 12px;
    background: #fbfbfc; border: 1px solid #f0f1f4;
}
.safety-item .ic {
    width: 22px; height: 22px; padding: 8px; margin-bottom: 10px;
    border-radius: 50%; background: #fdeef6; box-sizing: content-box;
    fill: none; stroke: var(--pink); stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round; display: block;
}
.safety-item h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.safety-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* Bài giới thiệu, mặc định thu gọn */
.seo-box {
    margin-top: 20px; padding: 24px;
    background: var(--card); border-radius: 16px;
    box-shadow: 0 2px 14px rgba(17, 24, 39, .07);
}
.seo-box h2 {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 14px; font-size: 19px; font-weight: 800; color: var(--ink);
}
.seo-box h2::before {
    content: ""; width: 4px; height: 18px; border-radius: 3px; background: var(--pink);
}
.seo-text {
    position: relative; overflow: hidden;
    transition: max-height .35s ease;
    color: var(--muted); font-size: 15px; line-height: 1.75;
}
/* Chỉ giới hạn chiều cao khi CHƯA mở — cách này không phụ thuộc thứ tự khai báo */
.seo-text:not(.open) { max-height: 92px; }
.seo-text::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 52px;
    background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
}
.seo-text.open::after { opacity: 0; }
.seo-text p { margin: 0 0 13px; }
.seo-text p:last-child { margin-bottom: 0; }
.seo-toggle {
    margin-top: 12px; padding: 9px 20px; border-radius: 8px; cursor: pointer;
    background: #fdeef6; border: 0; color: var(--pink);
    font-size: 14.5px; font-weight: 700; transition: background .15s;
}
.seo-toggle:hover { background: #fbe0ee; }

@media (max-width: 900px) {
    .safety-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .dating-page { padding: 12px 0 28px; }
    .dating-head h1 { font-size: 22px; }
    .dating-head p { font-size: 14.5px; }

    /* Dải tab cuộn ngang thay vì xuống nhiều dòng */
    .dating-tabs {
        gap: 18px; padding: 2px 14px 0;
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .dating-tabs::-webkit-scrollbar { display: none; }
    .dating-tabs a { padding: 12px 2px 11px; font-size: 14.5px; white-space: nowrap; }

    .dating-bar { padding: 10px 14px; gap: 8px; }
    .sort-tabs { font-size: 13.5px; gap: 4px; }
    .sort-tabs a { padding: 6px 11px; }

    .safety-box, .seo-box { padding: 16px 14px; }
    .safety-grid { grid-template-columns: 1fr; gap: 12px; }
    .safety-item { padding: 13px; }
    .seo-box h2, .safety-box h2 { font-size: 17px; }
}

/* ------------------------- Trang tìm kiếm hai cột ------------------------- */

.search-head { padding: 26px 0 20px; }
.search-head h1 { margin: 0 0 8px; font-size: 34px; font-weight: 800; color: #1c2330; }
.search-head p { margin: 0; color: #6b7280; font-size: 16px; }

/* Bố cục đặt theo vùng để cùng một cấu trúc HTML dùng được cho hai cách sắp xếp:
   màn rộng — bộ lọc cột trái, thanh công cụ và kết quả cột phải;
   màn hẹp  — thanh công cụ trên cùng, bộ lọc xổ ra ngay dưới, rồi tới danh sách. */
.search-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas: "filter toolbar" "filter results";
    grid-template-rows: auto 1fr;
    column-gap: 22px;
    align-items: start;
    padding-bottom: 34px;
}
.filter-panel   { grid-area: filter; }
.search-toolbar { grid-area: toolbar; }
.result-panel   { grid-area: results; }

/* Thanh công cụ và khối kết quả dính liền thành một tấm trên màn rộng */
.search-toolbar {
    background: #fff; border-radius: 16px 16px 0 0; padding: 20px 20px 4px;
    box-shadow: 0 3px 16px rgba(17, 24, 39, .08); clip-path: inset(-16px -16px 0 -16px);
}
.btn-filter-toggle { display: none; }

/* ---- Cột bộ lọc ---- */
.filter-panel {
    background: #fff; border-radius: 16px; padding: 20px;
    box-shadow: 0 3px 16px rgba(17, 24, 39, .08);
    position: sticky; top: 78px;
    max-height: calc(100vh); overflow-y: auto;
}
.filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.filter-head h2 {
    display: flex; align-items: center; gap: 9px;
    margin: 0; font-size: 20px; font-weight: 800; color: #1c2330;
}
.filter-head .ic { width: 20px; height: 20px; fill: none; stroke: #4a90e2; stroke-width: 1.9; stroke-linejoin: round; }
.filter-clear { font-size: 14px; font-weight: 600; color: #4a90e2; }

.filter-group { border-top: 1px solid #eef0f3; margin-top: 14px; padding-top: 4px; }
.filter-group:first-of-type { border-top: 0; }
.filter-group-head {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: none; border: 0; padding: 12px 0; cursor: pointer;
    font-size: 16px; font-weight: 700; color: #1c2330; text-align: left;
}
.filter-group-head .caret {
    width: 18px; height: 18px; fill: none; stroke: #6b7280; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
}
.filter-group-head.is-closed .caret { transform: rotate(180deg); }
.filter-group-body { padding-bottom: 6px; }

.filter-label { display: block; margin: 12px 0 7px; font-size: 14px; font-weight: 600; color: #46505f; }
.filter-panel select,
.filter-panel input[type=number] {
    width: 100%; padding: 11px 12px; border: 1.5px solid #e3e6ea; border-radius: 10px;
    font-size: 15px; color: #1c2330; background: #fff;
}
.filter-panel select:focus,
.filter-panel input[type=number]:focus { outline: none; border-color: #4a90e2; }

.range-row { display: flex; align-items: center; gap: 8px; }

/* Khu vực đã cố định theo đường dẫn (trang /ha-noi) */
.filter-fixed {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 12px; border: 1.5px solid #e3e6ea; border-radius: 10px;
    background: #f7f8fa; font-size: 15px; font-weight: 600; color: #1c2330;
}
.filter-fixed a { font-size: 14px; font-weight: 600; color: #4a90e2; }
.range-row span { color: #9ca3af; }

.pick-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pick {
    display: inline-flex; align-items: center; cursor: pointer;
    padding: 8px 14px; border-radius: 10px; background: #f3f4f6;
    font-size: 14px; font-weight: 600; color: #6b7280; transition: .15s;
}
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick:hover { background: #e9ebef; }
.pick.on { background: #e7f0fd; color: #2f6fc4; }
.pick-reset { font-size: 13px; color: #4a90e2; }

.filter-checks { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.filter-checks label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: #46505f; cursor: pointer; }

.btn-apply {
    width: 100%; margin-top: 18px; padding: 14px; border: 0; border-radius: 12px;
    background: #4a90e2; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
    transition: background .18s;
}
.btn-apply:hover { background: #3a7fd0; }

/* ---- Cột kết quả ---- */
.result-panel {
    background: #fff; border-radius: 0 0 16px 16px; padding: 4px 20px 20px;
    box-shadow: 0 3px 16px rgba(17, 24, 39, .08); clip-path: inset(0 -16px -16px -16px);
}
.result-top { display: flex; align-items: center; justify-content: right; gap: 14px; flex-wrap: wrap; }
.result-total { display:none; margin: 0; font-size: 16px; color: #6b7280; }
.result-total b { color: #1c2330; font-weight: 800; }

.result-tools { display: flex; align-items: center; gap: 10px; }
.sort-select {
    padding: 11px 14px; border: 1.5px solid #e3e6ea; border-radius: 12px;
    font-size: 15px; color: #1c2330; background: #fff; cursor: pointer;
}
.view-switch { display: flex; gap: 4px; padding: 4px; border: 1.5px solid #e3e6ea; border-radius: 12px; }
.view-switch a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 34px; border-radius: 9px; color: #9ca3af; transition: .15s;
}
.view-switch a:hover { background: #f3f4f6; }
.view-switch a.on { background: #4a90e2; color: #fff; }
.view-switch .ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }
.view-switch a.on .ic rect { fill: currentColor; stroke: none; }

.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 16px 0 4px; }
.chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 14px; border-radius: 999px; background: #eef4fd;
    font-size: 14px; font-weight: 600; color: #2f6fc4;
}
.chip:hover { background: #dfeafb; text-decoration: none; }
.chip span { font-size: 15px; opacity: .7; }
.chip-clear { font-size: 14px; font-weight: 600; color: #4a90e2; }

.result-panel .member-grid { margin-top: 18px; }
.result-panel .empty { margin: 26px 0; color: #6b7280; }

@media (max-width: 1024px) {
    .search-layout { grid-template-columns: 250px 1fr; column-gap: 16px; }
}

@media (max-width: 860px) {
    /* Màn hẹp: một cột, bộ lọc ẩn cho tới khi bấm nút "Bộ lọc" */
    .search-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "toolbar" "filter" "results";
        row-gap: 14px;
    }
    .search-head h1 { font-size: 27px; }

    .search-toolbar { border-radius: 16px; padding: 16px 14px; clip-path: none; }
    .result-panel { border-radius: 16px; padding: 16px 14px; clip-path: none; }

    .result-top { flex-direction: column; align-items: stretch; gap: 12px; }
    .result-tools { flex-wrap: wrap; }
    .sort-select { flex: 1 1 auto; }
    .view-switch { order: 3; align-self: flex-start; }

    /* Nút mở bộ lọc */
    .btn-filter-toggle {
        display: inline-flex; align-items: center; gap: 9px;
        padding: 11px 18px; border-radius: 12px; cursor: pointer;
        background: #fff; border: 1.5px solid #e3e6ea;
        font-size: 15px; font-weight: 700; color: #1c2330;
    }
    .btn-filter-toggle .ic { width: 18px; height: 18px; fill: none; stroke: #4a90e2; stroke-width: 1.9; stroke-linejoin: round; }
    .btn-filter-toggle[aria-expanded="true"] { border-color: #d9a441; color: #2f6fc4; }
    .btn-filter-toggle[aria-expanded="true"] .ic { stroke: #2f6fc4; }

    /* Panel bộ lọc chỉ hiện khi được mở */
    .filter-panel { position: static; max-height: none; display: none; }
    .search-layout.filters-open .filter-panel { display: block; }
    .filter-panel .btn-apply { position: sticky; bottom: 0; }
}

.profile-photo { position: relative; }
/* Nhãn trạng thái nằm cùng hàng với giới tính / tuổi / khu vực */
/* Căn giữa chữ theo chiều dọc: hàng thẻ kéo mọi ô cao bằng nhau nên nếu để
   khối thường, chữ cỡ nhỏ sẽ dồn lên sát mép trên */
.profile-tags .tag {
    display: inline-flex; align-items: center;
    padding: 5px 13px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: #fff; line-height: 1;
}

/* ------------------- Thẻ hồ sơ dùng chung (trang chủ, tìm kiếm, khu vực) -------------------
   Hai chế độ: lưới (mặc định) và danh sách khi lưới cha có thêm lớp .is-list. */

.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }

.pcard {
    display: flex; flex-direction: column;
    background: #fff; border-radius: 7px; overflow: hidden;
    box-shadow: 0 3px 16px rgba(17, 24, 39, .09);
    transition: box-shadow .2s ease, opacity .28s ease, transform .28s ease;
}
.pcard:hover { box-shadow: 0 8px 26px rgba(17, 24, 39, .15); }
.pcard.card-gone { opacity: 0; transform: scale(.96); }

.pcard-photo { position: relative; display: block; background: #f1f2f4; }
.pcard-photo img { width: 100%; aspect-ratio: 1 / 1; max-height: 230px; object-fit: cover; display: block; }

.pcard-tags { position: absolute; top: 12px; left: 12px; display: none; flex-wrap: wrap; gap: 7px; z-index: 2; }
.pcard-tags .tag, .swipe-badges .tag, .ccard-tags .tag {
    padding: 6px 13px; border-radius: 999px; line-height: 1;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    text-transform: uppercase; color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.pcard-gender {
    position: absolute; right: 10px; bottom: 10px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
}
.pcard-gender .ic { width: 20px; height: 20px; }
.pcard-gender.is-male, .pcard-gender-inline.is-male     { background: #4a90e2; }
.pcard-gender.is-female, .pcard-gender-inline.is-female { background: #e9508c; }
/* Huy hiệu giới tính cạnh tên: chỉ dùng ở chế độ danh sách */
.pcard-gender-inline {
    display: none; width: 26px; height: 26px; border-radius: 50%;
    align-items: center; justify-content: center; color: #fff; vertical-align: middle;
}
.pcard-gender-inline .ic { width: 15px; height: 15px; }
.pcard-gender .ic, .pcard-gender-inline .ic {
    fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round;
}

.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 10px 12px 12px; }
.pcard-name { margin: 0 0 5px; font-size: 16px; font-weight: 800; line-height: 1.25; }
.pcard-name a { color: #1c2330; }
.pcard-name a:hover { color: var(--pink); text-decoration: none; }

.pcard-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    margin: 0 0 4px; font-size: 13px; color: #6b7280;
}
.pcard-meta .ic {
    width: 16px; height: 16px; flex: 0 0 16px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
/* Mỗi cặp biểu tượng + chữ là một khối, xuống dòng thì đi cùng nhau */
.pcard-meta .mi, .swipe-meta .mi {
    display: inline-flex; align-items: center; gap: 5px;
    white-space: nowrap; max-width: 100%;
}
.pcard-meta .mi { margin-right: 9px; }
.swipe-meta .mi { margin-right: 8px; }
.pcard-meta .mi:last-child, .swipe-meta .mi:last-child { margin-right: 0; }

.pcard-bio {
    margin: 6px 0 10px; color: #6b7280; font-size: 13px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 39px;
}

.pcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; min-height: 25px; }
.pcard-chips span {
    background: #f3f4f6; color: #4b5563; border-radius: 7px;
    padding: 4px 9px; font-size: 11.5px; font-weight: 600;
}

.pcard-actions { display: flex; gap: 7px; margin-top: auto; }

/* Nút hành động trên thẻ hồ sơ (trang chủ, tìm kiếm, khu vực) */
.btn-swipe {
    flex: 1 1 0; min-width: 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 6px; border-radius: 999px; cursor: pointer;
    font-size: 13.5px; font-weight: 700; line-height: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background .18s, border-color .18s, color .18s, transform .12s;
}
.btn-swipe .ic {
    width: 17px; height: 17px; flex: 0 0 17px; pointer-events: none;
    fill: none; stroke: currentColor; stroke-width: 2.1;
    stroke-linecap: round; stroke-linejoin: round;
}
.btn-swipe-pass { background: #fff; border: 1.5px solid #dfe3e8; color: #46505f; }
.btn-swipe-pass:hover { border-color: #b9c0c9; background: #f7f8fa; color: #46505f; text-decoration: none; }
.btn-swipe-like { background: #4a90e2; border: 1.5px solid #4a90e2; color: #fff; }
.btn-swipe-like:hover { background: #3a7fd0; border-color: #3a7fd0; color: #fff; text-decoration: none; }
/* Đã gửi lượt thích: nền nhạt để phân biệt với chưa thích */
.btn-swipe-like.is-liked { background: #eaf1fb; border-color: #cddffa; color: #2f6fc4; }
.btn-swipe-like.is-liked:hover { background: #dfeafb; border-color: #b9d2f7; color: #2f6fc4; }
.btn-swipe-like.is-liked .ic { fill: currentColor; }
.btn-swipe:active { transform: scale(.97); }
.btn-swipe:disabled { opacity: .55; cursor: default; transform: none; }

/* ---------------- Lưới gọn ở trang chủ ----------------
   Trang chủ chỉ để lướt nhanh nên xếp 5 thẻ một hàng và lược bớt phần phụ;
   bấm vào ảnh hoặc tên là sang trang hồ sơ đầy đủ. */
.member-grid.is-compact { grid-template-columns: repeat(5, 1fr); gap: 12px; }
/* Ảnh vuông thay vì khổ dọc 3:4 để mỗi thẻ bớt cao */
.member-grid.is-compact .pcard-photo img { aspect-ratio: 1 / 1; max-height: 230px; }
.member-grid.is-compact .pcard-body { padding: 10px 12px 12px; }
.member-grid.is-compact .pcard-name { font-size: 16px; margin-bottom: 5px; }
.member-grid.is-compact .pcard-meta { font-size: 13px; gap: 4px; margin-bottom: 4px; }
.member-grid.is-compact .pcard-meta .ic { width: 15px; height: 15px; flex-basis: 15px; }
.member-grid.is-compact .pcard-meta .ic + span { margin-right: 6px; }
.member-grid.is-compact .pcard-bio,
.member-grid.is-compact .pcard-chips { display: none; }
.member-grid.is-compact .pcard-tags .tag { padding: 5px 10px; font-size: 10.5px; }
.member-grid.is-compact .pcard-gender { width: 34px; height: 34px; right: 10px; bottom: 10px; }
.member-grid.is-compact .pcard-gender .ic { width: 18px; height: 18px; }
.member-grid.is-compact .btn-swipe { padding: 9px 6px; font-size: 13.5px; gap: 6px; }
.member-grid.is-compact .btn-swipe .ic { width: 17px; height: 17px; flex-basis: 17px; }
.member-grid.is-compact .pcard-actions { gap: 7px; margin-top: 8px; }

@media (max-width: 1200px) { .member-grid.is-compact { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 992px)  { .member-grid.is-compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .member-grid.is-compact { grid-template-columns: repeat(2, 1fr); } }

/* ---------------- Chế độ danh sách ---------------- */
.member-grid.is-list { grid-template-columns: 1fr; gap: 14px; }
.member-grid.is-list .pcard { flex-direction: row; align-items: stretch; }
.member-grid.is-list .pcard-photo { flex: 0 0 190px; width: 190px; }
.member-grid.is-list .pcard-photo img { height: 100%; max-height: none; aspect-ratio: auto; }
.member-grid.is-list .pcard-gender { display: none; }
.member-grid.is-list .pcard-gender-inline { display: inline-flex; }
/* Nhãn trạng thái chuyển sang góc phải của phần thân cho giống mẫu */
.member-grid.is-list .pcard-tags { left: auto; right: 18px; top: 18px; }
.member-grid.is-list .pcard-body { padding: 18px 20px; }
.member-grid.is-list .pcard-bio { -webkit-line-clamp: 1; min-height: 0; margin-bottom: 14px; }
.member-grid.is-list .pcard-actions { justify-content: flex-start; }
.member-grid.is-list
@media (max-width: 560px) {
    .member-grid { grid-template-columns: 1fr; gap: 14px; }

    /* Trang chủ trên điện thoại: giữ thẻ dọc nhưng xếp hai cột cho gọn,
       lược bớt phần phụ để mỗi thẻ không chiếm hết màn hình. */
    .member-grid.is-compact { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .member-grid.is-compact .pcard-photo img { aspect-ratio: 1 / 1; max-height: none; }
    .member-grid.is-compact .pcard-body { padding: 11px 12px 13px; }
    .member-grid.is-compact .pcard-name { font-size: 15.5px; margin-bottom: 6px; }
    .member-grid.is-compact .pcard-meta { font-size: 13px; gap: 4px; margin-bottom: 5px; }
    .member-grid.is-compact .pcard-meta .ic { width: 14px; height: 14px; flex-basis: 14px; }
    .member-grid.is-compact .pcard-meta .ic + span { margin-right: 5px; }
    .member-grid.is-compact .pcard-bio,
    .member-grid.is-compact .pcard-chips,
    .member-grid.is-compact .pcard-actions { display: none; }
    .member-grid.is-compact .pcard-tags { top: 8px; left: 8px; gap: 5px; }
    .member-grid.is-compact .pcard-tags .tag { padding: 4px 9px; font-size: 10px; }
    .member-grid.is-compact .pcard-gender { width: 30px; height: 30px; right: 8px; bottom: 8px; }
    .member-grid.is-compact .pcard-gender .ic { width: 16px; height: 16px; }
    .pcard-photo img { max-height: 420px; }
    .pcard-name { font-size: 18.5px; }
    /* Màn hình hẹp: chế độ danh sách thu về dạng ảnh nhỏ bên trái */
    .member-grid.is-list .pcard-photo { flex: 0 0 118px; width: 118px; }
    .member-grid.is-list .pcard-body { padding: 12px 14px; }
    .member-grid.is-list .pcard-tags { right: 10px; top: 10px; }
    .member-grid.is-list .pcard-chips { display: none; }
    .member-grid.is-list}

.block-sub { text-align: center; color: var(--muted); margin: -8px 0 14px; }



/* ------------------------------ Chat: icon + ảnh ------------------------------ */

.chat-form { position: relative; align-items: center; }

/* Nút đính ảnh bên trái ô nhập */
.chat-attach {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    background: #f2f3f5; display: grid; place-items: center;
    cursor: pointer; font-size: 19px; margin: 0; transition: background .15s;
}
.chat-attach:hover { background: #fce1ef; }

/* Ô nhập bọc nút icon nằm bên trong, góc phải */
.chat-input-wrap { position: relative; flex: 1; min-width: 0; }
.chat-input-wrap input {
    width: 100%; padding: 12px 46px 12px 16px; border: 1px solid #dcdce2;
    border-radius: 24px; background: #f6f7f9; font-size: 15px;
}
.chat-input-wrap input:focus {
    outline: none; border-color: var(--pink); background: #fff;
    box-shadow: 0 0 0 3px rgba(233,30,140,.1);
}
.chat-emoji-btn {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; font-size: 22px;
    color: #9aa0a6; line-height: 1; padding: 2px 6px;
}
.chat-emoji-btn:hover { color: var(--amber); }

/* Bảng chọn icon */
.emoji-panel {
    position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 60;
    width: min(340px, 86vw); background: #fff; border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.2); border: 1px solid var(--line);
    overflow: hidden;
}
.emoji-panel[hidden] { display: none; }
.emoji-tabs { display: flex; border-bottom: 1px solid var(--line); background: #fafafb; }
.emoji-tabs button {
    flex: 1; background: none; border: 0; padding: 10px 4px; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--muted); font-family: inherit;
    border-bottom: 2px solid transparent;
}
.emoji-tabs button:hover { color: var(--pink); }
.emoji-tabs button.active { color: var(--pink); border-bottom-color: var(--pink); }

.emoji-list {
    display: grid; grid-template-columns: repeat(8, 1fr);
    gap: 2px; padding: 10px; max-height: 220px; overflow-y: auto;
}
.emoji-item {
    background: none; border: 0; cursor: pointer; font-size: 22px;
    padding: 4px 0; border-radius: 8px; line-height: 1.3;
}
.emoji-item:hover { background: #fdf0f7; transform: scale(1.15); }

/* Tin nhắn chỉ có icon thì phóng to, ảnh thì bỏ nền bong bóng */
.chat-msg .emoji-only { font-size: 34px; line-height: 1.25; }
.chat-msg.is-image { background: none; padding: 0; max-width: 260px; }
.chat-msg.is-image img { border-radius: 14px; width: 100%; }
.chat-msg.is-image small { display: block; padding: 4px 6px 0; }

/* Trạng thái "Đã xem" dưới khung nhập */
.chat-seen { margin: 6px 4px 0; text-align: right; font-size: 12px; color: var(--muted); min-height: 16px; }

/* ============================== Chat nổi ============================== */

.chat-widget { position: fixed; right: 22px; bottom: 22px; z-index: 90; }
/* Trang toàn màn hình: nâng bong bóng lên ngang hàng cụm nút, nép mép phải khung
   ảnh, để không đè lên dải thông tin lẫn thanh điều hướng ở đáy. */
body.is-bare .chat-widget {
    bottom: calc(var(--sw-bar, 73px) + var(--sw-tab, 63px) + var(--sw-gap, 10px) + 17px);
    right: 22px;
    /* Màn rộng: khung chỉ 560px ở giữa, bám theo mép phải khung thay vì mép màn */
    right: max(22px, calc(50vw - 280px + 14px));
}
body.is-bare .cw-bubble { width: 48px; height: 48px; font-size: 21px; }
body.is-bare .cw-badge { min-width: 20px; height: 20px; font-size: 11px; border-width: 2px; }
/* Khi xổ khung chat ra thì trả bong bóng về đáy cho khung chat có chỗ */
body.is-bare .chat-widget.open { bottom: 22px; right: 22px; }

/* Bong bóng sát mép phải, có vòng sáng nhẹ khi có tin chưa đọc */
.cw-bubble {
    position: relative; width: 60px; height: 60px; border-radius: 50%; border: 0;
    background: linear-gradient(140deg, #ff5fa8, var(--pink) 55%, #c2126f);
    color: #fff; font-size: 26px; cursor: pointer;
    box-shadow: 0 8px 24px rgba(233,30,140,.45), 0 2px 6px rgba(0,0,0,.12);
    display: grid; place-items: center;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.cw-bubble:hover { transform: scale(1.08) rotate(-4deg); box-shadow: 0 12px 30px rgba(233,30,140,.55); }
.cw-bubble:active { transform: scale(.96); }
.chat-widget.open .cw-bubble { transform: scale(.88); opacity: .8; }
.cw-bubble-icon { line-height: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.2)); }

.cw-badge {
    position: absolute; top: -3px; right: -3px; min-width: 23px; height: 23px;
    padding: 0 7px; border-radius: 12px; background: #ff3b30; color: #fff;
    font-size: 12px; font-weight: 700; display: grid; place-items: center;
    border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(255,59,48,.5);
    animation: cw-pulse 2s ease-in-out infinite;
}
/* display: grid ở trên đè mất thuộc tính hidden, nên số 0 vẫn hiện — chặn lại */
.cw-badge[hidden] { display: none; }
@keyframes cw-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
}

/* Khung xổ ra */
.cw-panel {
    position: absolute; right: 0; bottom: 76px;
    width: min(376px, calc(100vw - 28px)); height: min(560px, calc(100vh - 150px));
    background: #fff; border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(0,0,0,.24), 0 4px 12px rgba(0,0,0,.08);
    display: flex; flex-direction: column;
    animation: cw-pop .22s cubic-bezier(.34,1.4,.64,1);
    transform-origin: bottom right;
}
.cw-panel[hidden] { display: none; }
@keyframes cw-pop {
    from { opacity: 0; transform: translateY(16px) scale(.94); }
    to   { opacity: 1; transform: none; }
}

.cw-view { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cw-view[hidden] { display: none; }

/* Thanh tiêu đề */
.cw-head {
    display: flex; align-items: center; gap: 10px; padding: 13px 14px;
    background: linear-gradient(135deg, #ff5fa8, var(--pink) 60%, #c2126f);
    color: #fff; flex: 0 0 auto; position: relative;
}
.cw-head::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
    background: rgba(255,255,255,.18);
}
.cw-head h3 { margin: 0; font-size: 16.5px; font-weight: 700; flex: 1; letter-spacing: .2px; }
.cw-close, .cw-back {
    background: none; border: 0; color: #fff; cursor: pointer; line-height: 1;
    padding: 2px 6px; border-radius: 8px; opacity: .9; transition: background .15s, opacity .15s;
}
.cw-close:hover, .cw-back:hover { background: rgba(255,255,255,.2); opacity: 1; }
.cw-close { font-size: 25px; }
.cw-back  { font-size: 27px; }
.cw-icon-btn {
    background: rgba(255,255,255,.2); border: 0; color: #fff; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%; font-size: 15px; line-height: 1;
    transition: background .15s, transform .15s;
}
.cw-icon-btn:hover { background: rgba(255,255,255,.36); transform: scale(1.08); }

.cw-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,.55);
}
.cw-peer { flex: 1; min-width: 0; line-height: 1.3; }
.cw-peer b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-peer small { font-size: 12px; opacity: .88; }

/* Thanh cuộn mảnh cho cả danh sách và khung tin */
.cw-list, .cw-body { scrollbar-width: thin; scrollbar-color: #d6d6dd transparent; }
.cw-list::-webkit-scrollbar, .cw-body::-webkit-scrollbar { width: 6px; }
.cw-list::-webkit-scrollbar-thumb, .cw-body::-webkit-scrollbar-thumb {
    background: #d6d6dd; border-radius: 3px;
}
.cw-list::-webkit-scrollbar-thumb:hover, .cw-body::-webkit-scrollbar-thumb:hover { background: #bcbcc6; }

/* Danh sách hội thoại */
.cw-list { flex: 1; overflow-y: auto; min-height: 0; }
.cw-empty { padding: 34px 22px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.7; }
.cw-item {
    display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 14px;
    background: none; border: 0; cursor: pointer; text-align: left; font-family: inherit;
    position: relative; transition: background .15s;
}
.cw-item::after {
    content: ""; position: absolute; left: 69px; right: 14px; bottom: 0;
    height: 1px; background: #f1f1f4;
}
.cw-item:last-child::after { display: none; }
.cw-item:hover { background: #fdf2f8; }
.cw-item-avatar { position: relative; flex: 0 0 auto; }
.cw-item-avatar img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.cw-dot {
    position: absolute; right: 1px; bottom: 2px; width: 13px; height: 13px;
    background: #31c05a; border: 2.5px solid #fff; border-radius: 50%;
}
.cw-item-text { flex: 1; min-width: 0; }
.cw-item-text b { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 1px; }
.cw-item-text small {
    display: block; color: var(--muted); font-size: 13px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cw-item-unread {
    background: var(--pink); color: #fff; border-radius: 12px; min-width: 20px;
    padding: 1px 7px; font-size: 11.5px; font-weight: 700; text-align: center;
}
.cw-foot {
    padding: 11px; text-align: center; border-top: 1px solid #f1f1f4;
    font-size: 13.5px; background: #fafafb; flex: 0 0 auto;
}
.cw-foot a { color: var(--pink); font-weight: 600; }

/* Khung tin nhắn */
.cw-body {
    flex: 1; overflow-y: auto; min-height: 0; padding: 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
    background: linear-gradient(#fafafb, #f5f5f7);
}

/* --- chat riêng --- */
.cw-msg { max-width: 78%; align-self: flex-start; animation: cw-in .2s ease-out; }
.cw-msg.mine { align-self: flex-end; }
@keyframes cw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.cw-msg p {
    margin: 0; padding: 9px 14px; border-radius: 6px 18px 18px 18px;
    background: #fff; color: var(--ink); font-size: 14.5px; line-height: 1.45;
    word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.cw-msg.mine p {
    border-radius: 18px 6px 18px 18px;
    background: linear-gradient(135deg, #ff5fa8, var(--pink)); color: #fff;
    box-shadow: 0 2px 6px rgba(233,30,140,.28);
}
.cw-msg small { display: block; font-size: 11px; color: #9aa0a6; margin-top: 4px; padding: 0 6px; }
.cw-msg.mine small { text-align: right; }
.cw-emoji-only { background: none !important; box-shadow: none !important; font-size: 32px; padding: 0 4px !important; }
.cw-msg.is-image img {
    max-width: 190px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.14);
}

/* --- phòng chat chung: có avatar + tên người gửi --- */
.cw-room-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; animation: cw-in .2s ease-out; }
.cw-room-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.cw-room-avatar {
    width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
    border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.cw-room-col { min-width: 0; }
.cw-room-name {
    display: block; font-size: 11.5px; font-weight: 700; color: #12805c;
    margin-bottom: 3px; padding-left: 6px;
}
.cw-room-name:hover { text-decoration: underline; }
.cw-room-col p {
    margin: 0; padding: 9px 14px; border-radius: 6px 18px 18px 18px;
    background: #fff; color: var(--ink); font-size: 14.5px; line-height: 1.45;
    word-break: break-word; box-shadow: 0 1px 2px rgba(0,0,0,.07);
}
.cw-room-msg.mine .cw-room-col p {
    border-radius: 18px 6px 18px 18px;
    background: linear-gradient(135deg, #ff5fa8, var(--pink)); color: #fff;
    box-shadow: 0 2px 6px rgba(233,30,140,.28);
}
.cw-room-col small { display: block; font-size: 11px; color: #9aa0a6; margin-top: 4px; padding: 0 6px; }
.cw-room-msg.mine .cw-room-col small { text-align: right; }
.cw-room-image { max-width: 180px; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.14); }

/* Ô nhập */
.cw-form {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-top: 1px solid #eeeef2; background: #fff; flex: 0 0 auto;
}
.cw-attach {
    flex: 0 0 auto; width: 37px; height: 37px; border-radius: 50%; background: #f2f3f6;
    display: grid; place-items: center; cursor: pointer; margin: 0; font-size: 17px;
    transition: background .15s, transform .15s;
}
.cw-attach:hover { background: #fce1ef; transform: scale(1.08); }
.cw-input-wrap { position: relative; flex: 1; min-width: 0; }
.cw-input-wrap input {
    width: 100%; padding: 10px 40px 10px 15px; border: 1px solid #e3e3ea;
    border-radius: 20px; background: #f6f7f9; font-size: 14.5px; font-family: inherit;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.cw-input-wrap input::placeholder { color: #a5a9b1; }
.cw-input-wrap input:focus {
    outline: none; border-color: var(--pink); background: #fff;
    box-shadow: 0 0 0 3px rgba(233,30,140,.1);
}
.cw-emoji-btn {
    position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; font-size: 19px; color: #9aa0a6; line-height: 1;
    transition: color .15s, transform .15s;
}
.cw-emoji-btn:hover { color: var(--amber); transform: translateY(-50%) scale(1.15); }
.cw-emoji-panel {
    position: absolute; bottom: calc(100% + 10px); right: 0; width: 274px;
    background: #fff; border: 1px solid #eeeef2; border-radius: 14px;
    box-shadow: 0 14px 32px rgba(0,0,0,.2); padding: 9px;
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
    max-height: 196px; overflow-y: auto; animation: cw-pop .16s ease-out;
}
.cw-emoji-panel[hidden] { display: none; }
.cw-emoji-item {
    background: none; border: 0; cursor: pointer; font-size: 21px;
    padding: 4px 0; border-radius: 8px; transition: background .12s, transform .12s;
}
.cw-emoji-item:hover { background: #fdf0f7; transform: scale(1.2); }
.cw-send {
    flex: 0 0 auto; width: 39px; height: 39px; border-radius: 50%; border: 0;
    background: linear-gradient(135deg, #ff5fa8, var(--pink)); color: #fff;
    cursor: pointer; font-size: 15px; box-shadow: 0 2px 8px rgba(233,30,140,.35);
    transition: transform .15s, box-shadow .15s;
}
.cw-send:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(233,30,140,.5); }
.cw-send:active { transform: scale(.94); }

@media (max-width: 480px) {
    .chat-widget { right: 14px; bottom: 14px; }
    .cw-panel { width: calc(100vw - 24px); height: calc(100vh - 120px); border-radius: 16px; }
    .cw-bubble { width: 54px; height: 54px; font-size: 24px; }
}

/* Modal dạng hỏi xác nhận: hai nút chia đôi */
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; border-radius: 8px; }
.btn-danger { background: #e12a2a; color: #fff; }
.btn-danger:hover { background: #c31f1f; text-decoration: none; }

/* Modal báo cáo: danh sách lý do và ô mô tả */
.report-reasons { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 12px; text-align: left; }
.report-reasons label {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    border-radius: 8px; cursor: pointer; font-size: 15px; transition: background .15s;
}
.report-reasons label:hover { background: #faf7f9; }
.report-reasons input { accent-color: var(--pink); width: 17px; height: 17px; }
.report-reasons label:has(input:checked) { background: #fdf0f7; color: var(--pink); font-weight: 600; }
.report-note {
    width: 100%; padding: 10px 13px; border: 1px solid #dcdce2; border-radius: 10px;
    font-family: inherit; font-size: 14.5px; resize: vertical;
}
.report-note:focus { outline: none; border-color: var(--pink); }

/* ---------- Vùng chạm trên mobile ----------
   Ô tick mặc định chỉ 13px, quá nhỏ để bấm bằng ngón tay.
   Chuẩn khuyến nghị là tối thiểu 36-44px cho vùng chạm. */

@media (max-width: 760px) {
    input[type=checkbox], input[type=radio] {
        width: 20px; height: 20px; accent-color: var(--pink); flex: 0 0 auto;
    }
    /* nhãn bao quanh ô tick trở thành vùng bấm đủ rộng */
    label.checkbox, .filter-bar label.checkbox {
        display: flex; align-items: center; gap: 10px;
        min-height: 40px; padding: 6px 2px; cursor: pointer;
    }
    .brand { min-height: 40px; }
}

/* ---------- Nút hiện / ẩn mật khẩu ---------- */

.pw-wrap { position: relative; display: block; }
/* chừa chỗ bên phải cho nút, tránh chữ chạy dưới con mắt */
.pw-wrap input { width: 100%; padding-right: 46px !important; }

.pw-toggle {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; cursor: pointer; padding: 6px 8px;
    font-size: 17px; line-height: 1; border-radius: 8px; opacity: .55;
    transition: opacity .15s, background .15s;
}
.pw-toggle:hover { opacity: 1; background: #f4f4f6; }
.pw-toggle.on { opacity: 1; }


/* ==========================================================================
   PC: trang chủ gọn lại — nhiều thẻ hơn trên một màn hình, bớt khoảng trống
   ========================================================================== */

@media (min-width: 1025px) {
    /* Khối nội dung sát nhau hơn, tiêu đề nhỏ lại */
    .home-block { padding: 24px 0; }
    .block-title { font-size: 23px; margin-bottom: 4px; }
    .block-title::after { width: 80px; margin: 10px auto 18px; }
    .block-sub { margin: -10px 0 16px; font-size: 14px; }
    .block-more { margin-top: 14px; }
    .btn-more { padding: 9px 22px; font-size: 14px; }

    /* Nút kêu gọi và ô tìm kiếm bớt cồng kềnh */
    .hero { padding: 18px 0; }
    .hero-cta { padding: 11px 32px; font-size: 20px; border-width: 2px; }
    .search-bar { padding: 11px 0; }
    .search-form input[type=text] { flex: 1 1 420px; padding: 10px 13px; }
    .search-form select, .btn-search { padding: 10px 22px; font-size: 15px; }

    /* Lưới dày hơn: 5 cột thay vì 4, khoảng cách nhỏ lại */

    /* Thẻ bài viết cũng thu gọn theo */
    .article-grid { gap: 14px; }
    .article-card h3 { font-size: 15px; }
    .article-body { padding: 10px 12px 12px; }

    /* Khu vực nổi bật: chữ nhỏ, các thẻ sát nhau */
    .province-cloud { gap: 7px; }
    .province-cloud a { padding: 6px 13px; font-size: 14px; border-radius: 16px; }
}

/* Màn hình rất rộng thì thêm một cột nữa cho đỡ trống hai bên */
@media (min-width: 1500px) {
}

/* Chat: trạng thái khách chưa đăng nhập */
.cw-form input:disabled { background: #f2f3f5; color: #9aa0a6; cursor: pointer; }
.cw-send:disabled, .cw-attach.is-disabled { opacity: .45; cursor: pointer; }
.cw-guest-note {
    margin: 0; padding: 9px 12px 12px; text-align: center;
    font-size: 13px; color: var(--muted); background: #fff;
}
.cw-guest-note a { color: var(--pink); font-weight: 700; }

/* Trang khu vực: danh sách tỉnh/thành theo miền */
.area-block { margin-bottom: 26px; }
.area-region {
    font-size: 17px; font-weight: 700; margin: 0 0 12px;
    padding-left: 10px; border-left: 3px solid #e5527a;
}
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.area-item {
    display: flex; flex-direction: column; gap: 3px;
    padding: 12px 14px; border: 1px solid #eceff3; border-radius: 10px;
    background: #fff; text-decoration: none; transition: .15s;
}
.area-item:hover { border-color: #e5527a; box-shadow: 0 3px 10px rgba(229, 82, 122, .12); }
.area-name { font-weight: 600; color: #23262b; }
.area-count { font-size: 13px; color: #8b929c; }
@media (max-width: 720px) {
    .area-grid { grid-template-columns: repeat(2, 1fr); }
    .area-item { padding: 10px 12px; }
}

/* ------------------------------------------------------------------
 | Giới thiệu ngắn trên thẻ ở các trang danh sách đang TẠM ẨN
 |
 | Lý do: câu giới thiệu hay bị cắt giữa chừng nên nhìn rối. Đặt ở cuối
 | tệp để chắc chắn ghi đè các khai báo phía trên. Xoá khối này là hiện
 | lại; nội dung đầy đủ vẫn xem được ở trang hồ sơ.
 * ---------------------------------------------------------------- */
.pcard-bio,
.swipe-bio { display: none; }

/* Màn rộng: logo và nút tài khoản ở hàng trên, menu chính xuống hàng dưới.
   Chỉ đổi chỗ bằng CSS — thứ tự thẻ trong HTML giữ nguyên, nhờ .nav-drawer
   dùng display: contents nên menu và nhóm nút là con trực tiếp của hàng này. */
/* Ô tìm kiếm trên thanh điều hướng */
.header-search { display: none; }

@media (min-width: 901px) {
    .header-inner {
        flex-wrap: wrap; column-gap: 18px; row-gap: 0;
        min-height: 0; padding: 12px 0 0;
    }
    .brand          { order: 1; }
    .header-actions { order: 3; margin-left: 0; gap: 12px; }

    .header-search {
        order: 2; display: flex; align-items: center; gap: 9px;
        flex: 0 1 420px; margin-left: auto;
        padding: 0 16px; height: 42px;
        background: #f4f5f7; border: 1.5px solid transparent; border-radius: 21px;
        transition: border-color .15s, background .15s;
    }
    .header-search:focus-within { background: #fff; border-color: var(--pink); }
    .header-search .ic {
        width: 18px; height: 18px; flex: 0 0 18px;
        fill: none; stroke: #9aa0a8; stroke-width: 2; stroke-linecap: round;
    }
    .header-search input {
        flex: 1 1 auto; min-width: 0;
        border: 0; background: none; outline: none;
        font-size: 14.5px; color: var(--ink);
    }
    .header-search input::placeholder { color: #9aa0a8; }
    /* Hàng trên: logo (1) - ô tìm kiếm (2) - nhóm nút (3).
       Menu để số 4 nên luôn nằm hàng dưới cùng. */
    .nav-list {
        order: 4; flex: 1 0 100%;
        gap: 4px; margin: 12px 0 0;
        border-top: 1px solid #eef0f3;
    }
    /* Mục menu: chữ thoáng hai bên, gạch chân nằm sát mép dưới header */
    .nav-list > li > a {
        position: relative; padding: 14px 16px 13px;
        border-radius: 8px 8px 0 0; font-size: 13px;
    }
    .nav-list > li > a:hover { background: #fdf3f8; }
    .nav-list > li > a.active { background: transparent; }
    .nav-list > li > a.active::after {
        content: ""; display: block; position: absolute;
        left: 16px; right: 16px; bottom: 0; height: 3px;
        border-radius: 3px 3px 0 0; background: var(--pink);
    }
}