@charset "utf-8";
/* 20261005 頂部選單改版：精緻化、好操作、加入回官網
   顏色走 CSS 變數，開發者模式的「背景／文字」色票會改寫 --tn-bg / --tn-dark / --tn-fg */

#topLineBgDiv
{
	--tn-bg: var( --main-color );
	--tn-dark: var( --sub-color );
	--tn-fg: #fff;
	--tn-h: 56px;

	min-height: var( --tn-h );
	line-height: normal;
	background: var( --tn-bg );
	box-shadow: 0 2px 10px rgba( 0, 40, 70, .18 );
}
#topLineBgDiv .navbar
{
	min-height: var( --tn-h );
	margin: 0;
	padding: 0 16px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

/* ---- 品牌 + 倒數 ---- */
#topLineBgDiv .tn_brand
{
	height: var( --tn-h );
	padding: 0;
	margin: 0 auto 0 0 !important;
	display: flex;
	align-items: center;
	gap: 12px;
	float: none;
	color: var( --tn-fg );
	text-decoration: none;
	outline: none;
}
#topLineBgDiv .tn_brand:focus-visible
{
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, .8 );
	border-radius: 6px;
}
.tn_brand_name
{
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 1px;
	white-space: nowrap;
}
.tn_brand_name small
{
	font-size: 11px;
	font-weight: 400;
	opacity: .75;
	margin: 0 1px;
}
.tn_timer
{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 10px;
	border-radius: 13px;
	background: rgba( 255, 255, 255, .14 );
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.tn_timer #defaultCountdown
{
	width: auto;
	min-width: 52px;
	line-height: 1;
}
.tn_timer .countdown-row, .tn_timer .countdown-section
{
	display: inline;
	float: none;
	padding: 0;
	width: auto;
	font-size: 13px;
}
.tn_timer .countdown-amount
{
	font-size: 13px;
	font-weight: 600;
}
.tn_timer .countdown-period
{
	display: inline;
	font-size: 11px;
	margin: 0 3px 0 1px;
	opacity: .8;
}

/* ---- 選單 ---- */
#topLineBgDiv .tn_collapse
{
	padding: 0;
	border: 0;
	box-shadow: none;
}
#topLineBgDiv .tn_menu
{
	height: auto;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 2px;
	float: none !important;
}
#topLineBgDiv .tn_menu > li,
#topLineBgDiv .tn_menu > li.active
{
	height: auto;
	float: none;
	border: 0;
	background: transparent;
}
#topLineBgDiv .tn_menu > li > a.tn_link
{
	display: flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	padding: 0 12px;
	border-radius: 8px;
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	color: var( --tn-fg );
	background: transparent;
	text-decoration: none;
	opacity: .92;
	outline: none;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
#topLineBgDiv .tn_menu > li > a.tn_link i
{
	font-size: 16px;
	line-height: 1;
	opacity: .9;
}
#topLineBgDiv .tn_menu > li > a.tn_link:hover
{
	opacity: 1;
	background: rgba( 255, 255, 255, .14 );
}
#topLineBgDiv .tn_menu > li > a.tn_link:focus-visible
{
	opacity: 1;
	box-shadow: 0 0 0 2px rgba( 255, 255, 255, .8 );
}
#topLineBgDiv .tn_menu > li.active > a.tn_link,
#topLineBgDiv .tn_menu > li.active > a.tn_link:hover
{
	opacity: 1;
	color: var( --tn-bg );
	background: #fff;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, .15 );
}

/* 回官網：外框樣式，和系統內功能做區隔 */
#topLineBgDiv .tn_menu > li.tn_site > a.tn_link
{
	margin-left: 6px;
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .45 );
}
#topLineBgDiv .tn_menu > li.tn_site > a.tn_link:hover
{
	box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, .8 );
}
#topLineBgDiv .tn_menu > li.tn_site .tn_ext_ico
{
	font-size: 11px;
	opacity: .7;
}

/* 分隔 + 使用者 */
#topLineBgDiv .tn_menu > li.tn_sep
{
	width: 1px;
	height: 22px;
	margin: 0 8px;
	background: rgba( 255, 255, 255, .3 );
}
#topLineBgDiv .tn_user
{
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px 0 2px;
	color: var( --tn-fg );
	font-size: 14px;
	white-space: nowrap;
}
.tn_avatar
{
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var( --tn-bg );
	font-weight: 700;
	font-size: 14px;
}
#topLineBgDiv .tn_menu > li.tn_logout > a.tn_link:hover
{
	background: rgba( 225, 38, 74, .85 );
}

/* ---- 漢堡鈕 ---- */
#topLineBgDiv .navbar-toggle
{
	margin: 0;
	padding: 8px 10px;
	border-radius: 8px;
}
#topLineBgDiv .navbar-toggle:hover, #topLineBgDiv .navbar-toggle:focus
{
	background: rgba( 255, 255, 255, .14 );
}
#topLineBgDiv .navbar-toggle .icon-bar
{
	background-color: var( --tn-fg );
}

/* ---- 1599 以下：收掉問候語，只留頭像（滑過顯示名稱） ---- */
@media screen and (min-width: 1024px) and (max-width: 1599px)
{
	#topLineBgDiv .navbar { padding: 0 12px; flex-wrap: nowrap; }
	#topLineBgDiv .tn_menu { gap: 1px; }
	#topLineBgDiv .tn_uname { display: none; }
	#topLineBgDiv .tn_menu > li > a.tn_link { padding: 0 7px; gap: 5px; }
	#topLineBgDiv .tn_menu > li.tn_site .tn_ext_ico { display: none; }
	#topLineBgDiv .tn_menu > li.tn_sep { margin: 0 6px; }
	#topLineBgDiv .tn_brand { gap: 10px; }
}
/* 1024～1279：維持一行，縮小品牌、收掉選單圖示 */
@media screen and (min-width: 1024px) and (max-width: 1279px)
{
	.tn_brand_name { font-size: 16px; letter-spacing: 0; }
	.tn_brand_name small { display: none; }
	#topLineBgDiv .tn_brand { gap: 8px; padding-right: 12px; }
	#topLineBgDiv .tn_menu > li > a.tn_link { padding: 0 8px; font-size: 14px; }
	#topLineBgDiv .tn_menu > li.tn_item:not(.tn_site):not(.tn_logout) > a.tn_link i { display: none; }
}

/* ---- 1023 以下：漢堡鈕 + 下拉清單（Bootstrap 3 預設 768 才收合，這裡提高到 1024） ---- */
@media screen and (min-width: 768px) and (max-width: 1023px)
{
	#topLineBgDiv .navbar-toggle { display: block; }
	#topLineBgDiv .tn_collapse.collapse { display: none !important; }
	#topLineBgDiv .tn_collapse.collapse.in { display: block !important; }
	#topLineBgDiv .tn_menu > li { float: none; }
}
@media screen and (max-width: 1023px)
{
	#topLineBgDiv .navbar { padding: 0 12px; }
	#topLineBgDiv .tn_brand { gap: 8px; }
	.tn_brand_name { font-size: 16px; letter-spacing: 0; }
	.tn_brand_name small { display: none; }
	#topLineBgDiv .tn_collapse
	{
		width: 100%;
		border-top: 1px solid rgba( 255, 255, 255, .2 );
	}
	#topLineBgDiv .tn_menu
	{
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 8px 0 12px;
	}
	#topLineBgDiv .tn_menu > li > a.tn_link
	{
		height: 44px;
		padding: 0 14px;
		font-size: 16px;
	}
	#topLineBgDiv .tn_menu > li.tn_site > a.tn_link { margin-left: 0; }
	#topLineBgDiv .tn_menu > li.tn_sep
	{
		display: block;
		width: auto;
		height: 1px;
		margin: 6px 0;
	}
	#topLineBgDiv .tn_user { padding: 6px 14px; }
	#topLineBgDiv .tn_uname { display: inline; }
}