:root{
  --bg:#eee;
  --text:#333;
  --muted:#444;
  --line:rgba(0,0,0,0.1);
      --accent:#2b7de9;
      --hot:#ff4d6d;
      --shadow: 0 12px 30px rgba(0,0,0,.35);
      --radius:18px;
      --radius2:14px;
}
body{
/* font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; */
  background: radial-gradient(1200px 800px at 20% -10%, rgba(73,163,255,.22), transparent 55%),
		  radial-gradient(900px 600px at 90% 10%, rgba(43,125,233,.20), transparent 50%),
		  var(--bg);  
 
}
 .wrap{max-width:1300px;margin:40px auto;padding:0 18px 36px}
 @media only screen and (min-width: 768px) {
	 .wrap{
	 padding-top:150px;
	 }
 }
  @media only screen and (max-width: 767px) {
	 .wrap{
	 padding-top:120px;
	 }
	 .logotextmb{
		 background:#DDD;
	 }
 }
    
    h1{margin:0;font-size:34px;line-height:1.1}
    .subtitle{color:var(--muted);font-size:14px;line-height:1.45;max-width:72ch;margin-top:8px}
    .hint{font-size:12px;color:var(--muted);text-align:right;max-width:44ch}

    .grid{display:grid;grid-template-columns:420px 1fr;gap:50px;align-items:stretch}

    .panel{
     
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height: 350px;
	  margin-bottom:0 !important
    }
	
	 .map{
      
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow:hidden;
      min-height: 650px;
	 
    }
    .panel-head, .map-head{
      padding: 10px 14px 8px;
      border-bottom: 1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
	   background:floralwhite;
    }
    .panel-head b, .map-head b{font-size:14px;color: #333;text-transform: uppercase;}
    .pill{
      font-size:12px;color:var(--muted);
      border:1px solid var(--line);
      padding:6px 10px;border-radius:999px;
      background: rgba(255,255,255,.02);
      white-space:nowrap;
    }

    /* Left */
    .detail{padding:14px;display:flex;flex-direction:column;gap:12px}
    .detail-card{
      background: beige;
      border: 1px solid var(--line);
      border-radius: var(--radius2);
      padding: 14px 14px 12px;
    }
    .title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
    .loc-name{margin:0;font-size:20px;font-weight:900;letter-spacing:.2px;line-height:1.15; color:#333}
    .loc-type{
      margin:0;color:var(--muted);font-size:12px;
      padding:6px 10px;border-radius:999px;border:1px solid var(--line);
      background: rgba(255,255,255,.02);white-space:nowrap
    }
    .loc-addr{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.55}
    .meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
    .tag{
      font-size:12px;color:#666;border:1px solid var(--line);
      padding:6px 10px;border-radius:999px;background: rgba(255,255,255,.02);list-style: none;
    }
    .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
    .btn{
      display:inline-flex;align-items:center;gap:8px;
      padding:10px 12px;border-radius:12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.02);
      color:var(--text);
      font-weight:800;font-size:13px;text-decoration:none;
      transition: border-color .15s ease, transform .15s ease;
      cursor:pointer;
    }
    .btn:hover{border-color: rgba(73,163,255,.55); transform: translateY(-1px)}
    .btn.primary{background: rgba(43,125,233,.18); border-color: rgba(43,125,233,.35);color:#0064d2}
    .btn svg{width:16px;height:16px;fill:none;stroke: red;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.92}
	
	.map-pin {
  width: 32px;
  height: 32px;
  fill: #e63946;
  animation: floatPin 1.8s ease-in-out infinite;
}

@keyframes floatPin {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

    .list{display:flex;flex-direction:column;gap:10px}
    .mini-item{
      background: rgba(255,255,255,.02);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      cursor:pointer;
      display:flex;
      align-items:flex-start;
      gap:10px;
      transition: border-color .15s ease, transform .15s ease, background .15s ease;
      outline:none;
    }
    .mini-item:hover{border-color: rgba(73,163,255,.45); transform: translateY(-1px)}
    .mini-item.active{border-color: rgba(73,163,255,.75); background: rgba(73,163,255,.10)}
    #mapSub{
		display:none
	}
	/* .dot{width:14px;height:14px;border-radius:999px;margin-top:3px;background: rgba(73,163,255,.8);box-shadow:0 0 0 4px rgba(73,163,255,.12);flex:0 0 auto} */
 
	.dot {
  width: 32px;
  height: 32px;
  background: url('../images/iconmap.png') no-repeat center;
  background-size: contain;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;   /* QUAN TRỌNG */
}
	 .mini-item.active .dot{background: url('../images/iconmaphover.png');width:32px;height:32px;}
   /*  .mini-item.active .dot{background: rgba(255,77,109,.95); box-shadow:0 0 0 4px rgba(255,77,109,.14)} */
    .mini-text b{display:block;font-size:18px;line-height:1.25; }
    .mini-text span{display:block;font-size:16px;color:var(--muted);margin-top:4px;line-height:1.35}

    /* Map */
    .map{position:relative}
    .map-stage{position:relative;height: calc(100% - 54px);min-height:120px;padding:0px}
    .map-canvas{
      position:relative;
	  height:100%;
	  background:#FFF;
      /* border-radius:16px; */
	  /* border:1px solid var(--line); */
    /*   background: rgba(11,18,32,.55); */
      overflow:hidden;
     /*  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); */
    }
    .map-canvas:before{
      content:"";position:absolute;inset:0;
     /*  background: radial-gradient(700px 520px at 62% 35%, rgba(73,163,255,.16), transparent 62%); */
      pointer-events:none;
    }
    .vn-img{
      position:absolute;
	  inset: 1px;
  width: calc(100% - 0px);
  height: calc(100% - 0px);
      object-fit: contain;
      opacity:.92;
     /*  filter: drop-shadow(0 18px 26px rgba(0,0,0,.25)); */
      pointer-events:none;
      user-select:none;
    }

    /* Pin */
    .pin{
      position:absolute;
      width: 54px;height:54px;
      transform: translate(-50%, -100%);
      cursor:pointer;
      transition: transform .14s ease, opacity .14s ease, filter .14s ease;
      opacity:.84;
    }
    .pin:hover{transform: translate(-50%, -102%) scale(1.03); opacity:1}
    .pin.active{opacity:1; filter: drop-shadow(0 10px 14px rgba(0,0,0,.42)); transform: translate(-50%, -106%) scale(1.06)}
    .pin svg{width:100%;height:100%}
    .pin .body{fill: rgba(73,163,255,.92); stroke: rgba(255,255,255,.92); stroke-width:1.6}
    .pin .dot{fill: rgba(11,18,32,.9)}
    .pin.active .body{fill: rgba(255,77,109,.96)}
    .pin-label{
      position:absolute;
      transform: translate(10px, -46px);
      font-size: 12px;
      font-weight: 900;
      color: rgba(233,238,251,.95);
      text-shadow: 0 2px 8px rgba(0,0,0,.45);
      white-space:nowrap;
      pointer-events:none;
    }

    .note{
      position:absolute; left:14px; right:14px; bottom:14px;
      display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
      font-size:12px;color: rgba(169,182,211,.85);
      pointer-events:none;
    }

 

    @media (max-width: 980px){
      .grid{grid-template-columns:1fr}
      .hint{text-align:left}
      .panel,.map{min-height:auto}
      .map-stage{min-height:520px}
    }