/* last_modified_by: Minh; last_modified_date: 2026-10-29 */
:root {
  color-scheme: light;
  --paper: #fffdf6;
  --ink: #163c31;
  --muted: #526357;
  --facebook: #0866ff;
  --facebook-hover: #0759dc;
  --zalo: #3399ff;
  --zalo-hover: #258ff5;
  --zalo-ink: #082b4c;
  --orange: #f28c28;
  --orange-hover: #e97c13;
  --gift-ink: #38200b;
  --white: #fff;
  --focus: #163c31;
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 64px;
  --avatar: clamp(260px, 65vw, 300px);
  --measure: 480px;
  --icon: 28px;
  --logo: 132px;
  --radius: 8px;
  --duration: 160ms;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100svh; background: var(--paper); color: var(--ink); font: 1rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; display: flex; flex-direction: column; align-items: center; padding: var(--s5) var(--s3) var(--s3); }
main { width: min(100%, var(--measure)); }
.profile { text-align: center; }
.avatar { display: block; width: var(--avatar); height: var(--avatar); max-width: 100%; margin: 0 auto; border-radius: 50%; object-fit: cover; }
h1 { margin: var(--s3) 0 var(--s2); font-size: 1.75rem; line-height: 1.25; font-weight: 650; letter-spacing: -.025em; }
.profile-description { margin: 0 0 var(--s4); color: var(--muted); line-height: 1.75; text-wrap: pretty; }
.profile-description p { margin: 0; }
.profile-description p + p { margin-top: var(--s1); }
.links { display: grid; gap: var(--s2); }
.link { display: grid; grid-template-columns: var(--s4) minmax(0, 1fr) var(--s3); gap: var(--s2); align-items: center; min-height: 68px; padding: var(--s2) var(--s3); border-radius: var(--radius); color: var(--white); text-align: center; text-decoration: none; font-size: 1.0625rem; font-weight: 650; transition: background-color var(--duration) ease, transform var(--duration) ease; touch-action: manipulation; }
.link svg { width: var(--icon); height: var(--icon); justify-self: center; }
.facebook { background: var(--facebook); }
.facebook:hover { background: var(--facebook-hover); }
.zalo { background: var(--zalo); color: var(--zalo-ink); }
.zalo:hover { background: var(--zalo-hover); }
.gift { background: var(--orange); color: var(--gift-ink); }
.gift:hover { background: var(--orange-hover); }
.link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.link:active { transform: translateY(1px); }
.arrow { font-size: 1.25rem; font-weight: 400; }
.zalo-icon { display: grid; place-items: center; width: var(--s4); height: var(--icon); border-radius: var(--radius); background: var(--white); color: var(--zalo-ink); font-size: .6875rem; font-weight: 750; letter-spacing: -.04em; }
footer { text-align: center; padding-top: var(--s5); margin-top: auto; }
footer img { display: block; width: var(--logo); height: auto; margin: 0 auto; }
footer p { margin: var(--s1) 0 0; color: var(--muted); font-size: .875rem; }
@media (min-width: 768px) { body { padding-top: var(--s6); } }
@media (max-width: 360px) { body { padding: var(--s4) var(--s2) var(--s3); } .link { padding-inline: var(--s2); gap: var(--s1); } }
@media (max-width: 767px) {
  body { padding-top: var(--s2); }
  main { min-height: calc(100svh - var(--s2)); }
  .avatar { width: clamp(180px, calc(100svh - 430px), 260px); height: clamp(180px, calc(100svh - 430px), 260px); }
  h1 { margin: 12px 0 var(--s1); }
  .profile-description { margin-bottom: var(--s2); line-height: 1.5; }
  .links { gap: var(--s1); }
  .link { min-height: 56px; padding-block: 12px; }
}
@media (max-width: 767px) and (max-height: 620px) {
  .avatar { width: 120px; height: 120px; }
  h1 { margin-top: var(--s1); font-size: 1.5rem; }
  .profile-description { font-size: .875rem; line-height: 1.45; margin-bottom: 12px; }
  .link { min-height: 48px; padding-block: var(--s1); }
}
@media (prefers-reduced-motion: reduce) { .link { transition: none; } }