/* Trang giới thiệu Bạch Đằng: màu và chữ theo docs/du-an/03-hinh-anh-am-thanh.md */

@font-face { font-family: Alegreya; src: url(/font/Alegreya.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: Alegreya; src: url(/font/Alegreya-Italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya SC"; src: url(/font/AlegreyaSC-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --giay: #EFE3C8;
  --giay-dam: #E4CC9C;
  --muc: #2B2118;
  --son: #B5452E;
  --son-dam: #96361F;
  --hoe: #D9A33A;
  --nuoc: #5F8381;
  --nuoc-dam: #4E716F;
  --dem: #1E1610;
  --vien: 3px solid var(--muc);
  --rong: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--giay); color: var(--muc); font: 19px/1.6 Alegreya, Georgia, serif; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--son-dam); text-underline-offset: 3px; }
a:hover { color: var(--son); }
:focus-visible { outline: 3px solid var(--hoe); outline-offset: 3px; }
.sc { font-family: "Alegreya SC", Alegreya, serif; font-weight: 400; }
h1, h2, h3 { font-family: "Alegreya SC", Alegreya, serif; font-weight: 400; line-height: 1.15; margin: 0; }
.bo-qua { position: absolute; left: -9999px; }
.bo-qua:focus { left: 16px; top: 16px; z-index: 10; background: var(--giay); padding: 8px 14px; border: var(--vien); }

/* Thanh trên cùng */
.dau { position: sticky; top: 0; z-index: 5; background: var(--muc); color: var(--giay); }
.dau-trong { max-width: var(--rong); margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 16px; }
.dau a { color: var(--giay); text-decoration: none; }
.dau a:hover { color: var(--hoe); }
.ten-game { display: flex; align-items: center; gap: 10px; font-family: "Alegreya SC", serif; font-size: 22px; margin-right: auto; }
.ten-game img { width: 32px; height: 32px; border-radius: 7px; }
.dau nav { display: flex; gap: 20px; font-size: 17px; }
@media (max-width: 640px) { .dau nav .phu-nav { display: none; } .dau nav { gap: 14px; } }

/* Nút */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 26px; font: 21px/1.2 "Alegreya SC", serif; text-decoration: none; border: var(--vien); background: var(--giay); color: var(--muc); box-shadow: 5px 5px 0 var(--muc); transition: transform .12s, box-shadow .12s; cursor: pointer; }
.nut:hover { color: var(--muc); transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--muc); }
.nut:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--muc); }
.nut.chinh { background: var(--son); color: var(--giay); }
.nut.chinh:hover { color: var(--giay); background: var(--son-dam); }

/* Khung chung */
.khung { max-width: var(--rong); margin: 0 auto; padding: 0 20px; }
.muc { padding: 88px 0; }
.nhan { font-family: "Alegreya SC", serif; color: var(--son); font-size: 20px; letter-spacing: .02em; margin: 0 0 6px; }
.muc h2 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 20px; }

/* Chân trang */
.chan { background: var(--dem); color: var(--giay-dam); font-size: 17px; }
.chan-trong { max-width: var(--rong); margin: 0 auto; padding: 36px 20px 44px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; }
.chan a { color: var(--giay); }
.chan a:hover { color: var(--hoe); }
.chan nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }

/* Trang chữ: quyền riêng tư, điều khoản, hỗ trợ */
.trang { flex: 1; width: 100%; max-width: 780px; margin: 0 auto; padding: 56px 20px 80px; }
.trang h1 { font-size: clamp(40px, 7vw, 60px); color: var(--muc); }
.trang h2 { font-size: 28px; color: var(--son); margin: 40px 0 8px; }
.trang .phu { font-style: italic; opacity: .75; margin: 6px 0 28px; }
.trang hr { border: 0; border-top: 2px solid rgba(43, 33, 24, .2); margin: 56px 0 32px; }
.trang .tieng-anh h1 { font-size: 34px; }
.trang .tieng-anh h2 { font-size: 22px; margin-top: 24px; }
.tom { background: var(--giay-dam); border: var(--vien); padding: 16px 22px; margin: 0 0 8px; }
.tom p { margin: 0; }
@media (max-width: 600px) { body { font-size: 18px; } .muc { padding: 64px 0; } }

/* Nút đổi ngôn ngữ */
.dau nav .ngu { border: 1.5px solid rgba(239, 227, 200, .55); border-radius: 3px; padding: 0 8px; font-size: 15px; letter-spacing: .05em; align-self: center; }