/**
 * Ulannii — the account menu behind the header's person icon.
 *
 * header-account.js builds the panel and flags the body once it exists; every
 * rule here is scoped to that flag so nothing is hidden or restyled unless the
 * replacement is actually on the page.
 *
 * The panel mirrors the account sidebar on the member pages — same icons, same
 * order, same badge — because they are the same list of links and reading as
 * one thing is the point.
 */

.ast-header-account-wrap.u-account {
	position: relative;
}

.u-account__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 1000;
	min-width: 268px;
	padding: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #eaecf0;
	border-radius: 12px;
	box-shadow: 0 16px 44px rgba(20, 28, 38, 0.15);
}

/* A small pointer up to the icon, so the panel reads as belonging to it
   rather than floating loose over the page. */
.u-account__panel::before {
	content: "";
	position: absolute;
	top: -6px;
	right: 18px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-top: 1px solid #eaecf0;
	border-left: 1px solid #eaecf0;
	transform: rotate(45deg);
}

/* ---------- who you are ---------- */

.u-account__who {
	position: relative;
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 18px;
	border-bottom: 1px solid #f0f1f3;
}

.u-account__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: 50%;
	background: #f0f1f2;
	color: #5a6472;
}

.u-account__avatar svg {
	width: 18px;
	height: 18px;
}

.u-account__who-text {
	min-width: 0;
}

.u-account__name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: #26303b;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.u-account__role {
	display: block;
	margin-top: 1px;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	color: #6b7280;
}

/* ---------- the links ---------- */

.u-account__list {
	position: relative;
	margin: 0;
	padding: 6px 0;
	list-style: none;
}

.u-account__list li {
	margin: 0;
}

.u-account__link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 18px;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: #404b5a;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.u-account__link svg {
	width: 20px;
	height: 20px;
	flex: none;
	color: #7b8593;
}

.u-account__link:hover,
.u-account__link:focus-visible {
	color: #e2650f;
	background: #fdf0e4;
}

.u-account__link:hover svg,
.u-account__link:focus-visible svg {
	color: #e2650f;
}

.u-account__label {
	min-width: 0;
}

/* Unread announcements, matching the badge on the account sidebar. */
.u-account__count {
	margin-left: auto;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: #e5443b;
	color: #fff;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Signing out is not one of the places you go, so it sits apart. */
.u-account__link--out {
	margin-top: 6px;
	padding-top: 13px;
	border-top: 1px solid #f0f1f3;
	color: #b4453c;
}

.u-account__link--out svg {
	color: #b4453c;
}

.u-account__link--out:hover,
.u-account__link--out:focus-visible {
	color: #b4453c;
	background: #fdf1f0;
}

.u-account__link--out:hover svg {
	color: #b4453c;
}

/* ---------- the dot on the icon ---------- */

/* Something is waiting. Without this the only way to find out is to open the
   menu and look, which for a member who mostly wants to know whether there is a
   session tonight is one tap too many. */
.ast-header-account-wrap.u-account.has-unread .ast-header-account-link {
	position: relative;
}

.ast-header-account-wrap.u-account.has-unread .ast-header-account-link::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #e5443b;
	border: 2px solid #fff;
}

/* ---------- duplicate auth entries ---------- */

/* The registration and login buttons are menu items, so they also render
   inside the hamburger panel. With the account menu carrying them there is no
   reason to show them twice.
 *
 * Scoped by Astra's own `ast-header-break-point`, the class it puts on the
 * body while the mobile header is the one in use — rather than by the panel's
 * container, whose class name differs between Astra's off-canvas and dropdown
 * mobile menus. On desktop the two buttons stay — see the rule below for
 * what happens to the account icon there instead. */
.has-ulannii-account-menu.ast-header-break-point .btn-dangky,
.has-ulannii-account-menu.ast-header-break-point .btn-dangnhap {
	/* The Additional CSS in the Customizer sets `display: flex !important`
	   on these two, so hiding them has to carry the same weight. */
	display: none !important;
}

/* ---------- the icon itself ---------- */

/* Astra draws the account element as a bare glyph. The rest of the header's
   controls read as round buttons, so this one should too — and a filled circle
   is also a bigger tap target on a phone than a 19px outline.
 *
 * Scoped to `.u-account`, the class the script adds, so if the script never
 * runs the icon keeps Astra's own appearance rather than a half-styled one. */
.ast-header-account-wrap.u-account .ast-header-account-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #f0f1f2;
	color: #5a6472;
	transition: background 0.15s ease, color 0.15s ease;
}

.ast-header-account-wrap.u-account .ast-header-account-link:hover,
.ast-header-account-wrap.u-account .ast-header-account-link:focus-visible {
	background: #fdf0e4;
	color: #e2650f;
}

.ast-header-account-wrap.u-account .ast-header-account-link svg,
.ast-header-account-wrap.u-account .ast-header-account-link img {
	/* A touch larger than the 16px magnifier beside it: an outline person
	   leaves more empty space inside its own box than a magnifier does, so
	   at the same number it reads as the smaller of the two. */
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* header-account.js swaps Astra's solid silhouette for the same outline person
   used throughout the menu. That glyph is drawn with a stroke and no fill, so
   it has to opt out of the `fill: currentColor` above — left alone, that rule
   would flood the outline straight back into a silhouette. */
.ast-header-account-wrap.u-account .ast-header-account-link svg.u-account__glyph {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
}

/* While the menu is open the circle stays lit, so it is obvious which control
   the panel belongs to. */
.ast-header-account-wrap.u-account .ast-header-account-link[aria-expanded="true"] {
	background: #fdf0e4;
	color: #e2650f;
}

@media (max-width: 921px) {
	.ast-header-account-wrap.u-account .ast-header-account-link {
		width: 40px;
		height: 40px;
	}

	.ast-header-account-wrap.u-account .ast-header-account-link svg,
	.ast-header-account-wrap.u-account .ast-header-account-link img {
		width: 18px;
		height: 18px;
	}
}

/* ---------- guests on a wide screen ---------- */

/* Signed out, the desktop header carries Đăng ký and Đăng nhập as real buttons,
   and the account icon's menu would only offer those same two links again. One
   of the pair has to go, and the buttons are the clearer half: they say what
   they do without being opened first.
 *
 * Phones keep the icon, because there the two buttons live inside the hamburger
 * panel and the icon is the only thing on the bar that leads anywhere.
 *
 * Once signed in the buttons hide themselves (they carry `guest-only`) and this
 * rule stops applying, so the icon is what remains. */
body:not(.logged-in) #ast-desktop-header .ast-header-account {
	display: none;
}

/* ---------- the panel on a phone ---------- */

/* On a phone the panel spans the header instead of hanging off the icon. A
   268px card floating under a 40px circle reads as a tooltip; the reference
   design drops a full-width sheet, and so does this.
 *
 * Making the wrapper static hands positioning to the sticky site header above
   it — which is exactly the width and the bottom edge we want, without having
   to measure anything in script. */
.ast-header-break-point .ast-header-account-wrap.u-account {
	position: static;
}

.ast-header-break-point .u-account__panel {
	top: 100%;
	right: 0;
	left: 0;
	width: auto;
	min-width: 0;
	border-right: 0;
	border-left: 0;
	border-radius: 0 0 15px 15px;
}

/* The little pointer up to the icon only makes sense on a card that sits under
   it. A full-width sheet has nothing to point at. */
.ast-header-break-point .u-account__panel::before {
	display: none;
}

.ast-header-break-point .u-account__who {
	padding: 16px 24px;
}

.ast-header-break-point .u-account__list {
	padding: 8px 0 10px;
}

.ast-header-break-point .u-account__link {
	padding: 16px 24px;
	font-size: 16.5px;
}

.ast-header-break-point .u-account__link svg {
	width: 22px;
	height: 22px;
}

.ast-header-break-point .u-account__link--out {
	margin-top: 8px;
	padding-top: 18px;
}