/* ===== RESET CƠ BẢN ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
}

#layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ===== MENU BÊN TRÁI ===== */
#menu {
    width: 25%;              /* > 15% theo yêu cầu */
    min-width: 260px;        /* không quá hẹp */
    max-width: 320px;        /* không quá to */
    background: #2c3e50;
    color: #fff;
    padding: 20px;
}


#menu h2 {
    margin-bottom: 20px;
    font-size: 30px;
}

#menu ul {
    list-style: none;
}

#menu li {
    padding: 10px 15px;
    margin-bottom: 8px;
    background: #34495e;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
}

#menu li:hover {
    background: #3d566e;
}

/* ===== VÙNG NỘI DUNG ===== */
#content {
    flex: 1;
    padding: 25px;
    background: #fff;
}

#content h2 {
    font-weight: normal;
    color: #333;
}

#globe-container {
    width: 300px;
    height: 300px;
    margin: 20px auto;
    position: relative;
}

/* chỉ hiện trên PC */
@media (max-width: 768px) {
    #globe-container {
        display: none;
    }
}

#globe-container canvas {
  display: block;
  cursor: pointer;
}



/* ===== ĐỊA CẦU ĐƠN GIẢN ===== */
#globe-simple {
  margin-top: 26px;
  width: 500px;
  height: 500px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 70%;
  overflow: hidden;
}

#globe-simple video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ===== MENU CONTACT BOX ===== */
.menu-contact {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #e6ddb0;
  text-align: center;
}

/* ô ảnh */
.contact-image img {
  width: 100%;
  max-width: 290px;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  background: #fffbe8;
  padding: 8px;
  /* display: block;
     margin: 0 auto; */
}



/* icon hàng ngang */
.contact-icons {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.contact-icons img {
  width: 28px;
  height: 28px;
  opacity: 0.85;
  transition: transform 0.2s, opacity 0.2s;
}

.contact-icons img:hover {
  transform: scale(1.15);
  opacity: 1;
}


/* ===============================
   FORCE CHỮ ZALO / FB / ĐT MÀU TRẮNG
   =============================== */

#menu .menu-contact a,
#menu .menu-contact a:link,
#menu .menu-contact a:visited,
#menu .menu-contact a:hover,
#menu .menu-contact a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}





/* ===== MOBILE ===== */
@media (max-width: 768px) {
  #menu {
    width: 100%;
    min-width: unset;
    max-width: unset;
  }

  .contact-image img {
    max-width: 160px;
  }

  .contact-icons img {
    width: 26px;
    height: 26px;
  }
}
/* ===== CONTACT LINK (ICON + CHỮ TRẮNG) ===== */
#menu .menu-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#menu .menu-contact .contact-link {
  display: flex;
  flex-direction: column;   /* icon trên – chữ dưới */
  align-items: center;
  gap: 4px;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 12px;
}

#menu .menu-contact .contact-link span {
  color: #ffffff !important;
}

#menu .menu-contact .contact-link:hover span {
  color: #fdf6d0 !important;
}