/* Bài "Trụ Trấn Mạch" (tran-mach.html): nạp sau luyen-quy-thuat.css.
 * Mọi hình minh hoạ là CSS thuần — chỉ một ảnh chụp trong game (landing-assets/tran-mach/cover.webp). */
:root{--tm-red:#9b4231;--tm-red-bg:#f7e3db;--tm-red-line:#d5a692;--tm-card:#f6edda;--tm-card-line:#decaa3}

.tm-hero{margin:0;padding:0 52px}
.tm-hero img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto;border:1px solid #a67d3d;border-radius:10px;box-shadow:0 5px 0 rgba(86,61,29,.18);image-rendering:pixelated}
.tm-hero figcaption{max-width:560px;margin:0 auto;padding:8px 2px 0;color:#77684e;font-size:12px}

/* Ba thẻ đầu bài */
.tm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 0}
.tm-stat{display:grid;gap:3px;padding:14px 14px 13px;background:var(--tm-card);border:1px solid var(--tm-card-line);border-radius:10px}
.tm-stat small{color:var(--jade);font-size:10.5px;font-weight:900;letter-spacing:.14em}
.tm-stat b{color:var(--forest);font-size:22px;line-height:1.1}
.tm-stat span{color:var(--muted);font-size:12.5px;line-height:1.4}

/* Điều kiện đánh trụ */
.tm-conds{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 0;padding:0;list-style:none}
.tm-conds li{display:grid;grid-template-columns:38px 1fr;gap:11px;align-items:center;padding:11px 13px;background:var(--tm-card);border:1px solid var(--tm-card-line);border-radius:9px}
.tm-conds .ic{display:grid;place-items:center;width:38px;height:38px;background:var(--forest);border:2px solid var(--gold);border-radius:50%;color:#f3d77b;font-size:16px;font-weight:900;line-height:1}
.tm-conds b{display:block;color:var(--forest);font-size:15px;line-height:1.2}
.tm-conds span{color:var(--muted);font-size:12.5px;line-height:1.35}
.tm-conds em{color:var(--jade);font-style:normal;font-weight:900}
.tm-conds li.cuoi{grid-column:1/-1;background:#eef1dd;border-color:#bfcf9a}

/* Cờ chiến */
.tm-flags{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.tm-flag{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;background:#fffaf0;border:1px solid #d8c39b;border-radius:99px;color:var(--forest);font-size:13px;font-weight:800}
.tm-flag i{display:inline-block;width:12px;height:16px;border:2px solid var(--c-vien,#0000);border-radius:2px 5px 5px 2px;background:var(--c)}
.tm-flag.do{border-color:var(--tm-red);background:var(--tm-red-bg);color:var(--tm-red);box-shadow:0 2px 0 rgba(155,66,49,.25)}

/* Cân sức: càng đông càng nhanh */
.tm-bars{display:grid;gap:10px;margin:14px 0 0;padding:16px;background:var(--tm-card);border:1px solid var(--tm-card-line);border-radius:10px}
.tm-bar{display:grid;grid-template-columns:70px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:13px}
.tm-bar .who{color:var(--forest);font-weight:800;white-space:nowrap}
.tm-bar .t{text-align:right;color:var(--forest);font-size:14px;font-weight:900;line-height:1.1}
.tm-bar.no .t{color:var(--tm-red);font-size:11.5px}
.tm-track{height:20px;background:#e7d9b8;border-radius:5px;overflow:hidden}
.tm-fill{display:block;height:100%;background:linear-gradient(90deg,#7bb08f,var(--jade));border-radius:5px}
.tm-bar.no .tm-fill{width:100%;background:repeating-linear-gradient(135deg,#d9b3a4 0 5px,#ecd2c6 5px 10px)}

/* Bốn bước chiếm trụ */
.tm-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0 0;padding:0;list-style:none}
.tm-steps li{position:relative;display:grid;gap:4px;padding:14px 13px 13px;background:var(--tm-card);border:1px solid var(--tm-card-line);border-radius:9px}
.tm-steps li:not(:last-child)::after{content:"›";position:absolute;right:-12px;top:50%;z-index:1;transform:translateY(-50%);display:grid;place-items:center;width:14px;height:24px;color:var(--gold);font-size:26px;font-weight:900;line-height:1}
.tm-steps .n{display:grid;place-items:center;width:30px;height:30px;background:var(--forest);border:2px solid var(--gold);border-radius:50%;color:#f3d77b;font-size:15px;font-weight:900}
.tm-steps b{color:var(--forest);font-size:15px;line-height:1.2}
.tm-steps span{color:var(--muted);font-size:12.5px;line-height:1.4}

/* Đòn của trụ */
.tm-hit{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0 0}
.tm-hit div{display:grid;gap:2px;padding:13px;background:var(--tm-red-bg);border:1px solid var(--tm-red-line);border-radius:9px}
.tm-hit b{color:var(--tm-red);font-size:21px;line-height:1}
.tm-hit span{font-size:12px;color:#6b4d43;line-height:1.35}

.tm-tips{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 0}
.tm-tip{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:center;padding:11px 13px;background:#e5eed9;border:1px solid #a7c08d;border-radius:9px}
.tm-tip i{display:grid;place-items:center;width:34px;height:34px;background:var(--forest);border-radius:50%;color:#f3d77b;font-style:normal;font-size:15px}
.tm-tip b{display:block;color:var(--forest);font-size:14px;line-height:1.2}
.tm-tip span{color:#4b6554;font-size:12.5px;line-height:1.35}

@media(max-width:800px){.tm-hero{padding:0 28px}.tm-steps{grid-template-columns:1fr 1fr}.tm-steps li:nth-child(2)::after{display:none}.tm-hit{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tm-hero{padding:0 19px}.tm-stats,.tm-conds,.tm-tips,.tm-steps{grid-template-columns:1fr}.tm-steps li::after{display:none!important}.tm-bar{grid-template-columns:58px minmax(0,1fr) 74px;gap:8px}.tm-bars{padding:12px}.tm-stat b{font-size:20px}}