:root { --map-color:#0034ff; }
@font-face { font-family:"Bold"; font-weight:bold !important; src: url( "../fonts/Bold.woff" ) format( "woff" ), format( "truetype" ); }
@font-face { font-family:"Light"; font-weight:normal !important; src: url( "../fonts/Light.woff" ) format( "woff" ), format( "truetype" ); }
@font-face { font-family:"Awesome"; font-weight:normal !important; src: url( "../fonts/Awesome.woff" ) format( "woff" ), format( "truetype" ); }
.mymap-custom-text-display ul, .mymap-custom-text-display ol { margin:10px 20px; }
.mymap-custom-text-display strong { font-family:Bold !important; font-weight: normal !important; }
.mymap-custom-text-display h1, .mymap-custom-text-display h2, .mymap-custom-text-display h3, .mymap-custom-text-display h4, .mymap-custom-text-display h5, .mymap-custom-text-display h6 { font-family:Bold !important; line-height: 1.3; margin-bottom: 15px; font-weight: normal !important; }
.mymap-custom-text-display h1 { font-size: 20px; }
.mymap-custom-text-display h2 { font-size: 18px; }
.mymap-custom-text-display h3 { font-size: 16px; }
.mymap-custom-text-display h4 { font-size: 18px; }
.mymap-custom-text-display h5 { font-size: 12px; }
.mymap-custom-text-display h6 { font-size: 10px; }
.mymap-container { font-family:Light; display: flex; flex-direction: row; direction: rtl; gap: 20px; border: 1px solid rgba(0, 0, 0, 0.04); padding: 15px; border-radius: 8px; }
.mymap-map-area { width: 45%; padding:0px 30px 0px 30px; }
.mymap-content-box { width: 55%; position: relative; min-height: 300px; }
.mymap-content-box img{ width:100%; position: relative; min-height: auto; }
#mymap-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; }
#mymap-results-header h3 { font-family: bold; font-size: 16px; font-weight: normal; border-right: 5px solid var(--map-color); padding-right: 10px; }
.mymap-custom-text-display { font-family:Light; color: #888; font-size: 16px; padding:0 15px; line-height: 1.8; text-align: justify; }
.mymap-archive-btn { background-color: var(--map-color); color: #fff; padding: 5px 15px; border-radius: 4px; text-decoration: none; font-size: 14px; margin-top: -15px; margin-left: -5px; }
.mymap-archive-btn:hover { opacity: 0.8; }
.mymap-archive-btn i { font-size: 8px; }
.mymap-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 32px; color: #888; display: none; }
.mymap-loading i { display: block; margin-bottom: 10px; }
.mymap-loading span { display: block; font-family: Light; font-size: 16px; color: #888; }
.mymap-error { color: red; text-align: center; }
.map-title { width: 100%; margin-bottom: 15px; font-size: 18px; font-family: Bold; padding-right: 5px; }
#mymap-tooltip { font-family:Light; position: absolute; display: none; opacity: 0; background-color: rgba(34, 34, 34, 0.9); color: #ffffff; padding: 6px 12px; border-radius: 4px; font-size: 13px; pointer-events: none !important; z-index: 999999; transition: opacity 0.15s ease; white-space: nowrap; direction: rtl; }
.mymap-posts-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; direction: rtl; }
.mymap-blog-item { position: relative; display: flex; flex-direction: row; background:rgba(255, 255, 255, 0.35); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 8px; overflow: hidden; padding: 10px; }
.mymap-blog-thumb { display: block; width: 90px; height: 70px; overflow: hidden; border-radius: 6px; flex-shrink: 0; margin-left: 15px; object-fit: cover; background-color:#000; }
.mymap-blog-thumb img { width: 100%; height: 100%; transition: all 0.3s ease; }
.mymap-blog-thumb:hover img { opacity:0.8; transition: all 0.3s ease; }
.mymap-no-img { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #999; font-size: 13px; }
.mymap-blog-content { padding: 0; display: flex; flex-direction: column; flex-grow: 1; }
.mymap-blog-title { margin:0; font-size: 18px; }
.mymap-blog-title a { text-decoration: none; color: #222; font-size: 16px; font-family: bold; font-weight: normal; }
.mymap-blog-title a:hover { color:var(--map-color); }
.mymap-blog-meta { display: flex; gap: 15px; font-size: 14px; color: #888; margin-bottom: auto; }
.mymap-blog-meta i { color: #ccc; }
.mymap-meta-item { margin-top:10px; }
.mymap-blog-excerpt { font-size: 14px; color: #888; margin-top:10px; }
.map { display: block; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.map svg { height:100%; width: 100%; }
.map .border path, .map .island path { fill: #ddd; transition: all 0.3s ease; }
.map .province path, .map .island path { fill: #fff; transition: all 0.3s ease; }
.map .sea path, .map .lake path { fill: var(--map-color); transition: all 0.3s ease; }
.map .province path:hover, .map .province path.hover { fill: #ddd !important; cursor: pointer; color: #ddd; transition: all 0.3s ease; }
.layout-map-left #mymap-main-container { display: flex; flex-direction: row-reverse; }
.layout-map-right #mymap-main-container { display: flex; flex-direction: row; }
.map-full-width .mymap-content-box { display: none !important; }
.map-full-width .mymap-map-area { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
.province-grid-container { display: flex; flex-wrap: wrap; gap: 7px; direction: rtl; }
.province-btn { display: flex; justify-content: center; align-items: center; background-color: #eee; color: #444; border-radius: 4px; padding: 12px 5px; font-family: inherit; font-size: 14px; font-weight: normal; text-decoration: none; text-align: center; cursor: pointer; transition: all 0.3s ease; white-space: normal; word-break: break-word; line-height: 1.4; width: calc(33.333% - 6px); }
.province-btn:nth-child(-n+4) { width: calc(25% - 6px); }
.province-btn:hover { background-color: var(--map-color); color: #ffffff; opacity:0.8; }
.province-btn.active { background-color:var(--map-color); color: #ffffff; }
.province-slider-wrapper { display: flex; align-items: center; position: relative; width: 100%; gap: 10px; }
.slider-ctrl-btn { background-color:var(--map-color); color: #fff; border: none; border-radius:4px; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; flex-shrink: 0; font-size: 18px; z-index: 2; transition: all 0.3s ease; }
.slider-ctrl-btn:hover { opacity:0.8; }

@media (max-width: 1400px) {
.mymap-map-area { padding: 0 20px; }
.mymap-blog-title a { font-size: 15px; }
}

@media (max-width: 1200px) {
.mymap-container { gap: 15px; }
.mymap-map-area { width: 50%; }
.mymap-content-box { width: 50%; }
.province-btn { font-size: 13px; }
}

@media (max-width: 992px) {
.mymap-container { flex-direction: column; }
.mymap-map-area, .mymap-content-box { width: 100%; max-width: 100%; padding: 0; }
.province-btn { width: calc(33.333% - 6px) !important; }
}

@media (max-width: 768px) {
.layout-map-right #mymap-main-container { display: block; flex-direction: column; }
.mymap-map-area { margin-bottom: 20px; }
.mymap-custom-text-display { font-size: 15px; line-height: 1.7; }
.mymap-blog-title a { font-size: 15px; }
.slider-ctrl-btn { width: 34px; height: 34px; font-size: 16px; }
}

@media (max-width: 576px) {
.mymap-container { padding: 10px; }
.mymap-custom-text-display { padding: 0 5px; font-size: 14px; }
#mymap-results-header h3 { font-size: 14px; padding-right: 8px; }
.mymap-blog-title { font-size: 15px; text-align: right; line-height: 25px; }
.mymap-blog-meta { font-size: 12px; gap: 10px; }
.map-title { font-size: 16px; }
}

@media (max-width: 420px) {
.mymap-blog-item { flex-direction: column; text-align: center; }
#mymap-results-header { display: block; }
.province-btn { width: calc(50% - 6px) !important; padding: 10px 5px; font-size: 13px; }
.mymap-blog-thumb { margin: 0 auto 10px auto; width: 100%; height: 180px; }
.mymap-blog-thumb { height: auto; }
.mymap-custom-text-display { font-size: 13px; }
.province-btn { font-size: 13px; padding: 10px; }
}