.searchGroup { position: relative; padding: 0 40px; .btnType { gap: 0px 24px !important; :global { .n-button { height: 37px; padding: 0 24px; font-size: 18px; color: rgba(0, 0, 0, .6); &.n-button--primary-type { font-weight: bold; color: #fff; } } } } :global { .n-form { position: relative; } .n-form-item { .n-form-item-label { font-size: 17px; font-weight: 600; color: #131415; line-height: 24px; } .n-button { height: 32px; font-size: 17px; border-radius: 8px; padding: 4Px 20px; font-size: max(17px, 12Px); color: rgba(0, 0, 0, 0.6); } .n-button--primary-type { color: #131415; } } .n-form-item-feedback-wrapper { min-height: 14px; } } .inputSearch { width: 360px; height: 42px; font-size: 16px; --n-height: 42px !important; img { width: 18px; height: 18px; } :global { .n-input-wrapper { padding-left: 12px; padding-right: 4px; height: 42px !important; } .n-button { height: 34px; font-size: 15px; font-weight: 500; width: auto; } } } .searchCatatory { display: flex; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid #F2F2F2; margin-bottom: 20px; .addTrain { height: 37px; border-radius: 8px; font-size: 18px; background-color: #E8F4FF; color: #0378EC; img { width: 16px; height: 16px; margin-right: 8px; } } } } .spaceSection { width: 100%; padding-right: 40px; gap: 8px 12px !important; &>div { line-height: var(--n-blank-height); &:last-child { // margin-left: -12Px; } } } .collaoseGroup { height: var(--n-blank-height); position: absolute; display: flex; align-items: center; padding-left: 8px; } .collapseWrap { width: 100%; display: flex; flex-direction: row; align-items: flex-end; } .collaoseBtn { width: 32px; height: 32px; cursor: pointer; } .collaoseBtn.isStart { transform: rotate(-180deg); } .collapsSection { // padding-top: 10px; } .isHidden { overflow: hidden; transition: 1s all ease-in; } .hideButton { visibility: hidden; height: 0 !important; line-height: 0 !important; } .popSelect { font-size: 16px; width: 200px; box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08); border-radius: 11px; --n-option-height: 34px; :global { .n-base-select-option__content { width: 80% !important; } } } .spaceSection2 { &>div { height: 34Px !important; display: flex; align-items: center; } } .textBtn { background: #fff; border-radius: 8Px; padding: 4Px 20px; font-size: max(17px, 12Px); color: rgba(0, 0, 0, 0.6); cursor: pointer; display: flex; align-items: center; font-weight: 500; line-height: 24px; .iconArrow { display: inline-block; margin-left: 8px; width: 8px; height: 5px; background: url('@/views/content-information/images/icon-arrow2.png') no-repeat center center / contain; transform: rotate(180deg); } &:hover, &.textBtnActive { background: #D2ECFF; font-weight: 500; color: #131415; } &:hover { .iconArrow { transform: rotate(0deg); } } }