:root{
      --blue:#0f4f7a; --accent:#ffd166; --nav-dark:#2563EB; --panel:#f3efeb; --white:#fff;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:Arial, Helvetica, sans-serif;color:#113;}

    /* HEADER */
    .brand{display:flex;align-items:center;gap:16px}
    .logo{display:flex;flex-direction:column}
    .logo img{height:64px}
    .hotline{font-weight:700;color:var(--nav-dark);background:var(--accent);padding:8px 12px;border-radius:6px}

    /* NAV */
    nav{background:var(--nav-dark);color:var(--white)}
    .nav-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:5px 20px}
    .menu-left{display:flex;align-items:center;gap:18px}
    .menu-left ul{list-style:none;margin:0;padding:0;display:flex;gap:8px}
    .menu-left li{position:relative}
    .menu-left > ul > li > a{display:block;padding:10px 10px;color:var(--white);text-decoration:none;font-weight:500;letter-spacing:0.5px }
    .menu-left > ul > li:hover > a{background:#1E40AF; height: 100%}

    /* multi-level dropdown */
    .submenu{position:absolute;left:0;top:100%;background:#1E40AF;min-width:220px;border-radius:4px;overflow:hidden;transform-origin:top;opacity:0;pointer-events:none;transform:translateY(-8px) scaleY(0.95);transition:all .22s ease}
    .menu-left li:focus-within .submenu, .menu-left li:hover .submenu{opacity:1;pointer-events:auto;transform:translateY(0) scaleY(1)}
    .submenu a{display:block;padding:10px 14px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.05)}

    /* Right update time */
    .update-time{color:var(--white);font-weight:500}

    /* Map area fullwidth */
    .map-wrap{position:relative}
    #map{width:100%;height:450px}

    /* Left vertical toolbar (icons) */
    .left-tools{position:absolute;left:12px;top:90px;display:flex;flex-direction:column;gap:12px;z-index:800}
    .tool{width:48px;height:48px;background:var(--nav-dark);display:flex;align-items:center;justify-content:center;border-radius:6px;color:white;box-shadow:0 6px 18px rgba(0,0,0,0.25);cursor:pointer}
    .tool .badge{position:absolute;left:34px;top:6px;background:#e74c3c;color:white;padding:2px 6px;border-radius:12px;font-size:12px}

    /* Right alert panel */
    .alert-panel{position:fixed;right:80px;bottom: 50px;width:auto;background:#ffffff;border-radius:5px 5px 0px 0px;padding:18px;z-index:700;opacity: 0.7;}
    .alert-panel h3{margin:0 0 12px;color:var(--nav-dark);letter-spacing:0.6px}
    .alert-row{height:220px;background:transparent;border-radius:8px}
	.btn-alert {
		position: fixed;
		right: 60px;
		top: 90px;
		z-index: 4000; /* cao hơn leaflet */
		background: #ff9800;
		color: #fff;
		border: none;
		padding: 10px 15px;
		border-radius: 6px;
		font-size: 16px;
		cursor: pointer;
		box-shadow: 0 4px 6px rgba(0,0,0,0.2);
	}
	.btn-alert:hover {
		background: #e58900;
	}
	.alert-panel {
		position: fixed;
		right: 40px;
		bottom: 50px;
		width: auto;
		background: white;
		padding: 15px;
		border-radius: 5px 5px 0px 0px;
		z-index: 5000;
		box-shadow: 0 4px 12px rgba(0,0,0,0.25);
	
		/* ẨN MẶC ĐỊNH */
		transform: translateY(120%);
		opacity: 0;
		transition: all .25s ease;
	}
	.alert-row {
		height: auto !important;
		background: transparent;
		border-radius: 10px;
		padding: 5px;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.alert-box i {
		font-size: 22px;
		margin-right: 10px;
		color: #ff9800;
		float: left;
	}

	/* Title + icon nằm cùng hàng */
	.alert-box b {
		display: inline-flex;
		align-items: center;
		font-size: 15px;
	}

	/* Mô tả */
	.alert-box p {
		margin: 6px 0 6px 0;
		color: #444;
		line-height: 1.4;
	}

	/* Thời gian */
	.alert-box small {
		color: #666;
	}

	/* — MỨC ĐỘ CẢNH BÁO — */

	/* Nhẹ */
	.alert-light {
		border-left-color: #4aa3f0;
	}

	/* Trung bình */
	.alert-moderate {
		border-left-color: #ffb300;
	}

	/* Nặng */
	.alert-strong {
		border-left-color: #ff4d4d;
	}

	/* Rất nặng */
	.alert-severe {
		border-left-color: #d60000;
		background: #fff5f5;
	}

	/* Animation */
	@keyframes fadeIn {
		from {opacity: 0; transform: translateY(6px);}
		to {opacity: 1; transform: translateY(0);}
	}

	/* HIỆN PANEL */
	.alert-panel.show {
		transform: translateY(0);
		opacity: 0.8;
	}
	.weather-mini{
		display:flex;
		gap:25px;
		align-items:center;
	}
	.weather-mini .item{
		display:flex;
		align-items:center;
		font-size:13px;
		color:#003f5c;
	}
	
	.topbar {
    background: #ffffff;
    border-bottom: 3px solid #1E40AF;
    padding: 10px 0;
}

.topbar-inner {
    max-width: 1400px;
    margin: auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 70px;
}

/* Widget thời tiết */
.weather-mini {
    display: flex;
    gap: 25px;
    align-items: center;
    flex-wrap: wrap;
}

.weather-mini .item {
    display: flex;
    align-items: center;
    font-size: 13px;
    color: #003f5c;
}

.weather-mini i {
    font-size: 18px;
    margin-right: 6px;
    color: #ff9800;
}


.weather-mini{
    display:flex;
    gap:22px;
    align-items:center;
    background:#ffffff;
    padding:10px 20px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 3px 10px rgba(0,0,0,0.08);
}

.weather-mini .item{
    display:flex;
    align-items:center;
    
    font-size:14px;
    color:#003f5c;
    
    border-radius:6px;
    transition:0.2s;
}

.weather-mini .item:hover{
    background:rgba(255,185,0,0.15);
}

.weather-mini i{
    font-size:24px;
    color:#2563EB;
}

/* Mũi tên hướng gió */
.wind-arrow{
    font-size:18px;
    margin-right:4px;
    color:#ff9800;
    transition:0.3s;
}
.sovereignty-tooltip {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d32f2f;
    color: #b71c1c;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 4px;
}

/* MOBILE */
@media(max-width:768px){
    .weather-mini{
        flex-wrap:wrap;
        gap:14px;
        padding:8px 10px;
    }
    .weather-mini .item{
        font-size:13px;
        padding:2px 4px;
    }
    .weather-mini i,
    .wind-arrow{
        font-size:16px;
    }
}

/* 🔥 MOBILE RESPONSIVE – tự động xuống dòng */
@media (max-width: 768px) {
    .topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 10px;
        gap: 10px;
    }

    .weather-mini {
        flex-direction: row;
        justify-content: flex-start;
        width: 100%;
        gap: 15px;
    }

    .weather-mini .item {
        font-size: 13px;
    }
}



    /* Footer */
    footer{background:var(--nav-dark);color:var(--white);padding:14px 20px;border-top:2px solid #ffb900}
    .footer-inner{max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}

    /* Responsive: hamburger */
    .hamburger{display:none;flex-direction:column;gap:4px;cursor:pointer}
    .hamburger span{width:28px;height:2px;background:var(--white);display:block;border-radius:2px}

    /* Mobile menu overlay */
    .mobile-menu{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.4);z-index:1200;display:none}
    .mobile-panel{width:280px;background:var(--nav-dark);height:100%;padding:20px;transform:translateX(-16px);transition:transform .28s cubic-bezier(.2,.9,.3,1);}
    .mobile-panel.open{transform:translateX(0)}
    .mobile-panel ul{list-style:none;padding:0;margin:0}
    .mobile-panel a{display:block;padding:12px 8px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.04)}
    .mobile-panel .caret{float:right;opacity:0.8}
    .accordion{display:none}

    /* small screens */
    @media (max-width:768px){
      .menu-left > ul{display:none}
      .hamburger{display:flex}
      .alert-panel{display:none}
      #map{height:420px}
      .topbar-inner{padding-right:12px}
	   .weather-mini{
        margin-top: 10px;
        width: 100%;
        justify-content: flex-start;
		}

		.weather-mini .item{
        font-size:13px;
		}
    }
    @media (max-width:480px){
      .logo img{height:54px}
      #map{height:360px}
      .left-tools{left:8px;top:80px}
    }
	select{
    width:100%;
    padding:10px;
    font-size:16px;
    margin-bottom:15px;
}

.section-title{
    font-size:20px;
    font-weight:bold;
    margin:20px 0 10px;
}

img{
    width:100%;
    border-radius:6px;
    border:1px solid #ccc;
    margin-bottom:15px;
}

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

iframe{
    width:100%;
    height:700px;
    border:1px solid #ccc;
    border-radius:6px;
}
ul{
    list-style:none;
    padding:0;
    margin:0;
}

.menu{
    display:flex;
}

.menu > li{
    position:relative;
}

.menu a{
    display:block;
    padding:10px 15px;
    background:#34495e;
    color:white;
    text-decoration:none;
}

.menu a:hover{
    background:#16a085;
}

.submenu{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:180px;
}
.submenu a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
}
.submenu li{
    position:relative;
}

/* submenu cấp 2 */
.submenu .submenu{
    top:0;
    left:100%;
}

/* hover show */
li:hover > .submenu{
    display:block;
}
.tooltip-box{
  position: relative;
  cursor: pointer;
}

.tooltip{
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  
  background: rgba(0,0,0,0.85);
  color: #fff;
  
  padding: 6px 12px;
  border-radius: 6px;
  
  font-size: 13px;
  white-space: nowrap;
  
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
}

.tooltip-box:hover .tooltip{
  opacity: 1;
  bottom: -32px;
}

/* mũi tên tooltip */
.tooltip::after{
  content:"";
  position:absolute;
  top:-5px;
  left:50%;
  transform:translateX(-50%);
  
  border-width:5px;
  border-style:solid;
  border-color: transparent transparent rgba(0,0,0,0.85) transparent;
}
	

    /* animation for nav items on desktop open */
    .menu-left li .submenu{animation:dropdown .22s ease; z-index: 9999 !important;}
    @keyframes dropdown{from{opacity:0;transform:translateY(-8px) scaleY(.98)}to{opacity:1;transform:translateY(0) scaleY(1)}}