:root {
  --color-primary: #1e40af;
  --color-primary-hover: #1d4ed8;
  --color-primary-soft: #eff6ff;
  --color-background: #f8fafc;
  --color-surface: #ffffff;
  --color-text: #0f172a;
  --color-muted: #64748b;
  --color-border: #e2e8f0;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px rgba(15, 23, 42, .04);
  --shadow-md: 0 12px 32px rgba(15, 23, 42, .09);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; color: var(--color-text); background: var(--color-background); font-family: "Be Vietnam Pro", sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-weight: 700; line-height: 1.25; letter-spacing: -.025em; }
h1 { font-size: clamp(2.25rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.625rem, 3vw, 2rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
button, input, textarea { font: inherit; }

.btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .62rem 1.1rem; border-radius: var(--radius-sm); font-size: .9rem; font-weight: 600; transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(30, 64, 175, .16); }
.btn-primary:hover, .btn-primary:focus { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-outline-primary { color: var(--color-primary); border-color: #bfdbfe; background: var(--color-surface); }
.btn-outline-primary:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.btn-light { color: #334155; background: #f1f5f9; border-color: #f1f5f9; }
.btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn-outline-danger { color: var(--color-danger); border-color: #fecaca; }
.btn-outline-danger:hover { background: var(--color-danger); border-color: var(--color-danger); }
.btn:focus-visible, .form-control:focus-visible, a:focus-visible { outline: 3px solid rgba(29, 78, 216, .25); outline-offset: 2px; }

.site-header { z-index: 1030; min-height: 76px; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 12px rgba(15, 23, 42, .035); backdrop-filter: blur(12px); }
.site-header nav { min-height: 76px; }
.brand { min-width: 0; color: var(--color-text); font-weight: 700; letter-spacing: -.02em; }
.brand:hover { color: var(--color-text); }
.brand-logo, .footer-brand img { flex: 0 0 auto; border-radius: 11px; object-fit: contain; background: #fff; }
.brand-name { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; color: #fff; background: var(--color-primary); border-radius: 11px; font-weight: 700; }
.nav-links { gap: .25rem; }
.nav-link { position: relative; color: #475569; padding: .75rem 1rem; border-radius: 8px; font-size: .9rem; font-weight: 600; transition: color .2s ease, background-color .2s ease; }
.nav-link:hover { color: var(--color-primary); background: var(--color-primary-soft); }
.nav-link.active { color: var(--color-primary); }
.nav-link.active::after { content: ""; position: absolute; right: 1rem; bottom: .32rem; left: 1rem; height: 2px; background: var(--color-primary); border-radius: 2px; }

.eyebrow { color: var(--color-primary); font-size: .75rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.section-space { padding: 5rem 0; }
.hero { position: relative; min-height: 560px; display: flex; align-items: center; overflow: hidden; padding: 4.5rem 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.hero-banner-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-has-banner::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(248, 250, 252, .96) 0%, rgba(248, 250, 252, .82) 38%, rgba(248, 250, 252, .08) 68%, transparent 100%); }
.hero-container { position: relative; z-index: 2; }
.hero-content { width: min(100%, 620px); padding: 2.25rem; background: rgba(255, 255, 255, .9); border: 1px solid rgba(255, 255, 255, .75); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(8px); }
.hero h1 { max-width: 650px; margin: .8rem 0 1.25rem; }
.hero-copy { max-width: 620px; margin-bottom: 1.75rem; color: var(--color-muted); font-size: 1.06rem; line-height: 1.75; }
.hero-contact { color: var(--color-muted); font-size: .875rem; }
.hero-contact strong { display: block; color: var(--color-text); font-size: .95rem; }
.products-section { background: #f1f5f9; border-top: 1px solid var(--color-border); }
.section-heading { margin-bottom: 2rem; }
.section-heading h2 { margin: 0 0 .4rem; }
.section-heading p:not(.eyebrow) { margin: 0; color: var(--color-muted); font-size: .92rem; }

.product-card { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #cbd5e1; box-shadow: var(--shadow-md); }
.product-image-wrap { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; background: #f1f5f9; border-bottom: 1px solid var(--color-border); }
.product-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.product-card:hover .product-image { transform: scale(1.025); }
.product-placeholder { color: var(--color-muted); font-size: .875rem; }
.product-card-body { min-height: 285px; padding: 1.25rem; }
.product-code { margin: 0 0 .5rem; color: var(--color-muted); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.product-card h3 { min-height: 3.2rem; margin: 0 0 .6rem; font-size: 1.08rem; line-height: 1.5; }
.product-card h3 a { display: -webkit-box; overflow: hidden; color: var(--color-text); text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-description { display: -webkit-box; min-height: 2.8rem; margin: 0 0 1rem; overflow: hidden; color: var(--color-muted); font-size: .86rem; line-height: 1.6; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.product-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; }
.product-price strong { color: inherit; font-size: inherit; font-weight: 700; }
.product-price span { color: var(--color-muted); font-size: .7rem; font-weight: 500; }
.price { color: var(--color-primary); font-size: 1.18rem; font-weight: 700; }
.product-card-action { width: 100%; margin-top: 1rem; }

.page-shell { min-height: 65vh; padding: 4.5rem 0 5rem; background: var(--color-background); }
.page-title { max-width: 760px; margin-bottom: 2rem; }
.page-title.text-center { margin-bottom: 2.25rem; }
.page-title h1 { margin: 0; }
.page-title p:not(.eyebrow) { max-width: 680px; margin: .65rem 0 0; color: var(--color-muted); }
.page-title.text-center p:not(.eyebrow) { margin-right: auto; margin-left: auto; }
.search-box { max-width: 720px; display: flex; gap: .6rem; padding: .55rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.search-box .form-control { min-height: 48px; border: 0; box-shadow: none; }
.search-button { min-width: 132px; }
.result-summary { margin: 2rem 0 1.25rem; color: var(--color-muted); font-size: .875rem; }
.empty-state { padding: 4rem 1.5rem; text-align: center; background: var(--color-surface); border: 1px dashed #cbd5e1; border-radius: var(--radius-md); }
.empty-icon { display: grid; width: 46px; height: 46px; place-items: center; margin: 0 auto 1rem; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 50%; font-size: 1.35rem; }
.empty-state h2 { margin-bottom: .5rem; font-size: 1.25rem; }
.empty-state p { max-width: 500px; margin: 0 auto 1.25rem; color: var(--color-muted); font-size: .9rem; }
.pagination { gap: .35rem; }
.page-link { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0; color: #475569; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 9px !important; font-size: .86rem; font-weight: 600; }
.page-link:hover { color: var(--color-primary); background: var(--color-primary-soft); border-color: #bfdbfe; }
.page-item.active .page-link { background: var(--color-primary); border-color: var(--color-primary); }

.breadcrumb-wrap { margin-bottom: 1.5rem; }
.breadcrumb { flex-wrap: nowrap; overflow: hidden; color: var(--color-muted); font-size: .82rem; white-space: nowrap; }
.breadcrumb-item { overflow: hidden; text-overflow: ellipsis; }
.breadcrumb-item a { color: var(--color-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--color-primary); }
.product-detail { overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.detail-image-wrap { position: relative; display: grid; min-height: 590px; place-items: center; background: #f1f5f9; }
.detail-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.detail-content { padding: clamp(2rem, 5vw, 4rem); }
.detail-content h1 { margin: 0 0 1rem; font-size: clamp(2rem, 4vw, 2.65rem); }
.detail-price { margin: 0; color: var(--color-primary); font-size: 1.75rem; font-weight: 700; }
.detail-facts > div { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.detail-facts span { color: var(--color-muted); font-size: .78rem; }
.detail-facts strong { font-size: 1rem; font-weight: 600; }
.detail-section-title { margin-top: 2rem; font-size: 1rem; }
.contact-box { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding: 1.1rem; background: var(--color-primary-soft); border: 1px solid #dbeafe; border-radius: var(--radius-md); }
.contact-box strong, .contact-box span { display: block; }
.contact-box strong { font-size: .92rem; }
.contact-box span { color: var(--color-muted); font-size: .78rem; }
.pre-line { white-space: pre-line; }

.contact-page .page-title { margin-bottom: 3rem; }
.contact-info, .contact-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.contact-info { overflow: hidden; }
.contact-info-intro { display: flex; align-items: center; gap: 1rem; padding: 1.75rem; background: var(--color-primary-soft); border-bottom: 1px solid #dbeafe; }
.contact-info-intro h2 { margin: 0; font-size: 1.25rem; }
.contact-info-mark { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--color-primary); border-radius: 12px; font-size: 1.2rem; font-weight: 700; }
.contact-info-logo { width: 48px; height: 48px; flex: 0 0 auto; object-fit: contain; background: #fff; border-radius: 12px; }
.contact-info-description { margin: 0; padding: 1.5rem 1.75rem 0; color: var(--color-muted); font-size: .9rem; }
.contact-list { margin: 0; padding: 1rem 1.75rem 1.75rem; }
.contact-list > div { padding: 1rem 0; border-bottom: 1px solid var(--color-border); }
.contact-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
.contact-list dt { margin-bottom: .25rem; color: var(--color-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.contact-list dt span { display: inline-block; width: 1.25rem; color: var(--color-primary); font-size: 1rem; }
.contact-list dd { margin: 0; color: var(--color-text); font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.contact-list a { color: var(--color-text); text-decoration: none; }
.contact-list a:hover { color: var(--color-primary); }
.contact-form { padding: 2rem; }
.contact-form-heading { margin-bottom: 1.5rem; }
.contact-form-heading h2 { margin: 0 0 .35rem; font-size: 1.35rem; }
.contact-form-heading p { margin: 0; color: var(--color-muted); font-size: .85rem; }
.contact-form .form-control { min-height: 46px; border-radius: 11px; }
.contact-form textarea.form-control { min-height: 290px; }
.contact-form .invalid-feedback { font-size: .74rem; }
.contact-submit { width: 100%; margin-top: 1.5rem; }
.contact-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.contact-map { margin-top: 1.5rem; overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.contact-map iframe { display: block; width: 100%; height: 280px; border: 0; }

.site-footer { color: #cbd5e1; background: #0f172a; }
.footer-main { padding-top: 4rem; padding-bottom: 3.5rem; }
.footer-brand h2 { margin: 0; color: #fff; font-size: 1.08rem; }
.footer-description { max-width: 540px; margin: 0; color: #94a3b8; font-size: .86rem; line-height: 1.75; }
.footer-heading { margin-bottom: 1rem; color: #fff; font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.site-footer a { display: block; width: fit-content; margin-bottom: .55rem; color: #cbd5e1; font-size: .86rem; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer p { margin-bottom: .8rem; font-size: .86rem; }
.footer-label { display: block; color: #64748b; font-size: .72rem; font-weight: 600; text-transform: uppercase; }
.footer-bottom { padding: 1rem 0; color: #64748b; border-top: 1px solid #1e293b; font-size: .78rem; }

.admin-shell { min-height: 70vh; padding: 3.5rem 0 5rem; background: var(--color-background); }
.admin-shell .page-title { max-width: none; }
.admin-nav { display: flex; gap: .35rem; width: fit-content; margin-bottom: 1.5rem; padding: .35rem; background: #e2e8f0; border-radius: 12px; }
.admin-nav a { display: inline-flex; align-items: center; gap: .45rem; padding: .62rem 1rem; color: #475569; border-radius: 9px; font-size: .86rem; font-weight: 600; text-decoration: none; }
.admin-nav a:hover { color: var(--color-primary); }
.admin-nav a.active { color: var(--color-primary); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.admin-nav form { display: flex; }
.admin-nav svg { flex: 0 0 auto; }
.admin-logout { display: inline-flex; align-items: center; gap: .45rem; padding: .62rem 1rem; color: #475569; background: transparent; border: 0; border-radius: 9px; font-size: .86rem; font-weight: 600; }
.admin-logout:hover { color: var(--color-danger); background: var(--color-surface); }
.admin-login-shell { min-height: 70vh; display: grid; place-items: center; padding: 4rem 1rem; }
.admin-login-card { width: min(100%, 430px); padding: 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.admin-login-card h1 { margin: 0; font-size: 2rem; }
.admin-login-intro { margin: .5rem 0 1.5rem; color: var(--color-muted); font-size: .9rem; }
.admin-card { padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.admin-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.admin-card-header h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.admin-card-header p { margin: 0; color: var(--color-muted); font-size: .8rem; }
.admin-form { top: 96px; scroll-margin-top: 100px; }
.form-section { margin: 0; padding: 1.5rem 0; border: 0; border-top: 1px solid var(--color-border); }
.form-section:first-of-type { padding-top: .5rem; border-top: 0; }
.form-section legend { float: none; width: auto; margin: 0 0 1rem; font-size: .95rem; font-weight: 700; }
.form-group-label { margin-top: .25rem; padding-top: 1rem; color: var(--color-text); border-top: 1px solid var(--color-border); font-size: .82rem; font-weight: 700; }
.row > .col-12:first-child .form-group-label { margin-top: -.5rem; padding-top: 0; border-top: 0; }
.form-label { margin-bottom: .4rem; color: #334155; font-size: .8rem; font-weight: 600; }
.form-control { min-height: 44px; color: var(--color-text); background: var(--color-surface); border-color: #cbd5e1; border-radius: 9px; font-size: .9rem; }
textarea.form-control { min-height: auto; resize: vertical; }
.form-control::placeholder { color: #94a3b8; }
.form-control:focus { border-color: #93c5fd; box-shadow: 0 0 0 3px rgba(29, 78, 216, .1); }
.form-hint { margin-top: .4rem; color: var(--color-muted); font-size: .75rem; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.save-status { color: var(--color-muted); font-size: .75rem; }
.save-status.saving { color: var(--color-primary); }
.upload-preview { display: grid; height: 170px; place-items: center; margin-bottom: .75rem; overflow: hidden; color: var(--color-muted); background: var(--color-background); border: 1px dashed #cbd5e1; border-radius: var(--radius-sm); font-size: .8rem; }
.upload-preview img { width: 100%; height: 100%; object-fit: contain; }
.logo-preview { max-width: 220px; }
.banner-preview img { object-fit: cover; }
.product-form-preview { width: 180px; height: 135px; object-fit: contain; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.featured-check { display: flex; gap: .75rem; padding: .9rem 1rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.featured-check .form-check-input { margin-top: .25rem; }
.featured-check label { display: flex; flex-direction: column; font-size: .82rem; }
.featured-check span { color: var(--color-muted); font-size: .75rem; }
.alert { border: 0; border-left: 4px solid currentColor; border-radius: var(--radius-sm); font-size: .86rem; }
.alert-success { color: #166534; background: #f0fdf4; }
.alert-danger { color: #991b1b; background: #fef2f2; }
.notification-backdrop { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .58); backdrop-filter: blur(3px); }
.notification-dialog { width: min(100%, 430px); padding: 1.75rem; text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 24px 70px rgba(15, 23, 42, .3); }
.notification-icon { display: grid; width: 52px; height: 52px; place-items: center; margin: 0 auto 1rem; border-radius: 50%; font-size: 1.4rem; font-weight: 700; }
.notification-success .notification-icon { color: #166534; background: #dcfce7; }
.notification-danger .notification-icon { color: #991b1b; background: #fee2e2; }
.notification-warning .notification-icon { color: #92400e; background: #fef3c7; }
.notification-info .notification-icon { color: var(--color-primary); background: var(--color-primary-soft); }
.notification-dialog h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.notification-dialog p { margin: 0 0 1.35rem; color: var(--color-muted); font-size: .9rem; white-space: pre-line; }
.notification-ok { min-width: 110px; }
.admin-search { width: 250px; }
.count-badge { display: inline-grid; min-width: 24px; height: 24px; place-items: center; margin-left: .35rem; color: var(--color-primary); background: var(--color-primary-soft); border-radius: 20px; font-size: .72rem; }
.table { min-width: 680px; margin: 0; }
.table > :not(caption) > * > * { padding: .9rem .6rem; border-color: var(--color-border); }
.table thead th { color: var(--color-muted); background: var(--color-background); font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.table tbody td { color: #334155; font-size: .82rem; }
.table-thumb { object-fit: contain; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; }
.admin-product-price { min-width: 132px; align-items: flex-start; flex-direction: column; gap: 0; }
.admin-product-price strong { font-size: .82rem; }
.admin-product-price span { font-size: .66rem; }

.confirm-backdrop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 1rem; background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
.confirm-dialog { width: min(100%, 430px); padding: 1.75rem; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: 0 24px 60px rgba(15, 23, 42, .24); }
.confirm-dialog h2 { margin: 0 0 .5rem; font-size: 1.25rem; }
.confirm-dialog p { margin: 0; color: var(--color-muted); font-size: .88rem; }
.confirm-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 1rem; color: var(--color-danger); background: #fef2f2; border-radius: 50%; font-weight: 700; }

@media (max-width: 1199.98px) { .admin-form { position: static !important; } }

@media (max-width: 991.98px) {
  .hero { padding: 3.5rem 0; }
  .hero-has-banner::after { background: rgba(248, 250, 252, .38); }
  .detail-image-wrap { min-height: 520px; }
  .contact-form textarea.form-control { min-height: 150px; }
}

@media (max-width: 767.98px) {
  .section-space { padding: 4rem 0; }
  .page-shell, .admin-shell { padding: 3rem 0 4rem; }
  .detail-image-wrap { min-height: 420px; }
  .detail-content { padding: 2rem; }
  .admin-card-header { flex-wrap: wrap; }
  .admin-search { width: 100%; }
  .product-table-card { padding: 1.1rem; }
}

@media (max-width: 575.98px) {
  body { font-size: 15px; }
  .site-header, .site-header nav { min-height: 72px; }
  .site-header nav { gap: .5rem !important; }
  .brand { gap: .5rem !important; max-width: 38px; }
  .brand-logo, .brand-mark { width: 38px; height: 38px; }
  .brand-name { display: none; }
  .nav-links { flex: 0 0 auto; }
  .nav-link { padding: .65rem .55rem; font-size: .77rem; }
  .nav-link.active::after { right: .55rem; left: .55rem; }
  .hero { padding: 2.75rem 0; }
  .hero h1 { font-size: 2.15rem; }
  .hero-copy { font-size: .95rem; }
  .hero .btn, .hero-contact { width: 100%; }
  .hero-content { padding: 1.5rem; border-radius: var(--radius-md); }
  .section-space { padding: 3.25rem 0; }
  .search-box { flex-direction: column; }
  .search-button { width: 100%; }
  .product-card-body { min-height: 270px; }
  .detail-image-wrap { min-height: 340px; }
  .detail-content { padding: 1.5rem; }
  .contact-box { align-items: stretch; flex-direction: column; }
  .contact-box .btn { width: 100%; }
  .admin-nav { width: 100%; }
  .admin-nav a { flex: 1; padding: .6rem .5rem; text-align: center; font-size: .76rem; }
  .admin-nav form { flex: 1; }
  .admin-logout { width: 100%; padding: .6rem .5rem; font-size: .76rem; }
  .admin-card { padding: 1.1rem; }
  .form-actions .btn { width: 100%; }
  .footer-main { padding-top: 3rem; padding-bottom: 2.5rem; }
  .contact-page .page-title { margin-bottom: 2rem; }
  .contact-form { padding: 1.25rem; }
  .contact-info-intro, .contact-info-description, .contact-list { padding-right: 1.25rem; padding-left: 1.25rem; }
  .contact-map { margin-top: 1.25rem; }
  .contact-map iframe { height: 240px; }
}