:root{--hk-primary:#007bff;--hk-primary-dark:#0056b3;--hk-primary-soft:#eaf4ff;--hk-body-bg:#212121;--hk-surface:#fff;--hk-text:#252525;--hk-muted:#6c757d;--hk-border:#dee2e6}
html{scroll-behavior:smooth}
body{margin:0;padding-bottom:105px;font-family:"Roboto",sans-serif;font-size:14px;line-height:1.7;color:var(--hk-text);background:#3f3f3f}
a{color:var(--hk-primary)}
a:hover{color:var(--hk-primary-dark);text-decoration:none}
img{max-width:100%;height:auto}
.site-wrapper{max-width:1000px;margin:0 auto;overflow:hidden;background:var(--hk-surface);border-radius:0;box-shadow:0 .25rem .85rem rgba(0,0,0,.22)}
.bg-hk-primary{background:#007bff!important}
.text-hk-primary{color:var(--hk-primary)!important}
.border-hk-primary{border-color:var(--hk-primary)!important}
.navbar-brand{font-family:"Yellowtail",cursive;font-size:30px;line-height:1}
.navbar-dark .navbar-nav .nav-link{padding:.65rem .8rem;color:rgba(255,255,255,.92);font-weight:600}
.navbar-dark .navbar-nav .nav-link:hover,.navbar-dark .navbar-nav .active>.nav-link{color:#fff}
.page-title{font-size:1.85rem;line-height:1.35;color:var(--hk-primary);font-weight:700}
.section-title{font-size:1.45rem;line-height:1.4;color:var(--hk-primary);font-weight:700}
.lead-copy{font-size:1rem}
#listdatahk{padding:.5rem}
#listdatahk .btn{margin-bottom:.5rem;padding:.7rem .85rem;text-align:left;white-space:normal;font-weight:700}
#listdatahk .btn:last-child{margin-bottom:0}
#listdatahk .btn:hover,#listdatahk .btn:focus{text-decoration:none}
.year-anchor-target{scroll-margin-top:1rem}
.data-loading{padding:3rem 1rem;text-align:center}
.data-loading .spinner-border{width:3rem;height:3rem}
#dataHkContent .table{margin-bottom:0}
#dataHkContent .table th{color:#fff;text-align:center;vertical-align:middle;background:var(--hk-primary);border-color:#006fe6;font-weight:700}
#dataHkContent .table td{text-align:center;vertical-align:middle;border-color:var(--hk-border)}
#dataHkContent .tahun th{color:#fff;text-transform:uppercase;background:var(--hk-primary-dark)}
.faq-card{border:1px solid var(--hk-border)}
.faq-card+.faq-card{margin-top:.5rem}
.faq-card .card-header{padding:0;background:var(--hk-primary)}
.faq-card .btn-link{width:100%;padding:.85rem 1rem;color:#fff;text-align:left;white-space:normal;font-weight:700}
.faq-card .btn-link:hover,.faq-card .btn-link:focus{color:#fff;text-decoration:none}
.site-footer{font-size:.875rem}
.site-footer a:hover{text-decoration:underline}
.banner-top{text-align:center;margin:8px 0 0!important}
.banner-top a{display:inline-block;width:100%;max-width:728px}
.banner-top img{display:block;width:100%;max-width:728px;height:auto;margin:0 auto;border:0}
.floating-top,.floating-bottom{position:fixed;left:0;width:100%;padding:0;background:transparent;text-align:center;z-index:1001}
.floating-top{top:0}
.floating-bottom{bottom:0}
.floating-bottom .btn-close{display:block;margin:0 calc((100% - min(728px,100%))/2) 8px auto}
.banner-float,.banner-float img{width:100%}
.banner-float img{display:block;height:auto}
.banner img{display:block;width:100%;height:auto;margin:0}
.floating-bottom img{vertical-align:sub!important}
.pb-4,.py-4{padding-bottom:0!important}
.pt-4,.py-4{padding-top:0!important}
#listdatahk a.btn{position:relative;padding:.58rem 2rem .58rem .9rem;border-width:1px;font-size:.94rem;transition:all .25s ease}
#listdatahk a.btn:after{content:"▾";position:absolute;right:.9rem;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;transition:all .25s ease}
#listdatahk a.btn:hover:after{color:#fff}
@media(max-width:991.98px){
.navbar-nav{padding-top:.5rem}
.navbar-dark .navbar-nav .nav-link{padding:.55rem 0}
}
@media(max-width:767.98px){
body{font-size:13px;padding-bottom:78px}
.page-title{font-size:1.45rem}
.section-title{font-size:1.2rem}
.lead-copy{font-size:.94rem}
.content-section{padding-right:1rem!important;padding-left:1rem!important}
#dataHkContent .table{font-size:12px}
#dataHkContent .table th,#dataHkContent .table td{padding:.45rem .25rem;white-space:nowrap}
.banner-top{margin:5px 0}
.banner-top a,.banner-top img{max-width:100%}
}
#dataHkFaqAccordion .btn-link{text-decoration:none}
#dataHkFaqAccordion .btn-link:hover,#dataHkFaqAccordion .btn-link:focus{text-decoration:none}
#dataHkFaqAccordion .faq-arrow{transition:transform .25s ease}
#dataHkFaqAccordion .btn-link:not(.collapsed) .faq-arrow{transform:rotate(180deg)}