/* 2026-10-23 home look shared by index.php / info.php / inext.php (load after index.css):
   palette, text title box (replaces ioh44.png), breadcrumb bar, category card, news list.
   Home-only parts stay in index_home.css, page-only parts in info.css / inext.css. */
:root{
	--hc-bg:#eef8fe; --hc-surface:#ffffff; --hc-fg:#101d2e; --hc-muted:#3f526a; --hc-line:#d6e6f2;
	--hc-brand:#0349a7; --hc-soft:#e3f3fd;
	--hc-c-intl:#8a5600; --hc-d-intl:#e9a53a;
	--hc-c-ug:#023d8f;   --hc-d-ug:#0349a7;
	--hc-c-gr:#0b5c94;   --hc-d-gr:#6cc4f0;
	--hc-c-moh:#a83f2d;  --hc-d-moh:#f2857a;
	--hc-c-all:#556a82;  --hc-d-all:#9fb3c8;
}
.k-intl{--t:#fbe0b0; --c:var(--hc-c-intl); --d:var(--hc-d-intl);}
.k-ug, .k-tr{--t:#cddcf6; --c:var(--hc-c-ug); --d:var(--hc-d-ug);}
.k-gr{--t:#c9e9fa; --c:var(--hc-c-gr); --d:var(--hc-d-gr);}
.k-moh{--t:#fbd2ca; --c:var(--hc-c-moh); --d:var(--hc-d-moh);}
.k-all{--t:#eef2f6; --c:var(--hc-c-all); --d:var(--hc-d-all);}

/* whole page soft blue-gray so the white cards and the blue title box stand out (whole page, not only the content area, to avoid a seam) */
body{ background:#edf2f8; }
#content{ padding-bottom:40px; }
#footer .container{ background-color:transparent; }

/* text title box (banner from home_theme.inc home_banner()) */
#header > .container{ background-color: #eaf4fd; background-image: radial-gradient(circle at 96% 120%, rgba(242,133,122,.28) 0, rgba(242,133,122,0) 170px), radial-gradient(circle at 82% -30%, rgba(108,196,240,.45) 0, rgba(108,196,240,0) 220px), linear-gradient(120deg, #d3e6fb 0%, #eaf4fd 50%, #fdf3e3 100%); background-size: auto; border: 1px solid #cddcf0; border-radius: 14px; margin-top: 16px; min-height: 0; box-shadow: 0 2px 10px rgba(3,73,167,.08); }
#header > .container > .clearfix:first-child, #header > .container > .clearfix:last-child{ display: none; }
#header > .container > .clearfix{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 26px 30px; }
#header > .container > .clearfix:after{ display: none; }
#banner{ float: none; }
.hb-en{ font-size: .75rem; letter-spacing: .28em; color: #6a83a3; }
.hb-title{ margin-top: 2px; font-size: 1.15rem; font-weight: bold; letter-spacing: .1em; color: var(--hc-fg); }
.hb-title b{ display: block; font-size: 2.1rem; line-height: 1.25; letter-spacing: .12em; color: var(--hc-brand); }
.hb-dots{ display: flex; gap: 8px; margin-top: 10px; }
.hb-dots i{ width: 28px; height: 5px; border-radius: 3px; background: var(--d); }
#welcome{ float: none; flex-wrap: wrap; row-gap: 8px; margin: 0; background: none; color: var(--hc-fg); font-size: .95rem; font-weight: normal; display: flex; align-items: center; }
#welcome li{ float: none; white-space: nowrap; }
#welcome .boundary:after{ color: #b9c9dc; }
#header #welcome a{ color: var(--hc-brand); font-size: .95rem; font-weight: bold; }
#header #welcome a:hover{ background: none; color: var(--hc-c-gr); }
#header #welcome #login a{ display: inline-block; padding: 6px 20px; border-radius: 999px; background: var(--hc-brand); color: #fff; }
#header #welcome #login a:hover{ background: var(--hc-c-gr); color: #fff; }

/* breadcrumb bar under the title box (index.php hides it in index_home.css) */
#header > .hpath{ background: transparent; opacity: 1; margin-top: 12px; }
#header > .hpath #mpath{ float: none; padding: 0 4px; color: var(--hc-muted); font-size: .95rem; }
#header > .hpath #mpath a{ color: var(--hc-brand); font-size: .95rem; }
#header > .hpath #mpath a:hover{ color: var(--hc-c-gr); text-decoration: underline; }
#header > .hpath #path, #header > .hpath #imenu{ display: none; }
.breadcrumb-container{ display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; padding: 6px 0; font-size: .95rem !important; color: var(--hc-muted) !important; }
.breadcrumb-container .bc-sep{ color: #9fb3c8; font-size: 1.25em; line-height: 1; margin: 0 7px; }
#header > .hpath .breadcrumb-container a{ display: inline-flex; align-items: center; padding: 2px 12px; line-height: 1.5; border: 1px solid #b6cde6; border-radius: 999px; background: var(--hc-surface); color: var(--hc-brand) !important; font-size: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(3,73,167,.08); transition: background-color .15s, border-color .15s; }
#header > .hpath .breadcrumb-container a:hover, #header > .hpath .breadcrumb-container a:focus-visible{ background: var(--hc-soft); border-color: var(--hc-d-gr); text-decoration: none; }
.breadcrumb-container .bc-current{ color: var(--hc-fg); font-weight: bold; }

/* category card */
.hc-cat{ background:var(--hc-surface); border:1px solid var(--hc-line); border-radius:14px; overflow:hidden; min-width:0; box-shadow:0 2px 10px rgba(3,73,167,.06); }
.hc-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 18px; background:linear-gradient(120deg, var(--t) 0%, var(--hc-surface) 100%); border-bottom:3px solid var(--d); }
.hc-head h3{ margin:0; font-size:1.45rem; font-weight:bold; letter-spacing:.06em; color:var(--c); }

/* news list */
.minfo{ max-width:none; }
.hn{ margin-top:28px; background:var(--hc-surface); border:1px solid var(--hc-line); border-radius:12px; overflow:hidden; color:var(--hc-fg); }
.hn-head{ background:linear-gradient(120deg, #cddcf6 0%, #ffffff 100%); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hc-line); }
.hn-head h3{ margin:0; font-size:1.2rem; color:var(--hc-brand); }
.hn-links{ display:flex; flex-wrap:wrap; gap:14px; font-size:.9rem; }
.hn-links a{ color:var(--hc-muted); text-decoration:none; }
.hn-links a:hover{ color:var(--hc-brand); }
.hn-list{ display:block; margin:0; padding:0; list-style:none; width:100%; }
.hn-row{ float:none; display:grid; grid-template-columns:6.5em 10em minmax(0, 1fr); gap:14px; align-items:center; padding:12px 18px; border-top:1px solid var(--hc-line); }
.hn-row:first-child{ border-top:0; }
.hn-date time{ font-size:.88rem; color:var(--hc-muted); font-variant-numeric:tabular-nums; }
.hn-pin{ font-size:.8rem; color:var(--hc-brand); font-weight:bold; }
.hn-chip{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; font-size:.78rem; padding:1px 8px; border-radius:999px; color:var(--c); border:1px solid var(--d); }
.hn-title{ min-width:0; }
.hn-title a{ color:var(--hc-fg); text-decoration:none; }
.hn-title a:hover{ color:var(--hc-brand); }
.hn-new{ margin-left:6px; padding:0 5px; border-radius:4px; font-size:.72rem; font-weight:bold; color:#fff; background:var(--hc-d-moh); vertical-align:2px; }
.hn-more{ border-top:1px solid var(--hc-line); text-align:center; }
.hn-more a{ display:block; padding:12px; color:var(--hc-brand); font-weight:bold; text-decoration:none; }
.hn-more a:hover{ background:var(--hc-soft); }

@media (max-width: 900px){
	.hn-row{ grid-template-columns:auto minmax(0, 1fr); gap:4px 10px; }
	.hn-title{ grid-column:1 / -1; }
}

/* 2026-10-23 footer (indexf.htm): quiet centered line with dot separators; stacked on phones (no dangling separators) */
#footer > .container{ padding: 0; }
#footer .footer{ margin-top: 8px; padding: 18px 0 26px; border-top: 1px solid var(--hc-line); }
#footer ul{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; left: auto; transform: none; width: 100%; font-size: .88rem; color: var(--hc-muted); }
#footer li{ float: none; display: flex; align-items: center; }
#footer .boundary:after{ content: "\00B7"; padding: 0 12px; color: #b9c9dc; font-weight: bold; }
#footer a{ display: inline-flex; align-items: center; gap: 5px; color: var(--hc-muted); font-size: inherit; }
#footer a:hover{ color: var(--hc-brand); text-decoration: underline; }
#footer a img{ opacity: .65; }
@media (max-width: 600px){
	#footer ul{ flex-direction: column; gap: 4px; }
	#footer li{ width: auto; }
	#footer .boundary:after{ display: none; }
}

/* status badges (index.php exam cards, inext.php) */
.hc-sts{ display:flex; flex-wrap:wrap; gap:4px; }
.hc-st{ flex:none; font-style:normal; font-size:.85rem; font-weight:bold; padding:1px 8px; border-radius:999px; white-space:nowrap; }
.st-open, .st-done{ color:#0f6339; background:#dcf2e6; }
.st-soon{ color:#0b5c94; background:#dcefff; }
.st-mine{ color:#fff; background:var(--c, #023d8f); }
.st-will{ color:#0b6461; background:#d9f2ef; }
.st-willq{ color:#35585a; background:#e3eeee; }
.st-query{ color:#33428f; background:#e4e8f8; }
.st-wait{ color:#7d4f00; background:#fbe9c6; }
.st-pay{ color:#962f1c; background:#fbdcd6; }
.st-end{ color:#4d5b6c; background:#e9eef3; }

/* 2026-10-23 compact title box (home_banner(true): login, forgot / change password; whole page fits one screen) */
#header > .container:has(.hb-compact){ margin-top: 10px; }
#header > .container:has(.hb-compact) > .clearfix{ padding: 14px 24px; }
.hb-compact .hb-en{ font-size: .68rem; }
.hb-compact .hb-title{ font-size: 1rem; }
.hb-compact .hb-title b{ font-size: 1.6rem; }
.hb-compact .hb-dots{ margin-top: 6px; }
.hb-compact .hb-dots i{ height: 4px; width: 22px; }
body:has(.hb-compact) #header > .hpath{ margin-top: 6px; }
body:has(.hb-compact) #content{ padding-bottom: 12px; }
body:has(.hb-compact) #footer .footer{ margin-top: 4px; padding: 10px 0 12px; }
body:has(.hb-compact) #content > .container{ margin-top: 8px; padding-bottom: 18px; }
body:has(.hb-compact) #content > .container > .title{ padding-top: 12px; padding-bottom: 12px; margin-bottom: 14px; }

/* 2026-10-23 no "back to top" arrow on the home-look pages (flogin.js fades it in on scroll, hence !important) */
#go-top{ display: none !important; }