/* Một mảnh của bộ áo. Tách 02/09/2026 từ `cay.css` (3.103 dòng).
   🪤 THỨ TỰ CÁC THẺ <link> LÀ THẬT: CSS quyết bằng thứ tự khi độ đặc hiệu
   bằng nhau. Đảo hai mảnh là đảo luôn luật nào thắng. */

/* ===========================================================================
   QUẠT TRÒN — phả đồ hình quạt
   =========================================================================== */



/* 🪤 NÉT VIỀN PHẢI KHÔNG CO THEO SVG. `vector-effect` giữ nét đúng một pixel
   dù khung phóng to cỡ nào — không có nó thì quạt vẽ trong hệ toạ độ đơn vị
   nhỏ sẽ có nét dày bằng cả một ô. */
.q-o {
  stroke: var(--vien); stroke-width: 1; vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.q-noi   { fill: var(--nam-nen); }
.q-ngoai { fill: var(--nu-nen); }
.q-trong { fill: var(--giay-sau); cursor: default; }
.q-o:hover:not(.q-trong) { stroke: var(--son); stroke-width: 2; }

.q-tam { fill: var(--son); stroke: var(--son-toi); stroke-width: 1;
  vector-effect: non-scaling-stroke; }

.q-chu, .q-ten-tam { pointer-events: none; }
.q-chu text, .q-ten-tam {
  text-anchor: middle; fill: var(--muc); font-weight: 600;
  font-family: inherit;
}
.q-ten-tam { fill: #fff; }
.q-chu .q-nam { fill: var(--muc-nhat); font-weight: 400; }
.q-ten-tam.q-nam { fill: rgba(255,255,255,.8); font-weight: 400; }


@media (prefers-color-scheme: dark) {
  .q-ten-tam { fill: #fff; }
}