/* Cây gia phả vui nhộn: cây vẽ bằng SVG (cay-gia-pha.js), mỗi người là một trái tròn có ảnh, nở to khi rê chuột / chạm.
   Không có JS thì các trái xếp thành hàng gọn gàng. */
.cg-khung { --cg-la-dam: #4E9F45; --cg-la: #6FBF5A; --cg-la-sang: #9AD877; --cg-vo: #8A5A36; --cg-vo-dam: #6B4226; --cg-co: #A8D982;
  --cg-trai-a: #FFC27A; --cg-trai-b: #F28B6B; --cg-thang: #B85E1E; --cg-co-dam: #7DBE5C; --cg-day: #8C6A4A;
  --cg-tao: #5DBB4F; --cg-tao-sang: #A6E07A; --cg-tao-vien: #2F7A33; --cg-tao-do: #E5453C;
  --cg-dao: #F49AB8; --cg-dao-sang: #FFE1EC; --cg-mai: #F7C21B; --cg-mai-sang: #FFF1A8; --cg-nhuy: #E0602A;
  --cg-da: #3E8C4A; --cg-da-sang: #74B865; --cg-da-dam: #24603A;
  overflow-x: auto; overflow-y: hidden; border-radius: 22px; border: 1px solid var(--fa-line);
  background: linear-gradient(var(--fa-bg-2), var(--fa-surface) 70%); box-shadow: var(--fa-shadow); }
html[data-theme="dark"] .cg-khung { --cg-la-dam: #2F6A30; --cg-la: #3F8A3A; --cg-la-sang: #5FA04A; --cg-vo: #7A4E2E; --cg-vo-dam: #5A371F;
  --cg-co: #3F6A35; --cg-trai-a: #E9A15C; --cg-trai-b: #D9735A; --cg-thang: #F7BC7A; --cg-co-dam: #4F7F3F; --cg-day: #C9A27A;
  --cg-tao: #3E8A3A; --cg-tao-sang: #6DAA55; --cg-tao-vien: #1F4E22; --cg-tao-do: #D0463C;
  --cg-dao: #D9779A; --cg-dao-sang: #F2B6CB; --cg-mai: #E0AE1A; --cg-mai-sang: #F5D96A; --cg-nhuy: #F08A4A;
  --cg-da: #2C6B37; --cg-da-sang: #4E8F48; --cg-da-dam: #1A4428; }
.cg-san { position: relative; margin: 0 auto; container-type: inline-size; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; padding: 1.5rem; }
.cg-san.san-sang { display: block; padding: 0; }
.cg-ve { display: block; width: 100%; height: auto; }
.cg-ve .co { fill: var(--cg-co); } .cg-ve .co-dam { fill: var(--cg-co-dam); }
.cg-ve .st-than-1 { stop-color: var(--cg-vo-dam); } .cg-ve .st-than-2 { stop-color: var(--cg-vo); } .cg-ve .st-than-3 { stop-color: var(--cg-vo-dam); }
.cg-ve .than { fill: url(#cg-gr-than); } .cg-ve .van { stroke: var(--cg-vo-dam); stroke-width: 2.5; fill: none; stroke-linecap: round; opacity: .55; }
.cg-ve .canh { fill: var(--cg-vo); } .cg-ve .canh-hoa { fill: var(--cg-vo-dam); }
.cg-ve .dom-sang { fill: #fff; opacity: .28; }
/* cổ thụ */
.cg-ve .st-la-1 { stop-color: var(--cg-la-sang); } .cg-ve .st-la-2 { stop-color: var(--cg-la); }
.cg-ve .la { fill: url(#cg-gr-la); } .cg-ve .la-bong { fill: var(--cg-la-dam); }
/* cây táo hoạt hình */
.cg-ve .st-tao-1 { stop-color: var(--cg-tao-sang); } .cg-ve .st-tao-2 { stop-color: var(--cg-tao); }
.cg-ve .tao { fill: url(#cg-gr-tao); } .cg-ve .tao-vien { fill: var(--cg-tao-vien); }
.cg-ve .tao-do { fill: var(--cg-tao-do); } .cg-ve .cuong { stroke: var(--cg-vo-dam); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.cg-ve .day { stroke: var(--cg-day); stroke-width: 3; } .cg-ve .ghe { fill: var(--cg-thang); }
/* hoa đào, hoa mai */
.cg-ve .st-dao-1 { stop-color: var(--cg-dao-sang); } .cg-ve .st-dao-2 { stop-color: var(--cg-dao); }
.cg-ve .st-mai-1 { stop-color: var(--cg-mai-sang); } .cg-ve .st-mai-2 { stop-color: var(--cg-mai); }
.cg-ve .canh-dao { fill: url(#cg-gr-dao); } .cg-ve .canh-mai { fill: url(#cg-gr-mai); } .cg-ve .nhuy { fill: var(--cg-nhuy); }
/* cây đa */
.cg-ve .st-da-1 { stop-color: var(--cg-da-sang); } .cg-ve .st-da-2 { stop-color: var(--cg-da); }
.cg-ve .da { fill: url(#cg-gr-da); } .cg-ve .da-bong { fill: var(--cg-da-dam); }
.cg-ve .re { stroke: var(--cg-vo); stroke-width: 3; fill: none; stroke-linecap: round; opacity: .85; } .cg-ve .re-to { stroke-width: 6; opacity: 1; }
.cg-ve .re-dong { animation: cg-gio 7s ease-in-out infinite alternate-reverse; transform-box: view-box; }
/* lá, cánh hoa rơi */
.cg-ve .roi { transform-box: fill-box; transform-origin: center; animation: cg-roi 9s linear infinite; opacity: 0; }
.cg-ve .la-roi { fill: var(--cg-la); } .cg-ve .canh-roi-dao { fill: var(--cg-dao); } .cg-ve .canh-roi-mai { fill: var(--cg-mai); }
@keyframes cg-roi { 0% { opacity: 0; transform: translate(0, -20px) rotate(0); } 12% { opacity: .9; }
  50% { transform: translate(35px, 140px) rotate(200deg); } 88% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px, 300px) rotate(420deg); } }
.cg-ve .thang { stroke: var(--cg-thang); stroke-width: 7; stroke-linecap: round; fill: none; } .cg-ve .thang.bac { stroke-width: 5; }
.cg-ve .tan { animation: cg-gio 6s ease-in-out infinite alternate; transform-box: view-box; }
@keyframes cg-gio { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }

/* một trái: --fz là cỡ trái (JS đặt theo bề rộng cây) */
.cg-trai { --fz: 76px; position: relative; display: flex; flex-direction: column; align-items: center; }
.san-sang .cg-trai { position: absolute; width: var(--fz); height: var(--fz); margin: calc(var(--fz) / -2) 0 0 calc(var(--fz) / -2); z-index: 2;
  animation: cg-dung-dua 3.2s ease-in-out infinite; }
@keyframes cg-dung-dua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.cg-qua { position: relative; width: var(--fz); height: var(--fz); border: 0; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 32% 28%, var(--cg-trai-a), var(--cg-trai-b) 78%); box-shadow: 0 6px 12px -6px rgba(90, 40, 10, .55);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.cg-qua::before { content: ''; position: absolute; top: -9%; left: 50%; width: 30%; height: 18%; background: var(--cg-la);
  border-radius: 0 100% 0 100%; transform: translateX(-10%) rotate(-12deg); }
.cg-mat { width: 76%; height: 76%; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--fa-soft); border: 3px solid var(--fa-surface); }
.cg-mat img { width: 100%; height: 100%; object-fit: cover; }
.cg-cho-anh { border-style: dashed; border-color: var(--fa-amber-dark); color: var(--fa-amber-dark); font: 600 calc(var(--fz) * .15)/1.1 'Be Vietnam Pro', sans-serif; text-align: center; }
.cg-cho-anh b { display: block; font-size: calc(var(--fz) * .3); font-weight: 400; }
.cg-vuong-mien { position: absolute; top: -26%; right: -8%; font-size: calc(var(--fz) * .34); transform: rotate(18deg); }
.cg-tay { position: absolute; top: -18%; left: -10%; font-size: calc(var(--fz) * .32); animation: cg-vay 1s ease-in-out infinite; }
@keyframes cg-vay { 0%, 100% { rotate: -14deg; } 50% { rotate: 14deg; } }
.cg-ten { margin-top: 3px; white-space: nowrap; font: 400 clamp(13px, calc(var(--fz) * .22), 18px)/1.1 'Patrick Hand', cursive; color: var(--fa-ink);
  background: color-mix(in srgb, var(--fa-surface) 82%, transparent); padding: 1px 7px 2px; border-radius: 8px; pointer-events: none; }
.san-sang .cg-ten { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); }
.cg-ten small { color: var(--fa-amber-dark); font-size: .9em; }
.cg-trai:hover, .cg-trai.mo { z-index: 6; }
.cg-trai:hover .cg-qua, .cg-trai.mo .cg-qua, .cg-qua:focus-visible { transform: scale(1.85); }
.cg-trai:hover .cg-ten, .cg-trai.mo .cg-ten { opacity: 0; }
.cg-qua:focus-visible { outline: 3px solid var(--fa-amber); outline-offset: 3px; }
.cg-cho .cg-qua { animation: cg-lac 1.1s ease-in-out infinite; }
@keyframes cg-lac { 0%, 100% { rotate: -8deg; } 50% { rotate: 8deg; } }
.cg-cho:hover .cg-qua, .cg-cho.mo .cg-qua { animation: none; }
.san-sang .cg-cho .cg-ten-cho { display: none; }
.san-sang .cg-cho.an { display: none; }

/* bong bóng câu vui; khi bấm (ghim) thì có thêm nút */
.cg-bong { position: absolute; z-index: 8; background: var(--fa-surface); color: var(--fa-ink); border: 2px solid var(--fa-amber); border-radius: 16px;
  padding: 8px 12px; width: max-content; max-width: 250px; box-shadow: var(--fa-shadow-lg); text-align: center; pointer-events: none;
  transform: translate(-50%, -100%) scale(.6); opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.cg-bong.hien { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.cg-bong.phai { transform: translate(0, -50%) scale(.6); } .cg-bong.phai.hien { transform: translate(0, -50%) scale(1); }
.cg-bong.duoi { transform: translate(-50%, 0) scale(.6); } .cg-bong.duoi.hien { transform: translate(-50%, 0) scale(1); }
.cg-bong.trai { transform: translate(-100%, -50%) scale(.6); } .cg-bong.trai.hien { transform: translate(-100%, -50%) scale(1); }
.cg-bong.ghim { pointer-events: auto; }
.cg-bong .cau { font: 400 19px/1.2 'Patrick Hand', cursive; margin: 0; }
.cg-bong .ai { font-size: 12px; color: var(--fa-muted); margin: 2px 0 0; }
.cg-bong .nut { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.cg-bong .nut:empty { display: none; }
.cg-bong form { display: flex; gap: 6px; align-items: center; margin: 0; }
.cg-bong select { width: auto; }
.cg-gui-anh { display: none; }
.cg-form-anh.da-chon .cg-gui-anh { display: inline-block; }

.cg-bang { position: absolute; z-index: 1; pointer-events: none; background: var(--fa-surface); border: 2px dashed var(--fa-amber); border-radius: 14px; padding: 5px 10px;
  font: 400 clamp(12px, 2.6cqw, 17px)/1.2 'Patrick Hand', cursive; white-space: nowrap; transform: translate(-50%, -100%); animation: cg-nhip 2s ease-in-out infinite; }
.cg-san:not(.san-sang) .cg-bang { position: static; transform: none; align-self: center; }
@keyframes cg-nhip { 50% { transform: translate(-50%, -100%) scale(1.06); } }
.cg-xin { margin: 0; }
.san-sang .cg-xin { position: absolute; z-index: 3; transform: translate(-50%, -100%); white-space: nowrap; }
.cg-phao { position: absolute; z-index: 9; pointer-events: none; font-size: 22px; animation: cg-no 1.1s ease-out forwards; }
@keyframes cg-no { from { transform: translate(-50%, -50%) scale(.4); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.2); opacity: 0; } }

/* nón trên trái: đội lệch cho vui; có nón thì vương miện chủ hộ xuống góc dưới */
.cg-non { position: absolute; left: 50%; bottom: 72%; width: 92%; transform: translateX(-50%) rotate(-9deg); pointer-events: none; z-index: 1; }
.cg-qua:has(.cg-non) .cg-vuong-mien { top: auto; bottom: -14%; right: -12%; }
.cg-qua:has(.cg-non)::before { display: none; }
/* tủ nón */
.cg-tu-non { margin: 0 0 1rem; border: 2px dashed var(--fa-line); border-radius: 18px; padding: .6rem 1rem; background: var(--fa-surface); }
.cg-tu-non summary { cursor: pointer; font: 400 19px/1.3 'Patrick Hand', cursive; }
.cg-tu-non summary small { color: var(--fa-muted); font-size: .8em; }
.cg-khap-web { display: flex; gap: .5rem; align-items: center; margin: .6rem 0; }
.cg-nons { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; margin-bottom: .5rem; }
.cg-nons button { display: grid; justify-items: center; gap: 2px; border: 2px solid var(--fa-line); background: var(--fa-bg); color: var(--fa-ink);
  border-radius: 14px; padding: .4rem .2rem; font-size: 13px; cursor: pointer; transition: transform .2s; }
.cg-nons button:hover { transform: translateY(-2px) rotate(-2deg); }
.cg-nons button[aria-pressed="true"] { border-color: var(--fa-amber); background: var(--fa-soft); }
.cg-nons img { width: 62px; height: 46px; object-fit: contain; }
.cg-nons b { font-size: 30px; line-height: 46px; font-weight: 400; }

/* nút chọn mẫu cây */
.cg-mau { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.cg-mau button { border: 2px solid var(--fa-line); background: var(--fa-surface); color: var(--fa-ink); border-radius: 999px; padding: .35rem .9rem;
  font: 400 17px/1.2 'Patrick Hand', cursive; cursor: pointer; transition: transform .2s; }
.cg-mau button:hover { transform: translateY(-2px); }
.cg-mau button[aria-pressed="true"] { border-color: var(--fa-amber); background: var(--fa-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-amber) 30%, transparent); }

.cg-nhac-anh { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 16px;
  background: var(--fa-soft); border: 1px dashed var(--fa-amber); }
.cg-nhac-icon { font-size: 2rem; }
.cg-nhac-anh form { display: flex; gap: .5rem; margin-top: .4rem; }
@media (prefers-reduced-motion: reduce) {
  .cg-ve .tan, .cg-ve .re-dong, .san-sang .cg-trai, .cg-cho .cg-qua, .cg-tay, .cg-bang { animation: none; }
  .cg-qua, .cg-bong { transition: none; }
  .cg-ve .roi { display: none; }
}