/* RESET & BASE */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    background-color: #fff; font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.main-container { display: flex; flex-direction: column; min-height: 100vh; width: 100%; }

/* HEADER FULL WIDTH */
.header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 30px; background: #fff; border-bottom: 3px solid #b8962e;
}
.header-left { display: flex; align-items: center; gap: 15px; }
.logo { height: 55px; width: auto; }
.brand h1 { margin: 0; font-size: 22px; color: #b8962e; font-weight: 800; letter-spacing: 0.5px; }
.slogan { font-size: 10px; color: #8e7020; font-weight: 600; text-transform: uppercase; }
#date { font-size: 13px; font-weight: bold; color: #444; }

/* BẢNG GIÁ 2 CỘT */
.content { flex: 1; padding: 15px 30px; position: relative; }
.title { text-align: center; color: #b8962e; font-size: 1.5rem; margin-bottom: 20px; font-weight: 800; }
.price-grid { display: flex; gap: 25px; width: 100%; }
.price-table { flex: 1; border-collapse: collapse; background: #fff; }
.price-table th { background: #b8962e; color: #fff; padding: 10px; font-size: 12px; border: 1px solid #a38528; }
.price-table td { padding: 10px; border: 1px solid #eee; font-size: 16px; font-weight: 700; }
.name { color: #333; width: 55%; }
.buy { color: #d32f2f; text-align: right; }
.sell { color: #2e7d32; text-align: right; }

/* FOOTER THÔNG TIN CÔNG TY & MẠNG XÃ HỘI */
.company-footer { background: #fafafa; border-top: 2px solid #b8962e; padding: 30px 40px 15px; }
.footer-inner { display: flex; justify-content: space-between; gap: 40px; max-width: 1400px; margin: 0 auto; }
.footer-col { flex: 1; }
.footer-col h3 { font-size: 16px; color: #b8962e; margin: 0 0 15px 0; font-weight: 800; }
.footer-col p { margin: 6px 0; font-size: 14px; color: #555; line-height: 1.6; }

/* NÚT MẠNG XÃ HỘI */
.social-links { display: flex; flex-direction: column; gap: 10px; }
.btn-social {
    display: flex; align-items: center; padding: 10px 15px;
    border-radius: 6px; text-decoration: none; color: #fff;
    font-size: 14px; font-weight: 600; transition: 0.3s;
}
.fb { background: #1877f2; }
.zalo { background: #0068ff; }
.btn-social:hover { opacity: 0.8; transform: translateX(5px); }

.footer-bottom { text-align: center; margin-top: 30px; border-top: 1px solid #eee; padding-top: 15px; }
.footer-bottom p { font-size: 11px; color: #999; margin: 0; }

/* MOBILE OPTIMIZATION */
@media (max-width: 850px) {
    .header { padding: 10px; flex-direction: column; text-align: center; }
    .content { padding: 10px; }
    .price-grid { flex-direction: column; gap: 0; }
    .price-table:last-child thead { display: none; }
    .price-table td { font-size: 12px; padding: 8px 5px; }
    
    .footer-inner { flex-direction: column; gap: 25px; text-align: center; }
    .company-footer { padding: 20px 15px; }
    .social-links { align-items: center; }
    .btn-social { width: 100%; max-width: 280px; justify-content: center; }
}

.watermark {
    position: absolute; inset: 0; pointer-events: none; opacity: 0.03; z-index: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><text x='0' y='60' fill='gold' font-size='11' font-weight='bold' transform='rotate(-30)'>NGAN THINH SILVER</text></svg>");
}