.elementor .vietecho-map-section{/* ========================================================= VIETECHO — MAP SECTION FLEXBOX 1 — GIANT DONG SON DRUM BACKGROUND ========================================================= */ /* ========================================================= 01 — OUTER FLEXBOX ========================================================= */ selector { position: relative !important; width: 100% !important; overflow: hidden !important; isolation: isolate !important; background-color: #F3EEE6 !important; /* ----------------------------------------------------- PAPER TEXTURE ----------------------------------------------------- */ background-image: radial-gradient( circle at 15% 20%, rgba(110, 85, 60, 0.035) 0, rgba(110, 85, 60, 0.035) 1px, transparent 1.5px ), radial-gradient( circle at 75% 65%, rgba(110, 85, 60, 0.025) 0, rgba(110, 85, 60, 0.025) 1px, transparent 1.5px ), radial-gradient( circle at 45% 85%, rgba(255, 255, 255, 0.10) 0, rgba(255, 255, 255, 0.10) 1px, transparent 1.5px ), linear-gradient( 90deg, rgba(255, 255, 255, 0.10), rgba(120, 90, 60, 0.018), rgba(255, 255, 255, 0.08) ); background-size: 17px 17px, 23px 23px, 29px 29px, 100% 100%; background-position: 0 0, 7px 11px, 13px 5px, 0 0; background-repeat: repeat, repeat, repeat, no-repeat; } /* ========================================================= 02 — ELEMENTOR BACKGROUND OVERLAY ========================================================= */ selector > .elementor-background-overlay { position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: transparent !important; opacity: 1 !important; } /* ========================================================= 03 — GIANT DONG SON DRUM THIS IS THE ONLY DRUM LAYER ========================================================= */ selector::before { content: "" !important; position: absolute !important; display: block !important; /* ----------------------------------------------------- SIZE ----------------------------------------------------- */ width: 2800px !important; height: 2800px !important; min-width: 2800px !important; min-height: 2800px !important; max-width: none !important; max-height: none !important; /* ----------------------------------------------------- POSITION Move the drum toward the right side so the Vietnam map sits over its left side. ----------------------------------------------------- */ left: 63% !important; top: 62% !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; transform-origin: center center !important; /* ----------------------------------------------------- SVG IMPORTANT: RAW URL — NO MARKDOWN ----------------------------------------------------- */ background-image: url("https://vietecho.site/wp-content/uploads/2026/09/Trong_dong_Dong_Son.svg") !important; background-repeat: no-repeat !important; background-position: center center !important; /* FORCE THE SVG TO FILL THE 2800px AREA */ background-size: 100% 100% !important; /* ----------------------------------------------------- VISUAL STRENGTH ----------------------------------------------------- */ opacity: 0.18 !important; filter: sepia(0.20) saturate(0.90) contrast(1.35) brightness(0.96) !important; /* ----------------------------------------------------- LAYER ----------------------------------------------------- */ z-index: 1 !important; pointer-events: none !important; user-select: none !important; } /* ========================================================= 04 — REMOVE OLD DRUM IMAGE ========================================================= */ selector #vietecho-dong-son-drum { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================= 05 — INNER ELEMENTOR FLEXBOX MAP CONTENT ABOVE DRUM ========================================================= */ selector > .e-con { position: relative !important; z-index: 2 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; overflow: visible !important; } /* ========================================================= 06 — ELEMENTOR ELEMENTS ========================================================= */ selector .elementor-element { background-color: transparent !important; background-image: none !important; } /* ========================================================= 07 — HTML WIDGET ========================================================= */ selector .elementor-widget-html { position: relative !important; z-index: 3 !important; background: transparent !important; background-color: transparent !important; overflow: visible !important; } selector .elementor-widget-html .elementor-widget-container { position: relative !important; z-index: 3 !important; background: transparent !important; background-color: transparent !important; overflow: visible !important; max-width: none !important; } /* ========================================================= 08 — VIETECHO MAP SECTION ========================================================= */ selector #vietecho-map-section { position: relative !important; z-index: 3 !important; background: transparent !important; background-color: transparent !important; background-image: none !important; } /* ========================================================= 09 — MAP CONTAINER ========================================================= */ selector #vietecho-map-container { position: relative !important; z-index: 4 !important; background: transparent !important; } /* ========================================================= 10 — MAP AREA ========================================================= */ selector #vietecho-map-area { position: relative !important; z-index: 4 !important; background: transparent !important; } /* ========================================================= 11 — SVG MAP ========================================================= */ selector #vietecho-svg-wrapper { position: relative !important; z-index: 5 !important; background: transparent !important; background-color: transparent !important; } /* ========================================================= 12 — DESTINATION CARD ========================================================= */ selector #vietecho-destination-card { position: relative !important; z-index: 50 !important; background: #FFFFFF !important; } /* ========================================================= 13 — LARGE DESKTOP 1200px+ ========================================================= */ @media (min-width: 1200px) { selector::before { width: 2800px !important; height: 2800px !important; min-width: 2800px !important; min-height: 2800px !important; left: 63% !important; top: 62% !important; opacity: 0.18 !important; } } /* ========================================================= 14 — VERY LARGE DESKTOP 1600px+ ========================================================= */ @media (min-width: 1600px) { selector::before { width: 3200px !important; height: 3200px !important; min-width: 3200px !important; min-height: 3200px !important; left: 64% !important; top: 61% !important; opacity: 0.19 !important; } } /* ========================================================= 15 — TABLET ========================================================= */ @media (min-width: 768px) and (max-width: 1199px) { selector::before { width: 1900px !important; height: 1900px !important; min-width: 1900px !important; min-height: 1900px !important; left: 58% !important; top: 58% !important; opacity: 0.15 !important; } } /* ========================================================= 16 — MOBILE ========================================================= */ @media (max-width: 767px) { selector::before { width: 1200px !important; height: 1200px !important; min-width: 1200px !important; min-height: 1200px !important; left: 50% !important; top: 48% !important; opacity: 0.11 !important; } } /* ========================================================= 17 — VERY SMALL MOBILE ========================================================= */ @media (max-width: 450px) { selector::before { width: 1000px !important; height: 1000px !important; min-width: 1000px !important; min-height: 1000px !important; left: 50% !important; top: 45% !important; opacity: 0.10 !important; } }\n}