*{box-sizing:border-box;}
:root{--kyyeu-accent:#2E6B5E; --kyyeu-heading-font:'Cormorant Garamond',serif; --kyyeu-heading-scale:1;}
html{background:#F4EEE2;}
body{margin:0; background:var(--kyyeu-bg,#F4EEE2); color:#33372E; font-family:'Literata',serif; line-height:1.7;}
.wrap{max-width:720px; margin:0 auto;}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.001s !important; transition-duration:.001s !important;} }

.cover{padding:52px 24px 22px; text-align:center;}
.eyebrow{font-size:11.5px; letter-spacing:.25em; color:var(--kyyeu-accent); margin-bottom:16px;}
.cover-photo{width:150px; height:150px; border-radius:50%; margin:0 auto 18px; overflow:hidden; border:4px solid #fff; box-shadow:0 12px 26px rgba(51,55,46,.18);}
.cover-photo img{width:100%; height:100%; object-fit:cover;}
.cover h1{font-family:var(--kyyeu-heading-font); font-weight:600; font-size:calc(38px * var(--kyyeu-heading-scale)); margin:0 0 8px; color:var(--kyyeu-accent);}
.cover p{margin:0; font-size:14px; color:#6B6F62;}

.section{padding:44px 24px 8px;}
.section-head{text-align:center; margin-bottom:24px;}
.section h2{font-family:var(--kyyeu-heading-font); font-weight:600; font-size:calc(28px * var(--kyyeu-heading-scale)); color:var(--kyyeu-accent); margin:0 0 4px;}
.section .sub{font-size:13px; color:#7C8073;}

/* BẢN ĐỒ */
.memory-map{
  position:relative; max-width:560px; margin:0 auto 24px; aspect-ratio:4/3;
  background:
    repeating-linear-gradient(0deg, rgba(46,107,94,.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(46,107,94,.05) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 30% 30%, #E9E2D2, #DCD3BF);
  border:2px solid #C9BDA2; border-radius:6px; overflow:hidden;
  box-shadow:0 12px 28px rgba(51,55,46,.14);
}
.map-lines{position:absolute; inset:0; width:100%; height:100%;}
.map-lines line{stroke:var(--kyyeu-accent); stroke-width:.4; stroke-dasharray:2 2; opacity:.55;}
.map-pin{
  position:absolute; transform:translate(-50%,-50%); background:none; border:none;
  cursor:pointer; padding:0; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.pin-dot{
  width:16px; height:16px; border-radius:50% 50% 50% 0; background:#B8442F;
  transform:rotate(-45deg); box-shadow:0 3px 6px rgba(0,0,0,.25);
  transition:transform .25s ease;
}
.map-pin:hover .pin-dot, .map-pin.active .pin-dot{transform:rotate(-45deg) scale(1.35); background:var(--kyyeu-accent);}
.pin-label{
  font-size:10.5px; color:#33372E; background:rgba(255,255,255,.85);
  padding:2px 7px; border-radius:10px; white-space:nowrap; max-width:110px;
  overflow:hidden; text-overflow:ellipsis;
}

/* THẺ ĐỊA ĐIỂM */
.place-panel{max-width:520px; margin:0 auto; position:relative; min-height:230px;}
.place-card{display:none; background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 12px 26px rgba(51,55,46,.12);}
.place-card.active{display:block; animation:slideIn .4s ease;}
@keyframes slideIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.place-card img{width:100%; height:190px; object-fit:cover; display:block;}
.place-info{padding:16px 20px;}
.place-info h3{margin:0 0 6px; font-family:var(--kyyeu-heading-font); font-size:19px; color:var(--kyyeu-accent);}
.place-info p{margin:0; font-size:14px; color:#4B5044;}

.see-full{text-align:center; margin:24px 0 0;}
.see-full a{font-family:var(--kyyeu-heading-font); font-size:15px; color:var(--kyyeu-accent); text-decoration:none; border-bottom:1px solid var(--kyyeu-accent);}

.notes{max-width:520px; margin:0 auto;}
.note{background:#fff; border-left:3px solid var(--kyyeu-accent); border-radius:6px; padding:16px 20px; margin-bottom:14px; box-shadow:0 6px 14px rgba(51,55,46,.07);}
.note p{margin:0 0 8px; font-size:14.5px;}
.note cite{font-family:'Cormorant Garamond',serif; font-style:italic; font-size:13.5px; color:var(--kyyeu-accent);}

.share{margin:48px 24px 30px; padding:34px 24px; text-align:center; border-radius:12px; background:var(--kyyeu-accent); color:#F4EEE2;}
.share h2{font-family:var(--kyyeu-heading-font); font-size:26px; margin:0 0 6px;}
.share p{font-size:13px; margin:0 0 18px; opacity:.85;}
#qrcode{background:#fff; display:inline-block; padding:8px; border-radius:8px; margin-bottom:14px;}
.link-row{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:13px;}
.link-row code{background:rgba(244,238,226,.15); padding:6px 12px; border-radius:20px;}
.link-row button{background:#F4EEE2; color:var(--kyyeu-accent); border:none; padding:6px 14px; border-radius:20px; font-size:12.5px; font-weight:700; cursor:pointer;}

.foot{text-align:center; font-size:12px; color:#7C8073; padding:0 20px 40px;}

/* CHÚ GIẢI BẢN ĐỒ */
.map-legend{max-width:460px; margin:0 auto; background:#FFFDF8; border:1px solid #D9CFB6; border-radius:6px; padding:8px 0;}
.legend-row{display:flex; gap:14px; align-items:center; padding:10px 20px; border-bottom:1px dashed #EAE1CB;}
.legend-row:last-child{border-bottom:none;}
.legend-icon{font-size:18px; width:28px; text-align:center; flex-shrink:0;}
.legend-text{font-size:14px; color:#4B5044;}

/* THỐNG KÊ HÀNH TRÌNH */
.journey-stats{display:flex; justify-content:center; gap:18px; flex-wrap:wrap; max-width:560px; margin:0 auto;}
.stat-box{background:#fff; border-radius:10px; padding:18px 22px; text-align:center; min-width:100px; box-shadow:0 6px 16px rgba(51,55,46,.08);}
.stat-box strong{display:block; font-family:var(--kyyeu-heading-font); font-size:28px; color:var(--kyyeu-accent);}
.stat-box span{font-size:11.5px; color:#7C8073; letter-spacing:.03em;}

/* LA BÀN HƯỚNG ĐI */
.compass-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:560px; margin:0 auto;}
.compass-card{background:#fff; border:1px solid #DDD5C0; border-radius:10px; padding:16px 12px; text-align:center; box-shadow:0 5px 12px rgba(51,55,46,.06);}
.compass-rose{color:var(--kyyeu-accent); font-size:20px; margin-bottom:6px;}
.compass-card strong{display:block; font-size:13.5px; color:#33372E;}
.compass-card span{display:block; font-size:12px; color:#7C8073; margin-top:4px; font-style:italic;}
@media(max-width:520px){.compass-grid{grid-template-columns:repeat(2,1fr);}}