:root{--bg:#f4f8fe;--white:#ffffff;--black:#000;--primary:#e90044;--secondary:#003866;--grey:#606060;--muted:#edf3f4;}

body{background:var(--bg);}
h1.headline{font-size:3em;}
.wrapper{text-align:center;}
.wrapper .container{max-width:100%;margin:0 auto 1em auto;padding:0;}
.tabs{margin-bottom:1em;display:flex;flex-wrap:wrap;justify-content:center;}
.tab,.tab-default{padding:0.6em 1em;font-size:1.2em;cursor:pointer;font-weight:500;color:var(--secondary);border-bottom:3px solid transparent;}
.tab.active{color:var(--primary);border-color:var(--primary);font-weight:900;}

#theme-logo{width:340px;margin:1em auto;}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1em;}
.grid .card{padding:0.4em 0.4em 0.8em 0.4em;height:280px;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.06);animation:fadeIn 0.4s ease;background-position:0 0;background-repeat:no-repeat;background-size:100% auto;background-color:var(--white);position:relative;border:none;border:1px solid var(--secondary);}
#CandidateAbhisit{background-image:url('../imgs/abhisit-vejjajiva-democrat-party.webp');}
#CandidateAnutin{background-image:url('../imgs/anutin-charnvirakul-bhumjaithai-party.webp?1b');}
#CandidateNatthaphong{background-image:url('../imgs/natthaphong-ruengpanyawut-peoples-party.webp');}
#CandidateYodchanan{background-image:url('../imgs/yodchanan-wongsawat-pheu-thai-party.webp');}
.card .zh{font-weight:900;}
.card .en{font-size:0.85em;line-height:1.2;text-transform:initial;}

@keyframes fadeIn{
from{opacity:0;transform000:translateY(8px);}
to{ opacity:1;transform000:translateY(0);}
}

.profile-detail .tn{margin-right:0.6em;width:60px;height:60px;display:block;background-position:center;background-repeat:no-repeat;background-size:100%;background-color:#f6f6f6;border-radius:0.3em;aspect-ratio:1/1;}
.profile-name{margin:0;width:100%;}
.profile-name .en{color:var(--black);}

.party,.party span,.details,.details span{display:block;}
.party{color:var(--grey);position:absolute;top:1em;right:1em;text-align:right;}
.details .en br000{display:none;}
.details{bottom:32%;right:1em;text-align:right;display:block;position:absolute;}
.details .zh{font-size:1.2em;margin-bottom:0.2em;display:flex;align-items:center;}
.details .age{margin-left:0.3em;font-size:12px;padding:0.4em 0.6em;line-height:1;background:var(--secondary);color:var(--white);border-radius:0.4em;display:flex;justify-content:center;align-items:center;}
.details .age:after{content:'岁';}

#CandidateAbhisit .details .tn{background-image:url('../imgs/abhisit-vejjajiva.webp');}
#CandidateAnutin .details .tn{background-image:url('../imgs/anutin-charnvirakul.webp');}
#CandidateNatthaphong .details .tn{background-image:url('../imgs/natthaphong-ruengpanyawut.webp');}
#CandidateYodchanan .details .tn{background-image:url('../imgs/yodchanan-wongsawat.webp');}

.grid:not(.candidate) .details{top:1em;left:1em;right:auto;}
.grid:not(.candidate) .card{height:auto;background-image:none!important;background-color:var(--secondary);color:var(--white);}
.grid:not(.candidate) .details .en{color:rgba(154,229,255,0.8);}
.grid:not(.candidate) .party,.grid:not(.candidate) .details .en br,.grid:not(.candidate) .age{display:none;}
.grid:not(.candidate) .details{text-align:left;position:relative;top:0;bottom:auto;left:0;}
.grid:not(.candidate) .profile-detail,.grid:not(.candidate) .name-main{display:flex;align-items:center;}
.grid:is(.candidate) .party .en br,.grid:is(.candidate) .details .tn{display:none;}
.grid:is(.candidate) .party,.grid:is(.candidate) .details,.grid:is(.candidate) .details span{text-align:right;justify-content:end;}

.desc{padding:0 0.6em 0 1em;display:flex;}
.desc ul{padding:0.4em 0.4em 0 1em;margin:0.4em auto 0 auto;height000:130px;overflow-y:auto;font-size:1em;text-align:left;line-height:1.3;}
.desc ul::-webkit-scrollbar{width:6px;}
.desc ul::-webkit-scrollbar-track{border-radius:10px;}
.desc ul::-webkit-scrollbar-thumb{border-radius:10px;background:rgba(0,0,0,.2);}
.desc li{margin-bottom:0.4em;}

.buttons{margin-bottom:1rem;}
button{background:var(--primary);color:var(--white);border:none;border-radius:4px;padding:0.4rem 0.8rem;margin-right:0.4rem;cursor:pointer;font-size:0.85rem;}
button.secondary{background:#8395a7;}
button:hover{opacity:0.9;}

.section{display:none;margin-top:1rem;line-height:1.7;}
.section.active{display:block;}

.flourish-credit{display:none!important;}
.flourish-embed.iframe-custom:nth-child(1){margin-bottom:-1.6em!important;}
.flourish-embed{border:1px solid #ccc;}
.flourish-embed.iframe-custom{border:none;}
.display-content{padding:0 1em;}
.display-panel{background:var(--white);align-items:start;}

@media (min-width:320px) and (max-width:767px){
#theme-logo{width:280px;}
.flourish-embed,.flourish-embed.iframe-custom{height:100%;margin-bottom:0;}
.flourish-embed iframe{width:100%!important;}
.display-content{padding:0;}
}

@media (max-width:1320px){
.wrapper .container{padding:0 1em;}
}

@media (min-width:320px) and (max-width:900px){
.display-panel{background:none;}
.display-content{padding:0;}
.display-embeds{padding:0 1em;}
h1.headline{font-size:2.2em;}
.tab,.tab-default{font-size:1em;padding:0.5em;}
.grid{grid-template-columns:repeat(2,1fr);gap:0.4em;}
.grid .card{padding:0.2em 0.2em 0.4em 0.2em;background-position:0 bottom;height:190px;}
.card .en{font-size:0.8em;}

.profile-detail .tn{margin-right:0.6em;}
.grid:is(.candidate) .details{bottom:10%;right:0.6em;bottom:0.4em;padding:0.3em 0.6em 0.3em 0.8em;border-radius:0.3em;background:rgba(255,255,255,0.5);backdrop-filter:blur(0.4em);}
.grid:is(.candidate) .party .en br,.grid:not(.candidate) .details .en br{display:block;}
.grid:not(.candidate) .details .en{font-size:12px;}
.details .zh{font-size:1em;}
.details .age{font-size:10px;}
.party{color:var(--grey);position:absolute;bottom:30%;}
.desc{padding:0 0.4em;}
.desc ul{font-size:0.8em;padding:0 0.4em;margin:0;}
.desc li{list-style-type:none;padding:0.4em 0 0.6em 0;margin:0.2em 0;border-bottom:1px solid rgba(154,229,255,0.3);}
.desc li:last-child{border:none;}
}