/* Màu lấy từ AppColors (app/lib/src/utils/app_theme.dart), phong cách Duolingo: viền 2px, đáy dày, không bóng mờ. */
:root { --primary: #ff4b4b; --blue: #1cb0f6; --blue-bg: #ddf4ff; --text: #3c3c3c; --muted: #777; --border: #e5e5e5; --low: #f7f7f7; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--text); font-family: Nunito, system-ui, sans-serif; font-weight: 700; }
main { max-width: 480px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
header { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 900; }
header img { width: 40px; height: 40px; border-radius: 10px; }
.card { border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.photo { width: 100%; max-height: 360px; object-fit: contain; background: var(--low); border-radius: 12px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { background: #fff4c2; border-radius: 99px; padding: 2px 10px; font-size: 13px; }
.pill.gray { background: var(--low); color: var(--muted); }
.store { color: var(--muted); font-size: 14px; }
h1 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.3; }
.deadline { background: var(--blue-bg); color: var(--blue); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.deadline b { font-size: 18px; font-weight: 900; }
.row { display: flex; flex-direction: column; gap: 2px; white-space: pre-line; font-size: 15px; }
.label { color: var(--muted); font-size: 13px; }
.link { color: var(--blue); text-decoration: none; }
.btn { display: block; text-align: center; text-decoration: none; padding: 14px; border-radius: 16px; font-weight: 900; font-size: 17px;
  border: 2px solid var(--border); border-bottom-width: 4px; color: var(--blue); }
.btn.primary { background: var(--blue); border-color: #1899d6; color: #fff; }
.btn:active { transform: translateY(2px); border-bottom-width: 2px; }
.promo { background: #fff4c2; border: 2px solid #ffd900; border-bottom-width: 4px; border-radius: 16px; padding: 14px 16px; }
.promo h2 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.promo p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.promo ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.muted { color: var(--muted); }
.small { font-size: 13px; text-align: center; }
[hidden] { display: none !important; } /* .btn display:block đè thuộc tính hidden */