:root {

    --color01:rgb(241, 91, 91); /* red */
    --color02:rgb(255, 211 , 77); /* yellow */
    --color03:rgb(136, 192, 87); /* light green */
    --color04:rgb(43, 122, 154); /* dark green */
    --color05:rgb(49, 183, 194); /* light blue */
    --color06:rgb(79, 149, 240); /* dark blue */
    --color07:rgb(224, 139, 255); /* pink */
    --color08:rgb(199, 90, 214); /* dark pink */
    --color09:rgb(129, 115, 216); /* purple */
    --color10:rgb(165, 106, 67); /* brown */
    --color11:rgb(255, 158, 69) ; /* orange */
    --color12:rgb(69, 183, 125) ; /* emerald green */

}

.color01 path { fill: var(--color01); }
.color02 path { fill: var(--color02); }
.color03 path { fill: var(--color03); }
.color04 path { fill: var(--color04); }
.color05 path { fill: var(--color05); }
.color06 path { fill: var(--color06); }
.color07 path { fill: var(--color07); }
.color08 path { fill: var(--color08); }
.color09 path { fill: var(--color09); }
.color10 path { fill: var(--color10); }
.color11 path { fill: var(--color11); }
.color12 path { fill: var(--color12); }

.country-outline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 8px;
}

.area-outline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3px;
}

.othercountry-outline {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3px;
}

.province-line path {
    fill: none;
    stroke: rgb(255, 255, 255);
    stroke-width: 1px;
}

#TH75-Samut-Songkhram,
#TH17-Sing-Buri,
#TH96-Narathiwat,
#TH14-Ayutthaya path,
#TH86-Chumphon, 
#TH34-Ubon-Ratchathani,
#TH43-Nong-Khai, 
#TH58-Mae-Hong-Son,
#TH36-Chaiyaphum,
#TH20-Chonburi path {
    fill:var(--color01);
}

#TH67-Phetchabun path,
#TH15-Ang-Thong,
#TH35-Yasothon,
#TH38-Bueng-Kan,
#TH13-Pathum-Thani,
#TH90-Songkhla,
#TH50-Chiang-Mai,
#TH64-Sukhothai path,
#TH61-Uthai-Thani path{
    fill:var(--color02);
}

#TH74-Samut-Sakhon,
#TH84-Surat-Thani,
#TH24-Chachoengsao path,
#TH57-Chiang-Rai,
#TH60-Nakhon-Sawan,
#TH33-Sisaket {
    fill:var(--color03);
}

#TH94-Pattani,
#TH51-Lamphun,
#TH37-Amnat-Charoen,
#TH77-Prachuap-Khiri-Khan path {
    fill:var(--color04);
}

#TH728-Suphan-Buri,
#TH27-Sa-Kaeo,
#TH44-Maha-Sarakhanm,
#TH92-Trang,
#TH56-Phayao,
#TH62-Kamphaeng-Phet path,
#TH42-Loei {
    fill:var(--color05);
}

#TH12-Nonthaburi,
#TH83-Phuket,
#TH52-Lampang,
#TH41-Udon-Thani path,
#TH30-Nakhon-Ratchasima path {
    fill:var(--color06);
}

#TH39-Nong-Bua-Lamphu,
#TH80-Nakhon-Si-Thammarat,
#TH76-Phetchaburi path,
#TH54-Phrae,
#TH47-Sakon-Nakhon,
#TH31-Buriram {
    fill:var(--color07);
}

#TH91-Satun,
#TH10-Bangkok path,
#TH25-Prachin-Buri,
#TH32-Surin,
#TH49-Mukdahan path,
#TH65-Phitsanulok {
    fill:var(--color08);
}

#TH93-Phatthalung,
#TH19-Saraburi,
#TH73-Nakhon-Pathom,
#TH22-Chanthaburi,
#TH48-Nakhon-Phanom path,
#TH85-Ranong {
    fill:var(--color09);
}

#TH23-Trat,
#TH81-Krabi,
#TH18-Chainat,
#TH46-Kalasin {
    fill:var(--color10);
}

#TH11-Samut-Prakan,
#TH66-Phichit,
#TH45-Roi-Et,
#TH26-Nakhon-Nayok,
#TH16-Lopburi path,
#TH70-Ratchaburi,
#TH21-Rayong,
#TH95-Yala,
#TH82-Phang-Nga,
#TH40-Khon-Kaen path,
#TH55-Nan,
#TH63-Tak {
    fill:var(--color11);
}

#TH71-Kanchanaburi,
#TH53-Uttaradit {
    fill:var(--color12);
}




.province {
    cursor: pointer;
    isolation: isolate; /* lets z-index work for this SVG element */

}



.province path {
    transition: fill .2s ease, transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    transform-box: fill-box;

}

.province:hover path {
    transform: scale(2) !important;
}

.province:hover {
    z-index: 1000; /* bring to front without touching the DOM order */
}







.map-container {
    position: relative;
}

#mapTooltip {
    position: absolute;
    display: none;
    padding: 8px 12px;
    background: rgba(0,0,0,.85);
    color: #fff;
    border-radius: 6px;
    font-size: 0.9rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
}


/* ==========================
   Smartphone
========================== */
@media (max-width: 768px) {

    .country-outline {
        stroke-width: 4px;
    }

    .area-outline,
    .othercountry-outline {
        stroke-width: 2px;
    }

    .province-line path {
        stroke-width: 0.6px;
    }

    .province:hover path {
        transform: scale(1.15);
    }

    #mapTooltip {
        display: none !important;
    }

}