/* Phong cách mới của trang chủ áp dụng cho các trang còn lại (cư dân, tin tức, quản trị, sale, cộng tác viên).
   Nạp SAU brand.css / app.css / member.css / sale.css / tin.css. Chỉ đổi màu, bo góc, bóng, nút, tiêu đề; không đổi bố cục. */
:root {
  --red: #ed002d; --red-dark: #c90025; --red-orange: #ff5d30; --orange: #ff8c34;
  --ink: #34343b; --ink-soft: #7a7a80; --cream: #fcfaf7; --beige: #f0e5df;
  --grad: linear-gradient(100deg, #ec002e, #ff7731);
  --grad-cover: linear-gradient(120deg, #e90030 0%, #f23a2c 48%, #ff7a36 100%);
  --shadow: 0 7px 23px #ac59350a;
}
body { background: var(--cream); color: var(--ink); }

/* thanh đầu trang: trắng, logo màu, đổ bóng nhẹ như trang chủ */
.app-top, .tin-top { background: #fffffffa; color: var(--ink); border: 0; box-shadow: 0 2px 8px #4c272807; }
.app-top { position: sticky; top: 0; z-index: 40; }
.app-top-in, .tin-top-in { min-height: 64px; }
.app-top img { height: 44px; }
.app-top .who { color: var(--ink); font-size: 13px; }
.app-top button { color: var(--red); font-weight: 600; }
.tin-top { backdrop-filter: blur(6px); }

/* tiêu đề trang: chữ hoa đỏ, vạch gradient bên trái */
.page h1, .mem h1, .auth h1 {
  position: relative; padding-left: 16px; font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase; color: var(--red); line-height: 1.25;
}
.page h1::before, .mem h1::before, .auth h1::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; background: linear-gradient(#f91238, #ff8831); }
.panel h2, .reflink h2, .m-card h2 { color: var(--red); letter-spacing: .04em; font-weight: 700; }
.h-section { color: var(--red); }

/* nút: đỏ chuyển cam, góc 5px; nút viền: nền trắng, viền hồng */
.btn { border-radius: 5px; border: 0; background: linear-gradient(100deg, #ec002e, #ff5a38); color: #fff; font-weight: 600; letter-spacing: 0; box-shadow: 0 3px 10px #e8002e22; }
.btn:hover { background: linear-gradient(100deg, #d6002a, #ff4a2a); box-shadow: 0 4px 14px #e8002e38; }
.btn-ghost { background: #fff; color: var(--red); border: 1px solid #ff9aab; box-shadow: none; }
.btn-ghost:hover { background: #fff0f2; color: var(--red); box-shadow: none; }
.btn-light { background: #fff; color: var(--red); box-shadow: none; }
.btn[disabled] { box-shadow: none; }

/* thẻ, bảng điều khiển: bo góc, bóng nhẹ, viền be */
.card { border: 1px solid var(--beige); border-radius: 10px; box-shadow: var(--shadow); }
.kpi b { color: var(--red); }
.fn-bar i { background: linear-gradient(90deg, #ec002e, #ff7731); }
.hint-box { border-left: 4px solid var(--red-orange); border-radius: 0 8px 8px 0; box-shadow: var(--shadow); }
.banner { border-radius: 8px; }

/* ô nhập */
input[type=text], input[type=tel], input[type=number], input[type=password], input[type=search], input[type=email], input[type=date], input[type=url], select, textarea {
  border: 1px solid #e6d8d0; border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(255, 93, 48, .28); border-color: var(--red-orange); }

/* tab và nút chọn: viên thuốc, đang chọn tô đỏ chuyển cam */
.tab, .seg button { border: 1px solid #f0e3dc; border-radius: 6px; background: #fff; color: #555; }
.tab[aria-selected="true"], .seg button[aria-pressed="true"] { background: linear-gradient(100deg, #ec002e, #ff5a38); color: #fff; border-color: transparent; }
.tbl th { color: var(--ink-soft); border-bottom: 2px solid #f0e5df; }
.tbl tr.click:hover td { background: #fff7f3; }

/* nhãn: bo tròn nhẹ */
.chip { border-radius: 4px; }
.badge { border-radius: 4px; }
.drawer-in { background: var(--cream); }
.drawer h2 { color: var(--red); }

/* cư dân */
.m-tabs { gap: 8px; }
.m-tabs .tab { border-radius: 8px; font-weight: 600; min-height: 46px; }
.unit-opt, .opt-card span { border-radius: 8px; }
.mem .back { color: var(--red); font-weight: 600; }
.steps li::before { background: linear-gradient(135deg, #ec002e, #ff7731); }

/* tin tức */
.tin h1 { position: relative; padding-left: 0; color: var(--ink); text-transform: none; letter-spacing: -.01em; font-weight: 700; }
.tin h1::before { display: none; }
.tin-kind { color: var(--red); }
.tin-body h2 { color: var(--red); }
.tin-imgs button, .tin-file, .tin-more a, .pdf-page { border-radius: 10px; border-color: var(--beige); box-shadow: var(--shadow); }
.tin-foot { background: var(--grad-cover); border-top: 0; color: #fff; }
.tin-foot .btn-ghost { background: #ffffff1f; border-color: #ffffffb0; color: #fff; }
.tin-foot .btn-ghost:hover { background: #ffffff38; color: #fff; }
.tin-foot .btn:not(.btn-ghost) { background: #fff; color: var(--red); box-shadow: none; }

/* điện thoại */
@media (max-width: 719px) {
  .app-top img { height: 40px; }
  .page h1, .mem h1 { font-size: 20px; }
}

/* admin: ô ảnh bìa của tin */
.cover-box { display:flex; align-items:flex-end; gap:12px; margin:0 0 10px; }
.cover-box img { width:220px; max-width:60%; aspect-ratio:16 / 9; object-fit:cover; border-radius:8px; border:1px solid #eadfd9; }

/* admin: trình soạn thảo nội dung bài (dán Word/Docs/Markdown) */
.rte-wrap { border: 1px solid #e3d4ca; border-radius: 10px; background: #fff; overflow: hidden; }
.rte-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid #eee2da; background: #fbf5f0; }
.rte-bar button { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid #eadfd9; border-radius: 6px; background: #fff; color: #4a3f3a; font: 600 13px var(--font-body); cursor: pointer; }
.rte-bar button:hover { background: #fff1ec; color: var(--red); border-color: #f3c6c6; }
.rte { min-height: 260px; max-height: 60vh; overflow-y: auto; padding: 12px 14px; font-size: 15px; line-height: 1.65; outline: none; }
.rte:focus { box-shadow: inset 0 0 0 2px #f6b8b8; }
.rte h2 { font-size: 18px; margin: 16px 0 8px; color: var(--red); } .rte h3 { font-size: 16px; margin: 14px 0 6px; } .rte h4 { font-size: 14.5px; margin: 12px 0 4px; color: #6b5f5a; }
.rte p { margin: 0 0 10px; } .rte ul, .rte ol { margin: 0 0 10px; padding-left: 22px; }
.rte a { color: #1a6fd4; text-decoration: underline; }
.rte blockquote { margin: 0 0 10px; padding: 6px 12px; border-left: 4px solid #f2b5b5; background: #fff8f4; }
.rte table { border-collapse: collapse; width: 100%; margin: 0 0 12px; } .rte th, .rte td { border: 1px solid #e6d6cd; padding: 5px 8px; } .rte th { background: #fbf1ea; }
.rte pre { padding: 8px; background: #f4ece6; border-radius: 6px; white-space: pre-wrap; } .rte code { background: #f4ece6; padding: 0 4px; border-radius: 3px; }
.rte-hint { margin: 0; padding: 8px 12px; border-top: 1px solid #eee2da; background: #fffdfb; }