/* =============================================================
   arit-theme.css — ARIT theme on Cassiopeia (Joomla 5)
   โทนสีอ้างอิงเทมเพลตเดิม ol_finac (theme: orange/gold)
   ปรับ: ธราธิป · 14/10/2026
   ============================================================= */
:root{
  --arit-gold:#ba874a; --arit-gold-l:#daa96f; --arit-gold-d:#8a5f24;
  --arit-green:#8fbf2c; --arit-bg:#f3f1ec; --arit-line:#e3ded4;
  --arit-text:#3a3a3a; --arit-radius:6px;
}
html{scroll-behavior:smooth}
body.site{background:var(--arit-bg); color:var(--arit-text);
  font-family:Tahoma,"Sarabun","TH Sarabun New","Segoe UI",sans-serif; font-size:15px; line-height:1.7}
body.site a{color:#9a6a26}
body.site a:hover{color:var(--arit-gold-d)}
.container-header,.site-grid>.container-nav{max-width:100%}

/* ---------- header ---------- */
.container-header{background:#fff; border-bottom:0; padding-bottom:0}
.container-header>.grid-child{padding-top:.35rem;padding-bottom:.35rem}
.navbar-brand .brand-logo img.logo{max-height:86px;width:auto}
body.site .container-header .navbar-brand{display:block}
.container-topbar{background:linear-gradient(180deg,#8a5f24,#b1793c); color:#fff; padding:2px 0; border-bottom:2px solid #6f4c1c}
.container-topbar .mod-custom img{max-height:40px;width:auto;display:block;margin:0 auto}
.container-topbar a{color:#fff}
.container-nav{background:linear-gradient(180deg,#d9a86e,#b1793c); border-bottom:3px solid #8a5f24; padding:0}
.container-nav .grid-child{padding:0}

/* ---------- main menu ---------- */
.mod-menu.nav, .mod-menu.mod-list.nav{background:transparent;flex-wrap:wrap;margin:0;padding:0}
.mod-menu.nav>li{position:relative}
.mod-menu.nav>li>a{color:#fff;font-weight:600;padding:.72rem .95rem;display:block;text-shadow:0 1px 0 rgba(0,0,0,.15);border-right:1px solid rgba(255,255,255,.18)}
.mod-menu.nav>li:first-child>a{border-left:1px solid rgba(255,255,255,.18)}
.mod-menu.nav>li:hover>a,.mod-menu.nav>li.active>a,.mod-menu.nav>li>a[aria-current="page"]{background:rgba(255,255,255,.24)}
.mod-menu .mod-menu__sub{display:none;position:absolute;top:100%;left:0;z-index:1050;min-width:248px;
  background:#fff;border:1px solid var(--arit-line);border-top:3px solid var(--arit-gold);border-radius:0 0 var(--arit-radius) var(--arit-radius);
  box-shadow:0 8px 18px rgba(0,0,0,.16);padding:.25rem 0;margin:0;list-style:none}
.mod-menu li.deeper:hover>.mod-menu__sub,.mod-menu li.deeper:focus-within>.mod-menu__sub{display:block}
.mod-menu .mod-menu__sub li{position:relative}
.mod-menu .mod-menu__sub li>a{display:block;color:#444;padding:.45rem .9rem;font-size:.94rem;border-bottom:1px solid #f4f1ea}
.mod-menu .mod-menu__sub li>a:hover{background:#faf6ef;color:var(--arit-gold-d)}
.mod-menu .mod-menu__sub .mod-menu__sub{top:-4px;left:100%;border-radius:var(--arit-radius)}

/* ---------- content ---------- */
.site-grid{max-width:1240px;margin:0 auto;gap:1rem;padding:.8rem 0 0}
.grid-child>.card,.container-component>.card{border:1px solid var(--arit-line);border-radius:var(--arit-radius);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.main-top.card,.main-bottom.card,.top-a.card,.top-b.card,.sidebar-right.card,.sidebar-left.card{margin-bottom:1rem;border:1px solid var(--arit-line);border-radius:var(--arit-radius);background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
h1,h2,h3,h4{font-weight:700;color:var(--arit-gold-d)}
h2{font-size:1.45rem}h3{font-size:1.22rem}
.card-header,.card>h3,.mod-custom>h3{background:linear-gradient(180deg,#fbf7f0,#f4ebdd);border-bottom:2px solid var(--arit-gold-l);
  color:var(--arit-gold-d);font-weight:700;border-radius:var(--arit-radius) var(--arit-radius) 0 0}
.card-body{background:#fff}
.module-title{background:linear-gradient(180deg,#fbf7f0,#f4ebdd)}
.card .module-title h3,.card h3.card-title{margin:0}
.sidebar-right h3,.main-bottom h3,.bottom-a h3,.bottom-b h3{font-size:1.05rem}
table.table{font-size:.95rem}
.btn-primary{background:var(--arit-gold);border-color:var(--arit-gold-d)}
.btn-primary:hover{background:var(--arit-gold-d)}

/* ---------- hero slider ---------- */
.arit-slider{position:relative;overflow:hidden;border:1px solid var(--arit-line);border-radius:var(--arit-radius);
  box-shadow:0 2px 10px rgba(0,0,0,.12);background:#000}
.arit-slider img{display:block;width:100%;height:auto;max-height:430px;object-fit:cover;opacity:0;position:absolute;top:0;left:0;animation:aritfade 30s infinite}
.arit-slider img:first-child{position:relative}
.arit-slider img:nth-child(1){animation-delay:0s}
.arit-slider img:nth-child(2){animation-delay:6s}
.arit-slider img:nth-child(3){animation-delay:12s}
.arit-slider img:nth-child(4){animation-delay:18s}
.arit-slider img:nth-child(5){animation-delay:24s}
@keyframes aritfade{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.arit-slider img{animation:none;position:relative;opacity:1}}

/* ---------- news columns ---------- */
.arit-news{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.arit-news .card{height:100%}
.arit-news ul{list-style:none;margin:0;padding:0}
.arit-news .mod-articles-category-title{display:block;padding:.4rem 0 .15rem;font-weight:600;font-size:.98rem;line-height:1.45;
  border-bottom:1px dashed #eee}
.arit-news .mod-articles-category-date{display:block;color:#999;font-size:.82rem;margin-bottom:.35rem}
.arit-news .mod-articles-category-group,.arit-news .mod-articles-category-category{display:none}

/* ---------- footer / bottom ---------- */
.container-bottom-a,.container-bottom-b{background:linear-gradient(180deg,#faf7f1,#f1ece2);border-top:2px solid var(--arit-gold-l)}
.container-bottom-a .card,.container-bottom-b .card{background:transparent;border:0;box-shadow:none}
.container-footer,.footer{background:linear-gradient(180deg,#6f4c1c,#8a5f24);color:#f7efe2;padding:.6rem 0}
.footer a,.container-footer a{color:#ffe6bd}
.mod-footer{color:#f7efe2;text-align:center;font-size:.9rem}

/* ---------- sidebar ---------- */
.container-sidebar-right .card{border-top:3px solid var(--arit-gold-l)}
.container-sidebar-right .mod-custom,.container-sidebar-right .card-body{font-size:.95rem}

/* ---------- misc ---------- */
.gs-bar-wrapper{background:#000}
.breadcrumb{background:transparent;font-size:.9rem;padding:.35rem 0}
.pagination{justify-content:center}
img{max-width:100%;height:auto}
@media (max-width:992px){
  .navbar-brand .brand-logo img.logo{max-height:64px}
  .mod-menu.nav>li>a{padding:.6rem .7rem;font-size:.93rem}
  .site-grid{padding:.5rem}
}

/* ---------- 3 คอลัมน์ข่าว (top-b) ---------- */
.container-top-b{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;align-items:start}
.container-top-b .card{height:100%;margin:0}
.container-top-b .card-body{padding:.9rem 1rem}
.container-top-b h3{margin:0;font-size:1.02rem}
.container-top-b ul{list-style:none;margin:0;padding:0}
.container-top-b li{padding:.32rem 0;border-bottom:1px dashed #eee;line-height:1.5}
.container-top-b li:last-child{border-bottom:0}
.container-top-b a{font-weight:600;font-size:.96rem}
.container-top-b .mod-articles-category-date{color:#999;font-size:.8rem}
.main-top>.card-body,.main-bottom>.card-body,.top-a>.card-body,.top-b>.card-body{padding:1rem 1.1rem}
/* ปุ่ม/ลิงก์อ่านต่อ */
.readmore a,.mod-articles-category-readmore a{font-size:.85rem;color:#a5732f}

/* ---------- การ์ด/หัวข้อให้ตรงกับ selector จริงของ Cassiopeia ---------- */
.main-top.card>.card-body>h3,.main-bottom.card>.card-body>h3,.top-b.card>.card-body>h3{
  background:linear-gradient(180deg,#fbf7f0,#f4ebdd);border-bottom:2px solid var(--arit-gold-l);
  color:var(--arit-gold-d);margin:-1rem -1.1rem .8rem;padding:.55rem .9rem;border-radius:var(--arit-radius) var(--arit-radius) 0 0}
.grid-child>.card,.main-top.card,.main-bottom.card{border-radius:var(--arit-radius)}
.mod-articlescategory li{padding:.35rem 0;border-bottom:1px dashed #eee}
.mod-articlescategory li:last-child{border-bottom:0}
.mod-articlescategory .mod-articles-category-title{font-weight:600;font-size:.97rem;line-height:1.5}
.mod-articlescategory .mod-articles-category-date{color:#999;font-size:.8rem;display:block;margin-top:.1rem}
.mod-articlescategory p.mod-articles-category-readmore{margin:.15rem 0 0;font-size:.85rem}

/* ---------- polish: บทความ/ตาราง/ค้นหา/iframe ---------- */
.com-content-article__title,.page-header h2,.com-content-category__title{position:relative;padding-bottom:.4rem}
.com-content-article__title:after,.page-header h2:after{content:"";display:block;width:70px;height:3px;
  background:linear-gradient(90deg,var(--arit-gold-d),var(--arit-gold-l));margin-top:.35rem;border-radius:2px}
.com-content-article__body img{border-radius:var(--arit-radius)}
.table{border-collapse:collapse}
.table td,.table th{border:1px solid var(--arit-line);padding:.5rem .6rem;vertical-align:top}
.mod-custom table td{border-color:#ece7de}
.container-sidebar-right form input[type="search"],.container-sidebar-right form .form-control{
  border:1px solid var(--arit-line);border-radius:var(--arit-radius);padding:.45rem .6rem;width:100%}
.container-sidebar-right form .btn{margin-top:.4rem;width:100%}
.wb-c-iframe-container,.mod-custom iframe{border-radius:var(--arit-radius);overflow:hidden;max-width:100%}
.mod-custom iframe{width:100%;border:0}
.pagination .page-link{color:var(--arit-gold-d)}
.pagination .active .page-link{background:var(--arit-gold);border-color:var(--arit-gold);color:#fff}
.btn-outline-primary{color:var(--arit-gold-d);border-color:var(--arit-gold-l)}
.btn-outline-primary:hover{background:var(--arit-gold);border-color:var(--arit-gold);color:#fff}
/* ลิงก์เมนูย่อยแสดงลูกศรนำทาง */
.mod-menu .deeper>a:after{content:" \25BE";font-size:.75em;opacity:.85}
.mod-menu .mod-menu__sub .deeper>a:after{content:" \25B8"}
/* แถบ sidebar ให้เป็นกล่องหัวทอง */
.sidebar-right.card>.card-body>h3,.bottom-a.card>.card-body>h3,.bottom-b.card>.card-body>h3{
  background:linear-gradient(180deg,#fbf7f0,#f4ebdd);border-bottom:2px solid var(--arit-gold-l);
  color:var(--arit-gold-d);margin:-1rem -1.1rem .8rem;padding:.5rem .9rem;border-radius:var(--arit-radius) var(--arit-radius) 0 0}
@media (max-width:640px){
  .site-grid{padding:.4rem}
  .arit-slider img{max-height:230px}
  h2{font-size:1.25rem}
}


/* ---------- mobile: menu as single horizontally-scrollable row (was a 372px gold block) ---------- */
@media (max-width:768px){
  .container-nav{overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .container-nav .mod-menu.nav,.mod-menu.nav{flex-wrap:nowrap!important;white-space:nowrap;font-size:.92rem}
  .container-nav .mod-menu.nav>li,.mod-menu.nav>li{flex:0 0 auto}
  .mod-menu.nav>li>a{padding:.5rem .7rem}
  .mod-menu.nav::-webkit-scrollbar{height:5px}
  .mod-menu.nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border-radius:3px}
  .container-topbar .mod-languages,.container-topbar .mod-languages a{padding:.15rem .35rem;font-size:.8rem}
  .container-header{padding:.5rem 0}
}


/* ---------- mobile v2: เมนูเป็นกล่องขาวเลื่อนได้ + กดผู้ปกครองแล้วกางเมนูย่อย (เดิมกางหมด = บล็อกทอง 348px) ---------- */
@media (max-width:768px){
  .container-nav{background:#fff;max-height:52vh;overflow-y:auto;overflow-x:hidden;
    border-bottom:3px solid var(--arit-gold-l);padding:0}
  .container-nav .mod-menu.nav,.mod-menu.nav{flex-direction:column;flex-wrap:nowrap;white-space:normal;
    background:#fff;font-size:.95rem}
  .container-nav .mod-menu.nav>li,.mod-menu.nav>li{width:100%;flex:0 0 auto;border-bottom:1px solid #efe9df}
  .mod-menu.nav>li>a{display:block;color:var(--arit-gold-d);padding:.62rem .85rem;white-space:normal}
  .mod-menu.nav>li>a:hover{background:#faf7f2}
  .mod-menu__sub{display:none;position:static!important;box-shadow:none;min-width:0;
    background:#faf7f2!important;padding:.15rem 0}
  .mod-menu.nav>li:focus-within>.mod-menu__sub,
  .mod-menu.nav>li:hover>.mod-menu__sub,
  .mod-menu__sub li:focus-within>.mod-menu__sub,
  .mod-menu__sub li:hover>.mod-menu__sub{display:block}
  .mod-menu__sub .mod-menu__sub{background:#f4efe6!important}
  .mod-menu__sub a{padding:.45rem .85rem .45rem 1.5rem!important;color:#6b5a44!important;font-size:.9rem}
  .mod-menu__sub .mod-menu__sub a{padding-left:2.2rem!important}
}