/* Four public entry cards, each carrying its own quiet jade/gold motif. */
:root body .dl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
:root body .dl-grid .dl-card { position: relative; isolation: isolate; overflow: hidden; min-width: 0; padding: 27px 16px 22px; border-color: color-mix(in srgb, var(--dl-accent) 40%, transparent); }
.dl-grid .dl-card > :not(.dl-motif) { position: relative; z-index: 1; }
.dl-grid .dl-card .muted { font-size: .86rem; overflow-wrap: anywhere; }
.dl-grid .dl-card .btn { margin-top: auto; max-width: 100%; }
.dl-grid .dl-card .badge { font-size: .65rem; }
.dl-grid .dl-card .chip-ico { color: var(--dl-accent); }
.dl-grid .dl-card--fanpage { --dl-accent: #c5af72; background: linear-gradient(145deg,#173b36,#102923); }
.dl-grid .dl-card--zalo { --dl-accent: #79c4bf; background: linear-gradient(145deg,#123c3c,#102b29); }
.dl-grid .dl-card--android { --dl-accent: #a2ca86; background: linear-gradient(145deg,#23432d,#102b24); }
.dl-grid .dl-card--ios { --dl-accent: #d9cbb0; background: linear-gradient(145deg,#32403b,#102925); }
.dl-motif { position: absolute; inset: 8px; overflow: hidden; pointer-events: none; z-index: 0; }
.dl-motif i { position: absolute; display: block; opacity: .23; border: 1px solid var(--dl-accent); }
.dl-card--fanpage .dl-motif i { width: 78px; height: 78px; border-radius: 50%; top: -32px; right: -20px; }
.dl-card--fanpage .dl-motif i:nth-child(2) { width: 105px; height: 105px; top: -45px; right: -33px; }
.dl-card--fanpage .dl-motif i:nth-child(3) { width: 132px; height: 132px; top: -58px; right: -46px; }
.dl-card--zalo .dl-motif i { width: 50px; height: 20px; border-radius: 50% 50% 0 50%; bottom: 16px; left: -15px; transform: rotate(-25deg); }
.dl-card--zalo .dl-motif i:nth-child(2) { bottom: 39px; left: -8px; }
.dl-card--zalo .dl-motif i:nth-child(3) { bottom: 62px; left: -1px; }
.dl-card--android .dl-motif i { width: 70px; height: 70px; transform: rotate(45deg); right: -38px; top: 48px; }
.dl-card--android .dl-motif i:nth-child(2) { top: 85px; right: -52px; }
.dl-card--android .dl-motif i:nth-child(3) { top: 122px; right: -66px; }
.dl-card--ios .dl-motif i { width: 120px; height: 120px; border-radius: 50%; left: -78px; top: -60px; }
.dl-card--ios .dl-motif i:nth-child(2) { width: 140px; height: 140px; left: -88px; top: -70px; }
.dl-card--ios .dl-motif i:nth-child(3) { width: 160px; height: 160px; left: -98px; top: -80px; }
.dl-grid .dl-card:focus-within { outline: 1px solid var(--dl-accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .dl-grid .dl-card { transition: transform .2s ease, border-color .2s ease; }
  .dl-grid .dl-card:hover,.dl-grid .dl-card:focus-within { transform: translateY(-3px); border-color: var(--dl-accent); }
  .dl-motif { animation: dl-breathe 6s ease-in-out infinite; animation-play-state: paused; }
  .dl-card--zalo .dl-motif { animation-name: dl-drift; animation-delay: -1.5s; }
  .dl-card--android .dl-motif { animation-name: dl-rise; animation-delay: -3s; }
  .dl-card--ios .dl-motif { animation-name: dl-shimmer; animation-delay: -4.5s; }
  .dl-fx-visible:not(.dl-fx-hidden) .dl-motif { animation-play-state: running; }
}
@keyframes dl-breathe { 0%,100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.035); opacity: 1; } }
@keyframes dl-drift { 0%,100% { transform: translateX(0); opacity: .65; } 50% { transform: translateX(5px); opacity: 1; } }
@keyframes dl-rise { 0%,100% { transform: translateY(0); opacity: .65; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes dl-shimmer { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 1000px) { :root body .dl-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 359px) { :root body .dl-grid { grid-template-columns: minmax(0,1fr); } }
@media (prefers-reduced-motion: reduce) { .dl-grid .dl-motif { animation: none; } .dl-grid .dl-card { transition: none; } }