/* =========================
   MOBILE RESPONSIVE CSS
   Must be loaded AFTER style.css
   ========================= */

* {
  box-sizing: border-box;
}

/* ===== MOBILE HAMBURGER MENU STYLES ===== */
.mobile-header {
  display: none;
  position: relative;
  width: 100%;
}

.mobile-banner-container {
  position: relative;
  width: 100%;
}

.mobile-banner-container img {
  width: 100%;
  height: auto;
  display: block;
}

.mobile-header-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  z-index: 100;
}

.mobile-logo {
  max-width: 200px !important;
  width: 200px !important;
  height: auto !important;
}

.mobile-menu-toggle {
  background: rgba(0, 102, 204, 0.9);
  border: none;
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  width: 45px;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 101;
}

.mobile-menu-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  background: white;
  transition: 0.3s;
  border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

.mobile-nav {
  display: block;
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100%;
  background: #ffffff;
  box-shadow: -2px 0 10px rgba(0,0,0,0.3);
  z-index: 9999;
  overflow-y: auto;
  transition: right 0.3s ease;
  padding-top: 20px;
}

.mobile-nav.active {
  right: 0;
}

.mobile-nav-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  background: transparent !important;
  border: none !important;
  font-size: 45px !important;
  font-weight: bold !important;
  color: #333 !important;
  cursor: pointer !important;
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 50px;
}

.mobile-nav > ul > li {
  border-bottom: 1px solid #e0e0e0;
}

.mobile-nav a {
  display: block;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  position: relative;
  font-size: 15px;
}

.mobile-nav a:hover {
  background: #f5f5f5;
  color: #0066cc;
}

/* Submenu styles */
.mobile-nav .has-submenu > a::after {
  content: "+";
  position: absolute;
  right: 20px;
  font-size: 20px;
  font-weight: bold;
  transition: all 0.3s;
}

.mobile-nav .has-submenu.open > a::after {
  content: "-";
}

.mobile-nav .submenu {
  display: none;
  background: #f9f9f9;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-nav .submenu.open {
  display: block;
}

.mobile-nav .submenu li {
  border-bottom: 1px solid #e8e8e8;
}

.mobile-nav .submenu li:first-child {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.mobile-nav .submenu a {
  padding: 12px 20px 12px 40px;
  font-size: 14px;
  color: #555;
}

.mobile-nav .submenu a:hover {
  background: #eeeeee;
  color: #0066cc;
}

/* Overlay */
.mobile-nav-overlay {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.mobile-nav-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* =========================
   MOBILE BREAKPOINT
   ========================= */
@media (max-width: 768px) {
  
  /* ===== SHOW MOBILE ELEMENTS ===== */
  .mobile-header {
    display: block !important;
  }
  
  .mobile-nav,
  .mobile-nav-overlay {
    display: block !important;
  }
  
  /* ===== OVERRIDE FIXED WIDTHS ===== */
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    background-image: none !important;
  }
  
  .pagesizeWeb {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }
  
  .pagesize {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 10px !important;
    margin: 0 !important;
  }
  
  .bgWhite {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Force inline width styles to be overridden */
  div.bgWhite[style*="width"] {
    width: 100% !important;
  }
  
  /* Reduce padding on nested content */
  .bgWhite .pad5 {
    padding: 5px !important;
  }
  
  .bgWhite .textJus.pad10 {
    padding: 5px !important;
  }
  
  .bgMid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    background: #ffffff !important;
    background-image: none !important;
    padding: 0 !important;
  }
  
  /* ===== HIDE DESKTOP HEADER ===== */
  .bgTop {
    display: none !important;
  }
  
  /* ===== HIDE DESKTOP NAVIGATION ===== */
  .bgMenuTopB {
    display: none !important;
  }
  
  /* ===== HIDE DESKTOP LOGO ===== */
  .logo,
  .floatl .logo {
    display: none !important;
  }
  
  /* ===== HIDE SLIDESHOW ===== */
  .fadein,
  div[id^="fadeshow"],
  #fadeshow0,
  #fadeshow1,
  #fadeshow2 {
    display: none !important;
  }
  
  /* Hide slideshow scripts and containers */
  script[src*="fadeimages"] + script,
  script[src*="fadeimages"] ~ div {
    display: none !important;
  }
  
  /* ===== FORCE SINGLE COLUMN LAYOUT ===== */
  .floatl,
  .floatr {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 15px 0 !important;
  }
  
  /* Sidebar full width - override specific width classes */
  .width250,
  .width280,
  .width290,
  .width300,
  .width330,
  .width340,
  .width350,
  .width400 {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
  }
  
  /* Main content full width - override specific width classes */
  .width750,
  .width800,
  .floatr > .bgWhite,
  .floatr > div {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ===== HIDE SIDEBAR DECORATIVE IMAGES ===== */
  /* Hide all decorative corner and border images in sidebar */
  .floatl.width250 img[src*="top-left.jpg"],
  .floatl.width250 img[src*="top-right.jpg"],
  .floatl.width250 img[src*="top-center.jpg"],
  .floatl.width250 img[src*="bottom-left.jpg"],
  .floatl.width250 img[src*="bottom-right.jpg"],
  .floatl.width250 img[src*="bottom-center.jpg"],
  .floatl.width250 img[src*="center-left.jpg"],
  .floatl.width250 img[src*="center-right.jpg"],
  .floatl.width250 .template1 .cell:first-child img,
  .floatl.width250 .template1 .cell:last-child img,
  .floatl.width250 .template1 .row:first-child img,
  .floatl.width250 .template1 .row:last-child img {
    display: none !important;
  }
  
  /* Hide empty decorative cells in template1 */
  .floatl.width250 .template1 .cell.td2,
  .floatl.width250 .template1 .cell.td4,
  .floatl.width250 .template1 .cell.td6,
  .floatl.width250 .template1 .cell.td8 {
    display: none !important;
  }
  
  /* Hide corner cells in template1 */
  .floatl.width250 .template1 .row:first-child .cell:first-child,
  .floatl.width250 .template1 .row:first-child .cell:last-child,
  .floatl.width250 .template1 .row:last-child .cell:first-child,
  .floatl.width250 .template1 .row:last-child .cell:last-child {
    display: none !important;
  }
  
  /* ===== HIDE SCROLL TO TOP BUTTON ===== */
  #toTop,
  a[href="#"] img[src*="top.gif"] {
    display: none !important;
  }
  
  /* ===== IMAGES - RESPONSIVE ===== */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Map and gallery images */
  .template1 img,
  ul.thumb li,
  ul.thumb li img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  
  ul.thumb {
    width: 100% !important;
  }
  
  ul.thumb li {
    width: 100% !important;
    height: auto !important;
    margin-bottom: 10px !important;
  }
  
  /* ===== TABLES & TEMPLATE ===== */
  .template1,
  .template1 .row,
  .template1 .cell {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  table,
  .table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
  }
  
  /* ===== TEXT & HEADINGS ===== */
  h1, h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    padding: 0 10px !important;
  }
  
  .font14, .font15, .font16, .font17, .font18 {
    font-size: 14px !important;
  }
  
  .font19, .font20, .font21, .font22, .font23, .font24, .font25 {
    font-size: 16px !important;
  }
  
  body, * {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  
  /* ===== SPACING OVERRIDES ===== */
  .pad10, .pad5, .padtb10 {
    padding: 10px !important;
  }
  
  .padt10, .padt15, .padt20 {
    padding-top: 10px !important;
  }
  
  .mart10, .mart15, .mart20 {
    margin-top: 10px !important;
  }
  
  .textJus {
    text-align: left !important;
  }
  
  /* ===== BORDERS & BACKGROUNDS ===== */
  .bgMenuLeft,
  .bgMidLeft,
  .bgXanhLa,
  .bgCatTour {
    background: #ffffff !important;
    background-image: none !important;
  }
  
  .borDbDA,
  .borDtDA {
    width: 100% !important;
  }
  
  .rounded_a {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* ===== FOOTER ===== */
  .bgCopyright,
  .bgFooter {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 10px !important;
    font-size: 12px !important;
  }
  
  .textCenter {
    text-align: center !important;
  }
  
  .textCenter.padb10 span {
    display: inline-block;
    margin: 5px 5px;
  }
  
  /* ===== LISTS ===== */
  .listnone,
  .bgTop ul {
    display: none !important;
  }
  
  /* ===== CLEAR FLOATS ===== */
  .clear {
    clear: both !important;
  }
  
  /* ===== ADDITIONAL FIXES ===== */
  .martb5.rounded_a img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Hide any remaining desktop-only elements */
  .width50, .width100, .width150, .width200 {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Tooltip adjustments */
  #dhtmltooltip,
  #dhtmlpointer {
    max-width: 90% !important;
  }
}

/* Desktop - hide mobile elements */
@media (min-width: 769px) {
  .mobile-header,
  .mobile-nav,
  .mobile-nav-overlay {
    display: none !important;
  }
}